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

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

@@ -1,142 +1,203 @@
 <template>
-    <div v-if="!!kioskOrderSettingForm" class="flex flex-col gap-32">
-        <div class="flex flex-col gap-2">
-            <span class="fm-typo-en-title-sm-600">{{ t('order.dineIn') }}</span>
-            <KioskDineInSection :key="'dine-in-' + restaurantId" :restaurant-id="restaurantId"
-                :is-apply-loading="isLoading" :get-setting="() => kioskOrderSettingForm!.dineIn"
-                @update-dine-in="updateDineInSetting" />
-        </div>
-        <div class="flex flex-col gap-2">
-            <span class="fm-typo-en-title-sm-600">{{ t('order.takeawayTitle') }}</span>
-            <KioskTakeawaySection :key="'takeaway-' + restaurantId" :restaurant-id="restaurantId"
-                :is-apply-loading="isLoading" :get-setting="() => kioskOrderSettingForm!.takeaway"
-                @update-takeaway="updateTakeawaySetting" />
-        </div>
-        <FmButton class="w-1/4 mb-10" variant="primary" :label="t('order.updateSetting')" :disabled="!validKioskOrderSetting"
-            @click="submitForm" />
+  <div v-if="!!kioskOrderSettingForm" class="flex flex-col gap-32">
+    <div class="flex flex-col gap-2">
+      <span class="fm-typo-en-title-sm-600">{{ t('order.dineIn') }}</span>
+      <KioskDineInSection
+        :key="'dine-in-' + restaurantId"
+        :v="kioskOrderSettingForm.dineIn"
+        @update-dine-in="updateDineInSetting"
+      />
     </div>
-    <div v-else>
-        {{ t('order.pleaseSelectRestaurant') }}
+    <div class="flex flex-col gap-2">
+      <span class="fm-typo-en-title-sm-600">{{ t('order.takeawayTitle') }}</span>
+      <KioskTakeawaySection
+        :key="'takeaway-' + restaurantId"
+        :v="kioskOrderSettingForm.takeaway"
+        @update-takeaway="updateTakeawaySetting"
+      />
     </div>
+    <div class="flex flex-col gap-2">
+    <span class="fm-typo-en-title-sm-600">{{ t('order.menuItem') }}</span>
+      <KioskMenuItemSection
+        :key="'menu-item-' + restaurantId"
+        :v="kioskOrderSettingForm.menuItem.showAllOnly"
+        @update:model-value="updateMenuItemSetting"
+      />
+    </div>
+    <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-e-payment="allowEPayment"
+        :offline-payment-types="kioskOrderSettingForm.paymentSetting.offlinePaymentTypes ?? []"
+        :ePaymentTypes="kioskOrderSettingForm.paymentSetting.ePaymentTypes ?? {}"
+        @update:payment-types="updatePaymentSetting"
+        @update:offline-payment-types="
+          (v: FdoOfflinePaymentMethod[]) =>
+            (kioskOrderSettingForm.paymentSetting.offlinePaymentTypes = v)
+        "
+        @update:ePaymentTypes="updateEPaymentSetting"
+        />
+    </div>
+    <FmButton
+      class="w-1/4 mb-10"
+      variant="primary"
+      :label="t('order.updateSetting')"
+      :disabled="!validKioskOrderSetting"
+      @click="submitForm"
+    />
+  </div>
+  <div v-else>
+    {{ t('order.pleaseSelectRestaurant') }}
+  </div>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import KioskDineInSection from './KioskDineInSection.vue';
-import KioskTakeawaySection from './KioskTakeawaySection.vue';
-import type { KioskDineInSettingForm, KioskTakeawaySettingForm, MfKioskOrderSetting, MfKioskOrderSettingForm, } from '@/modules/order-setting/kiosk/interface';
-import { useLoading } from '@/composables/loading';
-import { useSnackbar } from '@feedmepos/ui-library';
-import { useI18n } from '@feedmepos/mf-common';
+import { computed, ref } from 'vue'
+import KioskDineInSection from './KioskDineInSection.vue'
+import KioskTakeawaySection from './KioskTakeawaySection.vue'
+import KioskPaymentTypeSection from './KioskPaymentTypeSection.vue'
+import { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+import { FdoEPaymentMethod, F_ORDER_PAYMENT_TYPE } from '@entity'
+import KioskMenuItemSection from './KioskMenuItemSection.vue'
+import type {
+  KioskDineInSettingForm,
+  KioskTakeawaySettingForm,
+  MfKioskOrderSetting,
+  MfKioskOrderSettingForm,
+  KioskPaymentTypesForm
+} from '@/modules/order-setting/kiosk/interface'
+import { useLoading } from '@/composables/loading'
+import { useSnackbar } from '@feedmepos/ui-library'
+import { useI18n } from '@feedmepos/mf-common'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 interface Props {
-    restaurantId: string,
-    form: MfKioskOrderSettingForm,
+  restaurantId: string
+  form: MfKioskOrderSettingForm
 }
 
-const props = defineProps<Props>();
+const props = defineProps<Props>()
 
-const SnackBar = useSnackbar();
+const SnackBar = useSnackbar()
 
 interface Emits {
-    (e: 'updateKioskOrderSetting', form: MfKioskOrderSetting): Promise<void>
+  (e: 'updateKioskOrderSetting', form: MfKioskOrderSetting): Promise<void>
 }
 
-const emits = defineEmits<Emits>();
+const emits = defineEmits<Emits>()
 
-const kioskOrderSettingForm = ref<MfKioskOrderSettingForm>(props.form);
+const kioskOrderSettingForm = ref<MfKioskOrderSettingForm>(props.form)
 
 const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
-    const f = kioskOrderSettingForm.value;
-    if (!f.dineIn.enabled) {
-        return {
-            dineIn: {
-                enabled: f.dineIn.enabled,
-                sequenceNumber: f.dineIn.sequenceNumber,
-                pickUp: f.dineIn.pickUp,
-                displayStand: {
-                    enabled: false,
-                    padDigit: f.dineIn.displayStand.padDigit ?? 0,
-                    standSlotRange: {
-                        min: f.dineIn.displayStand.standSlotRange.min ?? 0,
-                        max: f.dineIn.displayStand.standSlotRange.max ?? 10,
-                    },
-                    prefix: f.dineIn.displayStand.prefix ?? '',
-                },
-            },
-            takeaway: f.takeaway,
+  const f = kioskOrderSettingForm.value
+  if (!f.dineIn.enabled) {
+    return {
+      ...f,
+      dineIn: {
+        enabled: f.dineIn.enabled,
+        sequenceNumber: f.dineIn.sequenceNumber,
+        pickUp: f.dineIn.pickUp,
+        displayStand: {
+          enabled: false,
+          padDigit: f.dineIn.displayStand.padDigit ?? 0,
+          standSlotRange: {
+            min: f.dineIn.displayStand.standSlotRange.min ?? 0,
+            max: f.dineIn.displayStand.standSlotRange.max ?? 10
+          },
+          prefix: f.dineIn.displayStand.prefix ?? ''
         }
+      }
     }
-    if (f.dineIn.enabled && f.dineIn.displayStand.enabled) {
-        const displayStand = f.dineIn.displayStand;
-
-        if (displayStand.padDigit != null && displayStand.padDigit >= 0
-            && !!displayStand.standSlotRange.min
-            && !!displayStand.standSlotRange.max
-            && displayStand.standSlotRange.min <= displayStand.standSlotRange.max) {
-            return {
-                dineIn: {
-                    enabled: f.dineIn.enabled,
-                    sequenceNumber: f.dineIn.sequenceNumber,
-                    pickUp: f.dineIn.pickUp,
-                    displayStand: {
-                        enabled: displayStand.enabled,
-                        padDigit: displayStand.padDigit,
-                        standSlotRange: {
-                            min: displayStand.standSlotRange.min,
-                            max: displayStand.standSlotRange.max,
-                        },
-                        prefix: displayStand.prefix ?? '',
-                    },
-                },
-                takeaway: f.takeaway,
-            };
+  }
+  if (f.dineIn.enabled && f.dineIn.displayStand.enabled) {
+    const displayStand = f.dineIn.displayStand
+
+    if (
+      displayStand.padDigit != null &&
+      displayStand.padDigit >= 0 &&
+      !!displayStand.standSlotRange.min &&
+      !!displayStand.standSlotRange.max &&
+      displayStand.standSlotRange.min <= displayStand.standSlotRange.max
+    ) {
+      return {
+        ...f,
+        dineIn: {
+          enabled: f.dineIn.enabled,
+          sequenceNumber: f.dineIn.sequenceNumber,
+          pickUp: f.dineIn.pickUp,
+          displayStand: {
+            enabled: displayStand.enabled,
+            padDigit: displayStand.padDigit,
+            standSlotRange: {
+              min: displayStand.standSlotRange.min,
+              max: displayStand.standSlotRange.max
+            },
+            prefix: displayStand.prefix ?? ''
+          }
         }
-        return null;
+      }
     }
-    return {
-        dineIn: {
-            enabled: f.dineIn.enabled,
-            sequenceNumber: f.dineIn.sequenceNumber,
-            pickUp: f.dineIn.pickUp,
-            displayStand: {
-                enabled: false,
-                padDigit: f.dineIn.displayStand.padDigit ?? 0,
-                standSlotRange: {
-                    min: f.dineIn.displayStand.standSlotRange.min ?? 0,
-                    max: f.dineIn.displayStand.standSlotRange.max ?? 10,
-                },
-                prefix: f.dineIn.displayStand.prefix ?? '',
-            }
+    return null
+  }
+  return {
+    ...f,
+    dineIn: {
+      enabled: f.dineIn.enabled,
+      sequenceNumber: f.dineIn.sequenceNumber,
+      pickUp: f.dineIn.pickUp,
+      displayStand: {
+        enabled: false,
+        padDigit: f.dineIn.displayStand.padDigit ?? 0,
+        standSlotRange: {
+          min: f.dineIn.displayStand.standSlotRange.min ?? 0,
+          max: f.dineIn.displayStand.standSlotRange.max ?? 10
         },
-        takeaway: f.takeaway,
-    };
-});
+        prefix: f.dineIn.displayStand.prefix ?? ''
+      }
+    }
+  }
+})
 
-const { startAsyncCall, isLoading } = useLoading();
+const { startAsyncCall } = useLoading()
 
 async function updateDineInSetting(form: KioskDineInSettingForm) {
-    kioskOrderSettingForm.value.dineIn = form;
+  kioskOrderSettingForm.value.dineIn = form
 }
 
 async function updateTakeawaySetting(form: KioskTakeawaySettingForm) {
-    kioskOrderSettingForm.value.takeaway = form;
+  kioskOrderSettingForm.value.takeaway = form
 }
 
-async function submitForm() {
-    if (validKioskOrderSetting.value) {
-        const kioskOrderSetting = validKioskOrderSetting.value;
-        startAsyncCall(async () => {
-            await emits('updateKioskOrderSetting', kioskOrderSetting);
-        });
-    } else {
-        SnackBar.open({
-            title: t('order.failedToUpdateSetting'),
-            type: 'error',
-        });
-    }
+async function updateMenuItemSetting(v: boolean) {
+  kioskOrderSettingForm.value.menuItem.showAllOnly = v
 }
 
+async function updatePaymentSetting(form: KioskPaymentTypesForm) {
+    kioskOrderSettingForm.value.paymentSetting.paymentTypes = form;
+}
 
-</script>
+async function updateEPaymentSetting(form: FdoEPaymentMethod) {
+    kioskOrderSettingForm.value.paymentSetting.ePaymentTypes = form;
+}
+
+const allowEPayment = computed(() => {
+    const paymentTypes = kioskOrderSettingForm.value.paymentSetting.paymentTypes || [];
+    return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment);
+})
+
+async function submitForm() {
+  if (validKioskOrderSetting.value) {
+    const kioskOrderSetting = validKioskOrderSetting.value
+    startAsyncCall(async () => {
+      await emits('updateKioskOrderSetting', kioskOrderSetting)
+    })
+  } else {
+    SnackBar.open({
+      title: t('order.failedToUpdateSetting'),
+      type: 'error'
+    })
+  }
+}
+</script>

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

@@ -1,38 +1,32 @@
 <template>
-    <div>
-        <FmSwitch v-model="form.enabled" :label="t('order.takeaway')" label-placement="right"
-            @update:model-value="updateTakeawaySetting" class="mb-5" />
-    </div>
+  <div>
+    <FmSwitch
+      :model-value="v.enabled"
+      :label="t('order.takeaway')"
+      label-placement="right"
+      @update:model-value="updateTakeawaySetting"
+      class="mb-5"
+    />
+  </div>
 </template>
 <script setup lang="ts">
-import type { KioskTakeawaySettingForm } from '@/modules/order-setting/kiosk/interface';
-import { ref, watch } from 'vue';
-import { ObjectUtil } from '@/utils/object';
+import type { KioskTakeawaySettingForm } from '@/modules/order-setting/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
 
 interface Props {
-    getSetting: () => KioskTakeawaySettingForm,
-    isApplyLoading: boolean,
-    restaurantId: string,
+  v: KioskTakeawaySettingForm
 }
 
 interface Emits {
-    (e: 'updateTakeaway', setting: KioskTakeawaySettingForm): void;
+  (e: 'updateTakeaway', setting: KioskTakeawaySettingForm): void
 }
 
-const props = defineProps<Props>();
-const emits = defineEmits<Emits>();
-const form = ref<KioskTakeawaySettingForm>(ObjectUtil.clone<KioskTakeawaySettingForm>(props.getSetting()));
+defineProps<Props>()
+const emits = defineEmits<Emits>()
 
 function updateTakeawaySetting(v: boolean) {
-    form.value.enabled = v;
-    emits('updateTakeaway', form.value);
+  emits('updateTakeaway', { enabled: v })
 }
-
-watch(() => props.restaurantId, () => {
-    form.value = props.getSetting();
-})
-
-</script>
+</script>

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

@@ -14,7 +14,7 @@
 import { type FmTabProps } from '@feedmepos/ui-library'
 import { ref, computed } from 'vue'
 import DeliverySetting from './delivery/DeliverySetting.vue'
-import DineInSetting from './dinein/DineInSetting.vue'
+import DineInSetting from './dine-in/DineInSetting.vue'
 import PickUpSetting from './pickup/PickUpSetting.vue'
 import SmsSetting from './sms/SmsSetting.vue'
 import ServiceChargeSetting from './servicecharge/ServiceChargeSetting.vue'

package/src/views/order-settings/delivery/DeliverySetting.vue

@@ -131,7 +131,7 @@
         :model-value="localDoc"
         :company="selectedLocalRow.doc"
         :catalog-options="menuStore.catalogOptions"
-        @update:model-value="(v: any) => (localDocUpdate = v)"
+        @update:model-value="(v: FdoLinkedDelivery | null) => (localDocUpdate = v)"
       />
       <template #side-sheet-footer>
         <div class="flex gap-8 items-center justify-start">
@@ -157,23 +157,19 @@
 import { computed, h, ref, watch } from 'vue'
 import RestaurantSelector from '../components/RestaurantSelector.vue'
 import { type ColumnDef } from '@feedmepos/ui-library'
-
-import { useCoreStore } from '@feedmepos/mf-common'
 import type { FdoFoodpandaSettings } from '@entity'
 import type {
   FdoLinkedDelivery,
-  FdoRestaurant,
   FdoRestaurantFeedmeDelivery,
   FdoRestaurantInHouseDelivery
 } from '@feedmepos/core/entity'
-import { FdoGrabfoodSettings, FdoShopeeFoodSettings } from '@entity'
 import {
   F_DELIVERY_TYPE,
   F_FEATURE,
   F_ORDER_PLATFORM,
-  F_PAYOUT_ACCOUNT_STATUS,
   F_RESTAURANT_FEATURE
 } from '@feedmepos/core/entity'
+import { FdoGrabfoodSettings, FdoShopeeFoodSettings } from '@entity'
 import deliveryData from './delivery.data'
 import { useDelivery, type DeliveryCompany, type LinkedDeliveryDoc } from './delivery'
 import { useLoading } from '@/composables/loading'
@@ -194,7 +190,7 @@ import { useSnackbarFunctions } from '@/components/snackbar'
 import useSearch from '@/composables/search'
 import DeliveryList from './DeliveryList.vue'
 import { Pos } from '@feedmepos/core'
-import { useI18n } from '@feedmepos/mf-common'
+import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
 const { searchKey, filter } = useSearch()
@@ -230,14 +226,14 @@ const sideSheet = ref<boolean>(false)
 const loading = computed(() => {
   return !currentRestaurant.value || loadingDpi.value
 })
-let localDoc: any
-let localDocUpdate: any
+let localDoc: FdoLinkedDelivery | null
+let localDocUpdate: FdoLinkedDelivery | null
 const selectedIntegratedRow = ref<any>(null)
 const sideSheetIntegrated = ref<boolean>(false)
 const selectedLocalRow = ref<any>(null)
 async function toggleLocalSidesheet(rowData: any) {
   selectedLocalRow.value = rowData.original ?? rowData
-  localDoc = getLinkedDeliveryDoc(linkedCompanies.value, selectedLocalRow.value.key)
+  localDoc = getLinkedDeliveryDoc(linkedCompanies.value, selectedLocalRow.value.key) ?? null
   sideSheet.value = true
 }
 
@@ -748,6 +744,8 @@ async function updateFeedmeExpressSetting() {
   sideSheetIntegrated.value = false
 
   await startAsyncCallWithErr(async () => {
+    if (!currentRestaurant.value?._id)
+      throw new Error(`${t('updateFeedMeExpressSetting')} - ${t('order.invalidRestaurant')}`)
     const restaurant = await restaurantStore.updateFeedmeDelivery(
       currentRestaurant.value?._id ?? '',
       feedMeDoc.value

package/src/views/order-settings/pickup/CustomPayment.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import OfflinePaymentTypeDialogContent from '../dinein/OfflinePaymentTypeDialogContent.vue'
+import OfflinePaymentTypeDialogContent from '../dine-in/OfflinePaymentTypeDialogContent.vue'
 import type { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
 import { useI18n } from '@feedmepos/mf-common'