@feedmepos/mf-order-setting 0.0.52 → 0.0.53

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

@@ -92,16 +92,6 @@ 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
-    }
   }
 }
 
@@ -164,9 +154,7 @@ const handleEPaymentCardUpdate = (ev: string) => {
     },
     eWallet: {
       qrPay: false,
-      scanPay: false,
-      terminalScanPay: false,
-      terminalQrPay: false,
+      scanPay: false
     }
   } as FdoEPaymentMethod
 
@@ -187,12 +175,6 @@ 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,23 +1,8 @@
-<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>
+<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>
       <div class="flex flex-col gap-5">
         <FmSwitch
           v-model="kioskOrderSettingForm.dineIn.enabled"
@@ -155,6 +140,68 @@
       />
     </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)"
+        />
+        <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"
+          />
+          <FmButton
+            variant="tertiary"
+            class="mr-auto"
+            :label="t('common.delete')"
+            @click="clearCoverImage('coverImageLandscape')"
+          />
+        </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 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"
+          />
+          <FmButton
+            variant="tertiary"
+            class="mr-auto"
+            :label="t('common.delete')"
+            @click="clearCoverImage('coverImagePortrait')"
+          />
+        </div>
+      </div>
+    </div>
+
     <!-- Display Pax Dialog Section -->
     <div class="flex flex-col gap-2">
       <span class="fm-typo-en-title-sm-600">{{ t('order.displayPaxDialogTitle') }}</span>
@@ -198,22 +245,20 @@
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import KioskPaymentTypeSection from './KioskPaymentTypeSection.vue'
-import { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
-import { FdoEPaymentMethod, F_ORDER_PAYMENT_TYPE } from '@entity'
-import type {
-  MfKioskOrderSetting,
+import KioskPaymentTypeSection from './KioskPaymentTypeSection.vue'
+import { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+import { FdoEPaymentMethod, F_ORDER_PAYMENT_TYPE } from '@entity'
+import type {
+  MfKioskOrderSetting,
   MfKioskOrderSettingForm,
   KioskPaymentTypesForm
 } from '@/modules/order-setting/kiosk/interface'
-import { useLoading } from '@/composables/loading'
-import { useSnackbar } from '@feedmepos/ui-library'
-import { useI18n } from '@feedmepos/mf-common'
-import { useCoreStore } from '@feedmepos/mf-common'
-
-const { t } = useI18n()
-const CoreStore = useCoreStore()
-const isAdmin = computed(() => CoreStore.sessionUser.value?.role.isAdmin ?? false)
+import { useLoading } from '@/composables/loading'
+import { useSnackbar } from '@feedmepos/ui-library'
+import { useI18n } from '@feedmepos/mf-common'
+import { uploadImageFile } from '@/utils/firebase-storage'
+
+const { t } = useI18n()
 
 interface Props {
   restaurantId: string
@@ -249,9 +294,8 @@ const padDigitRules = computed(() => [nonNegativeRule])
 const minRules = computed(() => [nonNegativeRule])
 const maxRules = computed(() => [nonNegativeRule, greaterThanMinRule])
 
-const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
-  const f = kioskOrderSettingForm.value
-  const otaChannel = f.otaChannel?.trim()
+const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
+  const f = kioskOrderSettingForm.value
 
   // Validate display stand settings if both dineIn and displayStand are enabled
   if (f.dineIn.enabled && f.dineIn.displayStand.enabled) {
@@ -266,13 +310,12 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
     if (!isValid) return 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: {
+  // Return the form as-is if valid, with display stand disabled when dineIn is disabled
+  return {
+    ...f,
+    dineIn: {
+      ...f.dineIn,
+      displayStand: {
         ...f.dineIn.displayStand,
         enabled: f.dineIn.enabled && f.dineIn.displayStand.enabled,
         padDigit: f.dineIn.displayStand.padDigit ?? 0,
@@ -296,6 +339,56 @@ function updateEPaymentSetting(form: FdoEPaymentMethod) {
   kioskOrderSettingForm.value.paymentSetting.ePaymentTypes = form
 }
 
+type CoverImageField = 'coverImageLandscape' | 'coverImagePortrait'
+const MAX_IMAGE_FILE_SIZE = 10 * 1000 * 1000
+
+function clearCoverImage(field: CoverImageField) {
+  kioskOrderSettingForm.value[field] = null
+}
+
+function getCoverImagePreview(field: CoverImageField): string | null {
+  const value = kioskOrderSettingForm.value[field]
+  if (!value) return null
+  const trimmed = value.trim()
+  return trimmed.length > 0 ? trimmed : null
+}
+
+async function uploadCoverImage(field: CoverImageField, file: File) {
+  try {
+    const imageUrl = await startAsyncCall(async () => {
+      const path = `/restaurant/${props.restaurantId}/kiosk/${field}`
+      return await uploadImageFile(path, file)
+    })
+
+    kioskOrderSettingForm.value[field] = imageUrl
+    SnackBar.open({
+      title: t('order.imageUploadSuccess'),
+      type: 'success'
+    })
+  } catch (e) {
+    console.error(e)
+    SnackBar.open({
+      title: t('order.imageUploadFailed'),
+      type: 'error'
+    })
+  }
+}
+
+function handleCoverImageRejected(
+  field: CoverImageField,
+  rejected: { file: File; reason: string[] }[]
+) {
+  const fieldName =
+    field === 'coverImageLandscape' ? t('order.coverImageLandscape') : t('order.coverImagePortrait')
+  const firstReason = rejected[0]?.reason?.[0]
+  SnackBar.open({
+    title: firstReason
+      ? `${t('order.imageUploadRejected')}: ${fieldName} (${firstReason})`
+      : `${t('order.imageUploadRejected')}: ${fieldName}`,
+    type: 'error'
+  })
+}
+
 const allowEPayment = computed(() => {
   const paymentTypes = kioskOrderSettingForm.value.paymentSetting.paymentTypes || []
   return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)

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

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

package/src/views/order-settings/dine-in/DineInSetting.vue

@@ -77,6 +77,14 @@
         label-placement="right"
         @update:model-value="updatePrintChecklist"
       ></FmSwitch>
+
+       <FmSwitch
+        :model-value="orderSetting?.dineInSettings?.overridePax ?? true"
+        :label="t('order.overridePax')"
+        :sublabel="t('order.overridePaxSublabel')"
+        label-placement="right"
+        @update:model-value="updateOverridePax"
+      ></FmSwitch>
     </div>
     <div class="p-[1.5rem] flex flex-col gap-2 m-5 w-2/3">
       <PaymentType
@@ -182,12 +190,26 @@ function updateLastOrderMinutesBeforeClose(minutes: number) {
 function updatePrintChecklist(v: boolean) {
   if (orderSetting.value) {
     if (!orderSetting.value.dineInSettings) {
-      orderSetting.value.dineInSettings = {}
+      orderSetting.value.dineInSettings = {
+        overridePax: true,
+      };
     }
     orderSetting.value.dineInSettings.printChecklist = v
   }
 }
 
+function updateOverridePax(v: boolean) {
+  if (orderSetting.value) {
+    if (!orderSetting.value.dineInSettings) {
+      orderSetting.value.dineInSettings = {
+        overridePax: v,
+      };
+    } else {
+      orderSetting.value.dineInSettings.overridePax = v
+    }
+  }
+}
+
 function initDineInSetting(): FdoRestaurantDineIn {
   return {
     ignoreStock: false,

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

@@ -35,20 +35,21 @@
 </template>
 
 <script setup lang="ts">
-import { type FdoRestaurantDriveThru } from '@feedmepos/core/entity'
-import RestaurantSelector from '../components/RestaurantSelector.vue'
-import { onMounted, ref, watch } from 'vue'
-import { useRestaurantStore } from '@/stores/restaurant'
-import { useLoading } from '@/composables/loading'
-import { useCoreStore } from '@feedmepos/mf-common'
-import { utils } from '@feedmepos/core'
-import { useI18n } from '@feedmepos/mf-common'
-import { useSnackbarFunctions } from '@/components/snackbar'
-import { useMenuStore } from '@/stores/menu/menu'
-
-const { t } = useI18n()
-
-const { currentRestaurant } = useCoreStore()
+import { type FdoRestaurant, type FdoRestaurantDriveThru } from '@feedmepos/core/entity'
+import RestaurantSelector from '../components/RestaurantSelector.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRestaurantStore } from '@/stores/restaurant'
+import { useLoading } from '@/composables/loading'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { utils } from '@feedmepos/core'
+import { useI18n } from '@feedmepos/mf-common'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { useMenuStore } from '@/stores/menu/menu'
+
+const { t } = useI18n()
+
+const { currentRestaurant: _currentRestaurant } = useCoreStore()
+const currentRestaurant = computed(() => _currentRestaurant.value as FdoRestaurant | undefined)
 const menuStore = useMenuStore()
 const driveThruSetting = ref<FdoRestaurantDriveThru>(initDriveThruSetting())
 
@@ -73,7 +74,7 @@ async function updateDriveThruSetting() {
     if (newDriveThruSetting) {
       await restaurantStore.updateDriveThruSetting(newDriveThruSetting)
       if (currentRestaurant.value) {
-        ;(currentRestaurant.value as any).driveThru = newDriveThruSetting
+        currentRestaurant.value.driveThru = newDriveThruSetting
       }
     }
   })
@@ -83,8 +84,8 @@ async function updateDriveThruSetting() {
 watch(
   () => currentRestaurant.value,
   async (newRestaurant) => {
-    if ((newRestaurant as any)?.driveThru) {
-      driveThruSetting.value = utils.clone((newRestaurant as any).driveThru)
+    if (newRestaurant?.driveThru) {
+      driveThruSetting.value = utils.clone(newRestaurant.driveThru)
     } else {
       driveThruSetting.value = initDriveThruSetting()
     }
@@ -93,7 +94,7 @@ watch(
 )
 
 onMounted(async () => {
-  const newRestaurant = currentRestaurant.value as any
+  const newRestaurant = currentRestaurant.value
   if (newRestaurant?.driveThru) {
     driveThruSetting.value = utils.clone(newRestaurant.driveThru)
   }

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

@@ -480,7 +480,11 @@ watch(
         />
       </div>
       <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">
+        <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"