refactor(billing): revamp billing overview (#2322)

Co-authored-by: Shariq Ansari <[email protected]>

dashboard/package.json

@@ -42,7 +42,7 @@
 		"socket.io-client": "^4.5.1",
 		"unplugin-icons": "^0.17.0",
 		"unplugin-vue-components": "^0.25.2",
-		"vue": "^3.3.4",
+		"vue": "^3.4.12",
 		"vue-codemirror": "^6.1.1",
 		"vue-echarts": "^6.6.1",
 		"vue-qrcode": "^2.2.2",

dashboard/src2/App.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { defineAsyncComponent, computed, watch, ref } from 'vue';
+import { defineAsyncComponent, computed, watch, ref, provide } from 'vue';
 import { Toaster } from 'vue-sonner';
 import { dialogs } from './utils/components';
 import { useRoute } from 'vue-router';
@@ -45,10 +45,10 @@ const MobileNav = defineAsyncComponent(() =>
 );
 
 const route = useRoute();
+const team = getTeam();
 
 const isHideSidebar = computed(() => {
 	if (!session.user) return false;
-	const team = getTeam();
 	return (
 		route.name == 'Welcome' && session.user && team?.doc?.hide_sidebar === true
 	);
@@ -62,6 +62,8 @@ watch(
 		isSaaSFlow.value = window.location.pathname.startsWith('/dashboard/saas');
 	}
 );
+
+provide('team', team);
 </script>
 
 <style src="../src/assets/style.css"></style>

dashboard/src2/components/billing/AddCardDialog.vue

@@ -0,0 +1,35 @@
+<template>
+	<Dialog v-model="show" :options="{ title: 'Add new card' }">
+		<template #body-content>
+			<div
+				v-if="showMessage"
+				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+			>
+				<FeatherIcon class="h-4" name="info" />
+				<span> Add at least one card before changing the payment mode. </span>
+			</div>
+			<CardForm
+				@success="
+					() => {
+						show = false;
+						emit('success');
+					}
+				"
+			/>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import CardForm from './CardForm.vue';
+import { Dialog, FeatherIcon } from 'frappe-ui';
+
+const props = defineProps({
+	showMessage: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['success']);
+const show = defineModel();
+</script>

dashboard/src2/components/billing/AddPrepaidCreditsDialog.vue

@@ -0,0 +1,37 @@
+<template>
+	<Dialog v-model="show" :options="{ title: 'Add Credit Balance' }">
+		<template #body-content>
+			<div
+				v-if="showMessage"
+				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+			>
+				<FeatherIcon class="h-4" name="info" />
+				<span>
+					Add credits to your account before changing the payment mode.
+				</span>
+			</div>
+			<PrepaidCreditsForm
+				@success="
+					() => {
+						show = false;
+						emit('success');
+					}
+				"
+			/>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import PrepaidCreditsForm from './PrepaidCreditsForm.vue';
+import { Dialog, FeatherIcon } from 'frappe-ui';
+
+const props = defineProps({
+	showMessage: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['success']);
+const show = defineModel();
+</script>

dashboard/src2/components/billing/BillingDetails.vue

@@ -0,0 +1,71 @@
+<template>
+	<div class="flex flex-col gap-5">
+		<FormControl
+			v-model="billingInformation.billing_name"
+			type="text"
+			name="billing_name"
+			label="Billing Name"
+			:required="true"
+		/>
+		<NewAddressForm
+			ref="addressFormRef"
+			v-model="billingInformation"
+			@success="() => emit('success')"
+		/>
+		<ErrorMessage class="mt-2" :message="errorMessage" />
+	</div>
+	<div v-if="addressFormRef" class="mt-6">
+		<Button
+			class="w-full"
+			variant="solid"
+			label="Update billing details"
+			:loading="addressFormRef.updateBillingInformation.loading"
+			@click="updateBillingInformation"
+		/>
+	</div>
+</template>
+<script setup>
+import NewAddressForm from './NewAddressForm.vue';
+import { FormControl, ErrorMessage, Button, createResource } from 'frappe-ui';
+import { reactive, ref } from 'vue';
+
+const emit = defineEmits(['success']);
+
+const addressFormRef = ref(null);
+
+const billingInformation = reactive({
+	billing_name: '',
+	address: '',
+	city: '',
+	state: '',
+	postal_code: '',
+	country: '',
+	gstin: ''
+});
+
+createResource({
+	url: 'press.api.account.get_billing_information',
+	auto: true,
+	onSuccess: data => {
+		Object.assign(billingInformation, {
+			address: data.address_line1,
+			city: data.city,
+			state: data.state,
+			postal_code: data.pincode,
+			country: data.country,
+			gstin: data.gstin == 'Not Applicable' ? '' : data.gstin,
+			billing_name: data.billing_name
+		});
+	}
+});
+
+const errorMessage = ref('');
+
+function updateBillingInformation() {
+	if (!billingInformation.billing_name) {
+		errorMessage.value = 'Billing Name is required';
+		return;
+	}
+	addressFormRef.value.updateBillingInformation.submit();
+}
+</script>