@feedmepos/mf-order-setting 0.0.76 → 0.0.77

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

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import Day from 'dayjs'
+import { useI18n } from '@feedmepos/mf-common'
+import { useDialog } from '@feedmepos/ui-library'
+import { remoteOrderApi, type FoodpandaStoreView } from '@/api/remoteOrder'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { useLoading } from '@/composables/loading'
+import { useMenuStore } from '@/stores/menu/menu'
+import IntegrationIdentityDetails from './IntegrationIdentityDetails.vue'
+import { useInternalUser } from '@/composables/useInternalUser'
+
+const props = defineProps<{ restaurantId: string; primaryEnabled: boolean }>()
+const emits = defineEmits<{ (event: 'syncMenu', isPrimary: false): void }>()
+const { t } = useI18n()
+const Dialog = useDialog()
+const menuStore = useMenuStore()
+const { startAsyncCallWithErr } = useLoading()
+const { showError, showSuccess } = useSnackbarFunctions()
+const { isInternal } = useInternalUser()
+
+const stores = ref<FoodpandaStoreView[]>([])
+const editing = ref<null | {
+  mode: 'new' | 'edit'
+  integrationId: string | null
+  routeId: string
+  remoteId: string
+}>(null)
+const isSaving = ref(false)
+const form = reactive<{ catalogId: string | null; enable: boolean }>({
+  catalogId: null,
+  enable: true
+})
+const originalForm = reactive<{ catalogId: string | null; enable: boolean }>({
+  catalogId: null,
+  enable: true
+})
+const catalogOptions = computed(() => menuStore.catalogOptions ?? [])
+const additionalStores = computed(() => stores.value.filter((store) => !store.isPrimary))
+const showSyncAction = computed(
+  () => !props.primaryEnabled && additionalStores.value.some((store) => store.enable === true)
+)
+
+function catalogLabel(catalogId?: string | null) {
+  if (!catalogId) return '—'
+  return catalogOptions.value.find((catalog) => catalog.value === catalogId)?.label ?? catalogId
+}
+function formatDate(value?: string | null) {
+  return value ? Day(value).format('DD/MM/YYYY hh:mm a') : '—'
+}
+async function load() {
+  if (!props.restaurantId) return
+  await startAsyncCallWithErr(async () => {
+    stores.value = await remoteOrderApi.integratedDelivery.listFoodpandaStores(props.restaurantId)
+  })
+}
+onMounted(load)
+watch(() => props.restaurantId, load)
+
+function openAdd() {
+  editing.value = { mode: 'new', integrationId: null, routeId: '', remoteId: '' }
+  form.catalogId = null
+  form.enable = true
+}
+function openEdit(store: FoodpandaStoreView) {
+  editing.value = {
+    mode: 'edit',
+    integrationId: store.integrationId,
+    routeId: store.routeId,
+    remoteId: store.remoteId
+  }
+  form.catalogId = store.catalogId ?? null
+  form.enable = store.enable ?? false
+  originalForm.catalogId = form.catalogId
+  originalForm.enable = form.enable
+}
+function cancelEdit() {
+  editing.value = null
+}
+function onSheetToggle(open: boolean) {
+  if (!open) cancelEdit()
+}
+
+async function save() {
+  if (isSaving.value) return
+
+  isSaving.value = true
+  try {
+    await startAsyncCallWithErr(async () => {
+      const payload = { catalogId: form.catalogId, enable: form.enable }
+      if (editing.value?.mode === 'new') {
+        await remoteOrderApi.integratedDelivery.addFoodpandaStore(props.restaurantId, payload)
+        showSuccess(t('order.storeAdded'))
+      } else if (editing.value) {
+        const updatePayload =
+          form.enable === false && form.catalogId === originalForm.catalogId
+            ? { enable: false }
+            : payload
+        await remoteOrderApi.integratedDelivery.updateFoodpandaStore(
+          props.restaurantId,
+          editing.value.routeId,
+          updatePayload
+        )
+        showSuccess(t('order.storeUpdated'))
+      }
+      editing.value = null
+      await load()
+    })
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function promptRemove(store: FoodpandaStoreView) {
+  if (store.enable) {
+    showError(t('order.disableBeforeRemove'))
+    return
+  }
+  Dialog.open({
+    title: t('order.removeStoreConfirm', { merchantID: store.remoteId }),
+    primaryActions: { text: t('order.removeStore'), variant: 'destructive', close: true },
+    secondaryActions: { text: t('order.cancel'), variant: 'tertiary', close: true }
+  }).onPrimary(async () => {
+    await startAsyncCallWithErr(async () => {
+      await remoteOrderApi.integratedDelivery.removeFoodpandaStore(
+        props.restaurantId,
+        store.routeId
+      )
+      showSuccess(t('order.storeRemoved'))
+      await load()
+    })
+  })
+}
+</script>
+
+<template>
+  <div class="mt-10 store-section">
+    <div class="flex flex-row items-center mb-1">
+      <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.additionalStores') }}</div>
+      <div class="store-card__actions">
+        <FmButton
+          v-if="showSyncAction"
+          variant="primary"
+          :label="t('order.syncMenu')"
+          @click="emits('syncMenu', false)"
+        />
+        <FmButton variant="secondary" :label="t('order.addStore')" @click="openAdd" />
+      </div>
+    </div>
+    <div class="text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400 mb-3">
+      {{ t('order.foodpandaStoresHint') }}
+    </div>
+    <div
+      v-if="additionalStores.length"
+      class="text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400 mb-3"
+    >
+      {{ t('order.syncAllStoresHint') }}
+    </div>
+
+    <FmCard
+      v-for="store in additionalStores"
+      :key="store.routeId"
+      variant="outlined"
+      class="store-card"
+    >
+      <div class="store-card__top">
+        <div class="store-card__title fm-typo-en-title-sm-600">{{ store.remoteId }}</div>
+        <div class="store-card__actions">
+          <FmButton variant="secondary" :label="t('order.edit')" @click="openEdit(store)" />
+          <FmButton
+            v-if="isInternal"
+            variant="secondary"
+            :label="t('order.removeStore')"
+            @click="promptRemove(store)"
+          />
+        </div>
+      </div>
+      <div
+        v-if="isInternal && store.enable"
+        class="text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400 mb-3"
+      >
+        {{ t('order.disableBeforeRemove') }}
+      </div>
+      <div class="store-card__fields fm-typo-cn-body-md-400">
+        <div class="store-field">
+          <span>{{ t('order.enabled') }}</span
+          ><span>{{ store.enable ? '✓' : '✕' }}</span>
+        </div>
+        <div class="store-field">
+          <span>{{ t('order.catalog') }}</span
+          ><span>{{ catalogLabel(store.catalogId) }}</span>
+        </div>
+        <div class="store-field">
+          <span>{{ t('order.status') }}</span
+          ><span>{{ store.status ?? '—' }}</span>
+        </div>
+        <div class="store-field">
+          <span>{{ t('order.menuSyncError') }}</span
+          ><span>{{ store.menuSyncError ?? '—' }}</span>
+        </div>
+        <div class="store-field">
+          <span>{{ t('order.lastSync') }}</span
+          ><span>{{ formatDate(store.lastSynchronize) }}</span>
+        </div>
+        <div class="store-field">
+          <span>{{ t('order.updatedAt') }}</span
+          ><span>{{ formatDate(store.updatedAt) }}</span>
+        </div>
+      </div>
+      <IntegrationIdentityDetails
+        :integration-id="store.integrationId"
+        :partner-id="store.partnerId ?? store.remoteId"
+        :partner-label="t('order.foodpandaStoreId')"
+      />
+    </FmCard>
+
+    <FmSideSheet
+      :header="editing?.mode === 'new' ? t('order.addStore') : t('order.editStore')"
+      dismiss-away
+      class="w-full fm-typo-en-title-md-600"
+      :max-width="600"
+      :model-value="!!editing"
+      @update:model-value="onSheetToggle"
+    >
+      <div class="store-sheet-body">
+        <IntegrationIdentityDetails
+          v-if="editing?.mode === 'edit'"
+          :integration-id="editing.integrationId"
+          :partner-id="editing.remoteId"
+          :partner-label="t('order.foodpandaStoreId')"
+        />
+        <div v-else class="text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400">
+          {{ t('order.foodpandaStoreIdGeneratedHint') }}
+        </div>
+        <FmSelect
+          v-model="form.catalogId"
+          :label="t('order.catalog')"
+          :placeholder="t('order.selectCatalog')"
+          :items="catalogOptions"
+        />
+        <FmSwitch v-model="form.enable" :label="t('order.enabled')" label-placement="right" />
+      </div>
+      <template #side-sheet-footer>
+        <div class="flex gap-8 items-center justify-start">
+          <FmButton
+            variant="primary"
+            size="lg"
+            :label="editing?.mode === 'new' ? t('order.addStore') : t('order.save')"
+            :loading="isSaving"
+            :disabled="isSaving"
+            @click="save"
+          />
+          <FmButton variant="secondary" size="lg" :label="t('order.cancel')" @click="cancelEdit" />
+        </div>
+      </template>
+    </FmSideSheet>
+  </div>
+</template>
+
+<style scoped>
+.store-section {
+  border-top: 1px solid #e5e7eb;
+  padding-top: 1.5rem;
+}
+.store-card {
+  padding: 1.25rem;
+  margin-bottom: 1rem;
+}
+.store-card__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.store-card__title {
+  min-width: 0;
+  word-break: break-all;
+}
+.store-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.store-card__fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.store-field {
+  display: grid;
+  grid-template-columns: 9rem minmax(0, 1fr);
+  gap: 1rem;
+}
+.store-field > span:first-child {
+  color: var(--fm-color-neutral-gray-400);
+}
+.store-field > span:last-child {
+  word-break: break-word;
+}
+.store-sheet-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 0.5rem;
+}
+@media (max-width: 460px) {
+  .store-field {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

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

@@ -3,6 +3,8 @@ import { FdoLinkedDelivery } from '@feedmepos/core/entity'
 import { FdoFoodpandaReportCalculationConfig, FdoFoodpandaSettings } from '@entity'
 import { type PropType, reactive, computed } from 'vue'
 import IntegratedDelivery from './IntegratedDelivery.vue'
+import FoodpandaAdditionalStores from './FoodpandaAdditionalStores.vue'
+import IntegrationIdentityDetails from './IntegrationIdentityDetails.vue'
 import { useCoreStore } from '@feedmepos/mf-common'
 import { clone } from '@/helpers/object'
 import type { DeliveryCompany } from '../delivery'
@@ -68,10 +70,12 @@ function initReportConfig(): FdoFoodpandaReportCalculationConfig {
 }
 
 function updateData({ manual, auto }: IntegratedDeliverySettingData) {
+  const { integrationId: remoteId, ...autoSettings } = auto
   data.manual = manual
   data.integrated = {
-    ...auto,
-    remoteId: auto.integrationId,
+    ...data.integrated,
+    ...autoSettings,
+    remoteId,
     reportConfig: {
       ...(data.integrated?.reportConfig || initReportConfig()),
       commissionRate: auto.commissionRate
@@ -191,20 +195,20 @@ function formatCampaignDate(date: { start: string; end: string }) {
 }
 
 const { startAsyncCallWithErr } = useLoading()
-async function syncMenu() {
+async function syncMenu(isPrimary = true) {
   const restaurantId = currentRestaurant.value?._id ?? ''
   await startAsyncCallWithErr(async () => {
-    const res = await remoteOrderApi.integratedDelivery.syncFoodpandaMenu(restaurantId)
-    const temp = {
-      ...modelValue.value.auto,
-      lastSynchronize: res?.lastSynchronize || modelValue.value.auto.lastSynchronize
+    await remoteOrderApi.integratedDelivery.syncFoodpandaMenu(restaurantId)
+    if (isPrimary) {
+      data.integrated.lastSynchronize = new Date().toISOString()
     }
-    updateData({ auto: temp, manual: data.manual })
     showSuccess(t('order.syncMenuSuccess'))
   })
 }
 
 const { currentRestaurant } = useCoreStore()
+const restaurantId = computed(() => currentRestaurant.value?._id ?? '')
+const primaryIntegrationId = computed(() => data.integrated.integrationId)
 import { useSnackbarFunctions } from '@/components/snackbar'
 const { showSuccess } = useSnackbarFunctions()
 
@@ -229,10 +233,25 @@ async function cancelTestOrder() {
     :model-value="modelValue"
     :company="company"
     :can-use-auto-delivery-integration="canUseAutoDeliveryIntegration"
+    integration-id-read-only
     @update:model-value="updateDataPass"
     @sync-menu="syncMenu"
     @flow-test-order="flowTestOrder"
     @cancel-test-order="cancelTestOrder"
   >
+    <template #integration-details>
+      <IntegrationIdentityDetails
+        :integration-id="primaryIntegrationId"
+        :partner-id="data.integrated.remoteId"
+        :partner-label="t('order.foodpandaStoreId')"
+        :store-label="t('order.primaryStore')"
+      />
+    </template>
   </IntegratedDelivery>
+  <FoodpandaAdditionalStores
+    v-if="canUseAutoDeliveryIntegration === true"
+    :restaurant-id="restaurantId"
+    :primary-enabled="modelValue.auto.enable"
+    @sync-menu="syncMenu"
+  />
 </template>

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

@@ -8,6 +8,8 @@ import type { IntegratedDeliverySettingData } from './IntegratedDelivery.vue'
 import { useLoading } from '@/composables/loading'
 import { remoteOrderApi } from '@/api/remoteOrder'
 import IntegratedDelivery from './IntegratedDelivery.vue'
+import AdditionalStores from './AdditionalStores.vue'
+import IntegrationIdentityDetails from './IntegrationIdentityDetails.vue'
 import { clone } from '@/helpers/object'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 
@@ -61,16 +63,20 @@ const modelValue = computed<IntegratedDeliverySettingData>(() => {
 })
 
 const { currentRestaurant, currentCountry } = useCoreStore()
+const restaurantId = computed(() => currentRestaurant.value?._id ?? '')
+const primaryIntegrationId = computed(() => data.integrated.integrationId)
 const learnMoreUrl = computed(() => {
   const country = (currentCountry.value || F_COUNTRY.enum.MY) as F_COUNTRY
   return GRABFOOD_LEARN_MORE_URL_BY_COUNTRY[country] || GRABFOOD_LEARN_MORE_URL_DEFAULT
 })
 
 function updateData({ manual, auto }: IntegratedDeliverySettingData) {
+  const { integrationId: merchantID, ...autoSettings } = auto
   data.manual = manual
   data.integrated = {
-    ...auto,
-    merchantID: auto.integrationId,
+    ...data.integrated,
+    ...autoSettings,
+    merchantID,
     commissionRate: auto.commissionRate
   }
   return { manual: data.manual, integrated: data.integrated }
@@ -86,16 +92,14 @@ function updateDataPass({ manual, auto }: IntegratedDeliverySettingData) {
 }
 
 const { startAsyncCallWithErr } = useLoading()
-async function syncMenu() {
+async function syncMenu(merchantID?: string) {
   await startAsyncCallWithErr(async () => {
-    const res = await remoteOrderApi.integratedDelivery.syncGrabfoodMenu(
-      data.integrated.merchantID ?? ''
-    )
-    const temp = {
-      ...modelValue.value.auto,
-      lastSynchronize: res?.lastSynchronize || modelValue.value.auto.lastSynchronize
+    const isPrimary = merchantID === undefined
+    const targetMerchantID = merchantID ?? data.integrated.merchantID ?? ''
+    await remoteOrderApi.integratedDelivery.syncGrabfoodMenu(targetMerchantID)
+    if (isPrimary) {
+      data.integrated.lastSynchronize = new Date().toISOString()
     }
-    updateData({ auto: temp, manual: data.manual })
     showSuccess(t('order.syncMenuSuccess'))
   })
 }
@@ -147,7 +151,16 @@ async function startSelfServeFlow() {
     @sync-menu="syncMenu"
     @flow-test-order="flowTestOrder"
     @cancel-test-order="cancelTestOrder"
-  />
+  >
+    <template #integration-details>
+      <IntegrationIdentityDetails
+        :integration-id="primaryIntegrationId"
+        :provider-id="data.integrated.merchantID"
+        :provider-label="t('order.merchantId')"
+        :store-label="t('order.primaryStore')"
+      />
+    </template>
+  </IntegratedDelivery>
   <div v-if="canUseAutoDeliveryIntegration === true">
     <div class="flex flex-row mt-5 items-center">
       <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-3">
@@ -155,7 +168,7 @@ async function startSelfServeFlow() {
       </div>
       <FmButton
         variant="primary"
-        :label="t('order.start')"
+        :label="t('order.activate')"
         @click="startSelfServeFlow"
         class="m-1"
       />
@@ -167,4 +180,10 @@ async function startSelfServeFlow() {
       >.
     </div>
   </div>
+  <AdditionalStores
+    v-if="canUseAutoDeliveryIntegration === true"
+    :restaurant-id="restaurantId"
+    :primary-enabled="modelValue.auto.enable"
+    @sync-menu="syncMenu"
+  />
 </template>

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

@@ -6,8 +6,9 @@ import type { DeliveryCompany } from '../delivery'
 import { useMenuStore } from '@/stores/menu/menu'
 import ManualIntegratedDeliverySetting from '../components/ManualIntegratedDeliverySetting.vue'
 import { ItemTax } from '@/helpers/menu'
-import { useCoreStore } from '@feedmepos/mf-common'
 import { useI18n } from '@feedmepos/mf-common'
+import { overrideMenu } from '@feedmepos/menu'
+import { useInternalUser } from '@/composables/useInternalUser'
 
 const { t } = useI18n()
 
@@ -54,6 +55,10 @@ const props = defineProps({
   showTestOrderActions: {
     type: Boolean,
     default: true
+  },
+  integrationIdReadOnly: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -65,18 +70,12 @@ const emits = defineEmits<{
 }>()
 
 const menuStore = useMenuStore()
-const CoreStore = useCoreStore()
 const taxSystemCode = computed(() => ItemTax.taxSetting().systemCode)
+const { isInternal } = useInternalUser()
 
 // For now, allow all users to edit, but added detail logging in backend
 const canEdit = computed(() => true)
 
-// FeedMe-internal (staff/admin) only. Merchants/business owners must not edit
-// the platform integration id or place test orders; both gated on this below.
-const isInternal = computed(
-  () => (CoreStore.sessionUser.value?.role?.isStaff || CoreStore.sessionUser.value?.role?.isAdmin) ?? false
-)
-
 function updateManual(manual: FdoLinkedDelivery | null) {
   emits('update:model-value', {
     ...props.modelValue,
@@ -249,8 +248,17 @@ const formattedMenuSyncError = computed(() => {
   const matches = error.match(itemIdPattern)
 
   if (matches) {
+    let items = menuStore.menu.modules.item
+    try {
+      items = overrideMenu({
+        menu: menuStore.menu,
+        catalogId: props.modelValue.auto.catalogId
+      }).modules.item
+    } catch {
+      // A malformed override must not prevent the integration setting from rendering.
+    }
     for (const itemId of matches) {
-      const item = menuStore.items.find((i) => i._id === itemId)
+      const item = items.find((i) => i._id === itemId)
       if (item) {
         const itemName = item.code ? `${item.code} - ${item.name}` : item.name
         formatted = formatted.replace(itemId, `"${itemName}" (${itemId})`)
@@ -281,7 +289,7 @@ const formattedMenuSyncError = computed(() => {
     <div v-if="modelValue.auto.enable">
       <FmCard variant="outlined" class="mt-10 p-5">
         <FmTextField
-          :disabled="!isInternal"
+          :disabled="!isInternal || integrationIdReadOnly"
           :model-value="modelValue.auto.integrationId"
           :label="t('order.integrationId')"
           @update:model-value="updateIntegrateId"
@@ -304,6 +312,8 @@ const formattedMenuSyncError = computed(() => {
           <slot name="order-setting" :editable="!canEdit" />
         </div>
 
+        <slot name="integration-details" />
+
         <!-- Commision rate not used yet -->
         <!-- <div class="mb-5">
           <FmTextField
@@ -380,7 +390,9 @@ const formattedMenuSyncError = computed(() => {
   <div v-else class="mt-10">
     <FmSnackbar
       :title="`${t('order.autoIntegration')}`"
-      :description="`${t('order.autoIntegrationWarning', { reason: canUseAutoDeliveryIntegration })}`"
+      :description="`${t('order.autoIntegrationWarning', {
+        reason: canUseAutoDeliveryIntegration
+      })}`"
       variant="warning"
     />
   </div>