@feedmepos/mf-order-setting 0.0.13 → 0.0.14

package/src/views/order-settings/delivery/inhouse/DeliveryCustomTime.vue

@@ -3,6 +3,9 @@ import { clone } from '@/helpers/object'
 import type { FdoOperatingHour, FdoOperatingHours } from '@feedmepos/core/entity'
 import Day from 'dayjs'
 import { computed, type PropType } from 'vue'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const props = defineProps({
   modelValue: {
@@ -145,12 +148,40 @@ function emitValue(fn: (v: FdoOperatingHour[]) => FdoOperatingHour[]) {
   emits('update:model-value', v)
 }
 
+function convertDayToI18n(day:string) {
+  switch(day) {
+    case "Monday":
+      return t('order.monday');
+    case "Tuesday":
+      return t('order.tuesday');
+    case "Wednesday":
+      return t('order.wednesday');
+    case "Thursday":
+      return t('order.thursday');
+    case "Friday":
+      return t('order.friday');
+    case "Saturday":
+      return t('order.saturday');
+    case "Sunday":
+      return t('order.sunday');
+    default: 
+      return
+  }
+}
+
 const sortedDayOptions = computed(() => {
   return dayOptions.value.slice().sort((a, b) => {
     // Sort so that 1 (Monday) comes first and 0 (Sunday) comes last
     if (a.value === 0) return 1
     if (b.value === 0) return -1
     return a.value - b.value
+  }).
+  map(option => {
+    const label = convertDayToI18n(option.label)
+    return {
+      ...option,
+      label
+    }
   })
 })
 </script>

package/src/views/order-settings/delivery/inhouse/DeliveryOrder.vue

@@ -9,6 +9,9 @@ import GoogleMap from '@/components/GoogleMap.vue'
 import ZoneDialog from './ZoneDialog.vue'
 import { type PropType, computed, onMounted, ref } from 'vue'
 import { useSnackbar, SnackbarPosition } from '@feedmepos/ui-library'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 export interface Address extends FdoAddress {
   formatted: string
@@ -54,15 +57,15 @@ const areas = computed(() =>
     const { deliveryFee, minPurchase, freeAfterTotal } = area
     return [
       {
-        label: 'Delivery Fee',
+        label: t('order.deliveryFee'),
         value: formatCurrency(deliveryFee)
       },
       {
-        label: 'Min Purchase',
+        label: t('order.minPurchase'),
         value: minPurchase ? formatCurrency(minPurchase) : 'Not Set'
       },
       {
-        label: 'Min spend for free Delivery',
+        label: t('order.minSpendForFreeDelivery'),
         value: freeAfterTotal ? formatCurrency(freeAfterTotal) : 'Not Set'
       }
     ]
@@ -179,10 +182,10 @@ onMounted(getCenter)
   <GoogleMap ref="gmRef" class="full-width" style="height: 500px" :center="center" :polygons="polygons" :zoom="10" />
 
   <div class=" mt-5 mb-5">
-    <FmButton class="mt-3" @click="openSideSheet" icon="add" label="Add Delivery Zone" variant="plain" />
+    <FmButton class="mt-3" @click="openSideSheet" icon="add" :label="t('order.addDeliveryZone')" variant="plain" />
   </div>
 
-  <FmSideSheet header="Add delivery zone" dismiss-away :maxWidth="600" v-model="sideSheet">
+  <FmSideSheet :header="t('order.addDeliveryZone')" dismiss-away :maxWidth="600" v-model="sideSheet">
     <div v-if="currentIndex !== null">
       <ZoneDialog :center="getPolygonCenter(deliveryArea?.polygon ?? [])" :initial-value="deliveryArea"
         @update:model-value="handleZoneUpdate" />
@@ -194,12 +197,12 @@ onMounted(getCenter)
     <template #side-sheet-footer>
       <div class="flex gap-8 items-center justify-start">
         <div v-if="currentIndex !== null">
-          <FmButton variant="primary" label="Save" size="lg" @click="updateZone(currentIndex)" close: true />
+          <FmButton variant="primary" :label="t('order.save')" size="lg" @click="updateZone(currentIndex)" close: true />
         </div>
         <div v-else>
-          <FmButton variant="primary" label="Save" size="lg" @click="addZone" close: true />
+          <FmButton variant="primary" :label="t('order.save')" size="lg" @click="addZone" close: true />
         </div>
-        <FmButton variant="secondary" label="Cancel" size="lg" @click="closeSideSheet" />
+        <FmButton variant="secondary" :label="t('order.cancel')" size="lg" @click="closeSideSheet" />
       </div>
     </template>
   </FmSideSheet>
@@ -209,7 +212,7 @@ onMounted(getCenter)
       <div class="flex flex-row">
         <div class="fm-typo-en-body-lg-600 mb-3 mr-5" :style="{
           color: colors[index]
-        }">Delivery Zone {{ index + 1 }}</div>
+        }">{{ t('order.deliveryZone') }} {{ index + 1 }}</div>
 
         <div class="mr-auto"></div>
         <FmButton append-icon="edit" variant="tertiary" @click="editZone(index)" />

package/src/views/order-settings/delivery/inhouse/DeliveryTime.vue

@@ -3,6 +3,9 @@ import type { FdoDeliveryTime, FdoOperatingHour, FdoOperatingHours } from '@feed
 import { computed, ref, type PropType } from 'vue'
 import TimePicker from './TimePicker.vue'
 import DeliveryCustomTime from './DeliveryCustomTime.vue'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 type DeliveryTimeType = 'operatingHour' | 'fixed' | 'custom'
 
@@ -28,15 +31,15 @@ const deliveryTimeOptions: {
   value: DeliveryTimeType
 }[] = [
     {
-      label: 'Operating hour',
+      label: t('order.operatingHour'),
       value: 'operatingHour'
     },
     {
-      label: 'Fixed time',
+      label: t('order.fixedTime'),
       value: 'fixed'
     },
     {
-      label: 'Custom time',
+      label: t('order.customTime'),
       value: 'custom'
     }
   ]
@@ -110,8 +113,8 @@ function canToggle(value: DeliveryTimeType) {
     <div v-if="modelValue.custom && option.value === 'custom'">
       <FmCard variant="outlined">
         <FmCardSection>
-          <div class="flex-grow fm-typo-en-body-lg-600 mb-2">Time Slots</div>
-          <DeliveryCustomTime title="Time slots" :model-value="modelValue.custom"
+          <div class="flex-grow fm-typo-en-body-lg-600 mb-2">{{ t('order.timeSlot') }}</div>
+          <DeliveryCustomTime :title="t('order.timeSlot')" :model-value="modelValue.custom"
             @update:model-value="updateCustomTime" />
         </FmCardSection>
       </FmCard>
@@ -120,7 +123,7 @@ function canToggle(value: DeliveryTimeType) {
     <div v-if="modelValue.time && option.value === 'fixed'">
       <FmCard variant="outlined">
         <FmCardSection>
-          <div class="flex-grow fm-typo-en-body-lg-600 mb-2">Time Slots</div>
+          <div class="flex-grow fm-typo-en-body-lg-600 mb-2">{{ t('order.timeSlot') }}</div>
           <TimePicker :modelValue="props.modelValue" @update:model-value="(v) => emits('update:model-value', v)" />
         </FmCardSection>
       </FmCard>

package/src/views/order-settings/delivery/inhouse/InHouseDelivery.vue

@@ -21,6 +21,10 @@ import { Pos } from '@feedmepos/core'
 import TaxInput from '../components/TaxInput.vue'
 import { useCoreStore } from '@feedmepos/mf-common'
 import { useSnackbar } from '@feedmepos/ui-library'
+import { useI18n } from '@feedmepos/mf-common'
+import { useRestaurantStore } from '@/stores/restaurant'
+
+const { t } = useI18n()
 
 export interface InhouseDialogData {
   enable: boolean
@@ -34,6 +38,8 @@ export interface InhouseDialogData {
   taxes: { [key: string]: FdoDeliveryTaxSetting }
 }
 
+const restaurantStore = useRestaurantStore()
+
 enum TaxOption {
   inclusive,
   exclusive
@@ -41,11 +47,11 @@ enum TaxOption {
 
 const taxInclusiveOptions = [
   {
-    label: 'Inclusive',
+    label: `${t('order.taxInclusive')}`,
     value: TaxOption.inclusive
   },
   {
-    label: 'Exclusive',
+    label: `${t('order.taxExclusive')}`,
     value: TaxOption.exclusive
   }
 ]
@@ -53,15 +59,10 @@ const taxInclusiveOptions = [
 const snackBar = useSnackbar()
 const { currentRestaurant } = useCoreStore()
 const minVersionForTax = Pos.minVersionToUse(F_FEATURE.Enum.calculatorV4)
-const validatePosVersion = computed<string>(() => {
+const validPosVersion = computed<boolean>(() => {
   const posVersion = currentRestaurant.value?.posVersion ?? ''
   const feature = F_FEATURE.Enum.calculatorV4
-  const res = Pos.canUse({ feature, posVersion })
-  if (!res) {
-    const minVersion = Pos.minVersionToUse(feature)
-    return `*POS version ${minVersion} or above`
-  }
-  return ''
+  return Pos.canUse({ feature, posVersion })
 })
 
 const props = defineProps({
@@ -69,10 +70,6 @@ const props = defineProps({
     type: Object as PropType<InhouseDialogData>,
     default: undefined
   },
-  allowEPayment: {
-    type: [Boolean, String] as PropType<boolean | string>,
-    required: true
-  },
   address: {
     type: Object as PropType<Address | undefined>,
     required: true
@@ -83,16 +80,16 @@ const inhouse = reactive<InhouseDialogData>(
   props.initialValue
     ? clone(props.initialValue)
     : {
-        enable: false,
-        catalogId: null,
-        term: '',
-        areas: [],
-        ignoreStock: false,
-        paymentTypes: [],
-        offlinePaymentTypes: [],
-        deliveryTime: null,
-        taxes: {}
-      }
+      enable: false,
+      catalogId: null,
+      term: '',
+      areas: [],
+      ignoreStock: false,
+      paymentTypes: [],
+      offlinePaymentTypes: [],
+      deliveryTime: null,
+      taxes: {}
+    }
 )
 
 const tax = computed(() => ItemTax.taxSetting())
@@ -190,8 +187,13 @@ function updateTerm(value: string) {
   emitUpdatedValue()
 }
 
-function updatePaymentTypes(v: F_ORDER_PAYMENT_TYPE[]) {
-  inhouse.paymentTypes = v
+function updatePayment(value: {
+  paymentTypes: F_ORDER_PAYMENT_TYPE[]
+  offlinePaymentTypes: FdoOfflinePaymentMethod[] | undefined | null
+}) {
+  inhouse.offlinePaymentTypes = value.offlinePaymentTypes
+  inhouse.paymentTypes = value.paymentTypes
+  emitUpdatedValue()
 }
 
 watch(
@@ -228,23 +230,22 @@ const actualDeliveryTime = computed({
 </script>
 
 <template>
-  <FmSwitch
-    :model-value="inhouse.enable"
-    label="Activate In house Delivery"
+  <FmSwitch 
+    :model-value="inhouse.enable" 
+    :label="t('order.activateDeliveryCompany', {company:'In house'})" 
     label-placement="right"
-    sublabel="Accept In house Delivery with POS"
-    @update:model-value="updateEnable"
-  />
+    :sublabel="t('order.inhouseSwitchSublabel')"
+    @update:model-value="updateEnable" />
   <div v-if="inhouse.enable">
     <FmCard variant="outlined" class="p-5 mt-10">
-      <div class="flex-grow fm-typo-en-title-sm-600 mb-3">General setting</div>
+      <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.generalSetting') }}</div>
 
       <div class="mb-5">
         <FmSwitch
           :model-value="inhouse.ignoreStock || false"
           value="ignoreStock"
-          label="Ignore stock"
-          sublabel="Customer can order even product out of stocks"
+          :label="t('order.ignoreStock')"
+          :sublabel="t('order.ignoreStockSublabel')"
           label-placement="right"
           @update:model-value="updateIgnoreStock"
         />
@@ -253,7 +254,7 @@ const actualDeliveryTime = computed({
       <div class="mb-5">
         <FmSelect
           :model-value="inhouse.catalogId"
-          label="Catalog"
+          :label="t('order.catalog')"
           :items="menuStore.catalogOptions"
           @update:model-value="updateCatalogId"
         />
@@ -262,7 +263,7 @@ const actualDeliveryTime = computed({
       <div class="mb-5">
         <FmTextarea
           :model-value="inhouse.term"
-          label="Delivery term"
+          :label="t('order.deliveryTerm')"
           @update:model-value="updateTerm"
         />
       </div>
@@ -270,41 +271,41 @@ const actualDeliveryTime = computed({
 
     <FmCard variant="outlined" class="p-5 mt-10">
       <div class="flex-grow fm-typo-en-title-sm-600 mb-3">
-        Tax settings
+        {{ t('order.taxSetting') }}
         <span
           class="text-fm-color-secondary-salmon fm-typo-en-body-sm-600"
-          v-if="validatePosVersion"
+          v-if="!validPosVersion"
         >
-          (Tax setting only applicable for POS after {{ minVersionForTax }})</span
+          {{ t('order.taxSettingTerm', {validatePosVersion: minVersionForTax}) }}</span
         >
       </div>
       <div class="mb-5">
-        <FmSwitch
-          :model-value="hasInhouseDeliveryTax"
-          :disabled="!!validatePosVersion.length"
-          label="Delivery fee charge tax"
-          label-placement="right"
-          sublabel="Accept In house Delivery with POS"
-          @update:model-value="toggleTax"
-        />
+        <FmSwitch 
+          :model-value="hasInhouseDeliveryTax && validPosVersion" 
+          :disabled="!validPosVersion"
+          :label="t('order.inhouseDeliveryTaxLabel')" 
+          label-placement="right" 
+          :sublabel="t('order.inhouseDeliveryTaxSublabel')"
+          @update:model-value="toggleTax" />
       </div>
-      <div v-if="hasInhouseDeliveryTax">
+      <div v-if="hasInhouseDeliveryTax && validPosVersion">
         <div class="mb-5">
-          <TaxInput
-            :model-value="taxSettings"
+          <TaxInput 
+            :disable="!validPosVersion" 
+            :model-value="taxSettings" 
             :tax-options="taxOptions"
-            :title="`${tax.systemCode} (applicable if restaurant profile SST is set)`"
-            @update:model-value="(ev) => updateTax(ev)"
+            :title="`${tax.systemCode} ${t('order.inhouseDeliveryInputLabel')}`"
+            @update:model-value="(ev) => updateTax(ev)" 
           />
         </div>
         <div class="mb-5">
-          <FmRadioGroup
-            :model-value="taxInclusive"
-            label-mark="required"
+          <FmRadioGroup 
+            :disabled="!validPosVersion" 
+            :model-value="taxInclusive" 
+            label-mark="required" 
             inline
-            label="Tax calculation"
-            @update:model-value="(ev) => updateTaxInclusive(ev as unknown as number)"
-          >
+            :label="t('order.inhouseDeliveryTaxCalculation')"
+            @update:model-value="(ev) => updateTaxInclusive(ev as unknown as number)">
             <div v-for="option in taxInclusiveOptions" :key="option.value">
               <FmRadio :value="option.value" :label="option.label" />
             </div>
@@ -314,14 +315,8 @@ const actualDeliveryTime = computed({
     </FmCard>
 
     <FmCard variant="outlined" class="p-5 mt-10">
-      <PaymentSidesheet
-        :paymentTypes="inhouse.paymentTypes"
-        :offlinePaymentTypes="inhouse.offlinePaymentTypes"
-        @update:payment-types="(v: F_ORDER_PAYMENT_TYPE[]) => updatePaymentTypes(v)"
-        @update:offline-payment-types="
-          (v: FdoOfflinePaymentMethod[] | undefined | null) => (inhouse.offlinePaymentTypes = v)
-        "
-      />
+      <PaymentSidesheet :paymentTypes="inhouse.paymentTypes" :offlinePaymentTypes="inhouse.offlinePaymentTypes"
+        :allow-e-payment="restaurantStore.getRestaurantEPayment(currentRestaurant)" @update:payments="updatePayment" />
     </FmCard>
 
     <FmCard variant="outlined" class="p-5 mt-10">
@@ -330,12 +325,12 @@ const actualDeliveryTime = computed({
 
     <div v-if="preorderDeliveryTime">
       <FmCard variant="outlined" class="p-5 mt-10">
-        <div class="flex-grow fm-typo-en-title-sm-600">Delivery Time</div>
+        <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.deliveryTime') }}</div>
         <DeliveryTime v-model="actualDeliveryTime as FdoDeliveryTime" />
       </FmCard>
     </div>
     <FmCard variant="outlined" class="p-5 mt-10">
-      <div class="flex-grow fm-typo-en-title-sm-600 mb-3">Delivery order</div>
+      <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.deliveryOrder') }}</div>
       <DeliveryOrder v-model="inhouse.areas" :address="address as Address" />
     </FmCard>
   </div>

package/src/views/order-settings/delivery/inhouse/TimePicker.vue

@@ -15,13 +15,16 @@
       <FmButton class="mt-2 ml-4" append-icon="close" variant="tertiary" @click="removeTimeslot(index)" />
     </div>
   </div>
-  <FmButton class="mt-3" @click.stop="addTimeslot" icon="add" label="Add Time Slot" variant="plain"/>
+  <FmButton class="mt-3" @click.stop="addTimeslot" icon="add" :label="t('order.addTimeSlot')" variant="plain"/>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import Day from 'dayjs'
 import type { FdoDeliveryTime } from '@feedmepos/core/entity'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const props = defineProps<{
   modelValue: FdoDeliveryTime

package/src/views/order-settings/delivery/inhouse/ZoneDialog.vue

@@ -7,6 +7,9 @@ import { Dinero } from '@feedmepos/core'
 import type { FdoDeliveryArea, FdoDinero } from '@feedmepos/core/entity'
 import { ref, reactive, type PropType, computed, onMounted, watch } from 'vue'
 import CurrencyInput from './CurrencyInput.vue'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const emits = defineEmits<{
   (e: 'update:model-value', value: FdoDeliveryArea): void
@@ -101,28 +104,28 @@ watch(
   <CurrencyInput
     :model-value="data.deliveryFee"
     @update:model-value="updateDeliveryFee"
-    label="Delivery Fee"
+    :label="t('order.deliveryFee')"
   />
   <div class="flex flex-row">
     <div class="mr-1">
       <CurrencyInput
         :model-value="data.minPurchase"
         @update:model-value="updateMinPurchase"
-        label="Min Purchase"
+        :label="t('order.minPurchase')"
       />
     </div>
     <div class="ml-1">
       <CurrencyInput
         :model-value="data.freeAfterTotal"
         @update:model-value="updateFreeAfterTotal"
-        label="Min spend for free Delivery"
+        :label="t('order.minSpendForFreeDelivery')"
       />
     </div>
   </div>
   <FmStepperField
     class="mb-5"
     :model-value="distanceInKM"
-    label="Delivery zone (km)"
+    :label="`${t('order.deliveryZone')} (km)`"
     placeholder="0"
     :show-steppers="false"
     @update:model-value="updateDistance"

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

@@ -10,6 +10,10 @@ import {
 import { useCoreStore } from '@feedmepos/mf-common'
 import { type PropType, computed, reactive } from 'vue'
 import parsePhoneNumberFromString from 'libphonenumber-js'
+import { useI18n } from '@feedmepos/mf-common'
+
+import { useRouter } from 'vue-router'
+const { t } = useI18n()
 
 interface ValidateFeedmeErrorResult {
   message: string
@@ -51,23 +55,30 @@ const validatePosVersion = computed<ValidateFeedmeResult>(() => {
   })
   if (!res) {
     const minVersion = Pos.minVersionToUse(F_FEATURE.enum.feedmeDelivery)
-    return { message: `Min POS version ${minVersion} required for FeedMe Express` }
+    return { message: `${t('order.feedmeExpressPosVersionIssue', {minVersion})}` }
   }
   return true
 })
 
+const router = useRouter();
+
 const validatePayoutAccount = computed<ValidateFeedmeResult>(() => {
   const account = currentRestaurant.value?.payoutAccount
   if (!account?.enable) {
     return {
-      message: 'Payout account is required to enable FeedMe Express',
-
+      message:  `${t('order.feedmeExpressPayoutAccIssue')}`,
+      action: {
+        label: t('order.updatePayoutAccount'),
+        callback: () => {
+          router.push({ name: "mf-payment-payout-account"})
+        }
+      }
     }
   }
   if (account.status !== F_PAYOUT_ACCOUNT_STATUS.enum.APPROVED) {
     return {
       message:
-        'Your payout account is under review. Please contact our staff for further assistant.'
+        `${t('order.feedmeExpressNotApproved')}`
     }
   }
   return true
@@ -77,12 +88,18 @@ const validateRestaurantProfile = computed<ValidateFeedmeResult>(() => {
   const restaurant = currentRestaurant
   const profile = currentRestaurant.value?.profile
   const formattedAddress = formatAddress(profile?.address)
-  if (!restaurant || !profile) return { message: 'Invalid restaurant' }
+  if (!restaurant || !profile) return { message: t('order.invalidRestaurant') }
   const phoneNo = parsePhoneNumberFromString(profile.phoneNo)
   if (!phoneNo || !formattedAddress.isValid || !formattedAddress.isValidCoordinate) {
-    const requiredField = !phoneNo ? 'contact' : 'address'
+    const requiredField = !phoneNo ? t('order.contact') : t('order.address')
     return {
-      message: `Invalid restaurant ${requiredField}, please complete your restaurant profile to enable FeedMe Express`,
+      message:`${t('order.invalidRestaurant')} ${requiredField}, ${t('order.pleaseCompleteProfile')}`,
+      action: {
+        label: t('order.updateNow'),
+        callback: () => {
+          router.push({ name: "$settings-my-business"})
+        }
+      }
     }
   }
 
@@ -149,24 +166,24 @@ import { formatAddress } from '@/helpers/profile'
 
 <template>
   <template v-if="validation === true">
-    <FmSwitch :model-value="data.enable" label="Active FeedMe Express" label-placement="right"
-      sublabel="Customer can select FeedMe express to delivery their meal" @update:model-value="updateEnable" />
+    <FmSwitch :model-value="data.enable" :label="`${t('order.actiavteFeedmeExpress')}`" label-placement="right"
+      :sublabel="t('order.activateFeedmeExpressSublabel')" @update:model-value="updateEnable" />
     <div v-if="data.enable">
       <FmCard variant="outlined" class="p-5 mt-10">
-        <div class="flex-grow fm-typo-en-title-sm-600 mb-3">General Info</div>
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.generalInfo') }}</div>
 
-        <FmSwitch :model-value="data.ignoreStock || false" value="ignoreStock" label="Ignore stock"
-          sublabel="Customer can order even product out of stocks" label-placement="right"
+        <FmSwitch :model-value="data.ignoreStock || false" value="ignoreStock" :label="t('order.ignoreStock')"
+          :sublabel="t('order.ignoreStockSublabel')" label-placement="right"
           @update:model-value="updateIgnoreStock" />
 
         <div class="mt-5 mb-3">
-          <FmSelect :model-value="data.catalogId" label="Catalog" :items="menuStore.catalogOptions"
+          <FmSelect :model-value="data.catalogId" :label="t('order.catalog')" :items="menuStore.catalogOptions"
             @update:model-value="updateCatalogId" />
         </div>
-        <FmTextarea :model-value="data.term ?? undefined" label="Term" @update:model-value="updateTerm" />
+        <FmTextarea :model-value="data.term ?? undefined" :label="t('order.term')" @update:model-value="updateTerm" />
 
         <div class="mt-5 mb-3">
-          <FmTextarea :model-value="data.instruction ?? undefined" label="Delivery instruction"
+          <FmTextarea :model-value="data.instruction ?? undefined" :label="t('order.deliveryInstruction')"
             @update:model-value="updateInstruction" />
         </div>
       </FmCard>
@@ -177,6 +194,12 @@ import { formatAddress } from '@/helpers/profile'
       <img :src="svgPath" alt="" />
       <div class="flex flex-col">
         <div class="text-center mb-5">{{ validation.message }}</div>
+        <FmButton 
+          v-if="validation.action" 
+          variant="primary" 
+          :label="validation.action.label"
+          @click = "(validation as ValidateFeedmeErrorResult).action!.callback"
+        />
       </div>
     </div>
   </div>

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

@@ -2,6 +2,9 @@
 import { clone } from '@/helpers/object';
 import Day from 'dayjs';
 import { reactive, type PropType, watch } from 'vue';
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 export interface IFPDiscountCampaign {
   name: string;
@@ -87,16 +90,16 @@ function convertToDateRange(newDateRange: { start: string, end: string }): { sta
 <template>
   <FmTextField
     v-model="data.name"
-    label="Name"
-    placeholder="Enter name"
+    :label="t('order.name')"
+    :placeholder="t('order.enterName')"
   />
 
   <FmStepperField
     class="mt-5"
     append-text="%"
     v-model="data.vendorBearPercentage"
-    label="Vendor bear percentage"
-    placeholder="Enter a number"
+    :label="t('order.vendorBearPercentage')"
+    :placeholder="t('order.enterANumber')"
     :show-steppers="false"
   />
 

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

@@ -13,6 +13,9 @@ import { remoteOrderApi } from '@/api/remoteOrder'
 import { useDialog } from '@feedmepos/ui-library'
 import FoodpandaCampaignDialog, { type IFPDiscountCampaign } from './FoodpandaCampaignDialog.vue'
 import { DateRange } from '@/helpers/date'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 export interface FoodpandaDeliveryData {
   manual: FdoLinkedDelivery | null
@@ -102,7 +105,7 @@ function addCampaign() {
   let updatedCampaign: IFPDiscountCampaign
 
   Dialog.open({
-    title: 'Add campaign',
+    title: t('order.addCampaign'),
     contentComponent: FoodpandaCampaignDialog,
     contentComponentProps: {
       'onUpdate:modelValue': (v: IFPDiscountCampaign) => {
@@ -110,7 +113,7 @@ function addCampaign() {
       }
     },
     primaryActions: {
-      text: 'Add',
+      text: t('order.add'),
       variant: 'primary',
       close: true
     }
@@ -223,8 +226,8 @@ async function cancelTestOrder() {
     :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">Discount campaign</div>
-      <FmButton label="Add new campaign" 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">