@feedmepos/mf-order-setting 0.0.38 → 0.0.44

package/dist/package/entity/order-setting/sms/sms.dto.d.ts

@@ -12,7 +12,7 @@ export declare const OrderSmsMessageSettingDto: z.ZodObject<{
 export declare const OrderSmsSettingDto: z.ZodObject<{
     enable: z.ZodBoolean;
     action: z.ZodEnum<["ACCEPT", "SERVE"]>;
-    type: z.ZodUnion<[z.ZodEnum<["DINE_IN", "PICKUP", "DELIVERY"]>, z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY"]>]>;
+    type: z.ZodUnion<[z.ZodEnum<["DINE_IN", "PICKUP", "DELIVERY"]>, z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY", "KIOSK", "COUNTER"]>]>;
     message: z.ZodObject<{
         raw: z.ZodString;
         keys: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodEnum<["Bill Receipt Number", "Bill Receipt Total Amount (Net)", "Order Type", "Order Slot", "Order Datetime", "Order Delivery Type", "Restaurant Name", "Restaurant Email", "Restaurant Address", "Restaurant Contact Number"]>>>;
@@ -28,7 +28,7 @@ export declare const OrderSmsSettingDto: z.ZodObject<{
         keys: Record<string, "Bill Receipt Number" | "Bill Receipt Total Amount (Net)" | "Order Type" | "Order Slot" | "Order Datetime" | "Order Delivery Type" | "Restaurant Name" | "Restaurant Email" | "Restaurant Address" | "Restaurant Contact Number">;
         raw: string;
     };
-    type: "QUEUE" | "RESERVATION" | "QR" | "TAKEAWAY" | "DINE_IN" | "PICKUP" | "DELIVERY";
+    type: "QUEUE" | "RESERVATION" | "QR" | "TAKEAWAY" | "KIOSK" | "COUNTER" | "DINE_IN" | "PICKUP" | "DELIVERY";
     enable: boolean;
     action: "ACCEPT" | "SERVE";
 }, {
@@ -36,7 +36,7 @@ export declare const OrderSmsSettingDto: z.ZodObject<{
         keys?: Record<string, "Bill Receipt Number" | "Bill Receipt Total Amount (Net)" | "Order Type" | "Order Slot" | "Order Datetime" | "Order Delivery Type" | "Restaurant Name" | "Restaurant Email" | "Restaurant Address" | "Restaurant Contact Number"> | undefined;
         raw: string;
     };
-    type: "QUEUE" | "RESERVATION" | "QR" | "TAKEAWAY" | "DINE_IN" | "PICKUP" | "DELIVERY";
+    type: "QUEUE" | "RESERVATION" | "QR" | "TAKEAWAY" | "KIOSK" | "COUNTER" | "DINE_IN" | "PICKUP" | "DELIVERY";
     enable: boolean;
     action: "ACCEPT" | "SERVE";
 }>;

package/dist/package/entity/queue/queue.dto.d.ts

@@ -7119,7 +7119,7 @@ export declare const RestaurantQueueDto: z.ZodObject<{
             type: z.ZodLiteral<"DINE_IN">;
             pax: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
             sub: z.ZodDiscriminatedUnion<"type", z.Primitive, z.ZodObject<z.extendShape<{
-                type: z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY"]>;
+                type: z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY", "KIOSK", "COUNTER"]>;
             }, {
                 type: z.ZodLiteral<"QR">;
                 session: z.ZodNullable<z.ZodOptional<z.ZodString>>;
@@ -7133,7 +7133,7 @@ export declare const RestaurantQueueDto: z.ZodObject<{
                 slot: string;
                 type: "QR";
             }> | z.ZodObject<z.extendShape<{
-                type: z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY"]>;
+                type: z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY", "KIOSK", "COUNTER"]>;
             }, {
                 type: z.ZodLiteral<"QUEUE">;
                 queueId: z.ZodString;
@@ -7147,7 +7147,7 @@ export declare const RestaurantQueueDto: z.ZodObject<{
                 type: "QUEUE";
                 queueId: string;
             }> | z.ZodObject<z.extendShape<{
-                type: z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY"]>;
+                type: z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY", "KIOSK", "COUNTER"]>;
             }, {
                 type: z.ZodLiteral<"RESERVATION">;
                 reservationId: z.ZodString;
@@ -7161,7 +7161,7 @@ export declare const RestaurantQueueDto: z.ZodObject<{
                 type: "RESERVATION";
                 reservationId: string;
             }> | z.ZodObject<z.extendShape<{
-                type: z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY"]>;
+                type: z.ZodEnum<["QR", "QUEUE", "RESERVATION", "TAKEAWAY", "KIOSK", "COUNTER"]>;
             }, {
                 type: z.ZodLiteral<"TAKEAWAY">;
                 slot: z.ZodString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-order-setting",
-  "version": "0.0.38",
+  "version": "0.0.44",
   "type": "module",
   "module": "./dist/app.js",
   "license": "UNLICENSED",
@@ -26,7 +26,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@feedmepos/core": "^2.14.40",
+    "@feedmepos/core": "^2.14.44",
     "@feedmepos/menu": "^1.7.6",
     "@feedmepos/mf-common": "1.20.0-beta.2",
     "@feedmepos/ordering": "^0.0.3",

package/src/locales/en-US.json

@@ -65,6 +65,7 @@
         "customOfflinePaymentHeader": "Custom offline payments",
         "customOrderNumber": "Custom order number",
         "customServiceCharge": "Custom Service Charge",
+        "requiredRemark": "Required remark",
         "customTime": "Custom time",
         "day": "Day",
         "days": "days",
@@ -120,7 +121,7 @@
         "generalInfo": "General Info",
         "generalSetting": "General setting",
         "greaterThanMinRule": "Max should be exceed to Min",
-        "hideNotAvailableMenuItem": "Hide not available menu item",
+        "showNotAvailableMenuItem": "Show not available menu item",
         "ignoreDiscount": "Ignore Discount",
         "ignoreStock": "Ignore stock",
         "ignoreStockSublabel": "Customer can order even product out of stocks",

package/src/locales/th-TH.json

@@ -65,6 +65,7 @@
         "customOfflinePaymentHeader": "การชำระเงินออฟไลน์แบบกำหนดเอง",
         "customOrderNumber": "หมายเลขคำสั่งซื้อแบบกำหนดเอง",
         "customServiceCharge": "ค่าบริการแบบกำหนดเอง",
+        "requiredRemark": "หมายเหตุที่จำเป็น",
         "customTime": "เวลาแบบกำหนดเอง",
         "day": "วัน",
         "days": "วัน",
@@ -118,7 +119,7 @@
         "generalInfo": "การตั้งค่าทั่วไป",
         "generalSetting": "ค่าสูงสุดควรเกินค่าต่ำสุด",
         "greaterThanMinRule": "ซ่อนรายการเมนูที่ไม่พร้อมใช้งาน",
-        "hideNotAvailableMenuItem": "ละเว้นส่วนลด",
+        "showNotAvailableMenuItem": "แสดงรายการเมนูที่ไม่พร้อมใช้งาน",
         "ignoreDiscount": "ละเว้นสต็อก",
         "ignoreStock": "ลูกค้าสามารถสั่งซื้อได้แม้ว่าสินค้าจะหมดสต็อกแล้ว",
         "ignoreStockSublabel": "ไม่ใช้งาน",

package/src/locales/zh-CN.json

@@ -66,6 +66,7 @@
         "customOfflinePaymentHeader": "自定义线下付款方式",
         "customOrderNumber": "自定义订单号码",
         "customServiceCharge": "自定义服务收费",
+        "requiredRemark": "必填备注",
         "customTime": "自定义时间",
         "day": "天",
         "days": "天",
@@ -122,7 +123,7 @@
         "generalInfo": "通用信息",
         "generalSetting": "通用设置",
         "greaterThanMinRule": "最大值应大于等于最小值",
-        "hideNotAvailableMenuItem": "隐藏无可用菜单项目",
+        "showNotAvailableMenuItem": "显示无可用菜单项目",
         "ignoreDiscount": "不适用折扣",
         "ignoreStock": "忽略库存",
         "ignoreStockSublabel": "客户依然可以下单，即使商品缺货",

package/src/views/kiosk/KioskView.vue

@@ -63,7 +63,7 @@ import {
   type ISelectItem,
   useBreakpoints
 } from '@feedmepos/ui-library'
-import { ref, computed, defineAsyncComponent, watch } from 'vue'
+import { ref, computed, defineAsyncComponent, watch, onMounted } from 'vue'
 import { useKioskStore } from '@/stores/kiosk'
 import type { MfKioskDevice } from '@/modules/kiosk/interface'
 import KioskOtpDialog from '@/views/kiosk/devices/KioskOtpDialog.vue'
@@ -118,13 +118,16 @@ function openKioskSummaryDialog() {
 async function selectRestaurant(v: string) {
   const restaurant = restaurants.value.find((r) => r._id == v)
   await changeRestaurant(restaurant)
-  await OrderSettingStore.getSetting()
-  await KioskStore.getDevices()
+  await loadRestaurantData()
   currentSelect.value = v
-
   currentRestaurantId.value = v
 }
 
+async function loadRestaurantData() {
+  await OrderSettingStore.getSetting()
+  await KioskStore.getDevices()
+}
+
 const menuItems = computed<FmTabProps[]>(() => [
   {
     label: t('order.deviceBinding'),
@@ -167,9 +170,18 @@ async function updateKioskOrderSetting(form: MfKioskOrderSetting) {
   }
 }
 
+// Load data on mount if restaurant is already selected
+onMounted(async () => {
+  if (currentRestaurant.value?._id) {
+    currentRestaurantId.value = currentRestaurant.value._id
+    await loadRestaurantData()
+  }
+})
+
 watch(
   () => restaurants.value.length,
   async (_) => {
+    // Only auto-select if no restaurant is currently selected
     if (currentSelect.value === undefined && restaurants.value.length > 0) {
       await selectRestaurant(restaurants.value[0]._id)
     }

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

@@ -21,8 +21,8 @@ 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, useCoreStore } from '@feedmepos/mf-common'
@@ -37,9 +37,9 @@ type OrderSettingMenuItemValue =
   | 'delivery'
   | 'pickup'
   | 'dinein'
-  | 'servicecharge'
+  // | 'servicecharge'
   | 'sms'
-  | 'discountRule'
+  // | 'discountRule'
   | 'general'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
@@ -47,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' }
 ])
@@ -63,10 +63,10 @@ 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
   }