@feedmepos/mf-order-setting 0.0.53 → 0.0.56-dev.1

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

@@ -0,0 +1,1311 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, computed } from 'vue'
+import { ReservationApi } from '@/api/reservation'
+import { useLoading } from '@/composables/loading'
+import {
+  type FdoOrderReservationSettingsV2,
+  FdoReservationRange,
+  FdoOrderReservationSettingsV2 as ReservationSettingsSchema,
+  generateDayTimeSlotsWithStatus,
+  categorizeTimeSlotsWithStatus,
+  validateTimeRangeOverlap,
+  validateSameDayTimeRange,
+  validateLeadDuration
+} from '@entity'
+import RestaurantSelector from '../components/RestaurantSelector.vue'
+import CustomTimePicker from './CustomTimePicker.vue'
+import CustomSelect from './CustomSelect.vue'
+import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { useDialog } from '@feedmepos/ui-library'
+import moment from 'moment'
+import CopySettingsSheet from './CopySettingsSheet.vue'
+import notfound from '@/assets/images/not-found.png'
+
+
+const { t } = useI18n()
+const { showSuccess } = useSnackbarFunctions()
+const { currentRestaurant, restaurants } = useCoreStore()
+const { isLoading, startAsyncCallWithErr } = useLoading()
+const dialog = useDialog()
+
+// Check if multi-outlet
+const isMultiOutlet = computed(() => (restaurants.value?.length ?? 0) > 1)
+
+// Helper function to generate unique IDs and names for reservation ranges
+const generateRangeDefaults = (index = 0) => ({
+  _id: new Date().toISOString() + '-' + index, // Add index to ensure uniqueness
+  name: `Dining Area ${index + 1}`
+})
+
+// Helper function to generate unique capacity tier ID
+const generateCapacityTierId = () => new Date().toISOString() + '-' + Math.random().toString(36).substr(2, 9)
+
+const DEFAULT_GUEST_MESSAGE = `Please take note of the following important details before making a reservation:
+
+1. Dining Time Limit
+- Our restaurant enforces a dining time limit of 1 hour and 30 minutes.
+
+2. 15-Minute Holding Policy
+- We can hold your reservation for a maximum of 15 minutes. If we are unable to reach you after this time, your table may be released without prior notice. If you anticipate being late or need to cancel, please call us to let us know so we can either hold your table or offer it to other guests.`
+
+const DEFAULT_CANCELLATION_POLICY = `Cancellation Policy
+
+Free cancellation up to 24 hours before your reservation. Please contact the outlet for any last-minute changes.`
+
+const reservationSettings = ref<FdoOrderReservationSettingsV2>({
+  ranges: [
+    {
+      ...generateRangeDefaults(0),
+      enable: false,
+      bookingDuration: 90,
+      enablePreorder: true,
+      minLeadDuration: {
+        value: 0,
+        unit: 'day'
+      },
+      maxLeadDuration: {
+        value: 30,
+        unit: 'day'
+      },
+      operatingHours: {
+        0: {
+          enable: false,
+          hours: []
+        },
+        1: {
+          enable: false,
+          hours: []
+        },
+        2: {
+          enable: false,
+          hours: []
+        },
+        3: {
+          enable: false,
+          hours: []
+        },
+        4: {
+          enable: false,
+          hours: []
+        },
+        5: {
+          enable: false,
+          hours: []
+        },
+        6: {
+          enable: false,
+          hours: []
+        }
+      },
+      preferences: [],
+      capacityTiers: [],
+      slotInterval: 30,
+      guestMessage: DEFAULT_GUEST_MESSAGE,
+      cancellationPolicy: DEFAULT_CANCELLATION_POLICY
+    }
+  ],
+  posCanOverbook: false,
+  draftHoldTimeMinutes: 15,
+  smsEnabled: true,
+  emailEnabled: true,
+  notifyOnConfirm: true,
+  notifyOnCancel: true
+})
+
+const rangeSetting = ref<FdoReservationRange>({
+  ...generateRangeDefaults(0),
+  enable: false,
+  bookingDuration: 90,
+  enablePreorder: true,
+  minLeadDuration: {
+    value: 0,
+    unit: 'day'
+  },
+  maxLeadDuration: {
+    value: 30,
+    unit: 'day'
+  },
+  operatingHours: {
+    0: {
+      enable: true,
+      hours: []
+    },
+    1: {
+      enable: true,
+      hours: [
+        { start: '09:00', end: '14:00' },
+        { start: '17:00', end: '22:00' }
+      ]
+    },
+    2: {
+      enable: true,
+      hours: [
+        { start: '09:00', end: '14:00' },
+        { start: '17:00', end: '22:00' }
+      ]
+    },
+    3: {
+      enable: true,
+      hours: [
+        { start: '09:00', end: '14:00' },
+        { start: '17:00', end: '22:00' }
+      ]
+    },
+    4: {
+      enable: true,
+      hours: [
+        { start: '09:00', end: '14:00' },
+        { start: '17:00', end: '22:00' }
+      ]
+    },
+    5: {
+      enable: true,
+      hours: [
+        { start: '09:00', end: '14:00' },
+        { start: '17:00', end: '22:00' }
+      ]
+    },
+    6: {
+      enable: true,
+      hours: []
+    }
+  },
+  preferences: [],
+  capacityTiers: [
+    {
+      _id: generateCapacityTierId(),
+      minPax: 1,
+      maxPax: 2,
+      capacity: 10
+    },
+    {
+      _id: generateCapacityTierId(),
+      minPax: 3,
+      maxPax: 4,
+      capacity: 8
+    },
+    {
+      _id: generateCapacityTierId(),
+      minPax: 5,
+      maxPax: 6,
+      capacity: 5
+    },
+    {
+      _id: generateCapacityTierId(),
+      minPax: 7,
+      maxPax: null,
+      capacity: 3
+    }
+  ],
+  slotInterval: 30,
+  guestMessage: DEFAULT_GUEST_MESSAGE,
+  cancellationPolicy: DEFAULT_CANCELLATION_POLICY
+})
+
+const isSaving = ref(false)
+
+const optionText = ref('')
+const selectedPreviewDay = ref(1) // Monday by default
+const editingOption = ref<{ prefIndex: number; optIndex: number } | null>(null)
+
+// Track if user explicitly selected custom mode to prevent auto-switching to preset
+const isCustomMode = ref(false)
+
+// Track expanded state for each time segment
+const expandedSegments = ref({
+  morning: false,
+  afternoon: false,
+  evening: false
+})
+
+// Sync rangeSetting with the first range in reservationSettings
+// This ensures rangeSetting always reflects the first range (for future multi-range support)
+watch(
+  () => reservationSettings.value.ranges[0],
+  (firstRange) => {
+    if (firstRange) {
+      rangeSetting.value = firstRange
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+// Also sync changes from rangeSetting back to the first range
+watch(
+  () => rangeSetting.value,
+  (newRangeSetting) => {
+    if (reservationSettings.value.ranges[0]) {
+      reservationSettings.value.ranges[0] = newRangeSetting
+    } else {
+      reservationSettings.value.ranges.push(newRangeSetting)
+    }
+  },
+  { deep: true }
+)
+
+// Prevent negative values in capacity tiers
+watch(
+  () => rangeSetting.value.capacityTiers,
+  (tiers) => {
+    tiers.forEach((tier) => {
+      if (tier.minPax < 1) tier.minPax = 1
+      if (tier.maxPax != null && tier.maxPax < tier.minPax) {
+        tier.maxPax = tier.minPax
+      }
+    })
+  },
+  { deep: true }
+)
+
+// Computed property for preset selection
+const selectedPreset = computed(() => {
+  // If user explicitly chose custom mode, stay in custom regardless of value
+  if (isCustomMode.value) {
+    return 'custom'
+  }
+
+  // Otherwise, check if value matches a preset
+  if (
+    rangeSetting.value.maxLeadDuration.unit === 'day' &&
+    (rangeSetting.value.maxLeadDuration.value === 30 ||
+      rangeSetting.value.maxLeadDuration.value === 60 ||
+      rangeSetting.value.maxLeadDuration.value === 90)
+  ) {
+    return rangeSetting.value.maxLeadDuration.value
+  }
+  return 'custom'
+})
+
+// Generate time slots based on operating hours and slot interval
+// Now includes unavailable slots (between operating hour gaps)
+const availableSlots = computed(() => {
+  const day = selectedPreviewDay.value as 0 | 1 | 2 | 3 | 4 | 5 | 6
+  const { operatingHours, slotInterval, bookingDuration } = rangeSetting.value
+
+  if (!operatingHours[day]?.enable || !operatingHours[day].hours.length) {
+    return { morning: [], afternoon: [], evening: [] }
+  }
+
+  // Use shared utility to generate slots with availability status
+  // This generates slots only from earliest to latest operating hour (not full 24h)
+  // Example: If hours are 10:00-12:00, 15:00-21:00, shows 10:00-21:00 range
+  const slotsWithStatus = generateDayTimeSlotsWithStatus(
+    operatingHours[day],
+    slotInterval,
+    bookingDuration
+  )
+
+  // Categorize slots by time of day
+  return categorizeTimeSlotsWithStatus(slotsWithStatus)
+})
+
+// Computed properties for displaying limited slots (max 2 rows = 10 items per segment)
+const displayedSlots = computed(() => {
+  const ITEMS_PER_ROW = 5
+  const MAX_ROWS = 2
+  const MAX_ITEMS = ITEMS_PER_ROW * MAX_ROWS // 10 items
+
+  const limitSlots = (slots: any[], isExpanded: boolean) => {
+    if (isExpanded || slots.length <= MAX_ITEMS) {
+      return slots
+    }
+    // Show MAX_ITEMS - 1 slots, then replace the last one with "more" indicator
+    return slots.slice(0, MAX_ITEMS - 1)
+  }
+
+  return {
+    morning: limitSlots(availableSlots.value.morning, expandedSegments.value.morning),
+    afternoon: limitSlots(availableSlots.value.afternoon, expandedSegments.value.afternoon),
+    evening: limitSlots(availableSlots.value.evening, expandedSegments.value.evening)
+  }
+})
+
+// Check if segment has more items than can be displayed (needs "more" button)
+const hasMoreItems = computed(() => {
+  const MAX_ITEMS = 10
+  return {
+    morning: availableSlots.value.morning.length > MAX_ITEMS,
+    afternoon: availableSlots.value.afternoon.length > MAX_ITEMS,
+    evening: availableSlots.value.evening.length > MAX_ITEMS
+  }
+})
+
+const reservationPreview = computed(() => {
+  const today = moment()
+  const { minLeadDuration, maxLeadDuration, operatingHours } = rangeSetting.value
+  const startDate = today.clone().add(minLeadDuration.value, minLeadDuration.unit).startOf('d')
+  const endDate = today.clone().add(maxLeadDuration.value, maxLeadDuration.unit).startOf('d')
+
+  type Day = keyof typeof operatingHours
+
+  // Get the hours for start and end days
+  const startDayHours = operatingHours[startDate.day() as Day].hours
+  const endDayHours = operatingHours[endDate.day() as Day].hours
+
+  // Check if hours exist for both days
+  if (!startDayHours || startDayHours.length === 0 || !endDayHours || endDayHours.length === 0) {
+    return {
+      start: startDate.format('DD MMM YYYY'),
+      end: endDate.format('DD MMM YYYY'),
+      startHour: '--:--',
+      endHour: '--:--'
+    }
+  }
+
+  // use operatingHours and get the earlier starting hour to return a start&end for the preview, return the formatted time
+  const startHour = [...startDayHours].sort((a, b) =>
+    moment(a.start, 'HH:mm').diff(moment(b.start, 'HH:mm'))
+  )[0]
+  const endHour = [...endDayHours].sort((a, b) =>
+    moment(b.end, 'HH:mm').diff(moment(a.end, 'HH:mm'))
+  )[0]
+
+  return {
+    start: startDate.format('DD MMM YYYY'),
+    end: endDate.format('DD MMM YYYY'),
+    startHour: moment(startHour.start, 'HH:mm').format('hh:mm A'),
+    endHour: moment(endHour.end, 'HH:mm').format('hh:mm A')
+  }
+})
+
+onMounted(() => {
+  init()
+})
+
+watch(
+  () => currentRestaurant.value,
+  async (v) => {
+    await init()
+    // Only use restaurant's operating hours as fallback if no settings from backend
+    // or if ranges is empty (new setup)
+    if (
+      v &&
+      v.profile.operatingHours &&
+      (!reservationSettings.value.ranges || reservationSettings.value.ranges.length === 0)
+    ) {
+      console.log('Using restaurant operating hours as fallback:', v.profile.operatingHours)
+      rangeSetting.value.operatingHours = v.profile.operatingHours
+    }
+  },
+  { immediate: true }
+)
+
+async function readReservationSetting(): Promise<FdoOrderReservationSettingsV2> {
+  return await startAsyncCallWithErr(async () => {
+    if (!currentRestaurant.value?._id) {
+      throw new Error('No restaurant selected')
+    }
+    return await ReservationApi.getReservationSetting(currentRestaurant.value._id)
+  })
+}
+
+async function updateReservationSetting() {
+  // Check for lead duration validation errors
+  const leadDurationError = validateLeadDurationLocal()
+  if (leadDurationError) {
+    dialog.open({
+      title: t('order.validationError'),
+      message: leadDurationError,
+      primaryActions: { text: t('order.ok'), close: true }
+    })
+    return
+  }
+
+  // Check for time range validation errors
+  if (hasAnyTimeRangeErrors()) {
+    dialog.open({
+      title: t('order.validationError'),
+      message: 'Please fix all time range errors before saving.',
+      primaryActions: { text: t('order.ok'), close: true }
+    })
+    return
+  }
+
+  isSaving.value = true
+  try {
+    await startAsyncCallWithErr(async () => {
+      if (!currentRestaurant.value?._id) {
+        throw new Error('No restaurant selected')
+      }
+
+      // Validate with Zod schema
+      const validated = ReservationSettingsSchema.parse(reservationSettings.value)
+      console.log(validated);
+      await ReservationApi.updateReservationSetting(currentRestaurant.value._id, validated)
+      await init()
+    })
+    showSuccess(t('order.settingUpdated'))
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function init() {
+  if (currentRestaurant.value) {
+    const settings = await readReservationSetting()
+    reservationSettings.value = {
+      ranges: settings.ranges || [],
+      posCanOverbook: settings.posCanOverbook || false,
+      draftHoldTimeMinutes: settings.draftHoldTimeMinutes || 15,
+      smsEnabled: settings.smsEnabled ?? true,
+      emailEnabled: settings.emailEnabled ?? true,
+      notifyOnConfirm: settings.notifyOnConfirm ?? true,
+      notifyOnCancel: settings.notifyOnCancel ?? true
+    }
+    // Sync rangeSetting with the first range if it exists, otherwise reset to default
+    if (settings.ranges && settings.ranges.length > 0) {
+      rangeSetting.value = settings.ranges[0]
+    } else {
+      // Reset to default state when no ranges exist (fresh restaurant)
+      rangeSetting.value = {
+        _id: new Date().toISOString(),
+        name: 'Dining Area 1',
+        enable: false,
+        bookingDuration: 90,
+        enablePreorder: true,
+        minLeadDuration: { value: 0, unit: 'day' },
+        maxLeadDuration: { value: 30, unit: 'day' },
+        operatingHours: {
+          0: { enable: false, hours: [] },
+          1: { enable: false, hours: [] },
+          2: { enable: false, hours: [] },
+          3: { enable: false, hours: [] },
+          4: { enable: false, hours: [] },
+          5: { enable: false, hours: [] },
+          6: { enable: false, hours: [] }
+        },
+        preferences: [],
+        capacityTiers: [],
+        slotInterval: 30,
+        guestMessage: DEFAULT_GUEST_MESSAGE,
+        cancellationPolicy: DEFAULT_CANCELLATION_POLICY
+      }
+    }
+
+    // Reset custom mode - let the computed property determine the initial state
+    isCustomMode.value = false
+  }
+}
+
+function updateSetting<K extends keyof FdoOrderReservationSettingsV2>(
+  key: K,
+  value: FdoOrderReservationSettingsV2[K]
+) {
+  reservationSettings.value[key] = value
+}
+
+function formatOperatingHours(windows: Array<{ start: string; end: string }>) {
+  if (windows.length === 0) return t('order.noOperatingHours')
+  if (windows.length === 1) return `${windows[0].start} - ${windows[0].end}`
+  return `${windows[0].start} - ${windows[0].end} (+${windows.length - 1})`
+}
+
+function updateMaxLeadPreset(value: number | 'custom') {
+  if (value === 'custom') {
+    // User explicitly selected custom mode
+    isCustomMode.value = true
+    // Switch to custom mode - set to a non-preset value to trigger custom UI
+    // Keep the current value if it's already custom, otherwise set to 1 day as starting point
+    if (
+      rangeSetting.value.maxLeadDuration.unit !== 'day' ||
+      ![30, 60, 90].includes(rangeSetting.value.maxLeadDuration.value)
+    ) {
+      // Already custom, don't change
+      return
+    }
+    // Set to 1 day as default custom value
+    rangeSetting.value.maxLeadDuration = {
+      value: 1,
+      unit: 'day'
+    }
+    return
+  }
+  // User selected a preset - exit custom mode
+  isCustomMode.value = false
+  rangeSetting.value.maxLeadDuration = {
+    value,
+    unit: 'day'
+  }
+}
+
+function updateMinLeadValue(value: number) {
+  rangeSetting.value.minLeadDuration.value = value
+}
+
+function updateMinLeadUnit(unit: 'hour' | 'day') {
+  rangeSetting.value.minLeadDuration.unit = unit
+}
+
+function updateMaxLeadValue(value: number) {
+  rangeSetting.value.maxLeadDuration.value = value
+}
+
+function updateMaxLeadUnit(unit: 'hour' | 'day') {
+  rangeSetting.value.maxLeadDuration.unit = unit
+}
+
+function updateSlotInterval(value: number) {
+  rangeSetting.value.slotInterval = value
+}
+
+function updateBookingDuration(value: number) {
+  rangeSetting.value.bookingDuration = value
+}
+
+function addPreferenceOption(
+  preference: (typeof rangeSetting.value.preferences)[number],
+  value?: string
+) {
+  if (value || optionText.value.trim()) {
+    if (!preference.options) {
+      preference.options = []
+    }
+    preference.options.push(value ?? optionText.value.trim())
+    optionText.value = ''
+  }
+}
+
+function removePreferenceOption(
+  preference: (typeof rangeSetting.value.preferences)[number],
+  option: string
+) {
+  if (preference.options) {
+    const index = preference.options.indexOf(option)
+    if (index > -1) {
+      preference.options.splice(index, 1)
+    }
+  }
+}
+
+function addPreference() {
+  rangeSetting.value.preferences.push({
+    name: '',
+    type: 'radio',
+    options: []
+  })
+}
+
+function removePreference(index: number) {
+  rangeSetting.value.preferences.splice(index, 1)
+}
+
+function startEditingOption(prefIndex: number, optIndex: number) {
+  editingOption.value = { prefIndex, optIndex }
+}
+
+function saveOptionEdit(prefIndex: number, optIndex: number, newValue: string) {
+  if (newValue.trim()) {
+    rangeSetting.value.preferences[prefIndex].options[optIndex] = newValue.trim()
+  }
+  editingOption.value = null
+}
+
+function isEditingOption(prefIndex: number, optIndex: number): boolean {
+  return editingOption.value?.prefIndex === prefIndex && editingOption.value?.optIndex === optIndex
+}
+
+function toggleGuestMessage(enabled: boolean) {
+  if (enabled) {
+    rangeSetting.value.guestMessage = DEFAULT_GUEST_MESSAGE
+  } else {
+    rangeSetting.value.guestMessage = null
+  }
+}
+
+function toggleCancellationPolicy(enabled: boolean) {
+  if (enabled) {
+    rangeSetting.value.cancellationPolicy = DEFAULT_CANCELLATION_POLICY
+  } else {
+    rangeSetting.value.cancellationPolicy = null
+  }
+}
+
+function toggleSegmentExpansion(segment: 'morning' | 'afternoon' | 'evening') {
+  expandedSegments.value[segment] = !expandedSegments.value[segment]
+}
+
+// Validation for operating hours
+function validateTimeRange(day: 0 | 1 | 2 | 3 | 4 | 5 | 6, hourIndex: number): string | null {
+  const dayHours = rangeSetting.value.operatingHours[day].hours
+  const range = dayHours[hourIndex]
+
+  // Validate same day time range (end > start)
+  if (!validateSameDayTimeRange(range)) {
+    return 'End time must be after start time'
+  }
+
+  // Check for overlaps with other time ranges
+  for (let i = 0; i < dayHours.length; i++) {
+    if (i === hourIndex) continue
+
+    // Use shared utility to check overlap
+    if (validateTimeRangeOverlap(range, dayHours[i])) {
+      return 'Time ranges cannot overlap'
+    }
+  }
+
+  return null
+}
+
+function getTimeRangeError<T>(day: T, hourIndex: number): string | null {
+  return validateTimeRange(day as 0 | 1 | 2 | 3 | 4 | 5 | 6, hourIndex)
+}
+
+function hasAnyTimeRangeErrors(): boolean {
+  for (let day = 0; day <= 6; day++) {
+    const dayHours = rangeSetting.value.operatingHours[day as 0 | 1 | 2 | 3 | 4 | 5 | 6].hours
+    for (let i = 0; i < dayHours.length; i++) {
+      if (validateTimeRange(day as 0 | 1 | 2 | 3 | 4 | 5 | 6, i)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+function deleteTimeRange(day: 0 | 1 | 2 | 3 | 4 | 5 | 6, hourIndex: number) {
+  rangeSetting.value.operatingHours[day].hours.splice(hourIndex, 1)
+
+  // If no time ranges left, turn off the toggle
+  if (rangeSetting.value.operatingHours[day].hours.length === 0) {
+    rangeSetting.value.operatingHours[day].enable = false
+  }
+}
+
+// Validation for lead duration
+function validateLeadDurationLocal(): string | null {
+  const { minLeadDuration, maxLeadDuration } = rangeSetting.value
+
+  // Use shared utility to validate
+  if (!validateLeadDuration(minLeadDuration, maxLeadDuration)) {
+    return 'Maximum lead time must be greater than minimum lead time'
+  }
+
+  if (minLeadDuration.value < 0 || maxLeadDuration.value < 0) {
+    return 'Lead time values must be positive'
+  }
+
+  return null
+}
+
+function convertToMinutes(value: number, unit: 'minute' | 'hour' | 'day'): number {
+  // This function is kept for backward compatibility but could be removed
+  // in favor of using convertDurationToMinutes directly
+  switch (unit) {
+    case 'minute':
+      return value
+    case 'hour':
+      return value * 60
+    case 'day':
+      return value * 60 * 24
+    default:
+      return value
+  }
+}
+
+function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV2>) {
+  // Apply the copied settings to the current settings
+  if (copiedSettings.ranges && copiedSettings.ranges.length > 0) {
+    const copiedRange = copiedSettings.ranges[0]
+
+    // Update the first range in reservationSettings
+    if (reservationSettings.value.ranges && reservationSettings.value.ranges.length > 0) {
+      // Merge the copied range properties into the existing range
+      reservationSettings.value.ranges[0] = {
+        ...reservationSettings.value.ranges[0],
+        ...copiedRange
+      }
+
+      // This will automatically sync to rangeSetting via the watch
+    }
+  }
+
+  // Reset custom mode when copying settings - let computed property determine state
+  isCustomMode.value = false
+}
+</script>
+
+<template>
+  <RestaurantSelector />
+  <div v-if="isLoading" class="flex justify-center items-center min-h-[400px]">
+    <FmCircularProgress size="xxl" />
+  </div>
+  <div v-else class="p-[1.5rem] flex flex-col gap-48 w-full max-w-4xl">
+    <div>
+      <div class="flex-grow fm-typo-en-title-sm-600 mb-16">
+        {{ t('order.reservationStatus') }}
+      </div>
+      <FmSwitch label-placement="right" :label="'Enable reservation'"
+        :sublabel="'Enable this to make the outlet available for reservations. This setting does not impact walk-in dining.'"
+        :model-value="rangeSetting.enable ?? false" @update:model-value="(v: boolean) => (rangeSetting.enable = v)" />
+
+      <div v-if="rangeSetting.enable && isMultiOutlet" class="ml-56 my-8">
+        <CopySettingsSheet :current-settings="reservationSettings" @apply="handleCopySettings" />
+      </div>
+    </div>
+
+    <template v-if="rangeSetting.enable">
+      <!-- Notification Settings Section -->
+      <div class="flex flex-col">
+        <div class="flex-grow fm-typo-en-title-sm-600 my-8">
+          {{ t('order.notificationSettings') }}
+        </div>
+        <FmCard variant="outlined" class="p-5">
+          <div class="mb-5">
+            <FmSwitch
+              :model-value="reservationSettings.smsEnabled"
+              @update:model-value="(v: boolean) => updateSetting('smsEnabled', v)"
+              :label="t('order.smsEnabled')"
+              label-placement="right"
+              :sublabel="t('order.smsEnabledDescription')"
+            />
+          </div>
+          <div class="mb-5">
+            <FmSwitch
+              :model-value="reservationSettings.emailEnabled"
+              @update:model-value="(v: boolean) => updateSetting('emailEnabled', v)"
+              :label="t('order.emailEnabled')"
+              label-placement="right"
+              :sublabel="t('order.emailEnabledDescription')"
+            />
+          </div>
+          <div class="mb-5">
+            <FmSwitch
+              :model-value="reservationSettings.notifyOnConfirm"
+              @update:model-value="(v: boolean) => updateSetting('notifyOnConfirm', v)"
+              :label="t('order.notifyOnConfirm')"
+              label-placement="right"
+              :sublabel="t('order.notifyOnConfirmDescription')"
+            />
+          </div>
+          <div class="mb-5">
+            <FmSwitch
+              :model-value="reservationSettings.notifyOnCancel"
+              @update:model-value="(v: boolean) => updateSetting('notifyOnCancel', v)"
+              :label="t('order.notifyOnCancel')"
+              label-placement="right"
+              :sublabel="t('order.notifyOnCancelDescription')"
+            />
+          </div>
+          <div class="mb-5">
+            <div class="mb-8 fm-typo-en-body-md-600 flex items-center gap-8">
+              {{ t('order.draftHoldTimeMinutes') }}
+              <FmTooltip :content="'The amount of time a reservation is held before it is automatically released.'">
+                <FmIcon name="info" outline size="sm" class="cursor-pointer" />
+              </FmTooltip>
+            </div>
+            <FmTextField type="number" :model-value="reservationSettings.draftHoldTimeMinutes" @update:model-value="
+              (v: string | number) =>
+                updateSetting('draftHoldTimeMinutes', v === '' ? 15 : Number(v))
+            " suffix="minutes"
+              class="max-w-md" />
+          </div>
+          <div class="mb-5">
+            <FmSwitch :model-value="reservationSettings.posCanOverbook"
+              @update:model-value="(v: boolean) => updateSetting('posCanOverbook', v)"
+              :label="t('order.posCanOverbook')" label-placement="right"
+              :sublabel="t('order.posCanOverbookDescription')" />
+          </div>
+        </FmCard>
+      </div>
+
+      <div class="flex flex-col">
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-4">
+          {{ t('order.reservationAvailability') }}
+        </div>
+        <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mb-24">
+          This shows when guests can make reservations based on your current settings. The
+          availability updates automatically.
+        </div>
+        <!-- Availability settings (eg. the min/max lead, and time interval + booking duration) -->
+        <div class="mb-24">
+          <div class="mb-8">Preview</div>
+          <div class="flex items-center gap-4 mb-8">
+            <div
+              class="w-fit border-1 border-fm-color-neutral-gray-200 rounded-md py-4 px-8 bg-fm-color-neutral-gray-100 flex items-center gap-8 text-fm-color-typo-tertiary">
+              <FmIcon name="calendar_month" outline />
+              <div class="pr-6">
+                {{ reservationPreview.start + ' ' + reservationPreview.startHour }}
+              </div>
+            </div>
+            <div>to</div>
+            <div
+              class="w-fit border-1 border-fm-color-neutral-gray-200 rounded-md py-4 px-8 bg-fm-color-neutral-gray-100 flex items-center gap-8 text-fm-color-typo-tertiary">
+              <FmIcon name="calendar_month" outline />
+              <div class="pr-6">
+                {{ reservationPreview.end + ' ' + reservationPreview.endHour }}
+              </div>
+            </div>
+          </div>
+          <div class="fm-typo-en-body-md-400 text-fm-color-typo-secondary">
+            Reservations will open on
+            <strong> {{ reservationPreview.start + ', ' + reservationPreview.startHour }} </strong>.
+            Guests will not be able to make reservations before this time.
+          </div>
+        </div>
+
+        <div class="mb-24">
+          <div class="mb-8">Presets</div>
+          <FmRadioGroup :model-value="selectedPreset"
+            @update:model-value="(v: number | 'custom') => updateMaxLeadPreset(v)">
+            <FmRadio label="30 days" :value="30">
+              <template #label>
+                <div>30 days <span class="text-fm-color-typo-secondary">(default)</span></div>
+              </template>
+            </FmRadio>
+            <FmRadio label="60 days" :value="60" />
+            <FmRadio label="90 days" :value="90" />
+            <FmRadio label="Custom" :value="'custom'" />
+          </FmRadioGroup>
+
+          <!-- Custom preset fields -->
+          <div v-if="selectedPreset === 'custom'"
+            class="ml-32 mt-12 p-16 border rounded-md bg-fm-color-neutral-gray-50">
+            <div class="mb-16">
+              <div class="mb-8 fm-typo-en-body-md-600 flex items-center gap-8">
+                Minimum Lead Time
+                <FmTooltip
+                  :content="'The earliest time a guest can make a reservation. For example, if you set this to 1 day, guests can only make reservations from tomorrow onwards.'">
+                  <FmIcon name="info" outline size="sm" class="cursor-pointer" />
+                </FmTooltip>
+              </div>
+              <div class="flex items-center gap-8">
+                <FmStepperField :model-value="rangeSetting.minLeadDuration.value"
+                  @update:model-value="(v: number) => updateMinLeadValue(v)" :min="0" class="" />
+                <FmSelect :model-value="rangeSetting.minLeadDuration.unit"
+                  @update:model-value="(v: 'hour' | 'day') => updateMinLeadUnit(v)" :items="[
+                    { label: 'Hours', value: 'hour' },
+                    { label: 'Days', value: 'day' }
+                  ]" class="w-120" />
+              </div>
+            </div>
+
+            <div>
+              <div class="mb-8 fm-typo-en-body-md-600 flex items-center gap-8">
+                Maximum Lead Time
+                <FmTooltip
+                  :content="'The furthest in advance a guest can make a reservation. For example, if you set this to 30 days, guests can only make reservations up to 30 days from today.'">
+                  <FmIcon name="info" outline size="sm" class="cursor-pointer" />
+                </FmTooltip>
+              </div>
+              <div class="flex items-center gap-8">
+                <FmStepperField :model-value="rangeSetting.maxLeadDuration.value"
+                  @update:model-value="(v: number) => updateMaxLeadValue(v)" :min="0" class="" />
+                <FmSelect :model-value="rangeSetting.maxLeadDuration.unit"
+                  @update:model-value="(v: 'hour' | 'day') => updateMaxLeadUnit(v)" :items="[
+                    { label: 'Hours', value: 'hour' },
+                    { label: 'Days', value: 'day' }
+                  ]" class="w-120" />
+              </div>
+            </div>
+
+            <!-- Validation error message -->
+            <div v-if="validateLeadDurationLocal()" class="mt-16 text-sm text-red-600">
+              {{ validateLeadDurationLocal() }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col">
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-4">
+          Time Settings
+        </div>
+        <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mb-12">
+          Choose the start and end time for reservations, and the interval between each time slot.
+          Available time slots will be generated automatically.
+        </div>
+
+        <!-- Operating hour setting -->
+        <div class="mb-32">
+          <div class="grid grid-cols-[1fr_1fr_3fr] items-start">
+            <div class="p-12 fm-typo-en-body-md-600 text-fm-color-typo-secondary bg-fm-color-neutral-gray-100">
+              Day
+            </div>
+            <div class="p-12 fm-typo-en-body-md-600 text-fm-color-typo-secondary bg-fm-color-neutral-gray-100">
+              Open / Closed
+            </div>
+            <div class="p-12 fm-typo-en-body-md-600 text-fm-color-typo-secondary bg-fm-color-neutral-gray-100">
+              Reservation Time Range
+            </div>
+            <template v-for="day in [1, 2, 3, 4, 5, 6, 0] as const" :key="day">
+              <div class="fm-typo-en-body-md-400 py-12 px-12">
+                {{ moment().day(day).format('dddd') }}
+              </div>
+              <template v-if="rangeSetting.operatingHours[day as 0 | 1 | 2 | 3 | 4 | 5 | 6]">
+                <template v-for="hours in [rangeSetting.operatingHours[day as 0 | 1 | 2 | 3 | 4 | 5 | 6]]"
+                  :key="`hours-${day}`">
+                  <div class="px-12 py-8">
+                    <FmSwitch label-placement="right" :model-value="hours.enable" @update:model-value="
+                      (v) => {
+                        rangeSetting.operatingHours[day].enable = v
+                        rangeSetting.operatingHours[day].hours = v
+                          ? [
+                            {
+                              start: '00:00',
+                              end: '23:59'
+                            }
+                          ]
+                          : []
+                      }
+                    " :label="hours.enable ? 'Open' : 'Closed'" />
+                  </div>
+                  <div class="px-12 self-center">
+                    <div v-if="!hours.enable" class="">-</div>
+                    <div v-else class="flex flex-col">
+                      <div v-for="(hour, hi) in hours.hours" :key="hi" class="flex flex-col gap-4">
+                        <div class="flex gap-4 items-center justify-between">
+                          <div class="flex gap-12 items-center flex-1 justify-between py-8">
+                            <CustomTimePicker v-model="hour.start" :min-time="hours.hours[hi - 1]?.end ?? '00:00'"
+                              class="grow" />
+                            <div class="text-center w-16 flex-shrink-0">to</div>
+                            <CustomTimePicker v-model="hour.end" :min-time="hour.start" class="grow" />
+                          </div>
+                          <div class="mr-8 w-32 flex-shrink">
+                            <FmButton variant="plain" icon="add" v-if="hi == 0" :disabled="hours.hours.length >= 2"
+                              @click="hours.hours.push({ start: hour.end, end: '23:59' })" />
+                            <FmButton variant="plain" icon="delete" v-if="hi > 0" @click="
+                              deleteTimeRange(day as unknown as 0 | 1 | 2 | 3 | 4 | 5 | 6, hi)
+                              " />
+                          </div>
+                        </div>
+                        <div v-if="getTimeRangeError(day, hi)" class="text-sm text-red-600 ml-4">
+                          {{ getTimeRangeError(day, hi) }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </template>
+            </template>
+          </div>
+        </div>
+
+        <FmCard variant="outlined" class="grid grid-cols-[1fr_2fr]">
+          <div class="border-r py-[24px] px-16">
+            <div class="mb-24">
+              <div class="mb-8 fm-typo-en-body-lg-600 flex items-center gap-8">
+                Time Interval
+                <FmTooltip :content="'How often guests can start a reservation'">
+                  <FmIcon name="info" outline size="sm" class="cursor-pointer" />
+                </FmTooltip>
+              </div>
+              <FmRadioGroup :model-value="rangeSetting.slotInterval"
+                @update:model-value="(v: number) => updateSlotInterval(v)">
+                <FmRadio label="15 min" :value="15" />
+                <FmRadio label="30 min (default)" :value="30">
+                  <template #label>30 min <span class="text-fm-color-typo-secondary">(default)</span></template>
+                </FmRadio>
+                <FmRadio label="60 min" :value="60" />
+              </FmRadioGroup>
+            </div>
+
+            <div class="mb-24">
+              <div class="mb-8 fm-typo-en-body-lg-600 flex items-center gap-8">
+                Dining Duration
+                <FmTooltip :content="'How long a table is reserved for each booking'">
+                  <FmIcon name="info" outline size="sm" class="cursor-pointer" />
+                </FmTooltip>
+              </div>
+              <FmRadioGroup :model-value="rangeSetting.bookingDuration"
+                @update:model-value="(v: number) => updateBookingDuration(v)">
+                <FmRadio label="60 min" :value="60" />
+                <FmRadio label="90 min" :value="90">
+                  <template #label>90 min <span class="text-fm-color-typo-secondary">(default)</span></template>
+                </FmRadio>
+
+                <FmRadio label="120 min" :value="120" />
+              </FmRadioGroup>
+            </div>
+          </div>
+
+          <div class="p-16 flex flex-col gap-16">
+            <div class="flex items-center justify-between w-full">
+              <div class="fm-typo-en-body-lg-600">Available reservation slots (preview)</div>
+              <FmSelect v-model="selectedPreviewDay" :items="[
+                { label: 'Monday', value: 1 },
+                { label: 'Tuesday', value: 2 },
+                { label: 'Wednesday', value: 3 },
+                { label: 'Thursday', value: 4 },
+                { label: 'Friday', value: 5 },
+                { label: 'Saturday', value: 6 },
+                { label: 'Sunday', value: 0 }
+              ]" />
+            </div>
+
+            <template v-if="availableSlots.morning.length > 0">
+              <div class="fm-typo-en-body-md-600 text-[#4B4B4B]">Morning</div>
+              <div class="grid grid-cols-5 gap-8">
+                <div v-for="slot in displayedSlots.morning" :key="slot.time"
+                  class="border-1 rounded-md text-center p-8 transition-colors" :class="{
+                    'bg-[#fafafa] text-fm-color-typo-primary': slot.available,
+                    'bg-[#f0f0f0] text-fm-color-typo-disabled border-dashed': !slot.available
+                  }">
+                  {{ slot.time }}
+                </div>
+                <div v-if="hasMoreItems.morning && !expandedSegments.morning"
+                  class="border-2 rounded-md text-center p-8 transition-colors cursor-pointer border-fm-color-primary text-fm-color-primary"
+                  @click="toggleSegmentExpansion('morning')">
+                  more
+                </div>
+              </div>
+            </template>
+
+            <template v-if="availableSlots.afternoon.length > 0">
+              <div class="fm-typo-en-body-md-600 text-[#4B4B4B]">Afternoon</div>
+              <div class="grid grid-cols-5 gap-8">
+                <div v-for="slot in displayedSlots.afternoon" :key="slot.time"
+                  class="border-1 rounded-md text-center p-8 transition-colors" :class="{
+                    'bg-[#fafafa] text-fm-color-typo-primary': slot.available,
+                    'bg-[#f0f0f0] text-fm-color-typo-disabled border-dashed': !slot.available
+                  }">
+                  {{ slot.time }}
+                </div>
+                <div v-if="hasMoreItems.afternoon && !expandedSegments.afternoon"
+                  class="border-2 rounded-md text-center p-8 transition-colors cursor-pointer border-fm-color-primary text-fm-color-primary"
+                  @click="toggleSegmentExpansion('afternoon')">
+                  more
+                </div>
+              </div>
+            </template>
+
+            <template v-if="availableSlots.evening.length > 0">
+              <div class="fm-typo-en-body-md-600 text-[#4B4B4B]">Evening</div>
+              <div class="grid grid-cols-5 gap-8">
+                <div v-for="slot in displayedSlots.evening" :key="slot.time"
+                  class="border-1 rounded-md text-center p-8 transition-colors" :class="{
+                    'bg-[#fafafa] text-fm-color-typo-primary': slot.available,
+                    'bg-[#f0f0f0] text-fm-color-typo-disabled border-dashed': !slot.available
+                  }">
+                  {{ slot.time }}
+                </div>
+                <div v-if="hasMoreItems.evening && !expandedSegments.evening"
+                  class="border-2 rounded-md text-center p-8 transition-colors cursor-pointer border-fm-color-primary text-fm-color-primary"
+                  @click="toggleSegmentExpansion('evening')">
+                  more
+                </div>
+              </div>
+            </template>
+
+            <div v-if="
+              !rangeSetting.operatingHours[selectedPreviewDay as 0 | 1 | 2 | 3 | 4 | 5 | 6]
+                ?.enable
+            " class="text-center text-fm-color-typo-secondary flex flex-col items-center gap-16 p-24">
+              <img :src="notfound" class="aspect-square w-[150px]" />
+              Uh-oh! This outlet is closed on the selected day. <br>
+              Please select another day to view available time slots.
+            </div>
+          </div>
+        </FmCard>
+      </div>
+
+      <div class="flex flex-col">
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-4">
+          Table Capacity Settings
+        </div>
+        <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mb-24">
+          Set how many tables are available for reservation per time slot. You can reduce availability to keep tables for walk-ins.
+        </div>
+
+        <!-- Table Capacity Settings -->
+        <div>
+          <div class="grid grid-cols-[4fr_4fr_4fr_1fr]">
+            <div class="bg-fm-color-neutral-gray-100 p-12">Table Type</div>
+            <div class="bg-fm-color-neutral-gray-100 p-12">Guest Range</div>
+            <div class="bg-fm-color-neutral-gray-100 p-12 flex items-center gap-4">
+              Available Table Count
+              <FmTooltip :content="'Adjust how many tables can be booked for each time slot'">
+                <FmIcon name="info" outline size="sm" class="cursor-pointer" />
+              </FmTooltip>
+            </div>
+            <div class="bg-fm-color-neutral-gray-100 p-12"></div>
+          </div>
+          <div class="grid grid-cols-[4fr_4fr_4fr_1fr] items-center gap-8" v-for="tier in rangeSetting.capacityTiers"
+            :key="tier._id">
+            <div class="p-8">{{ tier.minPax }}{{ tier.maxPax ? `-${tier.maxPax}` : '+' }} pax</div>
+            <div class="flex items-center gap-4">
+              <FmStepperField v-model="tier.minPax" :min="1" />
+              <div>to</div>
+              <FmStepperField :model-value="tier.maxPax ?? null" @update:model-value="(v) => (tier.maxPax = v)" :min="tier.minPax" />
+            </div>
+            <div class="flex items-center gap-8">
+              <FmButton variant="tertiary" icon="remove" @click="tier.capacity--" :disabled="tier.capacity <= 1" class="!rounded-full !w-10 !h-10 !bg-fm-color-neutral-gray-100" />
+              <div class="w-32 text-center">{{ tier.capacity }}</div>
+              <FmButton variant="tertiary" icon="add" @click="tier.capacity++" class="!rounded-full !w-10 !h-10 !bg-fm-color-neutral-gray-100" />
+
+              <!-- <FmStepperField :model-value="tier.capacity ?? null" @update:model-value="(v) => (tier.capacity = v)" /> -->
+            </div>
+            <FmButton icon="delete" variant="plain" @click="
+              rangeSetting.capacityTiers.splice(rangeSetting.capacityTiers.indexOf(tier), 1)
+              " />
+          </div>
+          <div>
+            <FmButton label="Add table type" icon="add" variant="plain" @click="
+              rangeSetting.capacityTiers.push({
+                _id: generateCapacityTierId(),
+                minPax: Math.max(1, ([...rangeSetting.capacityTiers].pop()?.maxPax ?? 0) + 1),
+                maxPax: null,
+                capacity: 0
+              })
+              " />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-16">Preorder</div>
+        <FmSwitch label-placement="right" :label="'Enable preorder'"
+          :sublabel="'Enable this to allow guests to place preorders when making a reservation. This allows them to order food in advance.'"
+          :model-value="rangeSetting.enablePreorder"
+          @update:model-value="(v: boolean) => (rangeSetting.enablePreorder = v)" />
+      </div>
+
+      <div class="flex flex-col">
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-4">Guest Preferences</div>
+        <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mb-24">
+          Allow guests to select preferences during reservation, such as seating preferences,
+          allergies, or other notes.
+        </div>
+
+        <FmSwitch class="mb-8" label="Enable preferences" label-placement="right"
+          :model-value="rangeSetting.preferences.length > 0" @update:model-value="
+            (v) => {
+              if (v == true) {
+                rangeSetting.preferences = [
+                  {
+                    name: '',
+                    type: 'radio',
+                    options: []
+                  }
+                ]
+              } else {
+                rangeSetting.preferences = []
+              }
+            }
+          " />
+
+        <FmCard v-for="(preference, pIndex) in rangeSetting.preferences" class="p-16 mb-12" variant="outlined"
+          :key="pIndex">
+          <div class="fm-typo-en-body-lg-600 mb-8">Category title</div>
+          <div class="grid grid-cols-[6fr_3fr_1fr] items-start gap-24 mb-24">
+            <div>
+              <FmTextField v-model="preference.name" placeholder="Enter a name" />
+              <div class="fm-typo-en-body-md-400 text-fm-color-typo-tertiary mt-8">
+                This title will be shown to guests during reservation.
+              </div>
+            </div>
+            <CustomSelect v-model="preference.type" :items="[
+              { label: 'Single choice', value: 'radio', icon: 'radio' },
+              { label: 'Multiple choice', value: 'checkbox', icon: 'checkbox' }
+            ]" />
+            <FmButton variant="tertiary" icon="delete" @click="removePreference(pIndex)" />
+          </div>
+
+          <div v-if="preference.type == 'checkbox' || preference.type == 'radio'">
+            <div class="mb-8 fm-typo-en-body-md-600">Options</div>
+            <div v-for="(option, oIndex) in preference.options" :key="oIndex"
+              class="flex items-center gap-4 gap-y-8 mb-8">
+              <div class="flex items-center w-full">
+                <FmCheckbox v-if="preference.type == 'checkbox'" disabled :value="option" :model-value="false" readonly
+                  class="mr-8" />
+                <FmRadio v-if="preference.type == 'radio'" disabled :value="option" :model-value="false" readonly />
+
+                <!-- Editable option label -->
+                <input v-if="isEditingOption(pIndex, oIndex)" type="text"
+                  class="flex-1 outline-none border-b-2 border-fm-color-primary px-4 py-2" :value="option" @blur="
+                    (e) => saveOptionEdit(pIndex, oIndex, (e.target as HTMLInputElement).value)
+                  " @keyup.enter="
+                    (e) => saveOptionEdit(pIndex, oIndex, (e.target as HTMLInputElement).value)
+                  " ref="optionInput" />
+                <div v-else-if="option != 'Other'"
+                  class="flex-1 cursor-pointer hover:bg-fm-color-neutral-gray-100 px-4 py-2 rounded transition-colors"
+                  @click="startEditingOption(pIndex, oIndex)" title="Click to edit">
+                  {{ option }}
+                </div>
+                <div v-else-if="option == 'Other'" class="flex-1 px-4 py-2 border-b border-fm-color-neutral-gray-200">
+                  Other:
+                </div>
+              </div>
+              <FmButton variant="plain" icon="close" :class="{ 'opacity-0 pointer-events-nonex': oIndex == 0 }"
+                @click="oIndex != 0 && removePreferenceOption(preference, option)" />
+            </div>
+            <div class="flex items-center">
+              <FmCheckbox v-if="preference.type == 'checkbox'" disabled :value="null" :model-value="false" readonly />
+              <div v-if="preference.type == 'radio'" class="flex items-center">
+                <FmRadio disabled :value="null" :model-value="false" readonly />
+              </div>
+              <div class="flex items-center w-full">
+                <FmButton variant="tertiary" class="text-fm-color-typo-secondary" label="add option" @click="
+                  addPreferenceOption(preference, `Option ${preference.options.length + 1}`)
+                  ">
+                  <template #default>
+                    <div>Add option</div>
+                  </template>
+                </FmButton>
+                <template v-if="!preference.options.includes('Other')">
+                  <div>or</div>
+                  <FmButton variant="plain" label='add "Other"' @click="addPreferenceOption(preference, 'Other')" />
+                </template>
+              </div>
+            </div>
+          </div>
+        </FmCard>
+
+        <FmCard variant="outlined" class="border-dashed p-16" v-if="rangeSetting.preferences.length">
+          <FmButton label="Add another preference category" icon="add" variant="plain"
+            class="border-1 border-fm-color-primary rounded-lg" @click="addPreference" />
+        </FmCard>
+      </div>
+
+      <div class="flex flex-col">
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-4">Guest Message</div>
+        <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mb-24">
+          Add important information or notes guests should know before their visit.
+        </div>
+
+        <FmSwitch class="mb-16" label="Enable guest message" label-placement="right" :model-value="rangeSetting.guestMessage !== null && rangeSetting.guestMessage !== undefined
+          " @update:model-value="toggleGuestMessage" />
+
+        <div v-if="rangeSetting.guestMessage !== null && rangeSetting.guestMessage !== undefined">
+          <div class="mb-8 fm-typo-en-body-md-600">Message</div>
+          <FmTextarea v-model="rangeSetting.guestMessage" :maxLength="600"
+            placeholder="Please take note of the following important details before making a reservation:"
+            class="mb-4" />
+          <div class="text-right text-fm-color-typo-tertiary fm-typo-en-body-sm-400">
+            {{ rangeSetting.guestMessage?.length || 0 }} / 600 characters
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col">
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-4">Cancellation Policy</div>
+        <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mb-24">
+          Set the rules guests should follow when cancelling a reservation.
+        </div>
+
+        <FmSwitch class="mb-16" label="Enable cancellation policy" label-placement="right" :model-value="rangeSetting.cancellationPolicy !== null &&
+          rangeSetting.cancellationPolicy !== undefined
+          " @update:model-value="toggleCancellationPolicy" />
+
+        <div v-if="
+          rangeSetting.cancellationPolicy !== null &&
+          rangeSetting.cancellationPolicy !== undefined
+        ">
+          <div class="mb-8 fm-typo-en-body-md-600">Message</div>
+          <FmTextarea v-model="rangeSetting.cancellationPolicy" :maxLength="200" placeholder="Cancellation Policy"
+            class="mb-4" />
+          <div class="text-right text-fm-color-typo-tertiary fm-typo-en-body-sm-400">
+            {{ rangeSetting.cancellationPolicy?.length || 0 }} / 200 characters
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Save Button -->
+    <div class="flex mt-5">
+      <FmButton variant="primary" :label="t('order.saveAllChanges')" class="mr-auto" @click="updateReservationSetting"
+        :loading="isSaving" />
+    </div>
+  </div>
+</template>