@feedmepos/mf-order-setting 0.0.24 → 0.0.26

package/src/stores/restaurant/index.ts

@@ -12,13 +12,14 @@ import {
   FdoShopeeFoodSettings,
   type FdoAddress,
   type FdoProfile,
-  type FdoRestaurant
+  FdoRestaurant,
 } from '@feedmepos/core/entity'
 import { FdoExternalSetting, FdoGrabfoodSettings } from '@entity'
 import { FeatureFlag, Pos } from '@feedmepos/core'
 import { SvcConfig } from '@/api'
 import { remoteOrderApi } from '@/api/remoteOrder'
-import { useI18n } from '@feedmepos/mf-common'
+import { useI18n, useCoreStore} from '@feedmepos/mf-common'
+import { computed, ref, watch} from 'vue'
 
 
 export interface Profile extends FdoProfile {
@@ -42,10 +43,6 @@ export interface ExtendedRestaurant extends FdoRestaurant {
 }
 
 interface RestaurantState {
-  adminRestaurants: FdoRestaurant[]
-  managableRestaurants: ExtendedRestaurant[]
-  businessRestaurants: ExtendedRestaurant[]
-  currentRestaurantId: string
   restaurantSettings: { [restaurantId: string]: RestaurantSettingDoc }
 }
 
@@ -53,90 +50,101 @@ export declare function setRestaurantId(id?: string | null): void
 
 function initRestaurantState(): RestaurantState {
   return {
-    adminRestaurants: [],
-    managableRestaurants: [],
-    businessRestaurants: [],
-    currentRestaurantId: '',
     restaurantSettings: {}
   }
 }
 
-export const useRestaurantStore = defineStore('restaurant', {
-  state: () => {
-    return initRestaurantState()
-  },
-  getters: {
-    currentRestaurant: (state) =>
-      state.businessRestaurants.find((r) => r.id === state.currentRestaurantId),
-    currentRestaurantSetting: (state) => state.restaurantSettings[state.currentRestaurantId || '']
-  },
-  actions: {
-    async readRestaurantSetting(restaurantId: string) {
-      const restaurantSetting = await restaurantApi.readRestaurantSetting(restaurantId)
-      this.restaurantSettings = {
-        ...this.restaurantSettings,
-        [restaurantId]: restaurantSetting
-      }
-      return restaurantSetting
-    },
-    async selectRestaurant(restaurantId: string) {
-      await this.readRestaurantSetting(restaurantId)
-      this.currentRestaurantId = restaurantId
-      SvcConfig.setRestaurantId(restaurantId)
-      setRestaurantId(restaurantId)
-      FeatureFlag.setRestaurant(restaurantId || undefined)
-      localStorage.set('feedme_restaurant', restaurantId)
-    },
-    async updateServiceCharge(serviceCharge: FdoServiceChargeSetting) {
-      await restaurantApi.updateServiceCharge(serviceCharge)
-    },
-    async updateDineInSetting(setting: FdoRestaurantDineIn) {
-      await restaurantApi.updateDineInSetting(setting)
-    },
-    async updatePickupSetting(setting: FdoRestaurantPickup) {
-      await restaurantApi.updatePickupSetting(setting)
-    },
+export const useRestaurantStore = defineStore('restaurant', () =>  {
+  const CoreStore = useCoreStore()
+  const state = ref(initRestaurantState())
+  const currentRestaurantSetting = computed<RestaurantSettingDoc| undefined>(() => state.value.restaurantSettings[CoreStore.currentRestaurant.value?._id || ''])
 
-    async updateInhouseDelivery(restaurantId: string, dto: FdoRestaurantInHouseDelivery) {
-      await remoteOrderApi.integratedDelivery.updateInhouse(restaurantId, dto)
-    },
-    async updateFeedmeDelivery(restaurantId: string, dto: FdoRestaurantFeedmeDelivery) {
-      return await remoteOrderApi.integratedDelivery.updateFeedme(restaurantId, dto)
-    },
-    async updateIntegratedFoodpandaDelivery(restaurantId: string, dto: FdoFoodpandaSettings) {
-      await remoteOrderApi.integratedDelivery.updateFoodpanda(restaurantId, dto)
-    },
-    async updateIntegratedGrabfoodDelivery(restaurantId: string, dto: FdoGrabfoodSettings) {
-      await remoteOrderApi.integratedDelivery.updateGrabfood(restaurantId, dto)
-    },
-    async updateIntegratedShopeefoodDelivery(restaurantId: string, dto: FdoShopeeFoodSettings) {
-      await remoteOrderApi.integratedDelivery.updateShopeefood(restaurantId, dto)
-    },
-    async updateExternalDelivery(restaurantId: string, dto: FdoExternalSetting) {
-      await remoteOrderApi.integratedDelivery.updateExternal(restaurantId, dto)
-    },
-    getRestaurantEPayment(dto?: FdoRestaurant | undefined): true | string {
-      const { t } = useI18n()
-      if (!dto) {
-        return 'getRestaurantEPayment - Invalid restaurant ';
-      }
-      const { payoutAccount, posVersion } = dto;
-      const validPosVersion =
-        !!posVersion &&
-        Pos.canUse({
-          feature: F_FEATURE.enum.qrEPayment,
-          posVersion
-        })
+  async function readRestaurantSetting(restaurantId: string) {
+    const restaurantSetting = await restaurantApi.readRestaurantSetting(restaurantId)
+    state.value.restaurantSettings = {
+      ...state.value.restaurantSettings,
+      [restaurantId]: restaurantSetting
+    }
+    return restaurantSetting
+  }
+
+  async function selectRestaurant(restaurantId: string) {
+    await readRestaurantSetting(restaurantId)
+    SvcConfig.setRestaurantId(restaurantId)
+    setRestaurantId(restaurantId)
+    FeatureFlag.setRestaurant(restaurantId || undefined)
+    localStorage.set('feedme_restaurant', restaurantId)
+  }
 
-      if (!validPosVersion)
-        return t('order.payoutPosVersion', { version: Pos.minVersionToUse(F_FEATURE.enum.qrEPayment) })
-      if (!payoutAccount || !payoutAccount.enable) {
-        return t('order.payoutAccountIsRequired')
-      }
-      if (payoutAccount.status !== F_PAYOUT_ACCOUNT_STATUS.enum.APPROVED) {
-        return t('order.payoutAccountIsRequired')
-      }
-      return true
+  async function updateServiceCharge(serviceCharge: FdoServiceChargeSetting) {
+    await restaurantApi.updateServiceCharge(serviceCharge)
+  }
+  async function updateDineInSetting(setting: FdoRestaurantDineIn) {
+    await restaurantApi.updateDineInSetting(setting)
+  }
+  async function updatePickupSetting(setting: FdoRestaurantPickup) {
+    await restaurantApi.updatePickupSetting(setting)
+  }
+
+  async function updateInhouseDelivery(restaurantId: string, dto: FdoRestaurantInHouseDelivery) {
+    await remoteOrderApi.integratedDelivery.updateInhouse(restaurantId, dto)
+  }
+  async function updateFeedmeDelivery(restaurantId: string, dto: FdoRestaurantFeedmeDelivery) {
+    return await remoteOrderApi.integratedDelivery.updateFeedme(restaurantId, dto)
+  }
+  async function updateIntegratedFoodpandaDelivery(restaurantId: string, dto: FdoFoodpandaSettings) {
+    await remoteOrderApi.integratedDelivery.updateFoodpanda(restaurantId, dto)
+  }
+  async function updateIntegratedGrabfoodDelivery(restaurantId: string, dto: FdoGrabfoodSettings) {
+    await remoteOrderApi.integratedDelivery.updateGrabfood(restaurantId, dto)
+  }
+  async function updateIntegratedShopeefoodDelivery(restaurantId: string, dto: FdoShopeeFoodSettings) {
+    await remoteOrderApi.integratedDelivery.updateShopeefood(restaurantId, dto)
+  }
+  async function updateExternalDelivery(restaurantId: string, dto: FdoExternalSetting) {
+    await remoteOrderApi.integratedDelivery.updateExternal(restaurantId, dto)
+  }
+  
+  function getRestaurantEPayment(): true | string {
+    const { t } = useI18n()
+    if (!CoreStore.currentRestaurant.value) {
+      return 'getRestaurantEPayment - Invalid restaurant ';
+    }
+    const payoutAccount = CoreStore.currentRestaurant.value.payoutAccount;
+    const posVersion = CoreStore.currentRestaurant.value.posVersion;
+
+    const validPosVersion =
+      !!posVersion &&
+      Pos.canUse({
+        feature: F_FEATURE.enum.qrEPayment,
+        posVersion
+      })
+
+    if (!validPosVersion)
+      return t('order.payoutPosVersion', { version: Pos.minVersionToUse(F_FEATURE.enum.qrEPayment) })
+    if (!payoutAccount || !payoutAccount.enable) {
+      return t('order.payoutAccountIsRequired')
+    }
+    if (payoutAccount.status !== F_PAYOUT_ACCOUNT_STATUS.enum.APPROVED) {
+      return t('order.payoutAccountIsRequired')
     }
+    return true
+  }
+
+  return {
+    state: state.value,
+    currentRestaurantSetting : currentRestaurantSetting.value,
+    readRestaurantSetting,
+    selectRestaurant,
+    updateServiceCharge,
+    updateDineInSetting,
+    updatePickupSetting,
+    updateInhouseDelivery,
+    updateFeedmeDelivery,
+    updateIntegratedFoodpandaDelivery,
+    updateIntegratedGrabfoodDelivery,
+    updateIntegratedShopeefoodDelivery,
+    updateExternalDelivery,
+    getRestaurantEPayment
   }
 })

package/src/views/order-settings/delivery/DeliverySetting.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="flex flex-col lg:flex-row md:flex-row sm:flex-row xs:flex-wrap justify-between">
-    <RestaurantSelector
-      :model-value="currentRestaurant?._id ?? undefined"
-      class="xs:order-2 xs:mb-3"
-    />
+    <RestaurantSelector class="xs:order-2 xs:mb-3" />
     <FmSearch
       v-model="searchKey"
       :placeholder="t('order.search')"
@@ -75,7 +72,7 @@
     <InHouseDelivery
       v-if="inHouseComponentProps.key === F_ORDER_PLATFORM.enum.IN_HOUSE"
       :initial-value="inHouseComponentProps.initialValue"
-      :address="formatAddress(currentRestaurant?.profile.address)"
+      :address="formatAddress((currentRestaurant as any).profile.address)"
       @update:model-value="handleModelValueUpdateInHouse"
     />
     <ExternalSetting
@@ -380,7 +377,7 @@ async function updateInHouse({ key, setting }: IntegratedDeliveryRow) {
   }
 }
 
-async function updateExternalDelivery( {key, setting}: IntegratedDeliveryRow) {
+async function updateExternalDelivery({ key, setting }: IntegratedDeliveryRow) {
   clearComponentProps()
   const externalSetting = setting as FdoExternalSetting
 
@@ -487,7 +484,7 @@ const external = computed<FdoExternalSetting>(() => {
     ...deliveryData.initExternalDelivery(),
     ...externalSetting.value
   }
-}) 
+})
 const localDeliveryCompanies = computed<DeliveryRow[]>(() => {
   const res = filterLocalDeliveryCompanies(deliveryCompanies.value).map<DeliveryRow>((company) => {
     const { name, paymentTypeKey, key } = company
@@ -619,9 +616,9 @@ const integratedCompanies = computed<IntegratedDeliveryRow[]>(() => {
       key: AUTO_INTEGRATION_CLIENT.external,
       setting: external.value,
       catalog: '-',
-      paymentType: '-', 
-      status: [generateStatus(false, external.value.enable)],
-    },
+      paymentType: '-',
+      status: [generateStatus(false, external.value.enable)]
+    }
   ]
 })
 
@@ -828,7 +825,10 @@ async function updateInHouseSetting() {
 
 async function updateExternalDeliverySetting() {
   sideSheetIntegrated.value = false
-  await restaurantStore.updateExternalDelivery(currentRestaurant.value?._id ?? '', externalDoc.value)
+  await restaurantStore.updateExternalDelivery(
+    currentRestaurant.value?._id ?? '',
+    externalDoc.value
+  )
   const res = (await readRestaurants())?.find((res) => res._id === currentRestaurant.value?._id)
   if (!!res) {
     await changeRestaurant(res)

package/src/views/order-settings/delivery/inhouse/InHouseDelivery.vue

@@ -80,16 +80,16 @@ const inhouse = reactive<InhouseDialogData>(
   props.initialValue
     ? clone(props.initialValue)
     : {
-      enable: false,
-      catalogId: null,
-      term: '',
-      areas: [],
-      ignoreStock: false,
-      paymentTypes: [],
-      offlinePaymentTypes: [],
-      deliveryTime: null,
-      taxes: {}
-    }
+        enable: false,
+        catalogId: null,
+        term: '',
+        areas: [],
+        ignoreStock: false,
+        paymentTypes: [],
+        offlinePaymentTypes: [],
+        deliveryTime: null,
+        taxes: {}
+      }
 )
 
 const tax = computed(() => ItemTax.taxSetting())
@@ -230,12 +230,13 @@ const actualDeliveryTime = computed({
 </script>
 
 <template>
-  <FmSwitch 
-    :model-value="inhouse.enable" 
-    :label="t('order.activateDeliveryCompany', {company:'In house'})" 
+  <FmSwitch
+    :model-value="inhouse.enable"
+    :label="t('order.activateDeliveryCompany', { company: 'In house' })"
     label-placement="right"
     :sublabel="t('order.inhouseSwitchSublabel')"
-    @update:model-value="updateEnable" />
+    @update:model-value="updateEnable"
+  />
   <div v-if="inhouse.enable">
     <FmCard variant="outlined" class="p-5 mt-10">
       <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.generalSetting') }}</div>
@@ -272,40 +273,39 @@ const actualDeliveryTime = computed({
     <FmCard variant="outlined" class="p-5 mt-10">
       <div class="flex-grow fm-typo-en-title-sm-600 mb-3">
         {{ t('order.taxSetting') }}
-        <span
-          class="text-fm-color-secondary-salmon fm-typo-en-body-sm-600"
-          v-if="!validPosVersion"
-        >
-          {{ t('order.taxSettingTerm', {validatePosVersion: minVersionForTax}) }}</span
+        <span class="text-fm-color-secondary-salmon fm-typo-en-body-sm-600" v-if="!validPosVersion">
+          {{ t('order.taxSettingTerm', { validatePosVersion: minVersionForTax }) }}</span
         >
       </div>
       <div class="mb-5">
-        <FmSwitch 
-          :model-value="hasInhouseDeliveryTax && validPosVersion" 
+        <FmSwitch
+          :model-value="hasInhouseDeliveryTax && validPosVersion"
           :disabled="!validPosVersion"
-          :label="t('order.inhouseDeliveryTaxLabel')" 
-          label-placement="right" 
+          :label="t('order.inhouseDeliveryTaxLabel')"
+          label-placement="right"
           :sublabel="t('order.inhouseDeliveryTaxSublabel')"
-          @update:model-value="toggleTax" />
+          @update:model-value="toggleTax"
+        />
       </div>
       <div v-if="hasInhouseDeliveryTax && validPosVersion">
         <div class="mb-5">
-          <TaxInput 
-            :disable="!validPosVersion" 
-            :model-value="taxSettings" 
+          <TaxInput
+            :disable="!validPosVersion"
+            :model-value="taxSettings"
             :tax-options="taxOptions"
             :title="`${tax.systemCode} ${t('order.inhouseDeliveryInputLabel')}`"
-            @update:model-value="(ev) => updateTax(ev)" 
+            @update:model-value="(ev) => updateTax(ev)"
           />
         </div>
         <div class="mb-5">
-          <FmRadioGroup 
-            :disabled="!validPosVersion" 
-            :model-value="taxInclusive" 
-            label-mark="required" 
+          <FmRadioGroup
+            :disabled="!validPosVersion"
+            :model-value="taxInclusive"
+            label-mark="required"
             inline
             :label="t('order.inhouseDeliveryTaxCalculation')"
-            @update:model-value="(ev) => updateTaxInclusive(ev as unknown as number)">
+            @update:model-value="(ev) => updateTaxInclusive(ev as unknown as number)"
+          >
             <div v-for="option in taxInclusiveOptions" :key="option.value">
               <FmRadio :value="option.value" :label="option.label" />
             </div>
@@ -315,8 +315,12 @@ const actualDeliveryTime = computed({
     </FmCard>
 
     <FmCard variant="outlined" class="p-5 mt-10">
-      <PaymentSidesheet :paymentTypes="inhouse.paymentTypes" :offlinePaymentTypes="inhouse.offlinePaymentTypes"
-        :allow-e-payment="restaurantStore.getRestaurantEPayment(currentRestaurant)" @update:payments="updatePayment" />
+      <PaymentSidesheet
+        :paymentTypes="inhouse.paymentTypes"
+        :offlinePaymentTypes="inhouse.offlinePaymentTypes"
+        :allow-e-payment="restaurantStore.getRestaurantEPayment()"
+        @update:payments="updatePayment"
+      />
     </FmCard>
 
     <FmCard variant="outlined" class="p-5 mt-10">

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>