feat: payment gateway settings

frontend/src/components/Modals/Settings.vue

@@ -113,6 +113,12 @@ const tabsStructure = computed(() => {
 					description:
 						'Configure the payment gateway and other payment related settings',
 					fields: [
+						{
+							label: 'Payment Gateway',
+							name: 'payment_gateway',
+							type: 'Link',
+							doctype: 'Payment Gateway',
+						},
 						{
 							label: 'Razorpay Key',
 							name: 'razorpay_key',
@@ -254,6 +260,24 @@ 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/SettingDetails.vue

@@ -22,13 +22,13 @@
 							v-if="field.type == 'Link'"
 							v-model="field.value"
 							:doctype="field.doctype"
-							:label="field.label"
+							:label="__(field.label)"
 						/>
 
 						<Codemirror
 							v-else-if="field.type == 'Code'"
 							v-model:value="field.value"
-							:label="field.label"
+							:label="__(field.label)"
 							:height="200"
 							:options="{
 								mode: field.mode,
@@ -40,9 +40,10 @@
 							v-else
 							:key="field.name"
 							v-model="field.value"
-							:label="field.label"
+							:label="__(field.label)"
 							:type="field.type"
 							:rows="field.rows"
+							:options="field.options"
 						/>
 					</div>
 				</div>