@feedmepos/mf-order-setting 0.0.12 → 0.0.14-alpha

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

@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-col gap-5">
         <div class="flex flex-col gap-16">
-            <FmSwitch v-model="form.enabled" label="Dine In" label-placement="right" />
+            <FmSwitch v-model="form.enabled" :label="t('order.dineIn')" label-placement="right" />
             <div v-show="form.enabled" class="flex flex-col gap-16">
                 <KioskPickAtCounterSection v-if="form.pickUp" :enabled="form.pickUp.enabled"
                     @update-pick-up="updatePickUp" />
@@ -17,6 +17,9 @@ import KioskDisplayStandSection from './KioskDisplayStandSection.vue';
 import KioskPickAtCounterSection from './KioskPickAtCounterSection.vue';
 import { ref, watch } from 'vue';
 import { ObjectUtil } from '@/utils/object';
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface Props {
     getSetting: () => KioskDineInSettingForm,

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

@@ -1,27 +1,27 @@
 <template>
     <div>
-        <FmSwitch v-model="form.enabled" label="Display Stand" label-placement="right"
+        <FmSwitch v-model="form.enabled" :label="t('order.displayStand')" label-placement="right"
             @update:modelValue="updateEnabled" />
         <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2 my-5 w-11/12" v-show="form.enabled">
-            <span class="fm-typo-en-title-sm-600">Table service setting</span>
+            <span class="fm-typo-en-title-sm-600">{{ t('order.tableServiceSetting') }}</span>
             <div class="flex flex-col gap-10">
                 <!-- prefix -->
                 <!-- TODO: How to let user know this field is do for what-->
-                <FmTextField v-model="form.prefix" label="Prefix" placeholder="Prefix"
+                <FmTextField v-model="form.prefix" :label="t('order.prefix')" :placeholder="t('order.prefix')"
                     @update:modelValue="updatePrefix" />
             </div>
             <div class="flex flex-row gap-2">
                 <!-- <span class="fm-typo-en-title-sm-600">Table Stand Number Range</span> -->
-                <FmStepperField class="w-1/2" v-model="form.standSlotRange.min" label="Start" labelMark="required"
-                    :rules="minRules" placeholder="Enter a number" @update:modelValue="updateMin" />
-                <FmStepperField class="w-1/2" v-model="form.standSlotRange.max" label="End" labelMark="required"
-                    :rules="maxRules" placeholder="Enter a number" @update:modelValue="updateMax" />
+                <FmStepperField class="w-1/2" v-model="form.standSlotRange.min" :label="t('order.start')" labelMark="required"
+                    :rules="minRules" :placeholder="t('order.enterANumber')" @update:modelValue="updateMin" />
+                <FmStepperField class="w-1/2" v-model="form.standSlotRange.max" :label="t('order.end')" labelMark="required"
+                    :rules="maxRules" :placeholder="t('order.enterANumber')" @update:modelValue="updateMax" />
             </div>
             <div>
                 <!-- pad digit -->
                 <!-- TODO: How to let user know this field is do for what-->
-                <FmStepperField v-model="form.padDigit" label="Pad Digit" labelMark="required" :rules="padDigitRules"
-                    placeholder="Pad Digit" @update:modelValue="updatePadDigit" />
+                <FmStepperField v-model="form.padDigit" :label="t('order.padDigit')" labelMark="required" :rules="padDigitRules"
+                    :placeholder="t('order.padDigit')" @update:modelValue="updatePadDigit" />
             </div>
         </div>
     </div>
@@ -31,6 +31,9 @@ import { computed, ref } from 'vue';
 import { NumberUtil } from '@/utils/number';
 import { ObjectUtil } from '@/utils/object';
 import type { DisplayStandSettingForm } from '@/modules/order-setting/kiosk/interface';
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface Props {
     displayStand: DisplayStandSettingForm;
@@ -46,13 +49,13 @@ const form = ref<DisplayStandSettingForm>(ObjectUtil.clone<DisplayStandSettingFo
 
 const nonNegativeRule = (val: any) => {
     if (val < 0) {
-        return 'Value should be positive value';
+        return t('order.nonNegativeRule');
     }
     return true;
 }
 const greaterThanMinRule = (val: any) => {
     if (val <= (form.value.standSlotRange.min ?? 0)) {
-        return 'Max should be exceed to Min';
+        return t('order.greaterThanMinRule');
     }
     return true;
 }

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

@@ -1,11 +1,14 @@
 <template>
     <div>
-        <FmSwitch v-model="pickUpEnabled" label="Pick At Counter" label-placement="right"
+        <FmSwitch v-model="pickUpEnabled" :label="t('order.pickAtCounter')" label-placement="right"
             @update:modelValue="updatePickUp" />
     </div>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface Props {
     enabled: boolean,

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

@@ -1,22 +1,22 @@
 <template>
     <div v-if="!!kioskOrderSettingForm" class="flex flex-col gap-32">
         <div class="flex flex-col gap-2">
-            <span class="fm-typo-en-title-sm-600">Dine In</span>
+            <span class="fm-typo-en-title-sm-600">{{ t('order.dineIn') }}</span>
             <KioskDineInSection :key="'dine-in-' + restaurantId" :restaurant-id="restaurantId"
                 :is-apply-loading="isLoading" :get-setting="() => kioskOrderSettingForm!.dineIn"
                 @update-dine-in="updateDineInSetting" />
         </div>
         <div class="flex flex-col gap-2">
-            <span class="fm-typo-en-title-sm-600">Take Away</span>
+            <span class="fm-typo-en-title-sm-600">{{ t('order.takeawayTitle') }}</span>
             <KioskTakeawaySection :key="'takeaway-' + restaurantId" :restaurant-id="restaurantId"
                 :is-apply-loading="isLoading" :get-setting="() => kioskOrderSettingForm!.takeaway"
                 @update-takeaway="updateTakeawaySetting" />
         </div>
-        <FmButton class="w-1/4 mb-10" variant="primary" label="Update setting" :disabled="!validKioskOrderSetting"
+        <FmButton class="w-1/4 mb-10" variant="primary" :label="t('order.updateSetting')" :disabled="!validKioskOrderSetting"
             @click="submitForm" />
     </div>
     <div v-else>
-        Please select a restaurant.
+        {{ t('order.pleaseSelectRestaurant') }}
     </div>
 </template>
 <script setup lang="ts">
@@ -26,6 +26,9 @@ import KioskTakeawaySection from './KioskTakeawaySection.vue';
 import type { KioskDineInSettingForm, KioskTakeawaySettingForm, MfKioskOrderSetting, MfKioskOrderSettingForm, } from '@/modules/order-setting/kiosk/interface';
 import { useLoading } from '@/composables/loading';
 import { useSnackbar } from '@feedmepos/ui-library';
+import { useI18n } from '@feedmepos/mf-common';
+
+const { t } = useI18n();
 
 interface Props {
     restaurantId: string,
@@ -129,7 +132,7 @@ async function submitForm() {
         });
     } else {
         SnackBar.open({
-            title: 'Failed to update setting',
+            title: t('order.failedToUpdateSetting'),
             type: 'error',
         });
     }

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <FmSwitch v-model="form.enabled" label="Takeaway" label-placement="right"
+        <FmSwitch v-model="form.enabled" :label="t('order.takeaway')" label-placement="right"
             @update:model-value="updateTakeawaySetting" class="mb-5" />
     </div>
 </template>
@@ -8,6 +8,9 @@
 import type { KioskTakeawaySettingForm } from '@/modules/order-setting/kiosk/interface';
 import { ref, watch } from 'vue';
 import { ObjectUtil } from '@/utils/object';
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface Props {
     getSetting: () => KioskTakeawaySettingForm,

package/src/views/order-settings/OrderSettingsView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="py-[1.5rem]">
-    <FmPageHead title="Order Setting" />
+    <FmPageHead :title="t('order.orderSetting')"/>
     <div class="flex px-[1.5rem]">
       <div class="flex-[2_2_0%] overflow-auto">
         <FmTabs v-model:model-value="selectedOrderSetting" :items="settingItem" />
@@ -18,16 +18,20 @@ import DineInSetting from './dinein/DineInSetting.vue'
 import PickUpSetting from './pickup/PickUpSetting.vue'
 import SmsSetting from './sms/SmsSetting.vue'
 import ServiceChargeSetting from './servicecharge/ServiceChargeSetting.vue'
+import GeneralSetting from './general/GeneralSetting.vue'
+import { useI18n } from '@feedmepos/mf-common'
 
-type OrderSettingMenuItemValue = 'delivery' | 'pickup' | 'dinein' | 'servicecharge' | 'sms'
+const { t } = useI18n()
+type OrderSettingMenuItemValue = 'delivery' | 'pickup' | 'dinein' | 'servicecharge' | 'sms' | 'general'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
 const settingItem = computed<FmTabProps[]>(() => [
-  { label: 'Delivery', value: 'delivery' },
-  { label: 'Pickup', value: 'pickup' },
-  { label: 'Dine In', value: 'dinein' },
-  { label: 'Service Charge', value: 'servicecharge' },
-  { label: 'SMS', value: 'sms' }
+  { label: t('order.delivery'), value: 'delivery' },
+  { label: t('order.pickup'), value: 'pickup' },
+  { label: t('order.dineIn'), value: 'dinein' },
+  { label: t('order.serviceCharge'), value: 'servicecharge' },
+  { label: t('order.sms'), value: 'sms' },
+  { label: t('order.general'), value: 'general'},
 ])
 
 const currentComponent = computed(() => {
@@ -42,6 +46,8 @@ const currentComponent = computed(() => {
       return SmsSetting
     case 'servicecharge':
       return ServiceChargeSetting
+    case 'general': 
+      return GeneralSetting
   }
 })
 </script>

package/src/views/order-settings/components/RestaurantSelector.vue

@@ -5,7 +5,7 @@
         <FmIcon name="storefront" size="md" outline class="flex-shrink-0" />
         <div class="flex-grow mx-2 min-w-0">
           <span class="inline-block w-full break-words fm-typo-en-body-md-400">
-            {{ selectedRestaurant?.profile?.name ?? 'No Restaurant Selected' }}
+            {{ selectedRestaurant?.profile?.name ?? t('order.noRestaurantSelected') }}
           </span>
         </div>
         <FmIcon class="flex-shrink-0" :name="isOpen ? 'expand_less' : 'expand_more'"></FmIcon>
@@ -14,7 +14,7 @@
         class="absolute w-full mt-2 bg-white border border-gray-200 rounded-lg shadow-lg min-w-[350px] z-[9999]">
         <ul class="overflow-y-auto">
           <li class="mt-2 mx-2">
-            <FmSearch v-model="searchKey" placeholder="Search restaurants" />
+            <FmSearch v-model="searchKey" :placeholder="t('order.searchRestaurant')" />
           </li>
           <li v-for="(option, index) in filteredRestaurants" :key="index" class="p-3 hover:bg-gray-100 cursor-pointer"
             @click="selectOption(option)">
@@ -30,6 +30,9 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useCoreStore } from '@feedmepos/mf-common'
 import useSearch from '@/composables/search'
 import { FdoRestaurant } from '@feedmepos/core/entity'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface RestaurantItem {
   label: string,

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

@@ -4,13 +4,17 @@
       :model-value="currentRestaurant?._id ?? undefined"
       class="xs:order-2 xs:mb-3"
     />
-    <FmSearch v-model="searchKey" placeholder="Search" class="mx-5 xs:my-3 xs:order-1" />
+    <FmSearch
+      v-model="searchKey"
+      :placeholder="t('order.search')"
+      class="mx-5 xs:my-3 xs:order-1"
+    />
   </div>
   <div class="block">
     <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."
+      :title="`${t('order.integratedDeliveryCompany')}`"
+      :description="t('order.deliveryDescription')"
     />
     <div v-if="!isLoading">
       <DeliveryList
@@ -71,7 +75,6 @@
     <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"
     />
@@ -79,13 +82,13 @@
       <div class="flex gap-8 items-center justify-start">
         <FmButton
           variant="primary"
-          label="Save"
+          :label="t('order.save')"
           size="lg"
           @click="updateIntegratedDeliveryCompany"
         />
         <FmButton
           variant="secondary"
-          label="Cancel"
+          :label="t('order.cancel')"
           size="lg"
           @click="closeIntegratedDeliverySideSheet"
         />
@@ -96,8 +99,8 @@
   <div class="block">
     <FmPageHead
       class="flex-grow"
-      title="Local delivery company"
-      description="Activate the delivery companies to create new order at POS system."
+      :title="t('order.localDeliveryCompany')"
+      :description="t('order.localDeliveryDescription')"
     />
     <FmTable
       v-model="model"
@@ -118,7 +121,7 @@
 
   <div class="flex">
     <FmSideSheet
-      header="Update delivery company"
+      :header="t('order.updateDeliveryCompany')"
       dismiss-away
       :maxWidth="600"
       :model-value="sideSheet"
@@ -132,10 +135,15 @@
       />
       <template #side-sheet-footer>
         <div class="flex gap-8 items-center justify-start">
-          <FmButton variant="primary" label="Save" size="lg" @click="updateLocalDeliveryCompany" />
+          <FmButton
+            variant="primary"
+            :label="t('order.save')"
+            size="lg"
+            @click="updateLocalDeliveryCompany"
+          />
           <FmButton
             variant="secondary"
-            label="Cancel"
+            :label="t('order.cancel')"
             size="lg"
             @click="closeLocalDeliverySideSheet"
           />
@@ -163,7 +171,8 @@ import {
   F_DELIVERY_TYPE,
   F_FEATURE,
   F_ORDER_PLATFORM,
-  F_PAYOUT_ACCOUNT_STATUS
+  F_PAYOUT_ACCOUNT_STATUS,
+  F_RESTAURANT_FEATURE
 } from '@feedmepos/core/entity'
 import deliveryData from './delivery.data'
 import { useDelivery, type DeliveryCompany, type LinkedDeliveryDoc } from './delivery'
@@ -185,11 +194,14 @@ import { useSnackbarFunctions } from '@/components/snackbar'
 import useSearch from '@/composables/search'
 import DeliveryList from './DeliveryList.vue'
 import { Pos } from '@feedmepos/core'
+import { useI18n } from '@feedmepos/mf-common'
 
+const { t } = useI18n()
 const { searchKey, filter } = useSearch()
 const { showSuccess } = useSnackbarFunctions()
 const restaurantStore = useRestaurantStore()
-const { currentRestaurant, currentBusiness, readRestaurants, changeRestaurant } = useCoreStore()
+const { currentRestaurant, currentBusiness, readRestaurants, changeRestaurant, sessionUser } =
+  useCoreStore()
 const menuStore = useMenuStore()
 const linkedCompanies = ref<LinkedDeliveryDoc[]>([])
 const deliveryCompanies = ref<DeliveryCompany[]>([])
@@ -237,23 +249,23 @@ async function toggleIntegratedSidesheet(data: any) {
   sideSheetIntegrated.value = true
   switch (selectedIntegratedRow.value) {
     case AUTO_INTEGRATION_CLIENT.foodpanda:
-      title.value = 'Manage foodpanda delivery'
+      title.value = `${t('order.manageDelivery', { company: 'foodpanda' })}`
       updateIntegratedDeliveryType(rowData)
       break
     case AUTO_INTEGRATION_CLIENT.grabfood:
-      title.value = 'Manage grabfood delivery'
+      title.value = `${t('order.manageDelivery', { company: 'grabfood' })}`
       updateIntegratedDeliveryType(rowData)
       break
     case AUTO_INTEGRATION_CLIENT.shopeefood:
-      title.value = 'Manage shopeefood delivery'
+      title.value = `${t('order.manageDelivery', { company: 'shopeefood' })}`
       updateIntegratedDeliveryType(rowData)
       break
     case F_ORDER_PLATFORM.enum.FEEDME:
-      title.value = 'Update FeedMe express'
+      title.value = `${t('order.feedmeExpressTitle')}`
       updateFeedmeExpress(rowData)
       break
     case F_ORDER_PLATFORM.enum.IN_HOUSE:
-      title.value = 'Manage in-house delivery'
+      title.value = `${t('order.inhouseDeliveryTitle')}`
       updateInHouse(rowData)
       break
   }
@@ -276,8 +288,7 @@ const feedMeComponentProps = ref({
 
 const inHouseComponentProps = ref({
   key: '' as string,
-  initialValue: {} as InhouseDialogData,
-  allowEPayment: false as boolean | string
+  initialValue: {} as InhouseDialogData
 })
 
 function clearComponentProps() {
@@ -288,8 +299,7 @@ function clearComponentProps() {
 
   inHouseComponentProps.value = {
     key: '',
-    initialValue: {} as any,
-    allowEPayment: false
+    initialValue: {} as any
   }
 
   componentProps.value = {
@@ -334,31 +344,10 @@ async function updateFeedmeExpress({ key, setting }: IntegratedDeliveryRow) {
   }
 }
 
-function getRestaurantEPayment({ posVersion, payoutAccount }: FdoRestaurant): true | string {
-  const validPosVersion =
-    !!posVersion &&
-    Pos.canUse({
-      feature: F_FEATURE.enum.qrEPayment,
-      posVersion
-    })
-
-  if (!validPosVersion) return `For POS ${Pos.minVersionToUse(F_FEATURE.enum.qrEPayment)} or above`
-  if (!payoutAccount || !payoutAccount.enable) {
-    return 'Payout account is required';
-  }
-  if (payoutAccount.status !== F_PAYOUT_ACCOUNT_STATUS.enum.APPROVED) {
-    return 'Payout account under review';
-  }
-  return true;
-}
-
 async function updateInHouse({ key, setting }: IntegratedDeliveryRow) {
   clearComponentProps()
 
   const inhouseSetting = setting as FdoRestaurantInHouseDelivery
-  const allowEPayment = currentRestaurant.value
-    ? getRestaurantEPayment(currentRestaurant.value)
-    : false
 
   inHouseComponentProps.value = {
     key,
@@ -369,8 +358,7 @@ async function updateInHouse({ key, setting }: IntegratedDeliveryRow) {
       offlinePaymentTypes: inhouseSetting.offlinePaymentTypes || [],
       ignoreStock: inhouseSetting.ignoreStock || false,
       taxes: inhouseSetting.taxes || {}
-    },
-    allowEPayment
+    }
   }
 }
 
@@ -378,22 +366,22 @@ const { startAsyncCallWithErr, isLoading } = useLoading()
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: 'name',
-    header: () => 'Company',
+    header: () => `${t('order.company')}`,
     enableSorting: false
   },
   {
     accessorKey: 'catalog',
-    header: () => 'Catalog',
+    header: () => `${t('order.catalog')}`,
     enableSorting: false
   },
   {
     accessorKey: 'paymentType',
-    header: () => 'Payment Type',
+    header: () => `${t('order.paymentType')}`,
     enableSorting: false
   },
   {
     accessorKey: 'status',
-    header: () => 'Status',
+    header: () => `${t('order.status')}`,
     meta: {
       maxWidth: '50px'
     },
@@ -408,14 +396,14 @@ const columns: ColumnDef<any>[] = [
   }
 ]
 
-export type StatusType = 'Manual' | 'Active' | 'Inactive'
+export type StatusType = string
 const getClassForStatus = (enabled: StatusType): string => {
   switch (enabled) {
-    case 'Manual':
+    case `${t('order.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':
+    case `${t('order.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':
+    case `${t('order.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 ''
@@ -474,7 +462,7 @@ const localDeliveryCompanies = computed<DeliveryRow[]>(() => {
       key,
       name,
       paymentType: getPaymentType(payment),
-      status: !!doc ? ['Active'] : ['Inactive'],
+      status: !!doc ? [`${t('order.active')}`] : [`${t('order.inactive')}`],
       doc: company,
       catalog: getCatalog(doc?.catalogId || null)
     }
@@ -489,7 +477,25 @@ function getCatalog(catalogId: string | null) {
   return menuStore.catalogOptions.find(({ value }) => value === catalogId)?.label || ''
 }
 
-const canUseAutoDeliveryIntegration = (client: string) => true // Placeholder
+const reachMinPosVersion = computed<string | boolean>(() => {
+  const posVersion = currentRestaurant.value?.posVersion
+  if (!posVersion) return t('order.invalidPosVersion')
+  const res = Pos.canUse({ feature: F_FEATURE.enum.deliveryIntegration, posVersion })
+  return res === true ? true : res.toString()
+})
+
+function hasPurchaseFeature(deliveryType: string) {
+  const features = currentRestaurant.value?.features || []
+  const featureKey = equalKey(deliveryType, AUTO_INTEGRATION_CLIENT.foodpanda)
+    ? F_RESTAURANT_FEATURE.enum.foodpanda
+    : F_RESTAURANT_FEATURE.enum.deliveryIntegration
+  return features.includes(featureKey) || t('order.restaurantHaveNotPurchase', { featureKey })
+}
+
+function canUseAutoDeliveryIntegration(deliveryType: string) {
+  if (reachMinPosVersion.value !== true) return reachMinPosVersion.value
+  return hasPurchaseFeature(deliveryType)
+}
 
 const integratedCompanies = computed<IntegratedDeliveryRow[]>(() => {
   const fpManual = getLinkedDeliveryDoc(linkedCompanies.value, AUTO_INTEGRATION_CLIENT.foodpanda)
@@ -606,9 +612,17 @@ async function updateIntegratedDeliveryCompany(company: IntegratedDeliveryRow) {
 }
 
 const filteredCompanies = computed(() => {
-  return integratedCompanies.value.filter(({ name, paymentType, status }) =>
-    filter([name, paymentType, status.join(' ')])
-  )
+  return integratedCompanies.value
+    .filter(({ name, paymentType, status }) => filter([name, paymentType, status.join(' ')]))
+    .map((company) => {
+      const status = convertStatustoI18(company.status[0] as status)
+      const name = convertIntegratedCompanyName(company.name as companyName)
+      return {
+        ...company,
+        status,
+        name
+      }
+    })
 })
 
 const grabfoodSetting = ref<FdoGrabfoodSettings | null>(null)
@@ -821,6 +835,45 @@ function handleValidationResult(v: boolean) {
   feedmeValidate.value = v
 }
 
+type status = 'Manual' | 'Active' | 'Inactive'
+
+function convertStatustoI18(status: status): [string] {
+  switch (status) {
+    case 'Manual':
+      return [`${t('order.manual')}`]
+    case 'Active':
+      return [`${t('order.active')}`]
+    case 'Inactive':
+      return [`${t('order.inactive')}`]
+    default:
+      throw new Error('convertStatustoI18 - Invalid status ')
+  }
+}
+
+type companyName =
+  | 'In house delivery'
+  | 'FeedMe express'
+  | 'FoodPanda delivery'
+  | 'GrabFood delivery'
+  | 'ShopeeFood delivery'
+
+function convertIntegratedCompanyName(name: companyName): string {
+  switch (name) {
+    case 'In house delivery':
+      return `${t('order.deliveryTitle', { company: 'In House' })}`
+    case 'FeedMe express':
+      return `${t('order.feedMeExpress')}`
+    case 'FoodPanda delivery':
+      return `${t('order.deliveryTitle', { company: 'FoodPanda' })}`
+    case 'GrabFood delivery':
+      return `${t('order.deliveryTitle', { company: 'GrabFood' })}`
+    case 'ShopeeFood delivery':
+      return `${t('order.deliveryTitle', { company: 'ShopeeFood' })}`
+    default:
+      return ''
+  }
+}
+
 watch(
   () => currentRestaurant.value,
 
@@ -833,9 +886,9 @@ watch(
 )
 
 watch(
-  () => currentBusiness.value,
+  [() => currentBusiness.value, () => sessionUser.value],
   async (newBusiness) => {
-    if (newBusiness) {
+    if (newBusiness && sessionUser.value?.token) {
       await menuStore.readMenu()
     }
   },

package/src/views/order-settings/delivery/components/ManualIntegratedDeliverySetting.vue

@@ -2,6 +2,9 @@
 import { type PropType, computed, ref, watch } from 'vue'
 import type { DeliveryCompany } from '../delivery'
 import { F_PAYMENT_NAME, type FdoLinkedDelivery } from '@feedmepos/core/entity'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n() 
 
 interface LocalDeliverySettingData extends FdoLinkedDelivery {
   active: boolean
@@ -67,11 +70,11 @@ watch(
 const paymentTypeOptions = computed(() => {
   return [
     {
-      label: 'Default',
+      label: t('order.default'),
       value: props.company.paymentTypeKey
     },
     {
-      label: 'Cash',
+      label: t('order.cash'),
       value: F_PAYMENT_NAME.enum.CASH
     }
   ]
@@ -117,9 +120,9 @@ function updateCatalog(catalogId: string | null) {
     <FmSwitch
       :model-value="data.active"
       value="first"
-      label="Active manual integration"
+      :label="t('order.activateIntegration', {integrationType: t('order.manual')})"
       label-placement="right"
-      :sublabel="`POS system can add delivery order with ${data.name} company`"
+      :sublabel="t('order.integrationDescription', {name: data.name})"
       @update:model-value="updateActive"
     />
   </div>
@@ -128,13 +131,13 @@ function updateCatalog(catalogId: string | null) {
       <div class="mb-3">
         <FmSelect
           :model-value="data.catalogId"
-          label="Catalog"
+          :label="t('order.catalog')"
           :items="catalogOptions"
           @update:model-value="updateCatalog"
         />
       </div>
 
-      <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-7">Payment Type</div>
+      <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-7">{{ t('order.paymentType') }}</div>
       <div class="mb-3">
         <FmRadioGroup :model-value="data.paymentTypeKey" @update:model-value="updatePaymentType">
           <div v-for="option in paymentTypeOptions" :key="option.value">
@@ -143,11 +146,11 @@ function updateCatalog(catalogId: string | null) {
         </FmRadioGroup>
       </div>
 
-      <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-7">Order Setting</div>
+      <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-7">{{ t('order.orderSetting') }}</div>
       <FmCheckbox
         :model-value="data.rounding as boolean"
         value=""
-        label="Bill Rounding"
+        :label="t('order.billRounding')"
         @update:model-value="updateRounding"
       />
     </FmCard>