refactor: transactions changes based on coupon code

frontend/src/components/Controls/Autocomplete.vue

@@ -19,10 +19,10 @@
 								@click="() => togglePopover()"
 								:disabled="attrs.readonly"
 							>
-								<div class="flex items-center">
+								<div class="flex items-center w-[90%]">
 									<slot name="prefix" />
 									<span
-										class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+										class="block truncate text-base leading-5"
 										v-if="selectedValue"
 									>
 										{{ displayValue(selectedValue) }}

frontend/src/components/Settings/Coupons/CouponDetails.vue

@@ -1,16 +1,15 @@
 <template>
-	<div class="flex flex-col text-base h-full overflow-y-auto">
-		<div class="flex items-center space-x-2 mb-5">
-			<Button variant="ghost" @click="emit('updateStep', 'list')">
-				<template #icon>
-					<ChevronLeft class="size-5 stroke-1 text-ink-gray-7" />
-				</template>
-			</Button>
+	<div class="flex flex-col text-base h-full">
+		<div class="flex items-center space-x-2 mb-8 -ml-1.5">
+			<ChevronLeft
+				class="size-5 stroke-1.5 text-ink-gray-7 cursor-pointer"
+				@click="emit('updateStep', 'list')"
+			/>
 			<div class="text-xl font-semibold text-ink-gray-9">
 				{{ data?.name ? __('Edit Coupon') : __('New Coupon') }}
 			</div>
 		</div>
-		<div class="space-y-4">
+		<div class="space-y-4 overflow-y-auto">
 			<div>
 				<FormControl
 					v-model="data.enabled"
@@ -74,35 +73,28 @@
 				<CouponItems ref="couponItems" :data="data" :coupons="coupons" />
 			</div>
 		</div>
-		<div class="mt-auto w-full space-x-2">
-			<Button variant="solid" class="float-right" @click="saveCoupon()">
+		<div class="mt-auto space-x-2 ml-auto">
+			<Button variant="solid" @click="saveCoupon()">
 				{{ __('Save') }}
 			</Button>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
-import {
-	Button,
-	createListResource,
-	createResource,
-	FormControl,
-	toast,
-} from 'frappe-ui'
-import { ref, watch, computed } from 'vue'
-import { ChevronLeft, Plus, X } from 'lucide-vue-next'
+import { Button, FormControl, toast } from 'frappe-ui'
+import { ref } from 'vue'
+import { ChevronLeft } from 'lucide-vue-next'
 import type { Coupon, Coupons } from './types'
 import CouponItems from '@/components/Settings/Coupons/CouponItems.vue'
 
 const couponItems = ref<any>(null)
+const emit = defineEmits(['updateStep'])
 
 const props = defineProps<{
 	coupons: Coupons
 	data: Coupon
 }>()
 
-const emit = defineEmits(['updateStep'])
-
 const saveCoupon = () => {
 	if (props.data?.name) {
 		editCoupon()
@@ -129,7 +121,6 @@ const editCoupon = () => {
 const createCoupon = () => {
 	if (couponItems.value) {
 		let rows = couponItems.value.saveItems()
-		console.log(rows)
 		props.data.applicable_items = rows
 	}
 	props.coupons.insert.submit(
@@ -148,98 +139,4 @@ const createCoupon = () => {
 		}
 	)
 }
-
-/* 
-watch(
-	() => show.value,
-	(val) => {
-		if (val) {
-			if (props.couponId && props.couponId !== 'new') {
-				getDoc.submit()
-			} else {
-				doc.value = {
-					code: '',
-					discount_type: 'Percent',
-					active: 1,
-					applicable_items: [],
-				}
-			}
-		}
-	}
-) */
-/* 
-function addRow() {
-	doc.value.applicable_items.push({
-		reference_doctype: 'LMS Course',
-		reference_name: null,
-	})
-}
-function removeRow(idx) {
-	doc.value.applicable_items.splice(idx, 1)
-} */
-/* 
-function getFilters(idx) {
-	// don't show the batch or course that has already been selected
-	const row = doc.value.applicable_items[idx]
-	if (!row.reference_doctype) return {}
-	const doctype = row.reference_doctype
-	const selectedNames = doc.value.applicable_items
-		.filter(
-			(r, i) => i !== idx && r.reference_doctype === doctype && r.reference_name
-		)
-		.map((r) => r.reference_name)
-	if (selectedNames.length === 0) return {}
-	return {
-		name: ['not in', selectedNames],
-	}
-}
-
-const saveDoc = createResource({
-	url: 'frappe.client.save',
-	makeParams(values) {
-		return { doc: doc.value }
-	},
-})
-
-const insertDoc = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return { doc: { doctype: 'LMS Coupon', ...doc.value } }
-	},
-})
-
-function handleCodeInput(event) {
-	if (event.data && !/^[A-Za-z0-9]*$/.test(event.data)) {
-		event.preventDefault()
-	}
-}
-
-function save() {
-	if (props.couponId && props.couponId !== 'new') {
-		saveDoc.submit(
-			{},
-			{
-				onSuccess() {
-					toast.success(__('Saved'))
-					emit('saved')
-				},
-				onError(err) {
-					toast.error(err.messages?.[0] || err.message || err)
-				},
-			}
-		)
-	} else {
-		insertDoc.submit(
-			{},
-			{
-				onSuccess() {
-					toast.success(__('Saved'))
-				},
-				onError(err) {
-					toast.error(err.messages?.[0] || err.message || err)
-				},
-			}
-		)
-	}
-} */
 </script>

frontend/src/components/Settings/SettingFields.vue

@@ -147,6 +147,8 @@ const columns = computed(() => {
 		} else {
 			if (field.type == 'checkbox') {
 				field.value = props.data[field.name] ? true : false
+			} else {
+				field.value = props.data[field.name]
 			}
 			currentColumn.push(field)
 		}

frontend/src/components/Settings/Settings.vue

@@ -29,7 +29,7 @@
 				<div
 					v-if="activeTab && data.doc"
 					:key="activeTab.label"
-					class="flex flex-1 flex-col px-10 py-8 bg-surface-modal"
+					class="flex flex-1 flex-col p-8 bg-surface-modal"
 				>
 					<component
 						v-if="activeTab.template"
@@ -79,7 +79,7 @@ import EmailTemplates from '@/components/Settings/EmailTemplates.vue'
 import BrandSettings from '@/components/Settings/BrandSettings.vue'
 import PaymentGateways from '@/components/Settings/PaymentGateways.vue'
 import Coupons from '@/components/Settings/Coupons/Coupons.vue'
-import Transactions from '@/components/Settings/Transactions.vue'
+import Transactions from '@/components/Settings/Transactions/Transactions.vue'
 import ZoomSettings from '@/components/Settings/ZoomSettings.vue'
 import Badges from '@/components/Settings/Badges.vue'
 

frontend/src/components/Settings/TransactionDetails.vue

@@ -1,199 +0,0 @@
-<template>
-	<Dialog
-		v-model="show"
-		:options="{
-			title: __('Transaction Details'),
-			size: '3xl',
-		}"
-	>
-		<template #body-content>
-			<div v-if="transactionData" class="text-base">
-				<div class="grid grid-cols-3 gap-5 mt-5">
-					<FormControl
-						:label="__('Payment Received')"
-						type="checkbox"
-						v-model="transactionData.payment_received"
-					/>
-					<FormControl
-						:label="__('Payment For Certificate')"
-						type="checkbox"
-						v-model="transactionData.payment_for_certificate"
-					/>
-				</div>
-
-				<div class="grid grid-cols-3 gap-5 mt-5">
-					<Link
-						:label="__('Member')"
-						doctype="User"
-						v-model="transactionData.member"
-					/>
-					<FormControl
-						:label="__('Billing Name')"
-						v-model="transactionData.billing_name"
-					/>
-					<Link
-						:label="__('Source')"
-						v-model="transactionData.source"
-						doctype="LMS Source"
-					/>
-				</div>
-
-				<div class="font-semibold mt-10">
-					{{ __('Payment Details') }}
-				</div>
-				<div class="grid grid-cols-3 gap-5 mt-5">
-					<Link
-						:label="__('Payment For Document Type')"
-						v-model="transactionData.payment_for_document_type"
-						doctype="DocType"
-					/>
-					<Link
-						:label="__('Payment For Document')"
-						v-model="transactionData.payment_for_document"
-						:doctype="transactionData.payment_for_document_type"
-					/>
-					<Link
-						:label="__('Address')"
-						v-model="transactionData.address"
-						doctype="Address"
-					/>
-				</div>
-
-				<div class="grid grid-cols-3 gap-5 mt-5">
-					<Link
-						:label="__('Currency')"
-						v-model="transactionData.currency"
-						doctype="Currency"
-					/>
-					<FormControl :label="__('Amount')" v-model="transactionData.amount" />
-					<FormControl
-						v-if="transactionData.coupon"
-						:label="__('Coupon Code')"
-						v-model="transactionData.coupon_code"
-						:disabled="true"
-					/>
-				</div>
-
-				<div class="grid grid-cols-3 gap-5 mt-5">
-					<FormControl
-						v-if="Number(transactionData.discount_amount)"
-						:label="__('Discount Amount')"
-						v-model="transactionData.discount_amount"
-						:disabled="true"
-					/>
-					<FormControl
-						v-if="Number(transactionData.gst_amount)"
-						:label="__('GST Amount')"
-						v-model="transactionData.gst_amount"
-						:disabled="true"
-					/>
-					<FormControl
-						v-if="
-							Number(transactionData.discount_amount) ||
-							Number(transactionData.gst_amount)
-						"
-						:label="__('Total Amount')"
-						v-model="transactionData.total_amount"
-						:disabled="true"
-					/>
-				</div>
-
-				<div class="grid grid-cols-3 gap-5 mt-5">
-					<FormControl :label="__('GSTIN')" v-model="transactionData.gstin" />
-					<FormControl :label="__('PAN')" v-model="transactionData.pan" />
-					<FormControl
-						:label="__('Payment ID')"
-						v-model="transactionData.payment_id"
-					/>
-				</div>
-
-				<div class="grid grid-cols-3 gap-5 mt-5">
-					<FormControl
-						:label="__('Order ID')"
-						v-model="transactionData.order_id"
-					/>
-				</div>
-			</div>
-		</template>
-		<template #actions="{ close }">
-			<div class="space-x-2 pb-5 float-right">
-				<Button @click="openDetails(close)">
-					{{ __('Open the ') }}
-					{{
-						transaction.payment_for_document_type == 'LMS Course'
-							? __('Course')
-							: __('Batch')
-					}}
-				</Button>
-				<Button variant="solid" @click="saveTransaction(close)">
-					{{ __('Save') }}
-				</Button>
-			</div>
-		</template>
-	</Dialog>
-</template>
-<script setup lang="ts">
-import { Dialog, FormControl, Button, createResource } from 'frappe-ui'
-import { useRouter } from 'vue-router'
-import { ref, watch } from 'vue'
-import Link from '@/components/Controls/Link.vue'
-
-const show = defineModel<boolean>({ required: true, default: false })
-const transactions = defineModel<any>('transactions')
-const router = useRouter()
-const showModal = defineModel('show')
-const transactionData = ref<{ [key: string]: any } | null>(null)
-
-const props = defineProps<{
-	transaction: { [key: string]: any } | null
-}>()
-
-const paymentDoc = createResource({
-	url: 'frappe.client.get',
-	makeParams() {
-		return { doctype: 'LMS Payment', name: props.transaction?.name }
-	},
-	onSuccess(data) {
-		transactionData.value = data
-	},
-})
-
-watch(
-	() => props.transaction,
-	(newVal) => {
-		if (newVal?.name) {
-			paymentDoc.submit()
-		} else {
-			transactionData.value = null
-		}
-	},
-	{ immediate: true }
-)
-
-const saveTransaction = (close: () => void) => {
-	transactions.value.setValue
-		.submit({
-			...transactionData.value,
-		})
-		.then(() => {
-			close()
-		})
-}
-
-const openDetails = (close: Function) => {
-	if (props.transaction) {
-		const docType = props.transaction.payment_for_document_type
-		const docName = props.transaction.payment_for_document
-		if (docType && docName) {
-			router.push({
-				name: docType == 'LMS Course' ? 'CourseDetail' : 'BatchDetail',
-				params: {
-					[docType == 'LMS Course' ? 'courseName' : 'batchName']: docName,
-				},
-			})
-		}
-	}
-	close()
-	showModal.value = false
-}
-</script>

frontend/src/components/Settings/Transactions/TransactionDetails.vue

@@ -0,0 +1,184 @@
+<template>
+	<div class="flex flex-col h-full text-base">
+		<div class="flex items-center space-x-2 mb-8 -ml-1.5">
+			<ChevronLeft
+				class="size-5 stroke-1.5 text-ink-gray-7 cursor-pointer"
+				@click="emit('updateStep', 'list')"
+			/>
+			<div class="text-xl font-semibold text-ink-gray-9">
+				{{ __('Transaction Details') }}
+			</div>
+		</div>
+		<div v-if="transactionData" class="overflow-y-auto">
+			<div class="grid grid-cols-3 gap-5">
+				<FormControl
+					:label="__('Payment Received')"
+					type="checkbox"
+					v-model="transactionData.payment_received"
+				/>
+				<FormControl
+					:label="__('Payment For Certificate')"
+					type="checkbox"
+					v-model="transactionData.payment_for_certificate"
+				/>
+			</div>
+
+			<div class="grid grid-cols-3 gap-5 mt-5">
+				<Link
+					:label="__('Member')"
+					doctype="User"
+					v-model="transactionData.member"
+				/>
+				<FormControl
+					:label="__('Billing Name')"
+					v-model="transactionData.billing_name"
+				/>
+				<Link
+					:label="__('Source')"
+					v-model="transactionData.source"
+					doctype="LMS Source"
+				/>
+				<Link
+					:label="__('Payment For Document Type')"
+					v-model="transactionData.payment_for_document_type"
+					doctype="DocType"
+				/>
+				<Link
+					:label="__('Payment For Document')"
+					v-model="transactionData.payment_for_document"
+					:doctype="transactionData.payment_for_document_type"
+				/>
+			</div>
+
+			<div class="font-semibold mt-10">
+				{{ __('Payment Details') }}
+			</div>
+			<div class="grid grid-cols-3 gap-5 mt-5">
+				<Link
+					:label="__('Currency')"
+					v-model="transactionData.currency"
+					doctype="Currency"
+				/>
+				<FormControl :label="__('Amount')" v-model="transactionData.amount" />
+				<FormControl
+					v-if="transactionData.amount_with_gst"
+					:label="__('Amount with GST')"
+					v-model="transactionData.amount_with_gst"
+				/>
+			</div>
+
+			<div v-if="transactionData.coupon">
+				<div class="font-semibold mt-10">
+					{{ __('Coupon Details') }}
+				</div>
+				<div class="grid grid-cols-3 gap-5 mt-5">
+					<FormControl
+						v-if="transactionData.coupon"
+						:label="__('Coupon Code')"
+						v-model="transactionData.coupon"
+					/>
+					<FormControl
+						v-if="transactionData.coupon"
+						:label="__('Coupon Code')"
+						v-model="transactionData.coupon_code"
+					/>
+					<FormControl
+						v-if="transactionData.coupon"
+						:label="__('Discount Amount')"
+						v-model="transactionData.discount_amount"
+					/>
+					<FormControl
+						v-if="transactionData.coupon"
+						:label="__('Original Amount')"
+						v-model="transactionData.original_amount"
+					/>
+				</div>
+			</div>
+
+			<div class="font-semibold mt-10">
+				{{ __('Billing Details') }}
+			</div>
+			<div class="grid grid-cols-3 gap-5 mt-5">
+				<Link
+					:label="__('Address')"
+					v-model="transactionData.address"
+					doctype="Address"
+				/>
+				<FormControl :label="__('GSTIN')" v-model="transactionData.gstin" />
+				<FormControl :label="__('PAN')" v-model="transactionData.pan" />
+				<FormControl
+					:label="__('Payment ID')"
+					v-model="transactionData.payment_id"
+				/>
+				<FormControl
+					:label="__('Order ID')"
+					v-model="transactionData.order_id"
+				/>
+			</div>
+		</div>
+		<div class="space-x-2 mt-auto ml-auto">
+			<Button @click="openDetails()">
+				{{ __('Open the ') }}
+				{{
+					data.payment_for_document_type == 'LMS Course'
+						? __('Course')
+						: __('Batch')
+				}}
+			</Button>
+			<Button variant="solid" @click="saveTransaction()">
+				{{ __('Save') }}
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { Button, FormControl } from 'frappe-ui'
+import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import Link from '@/components/Controls/Link.vue'
+
+const router = useRouter()
+const transactionData = ref<{ [key: string]: any } | null>(null)
+const emit = defineEmits(['updateStep'])
+const show = defineModel('show')
+
+const props = defineProps<{
+	transactions: any
+	data: any
+}>()
+
+watch(
+	() => props.data,
+	(newVal) => {
+		transactionData.value = newVal ? { ...newVal } : null
+	},
+	{ immediate: true }
+)
+
+const saveTransaction = (close: () => void) => {
+	props.transactions.value.setValue
+		.submit({
+			...transactionData.value,
+		})
+		.then(() => {
+			close()
+		})
+}
+
+const openDetails = () => {
+	if (props.data) {
+		const docType = props.data.payment_for_document_type
+		const docName = props.data.payment_for_document
+		if (docType && docName) {
+			router.push({
+				name: docType == 'LMS Course' ? 'CourseDetail' : 'BatchDetail',
+				params: {
+					[docType == 'LMS Course' ? 'courseName' : 'batchName']: docName,
+				},
+			})
+		}
+		show.value = false
+	}
+}
+</script>

frontend/src/components/Settings/Transactions/TransactionList.vue

@@ -73,8 +73,7 @@
 									:disabled="true"
 								/>
 								<div v-else-if="column.key == 'amount'">
-									{{ getCurrencySymbol(row['currency']) }}
-									{{ row['total_amount'] }}
+									{{ getCurrencySymbol(row['currency']) }} {{ row[column.key] }}
 								</div>
 								<div v-else class="leading-5 text-sm">
 									{{ row[column.key] }}
@@ -97,17 +96,10 @@
 			</div>
 		</div>
 	</div>
-	<TransactionDetails
-		v-model="showForm"
-		:transaction="currentTransaction"
-		v-model:transactions="transactions"
-		v-model:show="show"
-	/>
 </template>
 <script setup lang="ts">
 import {
 	Button,
-	createListResource,
 	ListView,
 	ListHeader,
 	ListHeaderItem,
@@ -119,51 +111,19 @@ import {
 } from 'frappe-ui'
 import { computed, ref, watch } from 'vue'
 import { RefreshCw } from 'lucide-vue-next'
-import TransactionDetails from './TransactionDetails.vue'
 import Link from '@/components/Controls/Link.vue'
 
-const showForm = ref(false)
-const currentTransaction = ref<{ [key: string]: any } | null>(null)
-const show = defineModel('show')
 const billingName = ref(null)
 const paymentReceived = ref(false)
 const paymentForCertificate = ref(false)
 const member = ref(null)
+const emit = defineEmits(['updateStep'])
 
-const props = defineProps({
-	label: {
-		type: String,
-		required: true,
-	},
-	description: {
-		type: String,
-		default: '',
-	},
-})
-
-const transactions = createListResource({
-	doctype: 'LMS Payment',
-	fields: [
-		'name',
-		'member',
-		'billing_name',
-		'source',
-		'payment_for_document_type',
-		'payment_for_document',
-		'payment_received',
-		'payment_for_certificate',
-		'currency',
-		'amount',
-		'total_amount',
-		'order_id',
-		'payment_id',
-		'gstin',
-		'pan',
-		'address',
-	],
-	auto: true,
-	orderBy: 'modified desc',
-})
+const props = defineProps<{
+	label: string
+	description: string
+	transactions: any
+}>()
 
 watch(
 	[billingName, member, paymentReceived, paymentForCertificate],
@@ -173,7 +133,7 @@ watch(
 		newPaymentReceived,
 		newPaymentForCertificate,
 	]) => {
-		transactions.update({
+		props.transactions.update({
 			filters: [
 				newBillingName ? [['billing_name', 'like', `%${newBillingName}%`]] : [],
 				newMember ? [['member', '=', newMember]] : [],
@@ -185,14 +145,13 @@ watch(
 					: [],
 			].flat(),
 		})
-		transactions.reload()
+		props.transactions.reload()
 	},
 	{ immediate: true }
 )
 
 const openForm = (transaction: { [key: string]: any }) => {
-	currentTransaction.value = transaction
-	showForm.value = true
+	emit('updateStep', 'details', { ...transaction })
 }
 
 const getCurrencySymbol = (currency: string) => {

frontend/src/components/Settings/Transactions/Transactions.vue

@@ -0,0 +1,66 @@
+<template>
+	<TransactionList
+		v-if="step === 'list'"
+		:label="props.label"
+		:description="props.description"
+		:transactions="transactions"
+		@updateStep="updateStep"
+	/>
+	<TransactionDetails
+		v-else-if="step == 'details'"
+		:transactions="transactions"
+		:data="data"
+		v-model:show="show"
+		@updateStep="updateStep"
+	/>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { createListResource } from 'frappe-ui'
+import TransactionList from '@/components/Settings/Transactions/TransactionList.vue'
+import TransactionDetails from '@/components/Settings/Transactions/TransactionDetails.vue'
+
+const step = ref('list')
+const data = ref<any | null>(null)
+const show = defineModel('show')
+
+const props = defineProps<{
+	label: string
+	description: string
+}>()
+
+const updateStep = (newStep: 'list' | 'new' | 'edit', newData: any) => {
+	step.value = newStep
+	if (newData) {
+		data.value = newData
+	}
+}
+
+const transactions = createListResource({
+	doctype: 'LMS Payment',
+	fields: [
+		'name',
+		'member',
+		'billing_name',
+		'source',
+		'payment_for_document_type',
+		'payment_for_document',
+		'payment_received',
+		'payment_for_certificate',
+		'currency',
+		'amount',
+		'amount_with_gst',
+		'coupon',
+		'coupon_code',
+		'discount_amount',
+		'original_amount',
+		'order_id',
+		'payment_id',
+		'gstin',
+		'pan',
+		'address',
+	],
+	auto: true,
+	orderBy: 'modified desc',
+})
+</script>