@feedmepos/mf-order-setting 0.0.21-beta.2 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-order-setting",
-  "version": "0.0.21-beta.2",
+  "version": "0.0.22",
   "type": "module",
   "module": "./dist/app.js",
   "license": "UNLICENSED",
@@ -25,14 +25,15 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@feedmepos/core": "^2.12.14",
-    "@feedmepos/menu": "^1.2.4",
+    "@feedmepos/core": "^2.14.0",
+    "@feedmepos/menu": "^1.5.6",
     "@feedmepos/mf-common": "^1.11.6",
     "@feedmepos/ordering": "^0.0.3",
     "@feedmepos/ui-library": "^1.2.27",
     "@types/googlemaps": "^3.43.3",
     "axios": "^1.7.2",
     "change-case": "^5.4.4",
+    "zod-openapi": "^4.1.0",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.12",
     "firebase": "^10.13.1",

package/src/api/remoteOrder/index.ts

@@ -2,9 +2,9 @@ import type { AxiosInstance } from 'axios';
 import { baseClientInstance, getData, SvcConfig } from '..';
 import type { DeliveryCompany, LinkedDeliveryDoc } from '../../views/order-settings/delivery/delivery';
 import { FdoFoodpandaSettings, FdoLinkedDelivery, FdoRestaurant, FdoRestaurantFeedmeDelivery, FdoRestaurantInHouseDelivery, FdoShopeeFoodOrder } from '@feedmepos/core/entity';
-import type { FdoFoodpandaOrderOutput, FdoGrabfoodOrderOutput, FdoGrabfoodSettings, FdoShopeeFoodOrderOutput, FdoShopeeFoodSettings, FdtoGetOrderReq } from '@entity';
+import type { FdoExternalSetting, FdoFoodpandaOrderOutput, FdoGrabfoodOrderOutput, FdoGrabfoodSettings, FdoShopeeFoodOrderOutput, FdoShopeeFoodSettings, FdtoGetOrderReq } from '@entity';
 
-type DeliveryCompanyUrl = 'foodpanda' | 'grabfood' | 'shopeefood'
+type DeliveryCompanyUrl = 'foodpanda' | 'grabfood' | 'shopeefood' | 'external'
 
 const deliveryClientInstance = (
   deliveryCompany: DeliveryCompanyUrl
@@ -110,6 +110,17 @@ export const remoteOrderApi = {
     async syncShopeefoodMenu(storeId: string): Promise<FdoShopeeFoodSettings> {
       return getData(await deliveryClientInstance('shopeefood').get(`/menu-sync/${storeId}`));
     },
+    async readExternal(restaurantId: string): Promise<FdoExternalSetting | null> {
+      return getData(await deliveryClientInstance('external').get(`/setting/${restaurantId}`))
+    },
+    async updateExternal(restaurantId: string, dto: FdoExternalSetting): Promise<FdoExternalSetting> {
+      return getData(await deliveryClientInstance('external').put(`setting/${restaurantId}`, {
+        ...dto
+      }))
+    },
+    async syncExternalMenu(restaurantId: string): Promise<FdoExternalSetting> {
+      return getData(await deliveryClientInstance('external').get(`/menu-sync/${restaurantId}`));
+    },
     async flowTestOrder(
       restaurantId: string,
       platform: DeliveryCompanyUrl

package/src/helpers/menu.ts

@@ -11,7 +11,7 @@ export interface Option {
   value: string | null;
 }
 
-type Item = Omit<FdoMenuV4Item, 'variant'> & {
+export type Item = Omit<FdoMenuV4Item, 'variant'> & {
   codeName: string;
   variant?: Omit<FdoItemVariant, 'variantCombinations'> & {
     variantCombinations: (VariantItem & { codeName: string })[]
@@ -76,7 +76,7 @@ export class ItemTax {
     return {
       systemCode: [...new Set(countryFlattenTaxes.map((tax) => tax.systemCode))].join('/'),
       countryTaxOptions: countryFlattenTaxes.map((tax) => ({
-        label: `${tax.name} (${   Dinero.fromFdoDecimal({
+        label: `${tax.name} (${Dinero.fromFdoDecimal({
           decimal: tax.rate
         }).multiply(100).toFormat(false)}%)`,
         value: ItemTax.encodeTax(tax),

package/src/locales/en-US.json

@@ -194,6 +194,7 @@
         "scanPay": "Scan Pay",
         "search": "Search",
         "searchRestaurant": "Search restaurants",
+        "selectAllItemsIncludeCustomItem": "All (Including custom item)",
         "selectItem": "Select item",
         "selectRestaurant": "Select Restaurant",
         "selectServiceChargeType": "Select service charge type",
@@ -214,6 +215,7 @@
         "success": "SUCCESS",
         "sunday": "Sunday",
         "syncMenu": "Sync Menu",
+        "syncMenuSuccess": "Sync menu successfully",
         "table": "Table",
         "tableSelected": "table(s) selected",
         "tableService": "Table Service",
@@ -245,6 +247,14 @@
         "updatePickupSetting": "Update Pickup Setting",
         "updateSetting": "Update setting",
         "vendorBearPercentage": "Vendor bear percentage",
-        "wednesday": "Wednesday"
+        "wednesday": "Wednesday",
+        "integratedDeliveryCompany": "Integrated delivery company",
+        "externalDelivery": "External Delivery",
+        "manageExternalDelivery": "Manage external delivery",
+        "deliveryCatalog": "Delivery catalog",
+        "pickupCatalog": "Pickup catalog",
+        "DeliverySettingUpdated": "Delivery setting updated.",
+        "selectPlatform": "Select Platform",
+        "platform": "Platform"
     }
 }

package/src/locales/zh-CN.json

@@ -194,6 +194,7 @@
         "scanPay": "扫码支付",
         "search": "搜索",
         "searchRestaurant": "搜索餐厅",
+        "selectAllItemsIncludeCustomItem": "全部 （包括自定义商品）",
         "selectItem": "请选择",
         "selectRestaurant": "选择餐厅",
         "selectServiceChargeType": "选择服务费类型",
@@ -214,6 +215,7 @@
         "success": "成功",
         "sunday": "星期日",
         "syncMenu": "同步菜单",
+        "syncMenuSuccess": "同步菜单成功",
         "table": "餐桌",
         "tableSelected": "已选择餐桌",
         "tableService": "餐桌服务",
@@ -245,6 +247,13 @@
         "updatePickupSetting": "更新自取设置",
         "updateSetting": "更新设置",
         "vendorBearPercentage": "供应商承担百分比",
-        "wednesday": "星期三"
+        "wednesday": "星期三",
+        "externalDelivery": "External 配送",
+        "manageExternalDelivery": "管理外部配送",
+        "deliveryCatalog": "配送目录",
+        "pickupCatalog": "自取目录",
+        "DeliverySettingUpdated": "配送设置已更新",
+        "selectPlatform": "选择平台",
+        "platform": "平台"
     }
 }

package/src/stores/restaurant/index.ts

@@ -14,7 +14,7 @@ import {
   type FdoProfile,
   type FdoRestaurant
 } from '@feedmepos/core/entity'
-import { FdoGrabfoodSettings } from '@entity'
+import { FdoExternalSetting, FdoGrabfoodSettings } from '@entity'
 import { FeatureFlag, Pos } from '@feedmepos/core'
 import { SvcConfig } from '@/api'
 import { remoteOrderApi } from '@/api/remoteOrder'
@@ -112,6 +112,9 @@ export const useRestaurantStore = defineStore('restaurant', {
     async updateIntegratedShopeefoodDelivery(restaurantId: string, dto: FdoShopeeFoodSettings) {
       await remoteOrderApi.integratedDelivery.updateShopeefood(restaurantId, dto)
     },
+    async updateExternalDelivery(restaurantId: string, dto: FdoExternalSetting) {
+      await remoteOrderApi.integratedDelivery.updateExternal(restaurantId, dto)
+    },
     getRestaurantEPayment(dto?: FdoRestaurant | undefined): true | string {
       const { t } = useI18n()
       if (!dto) {

package/src/views/kiosk/KioskSummary.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="p-[1.5rem] border fm-corner-radius-lg flex flex-col gap-5">
-    <span class="fm-typo-en-title-sm-600">{{ t('order.kioskSummary') }}</span>
-    <hr class="my-[0.25rem]" />
+  <div :class="dialogType ? '' : ['p-[1.5rem] border fm-corner-radius-lg flex flex-col gap-5 fixed ml-40 w-[320px]']">
+    <span v-if="!dialogType" class="fm-typo-en-title-sm-600">{{ t('order.kioskSummary') }}</span>
+    <hr v-if="!dialogType" class="my-[0.25rem]" />
     <div class="flex flex-col gap-1">
       <div class="flex flex-col gap-1">
         <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ t('order.kioskDisplay') }}</span>
@@ -59,6 +59,7 @@ interface Props {
   restaurantId: string,
   devices: MfKioskDevice[],
   kioskOrderSetting: MfKioskOrderSetting | undefined,
+  dialogType: boolean
   // getOrderSetting : () => MfKioskOrderSetting | undefined,
 }
 const props = defineProps<Props>();

package/src/views/kiosk/KioskView.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="py-[1.5rem]">
-    <FmPageHead :title="t('order.kiosk')" />
+    <FmPageHead :title="t('order.kiosk')">
+      <template #append>
+        <FmButton
+          v-show="isMobile"
+          icon="info"
+          variant="tertiary"
+          @click="openKioskSummaryDialog"
+        />
+      </template>
+    </FmPageHead>
     <div class="flex px-[1.5rem]">
       <div class="flex-[2_2_0%]">
         <FmTabs v-model:model-value="selectedMenuItem" :items="menuItems"></FmTabs>
@@ -32,20 +41,28 @@
           </div>
         </div>
       </div>
-      <div class="flex-[1_1_0%]">
+      <div v-if="!isMobile" class="flex-[1_1_0%]">
         <KioskSummary
           :restaurant-id="currentRestaurantId"
           :devices="devices"
           :kiosk-order-setting="OrderSettingStore.state.kiosk"
+          :dialogType="false"
         />
       </div>
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import KioskDevicesView from '@/views/kiosk/devices/KioskDevicesView.vue'
 import KioskSummary from '@/views/kiosk/KioskSummary.vue'
-import { useDialog, useSnackbar, type FmTabProps, type ISelectItem } from '@feedmepos/ui-library'
+import {
+  useDialog,
+  useSnackbar,
+  type FmTabProps,
+  type ISelectItem,
+  useBreakpoints
+} from '@feedmepos/ui-library'
 import { ref, computed, defineAsyncComponent, watch } from 'vue'
 import { useKioskStore } from '@/stores/kiosk'
 import type { MfKioskDevice } from '@/modules/kiosk/interface'
@@ -71,6 +88,9 @@ const Dialog = useDialog()
 const { currentRestaurant, restaurants, changeRestaurant } = useCoreStore()
 const SnackBar = useSnackbar()
 
+const breakpoint = useBreakpoints()
+const isMobile = computed(() => breakpoint.breakpoints.value.xs)
+
 const currentSelect = ref<string | undefined>(currentRestaurant.value?._id ?? undefined)
 
 const restaurantItems = computed<ISelectItem[]>(() => {
@@ -82,6 +102,19 @@ const restaurantItems = computed<ISelectItem[]>(() => {
 
 const currentRestaurantId = ref<string>(currentRestaurant.value?._id ?? '')
 
+function openKioskSummaryDialog() {
+  Dialog.open({
+    title: capitalCase(t('order.kioskSummary')),
+    contentComponent: KioskSummary,
+    contentComponentProps: {
+      restaurantId: currentRestaurant.value?._id,
+      devices: KioskStore.state.devices,
+      kioskOrderSetting: OrderSettingStore.state.kiosk,
+      dialogType: true
+    }
+  })
+}
+
 async function selectRestaurant(v: string) {
   const restaurant = restaurants.value.find((r) => r._id == v)
   await changeRestaurant(restaurant)

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

@@ -78,6 +78,12 @@
       :address="formatAddress(currentRestaurant?.profile.address)"
       @update:model-value="handleModelValueUpdateInHouse"
     />
+    <ExternalSetting
+      v-if="externalComponentProps.key === AUTO_INTEGRATION_CLIENT.external"
+      :initial-value="externalComponentProps.initialValue"
+      @update:model-value="handleModelValueUpdateExternal"
+    />
+
     <template #side-sheet-footer v-if="feedmeValidate !== false">
       <div class="flex gap-8 items-center justify-start">
         <FmButton
@@ -157,7 +163,7 @@
 import { computed, h, ref, watch } from 'vue'
 import RestaurantSelector from '../components/RestaurantSelector.vue'
 import { type ColumnDef } from '@feedmepos/ui-library'
-import type { FdoFoodpandaSettings } from '@entity'
+import type { FdoExternalSetting, FdoFoodpandaSettings } from '@entity'
 import type {
   FdoLinkedDelivery,
   FdoRestaurantFeedmeDelivery,
@@ -182,6 +188,7 @@ import type { FdoRestaurantFeedme } from '../delivery/integrated-delivery/Feedme
 import FoodpandaSetting from './integrated-delivery/FoodpandaSetting.vue'
 import GrabfoodSetting from './integrated-delivery/GrabfoodSetting.vue'
 import ShopeefoodSetting from './integrated-delivery/ShopeefoodSetting.vue'
+import ExternalSetting from './integrated-delivery/ExternalSetting.vue'
 import { useRestaurantStore } from '@/stores/restaurant'
 import FeedmeDelivery from './integrated-delivery/FeedmeDelivery.vue'
 import InHouseDelivery, { type InhouseDialogData } from './inhouse/InHouseDelivery.vue'
@@ -215,6 +222,7 @@ type IntegratedDeliveryCompany =
   | FdoFoodpandaSettings
   | FdoGrabfoodSettings
   | FdoShopeeFoodSettings
+  | FdoExternalSetting
 export interface IntegratedDeliveryRow extends DeliveryRow {
   setting: IntegratedDeliveryCompany
   company?: DeliveryCompany
@@ -264,6 +272,10 @@ async function toggleIntegratedSidesheet(data: any) {
       title.value = `${t('order.inhouseDeliveryTitle')}`
       updateInHouse(rowData)
       break
+    case AUTO_INTEGRATION_CLIENT.external:
+      title.value = `${t('order.manageExternalDelivery')}`
+      updateExternalDelivery(rowData)
+      break
   }
 }
 
@@ -287,6 +299,11 @@ const inHouseComponentProps = ref({
   initialValue: {} as InhouseDialogData
 })
 
+const externalComponentProps = ref({
+  key: '' as string,
+  initialValue: {} as FdoExternalSetting
+})
+
 function clearComponentProps() {
   feedMeComponentProps.value = {
     key: '',
@@ -307,6 +324,11 @@ function clearComponentProps() {
     },
     canUseAuto: {} as boolean | string
   }
+
+  externalComponentProps.value = {
+    key: '',
+    initialValue: {} as any
+  }
 }
 
 async function updateIntegratedDeliveryType({
@@ -358,6 +380,18 @@ async function updateInHouse({ key, setting }: IntegratedDeliveryRow) {
   }
 }
 
+async function updateExternalDelivery( {key, setting}: IntegratedDeliveryRow) {
+  clearComponentProps()
+  const externalSetting = setting as FdoExternalSetting
+
+  externalComponentProps.value = {
+    key,
+    initialValue: {
+      ...externalSetting
+    }
+  }
+}
+
 const { startAsyncCallWithErr, isLoading } = useLoading()
 const columns: ColumnDef<any>[] = [
   {
@@ -447,6 +481,13 @@ const shopee = computed<FdoShopeeFoodSettings>(() => {
     ...shopeefoodSetting.value
   }
 })
+
+const external = computed<FdoExternalSetting>(() => {
+  return {
+    ...deliveryData.initExternalDelivery(),
+    ...externalSetting.value
+  }
+}) 
 const localDeliveryCompanies = computed<DeliveryRow[]>(() => {
   const res = filterLocalDeliveryCompanies(deliveryCompanies.value).map<DeliveryRow>((company) => {
     const { name, paymentTypeKey, key } = company
@@ -571,7 +612,16 @@ const integratedCompanies = computed<IntegratedDeliveryRow[]>(() => {
       canUseAutoDeliveryIntegration: canUseAutoDeliveryIntegration(
         AUTO_INTEGRATION_CLIENT.shopeefood
       )
-    }
+    },
+    {
+      id: loadingKey.value.external,
+      name: 'External delivery',
+      key: AUTO_INTEGRATION_CLIENT.external,
+      setting: external.value,
+      catalog: '-',
+      paymentType: '-', 
+      status: [generateStatus(false, external.value.enable)],
+    },
   ]
 })
 
@@ -583,6 +633,7 @@ const loadingKey = computed(() => {
     gf: `${id}_gf`,
     sf: `${id}_sf`,
     fm: `${id}_fm`,
+    external: `${id}_external`,
     local: (deliveryName: string) => `${id}_${deliveryName}`
   }
 })
@@ -604,7 +655,11 @@ async function updateIntegratedDeliveryCompany(company: IntegratedDeliveryRow) {
     case F_ORDER_PLATFORM.enum.IN_HOUSE:
       await updateInHouseSetting()
       break
+    case AUTO_INTEGRATION_CLIENT.external:
+      await updateExternalDeliverySetting()
+      break
   }
+  await readData()
 }
 
 const filteredCompanies = computed(() => {
@@ -624,6 +679,7 @@ const filteredCompanies = computed(() => {
 const grabfoodSetting = ref<FdoGrabfoodSettings | null>(null)
 const foodpandaSetting = ref<FdoFoodpandaSettings | null>(null)
 const shopeefoodSetting = ref<FdoShopeeFoodSettings | null>(null)
+const externalSetting = ref<FdoExternalSetting | null>(null)
 const loadingDpi = ref<boolean>(false)
 
 async function readData() {
@@ -641,6 +697,9 @@ async function readData() {
     shopeefoodSetting.value = await remoteOrderApi.integratedDelivery.readShopeefood(
       currentRestaurant.value?._id || ''
     )
+    externalSetting.value = await remoteOrderApi.integratedDelivery.readExternal(
+      currentRestaurant.value?._id || ''
+    )
   })
   loadingDpi.value = false
 }
@@ -653,7 +712,7 @@ async function updateLocalDeliveryCompany() {
     company: selectedLocalRow.value.doc,
     data: localDocUpdate
   })
-  showSuccess('Delivery setting updated. ')
+  showSuccess(t('order.DeliverySettingUpdated'))
 }
 
 async function updateManualDelivery({
@@ -737,7 +796,7 @@ async function updateIntegratedDeliverySetting() {
       componentProps.value.canUseAuto
     )
   })
-  showSuccess('Delivery setting updated. ')
+  showSuccess(t('order.DeliverySettingUpdated'))
 }
 
 async function updateFeedmeExpressSetting() {
@@ -754,7 +813,7 @@ async function updateFeedmeExpressSetting() {
       currentRestaurant.value.feedmeDelivery = restaurant.feedmeDelivery
     }
   })
-  showSuccess('Delivery setting updated. ')
+  showSuccess(t('order.DeliverySettingUpdated'))
 }
 
 async function updateInHouseSetting() {
@@ -764,7 +823,17 @@ async function updateInHouseSetting() {
   if (!!res) {
     await changeRestaurant(res)
   }
-  showSuccess('Delivery setting updated. ')
+  showSuccess(t('order.DeliverySettingUpdated'))
+}
+
+async function updateExternalDeliverySetting() {
+  sideSheetIntegrated.value = false
+  await restaurantStore.updateExternalDelivery(currentRestaurant.value?._id ?? '', externalDoc.value)
+  const res = (await readRestaurants())?.find((res) => res._id === currentRestaurant.value?._id)
+  if (!!res) {
+    await changeRestaurant(res)
+  }
+  showSuccess(t('order.DeliverySettingUpdated'))
 }
 
 async function updateDelivery(
@@ -807,6 +876,7 @@ async function updateDelivery(
 
 const feedMeDoc = computed(() => feedMeComponentProps.value.initialValue)
 const inHouseDoc = computed(() => inHouseComponentProps.value.initialValue)
+const externalDoc = computed(() => externalComponentProps.value.initialValue)
 
 const localManual = ref<LinkedDeliveryDoc>(componentProps.value.initialValue.manual)
 const localAuto = ref(componentProps.value.initialValue.integrated)
@@ -828,6 +898,10 @@ function handleModelValueUpdateInHouse(v: any) {
   inHouseComponentProps.value.initialValue = v
 }
 
+function handleModelValueUpdateExternal(v: any) {
+  externalComponentProps.value.initialValue = v
+}
+
 const feedmeValidate = ref<boolean | null>(null)
 function handleValidationResult(v: boolean) {
   feedmeValidate.value = v
@@ -854,6 +928,7 @@ type companyName =
   | 'FoodPanda delivery'
   | 'GrabFood delivery'
   | 'ShopeeFood delivery'
+  | 'External delivery'
 
 function convertIntegratedCompanyName(name: companyName): string {
   switch (name) {
@@ -867,6 +942,8 @@ function convertIntegratedCompanyName(name: companyName): string {
       return `${t('order.deliveryTitle', { company: 'GrabFood' })}`
     case 'ShopeeFood delivery':
       return `${t('order.deliveryTitle', { company: 'ShopeeFood' })}`
+    case 'External delivery':
+      return `${t('order.externalDelivery')}`
     default:
       return ''
   }

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

@@ -1,3 +1,4 @@
+import type { FdoExternalSetting } from '@entity';
 import {
   FdoRestaurantFeedmeDelivery,
   FdoGrabfoodSettings,
@@ -66,10 +67,24 @@ function initShopeefoodDelivery(): FdoShopeeFoodSettings {
   }
 }
 
+function initExternalDelivery(): FdoExternalSetting {
+  return {
+    _id: '',
+    enable: false,
+    config: {
+      autoAccept: false,
+      autoSend: false,
+      autoCloseBill: false,
+    },
+    platform: 'ZUS',
+  }
+}
+
 export default {
   initInhouseDelivery,
   initFeedmeExpress,
   initFoodpandaDelivery,
   initGrabfoodDelivery,
-  initShopeefoodDelivery
+  initShopeefoodDelivery,
+  initExternalDelivery
 }

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

@@ -6,6 +6,7 @@ export enum AUTO_INTEGRATION_CLIENT {
   foodpanda = 'foodpanda',
   grabfood = 'grabfood',
   shopeefood = 'shopeefood',
+  external = 'external'
 }
 
 export interface DeliveryCompany {

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

@@ -0,0 +1,114 @@
+<template>
+  <div class="flex-grow mb-3 mt-3">
+    <FmSwitch
+      :model-value="data.enable"
+      :label="t('order.activateIntegration', { integrationType: t('order.auto') })"
+      label-placement="right"
+      @update:model-value="updateEnable"
+    />
+    <div v-if="data.enable">
+      <FmCard variant="outlined" class="mt-10 p-5">
+        <div class="mb-3">
+          <div class="flex-grow fm-typo-en-title-sm-600 mb-5">{{ t('order.syncMenu') }}</div>
+
+          <FmSelect
+            :placeholder="t('order.selectPlatform')"
+            :model-value="data.platform"
+            :label="t('order.platform')"
+            :items="platformOptions"
+            @update:model-value="updatePlatform"
+          />
+
+          <FmSelect
+            class="mt-5"
+            :placeholder="t('order.selectItem')"
+            :model-value="data.delivery!.catalogId"
+            :label="t('order.deliveryCatalog')"
+            :items="menuStore.catalogOptions"
+            @update:model-value="updateDeliveryMenuCatalog"
+          />
+
+          <FmSelect
+            class="mt-5"
+            :placeholder="t('order.selectItem')"
+            :model-value="data.pickup!.catalogId"
+            :label="t('order.pickupCatalog')"
+            :items="menuStore.catalogOptions"
+            @update:model-value="updatePickupMenuCatalog"
+          />
+        </div>
+
+        <div class="flex flex-row mt-5">
+          <FmButton variant="primary" :label="t('order.syncMenu')" @click="syncMenu()" />
+        </div>
+      </FmCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type PropType, computed, reactive, ref, watch } from 'vue'
+import { F_ORDER_PLATFORM, type FdoExternalSetting } from '@entity'
+import { useI18n } from '@feedmepos/mf-common'
+import { clone } from '@/helpers/object'
+import { useMenuStore } from '@/stores/menu/menu'
+import { useLoading } from '@/composables/loading'
+import { remoteOrderApi } from '@/api/remoteOrder'
+import { useSnackbarFunctions } from '@/components/snackbar'
+
+const { showSuccess } = useSnackbarFunctions()
+const { t } = useI18n()
+const menuStore = useMenuStore()
+
+const props = defineProps({
+  initialValue: {
+    type: Object as PropType<FdoExternalSetting>,
+    required: true
+  }
+})
+
+const data = reactive<FdoExternalSetting>({
+  ...clone(props.initialValue),
+  platform: props.initialValue.platform ?? 'ZUS',
+  delivery: props.initialValue.delivery ?? { catalogId: null },
+  pickup: props.initialValue.pickup ?? { catalogId: null }
+})
+
+const platformOptions = ref([{ label: 'ZUS', value: F_ORDER_PLATFORM.enum.ZUS }])
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: FdoExternalSetting): void
+}>()
+
+function emitUpdatedValue() {
+  emits('update:model-value', { ...data })
+}
+
+function updateEnable(value: boolean) {
+  data.enable = value
+  emitUpdatedValue()
+}
+
+function updateDeliveryMenuCatalog(catalogId: string) {
+  data.delivery!.catalogId = catalogId
+  emitUpdatedValue()
+}
+
+function updatePickupMenuCatalog(catalogId: string) {
+  data.pickup!.catalogId = catalogId
+  emitUpdatedValue()
+}
+
+function updatePlatform(platform: F_ORDER_PLATFORM) {
+  data.platform = platform
+  emitUpdatedValue()
+}
+
+const { startAsyncCallWithErr } = useLoading()
+async function syncMenu() {
+  await startAsyncCallWithErr(async () => {
+    await remoteOrderApi.integratedDelivery.syncExternalMenu(data._id ?? '')
+    showSuccess(t('order.syncMenuSuccess'))
+  })
+}
+</script>