feat: payments app integration

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')
@@ -106,17 +114,6 @@ const tabsStructure = computed(() => {
 				},
 			],
 		},
-		{
-			label: 'Settings',
-			hideLabel: true,
-			items: [
-				{
-					label: 'Categories',
-					description: 'Manage the members of your learning system',
-					icon: 'Network',
-				},
-			],
-		},
 		{
 			label: 'Settings',
 			hideLabel: true,
@@ -128,24 +125,17 @@ const tabsStructure = computed(() => {
 						'Configure the payment gateway and other payment related settings',
 					fields: [
 						{
-							label: 'Razorpay Key',
-							name: 'razorpay_key',
-							type: 'text',
-						},
-						{
-							label: 'Razorpay Secret',
-							name: 'razorpay_secret',
-							type: 'password',
+							label: 'Payment Gateway',
+							name: 'payment_gateway',
+							type: 'Link',
+							doctype: 'Payment Gateway',
 						},
 						{
 							label: 'Default Currency',
 							name: 'default_currency',
 							type: 'Link',
 							doctype: 'Currency',
 						},
-						{
-							type: 'Column Break',
-						},
 						{
 							label: 'Apply GST for India',
 							name: 'apply_gst',
@@ -165,6 +155,17 @@ const tabsStructure = computed(() => {
 				},
 			],
 		},
+		{
+			label: 'Settings',
+			hideLabel: true,
+			items: [
+				{
+					label: 'Categories',
+					description: 'Manage the members of your learning system',
+					icon: 'Network',
+				},
+			],
+		},
 		{
 			label: 'Customise',
 			hideLabel: false,

frontend/src/components/PaymentSettings.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="flex flex-col h-full">
+		<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>
+		<div class="flex flex-row-reverse mt-auto">
+			<Button variant="solid" @click="update">
+				{{ __('Update') }}
+			</Button>
+		</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

@@ -80,6 +80,7 @@
 						:label="__(field.label)"
 						:type="field.type"
 						:rows="field.rows"
+						:options="field.options"
 					/>
 				</div>
 			</div>
@@ -89,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'