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

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>

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"
     />