@feedmepos/mf-order-setting 0.0.36 → 0.0.38

package/src/stores/menu/menu.ts

@@ -13,6 +13,9 @@ interface MenuState {
   menu: { _rev: string } & FdoMenuV4;
   currentCatalogId: string | null;
   currentSchedulerId: string;
+  catalogOptions: { label: string; value: string | null }[];
+  loadingCatalogOptions: boolean;
+  catalogOptionsError: string | null;
 }
 
 function initMenuState(): MenuState {
@@ -21,6 +24,9 @@ function initMenuState(): MenuState {
     menu: { ...generator.initMenuV4(), _rev: '' },
     currentCatalogId: null,
     currentSchedulerId: '',
+    catalogOptions: [],
+    loadingCatalogOptions: false,
+    catalogOptionsError: null,
   };
 }
 
@@ -120,19 +126,6 @@ export const useMenuStore = defineStore('menu', {
         (catalog) => catalog._id === state.currentCatalogId
       );
     },
-
-    catalogOptions(): { label: string; value: string | null }[] {
-      return [
-        {
-          label: 'Main',
-          value: null,
-        },
-        ...this.catalogs.map((catalog) => ({
-          label: catalog.name,
-          value: catalog._id,
-        })),
-      ];
-    },
     categories(): (Omit<FdoMenuV4Category, '_id'> & { _id: string | null })[] {
       const categories = this.mergedMenu.modules.category;
       return [
@@ -250,9 +243,35 @@ export const useMenuStore = defineStore('menu', {
       this.menu = await menuApi.readMenu();
       this.selectCatalog(null);
     },
+
+    async loadCatalogOptions(restaurantId: string) {
+      this.loadingCatalogOptions = true;
+      this.catalogOptionsError = null;
+      const options: {label:string, value: string | null}[] = [{
+        label: 'Main',
+        value: null,
+      }];
+
+      try {
+       const resp = await menuApi.readCatalogOptions(restaurantId);
+       const restaurntCatalogOptions = resp[restaurantId] ?? [];
+       for (let index = 0; index < restaurntCatalogOptions.length; index++) {
+        const opt = restaurntCatalogOptions[index];
+          options.push({
+            label: opt.name,
+            value: opt._id
+          })
+       }
+       this.catalogOptions = options;
+      } catch (error) {
+        console.error('Failed to load catalog options:', error)
+        this.catalogOptionsError = 'order.failedToLoadCatalogOptions';
+      } finally {
+        this.loadingCatalogOptions = false;
+      }
+    },
     selectCatalog(id: string | null) {
       this.currentCatalogId = id;
     },
   }
-  
 });

package/src/stores/order-setting/mapper.ts

@@ -55,7 +55,7 @@ export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
     enabled: false,
     pickUp: defaultPickUp,
     sequenceNumber: FdoOrderKioskDineInSequence.parse({}),
-    displayStand: defaultDisplayStand
+    displayStand: defaultDisplayStand,
   },
   takeaway: defaultTakeaway,
   paymentSetting: {
@@ -67,15 +67,15 @@ export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
         nfc: false
       },
       eWallet: {
-        qrPay: false,
-        scanPay: false,
+        terminalQrPay: false,
         terminalScanPay: false,
-        terminalQrPay: false
+        qrPay: false,
+        scanPay: false
       }
-    }
+    },
   },
   menuItem: {
-    showAllOnly: false
+    showAllOnly: false,
   }
 }
 
@@ -106,10 +106,10 @@ const toKiosk = (
       enabled: kioskOrderSettings?.canTakeaway ?? false,
       submitOrderInstruction: kioskOrderSettings?.takeaway?.submitOrderInstruction
         ? {
-            payAtCounter:
-              kioskOrderSettings.takeaway.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
-            paid: kioskOrderSettings.takeaway.submitOrderInstruction?.paid?.['en'] ?? null
-          }
+          payAtCounter:
+            kioskOrderSettings.takeaway.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
+          paid: kioskOrderSettings.takeaway.submitOrderInstruction?.paid?.['en'] ?? null
+        }
         : defaultSubmitOrderInstruction
     },
     paymentSetting: {
@@ -145,35 +145,35 @@ const toKioskDineInSetting = (
     sequenceNumber: kioskDineInSeq,
     pickUp: kioskDineInSetting?.pickUp
       ? {
-          ...kioskDineInSetting.pickUp,
-          submitOrderInstruction: kioskDineInSetting.pickUp.submitOrderInstruction
-            ? {
-                payAtCounter:
-                  kioskDineInSetting.pickUp.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
-                paid: kioskDineInSetting.pickUp.submitOrderInstruction?.paid?.['en'] ?? null
-              }
-            : defaultSubmitOrderInstruction,
-          enablePaxDialog: kioskDineInSetting.pickUp.enablePaxDialog
-            ? kioskDineInSetting.pickUp.enablePaxDialog
-            : false
-        }
+        ...kioskDineInSetting.pickUp,
+        submitOrderInstruction: kioskDineInSetting.pickUp.submitOrderInstruction
+          ? {
+            payAtCounter:
+              kioskDineInSetting.pickUp.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
+            paid: kioskDineInSetting.pickUp.submitOrderInstruction?.paid?.['en'] ?? null
+          }
+          : defaultSubmitOrderInstruction,
+        enablePaxDialog: kioskDineInSetting.pickUp.enablePaxDialog
+          ? kioskDineInSetting.pickUp.enablePaxDialog
+          : false
+      }
       : defaultPickUp,
     displayStand: kioskDineInSetting?.displayStand
       ? {
-          enabled: kioskDineInSetting.displayStand.enabled,
-          standSlotRange: kioskDineInSetting.displayStand.standSlotRange,
-          prefix: kioskDineInSetting.displayStand.prefix,
-          padDigit: kioskDineInSetting.displayStand.padDigit,
-          enablePaxDialog: kioskDineInSetting.displayStand.enablePaxDialog ?? false,
-          submitOrderInstruction: kioskDineInSetting.displayStand.submitOrderInstruction
-            ? {
-                payAtCounter:
-                  kioskDineInSetting.displayStand.submitOrderInstruction?.payAtCounter?.['en'] ??
-                  null,
-                paid: kioskDineInSetting.displayStand.submitOrderInstruction?.paid?.['en'] ?? null
-              }
-            : defaultSubmitOrderInstruction
-        }
+        enabled: kioskDineInSetting.displayStand.enabled,
+        standSlotRange: kioskDineInSetting.displayStand.standSlotRange,
+        prefix: kioskDineInSetting.displayStand.prefix,
+        padDigit: kioskDineInSetting.displayStand.padDigit,
+        enablePaxDialog: kioskDineInSetting.displayStand.enablePaxDialog ?? false,
+        submitOrderInstruction: kioskDineInSetting.displayStand.submitOrderInstruction
+          ? {
+            payAtCounter:
+              kioskDineInSetting.displayStand.submitOrderInstruction?.payAtCounter?.['en'] ??
+              null,
+            paid: kioskDineInSetting.displayStand.submitOrderInstruction?.paid?.['en'] ?? null
+          }
+          : defaultSubmitOrderInstruction
+      }
       : defaultDisplayStand
   }
 }
@@ -190,13 +190,13 @@ const toOrderKioskSettingsDto = (
       submitOrderInstruction: {
         payAtCounter: dineInSetting.displayStand.submitOrderInstruction?.payAtCounter
           ? {
-              en: dineInSetting.displayStand.submitOrderInstruction.payAtCounter
-            }
+            en: dineInSetting.displayStand.submitOrderInstruction.payAtCounter
+          }
           : null,
         paid: dineInSetting.displayStand.submitOrderInstruction?.paid
           ? {
-              en: dineInSetting.displayStand.submitOrderInstruction.paid
-            }
+            en: dineInSetting.displayStand.submitOrderInstruction.paid
+          }
           : null
       }
     },
@@ -205,13 +205,13 @@ const toOrderKioskSettingsDto = (
       submitOrderInstruction: {
         payAtCounter: dineInSetting.pickUp.submitOrderInstruction?.payAtCounter
           ? {
-              en: dineInSetting.pickUp.submitOrderInstruction.payAtCounter
-            }
+            en: dineInSetting.pickUp.submitOrderInstruction.payAtCounter
+          }
           : null,
         paid: dineInSetting.pickUp.submitOrderInstruction?.paid
           ? {
-              en: dineInSetting.pickUp.submitOrderInstruction.paid
-            }
+            en: dineInSetting.pickUp.submitOrderInstruction.paid
+          }
           : null
       }
     }
@@ -224,19 +224,19 @@ const toOrderKioskSettingsDto = (
     paymentSetting: createPaymentSettings(kioskSetting.paymentSetting),
     takeaway: kioskSetting.takeaway.submitOrderInstruction
       ? {
-          submitOrderInstruction: {
-            payAtCounter: kioskSetting.takeaway.submitOrderInstruction.payAtCounter
-              ? {
-                  en: kioskSetting.takeaway.submitOrderInstruction.payAtCounter
-                }
-              : null,
-            paid: kioskSetting.takeaway.submitOrderInstruction.paid
-              ? {
-                  en: kioskSetting.takeaway.submitOrderInstruction.paid
-                }
-              : null
-          }
+        submitOrderInstruction: {
+          payAtCounter: kioskSetting.takeaway.submitOrderInstruction.payAtCounter
+            ? {
+              en: kioskSetting.takeaway.submitOrderInstruction.payAtCounter
+            }
+            : null,
+          paid: kioskSetting.takeaway.submitOrderInstruction.paid
+            ? {
+              en: kioskSetting.takeaway.submitOrderInstruction.paid
+            }
+            : null
         }
+      }
       : undefined
   })
 

package/src/views/order-settings/OrderSettingsView.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="py-[1.5rem]">
     <FmPageHead :title="t('order.orderSetting')" />
-    <div class="flex px-[1.5rem]">
+    <div class="flex px-[1.5rem] items-center">
       <div class="flex-[2_2_0%] overflow-auto">
         <FmTabs v-model:model-value="selectedOrderSetting" :items="settingItem" :showMoreAt="99" />
       </div>
+      <div v-if="menuStore.loadingCatalogOptions" class="flex items-center gap-2 ml-4">
+        <FmCircularProgress size="md" />
+        <span class="text-sm text-gray-600">{{ t('order.loadingCatalogs') }}</span>
+      </div>
     </div>
   </div>
   <component :is="currentComponent" />
@@ -12,7 +16,7 @@
 
 <script setup lang="ts">
 import { type FmTabProps } from '@feedmepos/ui-library'
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import DeliverySetting from './delivery/DeliverySetting.vue'
 import DineInSetting from './dine-in/DineInSetting.vue'
 import PickUpSetting from './pickup/PickUpSetting.vue'
@@ -21,9 +25,14 @@ import ServiceChargeSetting from './servicecharge/ServiceChargeSetting.vue'
 import DiscountRuleSetting from './discount-rule/DiscountRuleSetting.vue'
 
 import GeneralSetting from './general/GeneralSetting.vue'
-import { useI18n } from '@feedmepos/mf-common'
+import { useI18n, useCoreStore } from '@feedmepos/mf-common'
+import { useMenuStore } from '@/stores/menu/menu'
+import { useSnackbarFunctions } from '@/components/snackbar'
 
 const { t } = useI18n()
+const { currentRestaurant } = useCoreStore()
+const menuStore = useMenuStore()
+const { showError } = useSnackbarFunctions()
 type OrderSettingMenuItemValue =
   | 'delivery'
   | 'pickup'
@@ -62,4 +71,22 @@ const currentComponent = computed(() => {
       return GeneralSetting
   }
 })
+
+onMounted(async () => {
+  if (currentRestaurant.value?._id) {
+    await menuStore.loadCatalogOptions(currentRestaurant.value._id)
+  }
+})
+
+watch(currentRestaurant, async (newRestaurant) => {
+  if (newRestaurant?._id) {
+    await menuStore.loadCatalogOptions(newRestaurant._id)
+  }
+})
+
+watch(() => menuStore.catalogOptionsError, (errorKey) => {
+  if (errorKey) {
+    showError(t(errorKey))
+  }
+})
 </script>

package/src/views/order-settings/delivery/integrated-delivery/IntegratedDelivery.vue

@@ -262,7 +262,6 @@ function convertStatusI18n(status: string) {
               v-if="modelValue.auto.status === 'FAILED' && modelValue.auto.menuSyncError !== null"
               :content="modelValue.auto.menuSyncError"
               :zIndex="1000"
-              :disabled="!canEdit"
             >
               <FmIcon name="info" size="sm" />
             </FmTooltip>

package/src/views/order-settings/general/GeneralSetting.vue

@@ -3,8 +3,7 @@
     <RestaurantSelector />
   </div>
   <div v-if="!isLoading">
-    <div class="p-[1.5rem] flex flex-col gap-5 m-5 w-2/3">
-      <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.generalSetting') }}</div>
+    <div class="p-[1.5rem] flex flex-col gap-5 m-5 mr-8 w-full max-w-4xl">
       <FmSwitch
         :model-value="orderSetting?.v3Settings?.anonymousLoginDialog ?? true"
         :label="t('order.promptAnonymousLoginDialog')"
@@ -17,6 +16,52 @@
         @update:model-value="updateSubItemDisplayMode"
         label-placement="right"
       ></FmSwitch>
+
+      <div class="flex-grow fm-typo-en-title-sm-600 mt-8 mb-2">{{ t('order.orderNumberSettings') }}</div>
+
+      <div class="mr-9 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-5">
+        <div class="min-w-0">
+          <div class="bg-gray-50 p-3 rounded-lg border">
+            <FmSwitch
+              :model-value="!!orderSetting?.sequenceSettings?.autoReset?.resetTime"
+              :label="t('order.autoResetOrderNumber')"
+              @update:model-value="toggleResetTime"
+              label-placement="right"
+            ></FmSwitch>
+            <FmTimePicker
+              v-if="!!orderSetting?.sequenceSettings?.autoReset?.resetTime"
+              :model-value="orderSetting?.sequenceSettings?.autoReset?.resetTime"
+              @update:model-value="(time: string | null) => updateResetTime(time)"
+              class="mt-3"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="mr-9 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-5 mt-5">
+        <div v-for="key in sequenceKeys" :key="key" class="min-w-0">
+          <FmCard variant="outlined" class="p-3">
+            <FmStepperField
+              :model-value="orderSetting?.sequenceSettings?.[key]?.digit ?? null"
+              :label="getSeqLabel(key)"
+              @update:model-value="(digit) => updateSeq(key, 'digit', digit)"
+              :show-steppers="false"
+              placeholder="3"
+              :rules="getSequenceSettingRules(orderSetting?.sequenceSettings?.[key]?.digit)"
+              :max="4"
+              :min="1"
+            />
+            <FmStepperField
+              :model-value="orderSetting?.sequenceSettings?.[key]?.current ?? null"
+              :label="t('order.currentNumber')"
+              @update:model-value="(current) => updateSeq(key, 'current', current ?? 0)"
+              :show-steppers="false"
+              placeholder="0"
+              :rules="getSequenceSettingRules(orderSetting?.sequenceSettings?.[key]?.digit)"
+            />
+          </FmCard>
+        </div>
+      </div>
     </div>
     <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
       <FmButton
@@ -34,21 +79,70 @@
 import { useCoreStore } from '@feedmepos/mf-common'
 import RestaurantSelector from '../components/RestaurantSelector.vue'
 import { useLoading } from '@/composables/loading'
-import { type OrderSettingsDto, type OrderV3Settings, F_ORDER_SUBITEM_DISPLAY_MODE } from '@entity'
+import {
+  type OrderSettingsDto,
+  type OrderV3Settings,
+  F_ORDER_SUBITEM_DISPLAY_MODE,
+  OrderTakeawaySequenceDto,
+  OrderPickUpSequenceDto,
+  OrderDeliveryInHouseSequenceDto,
+  OrderDeliveryFeedMeSequenceDto
+} from '@entity'
 import { OrderSettingApi } from '@/api/order-setting'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useSnackbarFunctions } from '@/components/snackbar'
 import { useI18n } from '@feedmepos/mf-common'
+import { getSequenceStartEndLabel, sequenceSettingRules } from '@/helpers/order-setting'
 
 const { t } = useI18n()
+type SequenceKey = 'takeaway' | 'pickup' | 'inHouseDelivery' | 'feedMeDelivery'
+const sequenceKeys: SequenceKey[] = ['takeaway', 'pickup', 'inHouseDelivery', 'feedMeDelivery']
+
+function getSequenceSettingRules(digit?: number | null) {
+  return sequenceSettingRules(t('order.sequenceSettingRules'), digit)
+}
 
-const { showSuccess } = useSnackbarFunctions()
+const { showSuccess, showError } = useSnackbarFunctions()
 const { currentRestaurant } = useCoreStore()
 const { startAsyncCallWithErr, isLoading } = useLoading()
 
 const orderSetting = ref<OrderSettingsDto | undefined>(undefined)
 const v3Settings = ref<OrderV3Settings | undefined>(undefined)
 const anonymousLoginDialog = ref<boolean>(false)
+const isSequenceSettingValid = computed(() => {
+  const sequence = orderSetting.value?.sequenceSettings
+  if (!sequence) return true
+
+  return Object.entries(sequence).every((entry) => {
+    const [key, value] = entry
+    // Ignore autoReset and only validate sequence settings with digit property
+    if (key === 'autoReset' || !value || typeof value !== 'object' || !('digit' in value)) return true
+    return getSequenceSettingRules(value.digit).every((rule) => rule() === true)
+  })
+})
+
+function getSeqLabel(key: SequenceKey) {
+  let sequence = OrderTakeawaySequenceDto.parse(
+    orderSetting.value?.sequenceSettings?.takeaway ?? {}
+  )
+  let i18n = `order.${key}`
+  if (key === 'pickup') {
+    sequence = OrderPickUpSequenceDto.parse(orderSetting.value?.sequenceSettings?.pickup ?? {})
+  } else if (key === 'inHouseDelivery') {
+    sequence = OrderDeliveryInHouseSequenceDto.parse(
+      orderSetting.value?.sequenceSettings?.inHouseDelivery ?? {}
+    )
+  } else if (key === 'feedMeDelivery') {
+    sequence = OrderDeliveryFeedMeSequenceDto.parse(
+      orderSetting.value?.sequenceSettings?.feedMeDelivery ?? {}
+    )
+    i18n = `order.feedMeExpress`
+  }
+
+  const { start, end } = getSequenceStartEndLabel(sequence)
+
+  return `${t(`${i18n}`)} : ${start} - ${end}`
+}
 
 async function init(): Promise<void> {
   if (currentRestaurant.value) {
@@ -62,6 +156,37 @@ function updateAnonymousLoginDialog(v: boolean) {
   }
 }
 
+function updateSeq(key: SequenceKey, dtoKey: string, dto?: number) {
+  let sequence = {}
+  switch (key) {
+    case 'takeaway':
+      sequence = OrderTakeawaySequenceDto.parse({})
+      break
+    case 'pickup':
+      sequence = OrderPickUpSequenceDto.parse({})
+      break
+    case 'inHouseDelivery':
+      sequence = OrderDeliveryInHouseSequenceDto.parse({})
+      break
+    case 'feedMeDelivery':
+      sequence = OrderDeliveryFeedMeSequenceDto.parse({})
+      break
+    default:
+      throw new Error(`Invalid sequence key - ${key}`)
+  }
+
+  if (orderSetting.value) {
+    orderSetting.value.sequenceSettings = {
+      ...(orderSetting.value?.sequenceSettings ?? {}),
+      [key]: {
+        ...sequence,
+        ...(orderSetting.value?.sequenceSettings?.[key] ?? {}),
+        [`${dtoKey}`]: dto
+      }
+    }
+  }
+}
+
 function updateSubItemDisplayMode(v: boolean) {
   if (orderSetting.value) {
     if (v) {
@@ -72,7 +197,37 @@ function updateSubItemDisplayMode(v: boolean) {
   }
 }
 
+function toggleResetTime(v: boolean) {
+  if (!orderSetting.value) return
+
+  if (!orderSetting.value.sequenceSettings) {
+    orderSetting.value.sequenceSettings = { autoReset: null }
+  }
+  if (v) {
+    orderSetting.value.sequenceSettings = {
+      ...orderSetting.value.sequenceSettings,
+      autoReset: {
+        resetTime: '00:00'
+      }
+    }
+  } else {
+    if (orderSetting.value.sequenceSettings) {
+      orderSetting.value.sequenceSettings.autoReset = null
+    }
+  }
+}
+
+function updateResetTime(time: string | null) {
+  if (orderSetting.value?.sequenceSettings?.autoReset && time) {
+    orderSetting.value.sequenceSettings.autoReset.resetTime = time
+  }
+}
+
 async function updateOrderSetting() {
+  if (!isSequenceSettingValid.value) {
+    showError(t('order.sequenceSettingRules'))
+    return
+  }
   await startAsyncCallWithErr(async () => {
     if (orderSetting.value) {
       await OrderSettingApi.updateOrderSetting(orderSetting.value)