update/delete billing alert

resources/js/views/Admin/Users/UserTabs/UserSubscription.vue

@@ -1,33 +1,68 @@
 <template>
     <PageTab :is-loading="isLoading">
-		<div v-if="subscription" class="card shadow-card">
-			<div class="md:flex md:space-x-10 mb-8">
-				<div class="md:mb-0 mb-6">
-					<b class="block leading-5 text-lg">
-						{{ status }}
-					</b>
-					<small class="text-gray-500">
-						{{ $t('We will send you a notification upon Subscription expiration') }}
-					</small>
-				</div>
-				<div>
-					<b class="block leading-5 text-lg">
-						{{ price }}
-					</b>
-					<small class="text-gray-500">
-						{{ subscription.relationships.plan.data.attributes.name }}
-					</small>
-				</div>
-			</div>
 
-			<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
-				<b class="mb-3 block text-sm text-gray-400">
-					{{ limit.message }}
-				</b>
-				<ProgressLine :data="limit.distribution" />
-			</div>
+		<UserMeteredSubscription
+			v-if="subscription && config.subscriptionType === 'metered'"
+			:subscription="subscription"
+			:user="user"
+		/>
+
+		<UserFixedSubscription
+			v-if="subscription && config.subscriptionType === 'fixed'"
+			:subscription="subscription"
+			:user="user"
+		/>
+
+		<!--Transactions-->
+		<div class="card shadow-card">
+			<FormLabel icon="file-text">
+                {{ $t('Transactions') }}
+            </FormLabel>
+
+			<DatatableWrapper
+				@init="isLoading = false"
+				:api="'/api/subscriptions/admin/users/' + this.$route.params.id + '/transactions'"
+				:paginator="true"
+				:columns="columns"
+			>
+                <template slot-scope="{ row }">
+                    <tr class="border-b dark:border-opacity-5 border-light border-dashed">
+                        <td class="py-4">
+                            <span class="text-sm font-bold">
+								{{ row.data.attributes.note }}
+							</span>
+                        </td>
+                        <td>
+							<ColorLabel :color="$getTransactionStatusColor(row.data.attributes.status)">
+                                {{ row.data.attributes.status }}
+							</ColorLabel>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
+                                {{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold">
+                                {{ row.data.attributes.created_at }}
+                            </span>
+                        </td>
+                        <td class="text-right">
+                            <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
+                        </td>
+                    </tr>
+                </template>
+
+				<!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('admin_page_user.invoices.empty') }}</p>
+                    </InfoBox>
+                </template>
+            </DatatableWrapper>
 		</div>
 
+		<!--Empty Message-->
 		<div v-if="! subscription && !isLoading" class="card shadow-card">
 			<InfoBox style="margin-bottom: 0">
 				<p>{{ $t("User don't have any subscription") }}</p>
@@ -37,10 +72,14 @@
 </template>
 
 <script>
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-	import ProgressLine from "../../../../components/Admin/ProgressLine"
+    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
+	import FormLabel from "../../../../components/Others/Forms/FormLabel";
+	import ColorLabel from "/resources/js/components/Others/ColorLabel"
 	import PageTab from '/resources/js/components/Others/Layout/PageTab'
 	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+	import UserMeteredSubscription from "./UserMeteredSubscription";
+	import UserFixedSubscription from "./UserFixedSubscription"
+	import {mapGetters} from "vuex";
 	import axios from 'axios'
 
 	export default {
@@ -49,30 +88,50 @@
 			'user'
 		],
 		components: {
-			ProgressLine,
-			ButtonBase,
+			UserMeteredSubscription,
+			UserFixedSubscription,
+			DatatableWrapper,
+			ColorLabel,
+			FormLabel,
 			InfoBox,
 			PageTab,
 		},
 		computed: {
-			status() {
-				return {
-					'active': `Active until ${this.subscription.attributes.renews_at}`,
-					'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
-				}[this.subscription.attributes.status]
-			},
-			price() {
-				return {
-					'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
-					'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
-				}[this.subscription.relationships.plan.data.attributes.interval]
-			},
+			...mapGetters([
+				'config',
+			]),
 		},
 		data() {
 			return {
 				subscription: undefined,
 				isLoading: true,
-				limitations: [],
+				columns: [
+					{
+						label: this.$t('Note'),
+						field: 'note',
+						sortable: true
+					},
+					{
+						label: this.$t('Status'),
+						field: 'status',
+						sortable: true
+					},
+					{
+						label: this.$t('admin_page_invoices.table.total'),
+						field: 'amount',
+						sortable: true
+					},
+					{
+						label: this.$t('Payed At'),
+						field: 'created_at',
+						sortable: true
+					},
+					{
+						label: this.$t('Service'),
+						field: 'driver',
+						sortable: true
+					},
+				],
 			}
 		},
 		created() {
@@ -80,37 +139,6 @@
 				.then(response => {
 					this.subscription = response.data.data
 
-					Object
-						.entries(this.user.data.meta.limitations)
-						.map(([key, item]) => {
-
-							let payload = {
-								color: {
-									'max_storage_amount': 'warning',
-									'max_team_members': 'purple',
-								},
-								message: {
-									'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
-									'max_team_members': `Total ${item.use} of ${item.total} Members`,
-								},
-								title: {
-									'max_storage_amount': `Storage`,
-									'max_team_members': `Team Members`,
-								}
-							}
-
-							this.limitations.push({
-								message: payload.message[key],
-								distribution: [
-									{
-										progress: item.percentage,
-										color: payload.color[key],
-										title: payload.title[key],
-									}
-								]
-							})
-						})
-
 					this.isLoading = false
 				})
 				.catch(error => {