@feedmepos/mf-order-setting 0.0.76 → 0.0.77

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

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@feedmepos/mf-common'
+import { useSnackbarFunctions } from '@/components/snackbar'
+
+const props = defineProps<{
+  integrationId?: string | null
+  partnerId?: string | null
+  partnerLabel?: string
+  providerId?: string | null
+  providerLabel?: string
+  storeLabel?: string
+}>()
+
+const { t } = useI18n()
+const { showSuccess, showError } = useSnackbarFunctions()
+
+const visiblePartnerId = computed(() => props.partnerId || null)
+
+async function copyIntegrationId() {
+  if (!props.integrationId) return
+  try {
+    await navigator.clipboard.writeText(props.integrationId)
+    showSuccess(t('order.integrationIdCopied'))
+  } catch {
+    showError(t('order.integrationIdCopyFailed'))
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="integrationId || partnerId || providerId || storeLabel"
+    class="integration-details"
+    :class="{ 'integration-details--owned': storeLabel }"
+  >
+    <div class="integration-details__header">
+      <div class="integration-details__title">
+        <div class="fm-typo-en-title-sm-600">{{ t('order.integrationDetails') }}</div>
+        <FmTooltip :content="t('order.integrationIdGuidance')" :z-index="1000">
+          <FmIcon
+            name="info"
+            size="sm"
+            class="cursor-help text-fm-color-neutral-gray-400"
+          />
+        </FmTooltip>
+      </div>
+      <span v-if="storeLabel" class="integration-details__store-label fm-typo-en-body-sm-600">
+        {{ storeLabel }}
+      </span>
+    </div>
+    <div class="integration-details__row fm-typo-cn-body-md-400">
+      <span class="text-fm-color-neutral-gray-400">{{ t('order.feedmeIntegrationId') }}</span>
+      <div class="integration-details__value">
+        <code>{{ integrationId || t('order.integrationIdNotAssigned') }}</code>
+        <FmButton
+          v-if="integrationId"
+          variant="tertiary"
+          size="md"
+          :label="t('order.copy')"
+          @click="copyIntegrationId"
+        />
+      </div>
+    </div>
+    <div v-if="visiblePartnerId" class="integration-details__row fm-typo-cn-body-md-400">
+      <span class="text-fm-color-neutral-gray-400">{{ partnerLabel || t('order.partnerId') }}</span>
+      <code>{{ visiblePartnerId }}</code>
+    </div>
+    <div v-if="providerId" class="integration-details__row fm-typo-cn-body-md-400">
+      <span class="text-fm-color-neutral-gray-400">{{
+        providerLabel || t('order.platformStoreId')
+      }}</span>
+      <code>{{ providerId }}</code>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.integration-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 1rem;
+  margin-top: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+}
+
+.integration-details--owned {
+  border-color: var(--fm-color-primary-oats);
+  box-shadow: inset 0.25rem 0 0 var(--fm-color-primary);
+}
+
+.integration-details__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.integration-details__title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.integration-details__store-label {
+  padding: 0.25rem 0.625rem;
+  color: var(--fm-color-primary);
+  background: var(--fm-color-primary-oats);
+  border-radius: 999px;
+}
+
+.integration-details__row {
+  display: grid;
+  grid-template-columns: 10rem minmax(0, 1fr);
+  align-items: center;
+  gap: 1rem;
+}
+
+.integration-details__value {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+code {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 460px) {
+  .integration-details__row {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+  }
+
+  .integration-details__header {
+    align-items: flex-start;
+  }
+}
+</style>

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

@@ -0,0 +1,335 @@
+<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 ShopeefoodStoreView } 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', storeID?: string): void }>()
+const { t } = useI18n()
+const Dialog = useDialog()
+const menuStore = useMenuStore()
+const { startAsyncCallWithErr } = useLoading()
+const { showError, showSuccess } = useSnackbarFunctions()
+const { isInternal } = useInternalUser()
+
+const stores = ref<ShopeefoodStoreView[]>([])
+const editing = ref<null | {
+  mode: 'new' | 'edit'
+  integrationId: string | null
+  routeId: string
+  storeID: string
+}>(null)
+const isSaving = ref(false)
+const form = reactive<{ storeID: string; catalogId: string | null; enable: boolean }>({
+  storeID: '',
+  catalogId: null,
+  enable: true
+})
+const originalForm = reactive<{ storeID: string; catalogId: string | null; enable: boolean }>({
+  storeID: '',
+  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 syncMenu() {
+  const enabledStore = additionalStores.value.find((store) => store.enable === true)
+  emits('syncMenu', enabledStore?.storeID)
+}
+
+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.listShopeefoodStores(props.restaurantId)
+  })
+}
+onMounted(load)
+watch(() => props.restaurantId, load)
+
+function openAdd() {
+  editing.value = { mode: 'new', integrationId: null, routeId: '', storeID: '' }
+  form.storeID = ''
+  form.catalogId = null
+  form.enable = true
+}
+function openEdit(store: ShopeefoodStoreView) {
+  editing.value = {
+    mode: 'edit',
+    integrationId: store.integrationId,
+    routeId: store.routeId,
+    storeID: store.storeID
+  }
+  form.storeID = store.storeID
+  form.catalogId = store.catalogId ?? null
+  form.enable = store.enable ?? false
+  originalForm.storeID = form.storeID
+  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
+
+  const storeID = form.storeID.trim()
+  if (!storeID) {
+    showError(t('order.shopeefoodStoreIdRequired'))
+    return
+  }
+  const editingId = editing.value?.mode === 'edit' ? editing.value.storeID : null
+  if (stores.value.some((store) => store.storeID === storeID && store.storeID !== editingId)) {
+    showError(t('order.shopeefoodStoreIdAlreadyExists'))
+    return
+  }
+  isSaving.value = true
+  try {
+    await startAsyncCallWithErr(async () => {
+      const payload = { storeID, catalogId: form.catalogId, enable: form.enable }
+      if (editing.value?.mode === 'new') {
+        await remoteOrderApi.integratedDelivery.addShopeefoodStore(props.restaurantId, payload)
+        showSuccess(t('order.storeAdded'))
+      } else if (editing.value) {
+        const updatePayload =
+          form.enable === false &&
+          storeID === originalForm.storeID &&
+          form.catalogId === originalForm.catalogId
+            ? { storeID, enable: false }
+            : payload
+        await remoteOrderApi.integratedDelivery.updateShopeefoodStore(
+          props.restaurantId,
+          editing.value.routeId,
+          updatePayload
+        )
+        showSuccess(t('order.storeUpdated'))
+      }
+      editing.value = null
+      await load()
+    })
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function promptRemove(store: ShopeefoodStoreView) {
+  if (store.enable) {
+    showError(t('order.disableBeforeRemove'))
+    return
+  }
+  Dialog.open({
+    title: t('order.removeStoreConfirm', { merchantID: store.storeID }),
+    message: t('order.shopeefoodRemovalWarning'),
+    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.removeShopeefoodStore(
+        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="syncMenu"
+        />
+        <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.shopeefoodStoresHint') }}
+    </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.storeID }}</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"
+        :provider-id="store.providerId ?? store.storeID"
+        :provider-label="t('order.shopeefoodStoreId')"
+      />
+    </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">
+        <FmTextField v-model="form.storeID" :label="t('order.shopeefoodStoreId')" />
+        <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.storeID"
+          :provider-label="t('order.shopeefoodStoreId')"
+        />
+      </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/ShopeefoodSetting.vue

@@ -7,6 +7,8 @@ import type { IntegratedDeliverySettingData } from './IntegratedDelivery.vue'
 import { useLoading } from '@/composables/loading'
 import { remoteOrderApi } from '@/api/remoteOrder'
 import IntegratedDelivery from './IntegratedDelivery.vue'
+import ShopeefoodAdditionalStores from './ShopeefoodAdditionalStores.vue'
+import IntegrationIdentityDetails from './IntegrationIdentityDetails.vue'
 import { clone } from '@/helpers/object'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 
@@ -56,10 +58,12 @@ const modelValue = computed<IntegratedDeliverySettingData>(() => {
 })
 
 function updateData({ manual, auto }: IntegratedDeliverySettingData) {
+  const { integrationId: storeID, ...autoSettings } = auto
   data.manual = manual
   data.integrated = {
-    ...auto,
-    storeID: auto.integrationId,
+    ...data.integrated,
+    ...autoSettings,
+    storeID,
     reportConfig: {
       discountCampaigns: [],
       commissionRate: auto.commissionRate
@@ -78,19 +82,21 @@ function updateDataPass({ manual, auto }: IntegratedDeliverySettingData) {
 }
 
 const { startAsyncCallWithErr } = useLoading()
-async function syncMenu() {
+async function syncMenu(storeID?: string) {
   await startAsyncCallWithErr(async () => {
-    const res = await remoteOrderApi.integratedDelivery.syncShopeefoodMenu(data.integrated.storeID)
-    const temp = {
-      ...modelValue.value.auto,
-      lastSynchronize: res?.lastSynchronize || modelValue.value.auto.lastSynchronize
+    const isPrimary = storeID === undefined
+    const targetStoreID = storeID ?? data.integrated.storeID
+    await remoteOrderApi.integratedDelivery.syncShopeefoodMenu(targetStoreID)
+    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()
@@ -124,5 +130,20 @@ async function cancelTestOrder() {
     @sync-menu="syncMenu"
     @flow-test-order="flowTestOrder"
     @cancel-test-order="cancelTestOrder"
+  >
+    <template #integration-details>
+      <IntegrationIdentityDetails
+        :integration-id="primaryIntegrationId"
+        :provider-id="data.integrated.storeID"
+        :provider-label="t('order.shopeefoodStoreId')"
+        :store-label="t('order.primaryStore')"
+      />
+    </template>
+  </IntegratedDelivery>
+  <ShopeefoodAdditionalStores
+    v-if="canUseAutoDeliveryIntegration === true"
+    :restaurant-id="restaurantId"
+    :primary-enabled="modelValue.auto.enable"
+    @sync-menu="syncMenu"
   />
 </template>

package/src/views/order-settings/queue/QueueSetting.vue

@@ -317,7 +317,7 @@ async function saveAllowOverrideQueueCode(value: boolean) {
                 />
               </div>
               <div class="flex flex-col gap-1">
-                <span class="text-sm">{{ t('order.current') }}</span>
+                <span class="text-sm">{{ t('order.currentNumber') }}</span>
                 <FmTextField
                   type="number"
                   :model-value="codeSetting.current"