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

package/src/stores/order-setting/mapper.ts

@@ -1,6 +1,7 @@
-import { OrderSettingsDto, OrderKioskSettings, OrderKioskDineIn, OrderKioskDineInSequenceDto, FdoOrderKioskDineInSequence } from "@entity";
-import type { MfKioskOrderSetting, MfKioskDineInSetting, MfDisplayStandSetting, KioskTakeawaySettingForm, MfKioskOrderSettingForm } from '@/modules/order-setting/kiosk/interface';
+import { OrderSettingsDto, OrderKioskDineIn, OrderKioskDineInSequenceDto, FdoOrderKioskDineInSequence, FdoEPaymentMethod } from "@entity";
+import type { MfKioskOrderSetting, MfKioskDineInSetting, MfDisplayStandSetting, KioskTakeawaySettingForm, MfKioskOrderSettingForm, MfKioskPaymentSetting } from '@/modules/order-setting/kiosk/interface';
 import type { MfOrderSetting } from "@/modules/order-setting/interface";
+import type { OrderKioskSettings, OrderKioskPaymentSetting } from "@entity";
 
 export const defaultDisplayStand: MfDisplayStandSetting = {
     enabled: false,
@@ -25,6 +26,23 @@ export const defaultKioskOrderSetting: MfKioskOrderSettingForm = {
     },
     takeaway: {
         enabled: false,
+    },
+    paymentSetting: {
+        paymentTypes: [],
+        offlinePaymentTypes: [],
+        ePaymentTypes: {
+            card: {
+                terminal: false,
+                nfc: false
+            },
+            eWallet: {
+                qrPay: false,
+                scanPay: false
+            }
+        },
+    },
+    menuItem: {
+        showAllOnly: false,
     }
 }
 
@@ -42,70 +60,74 @@ const toKiosk = (kioskOrderSettings: OrderKioskSettings, kioskDineInSeq?: OrderK
         }, kioskOrderSettings.dineIn ?? undefined),
         takeaway: {
             enabled: kioskOrderSettings?.canTakeaway ?? false
+        },
+        paymentSetting: {
+            paymentTypes: kioskOrderSettings?.paymentSetting?.paymentTypes ?? [],
+            offlinePaymentTypes: kioskOrderSettings?.paymentSetting?.offlinePaymentTypes ?? [],
+            ePaymentTypes: kioskOrderSettings?.paymentSetting?.ePaymentTypes ?? FdoEPaymentMethod.parse({
+                card: {
+                    terminal: false,
+                    nfc: false
+                },
+                eWallet: {
+                    qrPay: false,
+                    scanPay: false
+                }
+            }),
+        },
+        menuItem: {
+            showAllOnly: kioskOrderSettings.menuItem?.showAllOnly ?? false,
         }
     }
 }
 
 const toKioskDineInSetting = (kioskDineInSeq: OrderKioskDineInSequenceDto, kioskDineInSetting?: OrderKioskDineIn): MfKioskDineInSetting => {
-    if (kioskDineInSetting) {
-        const enabled = true;
-        const displayStand = kioskDineInSetting.displayStand;
-        const pickUp = kioskDineInSetting.pickUp ?? defaultPickUp;
-        return {
-            enabled,
-            sequenceNumber: kioskDineInSeq,
-            pickUp,
-            displayStand: displayStand ? {
-                enabled: displayStand.enabled,
-                standSlotRange: displayStand.standSlotRange,
-                prefix: displayStand.prefix,
-                padDigit: displayStand.padDigit,
-            } : defaultDisplayStand,
-        };
-    } else {
-        return {
-            enabled: false,
-            sequenceNumber: kioskDineInSeq,
-            displayStand: defaultDisplayStand,
-            pickUp: defaultPickUp,
-        }
+    return {
+        enabled: !!kioskDineInSetting,
+        sequenceNumber: kioskDineInSeq,
+        pickUp: kioskDineInSetting?.pickUp ?? defaultPickUp,
+        displayStand: kioskDineInSetting?.displayStand ? {
+            enabled: kioskDineInSetting.displayStand.enabled,
+            standSlotRange: kioskDineInSetting.displayStand.standSlotRange,
+            prefix: kioskDineInSetting.displayStand.prefix,
+            padDigit: kioskDineInSetting.displayStand.padDigit,
+        } : defaultDisplayStand
     }
 }
 const toOrderKioskSettingsDto = (kioskSetting: MfKioskOrderSetting): {
     kioskSettings: OrderKioskSettings,
     kioskDineIn?: OrderKioskDineInSequenceDto
 } => {
-    const toOrderKioskDineIn = (dineInSetting: MfKioskDineInSetting): { dineIn: OrderKioskDineIn, kioskDineIn?: OrderKioskDineInSequenceDto } | undefined => {
-        if (dineInSetting.enabled) {
-            return {
-                dineIn: {
-                    requiredSlot: !!dineInSetting.displayStand,
-                    displayStand: dineInSetting.displayStand,
-                    pickUp: dineInSetting.pickUp,
-                },
-                kioskDineIn: dineInSetting.sequenceNumber,
-            }
-        } else {
-            return undefined;
+    const createDineInSettings = (dineInSetting: MfKioskDineInSetting) => ({
+        requiredSlot: !!dineInSetting.displayStand,
+        displayStand: dineInSetting.displayStand,
+        pickUp: dineInSetting.pickUp
+    })
+
+    const createKioskSettings = (dineIn?: OrderKioskDineIn) => ({
+        canTakeaway: kioskSetting.takeaway.enabled,
+        dineIn,
+        menuItem: kioskSetting.menuItem,
+        paymentSetting: createPaymentSettings(kioskSetting.paymentSetting)
+    })
+
+    const createPaymentSettings = (paymentSetting: MfKioskPaymentSetting) : OrderKioskPaymentSetting | undefined => {
+        return {
+            paymentTypes: paymentSetting.paymentTypes,
+            offlinePaymentTypes: paymentSetting.offlinePaymentTypes,
+            ePaymentTypes: paymentSetting.ePaymentTypes,
         }
     }
-    const orderKioskDineIn = toOrderKioskDineIn(kioskSetting.dineIn);
-    if (orderKioskDineIn) {
-        const { dineIn, kioskDineIn } = orderKioskDineIn;
+
+    if (!kioskSetting.dineIn.enabled) {
         return {
-            kioskSettings: {
-                canTakeaway: kioskSetting.takeaway.enabled,
-                dineIn,
-            },
-            kioskDineIn,
+            kioskSettings: createKioskSettings()
         }
-    } else {
-        return {
-            kioskSettings: {
-                canTakeaway: kioskSetting.takeaway.enabled,
-                dineIn: undefined,
-            }
-        };
+    }
+
+    return {
+        kioskSettings: createKioskSettings(createDineInSettings(kioskSetting.dineIn)),
+        kioskDineIn: kioskSetting.dineIn.sequenceNumber,
     }
 }
 

package/src/views/kiosk/KioskSummary.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="p-[1.5rem] border fm-corner-radius-lg flex flex-col gap-5">
-    <span class="fm-typo-en-title-sm-600">{{ t('order.kioskSummary') }}</span>
-    <hr class="my-[0.25rem]" />
+  <div :class="dialogType ? '' : ['p-[1.5rem] border fm-corner-radius-lg flex flex-col gap-5 fixed ml-40 w-[320px]']">
+    <span v-if="!dialogType" class="fm-typo-en-title-sm-600">{{ t('order.kioskSummary') }}</span>
+    <hr v-if="!dialogType" class="my-[0.25rem]" />
     <div class="flex flex-col gap-1">
       <div class="flex flex-col gap-1">
         <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ t('order.kioskDisplay') }}</span>
@@ -34,7 +34,13 @@
           </div>
         </div>
 
-
+        <div v-if="acceptedPaymentStatus || offlinePaymentStatus">
+          <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{t('order.acceptedPayment')}}</span>
+          <div class="fm-typo-en-body-lg-600 block">
+            <div v-if="offlinePaymentStatus">{{ t('order.offlinePayment') }}</div>
+            <div>{{ acceptedPaymentStatus }}</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -45,6 +51,7 @@ import type { MfKioskDevice } from '@/modules/kiosk/interface';
 import type { MfKioskOrderSetting } from '@/modules/order-setting/kiosk/interface';
 import { computed } from 'vue'
 import { useI18n } from '@feedmepos/mf-common'
+import { F_ORDER_PAYMENT_TYPE } from '@entity'
 
 const { t } = useI18n()
 
@@ -52,6 +59,7 @@ interface Props {
   restaurantId: string,
   devices: MfKioskDevice[],
   kioskOrderSetting: MfKioskOrderSetting | undefined,
+  dialogType: boolean
   // getOrderSetting : () => MfKioskOrderSetting | undefined,
 }
 const props = defineProps<Props>();
@@ -74,4 +82,31 @@ const dineInType = computed<string>(() => {
   }
 });
 
-</script>
+const offlinePaymentStatus = computed<boolean>(() => {
+  return props.kioskOrderSetting?.paymentSetting.paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.cash) ?? false;
+});
+
+const acceptedPaymentStatus = computed<string>(() => {
+  const acceptedPayment: string[] = [];
+  props.kioskOrderSetting?.paymentSetting.paymentTypes.forEach((type) => {
+    if (type === F_ORDER_PAYMENT_TYPE.enum.ePayment) {
+      acceptedPayment.push(t('order.ePayment'));
+    }
+  });
+
+  if (
+    acceptedPayment.length > 0 &&
+    !(Object.keys(props.kioskOrderSetting!.paymentSetting.ePaymentTypes).length === 0)
+  ) {
+    const ePaymentTypes = props.kioskOrderSetting?.paymentSetting.ePaymentTypes;
+    if (ePaymentTypes!.card.terminal || ePaymentTypes!.card.nfc) {
+      acceptedPayment.push(t('order.bankCard'));
+    }
+    if (ePaymentTypes!.eWallet.scanPay || ePaymentTypes!.eWallet.qrPay) {
+      acceptedPayment.push(t('order.eWallet'));
+    }
+  }
+
+  return acceptedPayment.join(', ');
+});
+</script>

package/src/views/kiosk/KioskView.vue

@@ -1,127 +1,179 @@
 <template>
-    <div class="py-[1.5rem]">
-        <FmPageHead :title="t('order.kiosk')" />
-        <div class="flex px-[1.5rem]">
-            <div class="flex-[2_2_0%]">
-                <FmTabs v-model:model-value="selectedMenuItem" :items="menuItems"></FmTabs>
-                <div class="pt-[1.5rem]">
-                    <div class="flex flex-col gap-10">
-                        <div class="flex flex-col gap-2">
-                            <span class="fm-typo-en-title-sm-600"> {{ t('order.activateLocation') }} </span>
-                            <span class="fm-typo-en-title-sm-400"> {{ t('order.selectRestaurant') }}: </span>
-                            <FmSelect class="w-1/2" v-model="currentSelect" :items="restaurantItems" :placeholder="t('order.selectItem')"
-                                @update:model-value="selectRestaurant" />
-                        </div>
-                        <KioskDevicesView v-if="selectedMenuItem == 'device'" :devices="devices"
-                            :request-otp="requestOtp" />
-                        <KioskSettingView :key="`KioskSettingView-${currentRestaurantId}`"
-                            v-if="selectedMenuItem == 'setting'" :restaurant-id="currentRestaurantId"
-                            @update-kiosk-order-setting="updateKioskOrderSetting"
-                            :form="OrderSettingStore.state.kiosk ?? defaultKioskOrderSetting" />
-                    </div>
-                </div>
-            </div>
-            <div class="flex-[1_1_0%]">
-                <KioskSummary :restaurant-id="currentRestaurantId" :devices="devices"
-                    :kiosk-order-setting="OrderSettingStore.state.kiosk" />
+  <div class="py-[1.5rem]">
+    <FmPageHead :title="t('order.kiosk')">
+      <template #append>
+        <FmButton
+          v-show="isMobile"
+          icon="info"
+          variant="tertiary"
+          @click="openKioskSummaryDialog"
+        />
+      </template>
+    </FmPageHead>
+    <div class="flex px-[1.5rem]">
+      <div class="flex-[2_2_0%]">
+        <FmTabs v-model:model-value="selectedMenuItem" :items="menuItems"></FmTabs>
+        <div class="pt-[1.5rem]">
+          <div class="flex flex-col gap-10">
+            <div class="flex flex-col gap-2">
+              <span class="fm-typo-en-title-sm-600"> {{ t('order.activateLocation') }} </span>
+              <span class="fm-typo-en-title-sm-400"> {{ t('order.selectRestaurant') }}: </span>
+              <FmSelect
+                class="w-1/2"
+                v-model="currentSelect"
+                :items="restaurantItems"
+                :placeholder="t('order.selectItem')"
+                @update:model-value="selectRestaurant"
+              />
             </div>
+            <KioskDevicesView
+              v-if="selectedMenuItem == 'device'"
+              :devices="devices"
+              :request-otp="requestOtp"
+            />
+            <KioskSettingView
+              :key="`KioskSettingView-${currentRestaurantId}`"
+              v-if="selectedMenuItem == 'setting'"
+              :restaurant-id="currentRestaurantId"
+              @update-kiosk-order-setting="updateKioskOrderSetting"
+              :form="OrderSettingStore.state.kiosk ?? defaultKioskOrderSetting"
+            />
+          </div>
         </div>
+      </div>
+      <div v-if="!isMobile" class="flex-[1_1_0%]">
+        <KioskSummary
+          :restaurant-id="currentRestaurantId"
+          :devices="devices"
+          :kiosk-order-setting="OrderSettingStore.state.kiosk"
+          :dialogType="false"
+        />
+      </div>
     </div>
+  </div>
 </template>
+
 <script setup lang="ts">
-import KioskDevicesView from '@/views/kiosk/devices/KioskDevicesView.vue';
-import KioskSummary from '@/views/kiosk/KioskSummary.vue';
-import { useDialog, useSnackbar, type FmTabProps, type ISelectItem } from '@feedmepos/ui-library';
-import { ref, computed, defineAsyncComponent, watch } from 'vue';
-import { useKioskStore } from '@/stores/kiosk';
-import type { MfKioskDevice } from "@/modules/kiosk/interface";
-import KioskOtpDialog from "@/views/kiosk/devices/KioskOtpDialog.vue";
-import { useCoreStore, useI18n } from "@feedmepos/mf-common";
-import { useOrderSettings } from '@/stores/order-setting';
-import type { MfKioskOrderSetting } from '@/modules/order-setting/kiosk/interface';
-import { defaultKioskOrderSetting } from '@/stores/order-setting/mapper';
-import { capitalCase } from 'change-case';
-
-const { t } = useI18n();
-
-type KioskMenuItemValue = "device" | "setting";
-
-const KioskSettingView = defineAsyncComponent(() => import('@/views/kiosk/settings/KioskSettingView.vue'));
-
-const selectedMenuItem = ref<KioskMenuItemValue>('device');
-const KioskStore = useKioskStore();
-const OrderSettingStore = useOrderSettings();
-const Dialog = useDialog();
-const { currentRestaurant, restaurants, changeRestaurant } = useCoreStore();
-const SnackBar = useSnackbar();
-
-const currentSelect = ref<string | undefined>(currentRestaurant.value?._id ?? undefined);
+import KioskDevicesView from '@/views/kiosk/devices/KioskDevicesView.vue'
+import KioskSummary from '@/views/kiosk/KioskSummary.vue'
+import {
+  useDialog,
+  useSnackbar,
+  type FmTabProps,
+  type ISelectItem,
+  useBreakpoints
+} from '@feedmepos/ui-library'
+import { ref, computed, defineAsyncComponent, watch } from 'vue'
+import { useKioskStore } from '@/stores/kiosk'
+import type { MfKioskDevice } from '@/modules/kiosk/interface'
+import KioskOtpDialog from '@/views/kiosk/devices/KioskOtpDialog.vue'
+import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { useOrderSettings } from '@/stores/order-setting'
+import type { MfKioskOrderSetting } from '@/modules/order-setting/kiosk/interface'
+import { defaultKioskOrderSetting } from '@/stores/order-setting/mapper'
+import { capitalCase } from 'change-case'
+
+const { t } = useI18n()
+
+type KioskMenuItemValue = 'device' | 'setting'
+
+const KioskSettingView = defineAsyncComponent(
+  () => import('@/views/kiosk/settings/KioskSettingView.vue')
+)
+
+const selectedMenuItem = ref<KioskMenuItemValue>('device')
+const KioskStore = useKioskStore()
+const OrderSettingStore = useOrderSettings()
+const Dialog = useDialog()
+const { currentRestaurant, restaurants, changeRestaurant } = useCoreStore()
+const SnackBar = useSnackbar()
+
+const breakpoint = useBreakpoints()
+const isMobile = computed(() => breakpoint.breakpoints.value.xs)
+
+const currentSelect = ref<string | undefined>(currentRestaurant.value?._id ?? undefined)
 
 const restaurantItems = computed<ISelectItem[]>(() => {
-    return restaurants.value.map((r) => ({
-        label: r.profile.name,
-        value: r._id,
-    }));
-});
+  return restaurants.value.map((r) => ({
+    label: r.profile.name,
+    value: r._id
+  }))
+})
 
-const currentRestaurantId = ref<string>(currentRestaurant.value?._id ?? '');
+const currentRestaurantId = ref<string>(currentRestaurant.value?._id ?? '')
+
+function openKioskSummaryDialog() {
+  Dialog.open({
+    title: capitalCase(t('order.kioskSummary')),
+    contentComponent: KioskSummary,
+    contentComponentProps: {
+      restaurantId: currentRestaurant.value?._id,
+      devices: KioskStore.state.devices,
+      kioskOrderSetting: OrderSettingStore.state.kiosk,
+      dialogType: true
+    }
+  })
+}
 
 async function selectRestaurant(v: string) {
-    const restaurant = restaurants.value.find((r) => r._id == v);
-    await changeRestaurant(restaurant);
-    await OrderSettingStore.getSetting();
-    await KioskStore.getDevices();
-    currentSelect.value = v;
+  const restaurant = restaurants.value.find((r) => r._id == v)
+  await changeRestaurant(restaurant)
+  await OrderSettingStore.getSetting()
+  await KioskStore.getDevices()
+  currentSelect.value = v
 
-    currentRestaurantId.value = v;
+  currentRestaurantId.value = v
 }
 
 const menuItems = computed<FmTabProps[]>(() => [
-    {
-        label: t('order.deviceBinding'),
-        value: 'device',
-    },
-    {
-        label: t('order.settings'),
-        value: 'setting',
-    }
-]);
+  {
+    label: t('order.deviceBinding'),
+    value: 'device'
+  },
+  {
+    label: t('order.settings'),
+    value: 'setting'
+  }
+])
 
 const devices = computed<MfKioskDevice[]>(() => {
-    return KioskStore.state.devices;
-});
+  return KioskStore.state.devices
+})
 
 async function requestOtp() {
-    await KioskStore.requestOtp();
-    Dialog.open({
-        title: capitalCase(t('order.bindDevice')),
-        contentComponent: KioskOtpDialog,
-        contentComponentProps: {
-            otp: KioskStore.state.otp,
-        }
-    });
+  await KioskStore.requestOtp()
+  Dialog.open({
+    title: capitalCase(t('order.bindDevice')),
+    contentComponent: KioskOtpDialog,
+    contentComponentProps: {
+      otp: KioskStore.state.otp
+    }
+  })
 }
 
 async function updateKioskOrderSetting(form: MfKioskOrderSetting) {
-    try {
-        OrderSettingStore.setKioskOrderSetting(form);
-        await OrderSettingStore.updateKioskSetting();
-        SnackBar.open({
-            title: t('order.kioskSettingSuccess'),
-            type: 'success',
-        });
-    } catch (e) {
-        SnackBar.open({
-            title: t('order.kioskSettingFailed'),
-            type: 'error',
-        });
-    }
+  try {
+    OrderSettingStore.setKioskOrderSetting(form)
+    await OrderSettingStore.updateKioskSetting()
+    SnackBar.open({
+      title: t('order.kioskSettingSuccess'),
+      type: 'success'
+    })
+  } catch (e) {
+    SnackBar.open({
+      title: t('order.kioskSettingFailed'),
+      type: 'error'
+    })
+  }
 }
 
-watch(() => restaurants.value.length, async (_) => {
+watch(
+  () => restaurants.value.length,
+  async (_) => {
     if (currentSelect.value === undefined && restaurants.value.length > 0) {
-        await selectRestaurant(restaurants.value[0]._id)
+      await selectRestaurant(restaurants.value[0]._id)
     }
-}, { immediate: true });
-
-</script>
+  },
+  { immediate: true }
+)
+</script>

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

@@ -1,54 +1,69 @@
 <template>
-    <div class="flex flex-col gap-5">
-        <div class="flex flex-col gap-16">
-            <FmSwitch v-model="form.enabled" :label="t('order.dineIn')" label-placement="right" />
-            <div v-show="form.enabled" class="flex flex-col gap-16">
-                <KioskPickAtCounterSection v-if="form.pickUp" :enabled="form.pickUp.enabled"
-                    @update-pick-up="updatePickUp" />
-                <KioskDisplayStandSection v-if="form.displayStand" :display-stand="form.displayStand"
-                    @update-display-stand="updateDisplayStand" />
-            </div>
-        </div>
+  <div class="flex flex-col gap-5">
+    <div class="flex flex-col gap-16">
+      <FmSwitch
+        :model-value="v.enabled"
+        :label="t('order.dineIn')"
+        label-placement="right"
+        @update:model-value="updateEnabledDineIn"
+      />
+      <div v-show="v.enabled" class="flex flex-col gap-16">
+        <KioskPickAtCounterSection
+          v-if="v.pickUp"
+          :enabled="v.pickUp.enabled"
+          @update-pick-up="updatePickUp"
+        />
+        <KioskDisplayStandSection
+          v-if="v.displayStand"
+          :display-stand="v.displayStand"
+          @update-display-stand="updateDisplayStand"
+        />
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import type { DisplayStandSettingForm, KioskDineInSettingForm } from '@/modules/order-setting/kiosk/interface';
-import KioskDisplayStandSection from './KioskDisplayStandSection.vue';
-import KioskPickAtCounterSection from './KioskPickAtCounterSection.vue';
-import { ref, watch } from 'vue';
-import { ObjectUtil } from '@/utils/object';
+import type {
+  DisplayStandSettingForm,
+  KioskDineInSettingForm
+} from '@/modules/order-setting/kiosk/interface'
+import KioskDisplayStandSection from './KioskDisplayStandSection.vue'
+import KioskPickAtCounterSection from './KioskPickAtCounterSection.vue'
 import { useI18n } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
 
 interface Props {
-    getSetting: () => KioskDineInSettingForm,
-    isApplyLoading: boolean,
-    restaurantId: string
+  v: KioskDineInSettingForm
 }
 
 interface Emits {
-    (e: 'updateDineIn', setting: KioskDineInSettingForm): void
+  (e: 'updateDineIn', setting: KioskDineInSettingForm): void
 }
 
 function updatePickUp(v: boolean) {
-    form.value.pickUp = {
-        enabled: v,
-    };
-    emits('updateDineIn', form.value);
+  emits('updateDineIn', {
+    ...props.v,
+    pickUp: {
+      enabled: v
+    }
+  })
 }
 
 function updateDisplayStand(v: DisplayStandSettingForm) {
-    form.value.displayStand = v;
-    emits('updateDineIn', form.value);
+  emits('updateDineIn', {
+    ...props.v,
+    displayStand: v
+  })
 }
 
-const props = defineProps<Props>();
-const emits = defineEmits<Emits>();
-const form = ref<KioskDineInSettingForm>(ObjectUtil.clone<KioskDineInSettingForm>(props.getSetting()));
-
-watch(() => props.restaurantId, () => {
-    form.value = props.getSetting();
-})
+function updateEnabledDineIn(v: boolean) {
+  emits('updateDineIn', {
+    ...props.v,
+    enabled: v
+  })
+}
 
-</script>
+const props = defineProps<Props>()
+const emits = defineEmits<Emits>()
+</script>