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

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

@@ -22,7 +22,6 @@ 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()
@@ -39,7 +38,8 @@ const generateRangeDefaults = (index = 0) => ({
 })
 
 // Helper function to generate unique capacity tier ID
-const generateCapacityTierId = () => new Date().toISOString() + '-' + Math.random().toString(36).substr(2, 9)
+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:
 
@@ -53,21 +53,144 @@ 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: [
+function createDefaultCapacityTiers() {
+  return [
+    {
+      _id: generateCapacityTierId(),
+      minPax: 1,
+      maxPax: 2,
+      capacity: 8
+    },
+    {
+      _id: generateCapacityTierId(),
+      minPax: 3,
+      maxPax: 6,
+      capacity: 8
+    },
     {
-      ...generateRangeDefaults(0),
-      enable: false,
-      bookingDuration: 90,
-      enablePreorder: true,
-      minLeadDuration: {
-        value: 0,
-        unit: 'day'
+      _id: generateCapacityTierId(),
+      minPax: 5,
+      maxPax: 7,
+      capacity: 8
+    }
+  ]
+}
+
+function createDefaultRange(index = 0): FdoReservationRange {
+  return {
+    ...generateRangeDefaults(index),
+    enable: false,
+    bookingDuration: 90,
+    enablePreorder: true,
+    minLeadDuration: {
+      value: 0,
+      unit: 'day'
+    },
+    maxLeadDuration: {
+      value: 30,
+      unit: 'day'
+    },
+    operatingHours: {
+      0: {
+        enable: false,
+        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' }
+        ]
       },
-      maxLeadDuration: {
-        value: 30,
-        unit: 'day'
+      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: createDefaultCapacityTiers(),
+    slotInterval: 30,
+    guestMessage: DEFAULT_GUEST_MESSAGE,
+    cancellationPolicy: DEFAULT_CANCELLATION_POLICY
+  }
+}
+
+function parseTimeToMinutes(time: string) {
+  const [hours, minutes] = time.split(':').map(Number)
+  return hours * 60 + minutes
+}
+
+function isOvernightRange(range: { start: string; end: string }) {
+  return parseTimeToMinutes(range.end) <= parseTimeToMinutes(range.start)
+}
+
+function normalizeRange<T extends Partial<FdoReservationRange>>(range: T, index = 0): T {
+  const defaults = generateRangeDefaults(index)
+  return {
+    ...range,
+    _id: range._id || defaults._id,
+    name: range.name || defaults.name,
+    capacityTiers: range.capacityTiers?.length ? range.capacityTiers : createDefaultCapacityTiers()
+  }
+}
+
+function getPreviewHoursForDay(day: 0 | 1 | 2 | 3 | 4 | 5 | 6) {
+  const operatingHours = rangeSetting.value.operatingHours
+  const previousDay = ((day + 6) % 7) as 0 | 1 | 2 | 3 | 4 | 5 | 6
+  const currentDayHours = operatingHours[day]
+  const previousDayHours = operatingHours[previousDay]
+
+  const spilloverHours = previousDayHours?.enable
+    ? previousDayHours.hours
+        .filter((hour) => isOvernightRange(hour))
+        .map((hour) => ({ start: '00:00', end: hour.end }))
+    : []
+
+  const currentHours = currentDayHours?.enable ? currentDayHours.hours : []
+
+  return [...spilloverHours, ...currentHours]
+}
+
+function getPreviewOperatingHours(day: 0 | 1 | 2 | 3 | 4 | 5 | 6) {
+  const hours = getPreviewHoursForDay(day)
+  return {
+    enable: hours.length > 0,
+    hours
+  }
+}
+
+const reservationSettings = ref<FdoOrderReservationSettingsV2>({
+  ranges: [
+    {
+      ...createDefaultRange(0),
       operatingHours: {
         0: {
           enable: false,
@@ -97,12 +220,7 @@ const reservationSettings = ref<FdoOrderReservationSettingsV2>({
           enable: false,
           hours: []
         }
-      },
-      preferences: [],
-      capacityTiers: [],
-      slotInterval: 30,
-      guestMessage: DEFAULT_GUEST_MESSAGE,
-      cancellationPolicy: DEFAULT_CANCELLATION_POLICY
+      }
     }
   ],
   posCanOverbook: false,
@@ -113,95 +231,7 @@ const reservationSettings = ref<FdoOrderReservationSettingsV2>({
   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 rangeSetting = ref<FdoReservationRange>(createDefaultRange(0))
 
 const isSaving = ref(false)
 
@@ -281,9 +311,10 @@ const selectedPreset = computed(() => {
 // 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
+  const { slotInterval, bookingDuration } = rangeSetting.value
+  const previewOperatingHours = getPreviewOperatingHours(day)
 
-  if (!operatingHours[day]?.enable || !operatingHours[day].hours.length) {
+  if (!previewOperatingHours.enable) {
     return { morning: [], afternoon: [], evening: [] }
   }
 
@@ -291,7 +322,7 @@ const availableSlots = computed(() => {
   // 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],
+    previewOperatingHours,
     slotInterval,
     bookingDuration
   )
@@ -333,15 +364,13 @@ const hasMoreItems = computed(() => {
 
 const reservationPreview = computed(() => {
   const today = moment()
-  const { minLeadDuration, maxLeadDuration, operatingHours } = rangeSetting.value
+  const { minLeadDuration, maxLeadDuration } = 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
+  const startDayHours = getPreviewHoursForDay(startDate.day() as 0 | 1 | 2 | 3 | 4 | 5 | 6)
+  const endDayHours = getPreviewHoursForDay(endDate.day() as 0 | 1 | 2 | 3 | 4 | 5 | 6)
 
   // Check if hours exist for both days
   if (!startDayHours || startDayHours.length === 0 || !endDayHours || endDayHours.length === 0) {
@@ -354,11 +383,14 @@ const reservationPreview = computed(() => {
   }
 
   // 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'))
+  const startHour = [...startDayHours].sort(
+    (a, b) => parseTimeToMinutes(a.start) - parseTimeToMinutes(b.start)
   )[0]
-  const endHour = [...endDayHours].sort((a, b) =>
-    moment(b.end, 'HH:mm').diff(moment(a.end, 'HH:mm'))
+  const endHour = [...endDayHours].sort(
+    (a, b) =>
+      parseTimeToMinutes(b.end) +
+      (isOvernightRange(b) ? 24 * 60 : 0) -
+      (parseTimeToMinutes(a.end) + (isOvernightRange(a) ? 24 * 60 : 0))
   )[0]
 
   return {
@@ -431,7 +463,7 @@ async function updateReservationSetting() {
 
       // Validate with Zod schema
       const validated = ReservationSettingsSchema.parse(reservationSettings.value)
-      console.log(validated);
+      console.log(validated)
       await ReservationApi.updateReservationSetting(currentRestaurant.value._id, validated)
       await init()
     })
@@ -445,7 +477,7 @@ async function init() {
   if (currentRestaurant.value) {
     const settings = await readReservationSetting()
     reservationSettings.value = {
-      ranges: settings.ranges || [],
+      ranges: (settings.ranges || []).map((range, index) => normalizeRange(range, index)),
       posCanOverbook: settings.posCanOverbook || false,
       draftHoldTimeMinutes: settings.draftHoldTimeMinutes || 15,
       smsEnabled: settings.smsEnabled ?? true,
@@ -455,17 +487,11 @@ async function init() {
     }
     // 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]
+      rangeSetting.value = normalizeRange(settings.ranges[0], 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' },
+        ...createDefaultRange(0),
         operatingHours: {
           0: { enable: false, hours: [] },
           1: { enable: false, hours: [] },
@@ -474,12 +500,7 @@ async function init() {
           4: { enable: false, hours: [] },
           5: { enable: false, hours: [] },
           6: { enable: false, hours: [] }
-        },
-        preferences: [],
-        capacityTiers: [],
-        slotInterval: 30,
-        guestMessage: DEFAULT_GUEST_MESSAGE,
-        cancellationPolicy: DEFAULT_CANCELLATION_POLICY
+        }
       }
     }
 
@@ -632,7 +653,7 @@ function validateTimeRange(day: 0 | 1 | 2 | 3 | 4 | 5 | 6, hourIndex: number): s
 
   // Validate same day time range (end > start)
   if (!validateSameDayTimeRange(range)) {
-    return 'End time must be after start time'
+    return 'Start and end time cannot be the same'
   }
 
   // Check for overlaps with other time ranges
@@ -736,9 +757,13 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
       <div class="flex-grow fm-typo-en-title-sm-600 mb-16">
         {{ t('order.reservationStatus') }}
       </div>
-      <FmSwitch label-placement="right" :label="'Enable reservation'"
+      <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)" />
+        :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" />
@@ -791,21 +816,31 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           <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.'">
+              <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" />
+            <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"
+            <FmSwitch
+              :model-value="reservationSettings.posCanOverbook"
               @update:model-value="(v: boolean) => updateSetting('posCanOverbook', v)"
-              :label="t('order.posCanOverbook')" label-placement="right"
-              :sublabel="t('order.posCanOverbookDescription')" />
+              :label="t('order.posCanOverbook')"
+              label-placement="right"
+              :sublabel="t('order.posCanOverbookDescription')"
+            />
           </div>
         </FmCard>
       </div>
@@ -823,7 +858,8 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           <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">
+              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 }}
@@ -831,7 +867,8 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
             </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">
+              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 }}
@@ -847,8 +884,10 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
 
         <div class="mb-24">
           <div class="mb-8">Presets</div>
-          <FmRadioGroup :model-value="selectedPreset"
-            @update:model-value="(v: number | 'custom') => updateMaxLeadPreset(v)">
+          <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>
@@ -860,24 +899,35 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           </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
+            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.'">
+                  :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="[
+                <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" />
+                  ]"
+                  class="w-120"
+                />
               </div>
             </div>
 
@@ -885,18 +935,27 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
               <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.'">
+                  :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="[
+                <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" />
+                  ]"
+                  class="w-120"
+                />
               </div>
             </div>
 
@@ -909,9 +968,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
       </div>
 
       <div class="flex flex-col">
-        <div class="flex-grow fm-typo-en-title-sm-600 mb-4">
-          Time Settings
-        </div>
+        <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.
@@ -920,13 +977,19 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
         <!-- 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">
+            <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">
+            <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">
+            <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">
@@ -934,40 +997,63 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
                 {{ 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}`">
+                <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'" />
+                    <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="flex gap-12 items-center flex-1 justify-start py-8">
+                            <CustomTimePicker
+                              v-model="hour.start"
+                              :min-time="hours.hours[hi - 1]?.end ?? '00:00'"
+                            />
                             <div class="text-center w-16 flex-shrink-0">to</div>
-                            <CustomTimePicker v-model="hour.end" :min-time="hour.start" class="grow" />
+                            <CustomTimePicker
+                              v-model="hour.end"
+                              :min-time="hour.start"
+                              :restrict-min-time="false"
+                            />
                           </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)
-                              " />
+                            <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">
@@ -991,11 +1077,15 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
                   <FmIcon name="info" outline size="sm" class="cursor-pointer" />
                 </FmTooltip>
               </div>
-              <FmRadioGroup :model-value="rangeSetting.slotInterval"
-                @update:model-value="(v: number) => updateSlotInterval(v)">
+              <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>
+                  <template #label
+                    >30 min <span class="text-fm-color-typo-secondary">(default)</span></template
+                  >
                 </FmRadio>
                 <FmRadio label="60 min" :value="60" />
               </FmRadioGroup>
@@ -1008,11 +1098,15 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
                   <FmIcon name="info" outline size="sm" class="cursor-pointer" />
                 </FmTooltip>
               </div>
-              <FmRadioGroup :model-value="rangeSetting.bookingDuration"
-                @update:model-value="(v: number) => updateBookingDuration(v)">
+              <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>
+                  <template #label
+                    >90 min <span class="text-fm-color-typo-secondary">(default)</span></template
+                  >
                 </FmRadio>
 
                 <FmRadio label="120 min" :value="120" />
@@ -1023,30 +1117,39 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           <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 }
-              ]" />
+              <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="{
+                <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"
+                <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')">
+                  @click="toggleSegmentExpansion('morning')"
+                >
                   more
                 </div>
               </div>
@@ -1055,16 +1158,22 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
             <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="{
+                <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"
+                <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')">
+                  @click="toggleSegmentExpansion('afternoon')"
+                >
                   more
                 </div>
               </div>
@@ -1073,27 +1182,37 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
             <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="{
+                <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"
+                <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')">
+                  @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">
+            <div
+              v-if="
+                !availableSlots.morning.length &&
+                !availableSlots.afternoon.length &&
+                !availableSlots.evening.length
+              "
+              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>
+              Uh-oh! This outlet is closed on the selected day. <br />
               Please select another day to view available time slots.
             </div>
           </div>
@@ -1101,11 +1220,10 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
       </div>
 
       <div class="flex flex-col">
-        <div class="flex-grow fm-typo-en-title-sm-600 mb-4">
-          Table Capacity Settings
-        </div>
+        <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.
+          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 -->
@@ -1121,44 +1239,74 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
             </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="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">
+            <div class="flex items-center gap-4 pr-24">
               <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" />
+              <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" />
+              <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" />
+              <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)
-              " />
+            <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
-              })
-              " />
+            <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'"
+        <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)" />
+          @update:model-value="(v: boolean) => (rangeSetting.enablePreorder = v)"
+        />
       </div>
 
       <div class="flex flex-col">
@@ -1168,8 +1316,12 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           allergies, or other notes.
         </div>
 
-        <FmSwitch class="mb-8" label="Enable preferences" label-placement="right"
-          :model-value="rangeSetting.preferences.length > 0" @update:model-value="
+        <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 = [
@@ -1183,10 +1335,15 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
                 rangeSetting.preferences = []
               }
             }
-          " />
-
-        <FmCard v-for="(preference, pIndex) in rangeSetting.preferences" class="p-16 mb-12" variant="outlined"
-          :key="pIndex">
+          "
+        />
+
+        <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>
@@ -1195,66 +1352,125 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
                 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' }
-            ]" />
+            <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
+              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 />
+                <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="
+                <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="
+                  "
+                  @keyup.enter="
                     (e) => saveOptionEdit(pIndex, oIndex, (e.target as HTMLInputElement).value)
-                  " ref="optionInput" />
-                <div v-else-if="option != 'Other'"
+                  "
+                  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">
+                  @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">
+                <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)" />
+              <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 />
+              <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}`)
-                  ">
+                <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')" />
+                  <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
+          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>
 
@@ -1264,14 +1480,24 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           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" />
+        <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"
+          <FmTextarea
+            v-model="rangeSetting.guestMessage"
+            :maxLength="600"
             placeholder="Please take note of the following important details before making a reservation:"
-            class="mb-4" />
+            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>
@@ -1284,17 +1510,30 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           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
-        ">
+        <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" />
+          <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>
@@ -1304,8 +1543,13 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
 
     <!-- Save Button -->
     <div class="flex mt-5">
-      <FmButton variant="primary" :label="t('order.saveAllChanges')" class="mr-auto" @click="updateReservationSetting"
-        :loading="isSaving" />
+      <FmButton
+        variant="primary"
+        :label="t('order.saveAllChanges')"
+        class="mr-auto"
+        @click="updateReservationSetting"
+        :loading="isSaving"
+      />
     </div>
   </div>
 </template>