chore: refactor payment settings

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
 	}

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

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>

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'