vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: moved team provide to App.vue

Browse source
This commit is contained in:
Shariq Ansari 2024-11-14 19:53:14 +05:30
parent 37a5e0eddb
commit d96b313fba
11 changed files with 66 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
billing/src/App.vue
View file

@ -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>

4
billing/src/components/AddressForm.vue
View file

@ -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) {

6
billing/src/components/BuyCreditsRazorpay.vue
View file

@ -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' },
}

4
billing/src/components/BuyCreditsStripe.vue
View file

@ -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}`
}
},

12
billing/src/components/CardForm.vue
View file

@ -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>

7
billing/src/components/CurrentPlan.vue
View file

@ -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

43
billing/src/components/PaymentDetails.vue
View file

@ -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

20
billing/src/components/PrepaidCreditsForm.vue
View file

@ -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

11
billing/src/pages/Billing.vue
View file

@ -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,

9
billing/src/pages/BillingHistory.vue
View file

@ -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',

12
billing/src/pages/Plans.vue
View file

@ -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,
})