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

package/dist/{app-CwYXsqxX.js → app-DDFI8Stx.js}

@@ -3121,7 +3121,7 @@ const E = { class: "flex-1 overflow-auto" }, H = /* @__PURE__ */ b({
   {
     path: u.OrderSettingView,
     name: "Order Setting View",
-    component: () => import("./OrderSettingsView-C4aEpC1j.js")
+    component: () => import("./OrderSettingsView-DYWlafIW.js")
   }
 ], j = {
   "en-US": C,

package/dist/app.js

@@ -1,4 +1,4 @@
-import { _ as a, i as e, r as o } from "./app-CwYXsqxX.js";
+import { _ as a, i as e, r as o } from "./app-DDFI8Stx.js";
 export {
   a as FmApp,
   e as i18nMessages,

package/dist/frontend/mf-order/src/views/order-settings/reservation/CustomTimePicker.vue.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     modelValue: string;
     minTime?: string;
+    isEndTime?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;

package/dist/style.css

@@ -1 +1 @@
-.scrollbar-thin[data-v-fc459980]::-webkit-scrollbar{width:6px}.scrollbar-thin[data-v-fc459980]::-webkit-scrollbar-track{background:transparent;border-radius:3px;margin:4px 0}.scrollbar-thin[data-v-fc459980]::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.scrollbar-thin[data-v-fc459980]::-webkit-scrollbar-thumb:hover{background:#9ca3af}.time-picker-field[data-v-fc459980] .fm-text-field-input{border-width:2px;border-radius:.75rem;padding:12px 16px;font-size:1.125rem;transition:all .2s}.time-picker-field[data-v-fc459980] .fm-text-field-input:not(:focus):not(:focus-within){border-color:#d1d5db;background-color:#fff}.time-picker-field[data-v-fc459980] .fm-text-field-input:not(:focus):not(:focus-within):hover{border-color:#9ca3af}.time-picker-field.focused[data-v-fc459980] .fm-text-field-input,.time-picker-field[data-v-fc459980] .fm-text-field-input:focus,.time-picker-field[data-v-fc459980] .fm-text-field-input:focus-within{border-color:#f97316!important;background-color:#fff7ed!important}.fm-text-field-input[data-v-6a4bdab2]{font-size:1.125rem;line-height:1.75rem}
+.scrollbar-thin[data-v-cf197fa9]::-webkit-scrollbar{width:6px}.scrollbar-thin[data-v-cf197fa9]::-webkit-scrollbar-track{background:transparent;border-radius:3px;margin:4px 0}.scrollbar-thin[data-v-cf197fa9]::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.scrollbar-thin[data-v-cf197fa9]::-webkit-scrollbar-thumb:hover{background:#9ca3af}.time-picker-field[data-v-cf197fa9] .fm-text-field-input{width:140px!important;border-width:2px;border-radius:.75rem;padding:12px 16px;font-size:1.125rem;transition:all .2s}.time-picker-field[data-v-cf197fa9] .fm-text-field-input:not(:focus):not(:focus-within){border-color:#d1d5db;background-color:#fff}.time-picker-field[data-v-cf197fa9] .fm-text-field-input:not(:focus):not(:focus-within):hover{border-color:#9ca3af}.time-picker-field.focused[data-v-cf197fa9] .fm-text-field-input,.time-picker-field[data-v-cf197fa9] .fm-text-field-input:focus,.time-picker-field[data-v-cf197fa9] .fm-text-field-input:focus-within{border-color:#f97316!important;background-color:#fff7ed!important}.fm-text-field-input[data-v-6a4bdab2]{font-size:1.125rem;line-height:1.75rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-order-setting",
-  "version": "0.0.52-dev.0",
+  "version": "0.0.52-dev.2",
   "type": "module",
   "module": "./dist/app.js",
   "license": "UNLICENSED",

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

@@ -19,7 +19,7 @@
         <div>
           <div class="fm-typo-en-title-sm-600 mb-16">Configuration</div>
 
-          <div class="flex flex-col gap-12">
+          <div class="flex flex-col gap-12 pl-8">
             <!-- All Checkbox -->
             <FmCheckbox label="All" :model-value="isAllSelected" value="all" @update:model-value="toggleAll" />
 
@@ -52,9 +52,13 @@
     </template>
 
     <template #side-sheet-footer>
-      <div class="flex items-center justify-start gap-8">
-        <FmButton label="Apply" @click="handleApply" :disabled="!canApply" :loading="isLoading" />
-        <FmButton label="Cancel" variant="tertiary" @click="handleCancel" />
+      <div class="flex flex-col gap-16 w-full">
+        <FmSnackbar variant="warning" class="!shadow-none"
+          :description="`This will overwrite all reservation settings for ${targetRestaurantName}`" />
+        <div class="flex items-center justify-start gap-8">
+          <FmButton label="Apply" @click="handleApply" :disabled="!canApply" :loading="isLoading" />
+          <FmButton label="Cancel" variant="tertiary" @click="handleCancel" />
+        </div>
       </div>
     </template>
   </FmSideSheet>
@@ -62,7 +66,7 @@
 
 <script setup lang="ts">
 import { useCoreStore, useI18n } from '@feedmepos/mf-common'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ReservationApi } from '@/api/reservation'
 import { useSnackbarFunctions } from '@/components/snackbar'
 import type { FdoOrderReservationSettingsV2 } from '@entity'
@@ -105,8 +109,18 @@ const availableRestaurants = computed(() => {
     .map((r) => ({ label: r.profile.name, value: r._id }))
 })
 
-const selectedRestaurantId = ref<string>(availableRestaurants.value[0]?.value)
+const selectedRestaurantId = ref<string>('')
 
+// Watch to set initial value when availableRestaurants loads
+watch(availableRestaurants, (newRestaurants) => {
+  if (newRestaurants.length > 0 && !selectedRestaurantId.value) {
+    selectedRestaurantId.value = newRestaurants[0].value
+  }
+}, { immediate: true })
+
+const targetRestaurantName = computed(() => {
+  return currentRestaurant.value?.profile.name ?? ''
+})
 
 const isAllSelected = computed(() => {
   return Object.values(configOptions.value).every((v) => v === true)
@@ -205,6 +219,10 @@ async function handleApply() {
     // Emit the updated settings to parent
     emit('apply', updatedSettings)
 
+    // Show success with source outlet name
+    const sourceName = availableRestaurants.value.find(r => r.value === selectedRestaurantId.value)?.label ?? 'selected outlet'
+    showSuccess(`Settings from "${sourceName}" have been applied. Please review and save changes.`)
+
     // Close the side sheet
     showSheet.value = false
 

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 
 const props = defineProps<{
   modelValue: string
   minTime?: string // Optional minimum time (HH:MM format)
+  isEndTime?: boolean // Whether this is an end time picker
 }>()
 
 const emit = defineEmits<{
@@ -23,6 +24,7 @@ const timeOptions = computed(() => {
       options.push(timeString)
     }
   }
+
   options.push('23:59')
 
   // Filter out times earlier than minTime if provided
@@ -76,7 +78,28 @@ function handleFocus() {
 
 function toggleDropdown(event?: Event) {
   event?.stopPropagation()
+  // Close all other open dropdowns by dispatching a global event
+  if (!isOpen.value) {
+    window.dispatchEvent(new CustomEvent('closeTimePickers'))
+  }
   isOpen.value = !isOpen.value
+
+  // Scroll to selected time when opening
+  if (isOpen.value) {
+    nextTick(() => {
+      scrollToSelectedTime()
+    })
+  }
+}
+
+function scrollToSelectedTime() {
+  const scrollContainer = dropdownRef.value?.querySelector('.overflow-y-auto')
+  if (!scrollContainer) return
+
+  const selectedElement = scrollContainer.querySelector('[data-selected="true"]')
+  if (selectedElement) {
+    selectedElement.scrollIntoView({ block: 'center' })
+  }
 }
 
 function handleInputValue(value: string) {
@@ -97,10 +120,16 @@ function handleInputValue(value: string) {
 
 onMounted(() => {
   document.addEventListener('click', handleClickOutside)
+  window.addEventListener('closeTimePickers', () => {
+    isOpen.value = false
+  })
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('closeTimePickers', () => {
+    isOpen.value = false
+  })
 })
 </script>
 
@@ -137,6 +166,7 @@ onUnmounted(() => {
           v-for="time in timeOptions"
           :key="time"
           @click.stop="selectTime(time)"
+          :data-selected="time === displayValue"
           class="px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-gray-50"
           :class="{
             'bg-orange-50 text-orange-600 font-medium': time === displayValue
@@ -172,6 +202,7 @@ onUnmounted(() => {
 
 /* Override FmTextField styling for orange theme */
 .time-picker-field :deep(.fm-text-field-input) {
+  width: 140px !important;
   border-width: 2px;
   border-radius: 0.75rem;
   padding: 12px 16px;

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

@@ -25,10 +25,22 @@ import notfound from '@/assets/images/not-found.png'
 
 const { t } = useI18n()
 const { showSuccess } = useSnackbarFunctions()
-const { currentRestaurant } = useCoreStore()
+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
@@ -44,9 +56,9 @@ Free cancellation up to 24 hours before your reservation. Please contact the out
 const reservationSettings = ref<FdoOrderReservationSettingsV2>({
   ranges: [
     {
-      _id: '',
+      ...generateRangeDefaults(0),
       enable: false,
-      bookingDuration: 60,
+      bookingDuration: 90,
       enablePreorder: true,
       minLeadDuration: {
         value: 0,
@@ -56,7 +68,6 @@ const reservationSettings = ref<FdoOrderReservationSettingsV2>({
         value: 30,
         unit: 'day'
       },
-      name: '',
       operatingHours: {
         0: {
           enable: false,
@@ -103,9 +114,9 @@ const reservationSettings = ref<FdoOrderReservationSettingsV2>({
 })
 
 const rangeSetting = ref<FdoReservationRange>({
-  _id: '',
-  enable: true,
-  bookingDuration: 60,
+  ...generateRangeDefaults(0),
+  enable: false,
+  bookingDuration: 90,
   enablePreorder: true,
   minLeadDuration: {
     value: 0,
@@ -115,7 +126,6 @@ const rangeSetting = ref<FdoReservationRange>({
     value: 30,
     unit: 'day'
   },
-  name: '',
   operatingHours: {
     0: {
       enable: true,
@@ -164,25 +174,25 @@ const rangeSetting = ref<FdoReservationRange>({
   preferences: [],
   capacityTiers: [
     {
-      _id: '1',
+      _id: generateCapacityTierId(),
       minPax: 1,
       maxPax: 2,
       capacity: 10
     },
     {
-      _id: '2',
+      _id: generateCapacityTierId(),
       minPax: 3,
       maxPax: 4,
       capacity: 8
     },
     {
-      _id: '3',
+      _id: generateCapacityTierId(),
       minPax: 5,
       maxPax: 6,
       capacity: 5
     },
     {
-      _id: '4',
+      _id: generateCapacityTierId(),
       minPax: 7,
       maxPax: null,
       capacity: 3
@@ -533,7 +543,7 @@ function addPreference() {
   rangeSetting.value.preferences.push({
     name: '',
     type: 'radio',
-    options: ['Option 1']
+    options: []
   })
 }
 
@@ -674,8 +684,6 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
 
   // Reset custom mode when copying settings - let computed property determine state
   isCustomMode.value = false
-
-  showSuccess('Settings copied successfully. Please review and save changes.')
 }
 </script>
 
@@ -684,7 +692,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
   <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-24 w-full max-w-4xl">
+  <div v-else class="p-[1.5rem] flex flex-col gap-48 w-full max-w-4xl">
     <!-- <FmCard variant="outlined" class="p-5">
       <div class="mb-5">
         <FmSwitch
@@ -732,7 +740,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
         :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 class="ml-56 my-8">
+      <div v-if="rangeSetting.enable && isMultiOutlet" class="ml-56 my-8">
         <CopySettingsSheet :current-settings="reservationSettings" @apply="handleCopySettings" />
       </div>
     </div>
@@ -745,10 +753,16 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
         </div>
         <FmCard variant="outlined" class="p-5">
           <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))
-            " :label="t('order.draftHoldTimeMinutes')" suffix="minutes" :hint="t('order.draftHoldTimeDescription')"
+            " suffix="minutes"
               class="max-w-md" />
           </div>
           <div class="mb-5">
@@ -860,11 +874,11 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
 
       <div class="flex flex-col">
         <div class="flex-grow fm-typo-en-title-sm-600 mb-4">
-          {{ t('order.operatingWindows') }}
+          Time Settings
         </div>
         <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mb-12">
-          Set the hours your outlet is open for business. Reservations and walk-ins outside these
-          hours will not be allowed.
+          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 -->
@@ -877,7 +891,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
               Open / Closed
             </div>
             <div class="p-12 fm-typo-en-body-md-600 text-fm-color-typo-secondary bg-fm-color-neutral-gray-100">
-              Hours
+              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">
@@ -910,7 +924,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
                             <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" />
+                            <CustomTimePicker v-model="hour.end" :min-time="hour.start" :is-end-time="true" 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"
@@ -935,7 +949,12 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
         <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">Time Interval</div>
+              <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" />
@@ -947,7 +966,12 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
             </div>
 
             <div class="mb-24">
-              <div class="mb-8 fm-typo-en-body-lg-600">Dining Duration</div>
+              <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" />
@@ -975,7 +999,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
             </div>
 
             <template v-if="availableSlots.morning.length > 0">
-              <div class="fm-typo-en-body-md-600">Morning</div>
+              <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="{
@@ -993,7 +1017,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
             </template>
 
             <template v-if="availableSlots.afternoon.length > 0">
-              <div class="fm-typo-en-body-md-600">Afternoon</div>
+              <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="{
@@ -1011,7 +1035,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
             </template>
 
             <template v-if="availableSlots.evening.length > 0">
-              <div class="fm-typo-en-body-md-600">Evening</div>
+              <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="{
@@ -1042,10 +1066,10 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
 
       <div class="flex flex-col">
         <div class="flex-grow fm-typo-en-title-sm-600 mb-4">
-          {{ t('order.capacity') }}
+          Table Capacity Settings
         </div>
         <div class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mb-24">
-          Set the maximum number of guests allowed for each time slot.
+          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 -->
@@ -1053,21 +1077,26 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           <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">Available Table Count</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" />
+              <FmStepperField v-model="tier.minPax" :min="1" />
               <div>to</div>
-              <FmStepperField :model-value="tier.maxPax ?? null" @update:model-value="(v) => (tier.maxPax = v)" />
+              <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" />
+              <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++" />
+              <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>
@@ -1078,7 +1107,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           <div>
             <FmButton label="Add table type" icon="add" variant="plain" @click="
               rangeSetting.capacityTiers.push({
-                _id: new Date().toISOString(),
+                _id: generateCapacityTierId(),
                 minPax: ([...rangeSetting.capacityTiers].pop()?.maxPax ?? 0) + 1,
                 maxPax: null,
                 capacity: 0
@@ -1111,7 +1140,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
                   {
                     name: '',
                     type: 'radio',
-                    options: ['Option 1']
+                    options: []
                   }
                 ]
               } else {
@@ -1125,7 +1154,7 @@ function handleCopySettings(copiedSettings: Partial<FdoOrderReservationSettingsV
           <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" />
+              <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>