@feedmepos/mf-order-setting 0.0.21-beta.3 → 0.0.23

package/src/views/kiosk/settings/KioskSettingView.vue

@@ -106,7 +106,11 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
             min: f.dineIn.displayStand.standSlotRange.min ?? 0,
             max: f.dineIn.displayStand.standSlotRange.max ?? 10
           },
-          prefix: f.dineIn.displayStand.prefix ?? ''
+          prefix: f.dineIn.displayStand.prefix ?? '',
+          submitOrderInstruction: {
+            payAtCounter: f.dineIn.displayStand.submitOrderInstruction.payAtCounter ?? null,
+            paid: f.dineIn.displayStand.submitOrderInstruction.paid ?? null
+          }
         }
       }
     }
@@ -134,7 +138,11 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
               min: displayStand.standSlotRange.min,
               max: displayStand.standSlotRange.max
             },
-            prefix: displayStand.prefix ?? ''
+            prefix: displayStand.prefix ?? '',
+            submitOrderInstruction: {
+              payAtCounter: displayStand.submitOrderInstruction.payAtCounter ?? null,
+              paid: displayStand.submitOrderInstruction.paid ?? null
+            }
           }
         }
       }
@@ -154,7 +162,11 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
           min: f.dineIn.displayStand.standSlotRange.min ?? 0,
           max: f.dineIn.displayStand.standSlotRange.max ?? 10
         },
-        prefix: f.dineIn.displayStand.prefix ?? ''
+        prefix: f.dineIn.displayStand.prefix ?? '',
+        submitOrderInstruction: {
+          payAtCounter: f.dineIn.displayStand.submitOrderInstruction.payAtCounter ?? null,
+          paid: f.dineIn.displayStand.submitOrderInstruction.paid ?? null
+        }
       }
     }
   }

package/src/views/kiosk/settings/KioskTakeawaySection.vue

@@ -4,14 +4,21 @@
       :model-value="v.enabled"
       :label="t('order.takeaway')"
       label-placement="right"
-      @update:model-value="updateTakeawaySetting"
+      @update:model-value="updateTakeawaySettingEnabled"
       class="mb-5"
     />
+    <kiosk-instruction-section
+      v-show="v.enabled"
+      :fields="instructionFields"
+      @update:field="updateTakeawaySettingInstructions"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import type { KioskTakeawaySettingForm } from '@/modules/order-setting/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
+import { computed } from 'vue'
+import KioskInstructionSection from './KioskInstructionSection.vue'
 
 const { t } = useI18n()
 
@@ -23,10 +30,37 @@ interface Emits {
   (e: 'updateTakeaway', setting: KioskTakeawaySettingForm): void
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 const emits = defineEmits<Emits>()
 
-function updateTakeawaySetting(v: boolean) {
-  emits('updateTakeaway', { enabled: v })
+const instructionFields = computed(() => {
+  return [
+    {
+      id: 'payAtCounter',
+      value: props.v.submitOrderInstruction.payAtCounter ?? undefined,
+      title: t('order.payAtCounter'),
+      defaultValue: 'Collect your transaction slip below and present it to the cashier'
+    },
+    {
+      id: 'paid',
+      value: props.v.submitOrderInstruction.paid ?? undefined,
+      title: t('order.paid'),
+      defaultValue: "Please wait as we prepare your food. We'll call your number when it's ready."
+    }
+  ]
+})
+
+function updateTakeawaySettingEnabled(v: boolean) {
+  emits('updateTakeaway', { ...props.v, enabled: v })
+}
+
+function updateTakeawaySettingInstructions(id: string, instructions: string) {
+  emits('updateTakeaway', {
+    ...props.v,
+    submitOrderInstruction: {
+      ...props.v.submitOrderInstruction,
+      [id]: instructions
+    }
+  })
 }
 </script>

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,6 +655,9 @@ 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()
 }
@@ -625,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() {
@@ -642,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
 }
@@ -654,7 +712,7 @@ async function updateLocalDeliveryCompany() {
     company: selectedLocalRow.value.doc,
     data: localDocUpdate
   })
-  showSuccess('Delivery setting updated. ')
+  showSuccess(t('order.DeliverySettingUpdated'))
 }
 
 async function updateManualDelivery({
@@ -738,7 +796,7 @@ async function updateIntegratedDeliverySetting() {
       componentProps.value.canUseAuto
     )
   })
-  showSuccess('Delivery setting updated. ')
+  showSuccess(t('order.DeliverySettingUpdated'))
 }
 
 async function updateFeedmeExpressSetting() {
@@ -755,7 +813,7 @@ async function updateFeedmeExpressSetting() {
       currentRestaurant.value.feedmeDelivery = restaurant.feedmeDelivery
     }
   })
-  showSuccess('Delivery setting updated. ')
+  showSuccess(t('order.DeliverySettingUpdated'))
 }
 
 async function updateInHouseSetting() {
@@ -765,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(
@@ -808,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)
@@ -829,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
@@ -855,6 +928,7 @@ type companyName =
   | 'FoodPanda delivery'
   | 'GrabFood delivery'
   | 'ShopeeFood delivery'
+  | 'External delivery'
 
 function convertIntegratedCompanyName(name: companyName): string {
   switch (name) {
@@ -868,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>

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

@@ -198,6 +198,7 @@ async function syncMenu() {
       lastSynchronize: res?.lastSynchronize || modelValue.value.auto.lastSynchronize
     }
     updateData({ auto: temp, manual: data.manual })
+    showSuccess(t('order.syncMenuSuccess'))
   })
 }
 
@@ -222,18 +223,34 @@ 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">
+  <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-600 mb-3 mt-10">{{ t('order.discountCampaign')}}</div>
-      <FmButton :label="t('order.addNewCampaign')" icon="add" variant="plain" @click="addCampaign" class="mb-3" />
+      <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-10">
+        {{ t('order.discountCampaign') }}
+      </div>
+      <FmButton
+        :label="t('order.addNewCampaign')"
+        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>
+              <span class="font-bold"
+                >{{ campaign.name }} ({{ campaign.vendorBearPercentage }}%)</span
+              >
               <br />
               {{ formatCampaignDate(campaign.date) }}
             </div>

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

@@ -9,12 +9,13 @@ 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'
+import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 
 export interface GrabfoodDeliveryData {
   manual: FdoLinkedDelivery | null
   integrated: FdoGrabfoodSettings
 }
+const { t } = useI18n()
 
 const props = defineProps({
   initialValue: {
@@ -31,7 +32,7 @@ const props = defineProps({
   }
 })
 
-const data = reactive(clone(props.initialValue));
+const data = reactive(clone(props.initialValue))
 const modelValue = computed<IntegratedDeliverySettingData>(() => {
   const auto = data.integrated
   return {
@@ -45,35 +46,32 @@ const modelValue = computed<IntegratedDeliverySettingData>(() => {
       lastSynchronize: auto.lastSynchronize,
       status: auto.status,
       updatedAt: auto.updatedAt,
-      menuSyncError: auto.menuSyncError,
+      menuSyncError: auto.menuSyncError
     }
   }
 })
 
 const { currentRestaurant } = useCoreStore()
 
-
 function updateData({ manual, auto }: IntegratedDeliverySettingData) {
   data.manual = manual
   data.integrated = {
     ...auto,
     merchantID: auto.integrationId,
-    commissionRate: auto.commissionRate,
+    commissionRate: auto.commissionRate
   }
-  return { manual: data.manual, integrated: data.integrated };
+  return { manual: data.manual, integrated: data.integrated }
 }
 
 const emits = defineEmits<{
-  (e: 'update:model-value', payload: { manual: any; auto: any }): void;
-}>();
-
+  (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 updatedData = updateData({ manual, auto })
+  emits('update:model-value', { manual: updatedData.manual, auto: updatedData.integrated })
 }
 
-
 const { startAsyncCallWithErr } = useLoading()
 async function syncMenu() {
   await startAsyncCallWithErr(async () => {
@@ -85,11 +83,12 @@ async function syncMenu() {
       lastSynchronize: res?.lastSynchronize || modelValue.value.auto.lastSynchronize
     }
     updateData({ auto: temp, manual: data.manual })
+    showSuccess(t('order.syncMenuSuccess'))
   })
 }
 
 import { useSnackbarFunctions } from '@/components/snackbar'
-const { showSuccess } = useSnackbarFunctions();
+const { showSuccess } = useSnackbarFunctions()
 
 async function flowTestOrder() {
   await startAsyncCallWithErr(async () => {
@@ -112,7 +111,13 @@ 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" />
+  <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>