From ecf2b972ad38fcb62ced208b4182edbb9500c379 Mon Sep 17 00:00:00 2001
From: AbleKSaju <126228406+AbleKSaju@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:53:24 +0530
Subject: [PATCH 1/4] feat: add navigation to invoice list from POS

---
 src/pages/POS/POS.vue | 52 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/pages/POS/POS.vue b/src/pages/POS/POS.vue
index 5f0e31fed..7e696c063 100644
--- a/src/pages/POS/POS.vue
+++ b/src/pages/POS/POS.vue
@@ -186,6 +186,57 @@
                 Loyalty Program
               </span>
             </div>
+            <div class="relative group">
+              <div
+                class="p-1 px-1.5 rounded-md bg-gray-100"
+                @click="
+                  sinvDoc.items?.length
+                    ? (openInvoiceListAlertModal = true)
+                    : routeTo('/list/SalesInvoice')
+                "
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24px"
+                  viewBox="0 -960 960 960"
+                  width="24px"
+                  fill="currentColor"
+                  class="
+                    feather feather-search
+                    text-gray-700
+                    dark:text-gray-300
+                  "
+                >
+                  <path
+                    d="M240-100q-41.92 0-70.96-29.04Q140-158.08 140-199.82V-300h120v-552.31l55.39 47.7 56.15-47.7 56.15 47.7 56.16-47.7 56.15 47.7 56.15-47.7 56.16 47.7 56.15-47.7 56.15 47.7 55.39-47.7V-200q0 41.92-29.04 70.96Q761.92-100 720-100H240Zm480-60q17 0 28.5-11.5T760-200v-560H320v460h360v100q0 17 11.5 28.5T720-160ZM367.69-610v-60h226.92v60H367.69Zm0 120v-60h226.92v60H367.69Zm310-114.62q-14.69 0-25.04-10.34-10.34-10.35-10.34-25.04t10.34-25.04q10.35-10.34 25.04-10.34t25.04 10.34q10.35 10.35 10.35 25.04t-10.35 25.04q-10.35 10.34-25.04 10.34Zm0 120q-14.69 0-25.04-10.34-10.34-10.35-10.34-25.04t10.34-25.04q10.35-10.34 25.04-10.34t25.04 10.34q10.35 10.35 10.35 25.04t-10.35 25.04q-10.35 10.34-25.04 10.34ZM240-160h380v-80H200v40q0 17 11.5 28.5T240-160Zm-40 0v-80 80Z"
+                  />
+                </svg>
+              </div>
+
+              <span
+                class="
+                  absolute
+                  bottom-full
+                  left-1/2
+                  transform
+                  -translate-x-1/2
+                  mb-2
+                  bg-gray-100
+                  dark:bg-gray-850 dark:text-white
+                  text-black text-xs
+                  rounded-md
+                  p-2
+                  w-28
+                  text-center
+                  opacity-0
+                  group-hover:opacity-100
+                  transition-opacity
+                  duration-300
+                "
+              >
+                Sales Invoice List
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -478,6 +529,7 @@ export default defineComponent({
     toggleSidebar(true);
   },
   methods: {
+    routeTo,
     async setCustomer(value: string) {
       if (!value) {
         this.sinvDoc.party = '';

From 6cbfa9ad811cdaa9ee0ff51b6acf3a7f0247abd5 Mon Sep 17 00:00:00 2001
From: AbleKSaju <126228406+AbleKSaju@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:56:19 +0530
Subject: [PATCH 2/4] feat: define type for alert

---
 src/components/POS/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/POS/types.ts b/src/components/POS/types.ts
index a88c0ae51..836da2ae3 100644
--- a/src/components/POS/types.ts
+++ b/src/components/POS/types.ts
@@ -8,7 +8,7 @@ export type ItemSerialNumbers = { [item: string]: string };
 
 export type DiscountType = "percent" | "amount";
 
-export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment' | 'LoyaltyProgram'
+export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment' | 'LoyaltyProgram' | 'InvoiceListAlert'
 
 export interface POSItem {
     image?:string,

From d80ecdf18ad243c3a6ac6880c57a6b6a1c37f1e3 Mon Sep 17 00:00:00 2001
From: AbleKSaju <126228406+AbleKSaju@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:56:50 +0530
Subject: [PATCH 3/4] feat: add AlertModal

---
 src/pages/POS/AlertModal.vue | 56 ++++++++++++++++++++++++++++++++++++
 src/pages/POS/POS.vue        |  8 ++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/pages/POS/AlertModal.vue

diff --git a/src/pages/POS/AlertModal.vue b/src/pages/POS/AlertModal.vue
new file mode 100644
index 000000000..aa19ef575
--- /dev/null
+++ b/src/pages/POS/AlertModal.vue
@@ -0,0 +1,56 @@
+<template>
+  <Modal class="h-auto w-96 px-10" :set-close-listener="false">
+    <p class="text-center py-4">Alert</p>
+
+    <hr class="dark:border-gray-800" />
+    <p class="py-6">This will remove all selected items.</p>
+    <div class="row-start-6 grid grid-cols-2 gap-4 mt-auto pb-10">
+      <div class="flex col-span-2 gap-5">
+        <Button
+          class="w-full bg-red-500 dark:bg-red-700"
+          style="padding: 1.35rem"
+          @click="$emit('toggleModal', 'InvoiceListAlert')"
+        >
+          <slot>
+            <p class="uppercase text-lg text-white font-semibold">
+              {{ t`Cancel` }}
+            </p>
+          </slot>
+        </Button>
+        <Button
+          class="w-full p-5 bg-green-500 dark:bg-green-700"
+          style="padding: 1.35rem"
+          @click="
+            routeTo('/list/SalesInvoice');
+            $emit('toggleModal', 'InvoiceListAlert');
+          "
+        >
+          <slot>
+            <p class="uppercase text-lg text-white font-semibold">
+              {{ t`Continue` }}
+            </p>
+          </slot>
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts">
+import Button from 'src/components/Button.vue';
+import Modal from 'src/components/Modal.vue';
+import { defineComponent } from 'vue';
+import { routeTo } from 'src/utils/ui';
+
+export default defineComponent({
+  name: 'AlertModal',
+  components: {
+    Modal,
+    Button,
+  },
+  emits: ['toggleModal', 'selectedInvoiceName'],
+  methods: {
+    routeTo,
+  },
+});
+</script>
diff --git a/src/pages/POS/POS.vue b/src/pages/POS/POS.vue
index 7e696c063..0bf6e4683 100644
--- a/src/pages/POS/POS.vue
+++ b/src/pages/POS/POS.vue
@@ -40,6 +40,11 @@
       @set-transfer-clearance-date="setTransferClearanceDate"
     />
 
+    <AlertModal
+      :open-modal="openInvoiceListAlertModal"
+      @toggle-modal="toggleModal"
+    />
+
     <div
       class="bg-gray-25 dark:bg-gray-875 gap-2 grid grid-cols-12 p-4"
       style="height: calc(100vh - var(--h-row-largest))"
@@ -409,6 +414,7 @@ import {
 import Barcode from 'src/components/Controls/Barcode.vue';
 import { getAddedLPWithGrandTotal, getPricingRule } from 'models/helpers';
 import LoyaltyProgramModal from './LoyaltyprogramModal.vue';
+import AlertModal from './AlertModal.vue';
 
 export default defineComponent({
   name: 'POS',
@@ -420,6 +426,7 @@ export default defineComponent({
     ItemsTable,
     ItemsGrid,
     Link,
+    AlertModal,
     OpenPOSShiftModal,
     PageHeader,
     PaymentModal,
@@ -453,6 +460,7 @@ export default defineComponent({
       openLoyaltyProgramModal: false,
       openShiftCloseModal: false,
       openShiftOpenModal: false,
+      openInvoiceListAlertModal: false,
 
       additionalDiscounts: fyo.pesa(0),
       cashAmount: fyo.pesa(0),

From 636f91849da4ba7a3eb68cf93e578a9e43502efa Mon Sep 17 00:00:00 2001
From: akshayitzme <akshayitzme.official@gmail.com>
Date: Tue, 15 Oct 2024 10:08:05 +0530
Subject: [PATCH 4/4] chore: refactored styling

---
 src/components/POS/types.ts  |  2 +-
 src/pages/POS/AlertModal.vue | 23 +++++++++++----------
 src/pages/POS/POS.vue        | 40 +++++++++++++++---------------------
 3 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/src/components/POS/types.ts b/src/components/POS/types.ts
index 836da2ae3..31102b682 100644
--- a/src/components/POS/types.ts
+++ b/src/components/POS/types.ts
@@ -8,7 +8,7 @@ export type ItemSerialNumbers = { [item: string]: string };
 
 export type DiscountType = "percent" | "amount";
 
-export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment' | 'LoyaltyProgram' | 'InvoiceListAlert'
+export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment' | 'LoyaltyProgram' | 'RouteToInvoiceList'
 
 export interface POSItem {
     image?:string,
diff --git a/src/pages/POS/AlertModal.vue b/src/pages/POS/AlertModal.vue
index aa19ef575..aef0044c0 100644
--- a/src/pages/POS/AlertModal.vue
+++ b/src/pages/POS/AlertModal.vue
@@ -1,15 +1,16 @@
 <template>
-  <Modal class="h-auto w-96 px-10" :set-close-listener="false">
-    <p class="text-center py-4">Alert</p>
-
+  <Modal class="h-auto px-6 select-none" :set-close-listener="false">
+    <p class="text-center font-semibold py-3">{{ t`Alert` }}</p>
     <hr class="dark:border-gray-800" />
-    <p class="py-6">This will remove all selected items.</p>
-    <div class="row-start-6 grid grid-cols-2 gap-4 mt-auto pb-10">
+    <p class="py-6">
+      {{ t`Clicking continue will remove all the selected items.` }}
+    </p>
+
+    <div class="row-start-6 grid grid-cols-2 gap-4 mt-auto pb-6">
       <div class="flex col-span-2 gap-5">
         <Button
-          class="w-full bg-red-500 dark:bg-red-700"
-          style="padding: 1.35rem"
-          @click="$emit('toggleModal', 'InvoiceListAlert')"
+          class="py-5 w-full bg-red-500 dark:bg-red-700"
+          @click="$emit('toggleModal', 'RouteToInvoiceList')"
         >
           <slot>
             <p class="uppercase text-lg text-white font-semibold">
@@ -17,12 +18,12 @@
             </p>
           </slot>
         </Button>
+
         <Button
-          class="w-full p-5 bg-green-500 dark:bg-green-700"
-          style="padding: 1.35rem"
+          class="w-full py-5 bg-green-500 dark:bg-green-700"
           @click="
             routeTo('/list/SalesInvoice');
-            $emit('toggleModal', 'InvoiceListAlert');
+            $emit('toggleModal', 'RouteToInvoiceList');
           "
         >
           <slot>
diff --git a/src/pages/POS/POS.vue b/src/pages/POS/POS.vue
index 0bf6e4683..f9d188cfc 100644
--- a/src/pages/POS/POS.vue
+++ b/src/pages/POS/POS.vue
@@ -41,7 +41,7 @@
     />
 
     <AlertModal
-      :open-modal="openInvoiceListAlertModal"
+      :open-modal="openRouteToInvoiceListModal"
       @toggle-modal="toggleModal"
     />
 
@@ -192,25 +192,14 @@
               </span>
             </div>
             <div class="relative group">
-              <div
-                class="p-1 px-1.5 rounded-md bg-gray-100"
-                @click="
-                  sinvDoc.items?.length
-                    ? (openInvoiceListAlertModal = true)
-                    : routeTo('/list/SalesInvoice')
-                "
-              >
+              <div class="p-1 rounded-md bg-gray-100" @click="routeToSinvList">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  height="24px"
+                  height="24"
                   viewBox="0 -960 960 960"
-                  width="24px"
+                  width="24"
                   fill="currentColor"
-                  class="
-                    feather feather-search
-                    text-gray-700
-                    dark:text-gray-300
-                  "
+                  class="text-gray-700 dark:text-gray-300"
                 >
                   <path
                     d="M240-100q-41.92 0-70.96-29.04Q140-158.08 140-199.82V-300h120v-552.31l55.39 47.7 56.15-47.7 56.15 47.7 56.16-47.7 56.15 47.7 56.15-47.7 56.16 47.7 56.15-47.7 56.15 47.7 55.39-47.7V-200q0 41.92-29.04 70.96Q761.92-100 720-100H240Zm480-60q17 0 28.5-11.5T760-200v-560H320v460h360v100q0 17 11.5 28.5T720-160ZM367.69-610v-60h226.92v60H367.69Zm0 120v-60h226.92v60H367.69Zm310-114.62q-14.69 0-25.04-10.34-10.34-10.35-10.34-25.04t10.34-25.04q10.35-10.34 25.04-10.34t25.04 10.34q10.35 10.35 10.35 25.04t-10.35 25.04q-10.35 10.34-25.04 10.34Zm0 120q-14.69 0-25.04-10.34-10.34-10.35-10.34-25.04t10.34-25.04q10.35-10.34 25.04-10.34t25.04 10.34q10.35 10.35 10.35 25.04t-10.35 25.04q-10.35 10.34-25.04 10.34ZM240-160h380v-80H200v40q0 17 11.5 28.5T240-160Zm-40 0v-80 80Z"
@@ -225,15 +214,14 @@
                   left-1/2
                   transform
                   -translate-x-1/2
-                  mb-2
+                  rounded-md
+                  opacity-0
                   bg-gray-100
                   dark:bg-gray-850 dark:text-white
-                  text-black text-xs
-                  rounded-md
+                  text-black text-xs text-center
+                  mb-2
                   p-2
                   w-28
-                  text-center
-                  opacity-0
                   group-hover:opacity-100
                   transition-opacity
                   duration-300
@@ -460,7 +448,7 @@ export default defineComponent({
       openLoyaltyProgramModal: false,
       openShiftCloseModal: false,
       openShiftOpenModal: false,
-      openInvoiceListAlertModal: false,
+      openRouteToInvoiceListModal: false,
 
       additionalDiscounts: fyo.pesa(0),
       cashAmount: fyo.pesa(0),
@@ -537,7 +525,6 @@ export default defineComponent({
     toggleSidebar(true);
   },
   methods: {
-    routeTo,
     async setCustomer(value: string) {
       if (!value) {
         this.sinvDoc.party = '';
@@ -897,7 +884,14 @@ export default defineComponent({
         }
       }, 1);
     },
+    async routeToSinvList() {
+      if (!this.sinvDoc.items.length) {
+        return await routeTo('/list/SalesInvoice');
+      }
 
+      this.openRouteToInvoiceListModal = true;
+    },
+    routeTo,
     getItem,
   },
 });