chore: refactor payment settings

2024-09-30 18:30:53 +05:30
parent b6bf9c0032
commit 008cc66cdd
12 changed files with 314 additions and 149 deletions
--- a/frontend/src/components/BrandSettings.vue
+++ b/frontend/src/components/BrandSettings.vue
@@ -52,7 +52,6 @@ const props = defineProps({
 const saveSettings = createResource({
 	url: 'frappe.client.set_value',
 	makeParams(values) {
-		console.log(values)
 		return {
 			doctype: 'Website Settings',
 			name: 'Website Settings',
@@ -77,7 +76,6 @@ const update = () => {
 }

 watch(props.data, (newData) => {
-	console.log(newData)
 	if (newData && !isDirty.value) {
 		isDirty.value = true
 	}
--- a/frontend/src/components/Modals/Settings.vue
+++ b/frontend/src/components/Modals/Settings.vue
@@ -45,6 +45,13 @@
 						:label="activeTab.label"
 						:description="activeTab.description"
 					/>
+					<PaymentSettings
+						v-else-if="activeTab.label === 'Payment Gateway'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						:data="data"
+						:fields="activeTab.fields"
+					/>
 					<BrandSettings
 						v-else-if="activeTab.label === 'Branding'"
 						:label="activeTab.label"
@@ -73,6 +80,7 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import Members from '@/components/Members.vue'
 import Categories from '@/components/Categories.vue'
 import BrandSettings from '@/components/BrandSettings.vue'
+import PaymentSettings from '@/components/PaymentSettings.vue'

 const show = defineModel()
 const doctype = ref('LMS Settings')
@@ -133,25 +141,12 @@ const tabsStructure = computed(() => {
 							type: 'Link',
 							doctype: 'Payment Gateway',
 						},
-						{
-							label: 'Razorpay Key',
-							name: 'razorpay_key',
-							type: 'text',
-						},
-						{
-							label: 'Razorpay Secret',
-							name: 'razorpay_secret',
-							type: 'password',
-						},
 						{
 							label: 'Default Currency',
 							name: 'default_currency',
 							type: 'Link',
 							doctype: 'Currency',
 						},
-						{
-							type: 'Column Break',
-						},
 						{
 							label: 'Apply GST for India',
 							name: 'apply_gst',
@@ -319,24 +314,6 @@ const tabs = computed(() => {
 	})
 })

-const paymentGateways = computed(() => {
-	const gateways = [
-		'Razorpay',
-		'Stripe',
-		'Mpesa',
-		'Patym',
-		'Paypal',
-		'Braintree',
-		'GoCardless',
-	]
-	return gateways.map((gateway) => {
-		return {
-			label: gateway,
-			value: gateway,
-		}
-	})
-})
-
 watch(show, async () => {
 	if (show.value) {
 		const currentTab = await tabs.value
--- a/frontend/src/components/PaymentSettings.vue
+++ b/frontend/src/components/PaymentSettings.vue
@@ -0,0 +1,109 @@
+<template>
+	<div class="flex flex-col min-h-0">
+		<div class="flex items-center justify-between">
+			<div class="text-xl font-semibold mb-1">
+				{{ label }}
+			</div>
+			<!-- <Badge
+                v-if="isDirty"
+                :label="__('Not Saved')"
+                variant="subtle"
+                theme="orange"
+            /> -->
+		</div>
+		<div class="overflow-y-scroll">
+			<div class="flex space-x-4">
+				<SettingFields :fields="fields" :data="data.doc" class="w-1/2" />
+				<SettingFields
+					v-if="paymentGateway.data"
+					:fields="paymentGateway.data.fields"
+					:data="paymentGateway.data.data"
+					class="w-1/2"
+				/>
+			</div>
+			<div class="flex flex-row-reverse mt-auto">
+				<Button variant="solid" @click="update">
+					{{ __('Update') }}
+				</Button>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import SettingFields from '@/components/SettingFields.vue'
+import { createResource, Badge, Button } from 'frappe-ui'
+import { watch, ref } from 'vue'
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: true,
+	},
+	fields: {
+		type: Array,
+		required: true,
+	},
+})
+
+const paymentGateway = createResource({
+	url: 'lms.lms.api.get_payment_gateway_details',
+	makeParams(values) {
+		return {
+			payment_gateway: props.data.doc.payment_gateway,
+		}
+	},
+	auto: true,
+})
+
+const saveSettings = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		let fields = {}
+		Object.keys(paymentGateway.data.data).forEach((key) => {
+			if (
+				paymentGateway.data.data[key] &&
+				typeof paymentGateway.data.data[key] === 'object'
+			) {
+				fields[key] = paymentGateway.data.data[key].file_url
+			} else {
+				fields[key] = paymentGateway.data.data[key]
+			}
+		})
+
+		return {
+			doctype: paymentGateway.data.doctype,
+			name: paymentGateway.data.docname,
+			fieldname: fields,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		paymentGateway.reload()
+	},
+})
+
+const update = () => {
+	props.fields.forEach((f) => {
+		if (f.type != 'Column Break') {
+			props.data.doc[f.name] = f.value
+		}
+	})
+	props.data.save.submit()
+	saveSettings.submit()
+}
+
+watch(
+	() => props.data.doc.payment_gateway,
+	() => {
+		paymentGateway.reload()
+	}
+)
+</script>
--- a/frontend/src/components/SettingFields.vue
+++ b/frontend/src/components/SettingFields.vue
@@ -90,7 +90,7 @@
 <script setup>
 import { FormControl, FileUploader, Button } from 'frappe-ui'
 import { computed } from 'vue'
-import { getFileSize } from '@/utils'
+import { getFileSize, validateFile } from '@/utils'
 import { X, FileText } from 'lucide-vue-next'
 import Link from '@/components/Controls/Link.vue'
 import Codemirror from 'codemirror-editor-vue3'
--- a/frontend/src/pages/Billing.vue
+++ b/frontend/src/pages/Billing.vue
@@ -12,21 +12,20 @@
 			v-if="access.data?.access && orderSummary.data"
 			class="pt-5 pb-10 mx-5"
 		>
-			<div class="mb-5">
+			<!-- <div class="mb-5">
 				<div class="text-lg font-semibold">
 					{{ __('Address') }}
 				</div>
-				<!-- <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 class="text-gray-700">
+			</div> -->
+			<div class="flex flex-col lg:flex-row justify-between">
+				<div
+					class="h-fit bg-gray-100 rounded-md p-5 space-y-4 lg:order-last mb-10 lg:mt-10 text-sm font-medium lg:w-1/4"
+				>
+					<div class="flex items-center justify-between space-x-2">
+						<div class="text-gray-600">
 							{{ __('Ordered Item') }}
 						</div>
-						<div class="font-medium">
+						<div class="">
 							{{ orderSummary.data.title }}
 						</div>
 					</div>
@@ -34,10 +33,10 @@
 						v-if="orderSummary.data.gst_applied"
 						class="flex items-center justify-between"
 					>
-						<div class="text-gray-700">
+						<div class="text-gray-600">
 							{{ __('Original Amount') }}
 						</div>
-						<div>
+						<div class="">
 							{{ orderSummary.data.original_amount_formatted }}
 						</div>
 					</div>
@@ -45,7 +44,7 @@
 						v-if="orderSummary.data.gst_applied"
 						class="flex items-center justify-between mt-2"
 					>
-						<div class="text-sm text-gray-600 font-medium">
+						<div class="text-gray-600">
 							{{ __('GST Amount') }}
 						</div>
 						<div>
@@ -53,9 +52,9 @@
 						</div>
 					</div>
 					<div
-						class="flex items-center justify-between font-semibold border-t border-gray-400 pt-4 mt-2"
+						class="flex items-center justify-between border-t border-gray-400 pt-4 mt-2"
 					>
-						<div>
+						<div class="text-lg font-semibold">
 							{{ __('Total') }}
 						</div>
 						<div class="text-lg font-semibold">
@@ -64,15 +63,12 @@
 					</div>
 				</div>

-				<div>
-					<!-- <div class="mb-5">
+				<div class="flex-1 lg:mr-10">
+					<div class="mb-5">
 						<div class="text-lg font-semibold">
 							{{ __('Address') }}
 						</div>
-						<div class="text-sm text-gray-600 mt-1">
-							{{ __('Specify your billing address correctly.') }}
-						</div>
-					</div> -->
+					</div>
 					<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
 						<div class="space-y-4">
 							<FormControl
@@ -92,14 +88,14 @@
 								:label="__('State')"
 								v-model="billingDetails.state"
 							/>
+						</div>
+						<div class="space-y-4">
 							<Link
 								doctype="Country"
 								:value="billingDetails.country"
 								@change="(option) => changeCurrency(option)"
 								:label="__('Country')"
 							/>
-						</div>
-						<div class="space-y-4">
 							<FormControl
 								:label="__('Postal Code')"
 								v-model="billingDetails.pincode"
@@ -200,7 +196,6 @@ const access = createResource({
 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,
@@ -234,6 +229,7 @@ const paymentLink = createResource({
 		return {
 			doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
 			docname: props.name,
+			title: orderSummary.data.title,
 			amount: orderSummary.data.original_amount,
 			total_amount: orderSummary.data.amount,
 			currency: orderSummary.data.currency,
@@ -247,6 +243,9 @@ const generatePaymentLink = () => {
 		{},
 		{
 			validate() {
+				if (!billingDetails.source) {
+					return __('Please let us know where you heard about us from.')
+				}
 				return validateAddress()
 			},
 			onSuccess(data) {
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -244,7 +244,10 @@ const lesson = createResource({
 	onSuccess(data) {
 		lessonProgress.value = data.membership?.progress
 		if (data.content) editor.value = renderEditor('editor', data.content)
-		if (JSON.parse(data.instructor_content)?.blocks?.length > 1)
+		if (
+			data.instructor_content &&
+			JSON.parse(data.instructor_content)?.blocks?.length > 1
+		)
 			instructorEditor.value = renderEditor(
 				'instructor-content',
 				data.instructor_content