- Create/Update metered billing plan

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

@@ -30,43 +30,49 @@
 
 		<div class="card shadow-card">
 			<FormLabel>
-				{{ $t('Pricing') }}
+				{{ $t('Charged Features') }}
 			</FormLabel>
 
-			<div class="flex space-x-4">
-				<!--Price-->
-				<ValidationProvider tag="div" mode="passive" name="Price" rules="required" v-slot="{ errors }" class="w-full">
-					<AppInputText :title="$t('admin_page_plans.form.price')" class="w-full">
-						<input v-model="plan.amount" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+			<!--Bandwidth-->
+			<div>
+				<AppInputSwitch :title="$t('Bandwidth Price per 1GB')" :description="$t('Charge your user by the amount of data he upload or download.')">
+					<SwitchInput v-model="plan.features.bandwidth.active" class="switch" :state="plan.features.bandwidth.active" />
+				</AppInputSwitch>
+
+				<ValidationProvider v-if="plan.features.bandwidth.active" class="-mt-3" tag="div" mode="passive" name="Bandwidth Price" rules="required" v-slot="{ errors }">
+					<AppInputText class="w-full">
+						<input v-model="plan.features.bandwidth.per_unit" :placeholder="$t('Type the price per 1GB...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+					</AppInputText>
+				</ValidationProvider>
+			</div>
+
+			<!--Storage-->
+			<div>
+				<AppInputSwitch :title="$t('Storage Price per 1GB')" :description="$t('Charge your user by the amount of data he has stored on the disk per 1GB.')">
+					<SwitchInput v-model="plan.features.storage.active" class="switch" :state="plan.features.storage.active" />
+				</AppInputSwitch>
+			</div>
+
+			<ValidationProvider v-if="plan.features.storage.active" class="-mt-3" tag="div" mode="passive" name="Storage Price" rules="required" v-slot="{ errors }">
+				<AppInputText class="w-full">
+					<input v-model="plan.features.storage.per_unit" :placeholder="$t('Type the price per 1GB...')" 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">
+					<SwitchInput v-model="plan.features.flatFee.active" class="switch" :state="plan.features.flatFee.active" />
+				</AppInputSwitch>
+
+				<ValidationProvider v-if="plan.features.flatFee.active" class="-mt-3" tag="div" mode="passive" name="FlatFee Price" rules="required" v-slot="{ errors }">
+					<AppInputText class="w-full" :is-last="true">
+						<input v-model="plan.features.flatFee.per_unit" :placeholder="$t('Type the price...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 					</AppInputText>
 				</ValidationProvider>
 			</div>
 		</div>
 
-		<div class="card shadow-card">
-			<FormLabel>
-				{{ $t('Features') }}
-			</FormLabel>
-
-			<!--Storage Capacity-->
-			<ValidationProvider tag="div" mode="passive" name="Max Storage Capacity" rules="required" v-slot="{ errors }">
-				<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
-					<input v-model="plan.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
-				</AppInputText>
-			</ValidationProvider>
-
-			<!--Team Members-->
-			<ValidationProvider tag="div" mode="passive" name="Max Team Members" rules="required" v-slot="{ errors }">
-				<AppInputText :title="$t('Team Members')" :description="$t('To set unlimited team members, type -1 into form')" :is-last="true">
-					<input v-model="plan.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
-				</AppInputText>
-			</ValidationProvider>
-		</div>
-
-		<InfoBox v-if="isError" type="error" style="margin-top: 40px">
-			<p>{{ errorMessage }}</p>
-		</InfoBox>
-
 		<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
 			{{ $t('admin_page_plans.create_plan_button') }}
 		</ButtonBase>
@@ -74,7 +80,9 @@
 </template>
 
 <script>
-	import AppInputText from "../../../../components/Admin/AppInputText";
+	import SwitchInput from "../../../../components/Others/Forms/SwitchInput"
+	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch"
+	import AppInputText from "../../../../components/Admin/AppInputText"
 	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
 	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
 	import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
@@ -94,6 +102,8 @@
 		components: {
 			ValidationProvider,
 			ValidationObserver,
+			AppInputSwitch,
+			SwitchInput,
 			SectionTitle,
 			AppInputText,
 			MobileHeader,
@@ -119,12 +129,25 @@
 				plan: {
 					name: undefined,
 					description: undefined,
-					interval: undefined,
-					amount: undefined,
 					currency: undefined,
 					features: {
-						max_storage_amount: undefined,
-						max_team_members: undefined,
+						bandwidth: {
+							active: false,
+							per_unit: undefined,
+							first_unit: 1,
+							aggregate_strategy: 'sum_of_usage',
+						},
+						storage: {
+							active: false,
+							per_unit: undefined,
+							first_unit: 1,
+							aggregate_strategy: 'maximum_usage',
+						},
+						flatFee: {
+							active: false,
+							per_unit: undefined,
+							aggregate_strategy: 'maximum_usage',
+						},
 					},
 				}
 			}
@@ -132,6 +155,25 @@
 		methods: {
 			async createPlan() {
 
+				let tiers = []
+
+				Object.entries(this.plan.features).forEach(([key, feature]) => {
+					if (feature.active) {
+						tiers.push({
+							aggregate_strategy: feature.aggregate_strategy,
+							key: key,
+							tiers: [
+								{
+									per_unit: feature.per_unit,
+									first_unit: 1,
+									flat_fee: null,
+									last_unit: null,
+								}
+							]
+						})
+					}
+				})
+
 				// Validate fields
 				const isValid = await this.$refs.createPlan.validate();
 
@@ -141,35 +183,28 @@
 				this.isLoading = true
 
 				axios
-					.post('/api/subscriptions/plans', this.plan)
+					.post('/api/subscriptions/admin/plans', {
+						type: 'metered',
+						name: this.plan.name,
+						description: this.plan.description,
+						currency: this.plan.currency,
+						meters: tiers
+					})
 					.then(response => {
 
-						// Show toaster
 						events.$emit('toaster', {
 							type: 'success',
 							message: this.$t('toaster.plan_created'),
 						})
 
 						// Go to User page
-						this.$router.push({name: 'PlanSettings', params: {id: response.data.data.id}})
+						this.$router.push({name: 'PlanMeteredSettings', params: {id: response.data.data.id}})
 					})
 					.catch(error => {
-
-						// Validation errors
-						if (error.response.status === 422) {
-
-							if (error.response.data.errors['max_storage_amount']) {
-								this.$refs.createPlan.setErrors({
-									'Max Storage Capacity': this.$t('errors.capacity_digit')
-								});
-							}
-						}
-
-						if (error.response.status === 500) {
-							this.isError = true
-							this.errorMessage = error.response.data.message
-						}
-
+						events.$emit('toaster', {
+							type: 'error',
+							message: this.$t('popup_error.title'),
+						})
 					})
 					.finally(() => {
 						this.isLoading = false

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

@@ -5,40 +5,40 @@
 				{{ $t('Details') }}
 			</FormLabel>
 
-			<!--Visible-->
-			<AppInputSwitch :title="$t('admin_page_plans.form.status')" :description="$t('admin_page_plans.form.status_help')">
-				<SwitchInput @input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'visible', plan.attributes.visible)" v-model="plan.attributes.visible" class="switch" :state="plan.attributes.visible"/>
-			</AppInputSwitch>
-
 			<!--Name-->
 			<AppInputText :title="$t('admin_page_plans.form.name')">
 				<input @input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" class="focus-border-theme input-dark"/>
 			</AppInputText>
 
 			<!--Description-->
-			<AppInputText :title="$t('admin_page_plans.form.description')">
+			<AppInputText :title="$t('admin_page_plans.form.description')" :is-last="true">
 				<textarea @input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" class="focus-border-theme input-dark"></textarea>
 			</AppInputText>
+		</div>
+		<div class="card shadow-card">
+			<FormLabel>
+				{{ $t('Charged Features') }}
+			</FormLabel>
+
+			<!--Bandwidth-->
+			<AppInputText v-if="plan.attributes.features.bandwidth" :title="$t('Bandwidth Price per 1GB')" :description="$t('Charge your user by the amount of data he upload or download.')" class="w-full">
+				<input :value="formatCurrency(plan.attributes.currency, plan.attributes.features.bandwidth.tiers[0].per_unit)" type="text" class="focus-border-theme input-dark" disabled/>
+			</AppInputText>
+
+			<!--Storage-->
+			<AppInputText v-if="plan.attributes.features.storage" :title="$t('Storage Price per 1GB')" :description="$t('Charge your user by the amount of data he has stored on the disk per 1GB.')" class="w-full">
+				<input :value="formatCurrency(plan.attributes.currency, plan.attributes.features.storage.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/>
+			</AppInputText>
 
 			<InfoBox style="margin-bottom: 0">
 				<p>{{ $t('Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.') }}</p>
 			</InfoBox>
 		</div>
-		<div class="card shadow-card">
-			<FormLabel>
-				{{ $t('Features') }}
-			</FormLabel>
-
-			<!--Storage Capacity-->
-			<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
-				<input @input="$updateInput(`/subscriptions/plans/${$route.params.id}/features`, 'max_storage_amount', plan.attributes.features.max_storage_amount)" v-model="plan.attributes.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
-			</AppInputText>
-
-			<!--Team Members-->
-			<AppInputText :title="$t('Max Team Members')" is-last="true">
-				<input @input="$updateInput(`/subscriptions/plans/${$route.params.id}/features`, 'max_team_members', plan.attributes.features.max_team_members)" v-model="plan.attributes.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
-			</AppInputText>
-		</div>
 	</div>
 </template>
 
@@ -68,6 +68,16 @@
 				visible: undefined
 			}
 		},
+		methods: {
+			formatCurrency(currency, amount) {
+				let formatter = new Intl.NumberFormat('en-US', {
+					style: 'currency',
+					currency: currency,
+				});
+
+				return formatter.format(amount);
+			}
+		},
 		created() {
 			this.visible = this.plan.attributes.visible
 		}