@feedmepos/mf-order-setting 0.0.51 → 0.0.52-dev.0

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"
@@ -198,22 +183,19 @@
 </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'
+
+const { t } = useI18n()
 
 interface Props {
   restaurantId: string
@@ -249,9 +231,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 +247,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,

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

@@ -27,6 +27,7 @@ import SmsSetting from './sms/SmsSetting.vue'
 
 import GeneralSetting from './general/GeneralSetting.vue'
 import QueueSetting from './queue/QueueSetting.vue'
+import ReservationSetting from './reservation/ReservationSetting.vue'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 import { useMenuStore } from '@/stores/menu/menu'
 import { useSnackbarFunctions } from '@/components/snackbar'
@@ -45,6 +46,7 @@ type OrderSettingMenuItemValue =
   // | 'discountRule'
   | 'general'
   | 'queue'
+  | 'reservation'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
 const settingItem = computed<FmTabProps[]>(() => [
@@ -56,7 +58,8 @@ const settingItem = computed<FmTabProps[]>(() => [
   // { label: t('order.discountRule.title'), value: 'discountRule' },
   { label: t('order.sms'), value: 'sms' },
   { label: t('order.general'), value: 'general' },
-  { label: t('order.queue'), value: 'queue' }
+  { label: t('order.queue'), value: 'queue' },
+  { label: t('order.reservation'), value: 'reservation' }
 ])
 
 const currentComponent = computed(() => {
@@ -79,6 +82,8 @@ const currentComponent = computed(() => {
       return GeneralSetting
     case 'queue':
       return QueueSetting
+    case 'reservation':
+      return ReservationSetting
   }
 })
 
@@ -88,7 +93,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/delivery/integrated-delivery/IntegratedDelivery.vue

@@ -56,7 +56,9 @@ const emits = defineEmits<{
 const menuStore = useMenuStore()
 const CoreStore = useCoreStore()
 
-const canEdit = computed(() => CoreStore.sessionUser.value?.role.isAdmin ?? false)
+// const canEdit = computed(() => CoreStore.sessionUser.value?.role.isAdmin ?? false)
+// For now, allow all users to edit, but added detail logging in backend
+const canEdit = computed(() => true)
 
 function updateManual(manual: FdoLinkedDelivery | null) {
   emits('update:model-value', {

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

@@ -5,37 +5,21 @@
   <div v-if="!isLoading">
     <div class="p-[1.5rem] flex flex-col gap-5 m-5 w-2/3">
       <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.generalSetting') }}</div>
-      <FmSwitch
-        v-model="driveThruSetting.enabled"
-        value="enabled"
-        :label="t('order.enableDriveThru')"
-        :sublabel="t('order.enableDriveThruSublabel')"
-        label-placement="right"
-      />
-      <FmSelect
-        v-if="driveThruSetting.enabled"
-        class="w-1/2"
-        :placeholder="t('order.selectItem')"
-        :model-value="driveThruSetting.catalogId"
-        :label="t('order.catalog')"
-        :items="menuStore.catalogOptions"
-        @update:model-value="updateCatalogId"
-      />
+      <FmSwitch v-model="driveThruSetting.enabled" value="enabled" :label="t('order.enableDriveThru')"
+        :sublabel="t('order.enableDriveThruSublabel')" label-placement="right" />
+      <FmSelect v-if="driveThruSetting.enabled" class="w-1/2" :placeholder="t('order.selectItem')"
+        :model-value="driveThruSetting.catalogId" :label="t('order.catalog')" :items="menuStore.catalogOptions"
+        @update:model-value="updateCatalogId" />
     </div>
     <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
-      <FmButton
-        variant="primary"
-        :label="t('order.saveSetting')"
-        class="mr-auto"
-        @click="updateDriveThruSetting"
-      />
+      <FmButton variant="primary" :label="t('order.saveSetting')" class="mr-auto" @click="updateDriveThruSetting" />
     </div>
   </div>
   <FmCircularProgress size="xxl" v-else />
 </template>
 
 <script setup lang="ts">
-import { type FdoRestaurantDriveThru } from '@feedmepos/core/entity'
+import { FdoRestaurant, type FdoRestaurantDriveThru } from '@feedmepos/core/entity'
 import RestaurantSelector from '../components/RestaurantSelector.vue'
 import { onMounted, ref, watch } from 'vue'
 import { useRestaurantStore } from '@/stores/restaurant'
@@ -73,7 +57,7 @@ async function updateDriveThruSetting() {
     if (newDriveThruSetting) {
       await restaurantStore.updateDriveThruSetting(newDriveThruSetting)
       if (currentRestaurant.value) {
-        ;(currentRestaurant.value as any).driveThru = newDriveThruSetting
+        (currentRestaurant.value as unknown as FdoRestaurant).driveThru = newDriveThruSetting
       }
     }
   })
@@ -82,9 +66,10 @@ async function updateDriveThruSetting() {
 
 watch(
   () => currentRestaurant.value,
-  async (newRestaurant) => {
-    if ((newRestaurant as any)?.driveThru) {
-      driveThruSetting.value = utils.clone((newRestaurant as any).driveThru)
+  async (_newRestaurant) => {
+    const newRestaurant = _newRestaurant as unknown as FdoRestaurant;
+    if (newRestaurant?.driveThru) {
+      driveThruSetting.value = utils.clone(newRestaurant.driveThru)
     } else {
       driveThruSetting.value = initDriveThruSetting()
     }
@@ -93,7 +78,7 @@ watch(
 )
 
 onMounted(async () => {
-  const newRestaurant = currentRestaurant.value as any
+  const newRestaurant = currentRestaurant.value as unknown as FdoRestaurant;
   if (newRestaurant?.driveThru) {
     driveThruSetting.value = utils.clone(newRestaurant.driveThru)
   }

package/src/views/order-settings/reservation/CopySettingsSheet.vue

@@ -0,0 +1,238 @@
+<template>
+  <FmSideSheet :max-width="560" v-model="showSheet">
+    <template #side-sheet-button>
+      <FmButton label="Copy settings from another restaurant" icon="edit" variant="plain"
+        class="border-1 rounded-lg border-fm-color-primary" />
+    </template>
+
+    <template #side-sheet-header> Copy settings from </template>
+
+    <template #default>
+      <div class="flex flex-col gap-24">
+        <!-- Restaurant Selector -->
+        <div>
+          <FmSelect :items="availableRestaurants" :model-value="selectedRestaurantId"
+            @update:model-value="(v: string) => (selectedRestaurantId = v)" placeholder="Select" :width="512" />
+        </div>
+
+        <!-- Configuration Section -->
+        <div>
+          <div class="fm-typo-en-title-sm-600 mb-16">Configuration</div>
+
+          <div class="flex flex-col gap-12">
+            <!-- All Checkbox -->
+            <FmCheckbox label="All" :model-value="isAllSelected" value="all" @update:model-value="toggleAll" />
+
+            <!-- Individual Configuration Checkboxes -->
+            <FmCheckbox label="Reservation Availability" :model-value="configOptions.reservationAvailability"
+              value="reservationAvailability"
+              @update:model-value="(v: boolean) => updateConfigOption('reservationAvailability', v)" />
+
+            <FmCheckbox label="Time Settings" :model-value="configOptions.timeSettings" value="timeSettings"
+              @update:model-value="(v: boolean) => updateConfigOption('timeSettings', v)" />
+
+            <FmCheckbox label="Table Capacity Settings" :model-value="configOptions.tableCapacity" value="tableCapacity"
+              @update:model-value="(v: boolean) => updateConfigOption('tableCapacity', v)" />
+
+            <FmCheckbox label="Pre-order" :model-value="configOptions.preorder" value="preorder"
+              @update:model-value="(v: boolean) => updateConfigOption('preorder', v)" />
+
+            <FmCheckbox label="Guest Preferences" :model-value="configOptions.guestPreferences" value="guestPreferences"
+              @update:model-value="(v: boolean) => updateConfigOption('guestPreferences', v)" />
+
+            <FmCheckbox label="Guest Message" :model-value="configOptions.guestMessage" value="guestMessage"
+              @update:model-value="(v: boolean) => updateConfigOption('guestMessage', v)" />
+
+            <FmCheckbox label="Cancellation Policy" :model-value="configOptions.cancellationPolicy"
+              value="cancellationPolicy"
+              @update:model-value="(v: boolean) => updateConfigOption('cancellationPolicy', v)" />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #side-sheet-footer>
+      <div class="flex items-center justify-start gap-8">
+        <FmButton label="Apply" @click="handleApply" :disabled="!canApply" :loading="isLoading" />
+        <FmButton label="Cancel" variant="tertiary" @click="handleCancel" />
+      </div>
+    </template>
+  </FmSideSheet>
+</template>
+
+<script setup lang="ts">
+import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { computed, ref } from 'vue'
+import { ReservationApi } from '@/api/reservation'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import type { FdoOrderReservationSettingsV2 } from '@entity'
+
+const { t } = useI18n()
+const { showSuccess, showError } = useSnackbarFunctions()
+const Core = useCoreStore()
+
+// Props
+const props = defineProps<{
+  currentSettings: FdoOrderReservationSettingsV2
+}>()
+
+// Emits
+const emit = defineEmits<{
+  apply: [settings: Partial<FdoOrderReservationSettingsV2>]
+}>()
+
+// State
+const showSheet = ref(false)
+const isLoading = ref(false)
+
+const configOptions = ref({
+  reservationAvailability: false,
+  timeSettings: false,
+  tableCapacity: false,
+  preorder: false,
+  guestPreferences: false,
+  guestMessage: false,
+  cancellationPolicy: false
+})
+
+// Computed
+const { currentRestaurant } = Core
+
+const availableRestaurants = computed(() => {
+  // Filter out current restaurant from the list
+  return (Core.restaurants.value ?? [])
+    .filter((r) => r._id !== currentRestaurant.value?._id)
+    .map((r) => ({ label: r.profile.name, value: r._id }))
+})
+
+const selectedRestaurantId = ref<string>(availableRestaurants.value[0]?.value)
+
+
+const isAllSelected = computed(() => {
+  return Object.values(configOptions.value).every((v) => v === true)
+})
+
+const canApply = computed(() => {
+  return (
+    selectedRestaurantId.value !== '' && Object.values(configOptions.value).some((v) => v === true)
+  )
+})
+
+// Methods
+function toggleAll(value: boolean) {
+  Object.keys(configOptions.value).forEach((key) => {
+    configOptions.value[key as keyof typeof configOptions.value] = value
+  })
+}
+
+function updateConfigOption(key: keyof typeof configOptions.value, value: boolean) {
+  configOptions.value[key] = value
+}
+
+async function handleApply() {
+  if (!selectedRestaurantId.value) {
+    showError('Please select a restaurant')
+    return
+  }
+
+  if (!Object.values(configOptions.value).some((v) => v)) {
+    showError('Please select at least one configuration option')
+    return
+  }
+
+  try {
+    isLoading.value = true
+
+    // Fetch settings from selected restaurant
+    const sourceSettings = await ReservationApi.getReservationSetting(selectedRestaurantId.value)
+
+    if (!sourceSettings || !sourceSettings.ranges || sourceSettings.ranges.length === 0) {
+      showError('No settings found for the selected restaurant')
+      return
+    }
+
+    // Build partial settings object based on selected options
+    const updatedSettings: Partial<FdoOrderReservationSettingsV2> = {}
+    const sourceRange = sourceSettings.ranges[0]
+    const currentRange = props.currentSettings.ranges[0]
+
+    // Create a copy of the current range to modify
+    const updatedRange = { ...currentRange }
+
+    // Copy selected configuration sections
+    if (configOptions.value.reservationAvailability) {
+      // Copy enable state, min/max lead duration
+      updatedRange.enable = sourceRange.enable
+      updatedRange.minLeadDuration = { ...sourceRange.minLeadDuration }
+      updatedRange.maxLeadDuration = { ...sourceRange.maxLeadDuration }
+    }
+
+    if (configOptions.value.timeSettings) {
+      // Copy operating hours, slot interval, booking duration
+      updatedRange.operatingHours = JSON.parse(JSON.stringify(sourceRange.operatingHours))
+      updatedRange.slotInterval = sourceRange.slotInterval
+      updatedRange.bookingDuration = sourceRange.bookingDuration
+    }
+
+    if (configOptions.value.tableCapacity) {
+      // Copy capacity tiers
+      updatedRange.capacityTiers = JSON.parse(JSON.stringify(sourceRange.capacityTiers))
+    }
+
+    if (configOptions.value.preorder) {
+      // Copy preorder setting
+      updatedRange.enablePreorder = sourceRange.enablePreorder
+    }
+
+    if (configOptions.value.guestPreferences) {
+      // Copy preferences
+      updatedRange.preferences = JSON.parse(JSON.stringify(sourceRange.preferences))
+    }
+
+    if (configOptions.value.guestMessage) {
+      // Copy guest message
+      updatedRange.guestMessage = sourceRange.guestMessage
+    }
+
+    if (configOptions.value.cancellationPolicy) {
+      // Copy cancellation policy
+      updatedRange.cancellationPolicy = sourceRange.cancellationPolicy
+    }
+
+    // Update the settings with the modified range
+    updatedSettings.ranges = [updatedRange]
+
+    // Emit the updated settings to parent
+    emit('apply', updatedSettings)
+
+    // Close the side sheet
+    showSheet.value = false
+
+    // Reset form
+    resetForm()
+  } catch (error) {
+    console.error('Error copying settings:', error)
+    showError('Failed to copy settings. Please try again.')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleCancel() {
+  showSheet.value = false
+  resetForm()
+}
+
+function resetForm() {
+  selectedRestaurantId.value = ''
+  configOptions.value = {
+    reservationAvailability: false,
+    timeSettings: false,
+    tableCapacity: false,
+    preorder: false,
+    guestPreferences: false,
+    guestMessage: false,
+    cancellationPolicy: false
+  }
+}
+</script>

package/src/views/order-settings/reservation/CustomSelect.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { components } from '@feedmepos/ui-library';
+
+interface SelectItem {
+  label: string
+  value: string
+  icon?: 'radio' | 'checkbox'
+}
+
+const props = defineProps<{
+  modelValue: string
+  items: SelectItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const isOpen = ref(false)
+const selectRef = ref<HTMLDivElement | null>(null)
+const menuRef = ref<typeof components['FmMenu'] | null>(null);
+
+const selectedItem = computed(() => {
+  const found = props.items.find((item) => item.value === props.modelValue)
+  return found || props.items[0] || { label: 'Select...', value: '', icon: undefined }
+})
+
+function selectItem(item: SelectItem) {
+  emit('update:modelValue', item.value)
+  menuRef.value?.toggleMenu();
+}
+
+// Close dropdown when clicking outside
+function handleClickOutside(event: MouseEvent) {
+  if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
+    menuRef.value?.toggleMenu();
+  }
+}
+
+// Setup click outside listener when component mounts/unmounts
+import { onMounted, onUnmounted } from 'vue'
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div class="relative w-full" ref="selectRef">
+    <!-- Use FmMenu for dropdown behavior -->
+    <FmMenu ref="menuRef" @menu-changed="(v) => isOpen = v">
+      <template #menu-button>
+        <FmField>
+          <div class="flex items-center gap-4 w-full">
+            <FmCheckbox v-if="selectedItem.icon == 'checkbox'" :value="true" :model-value="true"
+              @update:model-value="(v) => v" />
+            <div v-if="selectedItem.icon == 'radio'" class="flex items-center">
+              <FmRadio :value="true" :model-value="true" @update:model-value="(v) => v" />
+            </div>
+            <!-- Label -->
+            <span class="text-gray-900 flex-1">
+              {{ selectedItem.label }}
+            </span>
+            <FmIcon name="keyboard_arrow_down" class="text-gray-500 transition-transform duration-200 ml-2"
+              :class="{ 'rotate-180': isOpen }" />
+          </div>
+        </FmField>
+      </template>
+
+      <!-- Dropdown Menu Items -->
+      <template #default>
+        <div :style="{ width: `${selectRef?.clientWidth}px` }" class="rounded-md flex flex-col gap-4">
+          <div v-for="item in items" :key="item.value" @click="selectItem(item)"
+            class="cursor-pointer transition-colors duration-150 flex items-center p-8 rounded-sm hover:bg-orange-100">
+            <FmCheckbox v-if="item.icon == 'checkbox'" :value="true" :model-value="true" @update:model-value="(v) => v"
+              class="mr-8" />
+            <div v-if="item.icon == 'radio'" class="flex items-center">
+              <FmRadio :value="true" :model-value="true" @update:model-value="(v) => v" />
+            </div>
+            <span class="text-gray-900 flex-1"> {{ item.label }} </span>
+          </div>
+        </div>
+      </template>
+    </FmMenu>
+  </div>
+</template>
+
+<style scoped>
+/* Match FmTextField styling */
+.fm-text-field-input {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+</style>