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

package/src/views/kiosk/settings/KioskSettingView.vue

@@ -156,6 +156,7 @@
           v-if="!getCoverImagePreview('coverImageLandscape')"
           accept="image/*"
           :max-file-size="MAX_IMAGE_FILE_SIZE"
+          content-class="w-full max-w-[400px] aspect-video"
           @file-upload="uploadCoverImage('coverImageLandscape', $event)"
           @file-rejected="handleCoverImageRejected('coverImageLandscape', $event)"
         />
@@ -163,13 +164,13 @@
           <img
             :src="getCoverImagePreview('coverImageLandscape')!"
             :alt="t('order.coverImageLandscape')"
-            class="w-full max-w-[360px] max-h-[200px] object-cover rounded-md border border-fm-color-neutral-gray-200"
-          />
-          <FmButton
-            variant="tertiary"
-            class="mr-auto"
-            :label="t('common.delete')"
-            @click="clearCoverImage('coverImageLandscape')"
+            class="max-w-[400px] aspect-video object-cover rounded-md border border-fm-color-neutral-gray-200"
+          />
+          <FmButton
+            variant="tertiary"
+            class="mr-auto"
+            :label="t('common.delete')"
+            @click="clearCoverImage('coverImageLandscape')"
           />
         </div>
       </div>
@@ -183,6 +184,7 @@
           v-if="!getCoverImagePreview('coverImagePortrait')"
           accept="image/*"
           :max-file-size="MAX_IMAGE_FILE_SIZE"
+          content-class="w-[240px] aspect-[9/16]"
           @file-upload="uploadCoverImage('coverImagePortrait', $event)"
           @file-rejected="handleCoverImageRejected('coverImagePortrait', $event)"
         />
@@ -190,13 +192,13 @@
           <img
             :src="getCoverImagePreview('coverImagePortrait')!"
             :alt="t('order.coverImagePortrait')"
-            class="w-full max-w-[360px] max-h-[200px] object-cover rounded-md border border-fm-color-neutral-gray-200"
-          />
-          <FmButton
-            variant="tertiary"
-            class="mr-auto"
-            :label="t('common.delete')"
-            @click="clearCoverImage('coverImagePortrait')"
+            class="max-w-[200px] aspect-[9/16] object-cover rounded-md border border-fm-color-neutral-gray-200"
+          />
+          <FmButton
+            variant="tertiary"
+            class="mr-auto"
+            :label="t('common.delete')"
+            @click="clearCoverImage('coverImagePortrait')"
           />
         </div>
       </div>
@@ -215,10 +217,9 @@
 
     <!-- Payment Section -->
     <div class="flex flex-col gap-2">
-      <span class="fm-typo-en-title-sm-600">{{ t('order.acceptedPayment') }}</span>
-      <span class="fm-typo-en-title-sm-400 font-bold">{{ t('order.configuration') }}</span>
       <KioskPaymentTypeSection
         :payment-types="kioskOrderSettingForm.paymentSetting.paymentTypes ?? []"
+        :allow-credit="true"
         :allow-e-payment="allowEPayment"
         :offline-payment-types="kioskOrderSettingForm.paymentSetting.offlinePaymentTypes ?? []"
         :ePaymentTypes="kioskOrderSettingForm.paymentSetting.ePaymentTypes ?? {}"
@@ -246,6 +247,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import KioskPaymentTypeSection from './KioskPaymentTypeSection.vue'
+import { useRestaurantStore } from '@/stores/restaurant'
 import { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
 import { FdoEPaymentMethod, F_ORDER_PAYMENT_TYPE } from '@entity'
 import type {
@@ -310,6 +312,22 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
     if (!isValid) return null
   }
 
+  // Validate payment settings
+  const payment = f.paymentSetting
+  if (payment?.paymentTypes?.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)) {
+    const ePayment = payment.ePaymentTypes
+    if (!ePayment) return null
+
+    const hasCard = ePayment.card?.terminal || ePayment.card?.nfc
+     const hasWallet =
+      ePayment.eWallet?.qrPay ||
+      ePayment.eWallet?.scanPay ||
+      ePayment.eWallet?.terminalScanPay ||
+      ePayment.eWallet?.terminalQrPay
+
+    if (!hasCard && !hasWallet) return null
+  }
+
   // Return the form as-is if valid, with display stand disabled when dineIn is disabled
   return {
     ...f,
@@ -339,6 +357,7 @@ function updateEPaymentSetting(form: FdoEPaymentMethod) {
   kioskOrderSettingForm.value.paymentSetting.ePaymentTypes = form
 }
 
+const restaurantStore = useRestaurantStore()
 type CoverImageField = 'coverImageLandscape' | 'coverImagePortrait'
 const MAX_IMAGE_FILE_SIZE = 10 * 1000 * 1000
 
@@ -374,10 +393,10 @@ async function uploadCoverImage(field: CoverImageField, file: File) {
   }
 }
 
-function handleCoverImageRejected(
-  field: CoverImageField,
-  rejected: { file: File; reason: string[] }[]
-) {
+function handleCoverImageRejected(
+  field: CoverImageField,
+  rejected: { file: File; reason: string[] }[]
+) {
   const fieldName =
     field === 'coverImageLandscape' ? t('order.coverImageLandscape') : t('order.coverImagePortrait')
   const firstReason = rejected[0]?.reason?.[0]
@@ -385,13 +404,12 @@ function handleCoverImageRejected(
     title: firstReason
       ? `${t('order.imageUploadRejected')}: ${fieldName} (${firstReason})`
       : `${t('order.imageUploadRejected')}: ${fieldName}`,
-    type: 'error'
-  })
-}
+    type: 'error'
+  })
+}
 
 const allowEPayment = computed(() => {
-  const paymentTypes = kioskOrderSettingForm.value.paymentSetting.paymentTypes || []
-  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
+  return restaurantStore.getRestaurantEPayment()
 })
 
 const enablePaxDialog = computed({

package/src/views/order-settings/OrderSettingsView.vue

@@ -27,6 +27,7 @@ import SmsSetting from './sms/SmsSetting.vue'
 
 import GeneralSetting from './general/GeneralSetting.vue'
 import QueueSetting from './queue/QueueSetting.vue'
+import ReservationSetting from './reservation/ReservationSetting.vue'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 import { useMenuStore } from '@/stores/menu/menu'
 import { useSnackbarFunctions } from '@/components/snackbar'
@@ -45,6 +46,7 @@ type OrderSettingMenuItemValue =
   // | 'discountRule'
   | 'general'
   | 'queue'
+  | 'reservation'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
 const settingItem = computed<FmTabProps[]>(() => [
@@ -56,7 +58,8 @@ const settingItem = computed<FmTabProps[]>(() => [
   // { label: t('order.discountRule.title'), value: 'discountRule' },
   { label: t('order.sms'), value: 'sms' },
   { label: t('order.general'), value: 'general' },
-  { label: t('order.queue'), value: 'queue' }
+  { label: t('order.queue'), value: 'queue' },
+  { label: t('order.reservation'), value: 'reservation' }
 ])
 
 const currentComponent = computed(() => {
@@ -79,6 +82,8 @@ const currentComponent = computed(() => {
       return GeneralSetting
     case 'queue':
       return QueueSetting
+    case 'reservation':
+      return ReservationSetting
   }
 })
 

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

@@ -90,6 +90,7 @@
       <PaymentType
         :payment-types="dineInSetting.paymentTypes ?? []"
         :allow-e-payment="allowEPayment"
+        :allow-credit="true"
         :offline-payment-types="dineInSetting.offlinePaymentTypes ?? []"
         @update:payment-types="(v: F_ORDER_PAYMENT_TYPE[]) => (dineInSetting.paymentTypes = v)"
         @update:offline-payment-types="

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

@@ -40,12 +40,11 @@ const openDialog = () => {
 }
 
 async function addOfflinePayment(newPaymentType: FdoOfflinePaymentMethod) {
-  const updatedOfflinePaymentTypes = [newPaymentType]
-  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
+  emits('add:offline-payment-type', newPaymentType)
 }
 
 const emits = defineEmits<{
-  (event: 'update:offlinePaymentTypes', v: FdoOfflinePaymentMethod[]): void
+  (event: 'add:offline-payment-type', v: FdoOfflinePaymentMethod): void
 }>()
 </script>
 

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

@@ -15,10 +15,22 @@ const props = defineProps({
     type: Array as PropType<FdoOfflinePaymentMethod[]>,
     required: true
   },
+  showDisabledOptions: {
+    type: Boolean,
+    default: false
+  },
+  disabledSuffixes: {
+    type: Object as PropType<Record<string, string>>,
+    default: () => ({})
+  },
   allowEPayment: {
     type: [Boolean, String],
     required: true
   },
+  allowCredit: {
+    type: [Boolean, String],
+    default: false
+  },
   maxCustomPayment: {
     type: Number,
     default: undefined
@@ -42,6 +54,11 @@ const allowEPayment = computed(() => {
   return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
 })
 
+const allowCreditPayment = computed(() => {
+  const paymentTypes = props.paymentTypes || []
+  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.credit)
+})
+
 const allowOfflinePayment = computed(() => {
   const paymentTypes = props.paymentTypes || []
   const offlinePaymentTypes = props.offlinePaymentTypes || []
@@ -52,23 +69,68 @@ const allowOfflinePayment = computed(() => {
 const parent = ref(false)
 const nestedVal = ref<string[]>([])
 
-const checkboxChildren = [
-  { label: t('order.offlinePayment'), value: 'offline' },
-  { label: t('order.ePayment'), value: 'e-payment' }
-]
+const checkboxChildren = computed(() => {
+  const options = [
+    { label: t('order.offlinePayment'), value: 'offline' },
+    { 
+      label: t('order.ePayment'), 
+      value: 'e-payment',
+      disable: !props.allowEPayment,
+      suffix: !props.allowEPayment && props.showDisabledOptions
+        ? {
+            text: `(${props.disabledSuffixes['e-payment'] || t('order.notAllowed')})`,
+            class: 'text-negative t-system'
+          }
+        : undefined
+    },
+    { 
+      label: t('order.credit'), 
+      value: 'credit',
+      disable: !props.allowCredit,
+      suffix: !props.allowCredit && props.showDisabledOptions
+        ? {
+            text: `(${props.disabledSuffixes['credit'] || t('order.notAllowed')})`,
+            class: 'text-negative t-system'
+          }
+        : undefined
+    }
+  ]
+  return options
+})
 
 const initializeCheckboxes = () => {
   const initialValues: string[] = []
   if (allowOfflinePayment.value) initialValues.push('offline')
   if (allowEPayment.value) initialValues.push('e-payment')
+  if (allowCreditPayment.value) initialValues.push('credit')
   nestedVal.value = initialValues
-  parent.value = initialValues.length === checkboxChildren.length
+
+  let availableOptionsCount = 0
+  if (props.showDisabledOptions) {
+     availableOptionsCount = checkboxChildren.value.length
+  } else {
+    availableOptionsCount = checkboxChildren.value.filter(item => {
+      if (item.value === 'e-payment' && !props.allowEPayment) return false
+      if (item.value === 'credit' && !props.allowCredit) return false
+      return true
+    }).length
+  }
+
+  parent.value = initialValues.length === availableOptionsCount && initialValues.length > 0
 }
 
 initializeCheckboxes()
 
 const handleParentUpdate = (ev: boolean) => {
-  nestedVal.value = ev ? checkboxChildren.map((item) => item.value) : []
+  const availableOptions = checkboxChildren.value.filter(item => {
+    // If showDisabledOptions is true, we might allow selecting it? NO, usually disabled checkboxes are not selectable.
+    // So we should only select enabled ones.
+    if (item.value === 'e-payment' && !props.allowEPayment) return false
+    if (item.value === 'credit' && !props.allowCredit) return false
+    return true
+  })
+  
+  nestedVal.value = ev ? availableOptions.map((item) => item.value) : []
   parent.value = ev
 
   const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
@@ -80,6 +142,9 @@ const handleParentUpdate = (ev: boolean) => {
   if (nestedVal.value.includes('offline')) {
     updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
   }
+  if (nestedVal.value.includes('credit')) {
+    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.credit)
+  }
 
   emits('update:paymentTypes', updatedPaymentTypes)
   emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
@@ -87,7 +152,30 @@ const handleParentUpdate = (ev: boolean) => {
 
 const handleChildUpdate = (ev: string[]) => {
   nestedVal.value = ev
-  parent.value = ev.length === checkboxChildren.length
+  
+  let availableOptionsCount = 0
+  if (props.showDisabledOptions) {
+     availableOptionsCount = checkboxChildren.value.length
+  } else {
+    availableOptionsCount = checkboxChildren.value.filter(item => {
+      if (item.value === 'e-payment' && !props.allowEPayment) return false
+      if (item.value === 'credit' && !props.allowCredit) return false
+      return true
+    }).length
+  }
+  
+  // If we have disabled options shown, the parent checkbox logic might be tricky.
+  // Usually parent is checked if ALL *checked* options are checked? No, all *available* options.
+  // If e-payment is disabled, can we toggle parent?
+  // Let's assume parent toggles all ENABLED options. 
+  // And parent is checked if all ENABLED options are checked.
+  const enabledOptionsCount = checkboxChildren.value.filter(item => {
+      if (item.value === 'e-payment' && !props.allowEPayment) return false
+      if (item.value === 'credit' && !props.allowCredit) return false
+      return true
+  }).length
+
+  parent.value = ev.length === enabledOptionsCount && ev.length > 0
 
   const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
   const updatedOfflinePaymentTypes = ev.includes('offline') ? props.offlinePaymentTypes || [] : []
@@ -98,6 +186,9 @@ const handleChildUpdate = (ev: string[]) => {
   if (ev.includes('offline')) {
     updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
   }
+  if (ev.includes('credit')) {
+    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.credit)
+  }
 
   emits('update:paymentTypes', updatedPaymentTypes)
   emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
@@ -117,41 +208,58 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.acceptedPayment') }}</div>
-  <FmCheckbox value="" :model-value="parent" :label="t('order.all')"
-    :indeterminate="nestedVal.length > 0 && nestedVal.length < checkboxChildren.length"
-    @update:model-value="handleParentUpdate" />
-
-  <div class="flex flex-row items-center">
-    <FmCheckbox v-model="nestedVal" :label="checkboxChildren[0].label" :value="checkboxChildren[0].value"
-      @update:model-value="handleChildUpdate" />
-  </div>
-  <div v-if="nestedVal.includes(checkboxChildren[0].value) && offlinePaymentTypes?.length === 0">
-    <OfflinePaymentTypeDialog @update:offline-payment-types="(v: FdoOfflinePaymentMethod[] | undefined | null) => emits('update:offlinePaymentTypes', v)
-      " />
-  </div>
-
-  <div v-if="nestedVal.includes('offline')">
-    <div v-if="offlinePaymentTypes?.length === 0">
-      <FmCard variant="outlined">
-        <FmCardSection>{{ t('order.cash') }}</FmCardSection>
-      </FmCard>
+  <div class="flex flex-col gap-3">
+    <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.acceptedPayment') }}</div>
+    <FmCheckbox value="" :model-value="parent" :label="t('order.all')"
+      :indeterminate="nestedVal.length > 0 && !parent"
+      @update:model-value="handleParentUpdate" />
+
+    <div class="flex flex-row items-center">
+      <FmCheckbox v-model="nestedVal" :label="checkboxChildren[0].label" :value="checkboxChildren[0].value"
+        @update:model-value="handleChildUpdate" />
+    </div>
+    <div v-if="nestedVal.includes(checkboxChildren[0].value)">
+      <div v-if="offlinePaymentTypes?.length === 0">
+        <FmCard variant="outlined">
+          <FmCardSection>{{ t('order.cash') }}</FmCardSection>
+        </FmCard>
+      </div>
+      <p v-for="(type, i) in offlinePaymentTypes" :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 class="mt-3">
+      <OfflinePaymentTypeDialog v-if="offlinePaymentTypes.length === 0 || showDisabledOptions" @add:offline-payment-type="(v: FdoOfflinePaymentMethod) => emits('update:offlinePaymentTypes', [...props.offlinePaymentTypes, v])
+        " />
+      </div>
+    </div>
+
+    <FmCheckbox v-model="nestedVal" :label="checkboxChildren[1].label" :value="checkboxChildren[1].value"
+      @update:model-value="handleChildUpdate" :disabled="checkboxChildren[1].disable" />
+
+    <div class="text-fm-color-secondary-salmon fm-typo-en-body-sm-600 ml-7" v-if="checkboxChildren[1].suffix">
+        {{ checkboxChildren?.[1]?.suffix?.text }}
+    </div>
+
+    <div v-if="nestedVal.includes('e-payment')" class="ml-7">
+      <slot name="e-payment-content"></slot>
+    </div>
+      
+    <FmCheckbox v-if="allowCredit || showDisabledOptions" v-model="nestedVal" :label="checkboxChildren[2].label" :value="checkboxChildren[2].value"
+      @update:model-value="handleChildUpdate" :disabled="checkboxChildren[2].disable" />
+      
+    <div class="text-fm-color-secondary-salmon fm-typo-en-body-sm-600 ml-7" v-if="checkboxChildren[2].suffix">
+        {{ checkboxChildren?.[2]?.suffix?.text }}
     </div>
-    <p v-for="(type, i) in offlinePaymentTypes" :key="i">
-      <FmCard variant="outlined">
-        <FmCardSection class="flex items-center justify-between">
-          <div>
-            <span class="font-bold">{{ type.name }}</span>
-            <br />
-            <span>{{ type.instruction }}</span>
-          </div>
-          <div v-for="(payment, index) in offlinePaymentTypes">
-            <FmButton append-icon="delete" variant="tertiary" @click="deleteOfflinePayment(index)" />
-          </div>
-        </FmCardSection>
-      </FmCard>
-    </p>
-  </div>
-  <FmCheckbox v-model="nestedVal" :label="checkboxChildren[1].label" :value="checkboxChildren[1].value"
-    @update:model-value="handleChildUpdate" />
+   </div>
 </template>