@feedmepos/mf-order-setting 0.0.54 → 0.0.57-prod

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

@@ -488,6 +488,7 @@ export declare const WebSocketEventDto: z.ZodDiscriminatedUnion<"type", z.Primit
         }, {
             showAllOnly: boolean;
         }>>>;
+        otaChannel: z.ZodNullable<z.ZodOptional<z.ZodString>>;
         coverImageLandscape: z.ZodNullable<z.ZodOptional<z.ZodString>>;
         coverImagePortrait: z.ZodNullable<z.ZodOptional<z.ZodString>>;
     }, "strip", z.ZodTypeAny, {
@@ -546,6 +547,7 @@ export declare const WebSocketEventDto: z.ZodDiscriminatedUnion<"type", z.Primit
         menuItem?: {
             showAllOnly: boolean;
         } | null | undefined;
+        otaChannel?: string | null | undefined;
         coverImageLandscape?: string | null | undefined;
         coverImagePortrait?: string | null | undefined;
     }, {
@@ -604,6 +606,7 @@ export declare const WebSocketEventDto: z.ZodDiscriminatedUnion<"type", z.Primit
         menuItem?: {
             showAllOnly: boolean;
         } | null | undefined;
+        otaChannel?: string | null | undefined;
         coverImageLandscape?: string | null | undefined;
         coverImagePortrait?: string | null | undefined;
     }>>;
@@ -664,6 +667,7 @@ export declare const WebSocketEventDto: z.ZodDiscriminatedUnion<"type", z.Primit
         menuItem?: {
             showAllOnly: boolean;
         } | null | undefined;
+        otaChannel?: string | null | undefined;
         coverImageLandscape?: string | null | undefined;
         coverImagePortrait?: string | null | undefined;
     };
@@ -725,6 +729,7 @@ export declare const WebSocketEventDto: z.ZodDiscriminatedUnion<"type", z.Primit
         menuItem?: {
             showAllOnly: boolean;
         } | null | undefined;
+        otaChannel?: string | null | undefined;
         coverImageLandscape?: string | null | undefined;
         coverImagePortrait?: string | null | undefined;
     } | undefined;
@@ -1184,6 +1189,7 @@ export declare const WebSocketReqDto: z.ZodObject<{
             }, {
                 showAllOnly: boolean;
             }>>>;
+            otaChannel: z.ZodNullable<z.ZodOptional<z.ZodString>>;
             coverImageLandscape: z.ZodNullable<z.ZodOptional<z.ZodString>>;
             coverImagePortrait: z.ZodNullable<z.ZodOptional<z.ZodString>>;
         }, "strip", z.ZodTypeAny, {
@@ -1242,6 +1248,7 @@ export declare const WebSocketReqDto: z.ZodObject<{
             menuItem?: {
                 showAllOnly: boolean;
             } | null | undefined;
+            otaChannel?: string | null | undefined;
             coverImageLandscape?: string | null | undefined;
             coverImagePortrait?: string | null | undefined;
         }, {
@@ -1300,6 +1307,7 @@ export declare const WebSocketReqDto: z.ZodObject<{
             menuItem?: {
                 showAllOnly: boolean;
             } | null | undefined;
+            otaChannel?: string | null | undefined;
             coverImageLandscape?: string | null | undefined;
             coverImagePortrait?: string | null | undefined;
         }>>;
@@ -1360,6 +1368,7 @@ export declare const WebSocketReqDto: z.ZodObject<{
             menuItem?: {
                 showAllOnly: boolean;
             } | null | undefined;
+            otaChannel?: string | null | undefined;
             coverImageLandscape?: string | null | undefined;
             coverImagePortrait?: string | null | undefined;
         };
@@ -1421,6 +1430,7 @@ export declare const WebSocketReqDto: z.ZodObject<{
             menuItem?: {
                 showAllOnly: boolean;
             } | null | undefined;
+            otaChannel?: string | null | undefined;
             coverImageLandscape?: string | null | undefined;
             coverImagePortrait?: string | null | undefined;
         } | undefined;
@@ -1530,6 +1540,7 @@ export declare const WebSocketReqDto: z.ZodObject<{
             menuItem?: {
                 showAllOnly: boolean;
             } | null | undefined;
+            otaChannel?: string | null | undefined;
             coverImageLandscape?: string | null | undefined;
             coverImagePortrait?: string | null | undefined;
         };
@@ -1640,6 +1651,7 @@ export declare const WebSocketReqDto: z.ZodObject<{
             menuItem?: {
                 showAllOnly: boolean;
             } | null | undefined;
+            otaChannel?: string | null | undefined;
             coverImageLandscape?: string | null | undefined;
             coverImagePortrait?: string | null | undefined;
         } | undefined;

package/package.json

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

package/src/locales/en-US.json

@@ -95,6 +95,8 @@
         "deliveryZone": "Delivery Zone",
         "deviceBinding": "Device Binding",
         "deviceDetails": "Device Details",
+        "otaChannel": "OTA channel",
+        "otaChannelHint": "Optional. Leave blank to use the default OTA feed.",
         "dineIn": "Dine In",
         "dineInCanTakeaway": "Allow Takeaway",
         "driveThru": "Drive Thru",

package/src/locales/ja-JP.json

@@ -91,15 +91,17 @@
         "deliveryOrder": "配達注文",
         "deliveryTerm": "配達条件",
         "deliveryTime": "配達時間",
-        "deliveryTitle": "{company}配達",
-        "deliveryZone": "配達エリア",
-        "deviceBinding": "デバイス紐付け",
-        "deviceDetails": "デバイス詳細",
-        "dineIn": "店内飲食",
-        "dineInCanTakeaway": "テイクアウト許可",
-        "driveThru": "ドライブスルー",
-        "driveThruSettingUpdated": "ドライブスルー設定が更新されました。",
-        "enableDriveThru": "ドライブスルーを有効にする",
+        "deliveryTitle": "{company}配達",
+        "deliveryZone": "配達エリア",
+        "deviceBinding": "デバイス紐付け",
+        "deviceDetails": "デバイス詳細",
+        "otaChannel": "OTAチャネル",
+        "otaChannelHint": "任意。空欄の場合はデフォルトのOTAフィードを使用します。",
+        "dineIn": "店内飲食",
+        "dineInCanTakeaway": "テイクアウト許可",
+        "driveThru": "ドライブスルー",
+        "driveThruSettingUpdated": "ドライブスルー設定が更新されました。",
+        "enableDriveThru": "ドライブスルーを有効にする",
         "enableDriveThruSublabel": "お客様向けのドライブスルー注文を有効にする",
         "dineInType": "店内飲食タイプ",
         "discountCampaign": "割引キャンペーン",

package/src/locales/th-TH.json

@@ -95,6 +95,8 @@
         "deliveryZone": "โซนการจัดส่ง",
         "deviceBinding": "การผูกอุปกรณ์",
         "deviceDetails": "รายละเอียดอุปกรณ์",
+        "otaChannel": "ช่อง OTA",
+        "otaChannelHint": "ไม่บังคับ เว้นว่างเพื่อใช้ฟีด OTA เริ่มต้น",
         "dineIn": "รับประทานอาหารที่ร้าน",
         "dineInCanTakeaway": "อนุญาตให้นำกลับบ้าน",
         "driveThru": "ไดรฟ์ทรู",

package/src/locales/zh-CN.json

@@ -96,6 +96,8 @@
         "deliveryZone": "配送区域",
         "deviceBinding": "设备绑定",
         "deviceDetails": "设备详情",
+        "otaChannel": "OTA 渠道",
+        "otaChannelHint": "可选。留空将使用默认的 OTA 源。",
         "dineIn": "堂食",
         "dineInCanTakeaway": "允许外带",
         "driveThru": "得来速",

package/src/main.ts

@@ -35,15 +35,15 @@ function initI18n(): I18n {
 
 const app = createApp(Entry)
 
-app.use(initI18n())
-app.use(createPinia())
-app.use(router)
-
-
 app.use(FeedMeUI, {
     locale: detectLocale(),
 })
 
+app.use(createPinia() as any)
+app.use(router)
+app.use(initI18n() as any)
+
+
 const CoreStore = useCoreStore();
 const iframeMode = computed(() => {
     return new URLSearchParams(window.location.search).get('iframe') === 'true';

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

@@ -75,27 +75,29 @@ export type KioskPaymentTypesForm = MfKioskPaymentTypes;
 
 export type KioskPaymentSettingForm = MfKioskPaymentSetting;
 
-export interface MfKioskOrderSetting {
-    dineIn: MfKioskDineInSetting,
-    takeaway: MfKioskTakeawaySetting,
-    paymentSetting: MfKioskPaymentSetting,
-    menuItem: MfKioskOrderSettingMenuItemForm,
-    coverImageLandscape: string | null,
-    coverImagePortrait: string | null,
-}
+export interface MfKioskOrderSetting {
+    dineIn: MfKioskDineInSetting,
+    takeaway: MfKioskTakeawaySetting,
+    paymentSetting: MfKioskPaymentSetting,
+    menuItem: MfKioskOrderSettingMenuItemForm,
+    otaChannel?: string | null,
+    coverImageLandscape: string | null,
+    coverImagePortrait: string | null,
+}
 
 export interface MfKioskOrderSettingMenuItemForm {
     showAllOnly: boolean,
 }
 
-export interface MfKioskOrderSettingForm {
-    dineIn: KioskDineInSettingForm,
-    takeaway: KioskTakeawaySettingForm,
-    paymentSetting: KioskPaymentSettingForm,
-    menuItem: KioskMenuItemSettingForm,
-    coverImageLandscape: string | null,
-    coverImagePortrait: string | null,
-}
+export interface MfKioskOrderSettingForm {
+    dineIn: KioskDineInSettingForm,
+    takeaway: KioskTakeawaySettingForm,
+    paymentSetting: KioskPaymentSettingForm,
+    menuItem: KioskMenuItemSettingForm,
+    otaChannel?: string | null,
+    coverImageLandscape: string | null,
+    coverImagePortrait: string | null,
+}
 
 export type KioskPickAtCounterSettingForm = MfKioskPickAtCounterSetting;
 export type KioskMenuItemSettingForm = MfKioskOrderSettingMenuItemForm;
@@ -104,4 +106,4 @@ export interface KioskDineInSettingForm {
     sequenceNumber: MfKioskSequenceNumberSetting,
     displayStand: DisplayStandSettingForm,
     pickUp: KioskPickAtCounterSettingForm,
-}
+}

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

@@ -50,7 +50,7 @@ export const defaultPickUp: KioskPickAtCounterSettingForm = {
   enablePaxDialog: false
 }
 
-export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
+export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
   dineIn: {
     enabled: false,
     pickUp: defaultPickUp,
@@ -74,13 +74,14 @@ export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
         scanPay: false
       }
     }
-  },
-  menuItem: {
-    showAllOnly: false
-  },
-  coverImageLandscape: null,
-  coverImagePortrait: null
-}
+  },
+  menuItem: {
+    showAllOnly: false
+  },
+  otaChannel: '',
+  coverImageLandscape: null,
+  coverImagePortrait: null
+}
 
 export const defaultSubmitOrderInstruction: MfKioskSubmitOrderInstruction = {
   payAtCounter: null,
@@ -109,10 +110,10 @@ const toKiosk = (
       enabled: kioskOrderSettings?.canTakeaway ?? false,
       submitOrderInstruction: kioskOrderSettings?.takeaway?.submitOrderInstruction
         ? {
-            payAtCounter:
-              kioskOrderSettings?.takeaway?.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
-            paid: kioskOrderSettings?.takeaway?.submitOrderInstruction?.paid?.['en'] ?? null
-          }
+          payAtCounter:
+            kioskOrderSettings?.takeaway?.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
+          paid: kioskOrderSettings?.takeaway?.submitOrderInstruction?.paid?.['en'] ?? null
+        }
         : defaultSubmitOrderInstruction
     },
     paymentSetting: {
@@ -131,13 +132,14 @@ const toKiosk = (
           }
         })
     },
-    menuItem: {
-      showAllOnly: kioskOrderSettings?.menuItem?.showAllOnly ?? false
-    },
-    coverImageLandscape: kioskOrderSettings?.coverImageLandscape ?? null,
-    coverImagePortrait: kioskOrderSettings?.coverImagePortrait ?? null
-  }
-}
+    menuItem: {
+      showAllOnly: kioskOrderSettings?.menuItem?.showAllOnly ?? false
+    },
+    otaChannel: kioskOrderSettings?.otaChannel ?? '',
+    coverImageLandscape: kioskOrderSettings?.coverImageLandscape ?? null,
+    coverImagePortrait: kioskOrderSettings?.coverImagePortrait ?? null
+  }
+}
 
 const toKioskDineInSetting = (
   kioskDineInSeq: OrderKioskDineInSequenceDto,
@@ -148,35 +150,35 @@ const toKioskDineInSetting = (
     sequenceNumber: kioskDineInSeq,
     pickUp: kioskDineInSetting?.pickUp
       ? {
-          ...kioskDineInSetting.pickUp,
-          submitOrderInstruction: kioskDineInSetting.pickUp.submitOrderInstruction
-            ? {
-                payAtCounter:
-                  kioskDineInSetting.pickUp.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
-                paid: kioskDineInSetting.pickUp.submitOrderInstruction?.paid?.['en'] ?? null
-              }
-            : defaultSubmitOrderInstruction,
-          enablePaxDialog: kioskDineInSetting.pickUp.enablePaxDialog
-            ? kioskDineInSetting.pickUp.enablePaxDialog
-            : false
-        }
+        ...kioskDineInSetting.pickUp,
+        submitOrderInstruction: kioskDineInSetting.pickUp.submitOrderInstruction
+          ? {
+            payAtCounter:
+              kioskDineInSetting.pickUp.submitOrderInstruction?.payAtCounter?.['en'] ?? null,
+            paid: kioskDineInSetting.pickUp.submitOrderInstruction?.paid?.['en'] ?? null
+          }
+          : defaultSubmitOrderInstruction,
+        enablePaxDialog: kioskDineInSetting.pickUp.enablePaxDialog
+          ? kioskDineInSetting.pickUp.enablePaxDialog
+          : false
+      }
       : defaultPickUp,
     displayStand: kioskDineInSetting?.displayStand
       ? {
-          enabled: kioskDineInSetting.displayStand.enabled,
-          standSlotRange: kioskDineInSetting.displayStand.standSlotRange,
-          prefix: kioskDineInSetting.displayStand.prefix,
-          padDigit: kioskDineInSetting.displayStand.padDigit,
-          enablePaxDialog: kioskDineInSetting.displayStand.enablePaxDialog ?? false,
-          submitOrderInstruction: kioskDineInSetting.displayStand.submitOrderInstruction
-            ? {
-                payAtCounter:
-                  kioskDineInSetting.displayStand.submitOrderInstruction?.payAtCounter?.['en'] ??
-                  null,
-                paid: kioskDineInSetting.displayStand.submitOrderInstruction?.paid?.['en'] ?? null
-              }
-            : defaultSubmitOrderInstruction
-        }
+        enabled: kioskDineInSetting.displayStand.enabled,
+        standSlotRange: kioskDineInSetting.displayStand.standSlotRange,
+        prefix: kioskDineInSetting.displayStand.prefix,
+        padDigit: kioskDineInSetting.displayStand.padDigit,
+        enablePaxDialog: kioskDineInSetting.displayStand.enablePaxDialog ?? false,
+        submitOrderInstruction: kioskDineInSetting.displayStand.submitOrderInstruction
+          ? {
+            payAtCounter:
+              kioskDineInSetting.displayStand.submitOrderInstruction?.payAtCounter?.['en'] ??
+              null,
+            paid: kioskDineInSetting.displayStand.submitOrderInstruction?.paid?.['en'] ?? null
+          }
+          : defaultSubmitOrderInstruction
+      }
       : defaultDisplayStand
   }
 }
@@ -193,13 +195,13 @@ const toOrderKioskSettingsDto = (
       submitOrderInstruction: {
         payAtCounter: dineInSetting.displayStand.submitOrderInstruction?.payAtCounter
           ? {
-              en: dineInSetting.displayStand.submitOrderInstruction.payAtCounter
-            }
+            en: dineInSetting.displayStand.submitOrderInstruction.payAtCounter
+          }
           : null,
         paid: dineInSetting.displayStand.submitOrderInstruction?.paid
           ? {
-              en: dineInSetting.displayStand.submitOrderInstruction.paid
-            }
+            en: dineInSetting.displayStand.submitOrderInstruction.paid
+          }
           : null
       }
     },
@@ -208,27 +210,28 @@ const toOrderKioskSettingsDto = (
       submitOrderInstruction: {
         payAtCounter: dineInSetting.pickUp.submitOrderInstruction?.payAtCounter
           ? {
-              en: dineInSetting.pickUp.submitOrderInstruction.payAtCounter
-            }
+            en: dineInSetting.pickUp.submitOrderInstruction.payAtCounter
+          }
           : null,
         paid: dineInSetting.pickUp.submitOrderInstruction?.paid
           ? {
-              en: dineInSetting.pickUp.submitOrderInstruction.paid
-            }
+            en: dineInSetting.pickUp.submitOrderInstruction.paid
+          }
           : null
       }
     }
   })
 
-  const createKioskSettings = (dineIn?: OrderKioskDineIn): OrderKioskSettings => ({
-    canTakeaway: kioskSetting.takeaway.enabled,
-    dineIn,
-    menuItem: kioskSetting.menuItem,
-    coverImageLandscape: kioskSetting.coverImageLandscape,
-    coverImagePortrait: kioskSetting.coverImagePortrait,
-    paymentSetting: createPaymentSettings(kioskSetting.paymentSetting),
-    takeaway: kioskSetting.takeaway.submitOrderInstruction
-      ? {
+  const createKioskSettings = (dineIn?: OrderKioskDineIn): OrderKioskSettings => ({
+    canTakeaway: kioskSetting.takeaway.enabled,
+    dineIn,
+    menuItem: kioskSetting.menuItem,
+    coverImageLandscape: kioskSetting.coverImageLandscape,
+    coverImagePortrait: kioskSetting.coverImagePortrait,
+    paymentSetting: createPaymentSettings(kioskSetting.paymentSetting),
+    otaChannel: kioskSetting.otaChannel || undefined,
+    takeaway: kioskSetting.takeaway.submitOrderInstruction
+      ? {
           submitOrderInstruction: {
             payAtCounter: kioskSetting.takeaway.submitOrderInstruction.payAtCounter
               ? {
@@ -240,8 +243,8 @@ const toOrderKioskSettingsDto = (
                   en: kioskSetting.takeaway.submitOrderInstruction.paid
                 }
               : null
-          }
         }
+      }
       : undefined
   })
 

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

@@ -92,6 +92,16 @@ const initializeCheckboxes = () => {
       eWalletPaymentCheckboxVal.value.push(F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY)
       useEwallet.value = true
     }
+
+    if (props.ePaymentTypes.eWallet.terminalScanPay) {
+      eWalletPaymentCheckboxVal.value.push(F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_SCAN_PAY)
+      useEwallet.value = true
+    }
+
+    if (props.ePaymentTypes.eWallet.terminalQrPay) {
+      eWalletPaymentCheckboxVal.value.push(F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_QR_PAY)
+      useEwallet.value = true
+    }
   }
 }
 
@@ -154,7 +164,9 @@ const handleEPaymentCardUpdate = (ev: string) => {
     },
     eWallet: {
       qrPay: false,
-      scanPay: false
+      scanPay: false,
+      terminalScanPay: false,
+      terminalQrPay: false,
     }
   } as FdoEPaymentMethod
 
@@ -175,6 +187,12 @@ const handleEPaymentCardUpdate = (ev: string) => {
       if (eWalletPaymentCheckboxVal.value.includes(F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY)) {
         ePaymentObj.eWallet.scanPay = true
       }
+      if (eWalletPaymentCheckboxVal.value.includes(F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_SCAN_PAY)) {
+        ePaymentObj.eWallet.terminalScanPay = true
+      }
+      if (eWalletPaymentCheckboxVal.value.includes(F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_QR_PAY)) {
+        ePaymentObj.eWallet.terminalQrPay = true
+      }
     }
   }
 

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

@@ -1,5 +1,20 @@
 <template>
   <div v-if="!!kioskOrderSettingForm" class="flex flex-col gap-32">
+    <!-- OTA Channel Section -->
+    <div v-if="isAdmin" class="flex flex-col gap-2">
+      <span class="fm-typo-en-title-sm-600">{{ t('order.otaChannel') }}</span>
+      <div class="flex flex-col gap-1 w-full md:w-1/2">
+        <FmTextField
+          v-model="kioskOrderSettingForm.otaChannel"
+          :label="t('order.otaChannel')"
+          :placeholder="t('order.otaChannelHint')"
+        />
+        <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+          {{ t('order.otaChannelHint') }}
+        </span>
+      </div>
+    </div>
+
     <!-- Dine In Section -->
     <div class="flex flex-col gap-2">
       <span class="fm-typo-en-title-sm-600">{{ t('order.dineIn') }}</span>
@@ -140,30 +155,31 @@
       />
     </div>
 
-    <!-- Cover Image Section -->
-    <div class="flex flex-col gap-2">
-      <span class="fm-typo-en-title-sm-600">{{ t('order.coverImage') }}</span>
-      <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
-        t('order.coverImageFallbackHint')
-      }}</span>
-
-      <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-4 my-5 w-11/12">
-        <span class="fm-typo-en-body-md-600">{{ t('order.coverImageLandscape') }}</span>
-        <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
-          t('order.coverImageLandscapeHint')
-        }}</span>
-        <FmDropField
-          v-if="!getCoverImagePreview('coverImageLandscape')"
-          accept="image/*"
-          :max-file-size="MAX_IMAGE_FILE_SIZE"
-          @file-upload="uploadCoverImage('coverImageLandscape', $event)"
-          @file-rejected="handleCoverImageRejected('coverImageLandscape', $event)"
-        />
+    <!-- Cover Image Section -->
+    <div class="flex flex-col gap-2">
+      <span class="fm-typo-en-title-sm-600">{{ t('order.coverImage') }}</span>
+      <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
+        t('order.coverImageFallbackHint')
+      }}</span>
+
+      <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-4 my-5 w-11/12">
+        <span class="fm-typo-en-body-md-600">{{ t('order.coverImageLandscape') }}</span>
+        <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
+          t('order.coverImageLandscapeHint')
+        }}</span>
+        <FmDropField
+          v-if="!getCoverImagePreview('coverImageLandscape')"
+          accept="image/*"
+          :max-file-size="MAX_IMAGE_FILE_SIZE"
+          content-class="w-full max-w-[400px] aspect-video"
+          @file-upload="uploadCoverImage('coverImageLandscape', $event)"
+          @file-rejected="handleCoverImageRejected('coverImageLandscape', $event)"
+        />
         <div v-else class="flex flex-col gap-2">
           <img
             :src="getCoverImagePreview('coverImageLandscape')!"
             :alt="t('order.coverImageLandscape')"
-            class="w-full max-w-[360px] max-h-[200px] object-cover rounded-md border border-fm-color-neutral-gray-200"
+            class="max-w-[400px] aspect-video object-cover rounded-md border border-fm-color-neutral-gray-200"
           />
           <FmButton
             variant="tertiary"
@@ -174,23 +190,24 @@
         </div>
       </div>
 
-      <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-4 my-5 w-11/12">
-        <span class="fm-typo-en-body-md-600">{{ t('order.coverImagePortrait') }}</span>
-        <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
-          t('order.coverImagePortraitHint')
-        }}</span>
-        <FmDropField
-          v-if="!getCoverImagePreview('coverImagePortrait')"
-          accept="image/*"
-          :max-file-size="MAX_IMAGE_FILE_SIZE"
-          @file-upload="uploadCoverImage('coverImagePortrait', $event)"
-          @file-rejected="handleCoverImageRejected('coverImagePortrait', $event)"
+      <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-4 my-5 w-11/12">
+        <span class="fm-typo-en-body-md-600">{{ t('order.coverImagePortrait') }}</span>
+        <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
+          t('order.coverImagePortraitHint')
+        }}</span>
+        <FmDropField
+          v-if="!getCoverImagePreview('coverImagePortrait')"
+          accept="image/*"
+          :max-file-size="MAX_IMAGE_FILE_SIZE"
+          content-class="w-[240px] aspect-[9/16]"
+          @file-upload="uploadCoverImage('coverImagePortrait', $event)"
+          @file-rejected="handleCoverImageRejected('coverImagePortrait', $event)"
         />
         <div v-else class="flex flex-col gap-2">
           <img
             :src="getCoverImagePreview('coverImagePortrait')!"
             :alt="t('order.coverImagePortrait')"
-            class="w-full max-w-[360px] max-h-[200px] object-cover rounded-md border border-fm-color-neutral-gray-200"
+            class="max-w-[200px] aspect-[9/16] object-cover rounded-md border border-fm-color-neutral-gray-200"
           />
           <FmButton
             variant="tertiary"
@@ -256,9 +273,12 @@ import type {
 import { useLoading } from '@/composables/loading'
 import { useSnackbar } from '@feedmepos/ui-library'
 import { useI18n } from '@feedmepos/mf-common'
+import { useCoreStore } from '@feedmepos/mf-common'
 import { uploadImageFile } from '@/utils/firebase-storage'
 
 const { t } = useI18n()
+const CoreStore = useCoreStore()
+const isAdmin = computed(() => CoreStore.sessionUser.value?.role.isAdmin ?? false)
 
 interface Props {
   restaurantId: string
@@ -296,6 +316,7 @@ const maxRules = computed(() => [nonNegativeRule, greaterThanMinRule])
 
 const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
   const f = kioskOrderSettingForm.value
+  const otaChannel = f.otaChannel?.trim()
 
   // Validate display stand settings if both dineIn and displayStand are enabled
   if (f.dineIn.enabled && f.dineIn.displayStand.enabled) {
@@ -313,6 +334,7 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
   // Return the form as-is if valid, with display stand disabled when dineIn is disabled
   return {
     ...f,
+    otaChannel: otaChannel || undefined,
     dineIn: {
       ...f.dineIn,
       displayStand: {
@@ -339,8 +361,8 @@ function updateEPaymentSetting(form: FdoEPaymentMethod) {
   kioskOrderSettingForm.value.paymentSetting.ePaymentTypes = form
 }
 
-type CoverImageField = 'coverImageLandscape' | 'coverImagePortrait'
-const MAX_IMAGE_FILE_SIZE = 10 * 1000 * 1000
+type CoverImageField = 'coverImageLandscape' | 'coverImagePortrait'
+const MAX_IMAGE_FILE_SIZE = 10 * 1000 * 1000
 
 function clearCoverImage(field: CoverImageField) {
   kioskOrderSettingForm.value[field] = null

package/src/views/order-settings/OrderSettingsView.vue

@@ -88,7 +88,7 @@ onMounted(async () => {
   }
 })
 
-watch(currentRestaurant, async (newRestaurant) => {
+watch(currentRestaurant, async (newRestaurant: any) => {
   if (newRestaurant?._id) {
     await menuStore.loadCatalogOptions(newRestaurant._id)
   }

package/src/views/order-settings/drive-thru/DriveThruSetting.vue

@@ -74,7 +74,7 @@ async function updateDriveThruSetting() {
     if (newDriveThruSetting) {
       await restaurantStore.updateDriveThruSetting(newDriveThruSetting)
       if (currentRestaurant.value) {
-        currentRestaurant.value.driveThru = newDriveThruSetting
+        ;(currentRestaurant.value as any).driveThru = newDriveThruSetting
       }
     }
   })
@@ -84,8 +84,8 @@ async function updateDriveThruSetting() {
 watch(
   () => currentRestaurant.value,
   async (newRestaurant) => {
-    if (newRestaurant?.driveThru) {
-      driveThruSetting.value = utils.clone(newRestaurant.driveThru)
+    if ((newRestaurant as any)?.driveThru) {
+      driveThruSetting.value = utils.clone((newRestaurant as any).driveThru)
     } else {
       driveThruSetting.value = initDriveThruSetting()
     }
@@ -94,7 +94,7 @@ watch(
 )
 
 onMounted(async () => {
-  const newRestaurant = currentRestaurant.value
+  const newRestaurant = currentRestaurant.value as any
   if (newRestaurant?.driveThru) {
     driveThruSetting.value = utils.clone(newRestaurant.driveThru)
   }