@feedmepos/mf-order-setting 0.0.22 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-order-setting",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "type": "module",
   "module": "./dist/app.js",
   "license": "UNLICENSED",

package/src/locales/en-US.json

@@ -60,7 +60,7 @@
         "customerItemRemarkSublabel": "Customer can attach remark to item",
         "customOfflinePayment": "Custom Offline Payment",
         "customOfflinePaymentHeader": "Custom offline payments",
-        "customServiceCharge": "Custom Servive Charge",
+        "customServiceCharge": "Custom Service Charge",
         "customTime": "Custom time",
         "day": "Day",
         "days": "days",
@@ -164,6 +164,7 @@
         "orderSetting": "Order Setting",
         "orderType": "Order Type",
         "padDigit": "Pad Digit",
+        "paid": "Paid",
         "payAtCounter": "Pay at Counter",
         "paymentMethod": "Payment Method",
         "paymentType": "Payment Type",
@@ -212,6 +213,7 @@
         "staticQRcode": "Static QR code",
         "staticQRcodeSublabel": "Customer can order with static QR code",
         "status": "Status",
+        "submitOrderInstruction": "Submit order instruction",
         "success": "SUCCESS",
         "sunday": "Sunday",
         "syncMenu": "Sync Menu",
@@ -248,7 +250,6 @@
         "updateSetting": "Update setting",
         "vendorBearPercentage": "Vendor bear percentage",
         "wednesday": "Wednesday",
-        "integratedDeliveryCompany": "Integrated delivery company",
         "externalDelivery": "External Delivery",
         "manageExternalDelivery": "Manage external delivery",
         "deliveryCatalog": "Delivery catalog",

package/src/locales/zh-CN.json

@@ -165,6 +165,7 @@
         "orderSetting": "订单设置",
         "orderType": "订单类型",
         "padDigit": "位数",
+        "paid": "已付款",
         "payAtCounter": "在柜台付款",
         "paymentMethod": "付款方式",
         "paymentType": "交易类型",
@@ -212,6 +213,7 @@
         "staticQRcode": "静态二维码",
         "staticQRcodeSublabel": "客户可以通过静态二维码下单",
         "status": "状态",
+        "submitOrderInstruction": "提交订单文本",
         "success": "成功",
         "sunday": "星期日",
         "syncMenu": "同步菜单",

package/src/modules/order-setting/kiosk/interface.ts

@@ -1,6 +1,12 @@
 import { FdoEPaymentMethod, F_ORDER_PAYMENT_TYPE } from "@entity";
 import { FdoOfflinePaymentMethod } from '@feedmepos/core/entity';
 
+export interface MfKioskSubmitOrderInstruction {
+    payAtCounter: string | null,
+    paid: string | null,
+}
+
+export type KioskSubmitOrderInstructionForm = MfKioskSubmitOrderInstruction;
 
 export interface MfDisplayStandSetting {
     enabled: boolean,
@@ -10,6 +16,7 @@ export interface MfDisplayStandSetting {
     },
     prefix: string | null,
     padDigit: number,
+    submitOrderInstruction: MfKioskSubmitOrderInstruction,
 }
 
 export interface DisplayStandSettingForm {
@@ -20,9 +27,17 @@ export interface DisplayStandSettingForm {
     },
     prefix: string | null,
     padDigit: number | null,
+    submitOrderInstruction: KioskSubmitOrderInstructionForm,
 }
+
 export interface MfKioskPickAtCounterSetting {
     enabled: boolean,
+    submitOrderInstruction: MfKioskSubmitOrderInstruction,
+}
+
+export interface PickAtCounterSettingForm {
+    enabled: boolean,
+    submitOrderInstruction: KioskSubmitOrderInstructionForm,
 }
 
 export interface MfKioskSequenceNumberSetting {
@@ -39,6 +54,7 @@ export interface MfKioskDineInSetting {
 
 export interface MfKioskTakeawaySetting {
     enabled: boolean,
+    submitOrderInstruction: MfKioskSubmitOrderInstruction,
 }
 
 export interface MfKioskPaymentSetting {

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

@@ -1,5 +1,5 @@
 import { OrderSettingsDto, OrderKioskDineIn, OrderKioskDineInSequenceDto, FdoOrderKioskDineInSequence, FdoEPaymentMethod } from "@entity";
-import type { MfKioskOrderSetting, MfKioskDineInSetting, MfDisplayStandSetting, KioskTakeawaySettingForm, MfKioskOrderSettingForm, MfKioskPaymentSetting } from '@/modules/order-setting/kiosk/interface';
+import type { MfKioskOrderSetting, MfKioskDineInSetting, MfDisplayStandSetting, KioskTakeawaySettingForm, MfKioskOrderSettingForm, MfKioskPaymentSetting, MfKioskSubmitOrderInstruction } from '@/modules/order-setting/kiosk/interface';
 import type { MfOrderSetting } from "@/modules/order-setting/interface";
 import type { OrderKioskSettings, OrderKioskPaymentSetting } from "@entity";
 
@@ -11,10 +11,18 @@ export const defaultDisplayStand: MfDisplayStandSetting = {
         min: 1,
         max: 10,
     },
+    submitOrderInstruction: {
+        payAtCounter: null,
+        paid: null,
+    },
 }
 
 export const defaultPickUp: KioskTakeawaySettingForm = {
     enabled: false,
+    submitOrderInstruction: {
+        payAtCounter: null,
+        paid: null,
+    },
 }
 
 export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
@@ -26,6 +34,10 @@ export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
     },
     takeaway: {
         enabled: false,
+        submitOrderInstruction: {
+            payAtCounter: null,
+            paid: null,
+        },
     },
     paymentSetting: {
         paymentTypes: [],
@@ -46,6 +58,11 @@ export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
     }
 }
 
+export const defaultSubmitOrderInstruction: MfKioskSubmitOrderInstruction = {
+    payAtCounter: null,
+    paid: null,
+}
+
 const convertOrderSettingDto = (dto: OrderSettingsDto): MfOrderSetting => {
     return {
         kiosk: toKiosk(dto.kioskSettings, dto.sequenceSettings?.kioskDineIn),
@@ -59,7 +76,11 @@ const toKiosk = (kioskOrderSettings: OrderKioskSettings, kioskDineInSeq?: OrderK
             prefix: '#K',
         }, kioskOrderSettings.dineIn ?? undefined),
         takeaway: {
-            enabled: kioskOrderSettings?.canTakeaway ?? false
+            enabled: kioskOrderSettings?.canTakeaway ?? false,
+            submitOrderInstruction: kioskOrderSettings?.takeaway?.submitOrderInstruction ? {
+                payAtCounter: kioskOrderSettings.takeaway.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
+                paid: kioskOrderSettings.takeaway.submitOrderInstruction?.paid?.['en'] ?? null,
+            } : defaultSubmitOrderInstruction,
         },
         paymentSetting: {
             paymentTypes: kioskOrderSettings?.paymentSetting?.paymentTypes ?? [],
@@ -85,12 +106,22 @@ const toKioskDineInSetting = (kioskDineInSeq: OrderKioskDineInSequenceDto, kiosk
     return {
         enabled: !!kioskDineInSetting,
         sequenceNumber: kioskDineInSeq,
-        pickUp: kioskDineInSetting?.pickUp ?? defaultPickUp,
+        pickUp: kioskDineInSetting?.pickUp ? {
+            ...kioskDineInSetting.pickUp,
+            submitOrderInstruction: kioskDineInSetting.pickUp.submitOrderInstruction ? {
+                payAtCounter: kioskDineInSetting.pickUp.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
+                paid: kioskDineInSetting.pickUp.submitOrderInstruction?.paid?.['en'] ?? null,
+            } : defaultSubmitOrderInstruction,
+        } : defaultPickUp,
         displayStand: kioskDineInSetting?.displayStand ? {
             enabled: kioskDineInSetting.displayStand.enabled,
             standSlotRange: kioskDineInSetting.displayStand.standSlotRange,
             prefix: kioskDineInSetting.displayStand.prefix,
             padDigit: kioskDineInSetting.displayStand.padDigit,
+            submitOrderInstruction: kioskDineInSetting.displayStand.submitOrderInstruction ? {
+                payAtCounter: kioskDineInSetting.displayStand.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
+                paid: kioskDineInSetting.displayStand.submitOrderInstruction?.paid?.['en'] ?? null,
+            } : defaultSubmitOrderInstruction,
         } : defaultDisplayStand
     }
 }
@@ -98,10 +129,30 @@ const toOrderKioskSettingsDto = (kioskSetting: MfKioskOrderSetting): {
     kioskSettings: OrderKioskSettings,
     kioskDineIn?: OrderKioskDineInSequenceDto
 } => {
-    const createDineInSettings = (dineInSetting: MfKioskDineInSetting) => ({
+    const createDineInSettings = (dineInSetting: MfKioskDineInSetting): OrderKioskDineIn => ({
         requiredSlot: !!dineInSetting.displayStand,
-        displayStand: dineInSetting.displayStand,
-        pickUp: dineInSetting.pickUp
+        displayStand: {
+            ...dineInSetting.displayStand,
+            submitOrderInstruction: {
+                payAtCounter: dineInSetting.displayStand.submitOrderInstruction?.payAtCounter ? {
+                    en: dineInSetting.displayStand.submitOrderInstruction.payAtCounter,
+                } : null,
+                paid: dineInSetting.displayStand.submitOrderInstruction?.paid ? {
+                    en: dineInSetting.displayStand.submitOrderInstruction.paid,
+                } : null,
+            }
+        },
+        pickUp: {
+            ...dineInSetting.pickUp,
+            submitOrderInstruction: {
+                payAtCounter: dineInSetting.pickUp.submitOrderInstruction?.payAtCounter ? {
+                    en: dineInSetting.pickUp.submitOrderInstruction.payAtCounter,
+                } : null,
+                paid: dineInSetting.pickUp.submitOrderInstruction?.paid ? {
+                    en: dineInSetting.pickUp.submitOrderInstruction.paid,
+                } : null,
+            }
+        }
     })
 
     const createKioskSettings = (dineIn?: OrderKioskDineIn) => ({
@@ -111,7 +162,7 @@ const toOrderKioskSettingsDto = (kioskSetting: MfKioskOrderSetting): {
         paymentSetting: createPaymentSettings(kioskSetting.paymentSetting)
     })
 
-    const createPaymentSettings = (paymentSetting: MfKioskPaymentSetting) : OrderKioskPaymentSetting | undefined => {
+    const createPaymentSettings = (paymentSetting: MfKioskPaymentSetting): OrderKioskPaymentSetting | undefined => {
         return {
             paymentTypes: paymentSetting.paymentTypes,
             offlinePaymentTypes: paymentSetting.offlinePaymentTypes,

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

@@ -10,7 +10,7 @@
       <div v-show="v.enabled" class="flex flex-col gap-16">
         <KioskPickAtCounterSection
           v-if="v.pickUp"
-          :enabled="v.pickUp.enabled"
+          :form="v.pickUp"
           @update-pick-up="updatePickUp"
         />
         <KioskDisplayStandSection
@@ -29,6 +29,7 @@ import type {
 } from '@/modules/order-setting/kiosk/interface'
 import KioskDisplayStandSection from './KioskDisplayStandSection.vue'
 import KioskPickAtCounterSection from './KioskPickAtCounterSection.vue'
+import type { PickAtCounterSettingForm } from '@/modules/order-setting/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
@@ -41,12 +42,10 @@ interface Emits {
   (e: 'updateDineIn', setting: KioskDineInSettingForm): void
 }
 
-function updatePickUp(v: boolean) {
+function updatePickUp(form: PickAtCounterSettingForm) {
   emits('updateDineIn', {
     ...props.v,
-    pickUp: {
-      enabled: v
-    }
+    pickUp: form,
   })
 }
 

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

@@ -55,6 +55,12 @@
         />
       </div>
     </div>
+
+    <kiosk-instruction-section
+      v-show="displayStand.enabled"
+      :fields="instructionFields"
+      @update:field="updateInstruction"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -62,6 +68,7 @@ import { computed } from 'vue'
 import { NumberUtil } from '@/utils/number'
 import type { DisplayStandSettingForm } from '@/modules/order-setting/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
+import KioskInstructionSection from './KioskInstructionSection.vue'
 
 const { t } = useI18n()
 
@@ -76,6 +83,35 @@ interface Emits {
 const props = defineProps<Props>()
 const emits = defineEmits<Emits>()
 
+const instructionFields = computed(() => {
+  const instructions = props.displayStand.submitOrderInstruction
+  return [
+    {
+      id: 'payAtCounter',
+      value: instructions.payAtCounter ?? undefined,
+      title: t('order.payAtCounter'),
+      defaultValue: 'Collect your transaction slip below and present it to the cashier'
+    },
+    {
+      id: 'paid',
+      value: instructions.paid ?? undefined,
+      title: t('order.paid'),
+      defaultValue:
+        "Please collect your receipt and we'll bring your food to your table once it's ready."
+    }
+  ]
+})
+
+function updateInstruction(id: string, value: string) {
+  emits('updateDisplayStand', {
+    ...props.displayStand,
+    submitOrderInstruction: {
+      ...props.displayStand.submitOrderInstruction,
+      [id]: value
+    }
+  })
+}
+
 const nonNegativeRule = (val: any) => {
   if (val < 0) {
     return t('order.nonNegativeRule')

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

@@ -0,0 +1,40 @@
+<template>
+  <div 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>
+    <div class="flex flex-col gap-10" v-for="field in props.fields" :key="field.title">
+      <FmTextField
+        :model-value="field.value"
+        :label="field.title"
+        :placeholder="field.defaultValue"
+        @update:model-value="(v: string) => updateField(field.id, v)"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from '@feedmepos/mf-common'
+const { t } = useI18n()
+
+interface ITextField {
+  id: string
+  value: string | undefined
+  title: string
+  defaultValue: string
+}
+
+interface Props {
+  fields: ITextField[]
+}
+
+const props = defineProps<Props>()
+
+interface Emits {
+  (e: 'update:field', id: string, value: string): void
+}
+
+const emit = defineEmits<Emits>()
+
+function updateField(id: string, value: string) {
+  emit('update:field', id, value)
+}
+</script>

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

@@ -54,7 +54,7 @@ const allowOfflinePayment = computed(() => {
 const parentCheckbox = ref(false)
 const paymentCheckboxVal = ref<string[]>([])
 const cardPaymentRadioVal = ref<string>()
-const eWalletPaymentRadioVal = ref<string>()
+const eWalletPaymentCheckboxVal = ref<string[]>([])
 const useCard = ref(false)
 const useEwallet = ref(false)
 
@@ -79,10 +79,12 @@ const initializeCheckboxes = () => {
     }
 
     if (props.ePaymentTypes.eWallet.qrPay) {
-      eWalletPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.QRPAY
+      eWalletPaymentCheckboxVal.value.push(F_ORDER_E_PAYMENT_TYPE.enum.QRPAY)
       useEwallet.value = true
-    } else if (props.ePaymentTypes.eWallet.scanPay) {
-      eWalletPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY
+    }
+
+    if (props.ePaymentTypes.eWallet.scanPay) {
+      eWalletPaymentCheckboxVal.value.push(F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY)
       useEwallet.value = true
     }
   }
@@ -159,12 +161,12 @@ const handleEPaymentCardUpdate = (ev: string) => {
       ePaymentObj.card.nfc = true
     }
 
-    if (eWalletPaymentRadioVal.value) {
-      if (eWalletPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.QRPAY) {
+    if (eWalletPaymentCheckboxVal.value.length > 0) {
+      if (eWalletPaymentCheckboxVal.value.includes(F_ORDER_E_PAYMENT_TYPE.enum.QRPAY)) {
         ePaymentObj.eWallet.qrPay = true
       }
 
-      if (eWalletPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY) {
+      if (eWalletPaymentCheckboxVal.value.includes(F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY)) {
         ePaymentObj.eWallet.scanPay = true
       }
     }
@@ -196,11 +198,11 @@ const handleEPaymentEWalletUpdate = () => {
       }
     }
 
-    if (eWalletPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.QRPAY) {
+    if (eWalletPaymentCheckboxVal.value.includes(F_ORDER_E_PAYMENT_TYPE.enum.QRPAY)) {
       ePaymentObj.eWallet.qrPay = true
     }
 
-    if (eWalletPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY) {
+    if (eWalletPaymentCheckboxVal.value.includes(F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY)) {
       ePaymentObj.eWallet.scanPay = true
     }
   }
@@ -217,9 +219,12 @@ const updateCardSwitch = (enabled: boolean) => {
 }
 
 const updateECardSwitch = (enabled: boolean) => {
-  eWalletPaymentRadioVal.value = ''
+  eWalletPaymentCheckboxVal.value = []
   if (enabled) {
-    eWalletPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.QRPAY
+    eWalletPaymentCheckboxVal.value = [
+      F_ORDER_E_PAYMENT_TYPE.enum.QRPAY,
+      F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY
+    ]
   }
   handleEPaymentEWalletUpdate()
 }
@@ -324,14 +329,20 @@ onMounted(() => {
         />
         <br />
         <div v-show="useEwallet" class="ml-7">
-          <FmRadioGroup
-            v-model="eWalletPaymentRadioVal"
-            @update:model-value="handleEPaymentEWalletUpdate"
-            inline
-          >
-            <FmRadio :label="t('order.qrPay')" :value="F_ORDER_E_PAYMENT_TYPE.enum.QRPAY" />
-            <FmRadio :label="t('order.scanPay')" :value="F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY" />
-          </FmRadioGroup>
+          <div class="flex flex-row gap-9">
+            <FmCheckbox
+              v-model="eWalletPaymentCheckboxVal"
+              :label="t('order.qrPay')"
+              :value="F_ORDER_E_PAYMENT_TYPE.enum.QRPAY"
+              @update:model-value="handleEPaymentEWalletUpdate"
+            />
+            <FmCheckbox
+              v-model="eWalletPaymentCheckboxVal"
+              :label="t('order.scanPay')"
+              :value="F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY"
+              @update:model-value="handleEPaymentEWalletUpdate"
+            />
+          </div>
         </div>
       </FmCardSection>
     </FmCard>

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

@@ -1,30 +1,68 @@
 <template>
   <div>
     <FmSwitch
-      :model-value="enabled"
+      :model-value="form.enabled"
       :label="t('order.pickAtCounter')"
       label-placement="right"
-      @update:model-value="updatePickUp"
+      @update:model-value="updatePickUpEnabled"
+    />
+    <kiosk-instruction-section
+      v-show="form.enabled"
+      :fields="instructionFields"
+      @update:field="updatePickUpInstruction"
     />
   </div>
 </template>
 <script lang="ts" setup>
+import type { PickAtCounterSettingForm } from '@/modules/order-setting/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
+import { computed } from 'vue'
+import KioskInstructionSection from './KioskInstructionSection.vue'
 
 const { t } = useI18n()
 
 interface Props {
-  enabled: boolean
+  form: PickAtCounterSettingForm
 }
 
 interface Emits {
-  (e: 'update-pick-up', enabled: boolean): void
+  (e: 'update-pick-up', form: PickAtCounterSettingForm): void
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 const emits = defineEmits<Emits>()
 
-function updatePickUp(enabled: boolean) {
-  emits('update-pick-up', enabled)
+const instructionFields = computed(() => {
+  return [
+    {
+      id: 'payAtCounter',
+      value: props.form.submitOrderInstruction.payAtCounter ?? undefined,
+      title: t('order.payAtCounter'),
+      defaultValue: 'Collect your transaction slip below and present it to the cashier'
+    },
+    {
+      id: 'paid',
+      value: props.form.submitOrderInstruction.paid ?? undefined,
+      title: t('order.paid'),
+      defaultValue: "Please wait as we prepare your food. We'll call your number when it's ready."
+    }
+  ]
+})
+
+function updatePickUpEnabled(enabled: boolean) {
+  emits('update-pick-up', {
+    ...props.form,
+    enabled
+  })
+}
+
+function updatePickUpInstruction(id: string, instruction: string) {
+  emits('update-pick-up', {
+    ...props.form,
+    submitOrderInstruction: {
+      ...props.form.submitOrderInstruction,
+      [id]: instruction
+    }
+  })
 }
 </script>

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

@@ -106,7 +106,11 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
             min: f.dineIn.displayStand.standSlotRange.min ?? 0,
             max: f.dineIn.displayStand.standSlotRange.max ?? 10
           },
-          prefix: f.dineIn.displayStand.prefix ?? ''
+          prefix: f.dineIn.displayStand.prefix ?? '',
+          submitOrderInstruction: {
+            payAtCounter: f.dineIn.displayStand.submitOrderInstruction.payAtCounter ?? null,
+            paid: f.dineIn.displayStand.submitOrderInstruction.paid ?? null
+          }
         }
       }
     }
@@ -134,7 +138,11 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
               min: displayStand.standSlotRange.min,
               max: displayStand.standSlotRange.max
             },
-            prefix: displayStand.prefix ?? ''
+            prefix: displayStand.prefix ?? '',
+            submitOrderInstruction: {
+              payAtCounter: displayStand.submitOrderInstruction.payAtCounter ?? null,
+              paid: displayStand.submitOrderInstruction.paid ?? null
+            }
           }
         }
       }
@@ -154,7 +162,11 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
           min: f.dineIn.displayStand.standSlotRange.min ?? 0,
           max: f.dineIn.displayStand.standSlotRange.max ?? 10
         },
-        prefix: f.dineIn.displayStand.prefix ?? ''
+        prefix: f.dineIn.displayStand.prefix ?? '',
+        submitOrderInstruction: {
+          payAtCounter: f.dineIn.displayStand.submitOrderInstruction.payAtCounter ?? null,
+          paid: f.dineIn.displayStand.submitOrderInstruction.paid ?? null
+        }
       }
     }
   }

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

@@ -4,14 +4,21 @@
       :model-value="v.enabled"
       :label="t('order.takeaway')"
       label-placement="right"
-      @update:model-value="updateTakeawaySetting"
+      @update:model-value="updateTakeawaySettingEnabled"
       class="mb-5"
     />
+    <kiosk-instruction-section
+      v-show="v.enabled"
+      :fields="instructionFields"
+      @update:field="updateTakeawaySettingInstructions"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import type { KioskTakeawaySettingForm } from '@/modules/order-setting/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
+import { computed } from 'vue'
+import KioskInstructionSection from './KioskInstructionSection.vue'
 
 const { t } = useI18n()
 
@@ -23,10 +30,37 @@ interface Emits {
   (e: 'updateTakeaway', setting: KioskTakeawaySettingForm): void
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 const emits = defineEmits<Emits>()
 
-function updateTakeawaySetting(v: boolean) {
-  emits('updateTakeaway', { enabled: v })
+const instructionFields = computed(() => {
+  return [
+    {
+      id: 'payAtCounter',
+      value: props.v.submitOrderInstruction.payAtCounter ?? undefined,
+      title: t('order.payAtCounter'),
+      defaultValue: 'Collect your transaction slip below and present it to the cashier'
+    },
+    {
+      id: 'paid',
+      value: props.v.submitOrderInstruction.paid ?? undefined,
+      title: t('order.paid'),
+      defaultValue: "Please wait as we prepare your food. We'll call your number when it's ready."
+    }
+  ]
+})
+
+function updateTakeawaySettingEnabled(v: boolean) {
+  emits('updateTakeaway', { ...props.v, enabled: v })
+}
+
+function updateTakeawaySettingInstructions(id: string, instructions: string) {
+  emits('updateTakeaway', {
+    ...props.v,
+    submitOrderInstruction: {
+      ...props.v.submitOrderInstruction,
+      [id]: instructions
+    }
+  })
 }
 </script>

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

@@ -479,17 +479,12 @@ watch(
           class="ml-auto"
         />
       </div>
-      <div class="fm-corner-radius-lg flex flex-col">
-        <div
-          v-for="(item, index) in filteredTable"
-          :key="index"
-          class="flex flex-col pl-6"
-          v-if="showTable"
-        >
+      <div class="fm-corner-radius-lg flex flex-col" v-if="showTable">
+        <div v-for="(item, index) in filteredTable" :key="index" class="flex flex-col pl-6">
           <FmCheckbox
+            :value="item.name"
             :model-value="selectedTables[item.name].isSelected"
             :label="item.name"
-            value=""
             @update:model-value="(v: boolean) => handleChildUpdateTable(v, item.name)"
           />
         </div>