Merge pull request #2170 from shadrak98/billing-ux

fix: Better billing UX
frappe · Sep 20, 2024 · 2ee0c0b · 2ee0c0b
2 parents 7b20a81 + 4b9e330
commit 2ee0c0b
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 15 deletions.
diff --git a/dashboard/src2/components/BuyPrepaidCreditsDialog.vue b/dashboard/src2/components/BuyPrepaidCreditsDialog.vue
@@ -1,8 +1,5 @@
 <template>
-	<Dialog
-		:options="{ title: 'Add money to your account' }"
-		v-model="showDialog"
-	>
+	<Dialog :options="{ title: title }" v-model="showDialog">
 		<template v-slot:body-content>
 			<BuyPrepaidCreditsForm
 				@success="onSuccess"
@@ -15,7 +12,6 @@
 <script>
 import BuyPrepaidCreditsForm from './BuyPrepaidCreditsForm.vue';
 
-
 export default {
 	name: 'BuyPrepaidCreditsDialog',
 	components: {
@@ -25,6 +21,10 @@ export default {
 		minimumAmount: {
 			type: Number,
 			default: 0
+		},
+		title: {
+			type: String,
+			default: 'Add credits to your account'
 		}
 	},
 	emits: ['update:modelValue', 'success'],

diff --git a/dashboard/src2/components/BuyPrepaidCreditsForm.vue b/dashboard/src2/components/BuyPrepaidCreditsForm.vue
@@ -93,7 +93,7 @@ import BuyPrepaidCreditsStripe from './BuyPrepaidCreditsStripe.vue';
 import BuyPrepaidCreditsRazorpay from './BuyPrepaidCreditsRazorpay.vue';
 
 export default {
-	name: 'BuyPrepaidCreditsDialog',
+	name: 'BuyPrepaidCreditsForm',
 	components: {
 		BuyPrepaidCreditsStripe,
 		BuyPrepaidCreditsRazorpay

diff --git a/dashboard/src2/components/BuyPrepaidCreditsStripe.vue b/dashboard/src2/components/BuyPrepaidCreditsStripe.vue
@@ -86,7 +86,7 @@ export default {
 						!this.$team.doc.erpnext_partner
 					) {
 						throw new DashboardError(
-							`Amount must be greater than ${this.minimumAmount}`
+							`Amount must be greater than or equal to ${this.minimumAmount}`
 						);
 					}
 				},

diff --git a/dashboard/src2/components/in_desk_checkout/BuyPrepaidCreditsStripe.vue b/dashboard/src2/components/in_desk_checkout/BuyPrepaidCreditsStripe.vue
@@ -87,7 +87,7 @@ export default {
 						!this.team?.data?.erpnext_partner
 					) {
 						throw new DashboardError(
-							`Amount must be greater than ${this.minimumAmount}`
+							`Amount must be greater than or equal to ${this.minimumAmount}`
 						);
 					}
 				},

diff --git a/dashboard/src2/pages/BillingOverview.vue b/dashboard/src2/pages/BillingOverview.vue
@@ -16,7 +16,10 @@
 						<div>Unpaid Amount</div>
 						<Button
 							:disabled="Boolean($resources.unpaidAmountDue.data == 0)"
-							@click="showPrepaidCreditsDialog = true"
+							@click="
+								showPrepaidCreditsDialog = true;
+								title = 'Pay your unpaid amount';
+							"
 							theme="gray"
 							iconLeft="credit-card"
 						>
@@ -110,6 +113,7 @@
 		<ChangePaymentModeDialog2 v-model="showChangeModeDialog" />
 
 		<BuyPrepaidCreditsDialog
+			:title="title"
 			v-if="showPrepaidCreditsDialog"
 			v-model="showPrepaidCreditsDialog"
 			:minimumAmount="minimumAmount"
@@ -177,7 +181,8 @@ export default {
 			showChangeModeDialog: false,
 			showBillingDetailsDialog: false,
 			showAddCardDialog: false,
-			showUpcomingInvoiceDialog: false
+			showUpcomingInvoiceDialog: false,
+			title: 'Add credits to your account'
 		};
 	},
 	mounted() {
@@ -191,12 +196,10 @@ export default {
 	computed: {
 		minimumAmount() {
 			const unpaidAmount = this.$resources.unpaidAmountDue.data;
-			const minimumDefault = this.$team.doc.currency == 'INR' ? 800 : 10;
+			const minimumDefault = this.$team.doc.currency == 'INR' ? 410 : 5;
 
 			return Math.ceil(
-				unpaidAmount && unpaidAmount > minimumDefault
-					? unpaidAmount
-					: minimumDefault
+				unpaidAmount && unpaidAmount > 0 ? unpaidAmount : minimumDefault
 			);
 		},
 		upcomingInvoice() {

diff --git a/dashboard/src2/pages/saas/in_desk_billing/Overview.vue b/dashboard/src2/pages/saas/in_desk_billing/Overview.vue
@@ -295,7 +295,7 @@ export default {
 	computed: {
 		minimumAmount() {
 			const unpaidAmount = this.$resources.unpaidAmountDue.data;
-			const minimumDefault = this.team?.data?.currency == 'INR' ? 800 : 10;
+			const minimumDefault = this.team?.data?.currency == 'INR' ? 410 : 5;
 
 			return Math.ceil(
 				unpaidAmount && unpaidAmount > minimumDefault