- charge members

resources/js/views/Admin/Plans.vue

@@ -37,10 +37,16 @@
                         </td>
                         <td>
                             <div class="flex space-x-2 w-full justify-end">
-                                <router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanSettings', params: {id: row.data.id}}">
+                                <router-link
+									:to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}"
+									class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors"
+								>
                                     <Edit2Icon size="15" class="opacity-75" />
                                 </router-link>
-                                <router-link 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" :to="{name: 'PlanDelete', params: {id: row.data.id}}">
+                                <router-link
+									: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"
+								>
                                     <Trash2Icon size="15" class="opacity-75" />
                                 </router-link>
                             </div>

resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue

@@ -59,6 +59,19 @@
 				</AppInputText>
 			</ValidationProvider>
 
+			<!--Member-->
+			<div>
+				<AppInputSwitch :title="$t('Price per 1 Member')" :description="$t('Charge your user by the total members he use in his Team Folders.')">
+					<SwitchInput v-model="plan.features.member.active" class="switch" :state="plan.features.member.active" />
+				</AppInputSwitch>
+			</div>
+
+			<ValidationProvider v-if="plan.features.member.active" class="-mt-3" tag="div" mode="passive" name="Member Price" rules="required" v-slot="{ errors }">
+				<AppInputText class="w-full">
+					<input v-model="plan.features.member.per_unit" :placeholder="$t('Type the price per 1 member...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+				</AppInputText>
+			</ValidationProvider>
+
 			<!--Flat Fee-->
 			<div>
 				<AppInputSwitch :title="$t('Flat Fee per Cycle')" :description="$t('Charge monthly flat fee.')" :is-last="! plan.features.flatFee.active">
@@ -143,6 +156,12 @@
 							first_unit: 1,
 							aggregate_strategy: 'maximum_usage',
 						},
+						member: {
+							active: false,
+							per_unit: undefined,
+							first_unit: 1,
+							aggregate_strategy: 'maximum_usage',
+						},
 						flatFee: {
 							active: false,
 							per_unit: undefined,
@@ -202,7 +221,7 @@
 					})
 					.catch(error => {
 						events.$emit('toaster', {
-							type: 'error',
+							type: 'danger',
 							message: this.$t('popup_error.title'),
 						})
 					})

resources/js/views/Admin/Plans/Tabs/PlanDelete.vue

@@ -76,7 +76,7 @@
                     })
                     .catch(() => {
 						events.$emit('toaster', {
-							type: 'success',
+							type: 'danger',
 							message: this.$t('popup_error.title'),
 						})
                     })

resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue

@@ -30,6 +30,11 @@
 				<input :value="formatCurrency(plan.attributes.currency, plan.attributes.features.storage.tiers[0].per_unit)" type="text" class="focus-border-theme input-dark" disabled/>
 			</AppInputText>
 
+			<!--Member-->
+			<AppInputText v-if="plan.attributes.features.member" :title="$t('Price per 1 Member')" :description="$t('Charge your user by the total members he use in his Team Folders.')" class="w-full">
+				<input :value="formatCurrency(plan.attributes.currency, plan.attributes.features.member.tiers[0].per_unit)" type="text" class="focus-border-theme input-dark" disabled/>
+			</AppInputText>
+
 			<!--Flat Fee-->
 			<AppInputText v-if="plan.attributes.features.flatFee" :title="$t('Flat Fee per Cycle')" :description="$t('Charge monthly flat fee.')" class="w-full">
 				<input :value="formatCurrency(plan.attributes.currency, plan.attributes.features.flatFee.tiers[0].per_unit)" type="text" class="focus-border-theme input-dark" disabled/>
@@ -70,6 +75,7 @@
 		},
 		methods: {
 			formatCurrency(currency, amount) {
+				// TODO: add user locale
 				let formatter = new Intl.NumberFormat('en-US', {
 					style: 'currency',
 					currency: currency,

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

@@ -133,7 +133,7 @@
 					})
 					.catch(() => {
 						events.$emit('toaster', {
-							type: 'success',
+							type: 'danger',
 							message: this.$t('popup_error.title'),
 						})
 					})