@feedmepos/mf-order-setting 0.0.32 → 0.0.34

package/src/views/order-settings/delivery/DeliverySetting.vue

@@ -39,7 +39,7 @@
     dismiss-away
     :maxWidth="600"
     :model-value="sideSheetIntegrated"
-    @update:model-value="sideSheetIntegrated = $event"
+    @update:model-value="(v: boolean) => handleSideSheet(v)"
   >
     <FoodpandaSetting
       v-if="componentProps.key === AUTO_INTEGRATION_CLIENT.foodpanda"
@@ -62,6 +62,14 @@
       :can-use-auto-delivery-integration="componentProps.canUseAuto"
       @update:model-value="handleModelValueUpdate"
     />
+    <DeliverooSetting
+      v-if="componentProps.key === AUTO_INTEGRATION_CLIENT.deliveroo"
+      :initial-value="componentProps.initialValue"
+      :company="componentProps.company"
+      :can-use-auto-delivery-integration="componentProps.canUseAuto"
+      @update:model-value="handleModelValueUpdate"
+    />
+
     <FeedmeDelivery
       v-if="feedMeComponentProps.key === F_ORDER_PLATFORM.enum.FEEDME"
       :initial-value="feedMeComponentProps.initialValue"
@@ -160,13 +168,14 @@
 import { computed, h, ref, watch } from 'vue'
 import RestaurantSelector from '../components/RestaurantSelector.vue'
 import { type ColumnDef } from '@feedmepos/ui-library'
-import type { FdoExternalSetting, FdoFoodpandaSettings } from '@entity'
+import type { FdoDeliverooSettings, FdoFoodpandaSettings, FdoExternalSetting } from '@entity'
 import type {
   FdoLinkedDelivery,
   FdoRestaurantFeedmeDelivery,
   FdoRestaurantInHouseDelivery
 } from '@feedmepos/core/entity'
 import {
+  F_COUNTRY,
   F_DELIVERY_TYPE,
   F_FEATURE,
   F_ORDER_PLATFORM,
@@ -193,6 +202,7 @@ import { formatAddress } from '@/helpers/profile'
 import { useSnackbarFunctions } from '@/components/snackbar'
 import useSearch from '@/composables/search'
 import DeliveryList from './DeliveryList.vue'
+import DeliverooSetting from './integrated-delivery/DeliverooSetting.vue'
 import { Pos } from '@feedmepos/core'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 
@@ -200,8 +210,14 @@ const { t } = useI18n()
 const { searchKey, filter } = useSearch()
 const { showSuccess } = useSnackbarFunctions()
 const restaurantStore = useRestaurantStore()
-const { currentRestaurant, currentBusiness, readRestaurants, changeRestaurant, sessionUser } =
-  useCoreStore()
+const {
+  currentRestaurant,
+  currentBusiness,
+  readRestaurants,
+  changeRestaurant,
+  sessionUser,
+  currentCountry
+} = useCoreStore()
 const menuStore = useMenuStore()
 const linkedCompanies = ref<LinkedDeliveryDoc[]>([])
 const deliveryCompanies = ref<DeliveryCompany[]>([])
@@ -243,6 +259,11 @@ async function toggleLocalSidesheet(rowData: any) {
 }
 
 const title = ref('')
+
+function handleSideSheet(v: boolean) {
+  sideSheetIntegrated.value = v
+  feedmeValidate.value = true
+}
 async function toggleIntegratedSidesheet(data: any) {
   const rowData = data.original ?? data
 
@@ -261,6 +282,10 @@ async function toggleIntegratedSidesheet(data: any) {
       title.value = `${t('order.manageDelivery', { company: 'shopeefood' })}`
       updateIntegratedDeliveryType(rowData)
       break
+    case AUTO_INTEGRATION_CLIENT.deliveroo:
+      title.value = 'Manage deliveroo deivery'
+      updateIntegratedDeliveryType(rowData)
+      break
     case F_ORDER_PLATFORM.enum.FEEDME:
       title.value = `${t('order.feedmeExpressTitle')}`
       updateFeedmeExpress(rowData)
@@ -481,6 +506,13 @@ const shopee = computed<FdoShopeeFoodSettings>(() => {
   }
 })
 
+const deliveroo = computed<FdoDeliverooSettings>(() => {
+  return {
+    ...deliveryData.initDeliverooDelivery(),
+    ...deliverooSetting.value
+  }
+})
+
 const external = computed<FdoExternalSetting>(() => {
   return {
     ...deliveryData.initExternalDelivery(),
@@ -488,7 +520,7 @@ const external = computed<FdoExternalSetting>(() => {
   }
 })
 const localDeliveryCompanies = computed<DeliveryRow[]>(() => {
-  const res = filterLocalDeliveryCompanies(deliveryCompanies.value).map<DeliveryRow>((company) => {
+  const res = deliveryCompanies.value.map<DeliveryRow>((company) => {
     const { name, paymentTypeKey, key } = company
     const doc = getLinkedDeliveryDoc(linkedCompanies.value, key)
 
@@ -506,20 +538,13 @@ const localDeliveryCompanies = computed<DeliveryRow[]>(() => {
   return res.filter((r) => filter([r.name, r.paymentType, r.status.join(' ')]))
 })
 
-const { getLinkedDeliveryDoc, filterLocalDeliveryCompanies, getPaymentType, equalKey } =
+const { getLinkedDeliveryDoc, getPaymentType, equalKey, isIntegratedPlatformSupported } =
   useDelivery()
 
 function getCatalog(catalogId: string | null) {
   return menuStore.catalogOptions.find(({ value }) => value === catalogId)?.label || ''
 }
 
-const reachMinPosVersion = computed<string | boolean>(() => {
-  const posVersion = currentRestaurant.value?.posVersion
-  if (!posVersion) return t('order.invalidPosVersion')
-  const res = Pos.canUse({ feature: F_FEATURE.enum.deliveryIntegration, posVersion })
-  return res === true ? true : res.toString()
-})
-
 function hasPurchaseFeature(deliveryType: string) {
   const features = currentRestaurant.value?.features || []
   const featureKey = equalKey(deliveryType, AUTO_INTEGRATION_CLIENT.foodpanda)
@@ -528,30 +553,35 @@ function hasPurchaseFeature(deliveryType: string) {
   return features.includes(featureKey) || t('order.restaurantHaveNotPurchase', { featureKey })
 }
 
-function canUseAutoDeliveryIntegration(deliveryType: string) {
-  if (reachMinPosVersion.value !== true) return reachMinPosVersion.value
-  return hasPurchaseFeature(deliveryType)
+const canUseAutoDeliveryIntegration = (client: string) => {
+  const hasFeature = hasPurchaseFeature(client)
+  if (typeof hasFeature === 'string') {
+    return hasFeature
+  }
+  switch (client) {
+    case 'deliveroo':
+      return (
+        currentCountry.value === F_COUNTRY.enum.SG ||
+        `${t('order.autoIntegrationCountryNotSupport')}`
+      )
+    default:
+      return true
+  }
 }
 
 const integratedCompanies = computed<IntegratedDeliveryRow[]>(() => {
-  const fpManual = getLinkedDeliveryDoc(linkedCompanies.value, AUTO_INTEGRATION_CLIENT.foodpanda)
-  const gfManual = getLinkedDeliveryDoc(linkedCompanies.value, AUTO_INTEGRATION_CLIENT.grabfood)
-  const sfManual = getLinkedDeliveryDoc(linkedCompanies.value, AUTO_INTEGRATION_CLIENT.shopeefood)
-
   const getIntegrateDoc = (client: AUTO_INTEGRATION_CLIENT) =>
     deliveryCompanies.value.find(({ key }) => equalKey(key, client))
   const fpIntegrate = getIntegrateDoc(AUTO_INTEGRATION_CLIENT.foodpanda)
   const grabIntegrate = getIntegrateDoc(AUTO_INTEGRATION_CLIENT.grabfood)
   const sfIntegrate = getIntegrateDoc(AUTO_INTEGRATION_CLIENT.shopeefood)
+  const drIntegrate = getIntegrateDoc(AUTO_INTEGRATION_CLIENT.deliveroo)
 
-  const generateStatus = (manualActive: boolean, integrateActive: boolean) => {
-    if (manualActive && integrateActive) return 'Active'
-    if (manualActive) return 'Manual'
-    if (integrateActive) return 'Active'
-    return 'Inactive'
+  const generateStatus = (integrateActive: boolean) => {
+    return integrateActive ? 'Active' : 'Inactive'
   }
 
-  return [
+  const feedmeDelivery = [
     {
       id: loadingKey.value.inhouse,
       name: 'In house delivery',
@@ -571,31 +601,32 @@ const integratedCompanies = computed<IntegratedDeliveryRow[]>(() => {
       status: feedmeExpress.value.enable ? ['Active'] : ['Inactive'],
       setting: feedmeExpress.value,
       catalog: getCatalog(feedmeExpress.value.catalogId || null)
-    },
+    }
+  ]
+
+  const integratedDelivery = [
     {
       id: loadingKey.value.fp,
-      name: 'FoodPanda delivery',
+      name: 'Food Panda delivery',
       key: AUTO_INTEGRATION_CLIENT.foodpanda,
       company: fpIntegrate,
-      paymentType: foodpanda.value.enable ? getPaymentType(fpManual?.paymentTypeKey) : '-',
-      status: [generateStatus(!!fpManual, foodpanda.value.enable)],
+      paymentType: 'Default',
+      status: [generateStatus(foodpanda.value.enable)],
       setting: foodpanda.value,
-      doc: fpManual,
-      catalog: getCatalog(fpManual?.catalogId || null),
+      catalog: getCatalog(foodpanda.value.catalogId ?? null),
       canUseAutoDeliveryIntegration: canUseAutoDeliveryIntegration(
         AUTO_INTEGRATION_CLIENT.foodpanda
       )
     },
     {
       id: loadingKey.value.gf,
-      name: 'GrabFood delivery',
+      name: 'Grab Food delivery',
       key: AUTO_INTEGRATION_CLIENT.grabfood,
       company: grabIntegrate,
-      paymentType: grabfood.value.enable ? getPaymentType(gfManual?.paymentTypeKey) : '-',
-      status: [generateStatus(!!gfManual, grabfood.value.enable)],
+      paymentType: 'Default',
+      status: [generateStatus(grabfood.value.enable)],
       setting: grabfood.value,
-      doc: gfManual,
-      catalog: getCatalog(gfManual?.catalogId || null),
+      catalog: getCatalog(grabfood.value?.catalogId || null),
       canUseAutoDeliveryIntegration: canUseAutoDeliveryIntegration(AUTO_INTEGRATION_CLIENT.grabfood)
     },
     {
@@ -603,15 +634,27 @@ const integratedCompanies = computed<IntegratedDeliveryRow[]>(() => {
       name: 'ShopeeFood delivery',
       key: AUTO_INTEGRATION_CLIENT.shopeefood,
       company: sfIntegrate,
-      paymentType: shopee.value.enable ? getPaymentType(sfManual?.paymentTypeKey) : '-',
-      status: [generateStatus(!!sfManual, shopee.value.enable)],
+      paymentType: 'Default',
+      status: [generateStatus(shopee.value.enable)],
       setting: shopee.value,
-      doc: sfManual,
-      catalog: getCatalog(sfManual?.catalogId || null),
+      catalog: getCatalog(shopee.value.catalogId || null),
       canUseAutoDeliveryIntegration: canUseAutoDeliveryIntegration(
         AUTO_INTEGRATION_CLIENT.shopeefood
       )
     },
+    {
+      id: loadingKey.value.dr,
+      name: 'Deliveroo delivery',
+      key: AUTO_INTEGRATION_CLIENT.deliveroo,
+      company: drIntegrate,
+      paymentType: 'Default',
+      status: [generateStatus(deliveroo.value.enable)],
+      setting: deliveroo.value,
+      catalog: getCatalog(deliveroo.value?.catalogId || null),
+      canUseAutoDeliveryIntegration: canUseAutoDeliveryIntegration(
+        AUTO_INTEGRATION_CLIENT.deliveroo
+      )
+    },
     {
       id: loadingKey.value.external,
       name: 'External delivery',
@@ -619,9 +662,16 @@ const integratedCompanies = computed<IntegratedDeliveryRow[]>(() => {
       setting: external.value,
       catalog: '-',
       paymentType: '-',
-      status: [generateStatus(false, external.value.enable)]
+      status: [generateStatus(external.value.enable)]
     }
   ]
+
+  return [
+    ...feedmeDelivery,
+    ...integratedDelivery.filter((delivery) => {
+      return isIntegratedPlatformSupported(delivery.key, currentCountry.value)
+    })
+  ]
 })
 
 const loadingKey = computed(() => {
@@ -632,12 +682,13 @@ const loadingKey = computed(() => {
     gf: `${id}_gf`,
     sf: `${id}_sf`,
     fm: `${id}_fm`,
+    dr: `${id}_dr`,
     external: `${id}_external`,
     local: (deliveryName: string) => `${id}_${deliveryName}`
   }
 })
 
-async function updateIntegratedDeliveryCompany(company: IntegratedDeliveryRow) {
+async function updateIntegratedDeliveryCompany() {
   switch (selectedIntegratedRow.value) {
     case AUTO_INTEGRATION_CLIENT.foodpanda:
       await updateIntegratedDeliverySetting()
@@ -648,6 +699,9 @@ async function updateIntegratedDeliveryCompany(company: IntegratedDeliveryRow) {
     case AUTO_INTEGRATION_CLIENT.shopeefood:
       await updateIntegratedDeliverySetting()
       break
+    case AUTO_INTEGRATION_CLIENT.deliveroo:
+      await updateIntegratedDeliverySetting()
+      break
     case F_ORDER_PLATFORM.enum.FEEDME:
       await updateFeedmeExpressSetting()
       break
@@ -678,6 +732,7 @@ const filteredCompanies = computed(() => {
 const grabfoodSetting = ref<FdoGrabfoodSettings | null>(null)
 const foodpandaSetting = ref<FdoFoodpandaSettings | null>(null)
 const shopeefoodSetting = ref<FdoShopeeFoodSettings | null>(null)
+const deliverooSetting = ref<FdoDeliverooSettings | null>(null)
 const externalSetting = ref<FdoExternalSetting | null>(null)
 const loadingDpi = ref<boolean>(false)
 
@@ -685,20 +740,41 @@ async function readData() {
   await startAsyncCallWithErr(async () => {
     loadingDpi.value = true
     linkedCompanies.value = await remoteOrderApi.readLinkedDeliveryCompanies()
+
     const resp = await remoteOrderApi.readLocalDeliveryCompanies()
     deliveryCompanies.value = sort(resp, { selector: 'name' })
-    grabfoodSetting.value = await remoteOrderApi.integratedDelivery.readGrabfood(
-      currentRestaurant.value?._id || ''
+
+    grabfoodSetting.value = isIntegratedPlatformSupported(
+      AUTO_INTEGRATION_CLIENT.grabfood,
+      currentCountry.value
+    )
+      ? await remoteOrderApi.integratedDelivery.readGrabfood(currentRestaurant.value?._id || '')
+      : null
+
+    foodpandaSetting.value = isIntegratedPlatformSupported(
+      AUTO_INTEGRATION_CLIENT.foodpanda,
+      currentCountry.value
     )
-    foodpandaSetting.value = await remoteOrderApi.integratedDelivery.readFoodpanda(
-      currentRestaurant.value?._id || ''
+      ? await remoteOrderApi.integratedDelivery.readFoodpanda(currentRestaurant.value?._id || '')
+      : null
+    shopeefoodSetting.value = isIntegratedPlatformSupported(
+      AUTO_INTEGRATION_CLIENT.shopeefood,
+      currentCountry.value
     )
-    shopeefoodSetting.value = await remoteOrderApi.integratedDelivery.readShopeefood(
-      currentRestaurant.value?._id || ''
+      ? await remoteOrderApi.integratedDelivery.readShopeefood(currentRestaurant.value?._id || '')
+      : null
+    deliverooSetting.value = isIntegratedPlatformSupported(
+      AUTO_INTEGRATION_CLIENT.deliveroo,
+      currentCountry.value
     )
-    externalSetting.value = await remoteOrderApi.integratedDelivery.readExternal(
-      currentRestaurant.value?._id || ''
+      ? await remoteOrderApi.integratedDelivery.readDeliveroo(currentRestaurant.value?._id || '')
+      : null
+    externalSetting.value = isIntegratedPlatformSupported(
+      AUTO_INTEGRATION_CLIENT.external,
+      currentCountry.value
     )
+      ? await remoteOrderApi.integratedDelivery.readExternal(currentRestaurant.value?._id || '')
+      : null
   })
   loadingDpi.value = false
 }
@@ -872,6 +948,11 @@ async function updateDelivery(
           integrated as FdoShopeeFoodSettings
         )
         break
+      case AUTO_INTEGRATION_CLIENT.deliveroo:
+        await restaurantStore.updateIntegratedDeliverooDelivery(
+          currentRestaurant.value?._id ?? '',
+          integrated as FdoDeliverooSettings
+        )
     }
   }
 }
@@ -927,9 +1008,10 @@ function convertStatustoI18(status: status): [string] {
 type companyName =
   | 'In house delivery'
   | 'FeedMe express'
-  | 'FoodPanda delivery'
-  | 'GrabFood delivery'
+  | 'Food Panda delivery'
+  | 'Grab Food delivery'
   | 'ShopeeFood delivery'
+  | 'Deliveroo delivery'
   | 'External delivery'
 
 function convertIntegratedCompanyName(name: companyName): string {
@@ -938,12 +1020,14 @@ function convertIntegratedCompanyName(name: companyName): string {
       return `${t('order.deliveryTitle', { company: 'In House' })}`
     case 'FeedMe express':
       return `${t('order.feedMeExpress')}`
-    case 'FoodPanda delivery':
-      return `${t('order.deliveryTitle', { company: 'FoodPanda' })}`
-    case 'GrabFood delivery':
-      return `${t('order.deliveryTitle', { company: 'GrabFood' })}`
+    case 'Food Panda delivery':
+      return `${t('order.deliveryTitle', { company: 'Food Panda' })}`
+    case 'Grab Food delivery':
+      return `${t('order.deliveryTitle', { company: 'Grab Food' })}`
     case 'ShopeeFood delivery':
       return `${t('order.deliveryTitle', { company: 'ShopeeFood' })}`
+    case 'Deliveroo delivery':
+      return `${t('order.deliveryTitle', { company: 'Deliveroo' })}`
     case 'External delivery':
       return `${t('order.externalDelivery')}`
     default:

package/src/views/order-settings/delivery/delivery.data.ts

@@ -1,4 +1,4 @@
-import type { FdoExternalSetting } from '@entity';
+import type { FdoDeliverooSettings, FdoExternalSetting } from '@entity';
 import {
   FdoRestaurantFeedmeDelivery,
   FdoGrabfoodSettings,
@@ -67,6 +67,14 @@ function initShopeefoodDelivery(): FdoShopeeFoodSettings {
   }
 }
 
+function initDeliverooDelivery(): FdoDeliverooSettings {
+  return {
+    enable: false,
+    merchantID: '',
+    catalogId: null,
+    autoCloseBill: false
+  }
+}
 function initExternalDelivery(): FdoExternalSetting {
   return {
     _id: '',
@@ -87,5 +95,6 @@ export default {
   initFoodpandaDelivery,
   initGrabfoodDelivery,
   initShopeefoodDelivery,
+  initDeliverooDelivery,
   initExternalDelivery
 }

package/src/views/order-settings/delivery/delivery.ts

@@ -1,21 +1,22 @@
-import { F_PAYMENT_NAME, FdoLinkedDelivery } from "@feedmepos/core/entity";
+import { F_PAYMENT_NAME, FdoLinkedDelivery, F_COUNTRY} from "@feedmepos/core/entity";
 
-export type LinkedDeliveryDoc = FdoLinkedDelivery & {  _rev: string };
+export type LinkedDeliveryDoc = FdoLinkedDelivery & { _rev: string };
 
 export enum AUTO_INTEGRATION_CLIENT {
   foodpanda = 'foodpanda',
   grabfood = 'grabfood',
   shopeefood = 'shopeefood',
+  deliveroo = 'deliveroo',
   external = 'external'
 }
 
 export interface DeliveryCompany {
-    id: string;
-    name: string;
-    slotPrefix: string;
-    paymentTypeKey: string;
-    key: string;
-  }
+  id: string;
+  name: string;
+  slotPrefix: string;
+  paymentTypeKey: string;
+  key: string;
+}
 
 function formatDeliveryCompanyKey(key: string) {
   return key.toLowerCase().replace('_', '').toLowerCase();
@@ -38,5 +39,29 @@ export function useDelivery() {
     return formatDeliveryCompanyKey(key) === formatDeliveryCompanyKey(targetKey);
   }
 
-  return { getLinkedDeliveryDoc, filterLocalDeliveryCompanies, getPaymentType, equalKey };
+  function isIntegratedPlatformSupported(platform: AUTO_INTEGRATION_CLIENT, country?: F_COUNTRY | null): boolean {
+    country = country || F_COUNTRY.enum.MY
+    const mySupported = [AUTO_INTEGRATION_CLIENT.foodpanda, AUTO_INTEGRATION_CLIENT.grabfood, AUTO_INTEGRATION_CLIENT.shopeefood, AUTO_INTEGRATION_CLIENT.external];
+    const sgSupported = [AUTO_INTEGRATION_CLIENT.foodpanda, AUTO_INTEGRATION_CLIENT.grabfood,  AUTO_INTEGRATION_CLIENT.deliveroo];
+    const thSupported = [AUTO_INTEGRATION_CLIENT.grabfood, AUTO_INTEGRATION_CLIENT.external ];
+
+    let supportedPlatforms:AUTO_INTEGRATION_CLIENT[] = [];
+    switch (country) {
+      case F_COUNTRY.enum.MY:
+        supportedPlatforms = mySupported
+        break;
+      case F_COUNTRY.enum.SG:
+        supportedPlatforms = sgSupported
+        break;
+      case F_COUNTRY.enum.TH:
+        supportedPlatforms = thSupported
+        break;  
+      default:
+        break;
+    }
+
+    return supportedPlatforms.includes(platform)
+  }
+
+  return { getLinkedDeliveryDoc, filterLocalDeliveryCompanies, getPaymentType, equalKey, isIntegratedPlatformSupported };
 }

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

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, type PropType, reactive } from 'vue'
+import type { FdoLinkedDelivery } from '@feedmepos/core/entity'
+import { FdoDeliverooSettings } from '@entity'
+import type { DeliveryCompany } from '../delivery'
+import type { IntegratedDeliverySettingData } from './IntegratedDelivery.vue'
+import { useLoading } from '@/composables/loading'
+import { remoteOrderApi } from '@/api/remoteOrder'
+import IntegratedDelivery from './IntegratedDelivery.vue'
+import { clone } from '@/helpers/object'
+import { useI18n, useCoreStore } from '@feedmepos/mf-common'
+import { useSnackbarFunctions } from '@/components/snackbar'
+
+const { t } = useI18n()
+const { currentRestaurant } = useCoreStore()
+const { showError } = useSnackbarFunctions()
+
+export interface DeliverooDeliveryData {
+  manual: FdoLinkedDelivery | null
+  integrated: FdoDeliverooSettings
+}
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<DeliverooDeliveryData>,
+    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,
+      lastSynchronize: auto.lastSynchronize,
+      status: auto.status,
+      updatedAt: auto.updatedAt,
+      printReceiptAfterClose: auto.printReceiptAfterClose ?? true,
+      menuSyncError: auto.menuSyncError,
+      commissionRate: 0 // always 0
+    }
+  }
+})
+
+function updateData({ manual, auto }: IntegratedDeliverySettingData) {
+  data.manual = manual
+  data.integrated = {
+    ...auto,
+    merchantID: auto.integrationId
+  }
+  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 { startAsyncCallWithErr } = useLoading()
+async function syncMenu() {
+  const restaurantId = currentRestaurant.value?._id ?? ''
+  await startAsyncCallWithErr(async () => {
+    try {
+      const res = await remoteOrderApi.integratedDelivery.syncDeliverooMernu(restaurantId)
+      const temp = {
+        ...modelValue.value.auto,
+        lastSynchronize: res?.lastSynchronize || modelValue.value.auto.lastSynchronize
+      }
+      updateData({ auto: temp, manual: data.manual })
+    } catch (error) {
+      console.log(error)
+      showError(`${t('order.rateLimitWarning')}`)
+    }
+  })
+}
+
+async function flowTestOrder() {}
+
+async function cancelTestOrder() {}
+</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

@@ -102,12 +102,12 @@ function updateIntegrateId(integrationId: InputModel) {
   }))
 }
 
-function updateCommission(commission: InputModel) {
-  updateAuto((oldV) => ({
-    ...oldV,
-    commissionRate: getValue<number>(commission, 'number')
-  }))
-}
+// function updateCommission(commission: InputModel) {
+//   updateAuto((oldV) => ({
+//     ...oldV,
+//     commissionRate: getValue<number>(commission, 'number')
+//   }))
+// }
 
 function updateMenuCatalog(catalogId: string | null) {
   updateAuto((oldV) => ({
@@ -191,12 +191,12 @@ function convertStatusI18n(status: string) {
 </script>
 
 <template>
-  <ManualIntegratedDeliverySetting
+  <!-- <ManualIntegratedDeliverySetting
     :model-value="modelValue.manual"
     :company="company"
     :catalog-options="menuStore.catalogOptions"
     @update:model-value="updateManual"
-  />
+  /> -->
   <div v-if="canUseAutoDeliveryIntegration === true" class="mt-10">
     <FmSwitch
       :disabled="!canEdit"
@@ -230,7 +230,8 @@ function convertStatusI18n(status: string) {
           </div>
         </div>
 
-        <div class="mb-5">
+        <!-- Commision rate not used yet -->
+        <!-- <div class="mb-5">
           <FmTextField
             :model-value="modelValue.auto.commissionRate"
             :label="t('order.commission')"
@@ -239,7 +240,7 @@ function convertStatusI18n(status: string) {
           >
             <template #append>%</template>
           </FmTextField>
-        </div>
+        </div> -->
         <div class="mb-3">
           <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-7">{{ t('order.syncMenu') }}</div>
           <FmSelect