From d96b313fba06320834176ae93b7fcf3a28692888 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 14 Nov 2024 19:53:14 +0530
Subject: [PATCH] refactor: moved team provide to App.vue

---
 billing/src/App.vue                           | 10 +++++
 billing/src/components/AddressForm.vue        |  4 +-
 billing/src/components/BuyCreditsRazorpay.vue |  6 +--
 billing/src/components/BuyCreditsStripe.vue   |  4 +-
 billing/src/components/CardForm.vue           | 12 +++---
 billing/src/components/CurrentPlan.vue        |  7 +--
 billing/src/components/PaymentDetails.vue     | 43 ++++++++++---------
 billing/src/components/PrepaidCreditsForm.vue | 20 ++++-----
 billing/src/pages/Billing.vue                 | 11 +----
 billing/src/pages/BillingHistory.vue          |  9 +---
 billing/src/pages/Plans.vue                   | 12 ++----
 11 files changed, 66 insertions(+), 72 deletions(-)

diff --git a/billing/src/App.vue b/billing/src/App.vue
index 69356ae8dd..0b61001e99 100644
--- a/billing/src/App.vue
+++ b/billing/src/App.vue
@@ -17,6 +17,14 @@ import PageNotFound from './pages/PageNotFound.vue'
 import AppSidebar from '@/components/AppSidebar.vue'
 import { Dialogs } from '@/dialogs.js'
 import { Toasts, createResource } from 'frappe-ui'
+import { provide } from 'vue'
+
+const team = createResource({
+	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
+	params: { method: 'team.info' },
+	cache: 'team',
+	auto: true,
+})
 
 const isFCSite = createResource({
 	url: 'frappe.integrations.frappe_providers.frappecloud_billing.is_fc_site',
@@ -24,4 +32,6 @@ const isFCSite = createResource({
 	auto: true,
 	transform: (data) => Boolean(data),
 })
+
+provide('team', team)
 </script>
diff --git a/billing/src/components/AddressForm.vue b/billing/src/components/AddressForm.vue
index 066396ddca..39af9994ad 100644
--- a/billing/src/components/AddressForm.vue
+++ b/billing/src/components/AddressForm.vue
@@ -37,7 +37,7 @@ import { FormControl, ErrorMessage, createResource, toast } from 'frappe-ui'
 import { ref, computed, inject, watch } from 'vue'
 
 const emit = defineEmits(['success'])
-const { team } = inject('billing')
+const team = inject('team')
 
 const billingInformation = defineModel()
 
@@ -135,7 +135,7 @@ const _countryList = createResource({
 	cache: 'countryList',
 	auto: true,
 	onSuccess: () => {
-		let userCountry = team.value?.country
+		let userCountry = team.data?.country
 		if (userCountry) {
 			let country = countryList.value?.find((d) => d.label === userCountry)
 			if (country) {
diff --git a/billing/src/components/BuyCreditsRazorpay.vue b/billing/src/components/BuyCreditsRazorpay.vue
index 5d2f5c2e0d..bc4b17d0c8 100644
--- a/billing/src/components/BuyCreditsRazorpay.vue
+++ b/billing/src/components/BuyCreditsRazorpay.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<span
-			v-if="team.currency === 'INR'"
+			v-if="team.data.currency === 'INR'"
 			class="mt-2.5 inline-flex gap-2 text-base text-gray-700"
 		>
 			<FeatherIcon name="info" class="h-4 my-1" />
@@ -49,7 +49,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['success'])
-const { team } = inject('billing')
+const team = inject('team')
 
 const isPaymentComplete = ref(false)
 const isVerifyingPayment = ref(false)
@@ -95,7 +95,7 @@ function processOrder(data) {
 		order_id: data.order_id,
 		name: 'Frappe Cloud',
 		image: 'https://frappe.io/files/cloud.png',
-		prefill: { email: team.value?.user },
+		prefill: { email: team.data?.user },
 		handler: handlePaymentSuccess,
 		theme: { color: '#171717' },
 	}
diff --git a/billing/src/components/BuyCreditsStripe.vue b/billing/src/components/BuyCreditsStripe.vue
index c0c7da6afe..9180dd3dae 100644
--- a/billing/src/components/BuyCreditsStripe.vue
+++ b/billing/src/components/BuyCreditsStripe.vue
@@ -56,7 +56,7 @@ const props = defineProps({
 
 const emit = defineEmits(['success'])
 
-const { team } = inject('billing')
+const team = inject('team')
 
 const step = ref('Get Amount')
 const clientSecret = ref(null)
@@ -78,7 +78,7 @@ const createPaymentIntent = createResource({
 		data: { amount: props.amount },
 	},
 	validate() {
-		if (props.amount < props.minimumAmount && !team.value.erpnext_partner) {
+		if (props.amount < props.minimumAmount && !team.data.erpnext_partner) {
 			return `Amount must be greater than or equal to ${props.minimumAmount}`
 		}
 	},
diff --git a/billing/src/components/CardForm.vue b/billing/src/components/CardForm.vue
index 58b89b5f04..6217874235 100644
--- a/billing/src/components/CardForm.vue
+++ b/billing/src/components/CardForm.vue
@@ -88,7 +88,7 @@ import { ref, reactive, computed, inject, onMounted } from 'vue'
 
 const emit = defineEmits(['success'])
 
-const { team } = inject('billing')
+const team = inject('team')
 
 const stripe = ref(null)
 const elements = ref(null)
@@ -245,7 +245,7 @@ const verifyCardWithMicroCharge = createResource({
 
 async function setupStripeIntent() {
 	await getPublishedKeyAndSetupIntent.submit()
-	const { first_name, last_name = '' } = team.value?.user_info
+	const { first_name, last_name = '' } = team.data?.user_info
 	const fullname = first_name + ' ' + last_name
 	billingInformation.cardHolderName = fullname.trimEnd()
 }
@@ -276,7 +276,7 @@ async function submit() {
 						city: billingInformation.city,
 						state: billingInformation.state,
 						postal_code: billingInformation.postal_code,
-						country: getCountryCode(team.value?.country),
+						country: getCountryCode(team.data?.country),
 					},
 				},
 			},
@@ -305,7 +305,7 @@ async function submit() {
 }
 
 async function verifyWithMicroChargeIfApplicable(paymentMethodName) {
-	const teamCurrency = team.value?.currency
+	const teamCurrency = team.data?.currency
 	const verifyCardsWithMicroCharge = window.verify_cards_with_micro_charge
 	const isMicroChargeApplicable =
 		verifyCardsWithMicroCharge === 'Both INR and USD' ||
@@ -354,9 +354,9 @@ async function clearForm() {
 }
 
 const formattedMicroChargeAmount = computed(() => {
-	if (!team.value?.currency) {
+	if (!team.data?.currency) {
 		return 0
 	}
-	return currency(team.value?.billing_info?.micro_debit_charge_amount, team.value?.currency)
+	return currency(team.data?.billing_info?.micro_debit_charge_amount, team.data?.currency)
 })
 </script>
diff --git a/billing/src/components/CurrentPlan.vue b/billing/src/components/CurrentPlan.vue
index a9a949ec16..df0826357c 100644
--- a/billing/src/components/CurrentPlan.vue
+++ b/billing/src/components/CurrentPlan.vue
@@ -95,7 +95,7 @@
 						<span>{{ currency }} {{ unpaidAmount.data?.toFixed(2) }}</span>
 					</div>
 				</div>
-				<div v-if="team.payment_mode == 'Prepaid Credits'">
+				<div v-if="team.data.payment_mode == 'Prepaid Credits'">
 					<Button
 						variant="outline"
 						label="Pay now"
@@ -125,7 +125,8 @@ import { ref, computed, inject } from 'vue'
 
 const emit = defineEmits(['changePlan'])
 
-const { team, currentBillingAmount, reloadUpcomingInvoice } = inject('billing')
+const team = inject('team')
+const { currentBillingAmount, reloadUpcomingInvoice } = inject('billing')
 
 const showAddPrepaidCreditsModal = ref(false)
 
@@ -143,7 +144,7 @@ const currentSiteInfo = createResource({
 })
 
 const price = ref(null)
-const currency = computed(() => (team.value.currency == 'INR' ? '₹' : '$'))
+const currency = computed(() => (team.data.currency == 'INR' ? '₹' : '$'))
 
 const currentPlan = computed(() => {
 	if (!currentSiteInfo.data) return null
diff --git a/billing/src/components/PaymentDetails.vue b/billing/src/components/PaymentDetails.vue
index 60fd15976c..7e94358123 100644
--- a/billing/src/components/PaymentDetails.vue
+++ b/billing/src/components/PaymentDetails.vue
@@ -5,18 +5,18 @@
 		</div>
 		<div class="flex flex-col">
 			<div
-				v-if="team.payment_mode == 'Card'"
+				v-if="team.data.payment_mode == 'Card'"
 				class="flex justify-between items-center text-base text-gray-900"
 			>
 				<div class="flex flex-col gap-1.5">
 					<div class="font-medium">{{ 'Active card' }}</div>
 					<div class="overflow-hidden text-gray-700 text-ellipsis">
-						<div v-if="team.payment_method" class="inline-flex items-center gap-2">
-							<component :is="cardBrandIcon(team.payment_method.brand)" />
+						<div v-if="team.data.payment_method" class="inline-flex items-center gap-2">
+							<component :is="cardBrandIcon(team.data.payment_method.brand)" />
 							<div class="text-gray-700">
-								<span>{{ team.payment_method.name_on_card }}</span>
+								<span>{{ team.data.payment_method.name_on_card }}</span>
 								<span> &middot; Card ending in •••• </span>
-								<span>{{ team.payment_method.last_4 }}</span>
+								<span>{{ team.data.payment_method.last_4 }}</span>
 							</div>
 						</div>
 						<span v-else class="text-gray-700">No card added</span>
@@ -24,21 +24,21 @@
 				</div>
 				<div class="shrink-0">
 					<Button
-						:label="team.payment_method ? 'Change card' : 'Add card'"
+						:label="team.data.payment_method ? 'Change card' : 'Add card'"
 						@click="changeMethod"
 					>
-						<template v-if="!team.payment_method" #prefix>
+						<template v-if="!team.data.payment_method" #prefix>
 							<FeatherIcon class="h-4" name="plus" />
 						</template>
 					</Button>
 				</div>
 			</div>
-			<div v-if="team.payment_mode == 'Card'" class="bg-gray-100 h-px my-3" />
+			<div v-if="team.data.payment_mode == 'Card'" class="bg-gray-100 h-px my-3" />
 			<div class="flex justify-between items-center text-base text-gray-900">
 				<div class="flex flex-col gap-1.5">
 					<div class="font-medium">{{ 'Mode of payment' }}</div>
 					<div
-						v-if="team.payment_mode"
+						v-if="team.data.payment_mode"
 						class="inline-flex items-center gap-2 text-gray-700"
 					>
 						<FeatherIcon class="h-4" name="info" />
@@ -49,7 +49,7 @@
 				<div class="shrink-0">
 					<Dropdown :options="paymentModeOptions">
 						<template #default="{ open }">
-							<Button :label="team.payment_mode ? paymentMode.label : 'Set mode'">
+							<Button :label="team.data.payment_mode ? paymentMode.label : 'Set mode'">
 								<template #suffix>
 									<FeatherIcon
 										:name="open ? 'chevron-up' : 'chevron-down'"
@@ -137,7 +137,7 @@
 			() => {
 				showMessage = false
 				showAddCardModal = false
-				reloadTeam()
+				team.reload()
 			}
 		"
 	/>
@@ -150,7 +150,7 @@
 				showAddCardModal = true
 			}
 		"
-		@success="() => reloadTeam()"
+		@success="() => team.reload()"
 	/>
 </template>
 <script setup>
@@ -163,14 +163,15 @@ import { Dropdown, Button, FeatherIcon, createResource } from 'frappe-ui'
 import { cardBrandIcon } from '../utils.js'
 import { computed, ref, inject, h } from 'vue'
 
-const { team, reloadTeam, availableCredits, reloadUpcomingInvoice } = inject('billing')
+const team = inject('team')
+const { availableCredits, reloadUpcomingInvoice } = inject('billing')
 
 const showBillingDetailsDialog = ref(false)
 const showAddPrepaidCreditsModal = ref(false)
 const showAddCardModal = ref(false)
 const showChangeCardModal = ref(false)
 
-const currency = computed(() => (team.value.currency == 'INR' ? '₹' : '$'))
+const currency = computed(() => (team.data.currency == 'INR' ? '₹' : '$'))
 
 const billingDetails = createResource({
 	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
@@ -198,7 +199,7 @@ const paymentModeOptions = [
 		component: () =>
 			h(DropdownItem, {
 				label: 'Card',
-				active: team.value.payment_mode === 'Card',
+				active: team.data.payment_mode === 'Card',
 				onClick: () => updatePaymentMode('Card'),
 			}),
 	},
@@ -209,14 +210,14 @@ const paymentModeOptions = [
 		component: () =>
 			h(DropdownItem, {
 				label: 'Prepaid credits',
-				active: team.value.payment_mode === 'Prepaid Credits',
+				active: team.data.payment_mode === 'Prepaid Credits',
 				onClick: () => updatePaymentMode('Prepaid Credits'),
 			}),
 	},
 ]
 
 const paymentMode = computed(() => {
-	return paymentModeOptions.find((o) => o.value === team.value.payment_mode)
+	return paymentModeOptions.find((o) => o.value === team.data.payment_mode)
 })
 
 const showMessage = ref(false)
@@ -227,11 +228,11 @@ function updatePaymentMode(mode) {
 		showBillingDetailsDialog.value = true
 		return
 	}
-	if (mode === 'Prepaid Credits' && team.value.balance === 0) {
+	if (mode === 'Prepaid Credits' && team.data.balance === 0) {
 		showMessage.value = true
 		showAddPrepaidCreditsModal.value = true
 		return
-	} else if (mode === 'Card' && !team.value.payment_method) {
+	} else if (mode === 'Card' && !team.data.payment_method) {
 		showMessage.value = true
 		showAddCardModal.value = true
 	}
@@ -242,12 +243,12 @@ function updatePaymentMode(mode) {
 			data: { mode },
 		},
 		auto: true,
-		onSuccess: () => reloadTeam(),
+		onSuccess: () => team.reload(),
 	})
 }
 
 function changeMethod() {
-	if (team.value.payment_method) {
+	if (team.data.payment_method) {
 		showChangeCardModal.value = true
 	} else {
 		showMessage.value = false
diff --git a/billing/src/components/PrepaidCreditsForm.vue b/billing/src/components/PrepaidCreditsForm.vue
index 71dbd56d20..23a59f858e 100644
--- a/billing/src/components/PrepaidCreditsForm.vue
+++ b/billing/src/components/PrepaidCreditsForm.vue
@@ -13,13 +13,13 @@
 			>
 				<template #prefix>
 					<div class="grid w-4 place-items-center text-sm text-gray-700">
-						{{ team.currency === 'INR' ? '₹' : '$' }}
+						{{ team.data.currency === 'INR' ? '₹' : '$' }}
 					</div>
 				</template>
 			</FormControl>
 			<FormControl
-				v-if="team.currency === 'INR'"
-				:label="`Total Amount + GST (${team?.billing_info.gst_percentage * 100}%)`"
+				v-if="team.data.currency === 'INR'"
+				:label="`Total Amount + GST (${team.data?.billing_info.gst_percentage * 100}%)`"
 				disabled
 				:modelValue="totalAmount"
 				name="total"
@@ -28,7 +28,7 @@
 			>
 				<template #prefix>
 					<div class="grid w-4 place-items-center text-sm text-gray-700">
-						{{ team.currency === 'INR' ? '₹' : '$' }}
+						{{ team.data.currency === 'INR' ? '₹' : '$' }}
 					</div>
 				</template>
 			</FormControl>
@@ -39,7 +39,7 @@
 			<div class="text-xs text-gray-600">Select Payment Gateway</div>
 			<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
 				<Button
-					v-if="team.currency === 'INR' || team.razorpay_enabled"
+					v-if="team.data.currency === 'INR' || team.data.razorpay_enabled"
 					size="lg"
 					:class="{
 						'border-gray-700 border-[1.5px]': paymentGateway === 'Razorpay',
@@ -88,7 +88,7 @@ import { ref, computed, inject } from 'vue'
 
 const emit = defineEmits(['success'])
 
-const { team } = inject('billing')
+const team = inject('team')
 
 const totalUnpaidAmount = createResource({
 	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
@@ -98,9 +98,9 @@ const totalUnpaidAmount = createResource({
 })
 
 const minimumAmount = computed(() => {
-	if (!team.value) return 0
+	if (!team.data) return 0
 	const unpaidAmount = totalUnpaidAmount.data || 0
-	const minimumDefault = team.value?.currency == 'INR' ? 410 : 5
+	const minimumDefault = team.data?.currency == 'INR' ? 410 : 5
 
 	return Math.ceil(unpaidAmount && unpaidAmount > 0 ? unpaidAmount : minimumDefault)
 })
@@ -110,10 +110,10 @@ const paymentGateway = ref('')
 
 const totalAmount = computed(() => {
 	let _creditsToBuy = creditsToBuy.value || 0
-	if (team.value?.currency === 'INR') {
+	if (team.data?.currency === 'INR') {
 		return (
 			_creditsToBuy +
-			_creditsToBuy * (team.value.billing_info.gst_percentage || 0)
+			_creditsToBuy * (team.data.billing_info.gst_percentage || 0)
 		).toFixed(2)
 	} else {
 		return _creditsToBuy
diff --git a/billing/src/pages/Billing.vue b/billing/src/pages/Billing.vue
index ab5b41a2aa..6048e724cb 100644
--- a/billing/src/pages/Billing.vue
+++ b/billing/src/pages/Billing.vue
@@ -18,16 +18,11 @@ import CurrentPlan from '@/components/CurrentPlan.vue'
 import PaymentDetails from '@/components/PaymentDetails.vue'
 import { Spinner, createResource } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { computed, provide } from 'vue'
+import { computed, provide, inject } from 'vue'
 
 const router = useRouter()
 
-const team = createResource({
-	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
-	params: { method: 'team.info' },
-	cache: 'team',
-	auto: true,
-})
+const team = inject('team')
 
 const upcomingInvoice = createResource({
 	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
@@ -37,8 +32,6 @@ const upcomingInvoice = createResource({
 })
 
 provide('billing', {
-	team: computed(() => team.data),
-	reloadTeam: team.reload,
 	availableCredits: computed(() => upcomingInvoice.data?.available_credits),
 	currentBillingAmount: computed(() => upcomingInvoice.data?.upcoming_invoice.total),
 	reloadUpcomingInvoice: upcomingInvoice.reload,
diff --git a/billing/src/pages/BillingHistory.vue b/billing/src/pages/BillingHistory.vue
index 5e55d8070d..675fde32ce 100644
--- a/billing/src/pages/BillingHistory.vue
+++ b/billing/src/pages/BillingHistory.vue
@@ -56,14 +56,9 @@ import {
 	Badge,
 	createResource,
 } from 'frappe-ui'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 
-const team = createResource({
-	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
-	params: { method: 'team.info' },
-	cache: 'team',
-	auto: true,
-})
+const team = inject('team')
 
 const invoices = createResource({
 	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
diff --git a/billing/src/pages/Plans.vue b/billing/src/pages/Plans.vue
index c0b3be816e..d7ff420d31 100644
--- a/billing/src/pages/Plans.vue
+++ b/billing/src/pages/Plans.vue
@@ -86,10 +86,12 @@ import {
 	createResource,
 } from 'frappe-ui'
 import { parseSize } from '@/utils.js'
-import { ref, computed, provide } from 'vue'
+import { ref, computed, provide, inject } from 'vue'
 
 const emit = defineEmits(['success'])
 
+const team = inject('team')
+
 const billingDetails = createResource({
 	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
 	params: { method: 'billing.get_information' },
@@ -97,13 +99,6 @@ const billingDetails = createResource({
 	auto: true,
 })
 
-const team = createResource({
-	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
-	params: { method: 'team.info' },
-	cache: 'team',
-	auto: true,
-})
-
 const plans = createResource({
 	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
 	params: { method: 'site.get_plans' },
@@ -218,7 +213,6 @@ function changePlan(_planName) {
 }
 
 provide('billing', {
-	team: computed(() => team.data),
 	reloadPlans: plans.reload,
 	reloadSite: site.reload,
 })