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

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+import { FdoOfflinePaymentMethod, F_ORDER_PAYMENT_TYPE as _F_ORDER_PAYMENT_TYPE } from '@feedmepos/core/entity'
 import { F_ORDER_PAYMENT_TYPE, F_ORDER_E_PAYMENT_TYPE, FdoEPaymentMethod } from '@entity'
 import { type PropType, computed, onMounted, ref } from 'vue'
-import OfflinePaymentTypeDialog from '../../order-settings/dine-in/OfflinePaymentTypeDialog.vue'
+import PaymentType from '../../order-settings/dine-in/PaymentType.vue'
 import { useI18n } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
@@ -20,6 +20,10 @@ const props = defineProps({
     type: [Boolean, String],
     required: true
   },
+  allowCredit: {
+    type: [Boolean, String],
+    default: false
+  },
   ePaymentTypes: {
     type: Object as PropType<FdoEPaymentMethod>,
     required: true
@@ -32,44 +36,18 @@ const emits = defineEmits<{
   (event: 'update:ePaymentTypes', v: FdoEPaymentMethod): void
 }>()
 
-async function deleteOfflinePayment(index: number) {
-  emits(
-    'update:offlinePaymentTypes',
-    props.offlinePaymentTypes.filter((_, i) => i !== index)
-  )
-}
-
 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 || []
-
-  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.cash) || offlinePaymentTypes.length > 0
-})
-
-const parentCheckbox = ref(false)
-const paymentCheckboxVal = ref<string[]>([])
 const cardPaymentRadioVal = ref<string>()
 const eWalletPaymentCheckboxVal = ref<string[]>([])
 const useCard = ref(false)
 const useTerminal = ref(false)
 const useEwallet = ref(false)
 
-const checkboxChildren = [
-  { label: t('order.offlinePayment'), value: 'offline' },
-  { label: t('order.ePayment'), value: 'e-payment' }
-]
-
 const initializeCheckboxes = () => {
-  const initialValues: string[] = []
-  if (allowOfflinePayment.value) initialValues.push('offline')
-  if (allowEPayment.value) initialValues.push('e-payment')
-  paymentCheckboxVal.value = initialValues
-  parentCheckbox.value = initialValues.length === checkboxChildren.length
   if (!(Object.keys(props.ePaymentTypes).length === 0)) {
     if (props.ePaymentTypes.terminal) {
       useTerminal.value = true
@@ -97,54 +75,6 @@ const initializeCheckboxes = () => {
 
 initializeCheckboxes()
 
-const handleParentUpdate = (ev: boolean) => {
-  paymentCheckboxVal.value = ev ? checkboxChildren.map((item) => item.value) : []
-  parentCheckbox.value = ev
-
-  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
-  const updatedOfflinePaymentTypes = ev ? props.offlinePaymentTypes || [] : []
-
-  if (paymentCheckboxVal.value.includes('e-payment')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
-    useCard.value = true
-    useEwallet.value = true
-  }
-  if (paymentCheckboxVal.value.includes('offline')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
-  }
-
-  emits('update:paymentTypes', updatedPaymentTypes)
-  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
-  updateCardSwitch(useCard.value)
-  updateECardSwitch(useEwallet.value)
-}
-
-const handleChildUpdate = (ev: string[]) => {
-  const currentPaymentCheckboxVal = paymentCheckboxVal.value
-  paymentCheckboxVal.value = ev
-  parentCheckbox.value = ev.length === checkboxChildren.length
-
-  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
-  const updatedOfflinePaymentTypes = ev.includes('offline') ? props.offlinePaymentTypes || [] : []
-
-  if (ev.includes('e-payment')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
-  }
-  if (ev.includes('offline')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
-  }
-
-  if (!currentPaymentCheckboxVal.includes('e-payment')) {
-    useCard.value = true
-    useEwallet.value = true
-    updateCardSwitch(useCard.value)
-    updateECardSwitch(useEwallet.value)
-  }
-
-  emits('update:paymentTypes', updatedPaymentTypes)
-  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
-}
-
 const handleEPaymentCardUpdate = (ev: string) => {
   const ePaymentObj = {
     terminal: false,
@@ -158,7 +88,7 @@ const handleEPaymentCardUpdate = (ev: string) => {
     }
   } as FdoEPaymentMethod
 
-  if (paymentCheckboxVal.value.includes('e-payment')) {
+  if (allowEPayment.value) { // Check computed property instead of local state
     if (ev == F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL) {
       ePaymentObj.card.terminal = true
     }
@@ -200,7 +130,7 @@ const handleEPaymentEWalletUpdate = () => {
     }
   } as FdoEPaymentMethod
 
-  if (paymentCheckboxVal.value.includes('e-payment')) {
+  if (allowEPayment.value) {
     if (cardPaymentRadioVal.value) {
       if (cardPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL) {
         ePaymentObj.card.terminal = true
@@ -254,145 +184,103 @@ const updateECardSwitch = (enabled: boolean) => {
   handleEPaymentEWalletUpdate()
 }
 
+const handlePaymentTypesUpdate = (v: F_ORDER_PAYMENT_TYPE[]) => {
+  emits('update:paymentTypes', v)
+  if (!v.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)) {
+    useCard.value = false
+    useEwallet.value = false
+    updateCardSwitch(false)
+    updateECardSwitch(false)
+  }
+}
+
 onMounted(() => {
   initializeCheckboxes()
 })
 </script>
 <template>
-  <FmCheckbox
-    value=""
-    :model-value="parentCheckbox"
-    :label="t('order.all')"
-    :indeterminate="
-      paymentCheckboxVal.length > 0 && paymentCheckboxVal.length < checkboxChildren.length
-    "
-    @update:model-value="handleParentUpdate"
-  />
-
-  <div class="flex flex-row items-center">
-    <FmCheckbox
-      v-model="paymentCheckboxVal"
-      :label="checkboxChildren[0].label"
-      :value="checkboxChildren[0].value"
-      @update:model-value="handleChildUpdate"
-    />
-  </div>
-  <div
-    v-if="
-      paymentCheckboxVal.includes(checkboxChildren[0].value) && offlinePaymentTypes?.length === 0
-    "
-  >
-    <OfflinePaymentTypeDialog
-      @update:offline-payment-types="
-        (v: FdoOfflinePaymentMethod[]) => emits('update:offlinePaymentTypes', v)
-      "
-    />
-  </div>
-
-  <div v-if="paymentCheckboxVal.includes('offline')" class="ml-7">
-    <div v-if="offlinePaymentTypes?.length === 0">
-      <FmCard variant="outlined">
-        <FmCardSection>{{ t('order.payAtCounter') }}</FmCardSection>
-      </FmCard>
-    </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" :key="index">
-            <FmButton
-              append-icon="delete"
-              variant="tertiary"
-              @click="deleteOfflinePayment(index)"
+    <PaymentType
+      :payment-types="paymentTypes as unknown as _F_ORDER_PAYMENT_TYPE[]"
+      :offline-payment-types="offlinePaymentTypes"
+      :allow-e-payment="props.allowEPayment"
+      :allow-credit="props.allowCredit"
+      @update:payment-types="handlePaymentTypesUpdate"
+      @update:offline-payment-types="(v) => emits('update:offlinePaymentTypes', v || [])"
+    >
+      <template #e-payment-content>
+        <FmCard variant="outlined">
+          <FmCardSection>
+            <FmSwitch
+              :label="t('order.bankCard')"
+              :sublabel="t('order.cardPaymentDescription')"
+              label-placement="right"
+              v-model="useCard"
+              @update:modelValue="updateCardSwitch"
             />
-          </div>
-        </FmCardSection>
-      </FmCard>
-    </p>
-  </div>
-  <FmCheckbox
-    v-model="paymentCheckboxVal"
-    :label="checkboxChildren[1].label"
-    :value="checkboxChildren[1].value"
-    @update:model-value="handleChildUpdate"
-  />
-  <div v-if="paymentCheckboxVal.includes(checkboxChildren[1].value)" class="ml-7">
-    <FmCard variant="outlined">
-      <FmCardSection>
-        <FmSwitch
-          :label="t('order.bankCard')"
-          :sublabel="t('order.cardPaymentDescription')"
-          label-placement="right"
-          v-model="useCard"
-          @update:modelValue="updateCardSwitch"
-        />
-        <br />
-        <div v-show="useCard" class="ml-7">
-          <FmRadioGroup
-            v-model="cardPaymentRadioVal"
-            @update:model-value="handleEPaymentCardUpdate"
-            inline
-          >
-            <FmRadio :label="t('order.terminal')" :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL" />
-            <FmRadio :label="t('order.nfc')" :value="F_ORDER_E_PAYMENT_TYPE.enum.NFC" />
-          </FmRadioGroup>
-        </div>
-      </FmCardSection>
-    </FmCard>
-    <FmCard variant="outlined" class="mt-2">
-      <FmCardSection>
-        <FmSwitch
-          :label="t('order.terminal')"
-          :sublabel="t('order.terminalPaymentDescription')"
-          label-placement="right"
-          v-model="useTerminal"
-          @update:modelValue="updateCardSwitch"
-        />
-      </FmCardSection>
-    </FmCard>
-    <FmCard variant="outlined" class="mt-2">
-      <FmCardSection>
-        <FmSwitch
-          :label="t('order.eWallet')"
-          :sublabel="t('order.eWalletDescription')"
-          label-placement="right"
-          v-model="useEwallet"
-          @update:modelValue="updateECardSwitch"
-        />
-        <br />
-        <div v-show="useEwallet" class="ml-7">
-          <div class="flex flex-row gap-9">
-            <FmCheckbox
-              v-model="eWalletPaymentCheckboxVal"
-              :label="t('order.qrPay')"
-              :value="F_ORDER_E_PAYMENT_TYPE.enum.QRPAY"
-              @update:model-value="handleEPaymentEWalletUpdate"
-            />
-            <FmCheckbox
-              v-model="eWalletPaymentCheckboxVal"
-              :label="t('order.scanPay')"
-              :value="F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY"
-              @update:model-value="handleEPaymentEWalletUpdate"
-            />
-            <FmCheckbox
-              v-model="eWalletPaymentCheckboxVal"
-              :label="t('order.terminalScanPay')"
-              :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_SCAN_PAY"
-              @update:model-value="handleEPaymentEWalletUpdate"
+            <br />
+            <div v-show="useCard" class="ml-7">
+              <FmRadioGroup
+                v-model="cardPaymentRadioVal"
+                @update:model-value="handleEPaymentCardUpdate"
+                inline
+              >
+                <FmRadio :label="t('order.terminal')" :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL" />
+                <FmRadio :label="t('order.nfc')" :value="F_ORDER_E_PAYMENT_TYPE.enum.NFC" />
+              </FmRadioGroup>
+            </div>
+          </FmCardSection>
+        </FmCard>
+        <FmCard variant="outlined" class="mt-2">
+          <FmCardSection>
+            <FmSwitch
+              :label="t('order.terminal')"
+              :sublabel="t('order.terminalPaymentDescription')"
+              label-placement="right"
+              v-model="useTerminal"
+              @update:modelValue="handleEPaymentEWalletUpdate"
             />
-            <FmCheckbox
-              v-model="eWalletPaymentCheckboxVal"
-              :label="t('order.terminalQrPay')"
-              :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_QR_PAY"
-              @update:model-value="handleEPaymentEWalletUpdate"
+          </FmCardSection>
+        </FmCard>
+        <FmCard variant="outlined" class="mt-2">
+          <FmCardSection>
+            <FmSwitch
+              :label="t('order.eWallet')"
+              :sublabel="t('order.eWalletDescription')"
+              label-placement="right"
+              v-model="useEwallet"
+              @update:modelValue="updateECardSwitch"
             />
-          </div>
-        </div>
-      </FmCardSection>
-    </FmCard>
-  </div>
+            <br />
+            <div v-show="useEwallet" class="ml-7">
+              <div class="flex flex-row gap-9">
+                <FmCheckbox
+                  v-model="eWalletPaymentCheckboxVal"
+                  :label="t('order.qrPay')"
+                  :value="F_ORDER_E_PAYMENT_TYPE.enum.QRPAY"
+                  @update:model-value="handleEPaymentEWalletUpdate"
+                />
+                <FmCheckbox
+                  v-model="eWalletPaymentCheckboxVal"
+                  :label="t('order.scanPay')"
+                  :value="F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY"
+                  @update:model-value="handleEPaymentEWalletUpdate"
+                />
+                <FmCheckbox
+                  v-model="eWalletPaymentCheckboxVal"
+                  :label="t('order.terminalScanPay')"
+                  :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_SCAN_PAY"
+                  @update:model-value="handleEPaymentEWalletUpdate"
+                />
+                <FmCheckbox
+                  v-model="eWalletPaymentCheckboxVal"
+                  :label="t('order.terminalQrPay')"
+                  :value="F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL_QR_PAY"
+                  @update:model-value="handleEPaymentEWalletUpdate"
+                />
+              </div>
+            </div>
+          </FmCardSection>
+        </FmCard>
+      </template>
+    </PaymentType>
 </template>

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

@@ -217,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 ?? {}"
@@ -248,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 {
@@ -312,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,
@@ -341,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
 
@@ -376,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]
@@ -387,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/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>