@feedmepos/mf-order-setting 0.0.21-beta.3 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-order-setting",
-  "version": "0.0.21-beta.3",
+  "version": "0.0.23",
   "type": "module",
   "module": "./dist/app.js",
   "license": "UNLICENSED",
@@ -25,14 +25,15 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@feedmepos/core": "^2.12.14",
-    "@feedmepos/menu": "^1.2.4",
+    "@feedmepos/core": "^2.14.0",
+    "@feedmepos/menu": "^1.5.6",
     "@feedmepos/mf-common": "^1.11.6",
     "@feedmepos/ordering": "^0.0.3",
     "@feedmepos/ui-library": "^1.2.27",
     "@types/googlemaps": "^3.43.3",
     "axios": "^1.7.2",
     "change-case": "^5.4.4",
+    "zod-openapi": "^4.1.0",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.12",
     "firebase": "^10.13.1",

package/src/api/remoteOrder/index.ts

@@ -2,9 +2,9 @@ import type { AxiosInstance } from 'axios';
 import { baseClientInstance, getData, SvcConfig } from '..';
 import type { DeliveryCompany, LinkedDeliveryDoc } from '../../views/order-settings/delivery/delivery';
 import { FdoFoodpandaSettings, FdoLinkedDelivery, FdoRestaurant, FdoRestaurantFeedmeDelivery, FdoRestaurantInHouseDelivery, FdoShopeeFoodOrder } from '@feedmepos/core/entity';
-import type { FdoFoodpandaOrderOutput, FdoGrabfoodOrderOutput, FdoGrabfoodSettings, FdoShopeeFoodOrderOutput, FdoShopeeFoodSettings, FdtoGetOrderReq } from '@entity';
+import type { FdoExternalSetting, FdoFoodpandaOrderOutput, FdoGrabfoodOrderOutput, FdoGrabfoodSettings, FdoShopeeFoodOrderOutput, FdoShopeeFoodSettings, FdtoGetOrderReq } from '@entity';
 
-type DeliveryCompanyUrl = 'foodpanda' | 'grabfood' | 'shopeefood'
+type DeliveryCompanyUrl = 'foodpanda' | 'grabfood' | 'shopeefood' | 'external'
 
 const deliveryClientInstance = (
   deliveryCompany: DeliveryCompanyUrl
@@ -110,6 +110,17 @@ export const remoteOrderApi = {
     async syncShopeefoodMenu(storeId: string): Promise<FdoShopeeFoodSettings> {
       return getData(await deliveryClientInstance('shopeefood').get(`/menu-sync/${storeId}`));
     },
+    async readExternal(restaurantId: string): Promise<FdoExternalSetting | null> {
+      return getData(await deliveryClientInstance('external').get(`/setting/${restaurantId}`))
+    },
+    async updateExternal(restaurantId: string, dto: FdoExternalSetting): Promise<FdoExternalSetting> {
+      return getData(await deliveryClientInstance('external').put(`setting/${restaurantId}`, {
+        ...dto
+      }))
+    },
+    async syncExternalMenu(restaurantId: string): Promise<FdoExternalSetting> {
+      return getData(await deliveryClientInstance('external').get(`/menu-sync/${restaurantId}`));
+    },
     async flowTestOrder(
       restaurantId: string,
       platform: DeliveryCompanyUrl

package/src/helpers/menu.ts

@@ -11,7 +11,7 @@ export interface Option {
   value: string | null;
 }
 
-type Item = Omit<FdoMenuV4Item, 'variant'> & {
+export type Item = Omit<FdoMenuV4Item, 'variant'> & {
   codeName: string;
   variant?: Omit<FdoItemVariant, 'variantCombinations'> & {
     variantCombinations: (VariantItem & { codeName: string })[]
@@ -76,7 +76,7 @@ export class ItemTax {
     return {
       systemCode: [...new Set(countryFlattenTaxes.map((tax) => tax.systemCode))].join('/'),
       countryTaxOptions: countryFlattenTaxes.map((tax) => ({
-        label: `${tax.name} (${   Dinero.fromFdoDecimal({
+        label: `${tax.name} (${Dinero.fromFdoDecimal({
           decimal: tax.rate
         }).multiply(100).toFormat(false)}%)`,
         value: ItemTax.encodeTax(tax),

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",
@@ -194,6 +195,7 @@
         "scanPay": "Scan Pay",
         "search": "Search",
         "searchRestaurant": "Search restaurants",
+        "selectAllItemsIncludeCustomItem": "All (Including custom item)",
         "selectItem": "Select item",
         "selectRestaurant": "Select Restaurant",
         "selectServiceChargeType": "Select service charge type",
@@ -211,9 +213,11 @@
         "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",
+        "syncMenuSuccess": "Sync menu successfully",
         "table": "Table",
         "tableSelected": "table(s) selected",
         "tableService": "Table Service",
@@ -245,6 +249,13 @@
         "updatePickupSetting": "Update Pickup Setting",
         "updateSetting": "Update setting",
         "vendorBearPercentage": "Vendor bear percentage",
-        "wednesday": "Wednesday"
+        "wednesday": "Wednesday",
+        "externalDelivery": "External Delivery",
+        "manageExternalDelivery": "Manage external delivery",
+        "deliveryCatalog": "Delivery catalog",
+        "pickupCatalog": "Pickup catalog",
+        "DeliverySettingUpdated": "Delivery setting updated.",
+        "selectPlatform": "Select Platform",
+        "platform": "Platform"
     }
 }

package/src/locales/zh-CN.json

@@ -165,6 +165,7 @@
         "orderSetting": "订单设置",
         "orderType": "订单类型",
         "padDigit": "位数",
+        "paid": "已付款",
         "payAtCounter": "在柜台付款",
         "paymentMethod": "付款方式",
         "paymentType": "交易类型",
@@ -194,6 +195,7 @@
         "scanPay": "扫码支付",
         "search": "搜索",
         "searchRestaurant": "搜索餐厅",
+        "selectAllItemsIncludeCustomItem": "全部 （包括自定义商品）",
         "selectItem": "请选择",
         "selectRestaurant": "选择餐厅",
         "selectServiceChargeType": "选择服务费类型",
@@ -211,9 +213,11 @@
         "staticQRcode": "静态二维码",
         "staticQRcodeSublabel": "客户可以通过静态二维码下单",
         "status": "状态",
+        "submitOrderInstruction": "提交订单文本",
         "success": "成功",
         "sunday": "星期日",
         "syncMenu": "同步菜单",
+        "syncMenuSuccess": "同步菜单成功",
         "table": "餐桌",
         "tableSelected": "已选择餐桌",
         "tableService": "餐桌服务",
@@ -245,6 +249,13 @@
         "updatePickupSetting": "更新自取设置",
         "updateSetting": "更新设置",
         "vendorBearPercentage": "供应商承担百分比",
-        "wednesday": "星期三"
+        "wednesday": "星期三",
+        "externalDelivery": "External 配送",
+        "manageExternalDelivery": "管理外部配送",
+        "deliveryCatalog": "配送目录",
+        "pickupCatalog": "自取目录",
+        "DeliverySettingUpdated": "配送设置已更新",
+        "selectPlatform": "选择平台",
+        "platform": "平台"
     }
 }

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/stores/restaurant/index.ts

@@ -14,7 +14,7 @@ import {
   type FdoProfile,
   type FdoRestaurant
 } from '@feedmepos/core/entity'
-import { FdoGrabfoodSettings } from '@entity'
+import { FdoExternalSetting, FdoGrabfoodSettings } from '@entity'
 import { FeatureFlag, Pos } from '@feedmepos/core'
 import { SvcConfig } from '@/api'
 import { remoteOrderApi } from '@/api/remoteOrder'
@@ -112,6 +112,9 @@ export const useRestaurantStore = defineStore('restaurant', {
     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) {

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>