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

package/src/views/order-settings/pickup/PaymentSidesheet.vue

@@ -1,78 +1,12 @@
-<template>
-  <div>
-    <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.acceptedPayment') }}</div>
-    <FmCheckbox
-      :model-value="parent"
-      value=""
-      :label="t('order.all')"
-      @update:model-value="handleUpdate"
-      :indeterminate="nestedVal.length > 0 && nestedVal.length < checkboxChildren.length"
-    />
-    <div class="flex flex-row items-center">
-      <FmCheckbox
-        v-model="nestedVal"
-        :label="checkboxChildren[0].label"
-        :value="checkboxChildren[0].value"
-        @update:model-value="handleUpdate"
-      />
-    </div>
-    <div class="mt-3 mb-3">
-      <CustomPayment
-        :offlinePaymentTypes="localOfflinePaymentTypeCopy ?? []"
-        @update:offlinePaymentTypes="updateOfflinePaymentTypes"
-      />
-    </div>
-
-    <div v-if="nestedVal.includes(F_ORDER_PAYMENT_TYPE.enum.cash)">
-      <div v-if="localOfflinePaymentTypes?.length === 0">
-        <FmCard variant="outlined">
-          <FmCardSection>{{ t('order.cash') }}</FmCardSection>
-        </FmCard>
-      </div>
-      <p v-for="(type, i) in localOfflinePaymentTypes || []" :key="i">
-        <FmCard variant="outlined" class="mb-3">
-          <FmCardSection class="flex items-center justify-between">
-            <div>
-              <span class="font-bold">{{ type.name }}</span>
-              <br />
-              <span>{{ type.instruction }}</span>
-            </div>
-            <div>
-              <FmButton append-icon="delete" variant="plain" @click="deleteOfflinePayment(i)" />
-            </div>
-          </FmCardSection>
-        </FmCard>
-      </p>
-    </div>
-
-    <div class="m-5"></div>
-
-    <FmCheckbox
-      v-model="nestedVal"
-      :label="checkboxChildren[1].label"
-      :value="checkboxChildren[1].value"
-      @update:model-value="handleUpdate"
-      :disabled="checkboxChildren[1].disable"
-    >
-    </FmCheckbox>
-
-    <div class="text-fm-color-secondary-salmon fm-typo-en-body-sm-600 ml-7">
-      {{ checkboxChildren?.[1]?.suffix?.text }}
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import {
   F_ORDER_PAYMENT_TYPE,
-  FdoRestaurantPickup,
   FdoOfflinePaymentMethod
 } from '@feedmepos/core/entity'
-import CustomPayment from './CustomPayment.vue'
 import { useI18n } from '@feedmepos/mf-common'
+import PaymentType from '../dine-in/PaymentType.vue'
 
-import { computed, onMounted, ref } from 'vue'
-import type { CheckboxOption } from '../../../components/type'
+import { computed } from 'vue'
 
 const { t } = useI18n()
 const emits = defineEmits<{
@@ -89,118 +23,45 @@ const props = defineProps<{
   paymentTypes: F_ORDER_PAYMENT_TYPE[] | null | undefined
   offlinePaymentTypes: any
   allowEPayment: Boolean | String
+  allowCredit?: Boolean | String
 }>()
 
-const parent = computed<boolean>(() => {
-  return (
-    nestedVal.value.length ===
-    (props.allowEPayment === true
-      ? checkboxChildren.value.length
-      : checkboxChildren.value.length - 1)
-  )
-})
-const nestedVal = ref<string[]>([])
-
-const checkboxChildren = computed(() => {
-  const allowedEPayment = props.allowEPayment === true
-  const options: CheckboxOption[] = [
-    {
-      label: `${t('order.offlinePayment')}`,
-      value: F_ORDER_PAYMENT_TYPE.enum.cash
-    },
-    {
-      label: `${t('order.ePayment')}`,
-      disable: !allowedEPayment,
-      suffix: !allowedEPayment
-        ? {
-            text: `(${props.allowEPayment || t('order.notAllowed')})`,
-            class: 'text-negative t-system'
-          }
-        : {
-            text: '',
-            class: ''
-          },
-      value: F_ORDER_PAYMENT_TYPE.enum.ePayment
-    }
-  ]
-  return options
-})
-
-const allowEPayment = computed(() => {
-  const paymentTypes = props.paymentTypes || []
-  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
-})
-
-const allowOfflinePayment = computed(() => {
-  const paymentTypes = props.paymentTypes || []
-  const offlinePaymentTypes = props.offlinePaymentTypes || []
+const allowEPaymentBool = computed(() => props.allowEPayment === true)
+const allowCreditBool = computed(() => props.allowCredit === true)
 
-  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.cash) || offlinePaymentTypes.length > 0
-})
-
-onMounted(() => {
-  initializeCheckboxes()
-})
-
-const initializeCheckboxes = () => {
-  const initialValues: string[] = []
-  if (allowOfflinePayment.value) {
-    initialValues.push(F_ORDER_PAYMENT_TYPE.enum.cash)
+const disabledSuffixes = computed(() => {
+  const suffixes: Record<string, string> = {}
+  if (!allowEPaymentBool.value) {
+    suffixes['e-payment'] = typeof props.allowEPayment === 'string' ? props.allowEPayment : t('order.notAllowed')
   }
-  if (allowEPayment.value) {
-    initialValues.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
+  if (!allowCreditBool.value) {
+    suffixes['credit'] = typeof props.allowCredit === 'string' ? props.allowCredit : t('order.notAllowed')
   }
-  nestedVal.value = initialValues
-}
-
-const handleUpdate = (ev: boolean | string[]) => {
-  if (typeof ev === 'boolean') {
-    const filteredCheckboxChildren = checkboxChildren.value.filter(
-      (item) =>
-        (item.value === F_ORDER_PAYMENT_TYPE.enum.ePayment && props.allowEPayment === true) ||
-        item.value !== F_ORDER_PAYMENT_TYPE.enum.ePayment
-    )
-    nestedVal.value = ev ? filteredCheckboxChildren.map((item) => item.value) : []
-  } else {
-    nestedVal.value = ev
-  }
-  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = nestedVal.value.map((v) =>
-    F_ORDER_PAYMENT_TYPE.parse(v)
-  )
-  const updatedOfflinePaymentTypes = nestedVal.value.includes(F_ORDER_PAYMENT_TYPE.enum.cash)
-    ? props.offlinePaymentTypes || []
-    : []
-
-  emits('update:payments', {
-    paymentTypes: updatedPaymentTypes,
-    offlinePaymentTypes: updatedOfflinePaymentTypes
-  })
-}
-
-const localOfflinePaymentTypes = ref<FdoRestaurantPickup['offlinePaymentTypes']>(
-  props.offlinePaymentTypes ?? []
-)
-
-// Create a computed copy of `localOfflinePaymentTypes.value`
-const localOfflinePaymentTypeCopy = computed(() => {
-  return localOfflinePaymentTypes.value ? [...localOfflinePaymentTypes.value] : []
+  return suffixes
 })
 
-function updateOfflinePaymentTypes(v: FdoRestaurantPickup['offlinePaymentTypes']) {
-  localOfflinePaymentTypes.value = v || []
+function updatePayments(
+  paymentTypes: F_ORDER_PAYMENT_TYPE[], 
+  offlinePaymentTypes: FdoOfflinePaymentMethod[] | null | undefined
+) {
   emits('update:payments', {
-    paymentTypes: props.paymentTypes??[],
-    offlinePaymentTypes: localOfflinePaymentTypes.value
+    paymentTypes,
+    offlinePaymentTypes
   })
 }
-
-function deleteOfflinePayment(index: number) {
-  if (localOfflinePaymentTypes.value) {
-    localOfflinePaymentTypes.value.splice(index, 1)
-    emits('update:payments', {
-      paymentTypes: props.paymentTypes?? [],
-      offlinePaymentTypes: localOfflinePaymentTypes.value
-    })
-  }
-}
 </script>
+
+<template>
+  <div>
+    <PaymentType
+      :payment-types="paymentTypes || []"
+      :offline-payment-types="offlinePaymentTypes || []"
+      :allow-e-payment="allowEPaymentBool"
+      :allow-credit="allowCreditBool"
+      :show-disabled-options="true"
+      :disabled-suffixes="disabledSuffixes"
+      @update:payment-types="(v) => updatePayments(v, offlinePaymentTypes)"
+      @update:offline-payment-types="(v) => updatePayments(paymentTypes || [], v)"
+    />
+  </div>
+</template>

package/src/views/order-settings/pickup/PickUpSettingDialogContent.vue

@@ -16,6 +16,7 @@
     <PaymentSidesheet
       :offline-payment-types="pickupSetting.offlinePaymentTypes"
       :allow-e-payment="restaurantStore.getRestaurantEPayment()"
+      :allow-credit="true"
       :payment-types="pickupSetting.paymentTypes"
       @update:payments="updatePayments"
     />

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

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

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

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