From 60a3da283efe458a4d24d63952c68929e7960563 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 27 Sep 2024 14:14:03 +0530
Subject: [PATCH] refactor: billing page ui

---
 frontend/src/pages/Billing.vue | 199 ++++++++++++++++-----------------
 lms/lms/utils.py               |   4 +-
 2 files changed, 98 insertions(+), 105 deletions(-)

diff --git a/frontend/src/pages/Billing.vue b/frontend/src/pages/Billing.vue
index a87aaa22..0a4035c4 100644
--- a/frontend/src/pages/Billing.vue
+++ b/frontend/src/pages/Billing.vue
@@ -1,37 +1,44 @@
 <template>
 	<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
 			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">
-				{{ __('Billing Details') }}
-			</div>
-			<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 class="mb-5">
+				<div class="text-lg font-semibold">
+					{{ __('Address') }}
 				</div>
-				<div class="text-gray-600 mt-1">
-					{{ __('Review the details of your purchase.') }}
-				</div>
-				<div class="mt-5">
+				<!-- <div class="text-sm text-gray-600 mt-1">
+					{{ __('Specify your billing address correctly.') }}
+				</div> -->
+			</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>
+						<div class="text-gray-700">
+							{{ __('Ordered Item') }}
+						</div>
+						<div class="font-medium">
 							{{ orderSummary.data.title }}
 						</div>
-						<div
-							:class="{
-								'font-semibold text-xl': !orderSummary.data.gst_applied,
-							}"
-						>
-							{{
-								orderSummary.data.gst_applied
-									? orderSummary.data.original_amount_formatted
-									: orderSummary.data.total_amount_formatted
-							}}
+					</div>
+					<div
+						v-if="orderSummary.data.gst_applied"
+						class="flex items-center justify-between"
+					>
+						<div class="text-gray-700">
+							{{ __('Original Amount') }}
+						</div>
+						<div>
+							{{ orderSummary.data.original_amount_formatted }}
 						</div>
 					</div>
 					<div
@@ -46,107 +53,83 @@
 						</div>
 					</div>
 					<div
-						v-if="orderSummary.data.gst_applied"
-						class="flex items-center justify-between mt-2"
+						class="flex items-center justify-between font-semibold border-t border-gray-400 pt-4 mt-2"
 					>
 						<div>
-							{{ __('Total Amount') }}
+							{{ __('Total') }}
 						</div>
-						<div class="font-semibold text-2xl">
+						<div class="text-lg font-semibold">
 							{{ orderSummary.data.total_amount_formatted }}
 						</div>
 					</div>
 				</div>
 
-				<div class="text-xl font-semibold mt-10">
-					{{ __('Address') }}
-				</div>
-				<div class="text-gray-600 mt-1">
-					{{ __('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 class="mb-5">
+						<div class="text-lg font-semibold">
+							{{ __('Address') }}
 						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Address Line 1') }}
-							</div>
-							<Input type="text" v-model="billingDetails.address_line1" />
+						<div class="text-sm text-gray-600 mt-1">
+							{{ __('Specify your billing address correctly.') }}
 						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Address Line 2') }}
-							</div>
-							<Input type="text" v-model="billingDetails.address_line2" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('City') }}
-							</div>
-							<Input type="text" v-model="billingDetails.city" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('State') }}
-							</div>
-							<Input type="text" v-model="billingDetails.state" />
-						</div>
-					</div>
-					<div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Country') }}
-							</div>
+					</div> -->
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+						<div class="space-y-4">
+							<FormControl
+								:label="__('Billing Name')"
+								v-model="billingDetails.billing_name"
+							/>
+							<FormControl
+								:label="__('Address Line 1')"
+								v-model="billingDetails.address_line1"
+							/>
+							<FormControl
+								:label="__('Address Line 2')"
+								v-model="billingDetails.address_line2"
+							/>
+							<FormControl :label="__('City')" v-model="billingDetails.city" />
+							<FormControl
+								:label="__('State')"
+								v-model="billingDetails.state"
+							/>
 							<Link
 								doctype="Country"
 								:value="billingDetails.country"
 								@change="(option) => changeCurrency(option)"
+								:label="__('Country')"
 							/>
 						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Postal Code') }}
-							</div>
-							<Input type="text" v-model="billingDetails.pincode" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('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>
+						<div class="space-y-4">
+							<FormControl
+								:label="__('Postal Code')"
+								v-model="billingDetails.pincode"
+							/>
+							<FormControl
+								:label="__('Phone Number')"
+								v-model="billingDetails.phone"
+							/>
 							<Link
 								doctype="LMS Source"
 								:value="billingDetails.source"
 								@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 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>
+					<Button variant="solid" class="mt-8" @click="generatePaymentLink()">
+						{{ __('Proceed to Payment') }}
+					</Button>
 				</div>
-				<Button variant="solid" class="mt-8" @click="generatePaymentLink()">
-					{{ __('Proceed to Payment') }}
-				</Button>
 			</div>
 		</div>
 		<div v-else-if="access.data?.message">
@@ -167,7 +150,14 @@
 	</div>
 </template>
 <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 Link from '@/components/Controls/Link.vue'
 import NotPermitted from '@/components/NotPermitted.vue'
@@ -202,14 +192,15 @@ const access = createResource({
 		name: props.name,
 	},
 	onSuccess(data) {
-		orderSummary.submit()
 		setBillingDetails(data.address)
+		orderSummary.submit()
 	},
 })
 
 const orderSummary = createResource({
 	url: 'lms.lms.utils.get_order_summary',
 	makeParams(values) {
+		console.log(billingDetails.country)
 		return {
 			doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
 			docname: props.name,
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 8e2945c7..b619cf97 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1682,10 +1682,12 @@ def get_order_summary(doctype, docname, country=None):
 	)
 	details.original_amount = details.amount
 	details.original_amount_formatted = fmt_money(details.amount, 0, details.currency)
-
+	print(details.currency)
 	if details.currency == "INR":
+		print("inside")
 		details.amount, details.gst_applied = apply_gst(details.amount)
 		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)
 	return details