From 5e2de35693aa868a557c77d76196c6102e157797 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 22 May 2025 21:39:49 +0530
Subject: [PATCH 1/3] refactor: layout of payment fields

---
 frontend/components.d.ts                      |   2 +
 frontend/src/components/BrandSettings.vue     |  10 +-
 frontend/src/components/Categories.vue        |   4 +-
 frontend/src/components/EmailTemplates.vue    | 136 +++++++++++++++
 .../components/Modals/EmailTemplateModal.vue  | 158 ++++++++++++++++++
 frontend/src/components/Modals/Settings.vue   |  85 ++++------
 frontend/src/components/PaymentSettings.vue   |  24 ++-
 frontend/src/components/SettingFields.vue     |   7 +-
 8 files changed, 365 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/EmailTemplates.vue
 create mode 100644 frontend/src/components/Modals/EmailTemplateModal.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ec2677b1..585aa545 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -47,6 +47,8 @@ declare module 'vue' {
     Discussions: typeof import('./src/components/Discussions.vue')['default']
     EditCoverImage: typeof import('./src/components/Modals/EditCoverImage.vue')['default']
     EditProfile: typeof import('./src/components/Modals/EditProfile.vue')['default']
+    EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
+    EmailTemplates: typeof import('./src/components/EmailTemplates.vue')['default']
     EmptyState: typeof import('./src/components/EmptyState.vue')['default']
     EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
     Evaluators: typeof import('./src/components/Evaluators.vue')['default']
diff --git a/frontend/src/components/BrandSettings.vue b/frontend/src/components/BrandSettings.vue
index 56b9abe3..f988073b 100644
--- a/frontend/src/components/BrandSettings.vue
+++ b/frontend/src/components/BrandSettings.vue
@@ -18,11 +18,11 @@
 		</div>
 		<div class="overflow-y-auto">
 			<SettingFields :fields="fields" :data="data.data" />
-			<div class="flex flex-row-reverse mt-auto">
-				<Button variant="solid" :loading="saveSettings.loading" @click="update">
-					{{ __('Update') }}
-				</Button>
-			</div>
+		</div>
+		<div class="flex flex-row-reverse mt-auto">
+			<Button variant="solid" :loading="saveSettings.loading" @click="update">
+				{{ __('Update') }}
+			</Button>
 		</div>
 	</div>
 </template>
diff --git a/frontend/src/components/Categories.vue b/frontend/src/components/Categories.vue
index 8a8eb80e..905839a1 100644
--- a/frontend/src/components/Categories.vue
+++ b/frontend/src/components/Categories.vue
@@ -49,11 +49,11 @@
 				<div
 					v-for="(cat, index) in categories.data"
 					:key="cat.name"
-					class="pt-4 pb-1"
+					class="pt-2"
 				>
 					<div
 						v-if="editing?.name !== cat.name"
-						class="flex items-center justify-between group"
+						class="flex items-center justify-between group text-sm"
 					>
 						<div @dblclick="allowEdit(cat, index)">
 							{{ cat.category }}
diff --git a/frontend/src/components/EmailTemplates.vue b/frontend/src/components/EmailTemplates.vue
new file mode 100644
index 00000000..fa20e62d
--- /dev/null
+++ b/frontend/src/components/EmailTemplates.vue
@@ -0,0 +1,136 @@
+<template>
+	<div class="flex flex-col min-h-0 text-base">
+		<div class="flex items-center justify-between mb-5">
+			<div class="flex flex-col space-y-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ label }}
+				</div>
+				<div class="text-xs text-ink-gray-5">
+					{{ __(description) }}
+				</div>
+			</div>
+			<div class="flex items-center space-x-5">
+				<Button @click="() => (showForm = true)">
+					<template #prefix>
+						<Plus class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ __('New') }}
+				</Button>
+			</div>
+		</div>
+		<div v-if="emailTemplates.data?.length" class="overflow-y-scroll">
+			<ListView
+				:columns="columns"
+				:rows="emailTemplates.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+					onRowClick: (row) => {
+						if (readOnlyMode) return
+						selectedTemplate = row.name
+						showForm = true
+					},
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in columns">
+						<template #prefix="{ item }">
+							<component
+								v-if="item.icon"
+								:is="item.icon"
+								class="h-4 w-4 stroke-1.5 ml-4"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+
+				<ListRows>
+					<ListRow :row="row" v-for="row in emailTemplates.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div v-if="column.key == 'use_html'">
+									<FormControl
+										v-model="row[column.key]"
+										type="checkbox"
+										:disabled="true"
+									/>
+								</div>
+								<div v-else class="leading-5 text-sm">
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+			</ListView>
+		</div>
+	</div>
+	<EmailTemplateModal
+		v-model="showForm"
+		v-model:emailTemplates="emailTemplates"
+		:templateID="selectedTemplate"
+	/>
+</template>
+<script setup lang="ts">
+import {
+	createListResource,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+	FormControl,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	Button,
+} from 'frappe-ui'
+import { computed, ref } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+})
+
+const showForm = ref(false)
+const readOnlyMode = window.read_only_mode
+const selectedTemplate = ref(null)
+
+const emailTemplates = createListResource({
+	doctype: 'Email Template',
+	fields: ['name', 'subject', 'use_html', 'response'],
+	auto: true,
+	orderBy: 'modified desc',
+	cache: 'email-templates',
+})
+
+const columns = computed(() => {
+	return [
+		{
+			label: 'Name',
+			key: 'name',
+			width: '15rem',
+		},
+		{
+			label: 'Subject',
+			key: 'subject',
+			width: '18rem',
+		},
+		{
+			label: 'Use HTML',
+			key: 'use_html',
+			width: '10rem',
+			align: 'right',
+		},
+	]
+})
+</script>
diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
new file mode 100644
index 00000000..3721f792
--- /dev/null
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -0,0 +1,158 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title:
+				templateID == 'new'
+					? __('New Email Template')
+					: __('Edit Email Template'),
+			size: 'lg',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: ({ close }) => {
+						saveTemplate(close)
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<FormControl
+					:label="__('Name')"
+					v-model="template.name"
+					type="text"
+					:required="true"
+				/>
+				<FormControl
+					:label="__('Subject')"
+					v-model="template.subject"
+					type="text"
+					:required="true"
+				/>
+				<FormControl
+					:label="__('Use HTML')"
+					v-model="template.use_html"
+					type="checkbox"
+				/>
+				<div>
+					<div class="text-xs text-ink-gray-5 mb-2">
+						{{ __('Response') }}
+						<span class="text-ink-red-3">*</span>
+					</div>
+					<TextEditor
+						:content="template.response"
+						@change="(val) => (template.response = val)"
+						:editable="true"
+						:fixedMenu="true"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
+import { reactive, ref, watch } from 'vue'
+import { cleanError } from '@/utils'
+
+const props = defineProps({
+	templateID: {
+		type: String,
+		default: 'new',
+	},
+})
+
+console.log(props.templateID)
+
+const show = defineModel()
+const emailTemplates = defineModel('emailTemplates')
+const template = reactive({
+	name: '',
+	subject: '',
+	use_html: false,
+	response: '',
+})
+
+const saveTemplate = (close) => {
+	if (props.templateID == 'new') {
+		createNewTemplate(close)
+	} else {
+		updateTemplate(close)
+	}
+}
+
+const createNewTemplate = (close) => {
+	emailTemplates.value.insert.submit(
+		{
+			__newname: template.value.name,
+			...template.value,
+		},
+		{
+			onSuccess() {
+				emailTemplates.value.reload()
+				close()
+				refreshForm()
+				toast.success(__('Email Template created successfully'))
+			},
+			onError(err) {
+				close()
+				refreshForm()
+				toast.error(
+					cleanError(err.messages[0]) || __('Error creating email template')
+				)
+			},
+		}
+	)
+}
+
+const updateTemplate = (close) => {
+	console.log(show)
+	emailTemplates.value.setValue.submit({
+		name: props.templateID,
+		...template,
+	}),
+		{
+			onSuccess() {
+				emailTemplates.value.reload()
+				close()
+				refreshForm()
+				toast.success(__('Email Template updated successfully'))
+			},
+			onError(err) {
+				close()
+				refreshForm()
+				toast.error(
+					cleanError(err.messages[0]) || __('Error updating email template')
+				)
+			},
+		}
+}
+
+watch(
+	() => props.templateID,
+	(val) => {
+		if (val !== 'new') {
+			emailTemplates.value?.data.forEach((row) => {
+				if (row.name === val) {
+					template.name = row.name
+					template.subject = row.subject
+					template.use_html = row.use_html
+					template.response = row.response
+				}
+			})
+		}
+	},
+	{ flush: 'post' }
+)
+
+const refreshForm = () => {
+	template.name = ''
+	template.subject = ''
+	template.use_html = false
+	template.response = ''
+}
+</script>
diff --git a/frontend/src/components/Modals/Settings.vue b/frontend/src/components/Modals/Settings.vue
index 60b0a2f5..18030ec1 100644
--- a/frontend/src/components/Modals/Settings.vue
+++ b/frontend/src/components/Modals/Settings.vue
@@ -51,8 +51,13 @@
 						:label="activeTab.label"
 						:description="activeTab.description"
 					/>
+					<EmailTemplates
+						v-else-if="activeTab.label === 'Email Templates'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+					/>
 					<PaymentSettings
-						v-else-if="activeTab.label === 'Payment Gateway'"
+						v-else-if="activeTab.label === 'Payment'"
 						:label="activeTab.label"
 						:description="activeTab.description"
 						:data="data"
@@ -86,6 +91,7 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import Members from '@/components/Members.vue'
 import Evaluators from '@/components/Evaluators.vue'
 import Categories from '@/components/Categories.vue'
+import EmailTemplates from '@/components/EmailTemplates.vue'
 import BrandSettings from '@/components/BrandSettings.vue'
 import PaymentSettings from '@/components/PaymentSettings.vue'
 
@@ -122,7 +128,7 @@ const tabsStructure = computed(() => {
 							label: 'Enable Learning Paths',
 							name: 'enable_learning_paths',
 							description:
-								'This will enforce students to go through programs assigned to them in the correct order.',
+								'This will ensure students follow the assigned programs in order.',
 							type: 'checkbox',
 						},
 						{
@@ -139,11 +145,26 @@ const tabsStructure = computed(() => {
 								'If enabled, it sends google calendar invite to the student for evaluations.',
 							type: 'checkbox',
 						},
+						{
+							type: 'Column Break',
+						},
+						{
+							label: 'Batch Confirmation Template',
+							name: 'batch_confirmation_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+						{
+							label: 'Certification Template',
+							name: 'certification_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
 						{
 							label: 'Unsplash Access Key',
 							name: 'unsplash_access_key',
 							description:
-								'Optional. If this is set, students can pick a cover image from the unsplash library for their profile page. https://unsplash.com/documentation#getting-started.',
+								'Allows users to pick a profile cover image from Unsplash. https://unsplash.com/documentation#getting-started.',
 							type: 'password',
 						},
 					],
@@ -155,11 +176,17 @@ const tabsStructure = computed(() => {
 			hideLabel: true,
 			items: [
 				{
-					label: 'Payment Gateway',
+					label: 'Payment',
 					icon: 'DollarSign',
 					description:
 						'Configure the payment gateway and other payment related settings',
 					fields: [
+						{
+							label: 'Default Currency',
+							name: 'default_currency',
+							type: 'Link',
+							doctype: 'Currency',
+						},
 						{
 							label: 'Payment Gateway',
 							name: 'payment_gateway',
@@ -167,10 +194,7 @@ const tabsStructure = computed(() => {
 							doctype: 'Payment Gateway',
 						},
 						{
-							label: 'Default Currency',
-							name: 'default_currency',
-							type: 'Link',
-							doctype: 'Currency',
+							type: 'Column Break',
 						},
 						{
 							label: 'Apply GST for India',
@@ -210,6 +234,11 @@ const tabsStructure = computed(() => {
 					description: 'Double click to edit the category',
 					icon: 'Network',
 				},
+				{
+					label: 'Email Templates',
+					description: 'Manage the email templates for your learning system',
+					icon: 'MailPlus',
+				},
 			],
 		},
 		{
@@ -235,28 +264,6 @@ const tabsStructure = computed(() => {
 							name: 'favicon',
 							type: 'Upload',
 						},
-						{
-							label: 'Footer Logo',
-							name: 'footer_logo',
-							type: 'Upload',
-						},
-						{
-							label: 'Address',
-							name: 'address',
-							type: 'textarea',
-							rows: 2,
-						},
-						{
-							label: 'Footer "Powered By"',
-							name: 'footer_powered',
-							type: 'textarea',
-							rows: 4,
-						},
-						{
-							label: 'Copyright',
-							name: 'copyright',
-							type: 'text',
-						},
 					],
 				},
 				{
@@ -299,24 +306,6 @@ const tabsStructure = computed(() => {
 						},
 					],
 				},
-				{
-					label: 'Email Templates',
-					icon: 'MailPlus',
-					fields: [
-						{
-							label: 'Batch Confirmation Template',
-							name: 'batch_confirmation_template',
-							doctype: 'Email Template',
-							type: 'Link',
-						},
-						{
-							label: 'Certification Template',
-							name: 'certification_template',
-							doctype: 'Email Template',
-							type: 'Link',
-						},
-					],
-				},
 				{
 					label: 'Signup',
 					icon: 'LogIn',
diff --git a/frontend/src/components/PaymentSettings.vue b/frontend/src/components/PaymentSettings.vue
index b7a308ca..e53d76d4 100644
--- a/frontend/src/components/PaymentSettings.vue
+++ b/frontend/src/components/PaymentSettings.vue
@@ -12,13 +12,13 @@
             /> -->
 		</div>
 		<div class="overflow-y-scroll">
-			<div class="flex space-x-4">
-				<SettingFields :fields="fields" :data="data.doc" class="w-1/2" />
+			<div class="flex flex-col divide-y">
+				<SettingFields :fields="fields" :data="data.doc" />
 				<SettingFields
 					v-if="paymentGateway.data"
 					:fields="paymentGateway.data.fields"
 					:data="paymentGateway.data.data"
-					class="w-1/2"
+					class="pt-5 my-0"
 				/>
 			</div>
 		</div>
@@ -60,9 +60,27 @@ const paymentGateway = createResource({
 			payment_gateway: props.data.doc.payment_gateway,
 		}
 	},
+	transform(data) {
+		arrangeFields(data.fields)
+	},
 	auto: true,
 })
 
+const arrangeFields = (fields) => {
+	fields = data.fields.sort((a, b) => {
+		if (a.type === 'Upload' && b.type !== 'Upload') {
+			return 1
+		} else if (a.type !== 'Upload' && b.type === 'Upload') {
+			return -1
+		}
+		return 0
+	})
+
+	fields.splice(3, 0, {
+		type: 'Column Break',
+	})
+}
+
 const saveSettings = createResource({
 	url: 'frappe.client.set_value',
 	makeParams(values) {
diff --git a/frontend/src/components/SettingFields.vue b/frontend/src/components/SettingFields.vue
index df9bebbd..8660596c 100644
--- a/frontend/src/components/SettingFields.vue
+++ b/frontend/src/components/SettingFields.vue
@@ -6,7 +6,7 @@
 		<div v-for="(column, index) in columns" :key="index">
 			<div
 				class="flex flex-col space-y-5"
-				:class="columns.length > 1 ? 'w-72' : 'w-full'"
+				:class="columns.length > 1 ? 'w-[21rem]' : 'w-1/2'"
 			>
 				<div v-for="field in column">
 					<Link
@@ -14,6 +14,7 @@
 						v-model="data[field.name]"
 						:doctype="field.doctype"
 						:label="__(field.label)"
+						:description="__(field.description)"
 					/>
 
 					<div v-else-if="field.type == 'Code'">
@@ -54,11 +55,11 @@
 						<div v-else>
 							<div class="flex items-center text-sm space-x-2">
 								<div
-									class="flex items-center justify-center rounded border border-outline-gray-modals bg-white w-[10rem] py-2"
+									class="flex items-center justify-center rounded border border-outline-gray-1 bg-surface-gray-2 px-20 py-5"
 								>
 									<img
 										:src="data[field.name]?.file_url || data[field.name]"
-										class="w-[80%] rounded"
+										class="size-6 rounded"
 									/>
 								</div>
 								<div class="flex flex-col flex-wrap">

From 5635d2a3251dbfddf17ac5f8484fed8a7a9dfae8 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 23 May 2025 13:28:18 +0530
Subject: [PATCH 2/3] feat: email template update and deletion

---
 frontend/src/components/EmailTemplates.vue    | 70 ++++++++++------
 .../components/Modals/EmailTemplateModal.vue  | 81 +++++++++++++------
 frontend/src/components/Modals/Settings.vue   |  4 +-
 frontend/src/components/PaymentSettings.vue   |  2 +-
 frontend/src/pages/BatchForm.vue              |  5 ++
 5 files changed, 113 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/EmailTemplates.vue b/frontend/src/components/EmailTemplates.vue
index fa20e62d..d3573d75 100644
--- a/frontend/src/components/EmailTemplates.vue
+++ b/frontend/src/components/EmailTemplates.vue
@@ -10,7 +10,7 @@
 				</div>
 			</div>
 			<div class="flex items-center space-x-5">
-				<Button @click="() => (showForm = true)">
+				<Button @click="openTemplateForm('new')">
 					<template #prefix>
 						<Plus class="h-3 w-3 stroke-1.5" />
 					</template>
@@ -26,9 +26,7 @@
 				:options="{
 					showTooltip: false,
 					onRowClick: (row) => {
-						if (readOnlyMode) return
-						selectedTemplate = row.name
-						showForm = true
+						openTemplateForm(row.name)
 					},
 				}"
 			>
@@ -50,20 +48,26 @@
 					<ListRow :row="row" v-for="row in emailTemplates.data">
 						<template #default="{ column, item }">
 							<ListRowItem :item="row[column.key]" :align="column.align">
-								<div v-if="column.key == 'use_html'">
-									<FormControl
-										v-model="row[column.key]"
-										type="checkbox"
-										:disabled="true"
-									/>
-								</div>
-								<div v-else class="leading-5 text-sm">
+								<div class="leading-5 text-sm">
 									{{ row[column.key] }}
 								</div>
 							</ListRowItem>
 						</template>
 					</ListRow>
 				</ListRows>
+
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeTemplate(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
 			</ListView>
 		</div>
 	</div>
@@ -75,16 +79,17 @@
 </template>
 <script setup lang="ts">
 import {
+	Button,
+	call,
 	createListResource,
 	ListView,
 	ListHeader,
 	ListHeaderItem,
 	ListSelectBanner,
-	FormControl,
 	ListRows,
 	ListRow,
 	ListRowItem,
-	Button,
+	toast,
 } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
@@ -107,29 +112,48 @@ const selectedTemplate = ref(null)
 
 const emailTemplates = createListResource({
 	doctype: 'Email Template',
-	fields: ['name', 'subject', 'use_html', 'response'],
+	fields: ['name', 'subject', 'use_html', 'response', 'response_html'],
 	auto: true,
 	orderBy: 'modified desc',
 	cache: 'email-templates',
 })
 
+const removeTemplate = (selections, unselectAll) => {
+	call('lms.lms.api.delete_documents', {
+		doctype: 'Email Template',
+		documents: Array.from(selections),
+	})
+		.then(() => {
+			emailTemplates.reload()
+			toast.success(__('Email Templates deleted successfully'))
+			unselectAll()
+		})
+		.catch((err) => {
+			toast.error(
+				cleanError(err.messages[0]) || __('Error deleting email templates')
+			)
+		})
+}
+
+const openTemplateForm = (templateID) => {
+	if (readOnlyMode) {
+		return
+	}
+	selectedTemplate.value = templateID
+	showForm.value = true
+}
+
 const columns = computed(() => {
 	return [
 		{
 			label: 'Name',
 			key: 'name',
-			width: '15rem',
+			width: '20rem',
 		},
 		{
 			label: 'Subject',
 			key: 'subject',
-			width: '18rem',
-		},
-		{
-			label: 'Use HTML',
-			key: 'use_html',
-			width: '10rem',
-			align: 'right',
+			width: '25rem',
 		},
 	]
 })
diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
index 3721f792..3ed97bbb 100644
--- a/frontend/src/components/Modals/EmailTemplateModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -25,21 +25,36 @@
 					v-model="template.name"
 					type="text"
 					:required="true"
+					:placeholder="__('Batch Enrollment Confirmation')"
 				/>
 				<FormControl
 					:label="__('Subject')"
 					v-model="template.subject"
 					type="text"
 					:required="true"
+					:placeholder="__('Your enrollment in {{ batch_name }} is confirmed')"
 				/>
 				<FormControl
 					:label="__('Use HTML')"
 					v-model="template.use_html"
 					type="checkbox"
 				/>
-				<div>
+				<FormControl
+					v-if="template.use_html"
+					:label="__('Content')"
+					v-model="template.response_html"
+					type="textarea"
+					:required="true"
+					:rows="10"
+					:placeholder="
+						__(
+							'<p>Dear {{ member_name }},</p>\n\n<p>You have been enrolled in our upcoming batch {{ batch_name }}.</p>\n\n<p>Thanks,</p>\n<p>Frappe Learning</p>'
+						)
+					"
+				/>
+				<div v-else>
 					<div class="text-xs text-ink-gray-5 mb-2">
-						{{ __('Response') }}
+						{{ __('Content') }}
 						<span class="text-ink-red-3">*</span>
 					</div>
 					<TextEditor
@@ -47,6 +62,11 @@
 						@change="(val) => (template.response = val)"
 						:editable="true"
 						:fixedMenu="true"
+						:placeholder="
+							__(
+								'Dear {{ member_name }},\n\nYou have been enrolled in our upcoming batch {{ batch_name }}.\n\nThanks,\nFrappe Learning'
+							)
+						"
 						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
 					/>
 				</div>
@@ -55,8 +75,8 @@
 	</Dialog>
 </template>
 <script setup lang="ts">
-import { Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
-import { reactive, ref, watch } from 'vue'
+import { call, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
+import { reactive, watch } from 'vue'
 import { cleanError } from '@/utils'
 
 const props = defineProps({
@@ -66,8 +86,6 @@ const props = defineProps({
 	},
 })
 
-console.log(props.templateID)
-
 const show = defineModel()
 const emailTemplates = defineModel('emailTemplates')
 const template = reactive({
@@ -75,6 +93,7 @@ const template = reactive({
 	subject: '',
 	use_html: false,
 	response: '',
+	response_html: '',
 })
 
 const saveTemplate = (close) => {
@@ -88,19 +107,17 @@ const saveTemplate = (close) => {
 const createNewTemplate = (close) => {
 	emailTemplates.value.insert.submit(
 		{
-			__newname: template.value.name,
-			...template.value,
+			__newname: template.name,
+			...template,
 		},
 		{
 			onSuccess() {
 				emailTemplates.value.reload()
-				close()
-				refreshForm()
+				refreshForm(close)
 				toast.success(__('Email Template created successfully'))
 			},
 			onError(err) {
-				close()
-				refreshForm()
+				refreshForm(close)
 				toast.error(
 					cleanError(err.messages[0]) || __('Error creating email template')
 				)
@@ -109,27 +126,42 @@ const createNewTemplate = (close) => {
 	)
 }
 
-const updateTemplate = (close) => {
-	console.log(show)
-	emailTemplates.value.setValue.submit({
-		name: props.templateID,
-		...template,
-	}),
+const updateTemplate = async (close) => {
+	if (props.templateID != template.name) {
+		await renameDoc()
+	}
+	setValue(close)
+}
+
+const setValue = (close) => {
+	emailTemplates.value.setValue.submit(
+		{
+			...template,
+			name: template.name,
+		},
 		{
 			onSuccess() {
 				emailTemplates.value.reload()
-				close()
-				refreshForm()
+				refreshForm(close)
+				console.log('template', template)
 				toast.success(__('Email Template updated successfully'))
 			},
 			onError(err) {
-				close()
-				refreshForm()
+				refreshForm(close)
 				toast.error(
 					cleanError(err.messages[0]) || __('Error updating email template')
 				)
 			},
 		}
+	)
+}
+
+const renameDoc = async () => {
+	await call('frappe.client.rename_doc', {
+		doctype: 'Email Template',
+		old_name: props.templateID,
+		new_name: template.name,
+	})
 }
 
 watch(
@@ -142,6 +174,7 @@ watch(
 					template.subject = row.subject
 					template.use_html = row.use_html
 					template.response = row.response
+					template.response_html = row.response_html
 				}
 			})
 		}
@@ -149,10 +182,12 @@ watch(
 	{ flush: 'post' }
 )
 
-const refreshForm = () => {
+const refreshForm = (close) => {
+	close()
 	template.name = ''
 	template.subject = ''
 	template.use_html = false
 	template.response = ''
+	template.response_html = ''
 }
 </script>
diff --git a/frontend/src/components/Modals/Settings.vue b/frontend/src/components/Modals/Settings.vue
index 18030ec1..e33feea2 100644
--- a/frontend/src/components/Modals/Settings.vue
+++ b/frontend/src/components/Modals/Settings.vue
@@ -57,7 +57,7 @@
 						:description="activeTab.description"
 					/>
 					<PaymentSettings
-						v-else-if="activeTab.label === 'Payment'"
+						v-else-if="activeTab.label === 'Payment Gateway'"
 						:label="activeTab.label"
 						:description="activeTab.description"
 						:data="data"
@@ -176,7 +176,7 @@ const tabsStructure = computed(() => {
 			hideLabel: true,
 			items: [
 				{
-					label: 'Payment',
+					label: 'Payment Gateway',
 					icon: 'DollarSign',
 					description:
 						'Configure the payment gateway and other payment related settings',
diff --git a/frontend/src/components/PaymentSettings.vue b/frontend/src/components/PaymentSettings.vue
index e53d76d4..e74cb6a2 100644
--- a/frontend/src/components/PaymentSettings.vue
+++ b/frontend/src/components/PaymentSettings.vue
@@ -67,7 +67,7 @@ const paymentGateway = createResource({
 })
 
 const arrangeFields = (fields) => {
-	fields = data.fields.sort((a, b) => {
+	fields = fields.sort((a, b) => {
 		if (a.type === 'Upload' && b.type !== 'Upload') {
 			return 1
 		} else if (a.type !== 'Upload' && b.type === 'Upload') {
diff --git a/frontend/src/pages/BatchForm.vue b/frontend/src/pages/BatchForm.vue
index 60415e81..066bc8e2 100644
--- a/frontend/src/pages/BatchForm.vue
+++ b/frontend/src/pages/BatchForm.vue
@@ -153,6 +153,11 @@
 							doctype="Email Template"
 							:label="__('Email Template')"
 							v-model="batch.confirmation_email_template"
+							:onCreate="
+								(value, close) => {
+									openSettings('Email Templates', close)
+								}
+							"
 						/>
 					</div>
 					<div class="space-y-5">

From eb089f2b58668e745d710db3d76d6ab5a2ea250c Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 23 May 2025 14:25:29 +0530
Subject: [PATCH 3/3] fix: return payment fields data after transform

---
 frontend/src/components/Modals/EmailTemplateModal.vue | 1 -
 frontend/src/components/PaymentSettings.vue           | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
index 3ed97bbb..b41468b8 100644
--- a/frontend/src/components/Modals/EmailTemplateModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -143,7 +143,6 @@ const setValue = (close) => {
 			onSuccess() {
 				emailTemplates.value.reload()
 				refreshForm(close)
-				console.log('template', template)
 				toast.success(__('Email Template updated successfully'))
 			},
 			onError(err) {
diff --git a/frontend/src/components/PaymentSettings.vue b/frontend/src/components/PaymentSettings.vue
index e74cb6a2..cbbe9742 100644
--- a/frontend/src/components/PaymentSettings.vue
+++ b/frontend/src/components/PaymentSettings.vue
@@ -62,6 +62,7 @@ const paymentGateway = createResource({
 	},
 	transform(data) {
 		arrangeFields(data.fields)
+		return data
 	},
 	auto: true,
 })