feat: POS modern UI

models/helpers.ts

@@ -1,37 +1,38 @@
-import { Fyo, t } from 'fyo';
-import { Doc } from 'fyo/model/doc';
+import {
+  AccountRootType,
+  AccountRootTypeEnum,
+} from './baseModels/Account/types';
 import {
   Action,
   ColumnConfig,
   DocStatus,
   LeadStatus,
   RenderData,
 } from 'fyo/model/types';
+import { Fyo, t } from 'fyo';
+import { InvoiceStatus, ModelNameEnum } from './types';
+
+import { ApplicablePricingRules } from './baseModels/Invoice/types';
+import { AppliedCouponCodes } from './baseModels/AppliedCouponCodes/AppliedCouponCodes';
+import { CollectionRulesItems } from './baseModels/CollectionRulesItems/CollectionRulesItems';
+import { CouponCode } from './baseModels/CouponCode/CouponCode';
 import { DateTime } from 'luxon';
-import { Money } from 'pesa';
-import { safeParseFloat } from 'utils/index';
-import { Router } from 'vue-router';
-import {
-  AccountRootType,
-  AccountRootTypeEnum,
-} from './baseModels/Account/types';
-import { numberSeriesDefaultsMap } from './baseModels/Defaults/Defaults';
+import { Doc } from 'fyo/model/doc';
 import { Invoice } from './baseModels/Invoice/Invoice';
-import { SalesQuote } from './baseModels/SalesQuote/SalesQuote';
-import { StockMovement } from './inventory/StockMovement';
-import { StockTransfer } from './inventory/StockTransfer';
-import { InvoiceStatus, ModelNameEnum } from './types';
 import { Lead } from './baseModels/Lead/Lead';
-import { PricingRule } from './baseModels/PricingRule/PricingRule';
-import { ApplicablePricingRules } from './baseModels/Invoice/types';
 import { LoyaltyProgram } from './baseModels/LoyaltyProgram/LoyaltyProgram';
-import { CollectionRulesItems } from './baseModels/CollectionRulesItems/CollectionRulesItems';
-import { isPesa } from 'fyo/utils';
+import { Money } from 'pesa';
 import { Party } from './baseModels/Party/Party';
-import { CouponCode } from './baseModels/CouponCode/CouponCode';
+import { PricingRule } from './baseModels/PricingRule/PricingRule';
+import { Router } from 'vue-router';
 import { SalesInvoice } from './baseModels/SalesInvoice/SalesInvoice';
-import { AppliedCouponCodes } from './baseModels/AppliedCouponCodes/AppliedCouponCodes';
+import { SalesQuote } from './baseModels/SalesQuote/SalesQuote';
+import { StockMovement } from './inventory/StockMovement';
+import { StockTransfer } from './inventory/StockTransfer';
 import { ValidationError } from 'fyo/utils/errors';
+import { isPesa } from 'fyo/utils';
+import { numberSeriesDefaultsMap } from './baseModels/Defaults/Defaults';
+import { safeParseFloat } from 'utils/index';
 
 export function getQuoteActions(
   fyo: Fyo,
@@ -763,6 +764,19 @@ export function getLoyaltyProgramTier(
   return loyaltyProgramTier;
 }
 
+export async function updatePricingRuleItem(doc: SalesInvoice) {
+  const pricingRule = (await getPricingRule(doc)) as ApplicablePricingRules[];
+
+  let appliedPricingRuleCount = doc?.pricingRuleDetail?.length;
+
+  if (appliedPricingRuleCount !== pricingRule?.length) {
+    appliedPricingRuleCount = pricingRule?.length;
+
+    await doc?.appendPricingRuleDetail(pricingRule);
+    await doc?.applyProductDiscount();
+  }
+}
+
 export async function removeLoyaltyPoint(doc: Doc) {
   if (!doc.loyaltyProgram) {
     return;

models/inventory/Point of Sale/POSSettings.ts

@@ -9,6 +9,7 @@ export class POSSettings extends Doc {
   inventory?: string;
   cashAccount?: string;
   writeOffAccount?: string;
+  posUI?: 'Classic' | 'Modern';
 
   static filters: FiltersMap = {
     cashAccount: () => ({

schemas/app/inventory/Point of Sale/POSSettings.json

@@ -31,6 +31,24 @@
       "create": true,
       "default": "Write Off",
       "section": "Default"
+    },
+    {
+      "fieldname": "posUI",
+      "label": "Pos Ui",
+      "fieldtype": "Select",
+      "options": [
+        {
+          "value": "Classic",
+          "label": "Classic"
+        },
+        {
+          "value": "Modern",
+          "label": "Modern"
+        }
+      ],
+      "default": "Classic",
+      "required": true,
+      "section": "Default"
     }
   ]
 }

src/components/Controls/Barcode.vue

@@ -1,16 +1,15 @@
 <template>
   <div
     class="
+      px-2
+      w-36
       flex
       items-center
       border
-      w-36
       rounded
-      px-2
       bg-gray-50
-      dark:bg-gray-890
+      dark:border-gray-800 dark:bg-gray-890 dark:focus-within:bg-gray-900
       focus-within:bg-gray-100
-      dark:focus-within:bg-gray-900
     "
   >
     <input

src/components/Controls/Currency.vue

@@ -15,7 +15,7 @@
       :tabindex="isReadOnly ? '-1' : '0'"
       @blur="onBlur"
       @focus="onFocus"
-      @input="(e) => $emit('input', e)"
+      @input="(e:Event) => $emit('input', e)"
     />
     <div
       v-show="!showInput"
@@ -47,6 +47,17 @@ export default defineComponent({
       currencySymbol: '',
     };
   },
+  props: {
+    focusInput: Boolean,
+  },
+  created() {
+    if (this.focusInput) {
+      this.showInput = true;
+      nextTick(() => {
+        this.focus();
+      });
+    }
+  },
   computed: {
     formattedValue() {
       const value = this.parse(this.value);

src/components/POS/ItemsGrid.vue → src/components/POS/Classic/ItemsGrid.vue

@@ -1,59 +1,79 @@
 <template>
   <div
     class="
-      flex flex-col
       gap-4
-      p-4
+      py-2
+      w-full
+      flex flex-col
       items-center
-      mt-4
-      px-2
       rounded-t-md
       text-black
-      w-full
+      overflow-y-auto
+      custom-scroll custom-scroll-thumb2
     "
-    style="height: 80vh"
+    style="height: 83vh"
   >
     <!-- Items Grid -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 w-full">
+    <div
+      class="
+        gap-2
+        w-full
+        grid grid-cols-1
+        md:grid-cols-2
+        lg:grid-cols-3
+        xl:grid-cols-4
+      "
+    >
       <div
         class="
-          border border-gray-300
-          dark:border-gray-800
           p-1
+          border border-gray-300
           flex flex-col
           text-sm text-center
+          dark:border-gray-800
         "
         @click="handleChange(item as POSItem)"
         v-for="item in items as POSItem[]"
         :key="item.name"
       >
-        <div class="self-center w-32 h-32 rounded-lg mb-1">
-          <div class="relative">
+        <div class="self-center w-32 h-32 p-1 rounded-lg">
+          <div class="relative w-full h-full p-2">
             <img
               v-if="item.image"
               :src="item.image"
               alt=""
-              class="rounded-lg w-32 h-32 object-cover"
+              class="rounded-lg w-full h-full object-cover"
             />
+
             <div
               v-else
               class="
                 rounded-lg
-                w-32
-                h-32
-                flex
+                w-full
+                h-full
                 bg-gray-100
-                dark:bg-gray-850
+                flex
                 justify-center
                 items-center
+                dark:bg-gray-850
               "
             >
               <p class="text-4xl font-semibold text-gray-400 select-none">
                 {{ getExtractedWords(item.name) }}
               </p>
             </div>
             <p
-              class="absolute top-1 right-1 rounded-full p-1"
+              class="
+                absolute
+                top-1
+                right-1
+                rounded-full
+                w-6
+                h-6
+                flex
+                justify-center
+                items-center
+              "
               :class="
                 item.availableQty > 0
                   ? 'bg-green-100 text-green-900'
@@ -79,8 +99,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { fyo } from 'src/initFyo';
-import { POSItem } from './types';
+import { POSItem } from '../types';
 
 export default defineComponent({
   name: 'ItemsGrid',

src/components/POS/ItemsTable.vue → src/components/POS/Classic/ItemsTable.vue

@@ -29,7 +29,10 @@
     </div>
   </Row>
 
-  <div class="overflow-y-auto" style="height: 80vh">
+  <div
+    class="overflow-y-auto custom-scroll custom-scroll-thumb2"
+    style="height: 70vh"
+  >
     <Row
       v-if="items"
       v-for="row in items as any"
@@ -64,12 +67,12 @@
 </template>
 
 <script lang="ts">
-import FormControl from '../Controls/FormControl.vue';
+import FormControl from 'src/components/Controls/FormControl.vue';
 import Row from 'src/components/Row.vue';
 import { isNumeric } from 'src/utils';
 import { defineComponent } from 'vue';
 import { Field } from 'schemas/types';
-import { POSItem } from './types';
+import { POSItem } from '../types';
 
 export default defineComponent({
   name: 'ItemsTable',

src/components/POS/SelectedItemRow.vue → src/components/POS/Classic/SelectedItemRow.vue

@@ -262,18 +262,18 @@
 </template>
 
 <script lang="ts">
-import Currency from '../Controls/Currency.vue';
-import Data from '../Controls/Data.vue';
-import Float from '../Controls/Float.vue';
-import Int from '../Controls/Int.vue';
-import Link from '../Controls/Link.vue';
-import Text from '../Controls/Text.vue';
+import Currency from 'src/components/Controls/Currency.vue';
+import Data from 'src/components/Controls/Data.vue';
+import Float from 'src/components/Controls/Float.vue';
+import Int from 'src/components/Controls/Int.vue';
+import Link from 'src/components/Controls/Link.vue';
+import Text from 'src/components/Controls/Text.vue';
 import { inject } from 'vue';
 import { fyo } from 'src/initFyo';
 import { defineComponent } from 'vue';
 import { SalesInvoiceItem } from 'models/baseModels/SalesInvoiceItem/SalesInvoiceItem';
 import { Money } from 'pesa';
-import { DiscountType } from './types';
+import { DiscountType } from '../types';
 import { validateSerialNumberCount } from 'src/utils/pos';
 import { getPricingRule } from 'models/helpers';
 import { SalesInvoice } from 'models/baseModels/SalesInvoice/SalesInvoice';

src/components/POS/SelectedItemTable.vue → src/components/POS/Classic/SelectedItemTable.vue

@@ -11,7 +11,7 @@
       w-full
       flex
       items-center
-      mt-4
+      mt-2
     "
   >
     <div
@@ -60,10 +60,10 @@
 </template>
 
 <script lang="ts">
-import FormContainer from '../FormContainer.vue';
-import FormControl from '../Controls/FormControl.vue';
-import Link from '../Controls/Link.vue';
-import Row from '../Row.vue';
+import FormContainer from 'src/components/FormContainer.vue';
+import FormControl from 'src/components/Controls/FormControl.vue';
+import Link from 'src/components/Controls/Link.vue';
+import Row from 'src/components/Row.vue';
 import RowEditForm from 'src/pages/CommonForm/RowEditForm.vue';
 import SelectedItemRow from './SelectedItemRow.vue';
 import { isNumeric } from 'src/utils';