@feedmepos/mf-order-setting 0.0.76 → 0.0.77

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

@@ -0,0 +1,472 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import Day from 'dayjs'
+import { useI18n } from '@feedmepos/mf-common'
+import { useMenuStore } from '@/stores/menu/menu'
+import { remoteOrderApi, type GrabfoodStoreView } from '@/api/remoteOrder'
+import { useLoading } from '@/composables/loading'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { useDialog } from '@feedmepos/ui-library'
+import IntegrationIdentityDetails from './IntegrationIdentityDetails.vue'
+import { SvcCompanyApiError } from '@/api'
+import { useInternalUser } from '@/composables/useInternalUser'
+
+/**
+ * Multi-store: list of the ADDITIONAL GrabFood stores under this restaurant. The
+ * primary store is shown in the main GrabFood settings card above, not repeated
+ * here. Add / edit (catalog + enable) / remove all operate on additional stores;
+ * Add / Edit open a nested side sheet.
+ */
+const props = defineProps<{ restaurantId: string; primaryEnabled: boolean }>()
+const emits = defineEmits<{ (event: 'syncMenu', merchantID?: string): void }>()
+
+const { t } = useI18n()
+const menuStore = useMenuStore()
+const { startAsyncCall, startAsyncCallWithErr } = useLoading()
+const { showSuccess, showError } = useSnackbarFunctions()
+const Dialog = useDialog()
+const REMOTE_CLOSE_FAILED_CODE = 'GRABFOOD_REMOTE_CLOSE_FAILED'
+const { isInternal } = useInternalUser()
+
+const stores = ref<GrabfoodStoreView[]>([])
+const editing = ref<null | {
+  mode: 'new' | 'edit'
+  integrationId: string | null
+  routeId: string
+  merchantID: string
+}>(null)
+const isSaving = ref(false)
+const form = reactive<{ merchantID: string; catalogId: string | null; enable: boolean }>({
+  merchantID: '',
+  catalogId: null,
+  enable: true
+})
+// Snapshot of the store's saved values, captured when the Edit sheet opens. Lets us
+// detect unsaved edits so Activate (Self-Serve) requires a Save first.
+const originalForm = reactive<{ merchantID: string; catalogId: string | null; enable: boolean }>({
+  merchantID: '',
+  catalogId: null,
+  enable: true
+})
+const isDirty = computed(
+  () =>
+    editing.value?.mode === 'edit' &&
+    (form.merchantID !== originalForm.merchantID ||
+      form.catalogId !== originalForm.catalogId ||
+      form.enable !== originalForm.enable)
+)
+
+const catalogOptions = computed(() => menuStore.catalogOptions ?? [])
+function catalogLabel(catalogId?: string | null) {
+  if (!catalogId) return '—'
+  return catalogOptions.value.find((catalog) => catalog.value === catalogId)?.label ?? catalogId
+}
+
+// Dates arrive as ISO strings; render them the same way the main GrabFood card
+// (IntegratedDelivery) does. Null → em dash.
+function formatDate(d?: string | null) {
+  return d ? Day(d).format('DD/MM/YYYY hh:mm a') : '—'
+}
+
+// The primary store is already shown in the main GrabFood settings card above, so
+// this section lists only the ADDITIONAL stores. (save()'s uniqueness check still
+// uses the full `stores` list so a new merchantID can't collide with the primary.)
+const additionalStores = computed(() => stores.value.filter((s) => !s.isPrimary))
+const showSyncAction = computed(
+  () => !props.primaryEnabled && additionalStores.value.some((store) => store.enable === true)
+)
+
+function syncMenu() {
+  const enabledStore = additionalStores.value.find((store) => store.enable === true)
+  emits('syncMenu', enabledStore?.merchantID)
+}
+
+// FmSideSheet emits update:model-value(false) when dismissed (backdrop / X) — treat
+// that as Cancel so `editing` resets and the form closes.
+function onSheetToggle(open: boolean) {
+  if (!open) cancelEdit()
+}
+
+async function load() {
+  if (!props.restaurantId) return
+  await startAsyncCallWithErr(async () => {
+    stores.value = await remoteOrderApi.integratedDelivery.listGrabfoodStores(props.restaurantId)
+  })
+}
+onMounted(load)
+watch(
+  () => props.restaurantId,
+  () => load()
+)
+
+function openAdd() {
+  editing.value = { mode: 'new', integrationId: null, routeId: '', merchantID: '' }
+  form.merchantID = ''
+  form.catalogId = null
+  form.enable = true
+}
+function openEdit(s: GrabfoodStoreView) {
+  editing.value = {
+    mode: 'edit',
+    integrationId: s.integrationId,
+    routeId: s.routeId,
+    merchantID: s.merchantID
+  }
+  form.merchantID = s.merchantID
+  form.catalogId = s.catalogId ?? null
+  form.enable = s.enable ?? false
+  originalForm.merchantID = form.merchantID
+  originalForm.catalogId = form.catalogId
+  originalForm.enable = form.enable
+}
+function cancelEdit() {
+  editing.value = null
+}
+
+async function save() {
+  if (isSaving.value) return
+
+  const merchantID = form.merchantID.trim()
+  if (!merchantID) {
+    showError(t('order.merchantIdRequired'))
+    return
+  }
+  // Client-side uniqueness (backend is the source of truth): a collision is any
+  // OTHER store already using this merchantID. On edit, the store being edited is
+  // excluded — keeping its id (or self) is allowed, but renaming onto another
+  // store's id is blocked.
+  const editingId = editing.value?.mode === 'edit' ? editing.value.merchantID : null
+  if (stores.value.some((s) => s.merchantID === merchantID && s.merchantID !== editingId)) {
+    showError(t('order.merchantIdAlreadyExists'))
+    return
+  }
+  isSaving.value = true
+  try {
+    await startAsyncCallWithErr(async () => {
+      if (editing.value?.mode === 'new') {
+        await remoteOrderApi.integratedDelivery.addGrabfoodStore(props.restaurantId, {
+          merchantID,
+          catalogId: form.catalogId,
+          enable: form.enable
+        })
+        showSuccess(t('order.storeAdded'))
+      } else if (editing.value) {
+        // routeId is the client-side copy of this store's required integrationId.
+        const payload =
+          form.enable === false &&
+          merchantID === originalForm.merchantID &&
+          form.catalogId === originalForm.catalogId
+            ? { merchantID, enable: false }
+            : { merchantID, catalogId: form.catalogId, enable: form.enable }
+        await remoteOrderApi.integratedDelivery.updateGrabfoodStore(
+          props.restaurantId,
+          editing.value.routeId,
+          payload
+        )
+        showSuccess(t('order.storeUpdated'))
+      }
+      editing.value = null
+      await load()
+    })
+  } finally {
+    isSaving.value = false
+  }
+}
+
+// Remove flow: a center confirm dialog (useDialog) gates the destructive call, so
+// the row's buttons no longer shuffle in place.
+function promptRemove(s: GrabfoodStoreView) {
+  if (s.enable) {
+    showError(t('order.disableBeforeRemove'))
+    return
+  }
+  Dialog.open({
+    title: t('order.removeStoreConfirm', { merchantID: s.merchantID }),
+    primaryActions: { text: t('order.removeStore'), variant: 'destructive', close: true },
+    secondaryActions: { text: t('order.cancel'), variant: 'tertiary', close: true }
+  }).onPrimary(() => {
+    void confirmRemove(s)
+  })
+}
+
+function promptForceRemove(s: GrabfoodStoreView) {
+  Dialog.open({
+    title: t('order.forceRemoveStoreConfirm', { merchantID: s.merchantID }),
+    message: t('order.forceRemoveStoreWarning'),
+    dismissAway: false,
+    primaryActions: { text: t('order.forceRemoveStore'), variant: 'destructive', close: true },
+    secondaryActions: { text: t('order.cancel'), variant: 'tertiary', close: true }
+  }).onPrimary(() => {
+    void confirmRemove(s, true)
+  })
+}
+
+async function confirmRemove(s: GrabfoodStoreView, forceLocal = false) {
+  try {
+    await startAsyncCall(async () => {
+      await remoteOrderApi.integratedDelivery.removeGrabfoodStore(
+        props.restaurantId,
+        s.routeId,
+        forceLocal
+      )
+      showSuccess(t('order.storeRemoved'))
+      await load()
+    })
+  } catch (error) {
+    if (
+      !forceLocal &&
+      error instanceof SvcCompanyApiError &&
+      error.code === REMOTE_CLOSE_FAILED_CODE
+    ) {
+      promptForceRemove(s)
+      return
+    }
+    showError(`${error}`)
+  }
+}
+
+// Self-Serve Activation, opened from a store's Edit side sheet. Each additional
+// store activates with its persisted FeedMe-generated integrationId; the backend
+// sends that value in GrabFood's API-only partnerMerchantID field.
+async function activate() {
+  const routeId = editing.value?.routeId
+  if (!routeId) return
+  await startAsyncCallWithErr(async () => {
+    const url = await remoteOrderApi.integratedDelivery.startSelfServeFlow(
+      props.restaurantId,
+      routeId
+    )
+    if (url) {
+      window.open(url, '_blank')
+      editing.value = null
+      await load()
+    } else showError('Failed to get GrabFood activation URL')
+  })
+}
+</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="syncMenu"
+        />
+        <FmButton
+          v-if="isInternal"
+          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.storesHint') }}
+    </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="s in additionalStores" :key="s.routeId" variant="outlined" class="store-card">
+      <div class="store-card__top">
+        <div class="store-card__title fm-typo-en-title-sm-600">{{ s.merchantID }}</div>
+        <div class="store-card__actions">
+          <FmButton variant="secondary" :label="t('order.edit')" @click="openEdit(s)" />
+          <FmButton
+            v-if="isInternal"
+            variant="secondary"
+            :label="t('order.removeStore')"
+            @click="promptRemove(s)"
+          />
+        </div>
+      </div>
+      <div
+        v-if="isInternal && s.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 class="store-field__label text-fm-color-neutral-gray-400">{{
+            t('order.enabled')
+          }}</span>
+          <span>{{ s.enable ? '✓' : '✕' }}</span>
+        </div>
+        <div class="store-field">
+          <span class="store-field__label text-fm-color-neutral-gray-400">{{
+            t('order.catalog')
+          }}</span>
+          <span>{{ catalogLabel(s.catalogId) }}</span>
+        </div>
+        <div class="store-field">
+          <span class="store-field__label text-fm-color-neutral-gray-400">{{
+            t('order.status')
+          }}</span>
+          <span>{{ s.status ?? '—' }}</span>
+        </div>
+        <div class="store-field">
+          <span class="store-field__label text-fm-color-neutral-gray-400">{{
+            t('order.menuSyncError')
+          }}</span>
+          <span :class="{ 'text-fm-color-typo-error': s.menuSyncError }">{{
+            s.menuSyncError ?? '—'
+          }}</span>
+        </div>
+        <div class="store-field">
+          <span class="store-field__label text-fm-color-neutral-gray-400">{{
+            t('order.lastSync')
+          }}</span>
+          <span>{{ formatDate(s.lastSynchronize) }}</span>
+        </div>
+        <div class="store-field">
+          <span class="store-field__label text-fm-color-neutral-gray-400">{{
+            t('order.updatedAt')
+          }}</span>
+          <span>{{ formatDate(s.updatedAt) }}</span>
+        </div>
+      </div>
+      <IntegrationIdentityDetails
+        :integration-id="s.integrationId"
+        :provider-id="s.providerId ?? s.merchantID"
+        :provider-label="t('order.merchantId')"
+      />
+    </FmCard>
+
+    <FmSideSheet
+      :header="editing?.mode === 'new' ? t('order.addStore') : t('order.editStore')"
+      dismiss-away
+      class="w-full fm-typo-en-title-md-600"
+      :maxWidth="600"
+      :model-value="!!editing"
+      @update:model-value="onSheetToggle"
+    >
+      <div class="store-sheet-body">
+        <FmTextField
+          v-model="form.merchantID"
+          :label="t('order.merchantId')"
+          :disabled="!isInternal"
+        />
+        <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" />
+        <IntegrationIdentityDetails
+          v-if="editing?.mode === 'edit'"
+          :integration-id="editing.integrationId"
+          :provider-id="form.merchantID"
+          :provider-label="t('order.merchantId')"
+        />
+        <div v-if="editing?.mode === 'edit'" class="store-sheet-activate">
+          <FmButton
+            variant="primary"
+            :label="t('order.activate')"
+            :disabled="isDirty"
+            @click="activate()"
+          />
+          <div
+            v-if="isDirty"
+            class="store-sheet-activate__hint text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400"
+          >
+            {{ t('order.saveBeforeActivate') }}
+          </div>
+        </div>
+      </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>
+/* Visual divider separating the primary store (shown in the main GrabFood card above)
+   from the additional stores listed in this section. */
+.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: 1.25rem;
+}
+.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;
+}
+/* Two-column label/value grid. The grid container owns the column widths, so the
+   label never collapses regardless of utility-class width quirks. */
+.store-field {
+  display: grid;
+  grid-template-columns: 9rem minmax(0, 1fr);
+  align-items: start;
+  column-gap: 1rem;
+  row-gap: 0.125rem;
+}
+.store-field > span:last-child {
+  word-break: break-word;
+}
+/* Edit/Add side-sheet body: even vertical rhythm between the form fields. */
+.store-sheet-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 0.5rem;
+}
+/* Activate (Self-Serve) sits below the form fields in the Edit side sheet,
+   separated from the inputs above it. */
+.store-sheet-activate {
+  padding-top: 1.25rem;
+  border-top: 1px solid #e5e7eb;
+}
+/* Shown when there are unsaved edits — Activate is disabled until the user saves. */
+.store-sheet-activate__hint {
+  margin-top: 0.5rem;
+}
+/* Narrow container (e.g. mobile drawer): stack value under label. */
+@media (max-width: 460px) {
+  .store-field {
+    grid-template-columns: 1fr;
+  }
+}
+</style>