Plan settings refactoring

resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue

@@ -21,13 +21,27 @@
 				{{ $t('Metered Billing Settings') }}
 			</FormLabel>
 
-			<AppInputSwitch :title="$t('Allow Registration Bonus')" :description="$t('User credit automatically user bonus to the balance after user registration.')" :is-last="! allowedRegistrationBonus">
+			<AppInputSwitch :title="$t('Allow Registration Bonus')" :description="$t('Credit user automatically bonus to his balance after registration.')">
 				<SwitchInput @input="$updateText('/admin/settings', 'allowed_registration_bonus', allowedRegistrationBonus)" v-model="allowedRegistrationBonus" :state="allowedRegistrationBonus" />
 			</AppInputSwitch>
 
-			<AppInputText v-if="allowedRegistrationBonus" :title="$t('Registration Bonus Amount')" :description="this.$t('This bonus will be automatically added when user successfully register his account.')" :is-last="true">
+			<AppInputText v-if="allowedRegistrationBonus" :title="$t('The Amount of Registration Bonus')" :description="$t('This bonus will be automatically added when user successfully register his account.')">
 				<input @input="$updateText('/admin/settings', 'registration_bonus_amount', registrationBonusAmount)" v-model="registrationBonusAmount" :placeholder="$t('Type registration bonus amount...')" type="number" class="focus-border-theme input-dark" />
 			</AppInputText>
+
+			<AppInputButton :title="$t('Metered Plan')" :description="$t('Your price set up for billing multiple features by user usage.')" :is-last="true">
+				<router-link v-if="config.isCreatedMeteredPlan" :to="{name: 'PlanMeteredSettings', params: {id: config.meteredPlanId}}">
+					<ButtonBase v-if="config.isCreatedMeteredPlan" class="sm:w-auto w-full" button-style="theme">
+						{{ $t('Plan Details') }}
+					</ButtonBase>
+				</router-link>
+
+				<router-link v-if="! config.isCreatedMeteredPlan" :to="{name: 'CreateMeteredPlan'}">
+					<ButtonBase class="sm:w-auto w-full" button-style="theme-solid">
+						{{ $t('Create Plan') }}
+					</ButtonBase>
+				</router-link>
+			</AppInputButton>
 		</div>
 
 		<!--Stripe method configuration-->
@@ -199,8 +213,10 @@
 
 <script>
     import {
-		Edit2Icon,
+		Edit2Icon, Trash2Icon,
 	} from 'vue-feather-icons'
+	import AppInputButton from "../../../../components/Admin/AppInputButton";
+	import DatatableWrapper from "../../../../components/Others/Tables/DatatableWrapper";
 	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
 	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
 	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
@@ -222,6 +238,8 @@
 	export default {
 		name: 'AppPayments',
 		components: {
+			AppInputButton,
+			DatatableWrapper,
 			ValidationObserver,
 			ValidationProvider,
 			AppInputSwitch,
@@ -233,6 +251,7 @@
 			ButtonBase,
 			CopyInput,
 			FormLabel,
+			Trash2Icon,
 			Edit2Icon,
 			SetupBox,
 			required,
@@ -288,6 +307,32 @@
 						secret: undefined,
 					}
 				},
+
+				columns: [
+					{
+						label: this.$t('Name'),
+						field: 'name',
+						sortable: true
+					},
+					{
+						label: this.$t('Currency'),
+						field: 'currency',
+						sortable: true
+					},
+					{
+						label: this.$t('Interval'),
+						field: 'interval',
+						sortable: true
+					},
+					{
+						label: this.$t('admin_page_plans.table.subscribers'),
+						sortable: false
+					},
+					{
+						label: this.$t('admin_page_user.table.action'),
+						sortable: false
+					},
+				]
 			}
 		},
 		methods: {

resources/js/views/Admin/Plans.vue

@@ -1,7 +1,9 @@
 <template>
     <div>
 		<div class="card shadow-card">
-			<div class="mb-6">
+
+			<!--Create button-->
+			<div v-if="! config.isCreatedMeteredPlan" class="mb-6">
 				<router-link :to="{name: createPlanRoute}">
 					<MobileActionButton icon="plus">
 						{{ $t('admin_page_plans.create_plan_button') }}
@@ -15,11 +17,16 @@
 
 					<!--Metered subscription-->
                     <tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td>
+                        <td class="py-4">
 							<router-link class="text-sm font-bold" :to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}">
                             	{{ row.data.attributes.name }}
 							</router-link>
                         </td>
+						<td>
+							<ColorLabel :color="$getPlanStatusColor(row.data.attributes.status)">
+								{{ row.data.attributes.status }}
+							</ColorLabel>
+						</td>
                         <td>
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.currency }}
@@ -44,6 +51,7 @@
                                     <Edit2Icon size="15" class="opacity-75" />
                                 </router-link>
                                 <router-link
+									v-if="row.data.attributes.status !== 'archived'"
 									:to="{name: 'PlanMeteredDelete', params: {id: row.data.id}}"
 									class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors"
 								>
@@ -135,8 +143,9 @@
     import EmptyPageContent from '/resources/js/components/Others/EmptyPageContent'
     import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
     import Spinner from '/resources/js/components/FilesView/Spinner'
+	import ColorLabel from "../../components/Others/ColorLabel";
+    import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
     import { mapGetters } from 'vuex'
 
     export default {
@@ -146,6 +155,7 @@
             EmptyPageContent,
             DatatableWrapper,
             SwitchInput,
+			ColorLabel,
             Trash2Icon,
             ButtonBase,
             Edit2Icon,
@@ -172,6 +182,11 @@
 							field: 'name',
 							sortable: true
 						},
+						{
+							label: this.$t('Status'),
+							field: 'status',
+							sortable: true
+						},
 						{
 							label: this.$t('Currency'),
 							field: 'currency',

resources/js/views/Admin/Plans/MeteredPlan.vue

@@ -26,6 +26,7 @@
 	import CardNavigation from "../../../components/Admin/CardNavigation"
 	import Spinner from '/resources/js/components/FilesView/Spinner'
 	import axios from 'axios'
+	import {mapGetters} from "vuex";
 
 	export default {
 		name: 'MeteredPlan',
@@ -33,11 +34,12 @@
 			CardNavigation,
 			Spinner,
 		},
-		data() {
-			return {
-				isLoading: true,
-				plan: undefined,
-				pages: [
+		computed: {
+			...mapGetters([
+				'config'
+			]),
+			pages() {
+				let pages = [
 					{
 						title: this.$t('admin_page_plans.tabs.settings'),
 						route: 'PlanMeteredSettings',
@@ -46,11 +48,22 @@
 						title: this.$t('admin_page_plans.tabs.subscribers'),
 						route: 'PlanMeteredSubscribers',
 					},
-					{
+				]
+
+				if (this.plan && this.plan.attributes.status === 'active') {
+					pages.push({
 						title: this.$t('admin_page_plans.tabs.delete'),
 						route: 'PlanMeteredDelete',
-					},
-				]
+					})
+				}
+
+				return pages
+			}
+		},
+		data() {
+			return {
+				isLoading: true,
+				plan: undefined,
 			}
 		},
 		created() {