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

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">

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

@@ -6,6 +6,9 @@ import type { DeliveryCompany } from '../delivery'
 import { useMenuStore } from '@/stores/menu/menu'
 import ManualIntegratedDeliverySetting from '../components/ManualIntegratedDeliverySetting.vue'
 import { useCoreStore } from '@feedmepos/mf-common'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 export interface AutoIntegrateData {
   enable: boolean
@@ -42,7 +45,6 @@ const props = defineProps({
   }
 })
 
-
 const emits = defineEmits<{
   (event: 'update:model-value', v: IntegratedDeliverySettingData): void
   (event: 'syncMenu'): void
@@ -134,26 +136,26 @@ const orderSettingOptions = computed<
     label: string
     value: OrderSettingKey
   }[] = [
-      {
-        label: 'Allowed auto close bill',
-        value: 'autoCloseBill'
-      }
-    ]
+    {
+      label: t('order.allowedAutoCloseBill'),
+      value: 'autoCloseBill'
+    }
+  ]
   if (props.modelValue.auto.autoAccept !== undefined) {
     options.unshift({
-      label: 'Allowed auto accept order',
+      label: t('order.allowedAutoAcceptOrder'),
       value: 'autoAcceptOrder'
     })
   }
   if (props.modelValue.auto.autoAccept !== undefined) {
     options.push({
-      label: 'Ignore Discount',
+      label: t('order.ignoreDiscount'),
       value: 'ignoreDiscount'
     })
   }
   if (props.modelValue.auto.sstInclusive !== undefined) {
     options.push({
-      label: 'SST Inclusive',
+      label: t('order.sstInclusive'),
       value: 'sstInclusive'
     })
   }
@@ -169,63 +171,103 @@ function updateOrderSettings(orderSettingKeys: OrderSettingKey[]) {
     sstInclusive: orderSettingKeys.includes('sstInclusive')
   }))
 }
+
+function convertStatusI18n(status: string) {
+  switch (status) {
+    case 'PROCESSING':
+      return t('order.processing')
+    case 'SUCCESS':
+      return t('order.success')
+    case 'FAILED':
+      return t('order.failed')
+  }
+}
 </script>
 
 <template>
-  <ManualIntegratedDeliverySetting :model-value="modelValue.manual" :company="company"
-    :catalog-options="menuStore.catalogOptions" @update:model-value="updateManual" />
-  <div class="mt-10">
-    <FmSwitch :model-value="modelValue.auto.enable" label="Active auto integration" label-placement="right"
-      @update:model-value="updateActive" />
+  <ManualIntegratedDeliverySetting
+    :model-value="modelValue.manual"
+    :company="company"
+    :catalog-options="menuStore.catalogOptions"
+    @update:model-value="updateManual"
+  />
+  <div v-if="canUseAutoDeliveryIntegration === true" class="mt-10">
+    <FmSwitch
+      :model-value="modelValue.auto.enable"
+      :label="t('order.activateIntegration', { integrationType: t('order.auto') })"
+      label-placement="right"
+      @update:model-value="updateActive"
+    />
     <!-- //disabled can edit -->
-    <div v-if="canUseAutoDeliveryIntegration === true && modelValue.auto.enable">
+    <div v-if="modelValue.auto.enable">
       <FmCard variant="outlined" class="mt-10 p-5">
-        <div class="flex-grow fm-typo-en-title-sm-600 mb-5">Integration</div>
-
-        <FmTextField :model-value="modelValue.auto.integrationId" label="Remote ID"
-          @update:model-value="updateIntegrateId" />
+        <FmTextField
+          :model-value="modelValue.auto.integrationId"
+          :label="t('order.remoteId')"
+          @update:model-value="updateIntegrateId"
+        />
         <div class="mb-5">
-          <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>
 
           <div v-for="(item, index) in orderSettingOptions" :key="index" class="flex flex-col">
-            <FmCheckbox :model-value="orderSettingValue" :label="item.label" :value="item.value"
-              @update:model-value="updateOrderSettings" />
+            <FmCheckbox
+              :model-value="orderSettingValue"
+              :label="item.label"
+              :value="item.value"
+              @update:model-value="updateOrderSettings"
+            />
           </div>
         </div>
 
         <div class="mb-5">
-          <FmTextField :model-value="modelValue.auto.commissionRate" label="Commission"
-            @update:model-value="updateCommission">
+          <FmTextField
+            :model-value="modelValue.auto.commissionRate"
+            :label="t('order.commission')"
+            @update:model-value="updateCommission"
+          >
             <template #append>%</template>
           </FmTextField>
         </div>
         <div class="mb-3">
-          <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-7">Sync Menu</div>
-          <FmSelect :model-value="modelValue.auto.catalogId" label="Catalog" :items="menuStore.catalogOptions"
-            @update:model-value="updateMenuCatalog" />
+          <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-7">{{ t('order.syncMenu') }}</div>
+          <FmSelect
+            :placeholder="t('order.selectItem')"
+            :model-value="modelValue.auto.catalogId"
+            :label="t('order.catalog')"
+            :items="menuStore.catalogOptions"
+            @update:model-value="updateMenuCatalog"
+          />
         </div>
 
         <div class="text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400 mb-5 mt-5">
           <div class="flex flex-row">
             <div v-if="modelValue.auto.status" class="mr-4">
-              Status: {{ modelValue.auto.status }}
+              {{ t('order.status') }}: {{ convertStatusI18n(modelValue.auto.status) }}
             </div>
-            <FmTooltip v-if="modelValue.auto.status === 'FAILED' && modelValue.auto.menuSyncError !== null"
-              :content="modelValue.auto.menuSyncError" :zIndex="1000">
+            <FmTooltip
+              v-if="modelValue.auto.status === 'FAILED' && modelValue.auto.menuSyncError !== null"
+              :content="modelValue.auto.menuSyncError"
+              :zIndex="1000"
+            >
               <FmIcon name="info" size="sm" />
             </FmTooltip>
           </div>
 
           <div v-if="modelValue.auto.updatedAt">
-            Updated at: {{ Day(modelValue.auto.updatedAt).format('DD/MM/YYYY hh:mm a') }}
+            {{ t('order.updatedAt') }}:
+            {{ Day(modelValue.auto.updatedAt).format('DD/MM/YYYY hh:mm a') }}
           </div>
         </div>
         <div class="flex flex-row">
-          <FmButton variant="primary" label="Sync Menu" @click="emits('syncMenu')" />
+          <FmButton variant="primary" :label="t('order.syncMenu')" @click="emits('syncMenu')" />
 
-          <div v-if="modelValue.auto.lastSynchronize"
-            class="m-2 ml-10 text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400">
-            Last synchronize:
+          <div
+            v-if="modelValue.auto.lastSynchronize"
+            class="m-2 ml-10 text-fm-color-neutral-gray-400 fm-typo-cn-body-md-400"
+          >
+            {{ t('order.lastSync') }}:
             {{ Day(modelValue.auto.lastSynchronize).format('DD/MM/YYYY hh:mm a') }}
           </div>
         </div>
@@ -233,11 +275,27 @@ function updateOrderSettings(orderSettingKeys: OrderSettingKey[]) {
         <slot :editable="canEdit" />
       </FmCard>
     </div>
-    <div class="flex flex-row mt-5" v-if="canUseAutoDeliveryIntegration && canEdit">
-      <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-5">Flow Test Order</div>
-
-      <FmButton variant="primary" label="Flow" @click="emits('flowTestOrder')" class="m-1" />
-      <FmButton variant="primary" label="Cancel" @click="emits('cancelTestOrder')" class="m-1" />
-    </div>
+  </div>
+  <div v-else class="mt-10">
+    <FmSnackbar
+      :title="`${t('order.autoIntegration')}`"
+      :description="`${t('order.autoIntegrationWarning', { reason: canUseAutoDeliveryIntegration })}`"
+      variant="warning"
+    />
+  </div>
+  <div class="flex flex-row mt-5" v-if="canUseAutoDeliveryIntegration === true && canEdit">
+    <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-5">{{ t('order.createTestOrder') }}</div>
+    <FmButton
+      variant="primary"
+      :label="t('order.create')"
+      @click="emits('flowTestOrder')"
+      class="m-1"
+    />
+    <FmButton
+      variant="primary"
+      :label="t('order.cancel')"
+      @click="emits('cancelTestOrder')"
+      class="m-1"
+    />
   </div>
 </template>

package/src/views/order-settings/dinein/DineInSetting.vue

@@ -4,17 +4,17 @@
   </div>
   <div v-if="!isLoading">
     <div class="p-[1.5rem] flex flex-col gap-5 m-5 w-2/3">
-      <div class="flex-grow fm-typo-en-title-sm-600">General Setting</div>
-      <FmSwitch v-model="dineInSetting.anonymousOrder" value="anonymousOrder" label="Anonymous Order"
-        sublabel="Customer can order without login" label-placement="right" />
-      <FmSwitch v-model="dineInSetting.ignoreStock as boolean" value="ignoreStock" label="Ignore stock"
-        sublabel="Product can be order even out of stock" label-placement="right" />
-      <FmSwitch v-model="dineInSetting.staticQr as boolean" value="staticQr" label="Static QR code"
-        sublabel="Customer can order with static QR code" label-placement="right" />
-      <FmSwitch v-model="disableItemRemarkNegated" value="disableItemRemark" label="Customer item remark"
-        sublabel="Customer can attach remark to item" label-placement="right" />
-      <FmSwitch v-model="dineInSetting.acceptQueue as boolean" value="acceptQueue" label="Accept queue"
-        sublabel="Customer can use queue in FeedMe app" label-placement="right" />
+      <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.generalSetting') }}</div>
+      <FmSwitch v-model="dineInSetting.anonymousOrder" value="anonymousOrder" :label="t('order.anonymousOrder')"
+        :sublabel="t('order.anonymousOrderSublabel')" label-placement="right" />
+      <FmSwitch v-model="dineInSetting.ignoreStock as boolean" value="ignoreStock" :label="t('order.ignoreStock')"
+        :sublabel="t('order.ignoreStockSublabel')" label-placement="right" />
+      <FmSwitch v-model="dineInSetting.staticQr as boolean" value="staticQr" :label="t('order.staticQRcode')"
+        :sublabel="t('order.staticQRcodeSublabel')" label-placement="right" />
+      <FmSwitch v-model="disableItemRemarkNegated" value="disableItemRemark" :label="t('order.customerItemRemark')"
+        :sublabel="t('order.customerItemRemarkSublabel')" label-placement="right" />
+      <FmSwitch v-model="dineInSetting.acceptQueue as boolean" value="acceptQueue" :label="t('order.acceptQueue')"
+        :sublabel="t('order.acceptQueueSublabel')" label-placement="right" />
     </div>
     <div class="p-[1.5rem] flex flex-col gap-2 m-5 w-2/3">
       <PaymentType :payment-types="dineInSetting.paymentTypes ?? []" :allow-e-payment="allowEPayment"
@@ -24,7 +24,7 @@
           " />
     </div>
     <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
-      <FmButton variant="primary" label="Save Setting" class="mr-auto" @click="updateDineInSetting" />
+      <FmButton variant="primary" :label="t('order.saveSetting')" class="mr-auto" @click="updateDineInSetting" />
     </div>
   </div>
   <FmCircularProgress size="xxl" v-else />
@@ -44,6 +44,9 @@ import { useLoading } from '@/composables/loading'
 import { useCoreStore } from '@feedmepos/mf-common'
 import PaymentType from './PaymentType.vue'
 import { utils } from '@feedmepos/core'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const { currentRestaurant } = useCoreStore()
 const dineInSetting = ref<FdoRestaurantDineIn>(initDineInSetting())

package/src/views/order-settings/dinein/OfflinePaymentTypeDialog.vue

@@ -3,6 +3,9 @@ import { useDialog } from '@feedmepos/ui-library'
 import { ref } from 'vue'
 import OfflinePaymentTypeDialogContent from './OfflinePaymentTypeDialogContent.vue'
 import type { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const dialog = useDialog()
 const nameTextValue = ref<string>('')
@@ -12,11 +15,11 @@ const openDialog = () => {
   instructionTextValue.value = ''
   dialog
     .open({
-      title: 'Add custom payment',
+      title: t('order.addCustomPayment'),
       contentComponent: OfflinePaymentTypeDialogContent,
       contentComponentProps: {
-        name: 'Name',
-        instruction: 'Instruction',
+        name: t('order.name'),
+        instruction: t('order.instruction'),
         'onUpdate:nameValue': (v: string) => {
           nameTextValue.value = v
         },
@@ -24,8 +27,8 @@ const openDialog = () => {
           instructionTextValue.value = v
         }
       },
-      primaryActions: { text: 'Add', close: true },
-      secondaryActions: { text: 'Cancel', close: true }
+      primaryActions: { text: t('order.add'), close: true },
+      secondaryActions: { text: t('order.cancel'), close: true }
     })
     .onPrimary(async () => {
       const newPaymentType = {
@@ -47,5 +50,5 @@ const emits = defineEmits<{
 </script>
 
 <template>
-  <FmButton label="Edit offline payment" @click="openDialog" variant="plain" />
+  <FmButton :label="t('order.editOfflinePayment')" @click="openDialog" variant="plain" />
 </template>

package/src/views/order-settings/dinein/OfflinePaymentTypeDialogContent.vue

@@ -4,8 +4,8 @@
     <FmTextField
       :model-value="modelValue"
       @update:model-value="updateNameValue"
-      placeholder="Enter payment name"
-      :rules="[(val) => !!val || 'Field cannot be empty']"
+      :placeholder="t('order.enterPaymentName')"
+      :rules="[(val) => !!val || t('order.fieldCannotBeEmpty')]"
     ></FmTextField>
 
     <div class="mb-12"></div>
@@ -13,12 +13,15 @@
     <FmTextarea
       :model-value="modelValue"
       @update:model-value="updateInstructionValue"
-      placeholder="Enter payment instruction"
+      :placeholder="t('order.enterPaymentInstruction')"
     ></FmTextarea>
   </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface Emits {
   (e: 'update:nameValue', v: string): void

package/src/views/order-settings/dinein/PaymentType.vue

@@ -2,7 +2,10 @@
 import { F_ORDER_PAYMENT_TYPE, FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
 import { type PropType, computed, onMounted, ref, watch } from 'vue'
 import OfflinePaymentTypeDialog from './OfflinePaymentTypeDialog.vue'
-import { useCoreStore } from '@feedmepos/mf-common'
+import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
+
 const props = defineProps({
   paymentTypes: {
     type: Array as PropType<F_ORDER_PAYMENT_TYPE[]>,
@@ -50,8 +53,8 @@ const parent = ref(false)
 const nestedVal = ref<string[]>([])
 
 const checkboxChildren = [
-  { label: 'Offline Payment', value: 'offline' },
-  { label: 'E-Payment', value: 'e-payment' }
+  { label: t('order.offlinePayment'), value: 'offline' },
+  { label: t('order.ePayment'), value: 'e-payment' }
 ]
 
 const initializeCheckboxes = () => {
@@ -114,8 +117,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex-grow fm-typo-en-title-sm-600">Accepted Payment</div>
-  <FmCheckbox value="" :model-value="parent" label="All"
+  <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.acceptedPayment') }}</div>
+  <FmCheckbox value="" :model-value="parent" :label="t('order.all')"
     :indeterminate="nestedVal.length > 0 && nestedVal.length < checkboxChildren.length"
     @update:model-value="handleParentUpdate" />
 
@@ -131,7 +134,7 @@ onMounted(() => {
   <div v-if="nestedVal.includes('offline')">
     <div v-if="offlinePaymentTypes?.length === 0">
       <FmCard variant="outlined">
-        <FmCardSection>Cash </FmCardSection>
+        <FmCardSection>{{ t('order.cash') }}</FmCardSection>
       </FmCard>
     </div>
     <p v-for="(type, i) in offlinePaymentTypes" :key="i">

package/src/views/order-settings/general/GeneralSetting.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="flex justify-between items-center">
+    <RestaurantSelector :model-value="currentRestaurant?._id ?? undefined" />
+  </div>
+  <div v-if="!isLoading">
+    <div class="p-[1.5rem] flex flex-col gap-5 m-5 w-2/3">
+      <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.generalSetting') }}</div>
+      <FmSwitch
+        :disabled="!validPosVersion"
+        v-model="autoSendKitchen"
+        :label="t('order.autoSendKitchen')"
+        :sublabel="`${!validPosVersion ? `(${t('order.autoSendKitchenSublabel')})` : ''}`"
+        label-placement="right"
+      ></FmSwitch>
+
+      <FmSwitch
+        v-model="anonymousLoginDialog"
+        :label="t('order.promptAnonymousLoginDialog')"
+        label-placement="right"
+      ></FmSwitch>
+    </div>
+    <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
+      <FmButton
+        variant="primary"
+        :label="t('order.saveSetting')"
+        class="mr-auto"
+        @click="updateOrderSetting"
+      />
+    </div>
+  </div>
+  <FmCircularProgress size="xxl" v-else />
+</template>
+
+<script setup lang="ts">
+import { useCoreStore } from '@feedmepos/mf-common'
+import RestaurantSelector from '../components/RestaurantSelector.vue'
+import { useLoading } from '@/composables/loading'
+import { type OrderSettingsDto, type OrderV3Settings } from '@entity'
+import { OrderSettingApi } from '@/api/order-setting'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
+
+const { showSuccess } = useSnackbarFunctions()
+const { currentRestaurant } = useCoreStore()
+const { startAsyncCallWithErr, isLoading } = useLoading()
+
+const orderSettingDefault = ref<OrderSettingsDto | undefined>(undefined)
+const v3Settings = ref<OrderV3Settings | undefined>(undefined)
+const autoSendKitchen = ref<boolean>(false)
+const anonymousLoginDialog = ref<boolean>(false)
+
+const validPosVersion = computed<boolean>(() => {
+  return currentRestaurant?.value?.posVersion?.startsWith('7') ?? false
+})
+
+async function init() {
+  if (currentRestaurant.value) {
+    orderSettingDefault.value = await readOrderSetting()
+    v3Settings.value = orderSettingDefault.value.v3Settings
+    autoSendKitchen.value = validPosVersion.value
+      ? (orderSettingDefault.value.autoSendKitchen ?? true)
+      : false
+    anonymousLoginDialog.value = v3Settings.value.anonymousLoginDialog ?? true
+  }
+}
+
+async function updateOrderSetting() {
+  await startAsyncCallWithErr(async () => {
+    if (orderSettingDefault.value) {
+      await OrderSettingApi.updateOrderSetting({
+        ...orderSettingDefault.value,
+        autoSendKitchen: autoSendKitchen.value,
+        v3Settings: {
+          ...(v3Settings.value ?? {}),
+          dineInCanTakeaway: v3Settings.value?.dineInCanTakeaway ?? true,
+          anonymousLoginDialog: anonymousLoginDialog.value
+        }
+      })
+      await init()
+      showSuccess('General setting updated')
+    }
+  })
+}
+
+onMounted(() => init())
+
+watch(
+  () => currentRestaurant.value,
+  () => {
+    init()
+  },
+  { immediate: true }
+)
+
+async function readOrderSetting(): Promise<OrderSettingsDto> {
+  return await startAsyncCallWithErr(async () => {
+    return await OrderSettingApi.getOrderSetting()
+  })
+}
+</script>

package/src/views/order-settings/pickup/AddressInput.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { googleMap } from '@/helpers/map'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const props = defineProps<{
   title?: string
@@ -42,7 +45,7 @@ watch(modelValue, (newVal) => {
     :model-value="modelValue"
     :datalist="placeOptions"
     @update:modelValue="modelValue = $event"
-    placeholder="Enter address"
-    :rules="[(val) => !!val || 'Field cannot be empty']"
+    :placeholder="t('order.enterAddress')"
+    :rules="[(val) => !!val || t('order.fieldCannotBeEmpty')]"
   />
 </template>

package/src/views/order-settings/pickup/CustomPayment.vue

@@ -2,7 +2,9 @@
 import { ref, watch, computed } from 'vue'
 import OfflinePaymentTypeDialogContent from '../dinein/OfflinePaymentTypeDialogContent.vue'
 import type { FdoOfflinePaymentMethod } from '@feedmepos/core/entity'
+import { useI18n } from '@feedmepos/mf-common'
 
+const { t } = useI18n()
 const props = defineProps<{
   offlinePaymentTypes: FdoOfflinePaymentMethod[]
 }>()
@@ -46,8 +48,8 @@ const isSideSheetOpen = ref(false)
 
 const label = computed(() => {
   return (props.offlinePaymentTypes.length === 0)
-    ? "Custom offline payment"
-    : "Add offline payment";
+    ? t('order.customOfflinePayment')
+    : t('order.addOfflinePayment');
 });
 
 function closeSideSheet() {
@@ -61,22 +63,22 @@ function openSideSheet() {
 
 
 <template>
-  <FmSideSheet header="Custom offline payment" dismiss-away :maxWidth="600" :model-value="isSideSheetOpen">
+  <FmSideSheet :header="t('order.customOfflinePaymentHeader')" dismiss-away :maxWidth="600" :model-value="isSideSheetOpen">
     <template #side-sheet-button>
       <FmButton :label="label" variant="plain" icon="add" @click="openSideSheet()"/>
     </template>
-    <div class="fm-typo-en-title-sm-600 mb-5">General</div>
+    <div class="fm-typo-en-title-sm-600 mb-5">{{ t('order.general') }}</div>
     <OfflinePaymentTypeDialogContent
-      name="Offline payment name"
-      instruction="Instruction"
+      :name="t('order.offlinePaymentName')"
+      :instruction="t('order.instruction')"
       @update:nameValue="updateName"
       @update:instructionValue="updateInstruction"
       
     />
     <template #side-sheet-footer>
       <div class="flex gap-8 items-center justify-start">
-        <FmButton variant="primary" label="Add" size="lg" @click="addOffline" close: true/>
-        <FmButton variant="secondary" label="Cancel" size="lg" @click="closeSideSheet()"/>
+        <FmButton variant="primary" :label="t('order.add')" size="lg" @click="addOffline" close: true/>
+        <FmButton variant="secondary" :label="t('order.cancel')" size="lg" @click="closeSideSheet()"/>
       </div>
     </template>
   </FmSideSheet>