@feedmepos/mf-order-setting 0.0.21-beta.1 → 0.0.21-beta.2

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

@@ -1,106 +1,153 @@
 <template>
-    <div>
-        <FmSwitch v-model="form.enabled" :label="t('order.displayStand')" label-placement="right"
-            @update:modelValue="updateEnabled" />
-        <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2 my-5 w-11/12" v-show="form.enabled">
-            <span class="fm-typo-en-title-sm-600">{{ t('order.tableServiceSetting') }}</span>
-            <div class="flex flex-col gap-10">
-                <!-- prefix -->
-                <!-- TODO: How to let user know this field is do for what-->
-                <FmTextField v-model="form.prefix" :label="t('order.prefix')" :placeholder="t('order.prefix')"
-                    @update:modelValue="updatePrefix" />
-            </div>
-            <div class="flex flex-row gap-2">
-                <!-- <span class="fm-typo-en-title-sm-600">Table Stand Number Range</span> -->
-                <FmStepperField class="w-1/2" v-model="form.standSlotRange.min" :label="t('order.start')" labelMark="required"
-                    :rules="minRules" :placeholder="t('order.enterANumber')" @update:modelValue="updateMin" />
-                <FmStepperField class="w-1/2" v-model="form.standSlotRange.max" :label="t('order.end')" labelMark="required"
-                    :rules="maxRules" :placeholder="t('order.enterANumber')" @update:modelValue="updateMax" />
-            </div>
-            <div>
-                <!-- pad digit -->
-                <!-- TODO: How to let user know this field is do for what-->
-                <FmStepperField v-model="form.padDigit" :label="t('order.padDigit')" labelMark="required" :rules="padDigitRules"
-                    :placeholder="t('order.padDigit')" @update:modelValue="updatePadDigit" />
-            </div>
-        </div>
+  <div>
+    <FmSwitch
+      :model-value="displayStand.enabled"
+      :label="t('order.displayStand')"
+      label-placement="right"
+      @update:model-value="updateEnabled"
+    />
+    <div
+      class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2 my-5 w-11/12"
+      v-show="displayStand.enabled"
+    >
+      <span class="fm-typo-en-title-sm-600">{{ t('order.tableServiceSetting') }}</span>
+      <div class="flex flex-col gap-10">
+        <!-- prefix -->
+        <!-- TODO: How to let user know this field is do for what-->
+        <FmTextField
+          :model-value="displayStand.prefix"
+          :label="t('order.prefix')"
+          :placeholder="t('order.prefix')"
+          @update:model-value="updatePrefix"
+        />
+      </div>
+      <div class="flex flex-row gap-2">
+        <!-- <span class="fm-typo-en-title-sm-600">Table Stand Number Range</span> -->
+        <FmStepperField
+          class="w-1/2"
+          :model-value="displayStand.standSlotRange.min"
+          :label="t('order.start')"
+          labelMark="required"
+          :rules="minRules"
+          :placeholder="t('order.enterANumber')"
+          @update:modelValue="updateMin"
+        />
+        <FmStepperField
+          class="w-1/2"
+          :model-value="displayStand.standSlotRange.max"
+          :label="t('order.end')"
+          labelMark="required"
+          :rules="maxRules"
+          :placeholder="t('order.enterANumber')"
+          @update:modelValue="updateMax"
+        />
+      </div>
+      <div>
+        <!-- pad digit -->
+        <!-- TODO: How to let user know this field is do for what-->
+        <FmStepperField
+          :model-value="displayStand.padDigit"
+          :label="t('order.padDigit')"
+          labelMark="required"
+          :rules="padDigitRules"
+          :placeholder="t('order.padDigit')"
+          @update:modelValue="updatePadDigit"
+        />
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { NumberUtil } from '@/utils/number';
-import { ObjectUtil } from '@/utils/object';
-import type { DisplayStandSettingForm } from '@/modules/order-setting/kiosk/interface';
+import { computed } from 'vue'
+import { NumberUtil } from '@/utils/number'
+import type { DisplayStandSettingForm } from '@/modules/order-setting/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
 
 interface Props {
-    displayStand: DisplayStandSettingForm;
+  displayStand: DisplayStandSettingForm
 }
 
 interface Emits {
-    (e: 'updateDisplayStand', displayStand: DisplayStandSettingForm): void
+  (e: 'updateDisplayStand', displayStand: DisplayStandSettingForm): void
 }
 
-const props = defineProps<Props>();
-const emits = defineEmits<Emits>();
-const form = ref<DisplayStandSettingForm>(ObjectUtil.clone<DisplayStandSettingForm>(props.displayStand));
+const props = defineProps<Props>()
+const emits = defineEmits<Emits>()
 
 const nonNegativeRule = (val: any) => {
-    if (val < 0) {
-        return t('order.nonNegativeRule');
-    }
-    return true;
+  if (val < 0) {
+    return t('order.nonNegativeRule')
+  }
+  return true
 }
 const greaterThanMinRule = (val: any) => {
-    if (val <= (form.value.standSlotRange.min ?? 0)) {
-        return t('order.greaterThanMinRule');
-    }
-    return true;
+  if (val <= (props.displayStand.standSlotRange.min ?? 0)) {
+    return t('order.greaterThanMinRule')
+  }
+  return true
 }
-type ErrMsg = string;
-type ValidateCallback = (val: any) => true | ErrMsg;
+type ErrMsg = string
+type ValidateCallback = (val: any) => true | ErrMsg
 
-const padDigitRules = computed<(ValidateCallback[])>(() => {
-    return [nonNegativeRule];
-});
+const padDigitRules = computed<ValidateCallback[]>(() => {
+  return [nonNegativeRule]
+})
 const minRules = computed<ValidateCallback[]>(() => {
-    return [nonNegativeRule];
-});
+  return [nonNegativeRule]
+})
 const maxRules = computed<ValidateCallback[]>(() => {
-    return [nonNegativeRule, greaterThanMinRule];
-});
+  return [nonNegativeRule, greaterThanMinRule]
+})
 
 const previewResult = computed<string>(() => {
-    const exampleValue = 5;
-    const padDigitResult = NumberUtil.applyPadDigits(exampleValue, form.value.padDigit ?? 0);
-    return `Preview: ${form.value.prefix}${padDigitResult}`;
-});
+  const exampleValue = 5
+  const padDigitResult = NumberUtil.applyPadDigits(exampleValue, props.displayStand.padDigit ?? 0)
+  return `Preview: ${props.displayStand.prefix}${padDigitResult}`
+})
 
 function updateEnabled(v: boolean) {
-    form.value.enabled = v;
-    emits('updateDisplayStand', form.value);
+  emits('updateDisplayStand', {
+    ...props.displayStand,
+    enabled: v
+  })
 }
 
 function updateMin(v: number | null) {
-    if (!v) return;
-    emits('updateDisplayStand', form.value);
+  if (!v) return
+  emits('updateDisplayStand', {
+    ...props.displayStand,
+    standSlotRange: {
+      ...props.displayStand.standSlotRange,
+      min: v
+    }
+  })
 }
 
 function updateMax(v: number | null) {
-    if (!v) return;
-    emits('updateDisplayStand', form.value);
+  if (!v) return
+  emits('updateDisplayStand', {
+    ...props.displayStand,
+    standSlotRange: {
+      ...props.displayStand.standSlotRange,
+      max: v
+    }
+  })
 }
 
 function updatePrefix(v: string) {
-    emits('updateDisplayStand', form.value);
+  emits('updateDisplayStand', {
+    ...props.displayStand,
+    prefix: v
+  })
 }
 
 function updatePadDigit(v: number | null) {
-    if (!v) return;
-    emits('updateDisplayStand', form.value);
+  if (!v) return
+  emits('updateDisplayStand', {
+    ...props.displayStand,
+    padDigit: v
+  })
 }
-
-
-</script>
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <FmSwitch
+    :model-value="v"
+    :label="`${t('order.hideNotAvailableMenuItem')}`"
+    label-placement="right"
+    @update:model-value="updateMenuItemField"
+    class="mb-5"
+  />
+</template>
+<script setup lang="ts">
+import { useI18n } from '@feedmepos/mf-common'
+const { t } = useI18n()
+
+interface Props {
+  v: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', v: boolean): void
+}
+defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const updateMenuItemField = (v: boolean) => {
+  emit('update:modelValue', v)
+}
+</script>

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

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { FdoOfflinePaymentMethod } 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 { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  paymentTypes: {
+    type: Array as PropType<F_ORDER_PAYMENT_TYPE[]>,
+    required: true
+  },
+  offlinePaymentTypes: {
+    type: Array as PropType<FdoOfflinePaymentMethod[]>,
+    required: true
+  },
+  allowEPayment: {
+    type: [Boolean, String],
+    required: true
+  },
+  ePaymentTypes: {
+    type: Object as PropType<FdoEPaymentMethod>,
+    required: true
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:paymentTypes', v: F_ORDER_PAYMENT_TYPE[]): void
+  (event: 'update:offlinePaymentTypes', v: FdoOfflinePaymentMethod[]): void
+  (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 eWalletPaymentRadioVal = ref<string>()
+const useCard = 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.card.terminal) {
+      cardPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL
+      useCard.value = true
+    } else if (props.ePaymentTypes.card.nfc) {
+      cardPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.NFC
+      useCard.value = true
+    }
+
+    if (props.ePaymentTypes.eWallet.qrPay) {
+      eWalletPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.QRPAY
+      useEwallet.value = true
+    } else if (props.ePaymentTypes.eWallet.scanPay) {
+      eWalletPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY
+      useEwallet.value = true
+    }
+  }
+}
+
+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 = {
+    card: {
+      terminal: false,
+      nfc: false
+    },
+    eWallet: {
+      qrPay: false,
+      scanPay: false
+    }
+  } as FdoEPaymentMethod
+
+  if (paymentCheckboxVal.value.includes('e-payment')) {
+    if (ev == F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL) {
+      ePaymentObj.card.terminal = true
+    }
+
+    if (ev == F_ORDER_E_PAYMENT_TYPE.enum.NFC) {
+      ePaymentObj.card.nfc = true
+    }
+
+    if (eWalletPaymentRadioVal.value) {
+      if (eWalletPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.QRPAY) {
+        ePaymentObj.eWallet.qrPay = true
+      }
+
+      if (eWalletPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY) {
+        ePaymentObj.eWallet.scanPay = true
+      }
+    }
+  }
+
+  emits('update:ePaymentTypes', ePaymentObj)
+}
+
+const handleEPaymentEWalletUpdate = () => {
+  const ePaymentObj = {
+    card: {
+      terminal: false,
+      nfc: false
+    },
+    eWallet: {
+      qrPay: false,
+      scanPay: false
+    }
+  } as FdoEPaymentMethod
+
+  if (paymentCheckboxVal.value.includes('e-payment')) {
+    if (cardPaymentRadioVal.value) {
+      if (cardPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL) {
+        ePaymentObj.card.terminal = true
+      }
+
+      if (cardPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.NFC) {
+        ePaymentObj.card.nfc = true
+      }
+    }
+
+    if (eWalletPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.QRPAY) {
+      ePaymentObj.eWallet.qrPay = true
+    }
+
+    if (eWalletPaymentRadioVal.value === F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY) {
+      ePaymentObj.eWallet.scanPay = true
+    }
+  }
+
+  emits('update:ePaymentTypes', ePaymentObj)
+}
+
+const updateCardSwitch = (enabled: boolean) => {
+  cardPaymentRadioVal.value = ''
+  if (enabled) {
+    cardPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.TERMINAL
+  }
+  handleEPaymentEWalletUpdate()
+}
+
+const updateECardSwitch = (enabled: boolean) => {
+  eWalletPaymentRadioVal.value = ''
+  if (enabled) {
+    eWalletPaymentRadioVal.value = F_ORDER_E_PAYMENT_TYPE.enum.QRPAY
+  }
+  handleEPaymentEWalletUpdate()
+}
+
+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)"
+            />
+          </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.eWallet')"
+          :sublabel="t('order.eWalletDescription')"
+          label-placement="right"
+          v-model="useEwallet"
+          @update:modelValue="updateECardSwitch"
+        />
+        <br />
+        <div v-show="useEwallet" class="ml-7">
+          <FmRadioGroup
+            v-model="eWalletPaymentRadioVal"
+            @update:model-value="handleEPaymentEWalletUpdate"
+            inline
+          >
+            <FmRadio :label="t('order.qrPay')" :value="F_ORDER_E_PAYMENT_TYPE.enum.QRPAY" />
+            <FmRadio :label="t('order.scanPay')" :value="F_ORDER_E_PAYMENT_TYPE.enum.SCANPAY" />
+          </FmRadioGroup>
+        </div>
+      </FmCardSection>
+    </FmCard>
+  </div>
+</template>

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

@@ -1,29 +1,30 @@
 <template>
-    <div>
-        <FmSwitch v-model="pickUpEnabled" :label="t('order.pickAtCounter')" label-placement="right"
-            @update:modelValue="updatePickUp" />
-    </div>
+  <div>
+    <FmSwitch
+      :model-value="enabled"
+      :label="t('order.pickAtCounter')"
+      label-placement="right"
+      @update:model-value="updatePickUp"
+    />
+  </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
 import { useI18n } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
 
 interface Props {
-    enabled: boolean,
+  enabled: boolean
 }
 
 interface Emits {
-    (e: 'update-pick-up', enabled: boolean): void
+  (e: 'update-pick-up', enabled: boolean): void
 }
 
-const props = defineProps<Props>();
-const emits = defineEmits<Emits>();
-const pickUpEnabled = ref<boolean>(props.enabled);
+defineProps<Props>()
+const emits = defineEmits<Emits>()
 
-const updatePickUp = (enabled: boolean) => {
-    pickUpEnabled.value = enabled;
-    emits('update-pick-up', enabled);
+function updatePickUp(enabled: boolean) {
+  emits('update-pick-up', enabled)
 }
-</script>
+</script>