@feedmepos/mf-order-setting 0.0.91 → 0.0.93

package/src/views/order-settings/delivery/delivery.spec.ts

@@ -42,6 +42,27 @@ describe('isIntegratedPlatformSupported', () => {
     )
   })
 
+  it('offers exactly these platforms per country', () => {
+    const C = AUTO_INTEGRATION_CLIENT
+    const expected: Record<string, AUTO_INTEGRATION_CLIENT[]> = {
+      MY: [C.foodpanda, C.grabfood, C.shopeefood, C.tng, C.external],
+      SG: [C.foodpanda, C.grabfood, C.deliveroo, C.external],
+      TH: [C.grabfood, C.external, C.lineman],
+      PK: [C.foodpanda, C.external],
+      ID: [C.grabfood, C.gofood, C.external],
+      GB: [C.external],
+      BN: [],
+      VN: []
+    }
+
+    for (const [country, offered] of Object.entries(expected)) {
+      const actual = Object.values(C).filter((key) =>
+        isIntegratedPlatformSupported(key, country as F_COUNTRY)
+      )
+      expect([country, actual.sort()]).toEqual([country, [...offered].sort()])
+    }
+  })
+
   it('offers no other integrated platform in the UK (GB)', () => {
     const others = Object.values(AUTO_INTEGRATION_CLIENT).filter(
       (key) => key !== AUTO_INTEGRATION_CLIENT.external

package/src/views/order-settings/delivery/delivery.ts

@@ -6,6 +6,7 @@ import {
 } from '@feedmepos/core/entity'
 import { useCoreStore } from '@feedmepos/mf-common'
 import { F_ORDER_PLATFORM, type FdoExternalSetting } from '@entity'
+import { isIntegratedPlatformOffered } from '@common/order-platform'
 
 export type LinkedDeliveryDoc = FdoLinkedDelivery & { _rev: string }
 
@@ -100,57 +101,7 @@ export function useDelivery() {
     country?: F_COUNTRY | null
   ): boolean {
     country = country || useCoreStore().currentCountry.value || F_COUNTRY.enum.MY
-    const mySupported = [
-      AUTO_INTEGRATION_CLIENT.foodpanda,
-      AUTO_INTEGRATION_CLIENT.grabfood,
-      AUTO_INTEGRATION_CLIENT.shopeefood,
-      AUTO_INTEGRATION_CLIENT.tng,
-      AUTO_INTEGRATION_CLIENT.external
-    ]
-    const sgSupported = [
-      AUTO_INTEGRATION_CLIENT.foodpanda,
-      AUTO_INTEGRATION_CLIENT.grabfood,
-      AUTO_INTEGRATION_CLIENT.deliveroo,
-      AUTO_INTEGRATION_CLIENT.external
-    ]
-    const thSupported = [
-      AUTO_INTEGRATION_CLIENT.grabfood,
-      AUTO_INTEGRATION_CLIENT.external,
-      AUTO_INTEGRATION_CLIENT.lineman
-    ]
-    const pkSupported = [AUTO_INTEGRATION_CLIENT.foodpanda, AUTO_INTEGRATION_CLIENT.external]
-    const idSupported = [
-      AUTO_INTEGRATION_CLIENT.grabfood,
-      AUTO_INTEGRATION_CLIENT.gofood,
-      AUTO_INTEGRATION_CLIENT.external
-    ]
-    const gbSupported = [AUTO_INTEGRATION_CLIENT.external]
-
-    let supportedPlatforms: AUTO_INTEGRATION_CLIENT[] = []
-    switch (country) {
-      case F_COUNTRY.enum.MY:
-        supportedPlatforms = mySupported
-        break
-      case F_COUNTRY.enum.SG:
-        supportedPlatforms = sgSupported
-        break
-      case F_COUNTRY.enum.TH:
-        supportedPlatforms = thSupported
-        break
-      case F_COUNTRY.enum.PK:
-        supportedPlatforms = pkSupported
-        break
-      case F_COUNTRY.enum.ID:
-        supportedPlatforms = idSupported
-        break
-      case F_COUNTRY.enum.GB:
-        supportedPlatforms = gbSupported
-        break
-      default:
-        break
-    }
-
-    return supportedPlatforms.includes(platform)
+    return isIntegratedPlatformOffered(platform, country)
   }
 
   return {

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

@@ -60,6 +60,14 @@
         :sublabel="t('order.acceptQueueSublabel')"
         label-placement="right"
       />
+      <FmSwitch
+        v-if="isAdmin"
+        v-model="dineInSetting.acceptReservation as boolean"
+        value="acceptReservation"
+        :label="t('order.acceptReservation')"
+        :sublabel="t('order.acceptReservationSublabel')"
+        label-placement="right"
+      />
 
       <FmSwitch
         :model-value="lastOrderBeforeCloseEnable"
@@ -201,8 +209,10 @@ const { t } = useI18n()
 
 type OrderDineInSettings = NonNullable<OrderSettingsDto['dineInSettings']>
 
-const { currentRestaurant } = useCoreStore()
+const { currentRestaurant, sessionUser } = useCoreStore()
 const restaurantStore = useRestaurantStore()
+// Reservations are switched on per outlet by FeedMe admins during the pilot.
+const isAdmin = computed(() => sessionUser.value?.role?.isAdmin ?? false)
 const dineInSetting = ref<FdoRestaurantDineIn>(initDineInSetting())
 const orderSetting = ref<OrderSettingsDto | undefined>(undefined)
 const lastOrderBeforeCloseEnable = ref<boolean>(false)

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

@@ -0,0 +1,256 @@
+<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 pl-8">
+            <!-- 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 flex-col gap-16 w-full">
+        <FmSnackbar variant="warning" class="!shadow-none"
+          :description="`This will overwrite all reservation settings for ${targetRestaurantName}`" />
+        <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>
+      </div>
+    </template>
+  </FmSideSheet>
+</template>
+
+<script setup lang="ts">
+import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { computed, ref, watch } 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>('')
+
+// Watch to set initial value when availableRestaurants loads
+watch(availableRestaurants, (newRestaurants) => {
+  if (newRestaurants.length > 0 && !selectedRestaurantId.value) {
+    selectedRestaurantId.value = newRestaurants[0].value
+  }
+}, { immediate: true })
+
+const targetRestaurantName = computed(() => {
+  return currentRestaurant.value?.profile.name ?? ''
+})
+
+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)
+
+    // Show success with source outlet name
+    const sourceName = availableRestaurants.value.find(r => r.value === selectedRestaurantId.value)?.label ?? 'selected outlet'
+    showSuccess(`Settings from "${sourceName}" have been applied. Please review and save changes.`)
+
+    // 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/CustomTimePicker.vue

@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  minTime?: string // Optional minimum time (HH:MM format)
+  restrictMinTime?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const isOpen = ref(false)
+const wrapperRef = ref<HTMLDivElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
+const dropdownRef = ref<HTMLDivElement | null>(null)
+
+// Generate time options in 30-minute intervals
+const timeOptions = computed(() => {
+  const options: string[] = []
+  for (let hour = 0; hour < 24; hour++) {
+    for (let minute = 0; minute < 60; minute += 30) {
+      const timeString = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`
+      options.push(timeString)
+    }
+  }
+
+  options.push('23:59')
+
+  // Filter out times earlier than minTime if provided
+  if (props.minTime && props.restrictMinTime !== false) {
+    return options.filter((time) => isTimeGreaterOrEqual(time, props.minTime!))
+  }
+
+  return options
+})
+
+// Helper function to compare times in HH:MM format
+function isTimeGreaterOrEqual(time1: string, time2: string): boolean {
+  const [hours1, minutes1] = time1.split(':').map(Number)
+  const [hours2, minutes2] = time2.split(':').map(Number)
+
+  const totalMinutes1 = hours1 * 60 + minutes1
+  const totalMinutes2 = hours2 * 60 + minutes2
+
+  return totalMinutes1 >= totalMinutes2
+}
+
+const displayValue = computed({
+  get: () => props.modelValue || '',
+  set: (value: string) => {
+    emit('update:modelValue', value)
+  }
+})
+
+function selectTime(time: string) {
+  displayValue.value = time
+  isOpen.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node
+  const wrapperElement = wrapperRef.value
+
+  if (
+    dropdownRef.value &&
+    wrapperElement &&
+    !dropdownRef.value.contains(target) &&
+    !wrapperElement.contains(target)
+  ) {
+    isOpen.value = false
+  }
+}
+
+function handleFocus() {
+  isOpen.value = true
+}
+
+function toggleDropdown(event?: Event) {
+  event?.stopPropagation()
+  const willOpen = !isOpen.value
+
+  // Close all other open dropdowns by dispatching a global event
+  if (willOpen) {
+    window.dispatchEvent(new CustomEvent('closeTimePickers'))
+  }
+  isOpen.value = willOpen
+
+  // Scroll to selected time when opening
+  if (willOpen) {
+    nextTick(() => {
+      inputRef.value?.focus()
+      scrollToSelectedTime()
+    })
+  }
+}
+
+function scrollToSelectedTime() {
+  const scrollContainer = dropdownRef.value?.querySelector('.overflow-y-auto')
+  if (!scrollContainer) return
+
+  const selectedElement = scrollContainer.querySelector(
+    '[data-selected="true"]'
+  ) as HTMLElement | null
+  if (selectedElement) {
+    const container = scrollContainer as HTMLElement
+    const targetScrollTop =
+      selectedElement.offsetTop - container.clientHeight / 2 + selectedElement.clientHeight / 2
+    container.scrollTop = Math.max(0, targetScrollTop)
+  }
+}
+
+function formatTimeInput(value: string) {
+  const digits = value.replace(/\D/g, '').slice(0, 4)
+
+  if (!digits) {
+    return ''
+  }
+
+  let hours = digits.slice(0, 2)
+  let minutes = digits.slice(2, 4)
+
+  if (hours.length === 2) {
+    hours = String(Math.min(Number(hours), 23)).padStart(2, '0')
+  }
+
+  if (minutes.length === 1) {
+    minutes = String(Math.min(Number(minutes), 5))
+  }
+
+  if (minutes.length === 2) {
+    minutes = String(Math.min(Number(minutes), 59)).padStart(2, '0')
+  }
+
+  if (digits.length <= 2) {
+    return digits.length === 2 ? `${hours}:` : hours
+  }
+
+  return `${hours}:${minutes}`
+}
+
+function hasSelection(input: HTMLInputElement) {
+  return (input.selectionStart ?? 0) !== (input.selectionEnd ?? 0)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.ctrlKey || event.metaKey || event.altKey) {
+    return
+  }
+
+  const allowedKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End']
+  if (allowedKeys.includes(event.key)) {
+    return
+  }
+
+  if (!/^\d$/.test(event.key)) {
+    event.preventDefault()
+    return
+  }
+
+  const input = event.target as HTMLInputElement | null
+  if (!input) {
+    return
+  }
+
+  const digitCount = input.value.replace(/\D/g, '').length
+  if (digitCount >= 4 && !hasSelection(input)) {
+    event.preventDefault()
+  }
+}
+
+function handleInput(event: Event) {
+  const input = event.target as HTMLInputElement | null
+  if (!input) {
+    return
+  }
+
+  const formattedValue = formatTimeInput(input.value)
+  input.value = formattedValue
+  displayValue.value = formattedValue
+}
+
+function handlePaste(event: ClipboardEvent) {
+  event.preventDefault()
+
+  const pastedText = event.clipboardData?.getData('text') || ''
+  const formattedValue = formatTimeInput(pastedText)
+
+  displayValue.value = formattedValue
+}
+
+function focusInput() {
+  inputRef.value?.focus()
+  isOpen.value = true
+}
+
+function handleCloseTimePickers() {
+  isOpen.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('closeTimePickers', handleCloseTimePickers)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('closeTimePickers', handleCloseTimePickers)
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div ref="wrapperRef" @click="focusInput" class="relative inline-flex w-[132px] max-w-full">
+      <input
+        ref="inputRef"
+        :value="displayValue"
+        @input="handleInput"
+        @keydown="handleKeydown"
+        @paste="handlePaste"
+        @focus="handleFocus"
+        placeholder="HH:MM"
+        class="time-picker-field"
+        maxlength="5"
+        inputmode="numeric"
+        autocomplete="off"
+      />
+      <button
+        type="button"
+        @click.stop="toggleDropdown"
+        class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700"
+      >
+        <FmIcon
+          class="text-[18px] transition-all duration-200"
+          name="chevron_right"
+          :class="{ 'rotate-[-90deg]': isOpen, 'rotate-[90deg]': !isOpen }"
+        />
+      </button>
+    </div>
+
+    <div
+      v-if="isOpen"
+      ref="dropdownRef"
+      class="absolute z-50 w-full mt-2 bg-white border border-gray-200 rounded-md shadow-lg max-h-[240px] overflow-hidden"
+    >
+      <div class="max-h-[240px] overflow-y-auto scrollbar-thin">
+        <div
+          v-for="time in timeOptions"
+          :key="time"
+          @click.stop="selectTime(time)"
+          :data-selected="time === displayValue"
+          class="px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-orange-50 text-orange-600 font-medium': time === displayValue
+          }"
+        >
+          {{ time }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Custom scrollbar for dropdown - target the scrollable container */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+  margin: 4px 0;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+.time-picker-field {
+  width: 100%;
+  height: 40px;
+  border-width: 1.5px;
+  border-style: solid;
+  border-color: rgb(209 213 219);
+  border-radius: 0.625rem;
+  padding: 8px 36px 8px 12px;
+  font-size: 0.95rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  background-color: white;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.time-picker-field:hover {
+  border-color: rgb(156 163 175);
+}
+
+.time-picker-field:focus {
+  border-color: rgb(249 115 22) !important;
+  background-color: rgb(255 247 237) !important;
+}
+</style>