@feedmepos/mf-order-setting 0.0.4 → 0.0.6

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

@@ -0,0 +1,799 @@
+<template>
+  <div class="flex justify-between items-center">
+    <RestaurantSelector :model-value="currentRestaurant?._id ?? undefined" />
+    <FmSearch v-model="searchValue" placeholder="Search" class="mr-5" />
+  </div>
+  <div class="block m-5">
+    <FmPageHead
+      class="flex-grow"
+      title="Integrated delivery company"
+      description="We integrated with these deliveries with your POS system. You can deliver meal to your customers in faster and more secure way."
+    />
+    <FmTable
+      v-model="model"
+      class="h-[500px]"
+      :row-data="filteredCompanies"
+      :column-defs="columns"
+      :search-value="searchValue"
+      :hideFooter="true"
+      :loading="loading"
+      @row-click="(rowData: any) => toggleIntegratedSidesheet(rowData)"
+    />
+  </div>
+
+  <FmSideSheet
+    :header="title"
+    dismiss-away
+    :maxWidth="600"
+    :model-value="sideSheetIntegrated"
+    @update:model-value="sideSheetIntegrated = $event"
+  >
+    <FoodpandaSetting
+      v-if="componentProps.key === AUTO_INTEGRATION_CLIENT.foodpanda"
+      :initial-value="componentProps.initialValue"
+      :company="componentProps.company"
+      :can-use-auto-delivery-integration="componentProps.canUseAuto"
+      @update:model-value="handleModelValueUpdate"
+    />
+    <GrabfoodSetting
+      v-if="componentProps.key === AUTO_INTEGRATION_CLIENT.grabfood"
+      :initial-value="componentProps.initialValue"
+      :company="componentProps.company"
+      :can-use-auto-delivery-integration="componentProps.canUseAuto"
+      @update:model-value="handleModelValueUpdate"
+    />
+    <ShopeefoodSetting
+      v-if="componentProps.key === AUTO_INTEGRATION_CLIENT.shopeefood"
+      :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"
+      @update:model-value="handleModelValueUpdateFeedme"
+      @validation-result="handleValidationResult"
+    />
+
+    <InHouseDelivery
+      v-if="inHouseComponentProps.key === F_ORDER_PLATFORM.enum.IN_HOUSE"
+      :initial-value="inHouseComponentProps.initialValue"
+      :allow-e-payment="inHouseComponentProps.allowEPayment"
+      :address="formatAddress(currentRestaurant?.profile.address)"
+      @update:model-value="handleModelValueUpdateInHouse"
+    />
+    <template #side-sheet-footer v-if="feedmeValidate !== false">
+      <div class="flex gap-8 items-center justify-start">
+        <FmButton
+          variant="primary"
+          label="Save"
+          size="lg"
+          @click="updateIntegratedDeliveryCompany"
+        />
+        <FmButton
+          variant="secondary"
+          label="Cancel"
+          size="lg"
+          @click="closeIntegratedDeliverySideSheet"
+        />
+      </div>
+    </template>
+  </FmSideSheet>
+
+  <div class="block m-5">
+    <FmPageHead
+      class="flex-grow"
+      title="Local delivery company"
+      description="Activate the delivery companies to create new order at POS system."
+    />
+    <FmTable
+      v-model="model"
+      class="h-[500px]"
+      :row-data="localDeliveryCompanies"
+      :column-defs="columns"
+      :search-value="searchValue"
+      :hideFooter="true"
+      :pageSize="100"
+      :loading="loading"
+      @row-click="toggleLocalSidesheet"
+    />
+  </div>
+
+  <div class="flex">
+    <FmSideSheet
+      header="Update delivery company"
+      dismiss-away
+      :maxWidth="600"
+      :model-value="sideSheet"
+      @update:model-value="sideSheet = $event"
+    >
+      <ManualIntegratedDeliverySetting
+        :model-value="localDoc"
+        :company="selectedLocalRow.original.doc"
+        :catalog-options="menuStore.catalogOptions"
+        @update:model-value="(v: any) => (localDocUpdate = v)"
+      />
+      <template #side-sheet-footer>
+        <div class="flex gap-8 items-center justify-start">
+          <FmButton variant="primary" label="Save" size="lg" @click="updateLocalDeliveryCompany" />
+          <FmButton
+            variant="secondary"
+            label="Cancel"
+            size="lg"
+            @click="closeLocalDeliverySideSheet"
+          />
+        </div>
+      </template>
+    </FmSideSheet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, ref, watch } from 'vue'
+import RestaurantSelector from '../components/RestaurantSelector.vue'
+import type { ColumnDef } from '@feedmepos/ui-library'
+import { useCoreStore } from '@feedmepos/mf-common'
+import type { FdoFoodpandaSettings } from '@entity'
+import type {
+  FdoLinkedDelivery,
+  FdoRestaurantFeedmeDelivery,
+  FdoRestaurantInHouseDelivery
+} from '@feedmepos/core/entity'
+import { FdoGrabfoodSettings, FdoShopeeFoodSettings } from '@entity'
+import { F_DELIVERY_TYPE, F_ORDER_PLATFORM } from '@feedmepos/core/entity'
+import deliveryData from './delivery.data'
+import { useDelivery, type DeliveryCompany, type LinkedDeliveryDoc } from './delivery'
+import { useLoading } from '@/composables/loading'
+import { remoteOrderApi } from '@/api/remoteOrder'
+import { AUTO_INTEGRATION_CLIENT } from '../delivery/delivery'
+import { useMenuStore } from '@/stores/menu/menu'
+import ManualIntegratedDeliverySetting from './components/ManualIntegratedDeliverySetting.vue'
+import { insertOrUpdate, remove, sort } from '@/helpers/iteration'
+import type { FdoRestaurantFeedme } from '../delivery/integrated-delivery/FeedmeDelivery.vue'
+import FoodpandaSetting from './integrated-delivery/FoodpandaSetting.vue'
+import GrabfoodSetting from './integrated-delivery/GrabfoodSetting.vue'
+import ShopeefoodSetting from './integrated-delivery/ShopeefoodSetting.vue'
+import { useRestaurantStore } from '@/stores/restaurant'
+import FeedmeDelivery from './integrated-delivery/FeedmeDelivery.vue'
+import InHouseDelivery, { type InhouseDialogData } from './inhouse/InHouseDelivery.vue'
+import { formatAddress } from '@/helpers/profile'
+import { useSnackbarFunctions } from '@/components/snackbar'
+
+const { showSuccess } = useSnackbarFunctions()
+const restaurantStore = useRestaurantStore()
+const { currentRestaurant, currentBusiness, readRestaurants, changeRestaurant } = useCoreStore()
+const menuStore = useMenuStore()
+const linkedCompanies = ref<LinkedDeliveryDoc[]>([])
+const deliveryCompanies = ref<DeliveryCompany[]>([])
+export interface DeliveryRow {
+  id: string
+  key: string
+  catalog: string
+  name: string
+  paymentType: string
+  status: string[]
+}
+type IntegratedDeliveryCompany =
+  | FdoRestaurantInHouseDelivery
+  | FdoRestaurantFeedmeDelivery
+  | FdoFoodpandaSettings
+  | FdoGrabfoodSettings
+  | FdoShopeeFoodSettings
+interface IntegratedDeliveryRow extends DeliveryRow {
+  setting: IntegratedDeliveryCompany
+  company?: DeliveryCompany
+  doc?: LinkedDeliveryDoc
+  canUseAutoDeliveryIntegration?: string | boolean
+}
+
+const sideSheet = ref<boolean>(false)
+const loading = computed(() => {
+  return !currentRestaurant.value || loadingDpi.value
+})
+let localDoc: any
+let localDocUpdate: any
+const selectedIntegratedRow = ref<any>(null)
+const sideSheetIntegrated = ref<boolean>(false)
+const selectedLocalRow = ref<any>(null)
+async function toggleLocalSidesheet(rowData: any) {
+  selectedLocalRow.value = rowData
+  localDoc = getLinkedDeliveryDoc(linkedCompanies.value, rowData.original.doc.key)
+  sideSheet.value = true
+}
+
+const title = ref('')
+async function toggleIntegratedSidesheet(rowData: any) {
+  selectedIntegratedRow.value = rowData.original.key
+  sideSheetIntegrated.value = true
+  switch (selectedIntegratedRow.value) {
+    case AUTO_INTEGRATION_CLIENT.foodpanda:
+      title.value = 'Manage foodpanda delivery'
+      updateIntegratedDeliveryType(rowData.original)
+      break
+    case AUTO_INTEGRATION_CLIENT.grabfood:
+      title.value = 'Manage grabfood delivery'
+      updateIntegratedDeliveryType(rowData.original)
+      break
+    case AUTO_INTEGRATION_CLIENT.shopeefood:
+      title.value = 'Manage shopeefood delivery'
+      updateIntegratedDeliveryType(rowData.original)
+      break
+    case F_ORDER_PLATFORM.enum.FEEDME:
+      title.value = 'Update FeedMe express'
+      updateFeedmeExpress(rowData.original)
+      break
+    case F_ORDER_PLATFORM.enum.IN_HOUSE:
+      title.value = 'Manage in-house delivery'
+      updateInHouse(rowData.original)
+      break
+  }
+}
+
+const componentProps = ref({
+  key: '' as string,
+  company: {} as DeliveryCompany,
+  initialValue: {
+    manual: null as any,
+    integrated: {} as any
+  },
+  canUseAuto: {} as boolean | string
+})
+
+const feedMeComponentProps = ref({
+  key: '' as string,
+  initialValue: {} as FdoRestaurantFeedme
+})
+
+const inHouseComponentProps = ref({
+  key: '' as string,
+  initialValue: {} as InhouseDialogData,
+  allowEPayment: false as boolean | string
+})
+
+function clearComponentProps() {
+  feedMeComponentProps.value = {
+    key: '',
+    initialValue: {} as any
+  }
+
+  inHouseComponentProps.value = {
+    key: '',
+    initialValue: {} as any,
+    allowEPayment: false
+  }
+
+  componentProps.value = {
+    key: '',
+    company: {} as DeliveryCompany,
+    initialValue: {
+      manual: {} as any,
+      integrated: {} as any
+    },
+    canUseAuto: {} as boolean | string
+  }
+}
+
+async function updateIntegratedDeliveryType({
+  key,
+  company,
+  doc,
+  setting,
+  canUseAutoDeliveryIntegration
+}: IntegratedDeliveryRow) {
+  clearComponentProps()
+
+  const dc = company as DeliveryCompany
+
+  componentProps.value = {
+    key: key,
+    company: dc,
+    initialValue: {
+      manual: doc,
+      integrated: setting
+    },
+    canUseAuto: canUseAutoDeliveryIntegration as boolean | string
+  }
+}
+
+async function updateFeedmeExpress({ key, setting }: IntegratedDeliveryRow) {
+  clearComponentProps()
+
+  feedMeComponentProps.value = {
+    key: key,
+    initialValue: setting as FdoRestaurantFeedme
+  }
+}
+
+async function updateInHouse({ key, setting }: IntegratedDeliveryRow) {
+  clearComponentProps()
+
+  const inhouseSetting = setting as FdoRestaurantInHouseDelivery
+  const allowEPayment = restaurantStore.currentRestaurant?.allowEPayment || false
+  const address = restaurantStore.currentRestaurant?.profile.address
+
+  inHouseComponentProps.value = {
+    key,
+    initialValue: {
+      ...inhouseSetting,
+      deliveryTime: inhouseSetting.deliveryTime || null,
+      paymentTypes: inhouseSetting.paymentTypes || [],
+      offlinePaymentTypes: inhouseSetting.offlinePaymentTypes || [],
+      ignoreStock: inhouseSetting.ignoreStock || false
+    },
+    allowEPayment
+  }
+}
+
+const { startAsyncCall, isLoading } = useLoading()
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: 'name',
+    header: () => 'Company',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'catalog',
+    header: () => 'Catalog',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'paymentType',
+    header: () => 'Payment Type',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'status',
+    header: () => 'Status',
+    cell: (info: any) => {
+      const statuses = info.row.original.status as StatusType[]
+
+      const classes = statuses.map((status) => getClassForStatus(status)).join(' ')
+
+      return h('div', { class: classes }, statuses.join(', '))
+    },
+    enableSorting: false
+  }
+]
+
+type StatusType = 'Manual' | 'Active' | 'Inactive'
+const getClassForStatus = (enabled: StatusType): string => {
+  switch (enabled) {
+    case 'Manual':
+      return ' bg-fm-color-system-warning-100 fm-typo-en-body-md-600 border fm-corner-radius-lg w-max gap-8 p-4 text-fm-color-typo-warning'
+    case 'Active':
+      return ' bg-fm-color-system-success-100 fm-typo-en-body-md-600 border fm-corner-radius-lg w-max gap-8 p-4 text-fm-color-typo-success'
+    case 'Inactive':
+      return ' bg-fm-color-system-info-100 fm-typo-en-body-md-600 border fm-corner-radius-lg w-max gap-8 p-4  text-fm-color-typo-info'
+    default:
+      return ''
+  }
+}
+
+const model = ref()
+const searchValue = ref('')
+
+const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
+
+const inhouseDelivery = computed<FdoRestaurantInHouseDelivery>(() => {
+  return {
+    ...deliveryData.initInhouseDelivery(),
+    ...currentRestaurant?.value?.inHouseDelivery
+  }
+})
+
+const feedmeExpress = computed<FdoRestaurantFeedmeDelivery>(() => {
+  return {
+    ...deliveryData.initFeedmeExpress(),
+    ...currentRestaurant?.value?.feedmeDelivery
+  }
+})
+
+const foodpanda = computed<FdoFoodpandaSettings>(() => {
+  return {
+    ...deliveryData.initFoodpandaDelivery(),
+    ...foodpandaSetting.value,
+    autoAccept: foodpandaSetting?.value?.autoAccept ?? false,
+    ignoreDiscount: foodpandaSetting?.value?.ignoreDiscount ?? false
+  }
+})
+
+const grabfood = computed<FdoGrabfoodSettings>(() => {
+  return {
+    ...deliveryData.initGrabfoodDelivery(),
+    ...grabfoodSetting.value,
+    partnerMerchantID: grabfoodSetting?.value?._id
+  }
+})
+
+const shopee = computed<FdoShopeeFoodSettings>(() => {
+  return {
+    ...deliveryData.initShopeefoodDelivery(),
+    ...shopeefoodSetting.value
+  }
+})
+const localDeliveryCompanies = computed<DeliveryRow[]>(() => {
+  const res = filterLocalDeliveryCompanies(deliveryCompanies.value).map<DeliveryRow>((company) => {
+    const { name, paymentTypeKey, key } = company
+    const doc = getLinkedDeliveryDoc(linkedCompanies.value, key)
+
+    const payment = doc?.paymentTypeKey || paymentTypeKey
+    return {
+      id: loadingKey.value.local(key),
+      key,
+      name,
+      paymentType: getPaymentType(payment),
+      status: !!doc ? ['Active'] : ['Inactive'],
+      doc: company,
+      catalog: getCatalog(doc?.catalogId || null)
+    }
+  })
+  return res.filter((r) => filter([r.name, r.paymentType, r.status.join(' ')]))
+})
+
+const { getLinkedDeliveryDoc, filterLocalDeliveryCompanies, getPaymentType, equalKey } =
+  useDelivery()
+
+function getCatalog(catalogId: string | null) {
+  return menuStore.catalogOptions.find(({ value }) => value === catalogId)?.label || ''
+}
+
+const canUseAutoDeliveryIntegration = (client: string) => true // Placeholder
+const filter = (fields: any[]) =>
+  fields.some((field: string | string[]) => field.includes(searchValue.value)) // Placeholder
+
+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 generateStatus = (manualActive: boolean, integrateActive: boolean) => {
+    if (manualActive && integrateActive) return 'Active'
+    if (manualActive) return 'Manual'
+    if (integrateActive) return 'Active'
+    return 'Inactive'
+  }
+
+  return [
+    {
+      id: loadingKey.value.inhouse,
+      name: 'In house delivery',
+      key: F_DELIVERY_TYPE.enum.IN_HOUSE,
+      paymentType: (inhouseDelivery.value.paymentTypes || ['-'])
+        .map((v) => capitalizeFirstLetter(v))
+        .join(', '),
+      status: inhouseDelivery.value.enable ? ['Active'] : ['Inactive'],
+      setting: inhouseDelivery.value,
+      catalog: getCatalog(inhouseDelivery.value.catalogId)
+    },
+    {
+      id: loadingKey.value.fm,
+      name: 'FeedMe express',
+      key: F_DELIVERY_TYPE.enum.FEEDME,
+      paymentType: 'E-payment',
+      status: feedmeExpress.value.enable ? ['Active'] : ['Inactive'],
+      setting: feedmeExpress.value,
+      catalog: getCatalog(feedmeExpress.value.catalogId || null)
+    },
+    {
+      id: loadingKey.value.fp,
+      name: 'FoodPanda delivery',
+      key: AUTO_INTEGRATION_CLIENT.foodpanda,
+      company: fpIntegrate,
+      paymentType: foodpanda.value.enable ? getPaymentType(fpManual?.paymentTypeKey) : '-',
+      status: [generateStatus(!!fpManual, foodpanda.value.enable)],
+      setting: foodpanda.value,
+      doc: fpManual,
+      catalog: getCatalog(fpManual?.catalogId || null),
+      canUseAutoDeliveryIntegration: canUseAutoDeliveryIntegration(
+        AUTO_INTEGRATION_CLIENT.foodpanda
+      )
+    },
+    {
+      id: loadingKey.value.gf,
+      name: 'GrabFood delivery',
+      key: AUTO_INTEGRATION_CLIENT.grabfood,
+      company: grabIntegrate,
+      paymentType: grabfood.value.enable ? getPaymentType(gfManual?.paymentTypeKey) : '-',
+      status: [generateStatus(!!gfManual, grabfood.value.enable)],
+      setting: grabfood.value,
+      doc: gfManual,
+      catalog: getCatalog(gfManual?.catalogId || null),
+      canUseAutoDeliveryIntegration: canUseAutoDeliveryIntegration(AUTO_INTEGRATION_CLIENT.grabfood)
+    },
+    {
+      id: loadingKey.value.sf,
+      name: 'ShopeeFood delivery',
+      key: AUTO_INTEGRATION_CLIENT.shopeefood,
+      company: sfIntegrate,
+      paymentType: shopee.value.enable ? getPaymentType(sfManual?.paymentTypeKey) : '-',
+      status: [generateStatus(!!sfManual, shopee.value.enable)],
+      setting: shopee.value,
+      doc: sfManual,
+      catalog: getCatalog(sfManual?.catalogId || null),
+      canUseAutoDeliveryIntegration: canUseAutoDeliveryIntegration(
+        AUTO_INTEGRATION_CLIENT.shopeefood
+      )
+    }
+  ]
+})
+
+const loadingKey = computed(() => {
+  const id = currentRestaurant.value?._id || ''
+  return {
+    inhouse: `${id}_inhouse`,
+    fp: `${id}_fp`,
+    gf: `${id}_gf`,
+    sf: `${id}_sf`,
+    fm: `${id}_fm`,
+    local: (deliveryName: string) => `${id}_${deliveryName}`
+  }
+})
+
+async function updateIntegratedDeliveryCompany(company: IntegratedDeliveryRow) {
+  switch (selectedIntegratedRow.value) {
+    case AUTO_INTEGRATION_CLIENT.foodpanda:
+      await updateIntegratedDeliverySetting()
+      break
+    case AUTO_INTEGRATION_CLIENT.grabfood:
+      await updateIntegratedDeliverySetting()
+      break
+    case AUTO_INTEGRATION_CLIENT.shopeefood:
+      await updateIntegratedDeliverySetting()
+      break
+    case F_ORDER_PLATFORM.enum.FEEDME:
+      await updateFeedmeExpressSetting()
+      break
+    case F_ORDER_PLATFORM.enum.IN_HOUSE:
+      await updateInHouseSetting()
+      break
+  }
+}
+
+const filteredCompanies = computed(() => {
+  return integratedCompanies.value.filter(({ name, paymentType, status }) =>
+    filter([name, paymentType, status.join(' ')])
+  )
+})
+
+const grabfoodSetting = ref<FdoGrabfoodSettings | null>(null)
+const foodpandaSetting = ref<FdoFoodpandaSettings | null>(null)
+const shopeefoodSetting = ref<FdoShopeeFoodSettings | null>(null)
+const loadingDpi = ref<boolean>(false)
+
+async function readData() {
+
+  await startAsyncCall(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 || ''
+    )
+    foodpandaSetting.value = await remoteOrderApi.integratedDelivery.readFoodpanda(
+      currentRestaurant.value?._id || ''
+    )
+    shopeefoodSetting.value = await remoteOrderApi.integratedDelivery.readShopeefood(
+      currentRestaurant.value?._id || ''
+    )
+  })
+  loadingDpi.value = false
+}
+
+async function updateLocalDeliveryCompany() {
+  sideSheet.value = false
+  const linkedDoc = getLinkedDeliveryDoc(
+    linkedCompanies.value,
+    selectedLocalRow.value?.original.doc.key
+  )
+  await updateManualDelivery({
+    doc: linkedDoc,
+    company: selectedLocalRow.value?.original.doc,
+    data: localDocUpdate
+  })
+  showSuccess('Delivery setting updated. ')
+}
+
+async function updateManualDelivery({
+  doc,
+  company,
+  data
+}: {
+  doc?: LinkedDeliveryDoc
+  company: DeliveryCompany
+  data: FdoLinkedDelivery | null
+}) {
+  if (!!data) {
+    const resp = await createOrUpdateManualDeliveryDoc({ doc, company, data })
+
+    if (resp) updateCached(resp)
+  } else if (!!doc) {
+    await remoteOrderApi.deleteDeliveryCompany(doc)
+    deleteCached(doc)
+  }
+}
+
+async function createOrUpdateManualDeliveryDoc({
+  doc,
+  company,
+  data
+}: {
+  doc?: LinkedDeliveryDoc
+  company: DeliveryCompany
+  data: FdoLinkedDelivery
+}): Promise<LinkedDeliveryDoc | undefined> {
+  const { paymentTypeKey, catalogId, rounding } = data
+  let newDoc: LinkedDeliveryDoc
+
+  if (doc) {
+    newDoc = await remoteOrderApi.updateDeliveryCompany({
+      ...doc,
+      paymentTypeKey,
+      catalogId,
+      rounding
+    })
+  } else {
+    newDoc = await remoteOrderApi.createDeliveryCompany({
+      ...company,
+      paymentTypeKey,
+      catalogId,
+      rounding
+    })
+  }
+
+  return newDoc
+}
+
+function updateCached(doc: LinkedDeliveryDoc) {
+  linkedCompanies.value = insertOrUpdate(linkedCompanies.value, doc, 'key')
+}
+
+function deleteCached(doc: LinkedDeliveryDoc) {
+  linkedCompanies.value = remove(linkedCompanies.value, doc, 'key')
+}
+
+function closeLocalDeliverySideSheet() {
+  sideSheet.value = false
+}
+
+function closeIntegratedDeliverySideSheet() {
+  sideSheetIntegrated.value = false
+}
+
+async function updateIntegratedDeliverySetting() {
+  sideSheetIntegrated.value = false
+  await startAsyncCall(async () => {
+    await updateDelivery(
+      componentProps.value.key as AUTO_INTEGRATION_CLIENT,
+      {
+        doc: componentProps.value.initialValue.manual as LinkedDeliveryDoc,
+        company: componentProps.value.company,
+        data: integratedDoc.value.manual as FdoLinkedDelivery | null
+      },
+      integratedDoc.value.auto as FdoFoodpandaSettings,
+      !!componentProps.value.initialValue.integrated,
+      componentProps.value.canUseAuto
+    )
+  })
+  showSuccess('Delivery setting updated. ')
+}
+
+async function updateFeedmeExpressSetting() {
+  sideSheetIntegrated.value = false
+  await restaurantStore.updateFeedmeDelivery(currentRestaurant.value?._id ?? '', feedMeDoc.value)
+  const res = (await readRestaurants())?.find((res) => res._id === currentRestaurant.value?._id)
+  if (!!res) {
+    changeRestaurant(res)
+  }
+  showSuccess('Delivery setting updated. ')
+}
+
+async function updateInHouseSetting() {
+  sideSheetIntegrated.value = false
+  await restaurantStore.updateInhouseDelivery(currentRestaurant.value?._id ?? '', inHouseDoc.value)
+  const res = (await readRestaurants())?.find((res) => res._id === currentRestaurant.value?._id)
+  if (!!res) {
+    changeRestaurant(res)
+  }
+  showSuccess('Delivery setting updated. ')
+}
+
+async function updateDelivery(
+  client: AUTO_INTEGRATION_CLIENT,
+  manual: {
+    doc?: LinkedDeliveryDoc
+    company: DeliveryCompany
+    data: FdoLinkedDelivery | null
+  },
+  integrated: FdoFoodpandaSettings | FdoGrabfoodSettings | FdoShopeeFoodSettings,
+  hasOriDeliverySetting: boolean,
+  canUseAutoDeliveryIntegration?: string | boolean
+) {
+  await updateManualDelivery({ doc: manual.doc, company: manual.company, data: manual.data })
+  if ((canUseAutoDeliveryIntegration === true && hasOriDeliverySetting) || integrated.enable) {
+    switch (client) {
+      case AUTO_INTEGRATION_CLIENT.foodpanda:
+        const integratedDocument = integrated as FdoFoodpandaSettings
+
+        await restaurantStore.updateIntegratedFoodpandaDelivery(
+          currentRestaurant.value?._id ?? '',
+          { ...integratedDocument, autoAccept: integratedDocument.autoAccept ?? false }
+        )
+        break
+      case AUTO_INTEGRATION_CLIENT.grabfood:
+        await restaurantStore.updateIntegratedGrabfoodDelivery(
+          currentRestaurant.value?._id ?? '',
+          integrated as FdoGrabfoodSettings
+        )
+        break
+      case AUTO_INTEGRATION_CLIENT.shopeefood:
+        await restaurantStore.updateIntegratedShopeefoodDelivery(
+          currentRestaurant.value?._id ?? '',
+          integrated as FdoShopeeFoodSettings
+        )
+        break
+    }
+  }
+
+  const res = (await readRestaurants())?.find((res) => res._id === currentRestaurant.value?._id)
+  if (!!res) {
+    changeRestaurant(res)
+  }
+}
+
+const feedMeDoc = computed(() => feedMeComponentProps.value.initialValue)
+const inHouseDoc = computed(() => inHouseComponentProps.value.initialValue)
+
+const localManual = ref<LinkedDeliveryDoc>(componentProps.value.initialValue.manual)
+const localAuto = ref(componentProps.value.initialValue.integrated)
+
+const integratedDoc = computed(() => ({
+  manual: localManual.value,
+  auto: localAuto.value
+}))
+
+function handleModelValueUpdate({ manual, auto }: { manual: any; auto: any }) {
+  localManual.value = manual ?? null
+  localAuto.value = auto
+}
+function handleModelValueUpdateFeedme(v: any) {
+  feedMeComponentProps.value.initialValue = v
+}
+
+function handleModelValueUpdateInHouse(v: any) {
+  inHouseComponentProps.value.initialValue = v
+}
+
+const feedmeValidate = ref<boolean | null>(null)
+function handleValidationResult(v: boolean) {
+  feedmeValidate.value = v
+}
+
+watch(
+  () => currentRestaurant.value,
+
+  async (newRestaurant) => {
+    if (newRestaurant) {
+      await readData()
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => currentBusiness.value,
+  async (newBusiness) => {
+    if (newBusiness) {
+      await menuStore.readMenu()
+    }
+  },
+  { immediate: true }
+)
+</script>