eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: billing page ui

Browse Source
This commit is contained in:
Jannat Patel
2024-09-27 14:14:03 +05:30
parent 576258ec6e
commit 60a3da283e
2 changed files with 98 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
frontend/src/pages/Billing.vue
View File

@@ -1,37 +1,44 @@
<template> <template>
<div class=""> <div class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs
class="h-7"
:items="[{ label: __('Billing Details'), route: { name: 'Billing' } }]"
/>
</header>
<div <div
v-if="access.data?.access && orderSummary.data" v-if="access.data?.access && orderSummary.data"
class="mt-10 w-1/2 mx-auto" class="pt-5 pb-10 mx-5"
> >
<div class="text-3xl font-bold"> <div class="mb-5">
{{ __('Billing Details') }} <div class="text-lg font-semibold">
</div> {{ __('Address') }}
<div class="text-gray-600 mt-1">
{{ __('Enter the billing information to complete the payment.') }}
</div>
<div class="border rounded-md p-5 mt-5">
<div class="text-xl font-semibold">
{{ __('Summary') }}
</div> </div>
<div class="text-gray-600 mt-1"> <!-- <div class="text-sm text-gray-600 mt-1">
{{ __('Review the details of your purchase.') }} {{ __('Specify your billing address correctly.') }}
</div> </div> -->
<div class="mt-5"> </div>
<div class="grid grid-cols-[65%,30%] gap-10">
<div class="h-fit bg-gray-100 rounded-md p-5 space-y-4 order-last">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div class="text-gray-700">
{{ __('Ordered Item') }}
</div>
<div class="font-medium">
{{ orderSummary.data.title }} {{ orderSummary.data.title }}
</div> </div>
<div </div>
:class="{ <div
'font-semibold text-xl': !orderSummary.data.gst_applied, v-if="orderSummary.data.gst_applied"
}" class="flex items-center justify-between"
> >
{{ <div class="text-gray-700">
orderSummary.data.gst_applied {{ __('Original Amount') }}
? orderSummary.data.original_amount_formatted </div>
: orderSummary.data.total_amount_formatted <div>
}} {{ orderSummary.data.original_amount_formatted }}
</div> </div>
</div> </div>
<div <div
@@ -46,107 +53,83 @@
</div> </div>
</div> </div>
<div <div
v-if="orderSummary.data.gst_applied" class="flex items-center justify-between font-semibold border-t border-gray-400 pt-4 mt-2"
class="flex items-center justify-between mt-2"
> >
<div> <div>
{{ __('Total Amount') }} {{ __('Total') }}
</div> </div>
<div class="font-semibold text-2xl"> <div class="text-lg font-semibold">
{{ orderSummary.data.total_amount_formatted }} {{ orderSummary.data.total_amount_formatted }}
</div> </div>
</div> </div>
</div> </div>
<div class="text-xl font-semibold mt-10"> <div>
{{ __('Address') }} <!-- <div class="mb-5">
</div> <div class="text-lg font-semibold">
<div class="text-gray-600 mt-1"> {{ __('Address') }}
{{ __('Specify your billing address correctly.') }}
</div>
<div class="grid grid-cols-2 gap-5 mt-4">
<div>
<div class="mt-4">
<div class="mb-1.5 text-sm text-gray-700">
{{ __('Billing Name') }}
</div>
<Input type="text" v-model="billingDetails.billing_name" />
</div> </div>
<div class="mt-4"> <div class="text-sm text-gray-600 mt-1">
<div class="mb-1.5 text-sm text-gray-700"> {{ __('Specify your billing address correctly.') }}
{{ __('Address Line 1') }}
</div>
<Input type="text" v-model="billingDetails.address_line1" />
</div> </div>
<div class="mt-4"> </div> -->
<div class="mb-1.5 text-sm text-gray-700"> <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
{{ __('Address Line 2') }} <div class="space-y-4">
</div> <FormControl
<Input type="text" v-model="billingDetails.address_line2" /> :label="__('Billing Name')"
</div> v-model="billingDetails.billing_name"
<div class="mt-4"> />
<div class="mb-1.5 text-sm text-gray-700"> <FormControl
{{ __('City') }} :label="__('Address Line 1')"
</div> v-model="billingDetails.address_line1"
<Input type="text" v-model="billingDetails.city" /> />
</div> <FormControl
<div class="mt-4"> :label="__('Address Line 2')"
<div class="mb-1.5 text-sm text-gray-700"> v-model="billingDetails.address_line2"
{{ __('State') }} />
</div> <FormControl :label="__('City')" v-model="billingDetails.city" />
<Input type="text" v-model="billingDetails.state" /> <FormControl
</div> :label="__('State')"
</div> v-model="billingDetails.state"
<div> />
<div class="mt-4">
<div class="mb-1.5 text-sm text-gray-700">
{{ __('Country') }}
</div>
<Link <Link
doctype="Country" doctype="Country"
:value="billingDetails.country" :value="billingDetails.country"
@change="(option) => changeCurrency(option)" @change="(option) => changeCurrency(option)"
:label="__('Country')"
/> />
</div> </div>
<div class="mt-4"> <div class="space-y-4">
<div class="mb-1.5 text-sm text-gray-700"> <FormControl
{{ __('Postal Code') }} :label="__('Postal Code')"
</div> v-model="billingDetails.pincode"
<Input type="text" v-model="billingDetails.pincode" /> />
</div> <FormControl
<div class="mt-4"> :label="__('Phone Number')"
<div class="mb-1.5 text-sm text-gray-700"> v-model="billingDetails.phone"
{{ __('Phone Number') }} />
</div>
<Input type="text" v-model="billingDetails.phone" />
</div>
<div class="mt-4">
<div class="mb-1.5 text-sm text-gray-700">
{{ __('Source') }}
</div>
<Link <Link
doctype="LMS Source" doctype="LMS Source"
:value="billingDetails.source" :value="billingDetails.source"
@change="(option) => (billingDetails.source = option)" @change="(option) => (billingDetails.source = option)"
:label="__('Where did you hear about us?')"
/>
<FormControl
v-if="billingDetails.country == 'India'"
:label="__('GST Number')"
v-model="billingDetails.gstin"
/>
<FormControl
v-if="billingDetails.country == 'India'"
:label="__('Pan Number')"
v-model="billingDetails.pan"
/> />
</div> </div>
<div v-if="billingDetails.country == 'India'" class="mt-4">
<div class="mb-1.5 text-sm text-gray-700">
{{ __('GST Number') }}
</div>
<Input type="text" v-model="billingDetails.gstin" />
</div>
<div v-if="billingDetails.country == 'India'" class="mt-4">
<div class="mb-1.5 text-sm text-gray-700">
{{ __('Pan Number') }}
</div>
<Input type="text" v-model="billingDetails.pan" />
</div>
</div> </div>
<Button variant="solid" class="mt-8" @click="generatePaymentLink()">
{{ __('Proceed to Payment') }}
</Button>
</div> </div>
<Button variant="solid" class="mt-8" @click="generatePaymentLink()">
{{ __('Proceed to Payment') }}
</Button>
</div> </div>
</div> </div>
<div v-else-if="access.data?.message"> <div v-else-if="access.data?.message">
@@ -167,7 +150,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { Input, Button, createResource, call } from 'frappe-ui' import {
Input,
Button,
createResource,
FormControl,
Breadcrumbs,
Tooltip,
} from 'frappe-ui'
import { reactive, inject, onMounted, ref } from 'vue' import { reactive, inject, onMounted, ref } from 'vue'
import Link from '@/components/Controls/Link.vue' import Link from '@/components/Controls/Link.vue'
import NotPermitted from '@/components/NotPermitted.vue' import NotPermitted from '@/components/NotPermitted.vue'
@@ -202,14 +192,15 @@ const access = createResource({
name: props.name, name: props.name,
}, },
onSuccess(data) { onSuccess(data) {
orderSummary.submit()
setBillingDetails(data.address) setBillingDetails(data.address)
orderSummary.submit()
}, },
}) })
const orderSummary = createResource({ const orderSummary = createResource({
url: 'lms.lms.utils.get_order_summary', url: 'lms.lms.utils.get_order_summary',
makeParams(values) { makeParams(values) {
console.log(billingDetails.country)
return { return {
doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch', doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
docname: props.name, docname: props.name,

4
lms/lms/utils.py
View File

@@ -1682,10 +1682,12 @@ def get_order_summary(doctype, docname, country=None):
) )
details.original_amount = details.amount details.original_amount = details.amount
details.original_amount_formatted = fmt_money(details.amount, 0, details.currency) details.original_amount_formatted = fmt_money(details.amount, 0, details.currency)
print(details.currency)
if details.currency == "INR": if details.currency == "INR":
print("inside")
details.amount, details.gst_applied = apply_gst(details.amount) details.amount, details.gst_applied = apply_gst(details.amount)
details.gst_amount_formatted = fmt_money(details.gst_applied, 0, details.currency) details.gst_amount_formatted = fmt_money(details.gst_applied, 0, details.currency)
print(details.amount, details.gst_applied, details.gst_amount_formatted)
details.total_amount_formatted = fmt_money(details.amount, 0, details.currency) details.total_amount_formatted = fmt_money(details.amount, 0, details.currency)
return details return details