@feedmepos/mf-order-setting 0.0.13 → 0.0.14

package/src/locales/zh-CN.json

@@ -0,0 +1,235 @@
+{
+    "order": {
+        "integratedDeliveryCompany": "已对接配送平台",
+        "delivery": "配送",
+        "pickup": "自取",
+        "dineIn": "堂食",
+        "serviceCharge": "服务费",
+        "sms": "短信",
+        "deliveryDescription": "我们将以下配送服务与您的POS系统进行结合，让您能够更加快速且安全地将餐点送到客户手中。",
+        "search": "搜索",
+        "searchRestaurant": "搜索餐厅",
+        "noRestaurantSelected": "未选择餐厅",
+        "company": "平台",
+        "catalog": "目录",
+        "paymentType": "交易类型",
+        "status": "状态",
+        "manual": "手动",
+        "auto": "自动",
+        "active": "激活",
+        "inactive": "未激活",
+        "deliveryTitle": "{company} 配送",
+        "inHouseDelivery": "In house 配送",
+        "feedMeExpress": "FeedMe 外卖快递",
+        "localDeliveryCompany": "本地配送平台",
+        "localDeliveryDescription": "激活配送平台以在POS系统中创建新的订单。",
+        "activateDeliveryCompany": "激活{company}配送",
+        "inhouseSwitchSublabel": "通过POS系统接受In house配送",
+        "generalSetting": "通用设置",
+        "ignoreStock": "忽略库存",
+        "ignoreStockSublabel": "客户依然可以下单，即使商品缺货",
+        "deliveryTerm": "配送条款",
+        "taxSetting": "税务设置",
+        "taxSettingTerm": "（税务设置仅适用于{validatePosVersion}版本后的POS系统）",
+        "manageDelivery": "管理 {company} 配送",
+        "feedmeExpressTitle": "更新 Feedme 外卖快递",
+        "inhouseDeliveryTitle": "管理 in house 配送",
+        "inhouseDeliveryTaxLabel": "配送费附加税",
+        "inhouseDeliveryTaxSublabel": "通过POS系统接受In house配送",
+        "inhouseDeliveryInputLabel": "(仅在餐厅档案已设置SST时方可适用)",
+        "inhouseDeliveryTaxCalculation": "税务计算",
+        "taxInclusive": "含税",
+        "taxExclusive": "不含税",
+        "acceptedPayment": "可接受付款方式",
+        "offlinePayment": "线下支付",
+        "ePayment": "电子支付",
+        "cash": "现金",
+        "all": "所有",
+        "customOfflinePayment": "自定义线下付款方式",
+        "customOfflinePaymentHeader": "自定义线下付款方式",
+        "addOfflinePayment": "添加线下付款方式",
+        "addCustomPayment": "添加自定义付款方式",
+        "editOfflinePayment": "编辑线下支付方式",
+        "enterPaymentName": "输入付款名称",
+        "enterPaymentInstruction": "输入付款说明",
+        "general": "通用",
+        "instruction": "付款说明",
+        "offlinePaymentName": "付款名称",
+        "fieldCannotBeEmpty": "字段不可为空",
+        "orderType": "订单类型",
+        "orderFrom": "预订从",
+        "daysTo": "天到",
+        "days": "天",
+        "preOrderHint": "于今日 {today} 下单，客户可以在 {start} 和 {end} 之间预订。最多 7 天。",
+        "asap": "尽快配送",
+        "preOrder": "预订",
+        "deliveryTime": "配送时间",
+        "deliveryOrder": "配送订单",
+        "operatingHour": "营业时间",
+        "fixedTime": "固定时间",
+        "customTime": "自定义时间",
+        "timeSlot": "时间段",
+        "addTimeSlot": "添加时间段",
+        "monday": "星期一",
+        "tuesday": "星期二",
+        "wednesday": "星期三",
+        "thursday": "星期四",
+        "friday": "星期五",
+        "saturday": "星期六",
+        "sunday": "星期日",
+        "addDeliveryZone": "添加配送区域",
+        "save": "保存",
+        "cancel": "取消",
+        "deliveryFee": "配送费",
+        "minPurchase": "最低购买金额",
+        "minSpendForFreeDelivery": "免费配送的最低消费金额",
+        "deliveryZone": "配送区域",
+        "actiavteFeedmeExpress": "激活FeedMe外卖配送",
+        "activateFeedmeExpressSublabel": "客户可以选择FeedMe外卖快递来配送他们的餐点",
+        "generalInfo": "通用信息",
+        "term": "条款",
+        "deliveryInstruction": "配送说明",
+        "activateIntegration": "激活{integrationType}对接",
+        "integrationDescription": "POS系统可以添加与{name}公司合作的配送订单",
+        "default": "默认",
+        "orderSetting": "订单设置",
+        "billRounding": "账单四舍五入",
+        "remoteId": "平台注册ID",
+        "allowedAutoCloseBill": "允许自动结算账单",
+        "allowedAutoAcceptOrder": "允许自动接受订单",
+        "ignoreDiscount": "不适用折扣",
+        "sstInclusive": "包含SST",
+        "commission": "佣金",
+        "syncMenu": "同步菜单",
+        "selectItem": "请选择",
+        "processing": "处理中",
+        "success": "成功",
+        "failed": "失败",
+        "updatedAt": "更新于",
+        "lastSync": "上次同步",
+        "createTestOrder": "创建测试订单",
+        "create": "创建",
+        "updateDeliveryCompany": "更新配送公司",
+        "updatePickupSetting": "更新自取设置",
+        "restaurant": "餐厅",
+        "paymentMethod": "付款方式",
+        "online": "在线",
+        "pickupPoint": "自取地点",
+        "activated": "已激活",
+        "deactivated": "已停用",
+        "day": "天",
+        "to": "至",
+        "multiplePickupPoint": "多个取货地点",
+        "allowMultiplePickupSublabel": "允许客户在不同的取货地点自取，不限于餐厅",
+        "restaurantAsPickupPoint": "餐厅为取货地点",
+        "addPickupPoint": "添加取货地点",
+        "editPickupPoint": "编辑取货地点",
+        "name": "名称",
+        "address": "地址",
+        "enterName": "输入名称",
+        "enterAddress": "输入地址",
+        "add": "添加",
+        "apply": "应用",
+        "anonymousOrder": "匿名订单",
+        "anonymousOrderSublabel": "客户无需登录即可下单",
+        "staticQRcode": "静态二维码",
+        "staticQRcodeSublabel": "客户可以通过静态二维码下单",
+        "customerItemRemark": "客户商品备注",
+        "customerItemRemarkSublabel": "客户可以为商品添加备注",
+        "acceptQueue": "接受队列",
+        "acceptQueueSublabel": "客户可以在FeedMe应用中使用排队功能",
+        "saveSetting": "保存设置",
+        "enableServiceCharge": "启用服务费",
+        "serviceChargeSublabel": "根据不同的情况，如餐厅，就餐选项，商品，时间段等，自定义规则。",
+        "serviceChargeRule": "* 服务费功能仅适用于POS版本4.0.0或更高版本。",
+        "chargeWhen": "满足条件时收费",
+        "beforeBillDiscount": "账单折扣前",
+        "afterBillDiscount": "账单折扣后",
+        "rate": "费率",
+        "selectServiceChargeType": "选择服务费类型",
+        "inclusive": "包括",
+        "exclusive": "不包括",
+        "customServiceCharge": "自定义服务收费",
+        "delete": "删除",
+        "loadingMenu": "加载菜单",
+        "noAvailableItem": "无可用商品",
+        "table": "餐桌",
+        "item": "商品",
+        "loadingTable": "加载餐桌",
+        "noAvailableTable": "无可用餐桌",
+        "productSelected": "已选择商品",
+        "confirm": "确认",
+        "selectTable": "选择餐桌",
+        "tableSelected": "已选择餐桌",
+        "applyFor": "应用于",
+        "takeaway": "外带",
+        "deliveryCompany": "配送公司",
+        "addServiceCharge": "添加服务费",
+        "credit": "可用余额",
+        "balance": "余额",
+        "pricePerMessage": "每条短信的价格",
+        "setting": "设置",
+        "serve": "服务",
+        "accept": "接受",
+        "edit": "编辑",
+        "feedmeExpressPosVersionIssue": "需要最低{minVersion}版本的POS系统才能使用FeedMe外卖快递",
+        "feedmeExpressPayoutAccIssue": "需要设置支付账户才能启用FeedMe外卖快递",
+        "feedmeExpressNotApproved": "您的支付账户正在审核中，请联系我们的工作人员获取进一步的帮助。",
+        "invalidRestaurant": "无效的餐厅",
+        "contact": "联络",
+        "pleaseCompleteProfile": "请完善您的餐厅资料以启用FeedMe外卖快递",
+        "discountCampaign": "促销活动",
+        "addNewCampaign": "添加新的促销活动",
+        "addCampaign": "添加促销活动",
+        "vendorBearPercentage": "供应商承担百分比",
+        "enterANumber": "输入一个号码",
+        "kiosk": "自助点餐设备",
+        "deviceBinding": "设备绑定",
+        "bindDevice": "绑定设备",
+        "settings": "设置",
+        "activateLocation": "启用定位",
+        "selectRestaurant": "选择餐厅",
+        "kioskDisplay": "自助点餐设备显示",
+        "kioskDisplayDescription": "点击“绑定设备”以获取绑定设备的专用代码",
+        "activatedDate": "激活日期",
+        "deviceDetails": "设备详情",
+        "unbind": "解除绑定",
+        "unbindKioskDevice": "解除自助点餐设备绑定",
+        "unbindKioskDeviceWarning": "你确定要解除绑定设备吗？如果是，请在文本框中输入{machineId}",
+        "unbindSuccess": "自助点餐设备成功解除绑定",
+        "unbindWarning": "请输入设备ID以确认解除绑定",
+        "bindDeviceMessage": "请输入此代码到您的自助点餐设备以进行绑定",
+        "kioskSummary": "自助点餐设备概览",
+        "dineInType": "堂食类型",
+        "tableService": "餐桌服务",
+        "pickAtCounter": "在柜台取餐",
+        "unknown": "未知",
+        "kioskSettingSuccess": "自助点餐设备订单设置更新成功",
+        "kioskSettingFailed": "自助点餐设备订单设置更新失败",
+        "displayStand": "桌牌",
+        "tableServiceSetting": "餐桌服务设置",
+        "prefix": "前缀",
+        "start": "开始",
+        "end": "结束",
+        "nonNegativeRule": "该值必须为正数",
+        "greaterThanMinRule": "最大值应大于等于最小值",
+        "padDigit": "位数",
+        "takeawayTitle": "外带",
+        "updateSetting": "更新设置",
+        "pleaseSelectRestaurant": "请选择一个餐厅",
+        "failedToUpdateSetting": "设置更新失败",
+        "updatePayoutAccount": "更新支付账户",
+        "updateNow": "立即更新",
+        "autoIntegration": "自动对接",
+        "autoIntegrationWarning": "自动配送对接不可用， 请联络我们的工作人员了解更多信息。 原因: {reason}",
+        "restaurantHaveNotPurchase": "餐厅尚未购买{featureKey}功能",
+        "invalidPosVersion": "POS版本不适用",
+        "notAllowed": "没有权限",
+        "autoSendKitchen": "自动发送至厨房",
+        "promptAnonymousLoginDialog": "为匿名用户弹出登入对话框",
+        "autoSendKitchenSublabel": "需要POS版本7或以上",
+        "payoutAccountIsRequired": "需要支付账户",
+        "c": "支付账户正在审查中",
+        "payoutPosVersion": "需要POS{version}或以上 "
+    }
+}

package/src/main.ts

@@ -10,14 +10,36 @@ import { AuthApi } from './api/auth'
 import { getAuth, signInWithCustomToken } from 'firebase/auth'
 import { initializeApp } from 'firebase/app'
 import { useIframeStore } from './stores/iframe'
+import { createFeedMeI18n, type I18n, detectLocale } from "@feedmepos/mf-common"
+import enUS from "./locales/en-US.json"
+import zhCN from "./locales/zh-CN.json"
+
+export const i18nMessages = {
+    "en-US": enUS,
+    "zh-CN": zhCN
+}
+
+function initI18n(): I18n {
+    const i18n = createFeedMeI18n({
+        locale: detectLocale(),
+        messages: i18nMessages,
+    })
+    return i18n
+}
+
 
 const app = createApp(Entry)
 
+app.use(initI18n())
 app.use(createPinia())
 app.use(router)
 
 
-app.use(FeedMeUI);
+
+app.use(FeedMeUI, {
+    locale: detectLocale(),
+})
+
 const CoreStore = useCoreStore();
 const iframeMode = computed(() => {
     return new URLSearchParams(window.location.search).get('iframe') === 'true';

package/src/stores/restaurant/index.ts

@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia'
 import { restaurantApi, type RestaurantSettingDoc } from '@/api/restaurant-setting'
 import {
+  F_FEATURE,
+  F_PAYOUT_ACCOUNT_STATUS,
   FdoFoodpandaSettings,
   FdoRestaurantDineIn,
   FdoRestaurantFeedmeDelivery,
@@ -13,9 +15,11 @@ import {
   type FdoRestaurant
 } from '@feedmepos/core/entity'
 import { FdoGrabfoodSettings } from '@entity'
-import { FeatureFlag } from '@feedmepos/core'
+import { FeatureFlag, Pos } from '@feedmepos/core'
 import { SvcConfig } from '@/api'
 import { remoteOrderApi } from '@/api/remoteOrder'
+import { useI18n } from '@feedmepos/mf-common'
+
 
 export interface Profile extends FdoProfile {
   address: Address
@@ -62,8 +66,9 @@ export const useRestaurantStore = defineStore('restaurant', {
     return initRestaurantState()
   },
   getters: {
-    currentRestaurant: (state) => state.businessRestaurants.find((r) => r.id === state.currentRestaurantId),
-    currentRestaurantSetting: (state) => state.restaurantSettings[state.currentRestaurantId || ''],
+    currentRestaurant: (state) =>
+      state.businessRestaurants.find((r) => r.id === state.currentRestaurantId),
+    currentRestaurantSetting: (state) => state.restaurantSettings[state.currentRestaurantId || '']
   },
   actions: {
     async readRestaurantSetting(restaurantId: string) {
@@ -106,6 +111,29 @@ export const useRestaurantStore = defineStore('restaurant', {
     },
     async updateIntegratedShopeefoodDelivery(restaurantId: string, dto: FdoShopeeFoodSettings) {
       await remoteOrderApi.integratedDelivery.updateShopeefood(restaurantId, dto)
+    },
+    getRestaurantEPayment(dto?: FdoRestaurant | undefined): true | string {
+      const { t } = useI18n()
+      if (!dto) {
+        return 'getRestaurantEPayment - Invalid restaurant ';
+      }
+      const { payoutAccount, posVersion } = dto;
+      const validPosVersion =
+        !!posVersion &&
+        Pos.canUse({
+          feature: F_FEATURE.enum.qrEPayment,
+          posVersion
+        })
+
+      if (!validPosVersion)
+        return t('order.payoutPosVersion', {version: Pos.minVersionToUse(F_FEATURE.enum.qrEPayment)})
+      if (!payoutAccount || !payoutAccount.enable) {
+        return t('order.payoutAccountIsRequired')
+      }
+      if (payoutAccount.status !== F_PAYOUT_ACCOUNT_STATUS.enum.APPROVED) {
+        return t('order.payoutAccountIsRequired')
+      }
+      return true
     }
   }
 })

package/src/stores/table-settings.ts

@@ -72,11 +72,6 @@ export const useTableSettingStore = defineStore('tableSetting', {
       }
       else if (settings.enableV3) {
         this.tables = [
-          {
-            _id: '',
-            name: '#Takeaway',
-            qrLink: `${appEndpoint.customerV3App}/dine?seat=_TA_&id=${settings._id}`,
-          },
           ...resp,
         ];
       }

package/src/views/kiosk/KioskSummary.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="p-[1.5rem] border fm-corner-radius-lg flex flex-col gap-5">
-    <span class="fm-typo-en-title-sm-600">Kiosk Summary</span>
+    <span class="fm-typo-en-title-sm-600">{{ t('order.kioskSummary') }}</span>
     <hr 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">Kiosk Display</span>
+        <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ t('order.kioskDisplay') }}</span>
 
         <div class="fm-typo-en-body-lg-600">
           <div v-if="devices.length > 0">
@@ -13,22 +13,22 @@
           <div v-else>-</div>
         </div>
 
-        <div v-if="dineInStatus === 'Activated'">
-          <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Dine In</span>
+        <div v-if="dineInStatus === t('order.activated')">
+          <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ t('order.dineIn') }}</span>
           <div class="fm-typo-en-body-lg-600 block">
             <div>{{ dineInStatus }}</div>
           </div>
         </div>
 
-        <div v-if="dineInStatus === 'Activated' && dineInType !== 'Unknown'">
-          <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Dine In Type</span>
+        <div v-if="dineInStatus === t('order.activated') && dineInType !== t('order.unknown')">
+          <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ t('order.dineInType') }}</span>
           <div class="fm-typo-en-body-lg-600 block">
             <div>{{ dineInType }}</div>
           </div>
         </div>
 
-        <div v-if="takeAwayStatus === 'Activated'">
-          <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Take Away</span>
+        <div v-if="takeAwayStatus === t('order.activated')">
+          <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ t('order.takeaway') }}</span>
           <div class="fm-typo-en-body-lg-600 block">
             <div>{{ takeAwayStatus }}</div>
           </div>
@@ -44,6 +44,9 @@
 import type { MfKioskDevice } from '@/modules/kiosk/interface';
 import type { MfKioskOrderSetting } from '@/modules/order-setting/kiosk/interface';
 import { computed } from 'vue'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface Props {
   restaurantId: string,
@@ -54,20 +57,20 @@ interface Props {
 const props = defineProps<Props>();
 
 const dineInStatus = computed<string>(() => {
-  return props.kioskOrderSetting?.dineIn.enabled ? 'Activated' : 'Deactivated';
+  return props.kioskOrderSetting?.dineIn.enabled ? t('order.activated') : t('order.deactivated');
 });
 
 const takeAwayStatus = computed<string>(() => {
-  return props.kioskOrderSetting?.takeaway.enabled ? 'Activated' : 'Deactivated';
+  return props.kioskOrderSetting?.takeaway.enabled ? t('order.activated') : t('order.deactivated');
 });
 
 const dineInType = computed<string>(() => {
   if (props.kioskOrderSetting?.dineIn.displayStand) {
-    return 'Table Service'
+    return t('order.tableService')
   } else if (props.kioskOrderSetting?.dineIn && !props.kioskOrderSetting.dineIn.displayStand) {
-    return 'Pick at counter'
+    return t('order.pickAtCounter')
   } else {
-    return 'Unknown'
+    return t('order.unknown')
   }
 });
 

package/src/views/kiosk/KioskView.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="py-[1.5rem]">
-        <FmPageHead title="Kiosk" />
+        <FmPageHead :title="t('order.kiosk')" />
         <div class="flex px-[1.5rem]">
             <div class="flex-[2_2_0%]">
                 <FmTabs v-model:model-value="selectedMenuItem" :items="menuItems"></FmTabs>
                 <div class="pt-[1.5rem]">
                     <div class="flex flex-col gap-10">
                         <div class="flex flex-col gap-2">
-                            <span class="fm-typo-en-title-sm-600"> Activate location </span>
-                            <span class="fm-typo-en-title-sm-400"> Select Restaurant: </span>
-                            <FmSelect class="w-1/2" v-model="currentSelect" :items="restaurantItems"
+                            <span class="fm-typo-en-title-sm-600"> {{ t('order.activateLocation') }} </span>
+                            <span class="fm-typo-en-title-sm-400"> {{ t('order.selectRestaurant') }}: </span>
+                            <FmSelect class="w-1/2" v-model="currentSelect" :items="restaurantItems" :placeholder="t('order.selectItem')"
                                 @update:model-value="selectRestaurant" />
                         </div>
                         <KioskDevicesView v-if="selectedMenuItem == 'device'" :devices="devices"
@@ -36,10 +36,13 @@ import { ref, computed, defineAsyncComponent, watch } from 'vue';
 import { useKioskStore } from '@/stores/kiosk';
 import type { MfKioskDevice } from "@/modules/kiosk/interface";
 import KioskOtpDialog from "@/views/kiosk/devices/KioskOtpDialog.vue";
-import { useCoreStore } from "@feedmepos/mf-common";
+import { useCoreStore, useI18n } from "@feedmepos/mf-common";
 import { useOrderSettings } from '@/stores/order-setting';
 import type { MfKioskOrderSetting } from '@/modules/order-setting/kiosk/interface';
 import { defaultKioskOrderSetting } from '@/stores/order-setting/mapper';
+import { capitalCase } from 'change-case';
+
+const { t } = useI18n();
 
 type KioskMenuItemValue = "device" | "setting";
 
@@ -75,11 +78,11 @@ async function selectRestaurant(v: string) {
 
 const menuItems = computed<FmTabProps[]>(() => [
     {
-        label: 'Device Binding',
+        label: t('order.deviceBinding'),
         value: 'device',
     },
     {
-        label: 'Settings',
+        label: t('order.settings'),
         value: 'setting',
     }
 ]);
@@ -91,7 +94,7 @@ const devices = computed<MfKioskDevice[]>(() => {
 async function requestOtp() {
     await KioskStore.requestOtp();
     Dialog.open({
-        title: "Bind Device",
+        title: capitalCase(t('order.bindDevice')),
         contentComponent: KioskOtpDialog,
         contentComponentProps: {
             otp: KioskStore.state.otp,
@@ -104,12 +107,12 @@ async function updateKioskOrderSetting(form: MfKioskOrderSetting) {
         OrderSettingStore.setKioskOrderSetting(form);
         await OrderSettingStore.updateKioskSetting();
         SnackBar.open({
-            title: 'Kiosk order setting updated',
+            title: t('order.kioskSettingSuccess'),
             type: 'success',
         });
     } catch (e) {
         SnackBar.open({
-            title: 'Failed to update kiosk order setting',
+            title: t('order.kioskSettingFailed'),
             type: 'error',
         });
     }

package/src/views/kiosk/devices/KioskDeviceCard.vue

@@ -1,10 +1,10 @@
 <template>
 
     <div class="border fm-corner-radius-lg flex justify-between pr-[1rem] w-11/12">
-        <FmSideSheet header="Device Details" dismiss-away class="w-full" :maxWidth="700">
+        <FmSideSheet :header="t('order.deviceDetails')" dismiss-away class="w-full" :maxWidth="700">
             <template #side-sheet-button>
                 <FmListItem class="flex-1" :label="device.name"
-                    :sublabel="`Activated date: ${dayjs(device.activatedAt).format('DD MMM YYYY HH:mm')}`">
+                    :sublabel="`${t('order.activatedDate')}: ${dayjs(device.activatedAt).format('DD MMM YYYY HH:mm')}`">
                 </FmListItem>
             </template>
             <div class="py-[1rem] flex flex-col gap-6">
@@ -32,6 +32,9 @@ import KioskUnbindConfirm from './KioskUnbindConfirm.vue';
 import { computed, ref } from 'vue';
 import { useKioskStore } from '@/stores/kiosk';
 import dayjs from 'dayjs';
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const Dialog = useDialog();
 const Snackbar = useSnackbar();
@@ -60,7 +63,7 @@ const configs = computed(() => {
 function openUnbindDialog() {
     unBindTextFieldValue.value = '';
     Dialog.open({
-        title: "Unbind Kiosk Device",
+        title: t('order.unbindKioskDevice'),
         contentComponent: KioskUnbindConfirm,
         contentComponentProps: {
             machineId: props.device.machineId,
@@ -70,12 +73,12 @@ function openUnbindDialog() {
         },
         dismissAway: false,
         primaryActions: {
-            text: 'Unbind',
+            text: t('order.unbind'),
             variant: 'destructive',
             close: false,
         },
         secondaryActions: {
-            text: 'Cancel',
+            text: t('order.cancel'),
             variant: 'tertiary',
             close: true,
         }
@@ -84,14 +87,14 @@ function openUnbindDialog() {
             await unbind();
             Snackbar.open({
                 type: 'success',
-                message: 'Kiosk display successfully unbinded.',
+                message: t('order.unbindSuccess'),
                 position: 'bottom' as SnackbarPosition,
             });
             Dialog.close();
         } else {
             Snackbar.open({
                 type: 'warning',
-                message: 'Please enter the machine ID to confirm unbind.',
+                message: t('order.unbindWarning'),
                 position: 'bottom' as SnackbarPosition,
 
             });

package/src/views/kiosk/devices/KioskDevicesView.vue

@@ -2,14 +2,13 @@
     <div>
         <div class="flex flex-col gap-2">
             <div class="flex flex-col gap-2">
-                <span class="fm-typo-en-title-sm-600 block"> Kiosk Display </span>
-                <span class="fm-typo-en-body-md-400 block">Click "Bind device" to receive a special code for device
-                    binding.</span>
+                <span class="fm-typo-en-title-sm-600 block"> {{ t('order.kioskDisplay') }} </span>
+                <span class="fm-typo-en-body-md-400 block"> {{ t('order.kioskDisplayDescription') }} </span>
             </div>
             <div class="flex flex-col gap-6">
                 <KioskDeviceCard v-for="device in devices" :key="device.machineId" :device="device"></KioskDeviceCard>
                 <FmButton variant="plain" class="w-[10rem] border border-fm-color-primary fm-corner-radius-lg"
-                    label="Bind device" size="md" prepend-icon="link" @click="requestOtp" />
+                    :label="t('order.bindDevice')" size="md" prepend-icon="link" @click="requestOtp" />
             </div>
         </div>
     </div>
@@ -17,6 +16,9 @@
 <script setup lang="ts">
 import KioskDeviceCard from "./KioskDeviceCard.vue";
 import type { MfKioskDevice } from "@/modules/kiosk/interface";
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n();
 
 interface Props {
     devices: MfKioskDevice[],

package/src/views/kiosk/devices/KioskOtpDialog.vue

@@ -1,11 +1,14 @@
 <template>
     <div class="flex flex-col gap-5 pb-6">
         <!--Show otp here-->
-        <span class="fm-typo-en-body-md-400 block">Enter this code to your kiosk device to bind.</span>
+        <span class="fm-typo-en-body-md-400 block">{{ t('order.bindDeviceMessage') }}</span>
         <div class="fm-typo-en-title-md-600">{{ otp }}</div>
     </div>
 </template>
 <script setup lang="ts">
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface Props {
     otp: string

package/src/views/kiosk/devices/KioskUnbindConfirm.vue

@@ -1,12 +1,14 @@
 <template>
     <div>
-        <span>Are you sure want to unbind device? If yes, please enter {{ machineId }} inside the textfield</span>
+        <span>{{ t('order.unbindKioskDeviceWarning', {machineId}) }}</span>
         <FmTextField :model-value="modelValue" @update:model-value="updateModelValue" :placeholder="machineId"></FmTextField>
     </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useI18n } from '@feedmepos/mf-common'
 
+const { t } = useI18n()
 
 interface Props{
     machineId: string,

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,