@feedmepos/mf-order-setting 0.0.2 → 0.0.6

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

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import {
+  FdoFoodpandaReportCalculationConfig,
+  FdoLinkedDelivery
+} from '@feedmepos/core/entity'
+import { FdoFoodpandaSettings } from '@entity'
+import { type PropType, reactive, computed } from 'vue'
+import IntegratedDelivery from './IntegratedDelivery.vue'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { clone } from '@/helpers/object'
+import type { DeliveryCompany } from '../delivery'
+import type { IntegratedDeliverySettingData } from './IntegratedDelivery.vue'
+import { useLoading } from '@/composables/loading'
+import { remoteOrderApi } from '@/api/remoteOrder'
+// import type { IFPDiscountCampaign } from './FoodpandaCampaignDialog.vue'
+import { useDialog } from '@feedmepos/ui-library'
+import FoodpandaCampaignDialog, { type IFPDiscountCampaign } from './FoodpandaCampaignDialog.vue'
+import { DateRange } from '@/helpers/date'
+
+export interface FoodpandaDeliveryData {
+  manual: FdoLinkedDelivery | null
+  integrated: FdoFoodpandaSettings
+}
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<FoodpandaDeliveryData>,
+    required: true
+  },
+  company: {
+    type: Object as PropType<DeliveryCompany>,
+    required: true
+  },
+  canUseAutoDeliveryIntegration: {
+    type: [String, Boolean],
+    required: true
+  }
+})
+
+const data = reactive(clone(props.initialValue))
+const modelValue = computed<IntegratedDeliverySettingData>(() => {
+  const auto = data.integrated
+  return {
+    manual: data.manual,
+    auto: {
+      enable: auto.enable ?? false,
+      integrationId: auto.remoteId ?? '',
+      autoCloseBill: auto.autoCloseBill ?? false,
+      catalogId: auto?.catalogId ?? null,
+      commissionRate: auto.reportConfig?.commissionRate ?? 0,
+      lastSynchronize: auto.lastSynchronize ?? '',
+      autoAccept: auto.autoAccept ?? false,
+      ignoreDiscount: auto.ignoreDiscount ?? false,
+      status: auto.status,
+      updatedAt: auto.updatedAt,
+      sstInclusive: auto.sstInclusive,
+      menuSyncError: auto.menuSyncError,
+    }
+  }
+})
+
+function initReportConfig(): FdoFoodpandaReportCalculationConfig {
+  return {
+    commissionRate: 100,
+    discountCampaigns: []
+  }
+}
+
+function updateData({ manual, auto }: IntegratedDeliverySettingData) {
+  data.manual = manual
+  data.integrated = {
+    ...auto,
+    remoteId: auto.integrationId,
+    reportConfig: {
+      ...(data.integrated?.reportConfig || initReportConfig()),
+      commissionRate: auto.commissionRate
+    }
+  }
+  return { manual: data.manual, integrated: data.integrated }
+}
+
+const emits = defineEmits<{
+  (e: 'update:model-value', payload: { manual: any; auto: any }): void
+}>()
+
+function updateDataPass({ manual, auto }: IntegratedDeliverySettingData) {
+  const updatedData = updateData({ manual, auto })
+  emits('update:model-value', { manual: updatedData.manual, auto: updatedData.integrated })
+}
+
+const campaigns = computed(() => data.integrated.reportConfig?.discountCampaigns || [])
+function setCampaigns(fn: (campaigns: IFPDiscountCampaign[]) => IFPDiscountCampaign[]) {
+  data.integrated = {
+    ...data.integrated,
+    reportConfig: {
+      ...(data.integrated.reportConfig || initReportConfig()),
+      discountCampaigns: fn(campaigns.value)
+    }
+  }
+}
+
+const Dialog = useDialog()
+
+function addCampaign() {
+  let updatedCampaign: IFPDiscountCampaign
+
+  Dialog.open({
+    title: 'Add campaign',
+    contentComponent: FoodpandaCampaignDialog,
+    contentComponentProps: {
+      'onUpdate:modelValue': (v: IFPDiscountCampaign) => {
+        updatedCampaign = v
+      }
+    },
+    primaryActions: {
+      text: 'Add',
+      variant: 'primary',
+      close: true
+    }
+  }).onPrimary(() => {
+    if (updatedCampaign) {
+      setCampaigns((campaigns) => [...campaigns, updatedCampaign])
+      const updatedData = {
+        manual: data.manual,
+        auto: {
+          ...data.integrated,
+          reportConfig: {
+            ...data.integrated.reportConfig,
+            discountCampaigns: campaigns
+          }
+        }
+      }
+
+      emits('update:model-value', updatedData)
+    }
+  })
+}
+
+function updateCampaign(index: number) {
+  let updatedCampaign: IFPDiscountCampaign
+  Dialog.open({
+    title: 'Update campaign',
+    contentComponent: FoodpandaCampaignDialog,
+    contentComponentProps: {
+      initialValue: campaigns.value[index],
+      'onUpdate:modelValue': (v: IFPDiscountCampaign) => {
+        updatedCampaign = v
+      }
+    },
+    primaryActions: {
+      text: 'Update',
+      variant: 'primary',
+      close: true
+    }
+  }).onPrimary(() => {
+    setCampaigns((campaigns) => campaigns.map((c, i) => (i === index ? updatedCampaign : c)))
+    const updatedData = {
+      manual: data.manual,
+      auto: {
+        ...data.integrated,
+        reportConfig: {
+          ...data.integrated.reportConfig,
+          discountCampaigns: campaigns
+        }
+      }
+    }
+    emits('update:model-value', updatedData)
+  })
+}
+
+function deleteCampaign(index: number) {
+  setCampaigns((campaigns) => campaigns.filter((_, i) => i !== index))
+  const updatedData = {
+    manual: data.manual,
+    auto: {
+      ...data.integrated,
+      reportConfig: {
+        ...data.integrated.reportConfig,
+        discountCampaigns: campaigns
+      }
+    }
+  }
+
+  emits('update:model-value', updatedData)
+}
+
+function formatCampaignDate(date: { start: string; end: string }) {
+  return new DateRange(date).formatWith()
+}
+
+const { startAsyncCall } = useLoading()
+async function syncMenu() {
+  const restaurantId = currentRestaurant.value?._id ?? ''
+  await startAsyncCall(async () => {
+    const res = await remoteOrderApi.integratedDelivery.syncFoodpandaMenu(restaurantId)
+    const temp = {
+      ...modelValue.value.auto,
+      lastSynchronize: res?.lastSynchronize || modelValue.value.auto.lastSynchronize
+    }
+    updateData({ auto: temp, manual: data.manual })
+  })
+}
+
+const { currentRestaurant } = useCoreStore()
+import { useSnackbarFunctions } from '@/components/snackbar' 
+const { showSuccess } = useSnackbarFunctions();
+
+async function flowTestOrder() {
+  await remoteOrderApi.integratedDelivery.flowTestOrder(
+    currentRestaurant.value?._id ?? '',
+    'foodpanda'
+  )
+  showSuccess('Completed. ')
+}
+
+async function cancelTestOrder() {
+  await remoteOrderApi.integratedDelivery.cancelTestOrder(
+    currentRestaurant.value?._id ?? '',
+    'foodpanda'
+  )
+  showSuccess('Completed. ')
+}
+</script>
+<template>
+  <IntegratedDelivery
+    :model-value="modelValue"
+    :company="company"
+    :can-use-auto-delivery-integration="canUseAutoDeliveryIntegration"
+    @update:model-value="updateDataPass"
+    @sync-menu="syncMenu"
+    @flow-test-order="flowTestOrder"
+    @cancel-test-order="cancelTestOrder"
+  >
+  <template #default="{ editable }">
+    
+    <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-10">Discount campaign</div>
+  <FmButton label="Add new campaign" icon="add" variant="plain" @click="addCampaign" class="mb-3" />
+
+  <div v-if="campaigns.length > 0">
+    <div v-for="(campaign, index) in campaigns" :key="index">
+      <FmCard variant="outlined" class="p-5 flex justify-between items-center mb-5">
+        <div>
+          <span class="font-bold">{{ campaign.name }} ({{ campaign.vendorBearPercentage }}%)</span>
+          <br />
+          {{ formatCampaignDate(campaign.date) }}
+        </div>
+        <div>
+          <div class="flex flex-row">
+            <FmButton append-icon="edit" variant="tertiary" @click="updateCampaign(index)" />
+            <FmButton append-icon="delete" variant="tertiary" @click="deleteCampaign(index)" />
+          </div>
+        </div>
+      </FmCard>
+    </div>
+  </div>
+  </template>
+
+</IntegratedDelivery>
+
+  
+</template>

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, type PropType, reactive } from 'vue'
+
+import type { FdoLinkedDelivery } from '@feedmepos/core/entity'
+import { FdoGrabfoodSettings } from '@entity'
+import type { DeliveryCompany } from '../delivery'
+import type { IntegratedDeliverySettingData } from './IntegratedDelivery.vue'
+import { useRestaurantStore } from '@/stores/restaurant'
+import { useLoading } from '@/composables/loading'
+import { remoteOrderApi } from '@/api/remoteOrder'
+import IntegratedDelivery from './IntegratedDelivery.vue'
+import { clone } from '@/helpers/object'
+import { useCoreStore } from '@feedmepos/mf-common'
+
+export interface GrabfoodDeliveryData {
+  manual: FdoLinkedDelivery | null
+  integrated: FdoGrabfoodSettings
+}
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<GrabfoodDeliveryData>,
+    required: true
+  },
+  company: {
+    type: Object as PropType<DeliveryCompany>,
+    required: true
+  },
+  canUseAutoDeliveryIntegration: {
+    type: [String, Boolean],
+    required: true
+  }
+})
+
+const data = reactive(clone(props.initialValue));
+const modelValue = computed<IntegratedDeliverySettingData>(() => {
+  const auto = data.integrated
+  return {
+    manual: data.manual,
+    auto: {
+      enable: auto.enable,
+      integrationId: auto.merchantID,
+      autoCloseBill: auto.autoCloseBill || false,
+      catalogId: auto?.catalogId || null,
+      commissionRate: auto.commissionRate,
+      lastSynchronize: auto.lastSynchronize,
+      status: auto.status,
+      updatedAt: auto.updatedAt,
+      menuSyncError: auto.menuSyncError,
+    }
+  }
+})
+
+const restaurantStore = useRestaurantStore()
+
+
+function updateData({ manual, auto }: IntegratedDeliverySettingData) {
+  data.manual = manual
+  data.integrated = {
+    ...auto,
+    merchantID: auto.integrationId,
+    commissionRate: auto.commissionRate,
+    partnerMerchantID: restaurantStore.currentRestaurantId
+  }
+  return { manual: data.manual, integrated: data.integrated };
+}
+
+const emits = defineEmits<{
+  (e: 'update:model-value', payload: { manual: any; auto: any }): void;
+}>();
+
+
+function updateDataPass({ manual, auto }: IntegratedDeliverySettingData) {
+  const updatedData = updateData({ manual, auto });
+  emits('update:model-value', { manual: updatedData.manual, auto: updatedData.integrated });
+}
+
+
+const { startAsyncCall } = useLoading()
+async function syncMenu() {
+  await startAsyncCall(async () => {
+    const res = await remoteOrderApi.integratedDelivery.syncGrabfoodMenu(
+      data.integrated.merchantID ?? ''
+    )
+    const temp = {
+      ...modelValue.value.auto,
+      lastSynchronize: res?.lastSynchronize || modelValue.value.auto.lastSynchronize
+    }
+    updateData({ auto: temp, manual: data.manual })
+  })
+}
+
+const { currentRestaurant } = useCoreStore()
+
+import { useSnackbarFunctions } from '@/components/snackbar' 
+const { showSuccess } = useSnackbarFunctions();
+
+async function flowTestOrder() {
+  await startAsyncCall(async () => {
+    await remoteOrderApi.integratedDelivery.flowTestOrder(
+      currentRestaurant.value?._id ?? '',
+      'grabfood'
+    )
+  })
+  showSuccess('Completed. ')
+}
+async function cancelTestOrder() {
+  await startAsyncCall(async () => {
+    await remoteOrderApi.integratedDelivery.cancelTestOrder(
+      currentRestaurant.value?._id ?? '',
+      'grabfood'
+    )
+  })
+  showSuccess('Completed. ')
+}
+</script>
+
+<template>
+  <IntegratedDelivery
+    :model-value="modelValue"
+    :company="company"
+    :can-use-auto-delivery-integration="canUseAutoDeliveryIntegration"
+    @update:model-value="updateDataPass"
+    @sync-menu="syncMenu"
+    @flow-test-order="flowTestOrder"
+    @cancel-test-order="cancelTestOrder"
+  />
+</template>

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

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import type { FdoLinkedDelivery } from '@feedmepos/core/entity'
+import Day from 'dayjs'
+import { type PropType, computed } from 'vue'
+import type { DeliveryCompany } from '../delivery'
+import { useMenuStore } from '@/stores/menu/menu'
+import ManualIntegratedDeliverySetting from '../components/ManualIntegratedDeliverySetting.vue'
+import { useCoreStore } from '@feedmepos/mf-common'
+
+export interface AutoIntegrateData {
+  enable: boolean
+  integrationId: string
+  catalogId: string | null
+  autoAccept?: boolean | null
+  autoCloseBill: boolean
+  commissionRate: number
+  lastSynchronize?: string | null
+  ignoreDiscount?: boolean
+  status?: string | null
+  updatedAt?: string | null
+  menuSyncError?: string | null
+  sstInclusive?: boolean | null
+}
+
+export interface IntegratedDeliverySettingData {
+  manual: FdoLinkedDelivery | null
+  auto: AutoIntegrateData
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<IntegratedDeliverySettingData>,
+    required: true
+  },
+  company: {
+    type: Object as PropType<DeliveryCompany>,
+    required: true
+  },
+  canUseAutoDeliveryIntegration: {
+    type: [String, Boolean],
+    required: true
+  }
+})
+
+const isDev = devInfo.mode === 'development'
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: IntegratedDeliverySettingData): void
+  (event: 'syncMenu'): void
+  (event: 'flowTestOrder'): void
+  (event: 'cancelTestOrder'): void
+}>()
+
+const menuStore = useMenuStore()
+// const userStore = useUserStore();
+const { sessionUser } = useCoreStore()
+
+const canEdit = computed(() => sessionUser.value?.role.isAdmin ?? false)
+
+function updateManual(manual: FdoLinkedDelivery | null) {
+  emits('update:model-value', {
+    ...props.modelValue,
+    manual
+  })
+}
+
+function updateAuto(fn: (oldV: AutoIntegrateData) => AutoIntegrateData) {
+  emits('update:model-value', {
+    ...props.modelValue,
+    auto: fn(props.modelValue.auto)
+  })
+}
+
+function updateActive(active: boolean) {
+  updateAuto((oldV) => ({
+    ...oldV,
+    enable: active
+  }))
+}
+
+export type InputModel = string | number | boolean | null
+
+function getValue<T>(value: InputModel, type: 'string' | 'number'): T {
+  let result = value
+  switch (type) {
+    case 'string':
+      result = (value || '').toString()
+      break
+    case 'number':
+      const v = Number.parseFloat((value || '').toString())
+      result = Number.isNaN(v) ? 0 : v
+      break
+  }
+  return result as unknown as T
+}
+
+function updateIntegrateId(integrationId: InputModel) {
+  updateAuto((oldV) => ({
+    ...oldV,
+    integrationId: getValue<string>(integrationId, 'string')
+  }))
+}
+
+function updateCommission(commission: InputModel) {
+  updateAuto((oldV) => ({
+    ...oldV,
+    commissionRate: getValue<number>(commission, 'number')
+  }))
+}
+
+function updateMenuCatalog(catalogId: string | null) {
+  updateAuto((oldV) => ({
+    ...oldV,
+    catalogId
+  }))
+}
+
+type OrderSettingKey = 'autoAcceptOrder' | 'autoCloseBill' | 'ignoreDiscount' | 'sstInclusive'
+const orderSettingValue = computed(() => {
+  const { autoAccept, autoCloseBill, ignoreDiscount, sstInclusive } = props.modelValue.auto
+  const value: OrderSettingKey[] = []
+  if (autoAccept) value.push('autoAcceptOrder')
+  if (autoCloseBill) value.push('autoCloseBill')
+  if (ignoreDiscount) value.push('ignoreDiscount')
+  if (sstInclusive) value.push('sstInclusive')
+  return value
+})
+const orderSettingOptions = computed<
+  {
+    label: string
+    value: OrderSettingKey
+  }[]
+>(() => {
+  const options: {
+    label: string
+    value: OrderSettingKey
+  }[] = [
+    {
+      label: 'Allowed auto close bill',
+      value: 'autoCloseBill'
+    }
+  ]
+  if (props.modelValue.auto.autoAccept !== undefined) {
+    options.unshift({
+      label: 'Allowed auto accept order',
+      value: 'autoAcceptOrder'
+    })
+  }
+  if (props.modelValue.auto.autoAccept !== undefined) {
+    options.push({
+      label: 'Ignore Discount',
+      value: 'ignoreDiscount'
+    })
+  }
+  if (props.modelValue.auto.sstInclusive !== undefined) {
+    options.push({
+      label: 'SST Inclusive',
+      value: 'sstInclusive'
+    })
+  }
+  return options
+})
+
+function updateOrderSettings(orderSettingKeys: OrderSettingKey[]) {
+  updateAuto((oldV) => ({
+    ...oldV,
+    autoAccept: orderSettingKeys.includes('autoAcceptOrder'),
+    autoCloseBill: orderSettingKeys.includes('autoCloseBill'),
+    ignoreDiscount: orderSettingKeys.includes('ignoreDiscount'),
+    sstInclusive: orderSettingKeys.includes('sstInclusive')
+  }))
+}
+</script>
+
+<template>
+  <ManualIntegratedDeliverySetting
+    :model-value="modelValue.manual"
+    :company="company"
+    :catalog-options="menuStore.catalogOptions"
+    @update:model-value="updateManual"
+  />
+  <div class="mt-10">
+    <FmSwitch
+      :model-value="modelValue.auto.enable"
+      label="Active auto integration"
+      label-placement="right"
+      @update:model-value="updateActive"
+    />
+    <!-- //disabled can edit -->
+    <div v-if="canUseAutoDeliveryIntegration === true && modelValue.auto.enable">
+      <FmCard variant="outlined" class="mt-10 p-5">
+        <div class="flex-grow fm-typo-en-title-sm-800 mb-5">Integration</div>
+
+        <FmTextField
+          :model-value="modelValue.auto.integrationId"
+          label="Remote ID"
+          @update:model-value="updateIntegrateId"
+        />
+        <div class="mb-5">
+          <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-7">Order Setting</div>
+
+          <div v-for="(item, index) in orderSettingOptions" :key="index" class="flex flex-col">
+            <FmCheckbox
+              :model-value="orderSettingValue"
+              :label="item.label"
+              :value="item.value"
+              @update:model-value="updateOrderSettings"
+            />
+          </div>
+        </div>
+
+        <div class="mb-5">
+          <FmTextField
+            :model-value="modelValue.auto.commissionRate"
+            label="Commission"
+            @update:model-value="updateCommission"
+          >
+            <template #append>%</template>
+          </FmTextField>
+        </div>
+        <div class="mb-3">
+          <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-7">Sync Menu</div>
+          <FmSelect
+            :model-value="modelValue.auto.catalogId"
+            label="Catalog"
+            :items="menuStore.catalogOptions"
+            @update:model-value="updateMenuCatalog"
+          />
+        </div>
+
+        <div class="text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400 mb-5 mt-5">
+          <div class="flex flex-row">
+            <div v-if="modelValue.auto.status" class="mr-4">
+              Status: {{ modelValue.auto.status }}
+            </div>
+            <FmTooltip
+              v-if="modelValue.auto.status === 'FAILED' && modelValue.auto.menuSyncError !== null"
+              :content="modelValue.auto.menuSyncError"
+              :zIndex=1000
+            >
+              <FmIcon name="info" size="sm" />
+            </FmTooltip>
+          </div>
+
+          <div v-if="modelValue.auto.updatedAt">
+            Updated at: {{ Day(modelValue.auto.updatedAt).format('DD/MM/YYYY hh:mm a') }}
+          </div>
+        </div>
+        <div class="flex flex-row">
+          <FmButton variant="primary" label="Sync Menu" @click="emits('syncMenu')" />
+
+          <div
+            v-if="modelValue.auto.lastSynchronize"
+            class="m-2 ml-10 text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400"
+          >
+            Last synchronize:
+            {{ Day(modelValue.auto.lastSynchronize).format('DD/MM/YYYY hh:mm a') }}
+          </div>
+        </div>
+
+        <slot :editable="canEdit" />
+      </FmCard>
+    </div>
+    <div class="flex flex-row mt-5" v-if="canUseAutoDeliveryIntegration && canEdit">
+      <!-- && isDev -->
+      <div class="flex-grow fm-typo-en-title-sm-800 mb-3 mt-5">Flow Test Order</div>
+
+      <FmButton variant="primary" label="Flow" @click="emits('flowTestOrder')" class="m-1" />
+      <FmButton variant="primary" label="Cancel" @click="emits('cancelTestOrder')" class="m-1" />
+    </div>
+  </div>
+</template>