@feedmepos/mf-order-setting 0.0.77 → 0.0.78

package/src/views/order-settings/delivery/inhouse/DeliveryOrder.vue

@@ -7,7 +7,7 @@ import { clone } from '@/helpers/object'
 import type { FdoAddress, FdoDeliveryArea } from '@feedmepos/core/entity'
 import GoogleMap from '@/components/GoogleMap.vue'
 import ZoneDialog from './ZoneDialog.vue'
-import { type PropType, computed, onMounted, ref } from 'vue'
+import { type PropType, computed, onMounted, ref, watch } from 'vue'
 import { useSnackbar, SnackbarPosition } from '@feedmepos/ui-library'
 import { useI18n } from '@feedmepos/mf-common'
 
@@ -97,13 +97,12 @@ const deliveryArea = ref<FdoDeliveryArea>()
 function editZone(index: number) {
   currentIndex.value = index
   deliveryArea.value = props.modelValue[index]
-  openSideSheet()
+  sideSheet.value = true
 }
 
 const Snackbar = useSnackbar()
 
 function addZone() {
-  sideSheet.value = false
   if (savedZone.value) {
     emits('update:model-value', [...props.modelValue, savedZone.value])
     Snackbar.open({
@@ -112,12 +111,15 @@ function addZone() {
       position: 'bottom' as SnackbarPosition
     })
   }
+  closeSideSheet()
 }
 
 const savedZone = ref<FdoDeliveryArea>()
 
 function handleZoneUpdate(v: FdoDeliveryArea) {
-  savedZone.value = v
+  // Clone: `v` is the dialog's own reactive state, so storing it directly would make the saved
+  // zone keep mutating with the dialog (and make two zones share one object).
+  savedZone.value = clone(v)
 }
 
 function updateZone(index: number) {
@@ -131,8 +133,8 @@ function updateZone(index: number) {
       message: 'Zone updated successfully.',
       position: 'bottom' as SnackbarPosition
     })
-    sideSheet.value = false
   }
+  closeSideSheet()
 }
 
 const center = ref<{
@@ -167,15 +169,29 @@ async function getCenter() {
   }
 }
 
-function openSideSheet() {
+function openAddZone() {
+  // currentIndex selects the edit branch of the side sheet, so it has to be cleared here —
+  // otherwise "Add Delivery Zone" right after an edit reopens the sheet in edit mode and Save
+  // overwrites the zone that was just edited instead of appending a new one.
+  currentIndex.value = null
+  deliveryArea.value = undefined
   sideSheet.value = true
 }
 
 function closeSideSheet() {
   sideSheet.value = false
-  currentIndex.value = null
 }
 
+// Reset on every close, not just in closeSideSheet: dismiss-away and the sheet's own X button
+// close it without going through here. A zone left in savedZone by a cancelled "Add" would
+// otherwise be written over the next zone that is edited and saved.
+watch(sideSheet, (open) => {
+  if (open) return
+  currentIndex.value = null
+  deliveryArea.value = undefined
+  savedZone.value = undefined
+})
+
 onMounted(getCenter)
 </script>
 
@@ -183,7 +199,7 @@ onMounted(getCenter)
   <GoogleMap ref="gmRef" class="full-width" style="height: 500px" :center="center" :polygons="polygons" :zoom="10" />
 
   <div class=" mt-5 mb-5">
-    <FmButton class="mt-3" @click="openSideSheet" icon="add" :label="t('order.addDeliveryZone')" variant="plain" />
+    <FmButton class="mt-3" @click="openAddZone" icon="add" :label="t('order.addDeliveryZone')" variant="plain" />
   </div>
 
   <FmSideSheet :header="t('order.addDeliveryZone')" dismiss-away :maxWidth="600" v-model="sideSheet">

package/src/views/order-settings/delivery/inhouse/ZoneDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import GoogleMap from '@/components/GoogleMap.vue'
 import type { InputModel, MapCoordinate, MapPolygon } from '@/components/type'
-import { arrayToCoordinate, coordinates, coordinateToArray, generateAreaPaths, getDefaultCoordinates } from '@/helpers/map'
+import { arrayToCoordinate, coordinates, coordinateToArray, generateAreaPaths, getDefaultCoordinates, getPolygonDistanceInKM } from '@/helpers/map'
 import { clone } from '@/helpers/object'
 import { Country, Dinero } from '@feedmepos/core'
 import { F_COUNTRY, type FCurrency, type FdoCountry, type FdoDeliveryArea, type FdoDinero } from '@feedmepos/core/entity'
@@ -36,7 +36,15 @@ const props = defineProps({
   }
 })
 
-const distanceInKM = ref(10)
+const DEFAULT_DISTANCE_IN_KM = 10
+
+// FmSideSheet renders its slot inside a v-if, so this dialog is remounted on every open. The
+// distance has to be recovered from the zone being edited, otherwise the field always reads the
+// default and the merchant sees their saved zone as DEFAULT_DISTANCE_IN_KM.
+const distanceInKM = ref(
+  (props.initialValue ? getPolygonDistanceInKM(props.initialValue.polygon) : undefined) ??
+    DEFAULT_DISTANCE_IN_KM
+)
 const data = reactive<FdoDeliveryArea>(
   props.initialValue
     ? clone(props.initialValue)
@@ -94,6 +102,10 @@ function updateFreeAfterTotal(v: FdoDinero) {
 
 onMounted(() => {
   if (!props.initialValue) generatePolygon()
+  // The watcher below only fires once `data` is mutated, and editing an existing zone mutates
+  // nothing on mount. Emit once so the parent always holds THIS zone instead of whichever zone
+  // was last emitted by a previous open of the dialog.
+  emits('update:model-value', data)
 })
 
 watch(

package/src/views/order-settings/delivery/integrated-delivery/ExternalSetting.vue

@@ -44,23 +44,40 @@
             @update:model-value="updatePlatform"
           />
 
-          <FmSelect
-            class="mt-5"
-            :placeholder="t('order.selectItem')"
-            :model-value="data.delivery!.catalogId"
-            :label="t('order.deliveryCatalog')"
-            :items="menuStore.catalogOptions"
-            @update:model-value="updateDeliveryMenuCatalog"
-          />
-
-          <FmSelect
-            class="mt-5"
-            :placeholder="t('order.selectItem')"
-            :model-value="data.pickup!.catalogId"
-            :label="t('order.pickupCatalog')"
-            :items="menuStore.catalogOptions"
-            @update:model-value="updatePickupMenuCatalog"
-          />
+          <div class="fm-typo-en-title-sm-600 mb-3 mt-5">{{ t('order.orderType') }}</div>
+          <div
+            v-for="section in menuOrderTypeSections"
+            :key="section.key"
+            :class="menuOrderTypeEnabled[section.key] ? 'mb-5' : 'mb-3'"
+          >
+            <FmCheckbox
+              :model-value="menuOrderTypeEnabled[section.key]"
+              :label="section.label"
+              :value="section.key"
+              @update:model-value="(enabled: boolean) => toggleMenuOrderType(section.key, enabled)"
+            />
+            <FmCard
+              v-if="menuOrderTypeEnabled[section.key]"
+              variant="outlined"
+              class="mt-2 p-5"
+            >
+              <FmSelect
+                :placeholder="t('order.selectItem')"
+                :model-value="data[section.key]?.catalogId ?? null"
+                :label="section.catalogLabel"
+                :items="catalogOptionsFor(section.key)"
+                @update:model-value="
+                  (catalogId: string | null) => updateMenuCatalog(section.key, catalogId)
+                "
+              />
+              <div
+                v-if="isMenuCatalogInvalid(section.key)"
+                class="text-fm-color-typo-error fm-typo-en-body-sm-400 mt-3"
+              >
+                {{ menuCatalogValidationMessage([section.key]) }}
+              </div>
+            </FmCard>
+          </div>
         </div>
 
         <div class="text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400 mb-5 mt-5">
@@ -86,7 +103,7 @@
 </template>
 
 <script setup lang="ts">
-import { type PropType, reactive, ref } from 'vue'
+import { computed, onMounted, type PropType, reactive, ref } from 'vue'
 import { F_ORDER_PLATFORM, type FdoExternalSetting } from '@entity'
 import { useI18n } from '@feedmepos/mf-common'
 import Day from 'dayjs'
@@ -95,8 +112,13 @@ import { useMenuStore } from '@/stores/menu/menu'
 import { useLoading } from '@/composables/loading'
 import { remoteOrderApi } from '@/api/remoteOrder'
 import { useSnackbarFunctions } from '@/components/snackbar'
+import {
+  externalMenuOrderTypeRequiresCatalog,
+  getInvalidExternalMenuCatalogOrderTypes,
+  type ExternalMenuOrderType
+} from '../delivery'
 
-const { showSuccess } = useSnackbarFunctions()
+const { showError, showSuccess } = useSnackbarFunctions()
 const { t } = useI18n()
 const menuStore = useMenuStore()
 
@@ -107,11 +129,33 @@ const props = defineProps({
   }
 })
 
+type MenuOrderType = ExternalMenuOrderType
+type MenuOrderTypeSetting = NonNullable<FdoExternalSetting[MenuOrderType]>
+
+function cloneMenuOrderTypeSetting(
+  setting: MenuOrderTypeSetting | null | undefined
+): MenuOrderTypeSetting | null {
+  return setting == null ? null : clone(setting)
+}
+
 const data = reactive<FdoExternalSetting>({
-  ...clone(props.initialValue),
-  platform: props.initialValue.platform ?? 'ZUS',
-  delivery: props.initialValue.delivery ?? { catalogId: null },
-  pickup: props.initialValue.pickup ?? { catalogId: null }
+  _id: props.initialValue._id ?? '',
+  enable: props.initialValue.enable ?? false,
+  config: {
+    autoAccept: props.initialValue.config?.autoAccept ?? true,
+    autoSend: props.initialValue.config?.autoSend ?? true,
+    autoCloseBill: props.initialValue.config?.autoCloseBill ?? false,
+    printReceiptAfterClose: props.initialValue.config?.printReceiptAfterClose,
+    bypass: props.initialValue.config?.bypass,
+    skipAllocateTax: props.initialValue.config?.skipAllocateTax,
+    groupItemsBySubCategory: props.initialValue.config?.groupItemsBySubCategory
+  },
+  platform: props.initialValue.platform ?? F_ORDER_PLATFORM.enum.ZUS,
+  delivery: cloneMenuOrderTypeSetting(props.initialValue.delivery),
+  pickup: cloneMenuOrderTypeSetting(props.initialValue.pickup),
+  dineIn: cloneMenuOrderTypeSetting(props.initialValue.dineIn),
+  updatedAt: props.initialValue.updatedAt,
+  lastSynchronize: props.initialValue.lastSynchronize
 })
 
 const platformOptions = ref([
@@ -120,6 +164,28 @@ const platformOptions = ref([
   { label: 'US Pizza', value: F_ORDER_PLATFORM.enum.US_PIZZA }
 ])
 
+const menuOrderTypeSections = computed<
+  Array<{ key: MenuOrderType; label: string; catalogLabel: string }>
+>(() => [
+  { key: 'delivery', label: t('order.delivery'), catalogLabel: t('order.deliveryCatalog') },
+  { key: 'pickup', label: t('order.pickup'), catalogLabel: t('order.pickupCatalog') },
+  { key: 'dineIn', label: t('order.dineIn'), catalogLabel: t('order.dineInCatalog') }
+])
+
+const menuOrderTypeEnabled = reactive<Record<MenuOrderType, boolean>>({
+  delivery: data.delivery != null,
+  pickup: data.pickup != null,
+  dineIn: data.dineIn != null
+})
+
+const menuOrderTypeDrafts = reactive<Record<MenuOrderType, MenuOrderTypeSetting | null>>({
+  delivery: cloneMenuOrderTypeSetting(data.delivery),
+  pickup: cloneMenuOrderTypeSetting(data.pickup),
+  dineIn: cloneMenuOrderTypeSetting(data.dineIn)
+})
+
+const invalidMenuCatalogOrderTypes = computed(() => getInvalidExternalMenuCatalogOrderTypes(data))
+
 const emits = defineEmits<{
   (event: 'update:model-value', v: FdoExternalSetting): void
 }>()
@@ -128,6 +194,8 @@ function emitUpdatedValue() {
   emits('update:model-value', { ...data })
 }
 
+onMounted(emitUpdatedValue)
+
 function updateAutoSend(value: boolean) {
   data.config.autoSend = value
   emitUpdatedValue()
@@ -148,13 +216,49 @@ function updateEnable(value: boolean) {
   emitUpdatedValue()
 }
 
-function updateDeliveryMenuCatalog(catalogId: string) {
-  data.delivery!.catalogId = catalogId
+function menuOrderTypeLabel(type: MenuOrderType) {
+  return t(`order.${type}`)
+}
+
+function menuCatalogValidationMessage(orderTypes: MenuOrderType[]) {
+  const platform =
+    platformOptions.value.find(({ value }) => value === data.platform)?.label ?? data.platform
+
+  return t('order.externalCatalogRequired', {
+    orderTypes: orderTypes.map(menuOrderTypeLabel).join(', '),
+    platform
+  })
+}
+
+function isMenuCatalogInvalid(type: MenuOrderType) {
+  return invalidMenuCatalogOrderTypes.value.some((invalidType) => invalidType === type)
+}
+
+function catalogOptionsFor(type: MenuOrderType) {
+  if (!externalMenuOrderTypeRequiresCatalog(data.platform, type)) {
+    return menuStore.catalogOptions
+  }
+
+  return menuStore.catalogOptions.filter(({ value }) => value !== null)
+}
+
+function toggleMenuOrderType(type: MenuOrderType, enabled: boolean) {
+  menuOrderTypeEnabled[type] = enabled
+
+  if (enabled) {
+    data[type] = cloneMenuOrderTypeSetting(menuOrderTypeDrafts[type]) ?? { catalogId: null }
+  } else {
+    menuOrderTypeDrafts[type] = cloneMenuOrderTypeSetting(data[type])
+    data[type] = null
+  }
+
   emitUpdatedValue()
 }
 
-function updatePickupMenuCatalog(catalogId: string) {
-  data.pickup!.catalogId = catalogId
+function updateMenuCatalog(type: MenuOrderType, catalogId: string | null) {
+  const setting = data[type] ?? menuOrderTypeDrafts[type] ?? { catalogId: null }
+  data[type] = { ...setting, catalogId }
+  menuOrderTypeEnabled[type] = true
   emitUpdatedValue()
 }
 
@@ -165,6 +269,11 @@ function updatePlatform(platform: F_ORDER_PLATFORM) {
 
 const { startAsyncCallWithErr } = useLoading()
 async function syncMenu() {
+  if (invalidMenuCatalogOrderTypes.value.length > 0) {
+    showError(menuCatalogValidationMessage(invalidMenuCatalogOrderTypes.value))
+    return
+  }
+
   await startAsyncCallWithErr(async () => {
     const res = await remoteOrderApi.integratedDelivery.syncExternalMenu(data._id ?? '')
     if (res?.lastSynchronize) {