From 62edfd5e43800d564a1bdd6a23b517ccec08f597 Mon Sep 17 00:00:00 2001
From: AbleKSaju <126228406+AbleKSaju@users.noreply.github.com>
Date: Wed, 27 Nov 2024 12:47:26 +0530
Subject: [PATCH] fix: combine multiple emits into a single function

---
 .../POS/Modern/ModernPOSSelectedItemTable.vue |   5 +-
 src/pages/POS/ClassicPOS.vue                  | 137 +++++++-----------
 src/pages/POS/ModernPOS.vue                   | 136 +++++++----------
 src/pages/POS/POS.vue                         |  17 ++-
 src/pages/POS/POSQuickActions.vue             |   9 +-
 5 files changed, 114 insertions(+), 190 deletions(-)

diff --git a/src/components/POS/Modern/ModernPOSSelectedItemTable.vue b/src/components/POS/Modern/ModernPOSSelectedItemTable.vue
index a05bc4f5..07b5c1f2 100644
--- a/src/components/POS/Modern/ModernPOSSelectedItemTable.vue
+++ b/src/components/POS/Modern/ModernPOSSelectedItemTable.vue
@@ -43,7 +43,7 @@
         :row="(row as SalesInvoiceItem)"
         @selected-row="selectedItemRow"
         @run-sinv-formulas="runSinvFormulas"
-        @toggle-modal="handleToggleModal"
+        @toggle-modal="$emit('toggleModal')"
       />
     </Row>
   </div>
@@ -135,9 +135,6 @@ export default defineComponent({
     },
   },
   methods: {
-    handleToggleModal(modal: string) {
-      this.$emit('toggleModal', modal);
-    },
     async runSinvFormulas() {
       await this.sinvDoc.runFormulas();
     },
diff --git a/src/pages/POS/ClassicPOS.vue b/src/pages/POS/ClassicPOS.vue
index cf13bb8a..b50898af 100644
--- a/src/pages/POS/ClassicPOS.vue
+++ b/src/pages/POS/ClassicPOS.vue
@@ -3,46 +3,56 @@
     <OpenPOSShiftModal
       v-if="!isPosShiftOpen"
       :open-modal="!isPosShiftOpen"
-      @toggle-modal="toggleModal"
+      @toggle-modal="emitEvent('toggleModal', 'ShiftOpen')"
     />
 
     <ClosePOSShiftModal
       :open-modal="openShiftCloseModal"
-      @toggle-modal="toggleModal"
+      @toggle-modal="emitEvent('toggleModal', 'ShiftClose')"
     />
 
     <LoyaltyProgramModal
       :open-modal="openLoyaltyProgramModal"
       :loyalty-points="loyaltyPoints"
       :loyalty-program="loyaltyProgram"
-      @set-loyalty-points="emitSetLoyaltyPoints"
-      @toggle-modal="toggleModal"
+      @toggle-modal="emitEvent('toggleModal', 'LoyaltyProgram')"
+      @set-loyalty-points="(points) => emitEvent('setLoyaltyPoints', points)"
     />
+
     <SavedInvoiceModal
       :open-modal="openSavedInvoiceModal"
       :modal-status="openSavedInvoiceModal"
-      @selected-invoice-name="emitSelectedInvoice"
-      @toggle-modal="toggleModal"
+      @toggle-modal="emitEvent('toggleModal', 'SavedInvoice')"
+      @selected-invoice-name="
+        (invName) => emitEvent('selectedInvoiceName', invName)
+      "
     />
 
     <CouponCodeModal
       :open-modal="openCouponCodeModal"
-      @toggle-modal="toggleModal"
-      @set-coupons-count="emitCouponsCount"
+      @toggle-modal="emitEvent('toggleModal', 'CouponCode')"
+      @set-coupons-count="(count) => emitEvent('setCouponsCount', count)"
     />
 
     <PaymentModal
       :open-modal="openPaymentModal"
-      @toggle-modal="toggleModal"
-      @set-cash-amount="emitSetCashAmount"
-      @set-coupons-count="emitCouponsCount"
-      @set-transfer-ref-no="setTransferRefNo"
-      @set-transfer-amount="emitSetTransferAmount"
-      @create-transaction="emitCreateTransaction"
-      @set-transfer-clearance-date="setTransferClearanceDate"
+      @toggle-modal="emitEvent('toggleModal', 'Payment')"
+      @set-cash-amount="(amount) => emitEvent('setCashAmount', amount)"
+      @set-transfer-ref-no="(ref) => emitEvent('setTransferRefNo', ref)"
+      @set-coupons-count="(count) => emitEvent('setCouponsCount', count)"
+      @set-transfer-amount="(amount) => emitEvent('setTransferAmount', amount)"
+      @set-transfer-clearance-date="
+        (date) => emitEvent('setTransferClearanceDate', date)
+      "
+      @create-transaction="
+        (createTransaction) => emitEvent('createTransaction', createTransaction)
+      "
     />
 
-    <AlertModal :open-modal="openAlertModal" @toggle-modal="toggleModal" />
+    <AlertModal
+      :open-modal="openAlertModal"
+      @toggle-modal="emitEvent('toggleModal', 'Alert')"
+    />
 
     <div
       class="bg-gray-25 dark:bg-gray-875 grid grid-cols-12 gap-2 p-4"
@@ -75,7 +85,7 @@
               :border="true"
               :value="itemSearchTerm"
               @keyup.enter="
-                async () => await selectItem(await getItem(itemSearchTerm))
+                async () => emitEvent('addItem', await getItem(itemSearchTerm) as Item)
               "
               @change="(item: string) =>itemSearchTerm= item"
             />
@@ -85,7 +95,7 @@
               class="w-1/3"
               @item-selected="
                 async (name: string) => {
-                  await selectItem(await getItem(name));
+                  emitEvent('addItem', await getItem(name) as Item);
                 }
               "
             />
@@ -95,14 +105,14 @@
             v-if="tableView"
             :items="items"
             :item-qty-map="itemQuantityMap as ItemQtyMap"
-            @add-item="selectItem"
+            @add-item="(item) => emitEvent('addItem', item)"
           />
 
           <ItemsGrid
             v-else
             :items="items"
             :item-qty-map="itemQuantityMap as ItemQtyMap"
-            @add-item="selectItem"
+            @add-item="(item) => emitEvent('addItem', item)"
           />
 
           <div class="flex fixed bottom-0 p-1 mb-7 gap-x-3">
@@ -111,9 +121,9 @@
               :loyalty-points="loyaltyPoints"
               :loyalty-program="loyaltyProgram"
               :applied-coupons-count="appliedCouponsCount"
-              @toggle-view="toggleView"
-              @toggle-modal="toggleModal"
-              @emit-route-to-sinv-list="emitRouteToSinvList"
+              @toggle-view="emitEvent('toggleView')"
+              @emit-route-to-sinv-list="emitEvent('routeToSinvList')"
+              @toggle-modal="(modalName) => emitEvent('toggleModal', modalName)"
             />
           </div>
         </div>
@@ -199,6 +209,7 @@
                     :read-only="true"
                     :text-right="true"
                   />
+
                   <FloatingLabelCurrencyInput
                     v-if="sinvDoc?.fieldMap"
                     :df="sinvDoc?.fieldMap.grandTotal"
@@ -222,9 +233,10 @@
                       </p>
                     </slot>
                   </Button>
+
                   <Button
                     class="w-full mt-4 bg-blue-500 dark:bg-blue-700 py-6"
-                    @click="toggleModal('SavedInvoice', true)"
+                    @click="emitEvent('toggleModal', 'SavedInvoice', true)"
                   >
                     <slot>
                       <p class="uppercase text-lg text-white font-semibold">
@@ -249,7 +261,7 @@
                   <Button
                     class="mt-4 w-full bg-green-500 dark:bg-green-700 py-6"
                     :disabled="disablePayButton"
-                    @click="toggleModal('Payment', true)"
+                    @click="emitEvent('toggleModal', 'Payment', true)"
                   >
                     <slot>
                       <p class="uppercase text-lg text-white font-semibold">
@@ -279,27 +291,21 @@ import { Item } from 'models/baseModels/Item/Item';
 import Link from 'src/components/Controls/Link.vue';
 import CouponCodeModal from './CouponCodeModal.vue';
 import POSQuickActions from './POSQuickActions.vue';
-import { ModalName } from 'src/components/POS/types';
+import { PosEmits } from 'src/components/POS/types';
 import SavedInvoiceModal from './SavedInvoiceModal.vue';
 import OpenPOSShiftModal from './OpenPOSShiftModal.vue';
 import ClosePOSShiftModal from './ClosePOSShiftModal.vue';
 import Barcode from 'src/components/Controls/Barcode.vue';
-import { Payment } from 'models/baseModels/Payment/Payment';
 import LoyaltyProgramModal from './LoyaltyProgramModal.vue';
+import { POSItem, ItemQtyMap } from 'src/components/POS/types';
 import ItemsGrid from 'src/components/POS/Classic/ItemsGrid.vue';
 import ItemsTable from 'src/components/POS/Classic/ItemsTable.vue';
 import MultiLabelLink from 'src/components/Controls/MultiLabelLink.vue';
-import { InvoiceItem } from 'models/baseModels/InvoiceItem/InvoiceItem';
 import { SalesInvoice } from 'models/baseModels/SalesInvoice/SalesInvoice';
 import SelectedItemTable from 'src/components/POS/Classic/SelectedItemTable.vue';
 import FloatingLabelFloatInput from 'src/components/POS/FloatingLabelFloatInput.vue';
 import FloatingLabelCurrencyInput from 'src/components/POS/FloatingLabelCurrencyInput.vue';
 import { AppliedCouponCodes } from 'models/baseModels/AppliedCouponCodes/AppliedCouponCodes';
-import {
-  ItemQtyMap,
-  ItemSerialNumbers,
-  POSItem,
-} from 'src/components/POS/types';
 
 export default defineComponent({
   name: 'ClassicPOS',
@@ -312,11 +318,11 @@ export default defineComponent({
     ItemsTable,
     PaymentModal,
     MultiLabelLink,
-    CouponCodeModal,
     POSQuickActions,
+    CouponCodeModal,
     OpenPOSShiftModal,
-    SavedInvoiceModal,
     SelectedItemTable,
+    SavedInvoiceModal,
     ClosePOSShiftModal,
     LoyaltyProgramModal,
     FloatingLabelFloatInput,
@@ -324,8 +330,11 @@ export default defineComponent({
   },
   props: {
     cashAmount: Money,
+    tableView: Boolean,
+    totalQuantity:Number,
     itemDiscounts: Money,
     openAlertModal: Boolean,
+    isPosShiftOpen: Boolean,
     disablePayButton: Boolean,
     openPaymentModal: Boolean,
     openCouponCodeModal: Boolean,
@@ -364,78 +373,30 @@ export default defineComponent({
   },
   emits: [
     'addItem',
+    'toggleView',
     'toggleModal',
     'setCustomer',
     'clearValues',
     'setCashAmount',
     'setCouponsCount',
     'routeToSinvList',
+    'setTransferRefNo',
     'setLoyaltyPoints',
     'saveInvoiceAction',
     'createTransaction',
     'setTransferAmount',
     'selectedInvoiceName',
+    'setTransferClearanceDate',
   ],
   data() {
     return {
-      tableView: true,
-
-      totalQuantity: 0,
-      totalTaxedAmount: fyo.pesa(0),
       additionalDiscounts: fyo.pesa(0),
-
-      paymentDoc: {} as Payment,
-      itemSerialNumbers: {} as ItemSerialNumbers,
-
       itemSearchTerm: '',
-      transferRefNo: undefined as string | undefined,
-      transferClearanceDate: undefined as Date | undefined,
     };
   },
-  computed: {
-    isPosShiftOpen: () => !!fyo.singles.POSShift?.isShiftOpen,
-  },
   methods: {
-    setTransferRefNo(ref: string) {
-      this.transferRefNo = ref;
-    },
-    emitRouteToSinvList() {
-      this.$emit('routeToSinvList');
-    },
-    toggleView() {
-      this.tableView = !this.tableView;
-    },
-    emitSetCashAmount(amount: Money) {
-      this.$emit('setCashAmount', amount);
-    },
-    setTransferClearanceDate(date: Date) {
-      this.transferClearanceDate = date;
-    },
-    emitCouponsCount(value: number) {
-      this.$emit('setCouponsCount', value);
-    },
-    emitSetLoyaltyPoints(value: string) {
-      this.$emit('setLoyaltyPoints', value);
-    },
-    emitSelectedInvoice(doc: InvoiceItem) {
-      this.$emit('selectedInvoiceName', doc);
-    },
-    toggleModal(modal: ModalName, value: boolean) {
-      this.$emit('toggleModal', modal, value);
-    },
-    emitCreateTransaction(shouldPrint = false) {
-      this.$emit('createTransaction', shouldPrint);
-    },
-    emitSetTransferAmount(amount: Money = fyo.pesa(0)) {
-      this.$emit('setTransferAmount', amount);
-    },
-    selectItem(item: POSItem | Item | undefined) {
-      this.$emit('addItem', item);
-    },
-    openCouponModal() {
-      if (this.sinvDoc?.party && this.sinvDoc?.items?.length) {
-        this.toggleModal('CouponCode', true);
-      }
+    emitEvent(eventName: PosEmits, ...args: (string | boolean | Item)[]) {
+      this.$emit(eventName, ...args);
     },
     getItem,
   },
diff --git a/src/pages/POS/ModernPOS.vue b/src/pages/POS/ModernPOS.vue
index d323ce5a..de518b5f 100644
--- a/src/pages/POS/ModernPOS.vue
+++ b/src/pages/POS/ModernPOS.vue
@@ -3,47 +3,56 @@
     <OpenPOSShiftModal
       v-if="!isPosShiftOpen"
       :open-modal="!isPosShiftOpen"
-      @toggle-modal="toggleModal"
+      @toggle-modal="emitEvent('toggleModal', 'ShiftOpen')"
     />
 
     <ClosePOSShiftModal
       :open-modal="openShiftCloseModal"
-      @toggle-modal="toggleModal"
+      @toggle-modal="emitEvent('toggleModal', 'ShiftClose')"
     />
 
     <LoyaltyProgramModal
       :open-modal="openLoyaltyProgramModal"
       :loyalty-points="loyaltyPoints"
       :loyalty-program="loyaltyProgram"
-      @set-loyalty-points="emitSetLoyaltyPoints"
-      @toggle-modal="toggleModal"
+      @toggle-modal="emitEvent('toggleModal', 'LoyaltyProgram')"
+      @set-loyalty-points="(points) => emitEvent('setLoyaltyPoints', points)"
     />
 
     <SavedInvoiceModal
       :open-modal="openSavedInvoiceModal"
       :modal-status="openSavedInvoiceModal"
-      @toggle-modal="toggleModal"
-      @selected-invoice-name="emitSelectedInvoice"
+      @toggle-modal="emitEvent('toggleModal', 'SavedInvoice')"
+      @selected-invoice-name="
+        (invName) => emitEvent('selectedInvoiceName', invName)
+      "
     />
 
     <CouponCodeModal
       :open-modal="openCouponCodeModal"
-      @toggle-modal="toggleModal"
-      @set-coupons-count="emitCouponsCount"
+      @toggle-modal="emitEvent('toggleModal', 'CouponCode')"
+      @set-coupons-count="(count) => emitEvent('setCouponsCount', count)"
     />
 
     <PaymentModal
       :open-modal="openPaymentModal"
-      @toggle-modal="toggleModal"
-      @set-cash-amount="emitSetCashAmount"
-      @set-coupons-count="emitCouponsCount"
-      @set-transfer-ref-no="setTransferRefNo"
-      @create-transaction="emitCreateTransaction"
-      @set-transfer-amount="emitSetTransferAmount"
-      @set-transfer-clearance-date="setTransferClearanceDate"
+      @toggle-modal="emitEvent('toggleModal', 'Payment')"
+      @set-cash-amount="(amount) => emitEvent('setCashAmount', amount)"
+      @set-transfer-ref-no="(ref) => emitEvent('setTransferRefNo', ref)"
+      @set-coupons-count="(count) => emitEvent('setCouponsCount', count)"
+      @set-transfer-amount="(amount) => emitEvent('setTransferAmount', amount)"
+      @set-transfer-clearance-date="
+        (date) => emitEvent('setTransferClearanceDate', date)
+      "
+      @create-transaction="
+        (createTransaction) => emitEvent('createTransaction', createTransaction)
+      "
     />
 
-    <AlertModal :open-modal="openAlertModal" @toggle-modal="toggleModal" />
+    <AlertModal
+      :open-modal="openAlertModal"
+      @toggle-modal="emitEvent('toggleModal', 'Alert')"
+    />
 
     <KeyboardModal
       v-if="selectedItemField && selectedItemRow"
@@ -51,7 +60,7 @@
       :modal-status="openKeyboardModal"
       :selected-item-field="selectedItemField"
       :selected-item-row="(selectedItemRow as SalesInvoiceItem)"
-      @toggle-modal="toggleModal"
+      @toggle-modal="emitEvent('toggleModal', 'Keyboard')"
     />
 
     <div class="bg-gray-25 dark:bg-gray-875 grid grid-cols-9 gap-3 p-4">
@@ -79,9 +88,10 @@
               :df="sinvDoc?.fieldMap.party"
               @change="(value:string) => $emit('setCustomer',value)"
             />
+
             <ModernPOSSelectedItemTable
               @selected-row="selectedRow"
-              @toggle-modal="toggleModal"
+              @toggle-modal="emitEvent('toggleModal', 'Keyboard')"
             />
           </div>
 
@@ -136,6 +146,7 @@
                 :read-only="true"
                 :text-right="true"
               />
+
               <FloatingLabelCurrencyInput
                 v-if="sinvDoc?.fieldMap"
                 :df="sinvDoc?.fieldMap.grandTotal"
@@ -161,7 +172,7 @@
                 </Button>
                 <Button
                   class="w-full mt-2 bg-blue-500 dark:bg-blue-700 py-5"
-                  @click="toggleModal('SavedInvoice', true)"
+                  @click="emitEvent('toggleModal', 'SavedInvoice', true)"
                 >
                   <slot>
                     <p class="uppercase text-lg text-white font-semibold">
@@ -186,7 +197,7 @@
                 <Button
                   class="mt-2 w-full bg-green-500 dark:bg-green-700 py-5"
                   :disabled="disablePayButton"
-                  @click="toggleModal('Payment', true)"
+                  @click="emitEvent('toggleModal', 'Payment', true)"
                 >
                   <slot>
                     <p class="uppercase text-lg text-white font-semibold">
@@ -229,7 +240,7 @@
               :border="true"
               :value="itemSearchTerm"
               @keyup.enter="
-                async () => await selectItem(await getItem(itemSearchTerm))
+                async () => emitEvent('addItem', await getItem(itemSearchTerm) as Item)
               "
               @change="(item: string) =>itemSearchTerm= item"
             />
@@ -239,22 +250,24 @@
               class="w-1/3"
               @item-selected="
                 async (name: string) => {
-                  await selectItem(await getItem(name));
+                  emitEvent('addItem', await getItem(name) as Item);
                 }
               "
             />
           </div>
+
           <ModernPOSItemsTable
             v-if="tableView"
             :items="items"
             :item-qty-map="itemQuantityMap as ItemQtyMap"
-            @add-item="selectItem"
+            @add-item="(item) => emitEvent('addItem', item)"
           />
+
           <ModernPOSItemsGrid
             v-else
             :items="items"
             :item-qty-map="itemQuantityMap as ItemQtyMap"
-            @add-item="selectItem"
+            @add-item="(item) => emitEvent('addItem', item)"
           />
         </div>
 
@@ -264,9 +277,9 @@
             :loyalty-points="loyaltyPoints"
             :loyalty-program="loyaltyProgram"
             :applied-coupons-count="appliedCouponsCount"
-            @toggle-view="toggleView"
-            @toggle-modal="toggleModal"
-            @emit-route-to-sinv-list="emitRouteToSinvList"
+            @toggle-view="emitEvent('toggleView')"
+            @emit-route-to-sinv-list="emitEvent('routeToSinvList')"
+            @toggle-modal="(modalName) => emitEvent('toggleModal', modalName)"
           />
         </div>
       </div>
@@ -292,10 +305,9 @@ import OpenPOSShiftModal from './OpenPOSShiftModal.vue';
 import SavedInvoiceModal from './SavedInvoiceModal.vue';
 import Barcode from 'src/components/Controls/Barcode.vue';
 import ClosePOSShiftModal from './ClosePOSShiftModal.vue';
-import { Payment } from 'models/baseModels/Payment/Payment';
 import LoyaltyProgramModal from './LoyaltyProgramModal.vue';
-import { InvoiceItem } from 'models/baseModels/InvoiceItem/InvoiceItem';
 import MultiLabelLink from 'src/components/Controls/MultiLabelLink.vue';
+import { POSItem, PosEmits, ItemQtyMap } from 'src/components/POS/types';
 import { SalesInvoice } from 'models/baseModels/SalesInvoice/SalesInvoice';
 import ModernPOSItemsGrid from 'src/components/POS/Modern/ModernPOSItemsGrid.vue';
 import ModernPOSItemsTable from 'src/components/POS/Modern/ModernPOSItemsTable.vue';
@@ -304,12 +316,6 @@ import { SalesInvoiceItem } from 'models/baseModels/SalesInvoiceItem/SalesInvoic
 import FloatingLabelCurrencyInput from 'src/components/POS/FloatingLabelCurrencyInput.vue';
 import { AppliedCouponCodes } from 'models/baseModels/AppliedCouponCodes/AppliedCouponCodes';
 import ModernPOSSelectedItemTable from 'src/components/POS/Modern/ModernPOSSelectedItemTable.vue';
-import {
-  ItemQtyMap,
-  ItemSerialNumbers,
-  ModalName,
-  POSItem,
-} from 'src/components/POS/types';
 
 export default defineComponent({
   name: 'ModernPos',
@@ -335,8 +341,11 @@ export default defineComponent({
   },
   props: {
     cashAmount: Money,
+    tableView: Boolean,
+    totalQuantity:Number,
     itemDiscounts: Money,
     openAlertModal: Boolean,
+    isPosShiftOpen: Boolean,
     disablePayButton: Boolean,
     openPaymentModal: Boolean,
     openKeyboardModal: Boolean,
@@ -376,6 +385,7 @@ export default defineComponent({
   },
   emits: [
     'addItem',
+    'toggleView',
     'toggleModal',
     'setCustomer',
     'clearValues',
@@ -383,79 +393,31 @@ export default defineComponent({
     'setCouponsCount',
     'routeToSinvList',
     'setLoyaltyPoints',
+    'setTransferRefNo',
     'saveInvoiceAction',
     'createTransaction',
     'setTransferAmount',
     'selectedInvoiceName',
+    'setTransferClearanceDate',
   ],
   data() {
     return {
-      tableView: true,
-
-      totalQuantity: 0,
-      totalTaxedAmount: fyo.pesa(0),
       additionalDiscounts: fyo.pesa(0),
 
-      paymentDoc: {} as Payment,
-      itemSerialNumbers: {} as ItemSerialNumbers,
-
       selectedItemField: '',
       selectedItemRow: {} as SalesInvoiceItem,
 
       itemSearchTerm: '',
-      transferRefNo: undefined as string | undefined,
-      transferClearanceDate: undefined as Date | undefined,
     };
   },
-  computed: {
-    isPosShiftOpen: () => !!fyo.singles.POSShift?.isShiftOpen,
-  },
   methods: {
-    setTransferRefNo(ref: string) {
-      this.transferRefNo = ref;
-    },
-    toggleView() {
-      this.tableView = !this.tableView;
-    },
-    emitSetCashAmount(amount: Money) {
-      this.$emit('setCashAmount', amount);
-    },
-    setTransferClearanceDate(date: Date) {
-      this.transferClearanceDate = date;
-    },
-    emitCouponsCount(value: number) {
-      this.$emit('setCouponsCount', value);
-    },
-    emitRouteToSinvList() {
-      this.$emit('routeToSinvList');
-    },
-    emitSetLoyaltyPoints(value: string) {
-      this.$emit('setLoyaltyPoints', value);
-    },
-    emitSelectedInvoice(doc: InvoiceItem) {
-      this.$emit('selectedInvoiceName', doc);
-    },
-    toggleModal(modal: ModalName, value: boolean) {
-      this.$emit('toggleModal', modal, value);
-    },
-    emitCreateTransaction(shouldPrint = false) {
-      this.$emit('createTransaction', shouldPrint);
+    emitEvent(eventName: PosEmits, ...args: (string | boolean | Item)[]) {
+      this.$emit(eventName, ...args);
     },
     selectedRow(row: SalesInvoiceItem, field: string) {
       this.selectedItemRow = row;
       this.selectedItemField = field;
     },
-    emitSetTransferAmount(amount: Money = fyo.pesa(0)) {
-      this.$emit('setTransferAmount', amount);
-    },
-    selectItem(item: POSItem | Item | undefined) {
-      this.$emit('addItem', item);
-    },
-    openCouponModal() {
-      if (this.sinvDoc?.party && this.sinvDoc?.items?.length) {
-        this.toggleModal('CouponCode', true);
-      }
-    },
     getItem,
   },
 });
diff --git a/src/pages/POS/POS.vue b/src/pages/POS/POS.vue
index b99dc3de..0d4c7eb0 100644
--- a/src/pages/POS/POS.vue
+++ b/src/pages/POS/POS.vue
@@ -12,10 +12,13 @@
     </PageHeader>
     <ClassicPOS
       v-if="fyo.singles.POSSettings?.posUI == 'Classic'"
+      :table-view="tableView"
+      :total-quantity="totalQuantity"
       :item-quantity-qap="itemQtyMap"
       :loyalty-points="loyaltyPoints"
       :open-alert-modal="openAlertModal"
       :default-customer="defaultCustomer"
+      :is-pos-shift-open="isPosShiftOpen"
       :items="(items as [] as POSItem[])"
       :cash-amount="(cashAmount as Money)"
       :sinv-doc="(sinvDoc as SalesInvoice)"
@@ -30,6 +33,7 @@
       :open-loyalty-program-modal="openLoyaltyProgramModal"
       :open-applied-coupons-modal="openAppliedCouponsModal"
       @add-item="addItem"
+      @toggle-view="toggleView"
       @set-sinv-doc="setSinvDoc"
       @clear-values="clearValues"
       @set-customer="setCustomer"
@@ -38,17 +42,22 @@
       @set-coupons-count="setCouponsCount"
       @route-to-sinv-list="routeToSinvList"
       @set-loyalty-points="setLoyaltyPoints"
+      @set-transfer-ref-no="setTransferRefNo"
       @create-transaction="createTransaction"
       @save-invoice-action="saveInvoiceAction"
       @set-transfer-amount="setTransferAmount"
       @selected-invoice-name="selectedInvoiceName"
+      @set-transfer-clearance-date="setTransferClearanceDate"
     />
     <ModernPOS
       v-else
+      :table-view="tableView"
+      :total-quantity="totalQuantity"
       :item-quantity-qap="itemQtyMap"
       :loyalty-points="loyaltyPoints"
       :open-alert-modal="openAlertModal"
       :default-customer="defaultCustomer"
+      :is-pos-shift-open="isPosShiftOpen"
       :items="(items as [] as POSItem[])"
       :cash-amount="(cashAmount as Money)"
       :sinv-doc="(sinvDoc as SalesInvoice)"
@@ -64,6 +73,7 @@
       :open-loyalty-program-modal="openLoyaltyProgramModal"
       :open-applied-coupons-modal="openAppliedCouponsModal"
       @add-item="addItem"
+      @toggle-view="toggleView"
       @set-sinv-doc="setSinvDoc"
       @clear-values="clearValues"
       @set-customer="setCustomer"
@@ -72,10 +82,12 @@
       @set-coupons-count="setCouponsCount"
       @route-to-sinv-list="routeToSinvList"
       @set-loyalty-points="setLoyaltyPoints"
+      @set-transfer-ref-no="setTransferRefNo"
       @create-transaction="createTransaction"
       @save-invoice-action="saveInvoiceAction"
       @set-transfer-amount="setTransferAmount"
       @selected-invoice-name="selectedInvoiceName"
+      @set-transfer-clearance-date="setTransferClearanceDate"
     />
   </div>
 </template>
@@ -529,11 +541,6 @@ export default defineComponent({
         });
       }
     },
-    openCouponModal() {
-      if (this.sinvDoc.party && this.sinvDoc.items?.length) {
-        this.toggleModal('CouponCode', true);
-      }
-    },
     async submitSinvDoc(shouldPrint: boolean) {
       this.sinvDoc.once('afterSubmit', async () => {
         showToast({
diff --git a/src/pages/POS/POSQuickActions.vue b/src/pages/POS/POSQuickActions.vue
index 092d2b49..51da1ae2 100644
--- a/src/pages/POS/POSQuickActions.vue
+++ b/src/pages/POS/POSQuickActions.vue
@@ -88,7 +88,7 @@
       }"
       @click="
         loyaltyPoints && sinvDoc?.party && sinvDoc?.items?.length
-          ? toggleModal('LoyaltyProgram', true)
+          ?  $emit('toggleModal','LoyaltyProgram')
           : null
       "
     >
@@ -305,14 +305,11 @@ export default defineComponent({
     },
     toggleItemsView() {
       this.tableView = !this.tableView;
-      this.$emit('toggleView', !this.tableView);
-    },
-    toggleModal(modal: ModalName, value: boolean) {
-      this.$emit('toggleModal', modal, value);
+      this.$emit('toggleView');
     },
     openCouponModal() {
       if (this.sinvDoc?.party && this.sinvDoc?.items?.length) {
-        this.toggleModal('CouponCode', true);
+        this.$emit('toggleModal','CouponCode');
       }
     },
   },