@feedmepos/mf-order-setting 0.0.23 → 0.0.25

package/src/views/order-settings/dine-in/DineInSetting.vue

@@ -1,34 +1,98 @@
 <template>
   <div class="flex justify-between items-center">
-    <RestaurantSelector :model-value="currentRestaurant?._id ?? undefined" />
+    <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>
-      <FmSwitch v-model="dineInSetting.anonymousOrder" value="anonymousOrder" :label="t('order.anonymousOrder')"
-        :sublabel="t('order.anonymousOrderSublabel')" label-placement="right" />
-      <FmSwitch v-model="dineInSetting.ignoreStock as boolean" value="ignoreStock" :label="t('order.ignoreStock')"
-        :sublabel="t('order.ignoreStockSublabel')" label-placement="right" />
-      <FmSwitch v-model="dineInSetting.staticQr as boolean" value="staticQr" :label="t('order.staticQRcode')"
-        :sublabel="t('order.staticQRcodeSublabel')" label-placement="right" />
-      <FmSwitch v-model="disableItemRemarkNegated" value="disableItemRemark" :label="t('order.customerItemRemark')"
-        :sublabel="t('order.customerItemRemarkSublabel')" label-placement="right" />
-      <FmSwitch v-model="dineInSetting.acceptQueue as boolean" value="acceptQueue" :label="t('order.acceptQueue')"
-        :sublabel="t('order.acceptQueueSublabel')" label-placement="right" />
+      <FmSwitch
+        v-model="dineInSetting.anonymousOrder"
+        value="anonymousOrder"
+        :label="t('order.anonymousOrder')"
+        :sublabel="t('order.anonymousOrderSublabel')"
+        label-placement="right"
+      />
+      <FmSwitch
+        v-model="dineInSetting.ignoreStock as boolean"
+        value="ignoreStock"
+        :label="t('order.ignoreStock')"
+        :sublabel="t('order.ignoreStockSublabel')"
+        label-placement="right"
+      />
+      <FmSwitch
+        v-model="dineInSetting.staticQr as boolean"
+        value="staticQr"
+        :label="t('order.staticQRcode')"
+        :sublabel="t('order.staticQRcodeSublabel')"
+        label-placement="right"
+      />
+      <FmSwitch
+        v-model="disableItemRemarkNegated"
+        value="disableItemRemark"
+        :label="t('order.customerItemRemark')"
+        :sublabel="t('order.customerItemRemarkSublabel')"
+        label-placement="right"
+      />
+      <FmSwitch
+        v-model="dineInSetting.acceptQueue as boolean"
+        value="acceptQueue"
+        :label="t('order.acceptQueue')"
+        :sublabel="t('order.acceptQueueSublabel')"
+        label-placement="right"
+      />
+
+      <FmSwitch
+        :model-value="lastOrderBeforeCloseEnable"
+        @update:model-value="enableLastOrder"
+        :label="t('order.lastOrderBeforeClosing')"
+        :sublabel="t('order.lastOrderBeforeClosingDescription')"
+        label-placement="right"
+      ></FmSwitch>
+
+      <div
+        v-if="lastOrderBeforeCloseEnable"
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 ml-5"
+      >
+        <FmStepperField
+          :model-value="orderSetting?.lastOrderMinutesBeforeClose ?? 0"
+          :label="t('order.minutes')"
+          @update:model-value="updateLastOrderMinutesBeforeClose"
+          placeholder="0"
+          :show-steppers="true"
+          :rules="lastOrderSettingRules"
+          :min="0"
+        />
+      </div>
+
+      <FmSwitch
+        :model-value="orderSetting?.v3Settings.dineInCanTakeaway ?? false"
+        :label="t('order.dineInCanTakeaway')"
+        label-placement="right"
+        @update:model-value="updateDineInCanTakeaway"
+      ></FmSwitch>
     </div>
     <div class="p-[1.5rem] flex flex-col gap-2 m-5 w-2/3">
-      <PaymentType :payment-types="dineInSetting.paymentTypes ?? []" :allow-e-payment="allowEPayment"
+      <PaymentType
+        :payment-types="dineInSetting.paymentTypes ?? []"
+        :allow-e-payment="allowEPayment"
         :offline-payment-types="dineInSetting.offlinePaymentTypes ?? []"
         @update:payment-types="(v: F_ORDER_PAYMENT_TYPE[]) => (dineInSetting.paymentTypes = v)"
-        @update:offline-payment-types="(v: FdoOfflinePaymentMethod[] | undefined | null) => (dineInSetting.offlinePaymentTypes = v)
-          " />
+        @update:offline-payment-types="
+          (v: FdoOfflinePaymentMethod[] | undefined | null) =>
+            (dineInSetting.offlinePaymentTypes = v)
+        "
+      />
     </div>
     <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
-      <FmButton variant="primary" :label="t('order.saveSetting')" class="mr-auto" @click="updateDineInSetting" />
+      <FmButton
+        variant="primary"
+        :label="t('order.saveSetting')"
+        class="mr-auto"
+        @click="updateDineInSetting"
+      />
     </div>
   </div>
   <FmCircularProgress size="xxl" v-else />
-
 </template>
 
 <script setup lang="ts">
@@ -45,17 +109,38 @@ import { useCoreStore } from '@feedmepos/mf-common'
 import PaymentType from './PaymentType.vue'
 import { utils } from '@feedmepos/core'
 import { useI18n } from '@feedmepos/mf-common'
+import { OrderSettingApi } from '@/api/order-setting'
+import { type OrderSettingsDto } from '@entity'
+import { useSnackbarFunctions } from '@/components/snackbar'
 
 const { t } = useI18n()
 
 const { currentRestaurant } = useCoreStore()
 const dineInSetting = ref<FdoRestaurantDineIn>(initDineInSetting())
+const orderSetting = ref<OrderSettingsDto | undefined>(undefined)
+const lastOrderBeforeCloseEnable = ref<boolean>(false)
 
 const allowEPayment = computed(() => {
   const paymentTypes = dineInSetting.value.paymentTypes || []
   return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
 })
 
+const lastOrderSettingRules = computed(() => {
+  return [
+    () =>
+      (orderSetting.value?.lastOrderMinutesBeforeClose ?? 0) >= 0 ||
+      t('order.lastOrderMinutesBeforeCloseRule')
+  ]
+})
+
+const isDineInsettingValid = computed(() => {
+  return lastOrderSettingRules.value.every((rule) => rule() === true)
+})
+
+const errors = computed(() => {
+  return `${lastOrderSettingRules.value.filter((rule) => typeof rule() === 'string').map((rule) => rule())}`
+})
+
 const disableItemRemarkNegated = computed({
   get: () => !dineInSetting.value.disableItemRemark,
   set: (value) => {
@@ -63,6 +148,30 @@ const disableItemRemarkNegated = computed({
   }
 })
 
+function enableLastOrder(v: boolean) {
+  lastOrderBeforeCloseEnable.value = v
+  if (orderSetting.value) {
+    if (v) {
+      // By default - 15 mins
+      orderSetting.value.lastOrderMinutesBeforeClose = 15
+    } else {
+      orderSetting.value.lastOrderMinutesBeforeClose = 0
+    }
+  }
+}
+
+function updateDineInCanTakeaway(v: boolean) {
+  if (orderSetting.value) {
+    orderSetting.value.v3Settings.dineInCanTakeaway = v
+  }
+}
+
+function updateLastOrderMinutesBeforeClose(minutes: number) {
+  if (orderSetting.value) {
+    orderSetting.value.lastOrderMinutesBeforeClose = minutes
+  }
+}
+
 function initDineInSetting(): FdoRestaurantDineIn {
   return {
     ignoreStock: false,
@@ -75,31 +184,55 @@ function initDineInSetting(): FdoRestaurantDineIn {
   }
 }
 
-import { useSnackbarFunctions } from '@/components/snackbar'
-const { showSuccess } = useSnackbarFunctions()
+async function orderSettingInit() {
+  if (currentRestaurant.value) {
+    orderSetting.value = (await readOrderSetting()) ?? {
+      _id: currentRestaurant.value._id
+    }
+    lastOrderBeforeCloseEnable.value = !!orderSetting.value.lastOrderMinutesBeforeClose
+  }
+}
 
+const { showSuccess, showError } = useSnackbarFunctions()
 const restaurantStore = useRestaurantStore()
 const { startAsyncCallWithErr, isLoading } = useLoading()
 async function updateDineInSetting() {
+  if (!isDineInsettingValid.value) {
+    showError(errors.value)
+    return
+  }
+
   await startAsyncCallWithErr(async () => {
-    const id = currentRestaurant.value?._id ?? ''
-    const orderSetting = dineInSetting.value
-    if (orderSetting) {
-      await restaurantStore.updateDineInSetting(orderSetting)
+    const newDineInSetting = dineInSetting.value
+    if (newDineInSetting) {
+      await restaurantStore.updateDineInSetting(newDineInSetting)
       if (currentRestaurant.value) {
-        currentRestaurant.value.dineIn = orderSetting
+        currentRestaurant.value.dineIn = newDineInSetting
       }
     }
+
+    if (orderSetting.value) {
+      await OrderSettingApi.updateOrderSetting({
+        ...orderSetting.value
+      })
+    }
   })
   showSuccess('Dine in setting updated. ')
 }
 
+async function readOrderSetting(): Promise<OrderSettingsDto> {
+  return await startAsyncCallWithErr(async () => {
+    return await OrderSettingApi.getOrderSetting()
+  })
+}
+
 watch(
   () => currentRestaurant.value,
-  (newRestaurant) => {
+  async (newRestaurant) => {
     if (newRestaurant?.dineIn) {
       dineInSetting.value = utils.clone(newRestaurant.dineIn)
     }
+    await orderSettingInit()
   },
   { immediate: true }
 )
@@ -109,5 +242,6 @@ onMounted(async () => {
   if (newRestaurant?.dineIn) {
     dineInSetting.value = utils.clone(newRestaurant.dineIn)
   }
+  await orderSettingInit()
 })
 </script>

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

@@ -1,21 +1,20 @@
 <template>
   <div class="flex justify-between items-center">
-    <RestaurantSelector :model-value="currentRestaurant?._id ?? undefined" />
+    <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>
       <FmSwitch
-        :disabled="!validPosVersion"
-        v-model="autoSendKitchen"
-        :label="t('order.autoSendKitchen')"
-        :sublabel="`${!validPosVersion ? `(${t('order.autoSendKitchenSublabel')})` : ''}`"
+        :model-value="orderSetting?.v3Settings?.anonymousLoginDialog ?? true"
+        :label="t('order.promptAnonymousLoginDialog')"
+        @update:model-value="updateAnonymousLoginDialog"
         label-placement="right"
       ></FmSwitch>
-
       <FmSwitch
-        v-model="anonymousLoginDialog"
-        :label="t('order.promptAnonymousLoginDialog')"
+        :model-value="!!orderSetting?.v3Settings?.subItemDisplayMode"
+        :label="t('order.subItemDisplayModeListView')"
+        @update:model-value="updateSubItemDisplayMode"
         label-placement="right"
       ></FmSwitch>
     </div>
@@ -35,7 +34,7 @@
 import { useCoreStore } from '@feedmepos/mf-common'
 import RestaurantSelector from '../components/RestaurantSelector.vue'
 import { useLoading } from '@/composables/loading'
-import { type OrderSettingsDto, type OrderV3Settings } from '@entity'
+import { type OrderSettingsDto, type OrderV3Settings, F_ORDER_SUBITEM_DISPLAY_MODE } from '@entity'
 import { OrderSettingApi } from '@/api/order-setting'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useSnackbarFunctions } from '@/components/snackbar'
@@ -47,39 +46,36 @@ const { showSuccess } = useSnackbarFunctions()
 const { currentRestaurant } = useCoreStore()
 const { startAsyncCallWithErr, isLoading } = useLoading()
 
-const orderSettingDefault = ref<OrderSettingsDto | undefined>(undefined)
+const orderSetting = ref<OrderSettingsDto | undefined>(undefined)
 const v3Settings = ref<OrderV3Settings | undefined>(undefined)
-const autoSendKitchen = ref<boolean>(false)
 const anonymousLoginDialog = ref<boolean>(false)
 
-const validPosVersion = computed<boolean>(() => {
-  return currentRestaurant?.value?.posVersion?.startsWith('7') ?? false
-})
-
-async function init() {
+async function init(): Promise<void> {
   if (currentRestaurant.value) {
-    orderSettingDefault.value = await readOrderSetting()
-    v3Settings.value = orderSettingDefault.value.v3Settings
-    autoSendKitchen.value = validPosVersion.value
-      ? (orderSettingDefault.value.autoSendKitchen ?? true)
-      : false
-    anonymousLoginDialog.value = v3Settings.value.anonymousLoginDialog ?? true
+    orderSetting.value = await readOrderSetting()
+  }
+}
+
+function updateAnonymousLoginDialog(v: boolean) {
+  if (orderSetting.value) {
+    orderSetting.value.v3Settings.anonymousLoginDialog = v
+  }
+}
+
+function updateSubItemDisplayMode(v: boolean) {
+  if (orderSetting.value) {
+    if (v) {
+      orderSetting.value.v3Settings.subItemDisplayMode = F_ORDER_SUBITEM_DISPLAY_MODE.enum.LIST
+    } else {
+      orderSetting.value.v3Settings.subItemDisplayMode = undefined
+    }
   }
 }
 
 async function updateOrderSetting() {
   await startAsyncCallWithErr(async () => {
-    if (orderSettingDefault.value) {
-      await OrderSettingApi.updateOrderSetting({
-        ...orderSettingDefault.value,
-        autoSendKitchen: autoSendKitchen.value,
-        v3Settings: {
-          ...(v3Settings.value ?? {}),
-          dineInCanTakeaway: v3Settings.value?.dineInCanTakeaway ?? true,
-          anonymousLoginDialog: anonymousLoginDialog.value
-        }
-      })
-      await init()
+    if (orderSetting.value) {
+      await OrderSettingApi.updateOrderSetting(orderSetting.value)
       showSuccess('General setting updated')
     }
   })

package/src/views/order-settings/pickup/PickUpSetting.vue

@@ -51,7 +51,7 @@ const currentRestaurants = ref<FmpRestaurant[]>([])
 
 const pickupSetting = computed<RestaurantPickup[]>(() => {
   return currentRestaurants.value.map((r: FmpRestaurant) => {
-    const restaurantSetting = restaurantStore.restaurantSettings[r._id]
+    const restaurantSetting = restaurantStore.state.restaurantSettings[r._id]
 
     return {
       enable: restaurantSetting?.acceptPickup,
@@ -98,7 +98,9 @@ async function toggleSideSheet(rowData: any) {
   const v = rowData?.original?.restaurantId ?? rowData?.restaurantId
   originalRestaurant = currentRestaurant.value
 
-  const restaurant = currentRestaurants.value.find((r: FmpRestaurant) => r._id === v)
+  const restaurant: FmpRestaurant | undefined = currentRestaurants.value.find(
+    (r: FmpRestaurant) => r._id === v
+  )
   if (restaurant) {
     await changeRestaurant(restaurant as any)
   }

package/src/views/order-settings/pickup/PickUpSettingDialogContent.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-3">{{ t('order.generalSetting') }}</div>
-  <FmSwitch :model-value="pickupSetting.ignoreStock ?? false" value="ignoreStock" :label="t('order.ignoreStock')"
-    :sublabel="t('order.ignoreStockSublabel')" label-placement="right" @update:model-value="updateIgnoreStock" />
+  <FmSwitch
+    :model-value="pickupSetting.ignoreStock ?? false"
+    value="ignoreStock"
+    :label="t('order.ignoreStock')"
+    :sublabel="t('order.ignoreStockSublabel')"
+    label-placement="right"
+    @update:model-value="updateIgnoreStock"
+  />
   <FmCard variant="outlined" class="p-5 mt-10">
     <Preorder :model-value="pickupData" @update:model-value="updatePickupSetting" />
   </FmCard>
@@ -9,7 +15,7 @@
   <FmCard variant="outlined" class="p-5 mt-10">
     <PaymentSidesheet
       :offline-payment-types="pickupSetting.offlinePaymentTypes"
-      :allow-e-payment="restaurantStore.getRestaurantEPayment(currentRestaurant)"
+      :allow-e-payment="restaurantStore.getRestaurantEPayment()"
       :payment-types="pickupSetting.paymentTypes"
       @update:payments="updatePayments"
     />
@@ -17,14 +23,22 @@
 
   <FmCard variant="outlined" class="p-5 mt-10">
     <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.pickupPoint') }}</div>
-    <FmSwitch :model-value="!!pickupSetting.pickupPointConfig" value="pickuppoint" :label="t('order.multiplePickupPoint')"
-      :sublabel="t('order.allowMultiplePickupSublabel')" label-placement="right"
-      @update:model-value="toggleMultiplePickupPoint" />
+    <FmSwitch
+      :model-value="!!pickupSetting.pickupPointConfig"
+      value="pickuppoint"
+      :label="t('order.multiplePickupPoint')"
+      :sublabel="t('order.allowMultiplePickupSublabel')"
+      label-placement="right"
+      @update:model-value="toggleMultiplePickupPoint"
+    />
 
     <template v-if="pickupSetting.pickupPointConfig">
       <div class="mt-3">
-        <FmCheckbox v-model="pickupSetting.pickupPointConfig.restaurantEnable" :label="t('order.restaurantAsPickupPoint')"
-          value="restaurant" />
+        <FmCheckbox
+          v-model="pickupSetting.pickupPointConfig.restaurantEnable"
+          :label="t('order.restaurantAsPickupPoint')"
+          value="restaurant"
+        />
       </div>
       <PickUpPointDialog @update:address="updatePickupPoints" :pickup-setting="pickupSetting" />
       <div v-if="pickupSetting.pickupPointConfig">
@@ -107,8 +121,7 @@ const checkboxChildren = [
 const initializeCheckboxes = () => {
   const initialValues: string[] = []
   if (allowOfflinePayment.value) initialValues.push('offline')
-  if (restaurantStore.getRestaurantEPayment(currentRestaurant.value))
-    initialValues.push('e-payment')
+  if (restaurantStore.getRestaurantEPayment()) initialValues.push('e-payment')
   nestedVal.value = initialValues
   parent.value = initialValues.length === checkboxChildren.length
 }

package/src/views/order-settings/servicecharge/ServiceChargeSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-between items-center">
-    <RestaurantSelector :model-value="currentRestaurant?._id ?? undefined" />
+    <RestaurantSelector />
   </div>
   <div v-if="!isLoading">
     <div class="p-[1.5rem] flex flex-col gap-5">
@@ -29,7 +29,8 @@
             :label="t('order.chargeWhen')"
             @update:model-value="updateChargeWhen"
           >
-            <FmRadio value="beforeDiscount" :label="t('order.beforeBillDiscount')" />
+            <FmRadio value="beforeDiscount" :label="t('order.beforeBillDiscount')" :disabled="disableBeforeDiscount"
+            />
             <FmRadio value="afterDiscount" :label="t('order.afterBillDiscount')" />
           </FmRadioGroup>
           <RateInput :model-value="data.rate" @update:model-value="handleUpdateRate" />
@@ -40,7 +41,7 @@
             @update:model-value="updateInclusive"
           >
             <FmRadio value="exclusive" :label="t('order.exclusive')" />
-            <FmRadio value="inclusive" :label="t('order.inclusive')" />
+            <FmRadio value="inclusive" :label="t('order.inclusive')" :disabled="disableInclusive" />
           </FmRadioGroup>
         </div>
       </FmCard>
@@ -165,6 +166,14 @@ const chargeValue = computed(() => {
   return data.value.inclusive ? inclusiveKey : exclusiveKey
 })
 
+const disableInclusive = computed(() => {
+  return data.value.beforeDiscount ?? false
+})
+
+const disableBeforeDiscount = computed(() => {
+  return data.value.inclusive
+})
+
 function updateChargeWhen(key: string) {
   data.value.beforeDiscount = key === beforeDiscountKey
   if (data.value.beforeDiscount) updateInclusive(exclusiveKey)
@@ -181,6 +190,7 @@ function updateInclusive(inclusiveValue: string) {
     ...rule,
     inclusive: inclusive
   }))
+  if (data.value.inclusive) updateChargeWhen(afterDiscountKey)
 }
 
 function createRule() {
@@ -234,10 +244,9 @@ const isLoadingTables = ref(false)
 const tableSettingStore = useTableSettingStore()
 
 onMounted(async () => {
-  const resId = currentRestaurant.value?._id
-  if (resId) {
-    await restaurantStore.readRestaurantSetting(resId)
-    const restaurantSetting = restaurantStore.restaurantSettings[resId]
+  const res = restaurantStore.currentRestaurant
+  if (res) {
+    const restaurantSetting = await restaurantStore.readRestaurantSetting(res._id)
     initialize(restaurantSetting)
     await startAsyncCallWithErr(tableSettingStore.readTables)
   }
@@ -247,7 +256,7 @@ watch(
   () => currentRestaurant.value,
   async (newValue) => {
     if (newValue) {
-      let restaurantSetting = restaurantStore.restaurantSettings[newValue._id]
+      let restaurantSetting = restaurantStore.currentRestaurantSetting
       if (!restaurantSetting) {
         restaurantSetting = await restaurantStore.readRestaurantSetting(newValue._id)
       }