@feedmepos/mf-order-setting 0.0.37 → 0.0.43

package/src/views/kiosk/settings/KioskSettingView.vue

@@ -1,37 +1,157 @@
 <template>
   <div v-if="!!kioskOrderSettingForm" class="flex flex-col gap-32">
+    <!-- Dine In Section -->
     <div class="flex flex-col gap-2">
       <span class="fm-typo-en-title-sm-600">{{ t('order.dineIn') }}</span>
-      <KioskDineInSection
-        :key="'dine-in-' + restaurantId"
-        :v="kioskOrderSettingForm.dineIn"
-        @update-dine-in="updateDineInSetting"
-      />
+      <div class="flex flex-col gap-5">
+        <FmSwitch
+          v-model="kioskOrderSettingForm.dineIn.enabled"
+          :label="t('order.dineIn')"
+          label-placement="right"
+        />
+        <div v-show="kioskOrderSettingForm.dineIn.enabled" class="flex flex-col gap-16">
+          <!-- Pick Up at Counter -->
+          <div>
+            <FmSwitch
+              v-model="kioskOrderSettingForm.dineIn.pickUp.enabled"
+              :label="t('order.pickAtCounter')"
+              label-placement="right"
+            />
+            <div
+              v-show="kioskOrderSettingForm.dineIn.pickUp.enabled"
+              class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2 my-5 w-11/12"
+            >
+              <span class="fm-typo-en-title-sm-600">{{ t('order.submitOrderInstruction') }}</span>
+              <FmTextField
+                v-model="kioskOrderSettingForm.dineIn.pickUp.submitOrderInstruction.payAtCounter"
+                :label="t('order.payAtCounter')"
+                :placeholder="'Collect your transaction slip below and present it to the cashier'"
+              />
+              <FmTextField
+                v-model="kioskOrderSettingForm.dineIn.pickUp.submitOrderInstruction.paid"
+                :label="t('order.paid')"
+                :placeholder="'Please wait as we prepare your food. We\'ll call your number when it\'s ready.'"
+              />
+            </div>
+          </div>
+
+          <!-- Display Stand -->
+          <div>
+            <FmSwitch
+              v-model="kioskOrderSettingForm.dineIn.displayStand.enabled"
+              :label="t('order.displayStand')"
+              label-placement="right"
+            />
+            <div
+              v-show="kioskOrderSettingForm.dineIn.displayStand.enabled"
+              class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2 my-5 w-11/12"
+            >
+              <span class="fm-typo-en-title-sm-600">{{ t('order.tableServiceSetting') }}</span>
+              <FmTextField
+                v-model="kioskOrderSettingForm.dineIn.displayStand.prefix"
+                :label="t('order.prefix')"
+                :placeholder="t('order.prefix')"
+              />
+              <div class="flex flex-row gap-2">
+                <FmStepperField
+                  v-model="kioskOrderSettingForm.dineIn.displayStand.standSlotRange.min"
+                  class="w-1/2"
+                  :label="t('order.start')"
+                  labelMark="required"
+                  :rules="minRules"
+                  :placeholder="t('order.enterANumber')"
+                />
+                <FmStepperField
+                  v-model="kioskOrderSettingForm.dineIn.displayStand.standSlotRange.max"
+                  class="w-1/2"
+                  :label="t('order.end')"
+                  labelMark="required"
+                  :rules="maxRules"
+                  :placeholder="t('order.enterANumber')"
+                />
+              </div>
+              <FmStepperField
+                v-model="kioskOrderSettingForm.dineIn.displayStand.padDigit"
+                :label="t('order.padDigit')"
+                labelMark="required"
+                :rules="padDigitRules"
+                :placeholder="t('order.padDigit')"
+              />
+            </div>
+
+            <div
+              v-show="kioskOrderSettingForm.dineIn.displayStand.enabled"
+              class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2 my-5 w-11/12"
+            >
+              <span class="fm-typo-en-title-sm-600">{{ t('order.submitOrderInstruction') }}</span>
+              <FmTextField
+                v-model="
+                  kioskOrderSettingForm.dineIn.displayStand.submitOrderInstruction.payAtCounter
+                "
+                :label="t('order.payAtCounter')"
+                :placeholder="'Collect your transaction slip below and present it to the cashier'"
+              />
+              <FmTextField
+                v-model="kioskOrderSettingForm.dineIn.displayStand.submitOrderInstruction.paid"
+                :label="t('order.paid')"
+                :placeholder="'Please collect your receipt and we\'ll bring your food to your table once it\'s ready.'"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <!-- Takeaway Section -->
     <div class="flex flex-col gap-2">
       <span class="fm-typo-en-title-sm-600">{{ t('order.takeawayTitle') }}</span>
-      <KioskTakeawaySection
-        :key="'takeaway-' + restaurantId"
-        :v="kioskOrderSettingForm.takeaway"
-        @update-takeaway="updateTakeawaySetting"
+      <FmSwitch
+        v-model="kioskOrderSettingForm.takeaway.enabled"
+        :label="t('order.takeaway')"
+        label-placement="right"
+        class="mb-5"
       />
+      <div
+        v-show="kioskOrderSettingForm.takeaway.enabled"
+        class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2 my-5 w-11/12"
+      >
+        <span class="fm-typo-en-title-sm-600">{{ t('order.submitOrderInstruction') }}</span>
+        <FmTextField
+          v-model="kioskOrderSettingForm.takeaway.submitOrderInstruction.payAtCounter"
+          :label="t('order.payAtCounter')"
+          :placeholder="'Collect your transaction slip below and present it to the cashier'"
+        />
+        <FmTextField
+          v-model="kioskOrderSettingForm.takeaway.submitOrderInstruction.paid"
+          :label="t('order.paid')"
+          :placeholder="'Please wait as we prepare your food. We\'ll call your number when it\'s ready.'"
+        />
+      </div>
     </div>
+
+    <!-- Menu Item Section -->
     <div class="flex flex-col gap-2">
-    <span class="fm-typo-en-title-sm-600">{{ t('order.menuItem') }}</span>
-      <KioskMenuItemSection
-        :key="'menu-item-' + restaurantId"
-        :v="kioskOrderSettingForm.menuItem.showAllOnly"
-        @update:model-value="updateMenuItemSetting"
+      <span class="fm-typo-en-title-sm-600">{{ t('order.menuItem') }}</span>
+      <FmSwitch
+        v-model="kioskOrderSettingForm.menuItem.showAllOnly"
+        :label="t('order.showNotAvailableMenuItem')"
+        label-placement="right"
+        class="mb-5"
       />
     </div>
+
+    <!-- Display Pax Dialog Section -->
     <div class="flex flex-col gap-2">
       <span class="fm-typo-en-title-sm-600">{{ t('order.displayPaxDialogTitle') }}</span>
-      <KioskEnablePaxDialogSection
-        :key="'enable-pax-dialog-' + restaurantId"
-        :v="enablePaxDialog"
-        @update-enable-pax-dialog="updateEnablePaxDialogSetting"
+      <FmSwitch
+        v-model="enablePaxDialog"
+        :label="t('order.displayPaxDialogDescription')"
+        label-placement="right"
+        class="mb-5"
       />
     </div>
+
+    <!-- Payment Section -->
     <div class="flex flex-col gap-2">
       <span class="fm-typo-en-title-sm-600">{{ t('order.acceptedPayment') }}</span>
       <span class="fm-typo-en-title-sm-400 font-bold">{{ t('order.configuration') }}</span>
@@ -46,8 +166,9 @@
             (kioskOrderSettingForm.paymentSetting.offlinePaymentTypes = v)
         "
         @update:ePaymentTypes="updateEPaymentSetting"
-        />
+      />
     </div>
+
     <FmButton
       class="w-1/4 mb-10"
       variant="primary"
@@ -62,15 +183,10 @@
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import KioskDineInSection from './KioskDineInSection.vue'
-import KioskTakeawaySection from './KioskTakeawaySection.vue'
 import KioskPaymentTypeSection from './KioskPaymentTypeSection.vue'
 import { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
 import { FdoEPaymentMethod, F_ORDER_PAYMENT_TYPE } from '@entity'
-import KioskMenuItemSection from './KioskMenuItemSection.vue'
 import type {
-  KioskDineInSettingForm,
-  KioskTakeawaySettingForm,
   MfKioskOrderSetting,
   MfKioskOrderSettingForm,
   KioskPaymentTypesForm
@@ -78,7 +194,6 @@ import type {
 import { useLoading } from '@/composables/loading'
 import { useSnackbar } from '@feedmepos/ui-library'
 import { useI18n } from '@feedmepos/mf-common'
-import KioskEnablePaxDialogSection from './KioskEnablePaxDialogSection.vue'
 
 const { t } = useI18n()
 
@@ -99,86 +214,53 @@ const emits = defineEmits<Emits>()
 
 const kioskOrderSettingForm = ref<MfKioskOrderSettingForm>(props.form)
 
+// Validation rules
+const nonNegativeRule = (val: any) => {
+  if (val < 0) return t('order.nonNegativeRule')
+  return true
+}
+
+const greaterThanMinRule = (val: any) => {
+  if (val <= (kioskOrderSettingForm.value.dineIn.displayStand.standSlotRange.min ?? 0)) {
+    return t('order.greaterThanMinRule')
+  }
+  return true
+}
+
+const padDigitRules = computed(() => [nonNegativeRule])
+const minRules = computed(() => [nonNegativeRule])
+const maxRules = computed(() => [nonNegativeRule, greaterThanMinRule])
+
 const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
   const f = kioskOrderSettingForm.value
-  if (!f.dineIn.enabled) {
-    return {
-      ...f,
-      dineIn: {
-        enabled: f.dineIn.enabled,
-        sequenceNumber: f.dineIn.sequenceNumber,
-        pickUp: f.dineIn.pickUp,
-        displayStand: {
-          enabled: false,
-          padDigit: f.dineIn.displayStand.padDigit ?? 0,
-          standSlotRange: {
-            min: f.dineIn.displayStand.standSlotRange.min ?? 0,
-            max: f.dineIn.displayStand.standSlotRange.max ?? 10
-          },
-          prefix: f.dineIn.displayStand.prefix ?? '',
-          enablePaxDialog: f.dineIn.displayStand.enablePaxDialog,
-          submitOrderInstruction: {
-            payAtCounter: f.dineIn.displayStand.submitOrderInstruction.payAtCounter ?? null,
-            paid: f.dineIn.displayStand.submitOrderInstruction.paid ?? null
-          }
-        }
-      }
-    }
-  }
+
+  // Validate display stand settings if both dineIn and displayStand are enabled
   if (f.dineIn.enabled && f.dineIn.displayStand.enabled) {
-    const displayStand = f.dineIn.displayStand
-
-    if (
-      displayStand.padDigit != null &&
-      displayStand.padDigit >= 0 &&
-      !!displayStand.standSlotRange.min &&
-      !!displayStand.standSlotRange.max &&
-      displayStand.standSlotRange.min <= displayStand.standSlotRange.max
-    ) {
-      return {
-        ...f,
-        dineIn: {
-          enabled: f.dineIn.enabled,
-          sequenceNumber: f.dineIn.sequenceNumber,
-          pickUp: f.dineIn.pickUp,
-          displayStand: {
-            enabled: displayStand.enabled,
-            padDigit: displayStand.padDigit,
-            standSlotRange: {
-              min: displayStand.standSlotRange.min,
-              max: displayStand.standSlotRange.max
-            },
-            prefix: displayStand.prefix ?? '',
-            enablePaxDialog: displayStand.enablePaxDialog,
-            submitOrderInstruction: {
-              payAtCounter: displayStand.submitOrderInstruction.payAtCounter ?? null,
-              paid: displayStand.submitOrderInstruction.paid ?? null
-            }
-          }
-        }
-      }
-    }
-    return null
+    const { padDigit, standSlotRange } = f.dineIn.displayStand
+    const isValid =
+      padDigit != null &&
+      padDigit >= 0 &&
+      standSlotRange.min != null &&
+      standSlotRange.max != null &&
+      standSlotRange.min <= standSlotRange.max
+
+    if (!isValid) return null
   }
+
+  // Return the form as-is if valid, with display stand disabled when dineIn is disabled
   return {
     ...f,
     dineIn: {
-      enabled: f.dineIn.enabled,
-      sequenceNumber: f.dineIn.sequenceNumber,
-      pickUp: f.dineIn.pickUp,
+      ...f.dineIn,
       displayStand: {
-        enabled: false,
+        ...f.dineIn.displayStand,
+        enabled: f.dineIn.enabled && f.dineIn.displayStand.enabled,
         padDigit: f.dineIn.displayStand.padDigit ?? 0,
         standSlotRange: {
           min: f.dineIn.displayStand.standSlotRange.min ?? 0,
           max: f.dineIn.displayStand.standSlotRange.max ?? 10
         },
-        prefix: f.dineIn.displayStand.prefix ?? '',
-        enablePaxDialog: f.dineIn.displayStand.enablePaxDialog,
-        submitOrderInstruction: {
-          payAtCounter: f.dineIn.displayStand.submitOrderInstruction.payAtCounter ?? null,
-          paid: f.dineIn.displayStand.submitOrderInstruction.paid ?? null
-        }
+        prefix: f.dineIn.displayStand.prefix ?? ''
       }
     }
   }
@@ -186,43 +268,32 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
 
 const { startAsyncCall } = useLoading()
 
-async function updateDineInSetting(form: KioskDineInSettingForm) {
-  kioskOrderSettingForm.value.dineIn = form
+function updatePaymentSetting(form: KioskPaymentTypesForm) {
+  kioskOrderSettingForm.value.paymentSetting.paymentTypes = form
 }
 
-async function updateTakeawaySetting(form: KioskTakeawaySettingForm) {
-  kioskOrderSettingForm.value.takeaway = form
-}
-
-async function updateMenuItemSetting(v: boolean) {
-  kioskOrderSettingForm.value.menuItem.showAllOnly = v
-}
-
-async function updatePaymentSetting(form: KioskPaymentTypesForm) {
-    kioskOrderSettingForm.value.paymentSetting.paymentTypes = form;
-}
-
-async function updateEPaymentSetting(form: FdoEPaymentMethod) {
-    kioskOrderSettingForm.value.paymentSetting.ePaymentTypes = form;
+function updateEPaymentSetting(form: FdoEPaymentMethod) {
+  kioskOrderSettingForm.value.paymentSetting.ePaymentTypes = form
 }
 
 const allowEPayment = computed(() => {
-    const paymentTypes = kioskOrderSettingForm.value.paymentSetting.paymentTypes || [];
-    return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment);
+  const paymentTypes = kioskOrderSettingForm.value.paymentSetting.paymentTypes || []
+  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
 })
 
-async function updateEnablePaxDialogSetting(v: boolean) {
-  kioskOrderSettingForm.value.dineIn.displayStand.enablePaxDialog = v
-  kioskOrderSettingForm.value.dineIn.pickUp.enablePaxDialog = v
-}
-
-const enablePaxDialog = computed(() => {
-  return (
-    ((kioskOrderSettingForm.value.dineIn.displayStand.enabled &&
-      kioskOrderSettingForm.value.dineIn.displayStand.enablePaxDialog) ||
-      kioskOrderSettingForm.value.dineIn.pickUp.enablePaxDialog) ??
-    false
-  )
+const enablePaxDialog = computed({
+  get: () => {
+    return (
+      ((kioskOrderSettingForm.value.dineIn.displayStand.enabled &&
+        kioskOrderSettingForm.value.dineIn.displayStand.enablePaxDialog) ||
+        kioskOrderSettingForm.value.dineIn.pickUp.enablePaxDialog) ??
+      false
+    )
+  },
+  set: (v: boolean) => {
+    kioskOrderSettingForm.value.dineIn.displayStand.enablePaxDialog = v
+    kioskOrderSettingForm.value.dineIn.pickUp.enablePaxDialog = v
+  }
 })
 
 async function submitForm() {

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,25 +16,30 @@
 
 <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'
 import SmsSetting from './sms/SmsSetting.vue'
-import ServiceChargeSetting from './servicecharge/ServiceChargeSetting.vue'
-import DiscountRuleSetting from './discount-rule/DiscountRuleSetting.vue'
+// 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'
   | 'dinein'
-  | 'servicecharge'
+  // | 'servicecharge'
   | 'sms'
-  | 'discountRule'
+  // | 'discountRule'
   | 'general'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
@@ -38,8 +47,8 @@ const settingItem = computed<FmTabProps[]>(() => [
   { label: t('order.delivery'), value: 'delivery' },
   { label: t('order.pickup'), value: 'pickup' },
   { label: t('order.dineIn'), value: 'dinein' },
-  { label: t('order.serviceCharge'), value: 'servicecharge' },
-  { label: t('order.discountRule.title'), value: 'discountRule' },
+  // { label: t('order.serviceCharge'), value: 'servicecharge' },
+  // { label: t('order.discountRule.title'), value: 'discountRule' },
   { label: t('order.sms'), value: 'sms' },
   { label: t('order.general'), value: 'general' }
 ])
@@ -54,12 +63,30 @@ const currentComponent = computed(() => {
       return PickUpSetting
     case 'sms':
       return SmsSetting
-    case 'servicecharge':
-      return ServiceChargeSetting
-    case 'discountRule':
-      return DiscountRuleSetting
+    // case 'servicecharge':
+    //   return ServiceChargeSetting
+    // case 'discountRule':
+    //   return DiscountRuleSetting
     case 'general':
       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/DeliverySetting.vue

@@ -174,13 +174,7 @@ import type {
   FdoRestaurantFeedmeDelivery,
   FdoRestaurantInHouseDelivery
 } from '@feedmepos/core/entity'
-import {
-  F_COUNTRY,
-  F_DELIVERY_TYPE,
-  F_FEATURE,
-  F_ORDER_PLATFORM,
-  F_RESTAURANT_FEATURE
-} from '@feedmepos/core/entity'
+import { F_DELIVERY_TYPE, F_ORDER_PLATFORM, F_RESTAURANT_FEATURE } from '@feedmepos/core/entity'
 import { FdoGrabfoodSettings, FdoShopeeFoodSettings } from '@entity'
 import deliveryData from './delivery.data'
 import { useDelivery, type DeliveryCompany, type LinkedDeliveryDoc } from './delivery'
@@ -203,7 +197,6 @@ import { useSnackbarFunctions } from '@/components/snackbar'
 import useSearch from '@/composables/search'
 import DeliveryList from './DeliveryList.vue'
 import DeliverooSetting from './integrated-delivery/DeliverooSetting.vue'
-import { Pos } from '@feedmepos/core'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
@@ -530,7 +523,7 @@ const localDeliveryCompanies = computed<DeliveryRow[]>(() => {
       key,
       name,
       paymentType: getPaymentType(payment),
-      status: !!doc ? [`${t('order.active')}`] : [`${t('order.inactive')}`],
+      status: doc ? [`${t('order.active')}`] : [`${t('order.inactive')}`],
       doc: company,
       catalog: getCatalog(doc?.catalogId || null)
     }
@@ -788,11 +781,11 @@ async function updateManualDelivery({
   company: DeliveryCompany
   data: FdoLinkedDelivery | null
 }) {
-  if (!!data) {
+  if (data) {
     const resp = await createOrUpdateManualDeliveryDoc({ doc, company, data })
 
     if (resp) updateCached(resp)
-  } else if (!!doc) {
+  } else if (doc) {
     await remoteOrderApi.deleteDeliveryCompany(doc)
     deleteCached(doc)
   }
@@ -807,7 +800,7 @@ async function createOrUpdateManualDeliveryDoc({
   company: DeliveryCompany
   data: FdoLinkedDelivery
 }): Promise<LinkedDeliveryDoc | undefined> {
-  const { paymentTypeKey, catalogId, rounding, useCustomOrderNumber } = data
+  const { paymentTypeKey, catalogId, rounding, useCustomOrderNumber, requiredRemark } = data
   let newDoc: LinkedDeliveryDoc
 
   if (doc) {
@@ -816,7 +809,8 @@ async function createOrUpdateManualDeliveryDoc({
       paymentTypeKey,
       catalogId,
       rounding,
-      useCustomOrderNumber
+      useCustomOrderNumber,
+      requiredRemark
     })
   } else {
     newDoc = await remoteOrderApi.createDeliveryCompany({
@@ -824,7 +818,8 @@ async function createOrUpdateManualDeliveryDoc({
       paymentTypeKey,
       catalogId,
       rounding,
-      useCustomOrderNumber
+      useCustomOrderNumber,
+      requiredRemark
     })
   }
 
@@ -875,7 +870,7 @@ async function updateFeedmeExpressSetting() {
       currentRestaurant.value?._id ?? '',
       feedMeDoc.value
     )
-    if (!!currentRestaurant.value?.feedmeDelivery) {
+    if (currentRestaurant.value?.feedmeDelivery) {
       currentRestaurant.value.feedmeDelivery = restaurant.feedmeDelivery
     }
   })
@@ -886,7 +881,7 @@ async function updateInHouseSetting() {
   sideSheetIntegrated.value = false
   await restaurantStore.updateInhouseDelivery(currentRestaurant.value?._id ?? '', inHouseDoc.value)
   const res = (await readRestaurants())?.find((res) => res._id === currentRestaurant.value?._id)
-  if (!!res) {
+  if (res) {
     await changeRestaurant(res)
   }
   showSuccess(t('order.DeliverySettingUpdated'))
@@ -899,7 +894,7 @@ async function updateExternalDeliverySetting() {
     externalDoc.value
   )
   const res = (await readRestaurants())?.find((res) => res._id === currentRestaurant.value?._id)
-  if (!!res) {
+  if (res) {
     await changeRestaurant(res)
   }
   showSuccess(t('order.DeliverySettingUpdated'))

package/src/views/order-settings/delivery/components/ManualIntegratedDeliverySetting.vue

@@ -36,13 +36,15 @@ const data = ref<LocalDeliverySettingData>(
         active: !!props.modelValue,
         catalogId: null,
         rounding: props.modelValue.rounding ?? true,
+        requiredRemark: props.modelValue.requiredRemark ?? false,
         ...props.modelValue
       }
     : {
         ...props.company,
         catalogId: null,
         active: false,
-        rounding: true
+        rounding: true,
+        requiredRemark: false
       }
 )
 
@@ -54,6 +56,7 @@ watch(
         active: !!newVal,
         catalogId: null,
         rounding: newVal.rounding ?? true,
+        requiredRemark: newVal.requiredRemark ?? false,
         ...newVal
       }
     } else {
@@ -61,7 +64,8 @@ watch(
         ...props.company,
         catalogId: null,
         active: false,
-        rounding: true
+        rounding: true,
+        requiredRemark: false
       }
     }
   }
@@ -120,6 +124,13 @@ function updateCatalog(catalogId: string | null) {
     catalogId
   }))
 }
+
+function updateRequiredRemark(requiredRemark: boolean) {
+  emitChange((oldV) => ({
+    ...oldV,
+    requiredRemark
+  }))
+}
 </script>
 
 <template>
@@ -170,6 +181,14 @@ function updateCatalog(catalogId: string | null) {
           @update:model-value="updateCustomOrderNumber"
         />
       </div>
+      <div>
+        <FmCheckbox
+          :model-value="data.requiredRemark ?? false"
+          value=""
+          :label="t('order.requiredRemark')"
+          @update:model-value="updateRequiredRemark"
+        />
+      </div>
     </FmCard>
   </div>
 </template>