@feedmepos/mf-order-setting 0.0.13 → 0.0.14

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

@@ -1,21 +1,32 @@
 <template>
   <div>
-    <div class="flex-grow fm-typo-en-title-sm-600">Accepted Payment</div>
-    <FmCheckbox :model-value="parent" value="" label="All" @update:model-value="handleParentUpdate"
-      :indeterminate="nestedVal.length > 0 && nestedVal.length < checkboxChildren.length" />
+    <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.acceptedPayment') }}</div>
+    <FmCheckbox
+      :model-value="parent"
+      value=""
+      :label="t('order.all')"
+      @update:model-value="handleUpdate"
+      :indeterminate="nestedVal.length > 0 && nestedVal.length < checkboxChildren.length"
+    />
     <div class="flex flex-row items-center">
-      <FmCheckbox v-model="nestedVal" :label="checkboxChildren[0].label" :value="checkboxChildren[0].value"
-        @update:model-value="handleChildUpdate" />
+      <FmCheckbox
+        v-model="nestedVal"
+        :label="checkboxChildren[0].label"
+        :value="checkboxChildren[0].value"
+        @update:model-value="handleUpdate"
+      />
     </div>
     <div class="mt-3 mb-3">
-      <CustomPayment :offlinePaymentTypes="localOfflinePaymentTypeCopy ?? []"
-        @update:offlinePaymentTypes="updateOfflinePaymentTypes" />
+      <CustomPayment
+        :offlinePaymentTypes="localOfflinePaymentTypeCopy ?? []"
+        @update:offlinePaymentTypes="updateOfflinePaymentTypes"
+      />
     </div>
 
-    <div v-if="nestedVal.includes('offline')">
+    <div v-if="nestedVal.includes(F_ORDER_PAYMENT_TYPE.enum.cash)">
       <div v-if="localOfflinePaymentTypes?.length === 0">
         <FmCard variant="outlined">
-          <FmCardSection>Cash</FmCardSection>
+          <FmCardSection>{{ t('order.cash') }}</FmCardSection>
         </FmCard>
       </div>
       <p v-for="(type, i) in localOfflinePaymentTypes || []" :key="i">
@@ -34,47 +45,86 @@
       </p>
     </div>
 
-    <FmCheckbox v-model="nestedVal" :label="checkboxChildren[1].label" :value="checkboxChildren[1].value"
-      @update:model-value="handleChildUpdate" />
+    <div class="m-5"></div>
+
+    <FmCheckbox
+      v-model="nestedVal"
+      :label="checkboxChildren[1].label"
+      :value="checkboxChildren[1].value"
+      @update:model-value="handleUpdate"
+      :disabled="checkboxChildren[1].disable"
+    >
+    </FmCheckbox>
+
+    <div class="text-fm-color-secondary-salmon fm-typo-en-body-sm-600 ml-7">
+      {{ checkboxChildren?.[1]?.suffix?.text }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {
   F_ORDER_PAYMENT_TYPE,
-  FdoRestaurantInHouseDelivery,
   FdoRestaurantPickup,
   FdoOfflinePaymentMethod
 } from '@feedmepos/core/entity'
 import CustomPayment from './CustomPayment.vue'
-import { computed, ref } from 'vue'
+import { useI18n } from '@feedmepos/mf-common'
 
+import { computed, onMounted, ref } from 'vue'
+import type { CheckboxOption } from '../../../components/type'
+
+const { t } = useI18n()
 const emits = defineEmits<{
-  (event: 'update:paymentTypes', v: F_ORDER_PAYMENT_TYPE[]): void
-  (
-    event: 'update:offlinePaymentTypes',
-    v:
-      | FdoRestaurantPickup['offlinePaymentTypes']
-      | FdoRestaurantInHouseDelivery['offlinePaymentTypes']
-  ): void,
   (
     event: 'update:payments',
-    v: { paymentTypes: F_ORDER_PAYMENT_TYPE[], offlinePaymentTypes: FdoOfflinePaymentMethod[] | undefined | null }
+    v: {
+      paymentTypes: F_ORDER_PAYMENT_TYPE[],
+      offlinePaymentTypes: FdoOfflinePaymentMethod[] | undefined | null
+    }
   ): void
 }>()
 
 const props = defineProps<{
   paymentTypes: F_ORDER_PAYMENT_TYPE[] | null | undefined
   offlinePaymentTypes: any
+  allowEPayment: Boolean | String
 }>()
 
-const parent = ref(false)
+const parent = computed<boolean>(() => {
+  return (
+    nestedVal.value.length ===
+    (props.allowEPayment === true
+      ? checkboxChildren.value.length
+      : checkboxChildren.value.length - 1)
+  )
+})
 const nestedVal = ref<string[]>([])
 
-const checkboxChildren = [
-  { label: 'Offline Payment', value: 'offline' },
-  { label: 'E-Payment', value: 'e-payment' }
-]
+const checkboxChildren = computed(() => {
+  const allowedEPayment = props.allowEPayment === true
+  const options: CheckboxOption[] = [
+    {
+      label: `${t('order.offlinePayment')}`,
+      value: F_ORDER_PAYMENT_TYPE.enum.cash
+    },
+    {
+      label: `${t('order.ePayment')}`,
+      disable: !allowedEPayment,
+      suffix: !allowedEPayment
+        ? {
+            text: `(${props.allowEPayment || t('order.notAllowed')})`,
+            class: 'text-negative t-system'
+          }
+        : {
+            text: '',
+            class: ''
+          },
+      value: F_ORDER_PAYMENT_TYPE.enum.ePayment
+    }
+  ]
+  return options
+})
 
 const allowEPayment = computed(() => {
   const paymentTypes = props.paymentTypes || []
@@ -88,48 +138,43 @@ const allowOfflinePayment = computed(() => {
   return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.cash) || offlinePaymentTypes.length > 0
 })
 
+onMounted(() => {
+  initializeCheckboxes()
+})
+
 const initializeCheckboxes = () => {
   const initialValues: string[] = []
-  if (allowOfflinePayment.value) initialValues.push('offline')
-  if (allowEPayment.value) initialValues.push('e-payment')
-  nestedVal.value = initialValues
-  parent.value = initialValues.length === checkboxChildren.length
-}
-
-initializeCheckboxes()
-
-const handleParentUpdate = (ev: boolean) => {
-  nestedVal.value = ev ? checkboxChildren.map((item) => item.value) : []
-  parent.value = ev
-
-  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
-  const updatedOfflinePaymentTypes = ev ? props.offlinePaymentTypes || [] : []
-
-  if (nestedVal.value.includes('e-payment')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
+  if (allowOfflinePayment.value) {
+    initialValues.push(F_ORDER_PAYMENT_TYPE.enum.cash)
   }
-  if (nestedVal.value.includes('offline')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
+  if (allowEPayment.value) {
+    initialValues.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
   }
-  emits('update:paymentTypes', updatedPaymentTypes)
-  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
+  nestedVal.value = initialValues
 }
 
-const handleChildUpdate = (ev: string[]) => {
-  nestedVal.value = ev
-  parent.value = ev.length === checkboxChildren.length
-
-  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = []
-  const updatedOfflinePaymentTypes = ev.includes('offline') ? props.offlinePaymentTypes || [] : []
-
-  if (ev.includes('e-payment')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.ePayment)
-  }
-  if (ev.includes('offline')) {
-    updatedPaymentTypes.push(F_ORDER_PAYMENT_TYPE.enum.cash)
+const handleUpdate = (ev: boolean | string[]) => {
+  if (typeof ev === 'boolean') {
+    const filteredCheckboxChildren = checkboxChildren.value.filter(
+      (item) =>
+        (item.value === F_ORDER_PAYMENT_TYPE.enum.ePayment && props.allowEPayment === true) ||
+        item.value !== F_ORDER_PAYMENT_TYPE.enum.ePayment
+    )
+    nestedVal.value = ev ? filteredCheckboxChildren.map((item) => item.value) : []
+  } else {
+    nestedVal.value = ev
   }
-  emits('update:paymentTypes', updatedPaymentTypes)
-  emits('update:offlinePaymentTypes', updatedOfflinePaymentTypes)
+  const updatedPaymentTypes: F_ORDER_PAYMENT_TYPE[] = nestedVal.value.map((v) =>
+    F_ORDER_PAYMENT_TYPE.parse(v)
+  )
+  const updatedOfflinePaymentTypes = nestedVal.value.includes(F_ORDER_PAYMENT_TYPE.enum.cash)
+    ? props.offlinePaymentTypes || []
+    : []
+
+  emits('update:payments', {
+    paymentTypes: updatedPaymentTypes,
+    offlinePaymentTypes: updatedOfflinePaymentTypes
+  })
 }
 
 const localOfflinePaymentTypes = ref<FdoRestaurantPickup['offlinePaymentTypes']>(
@@ -143,13 +188,19 @@ const localOfflinePaymentTypeCopy = computed(() => {
 
 function updateOfflinePaymentTypes(v: FdoRestaurantPickup['offlinePaymentTypes']) {
   localOfflinePaymentTypes.value = v || []
-  emits('update:offlinePaymentTypes', localOfflinePaymentTypes.value)
+  emits('update:payments', {
+    paymentTypes: props.paymentTypes??[],
+    offlinePaymentTypes: localOfflinePaymentTypes.value
+  })
 }
 
 function deleteOfflinePayment(index: number) {
   if (localOfflinePaymentTypes.value) {
     localOfflinePaymentTypes.value.splice(index, 1)
-    emits('update:offlinePaymentTypes', localOfflinePaymentTypes.value)
+    emits('update:payments', {
+      paymentTypes: props.paymentTypes?? [],
+      offlinePaymentTypes: localOfflinePaymentTypes.value
+    })
   }
 }
 </script>

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

@@ -4,6 +4,9 @@ import { ref } from 'vue'
 import PickUpPointDialogContent from './PickUpPointDialogContent.vue'
 import type { FdoPickupPoint } from '@entity'
 import type { FdoRestaurantPickup } from '@feedmepos/core/entity'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 interface Props {
   pickupSetting: FdoRestaurantPickup
@@ -22,7 +25,7 @@ const openDialog = () => {
   nameTextValue.value = ''
   addressTextValue.value = ''
   coordinatesValue.value = []
-  const title = currentIndex.value === null ? 'Add pickup point' : 'Edit pickup point'
+  const title = currentIndex.value === null ? t('order.addPickupPoint') : t('order.editPickupPoint')
   const point = currentIndex.value !== null ? pickupPoints.value[currentIndex.value] : null
 
   if (point) {
@@ -49,8 +52,8 @@ const openDialog = () => {
           }
         }
       },
-      primaryActions: { text: currentIndex.value === null ? 'Add' : 'Update', close: true },
-      secondaryActions: { text: 'Cancel', close: true }
+      primaryActions: { text: currentIndex.value === null ? t('order.add') : 'Update', close: true },
+      secondaryActions: { text: t('order.cancel'), close: true }
     })
     .onPrimary(async () => {
       const updatedPoint = {
@@ -102,7 +105,7 @@ const emits = defineEmits<{
 
 <template>
   <div class="m-2">
-    <FmButton label="Add pickup point" @click="addPickupPoint" variant="plain" icon="add" />
+    <FmButton :label="t('order.addPickupPoint')" @click="addPickupPoint" variant="plain" icon="add" />
   </div>
   <div v-if="pickupPoints.length">
     <div v-for="(point, index) in pickupPoints" :key="point.address" class="mb-5">

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

@@ -1,15 +1,15 @@
 <template>
   <div>
-    <span>Name</span>
+    <span>{{ t('order.name') }}</span>
     <FmTextField
       :model-value="data.name"
       @update:model-value="updateNameValue"
-      placeholder="Enter name"
-      :rules="[(val) => !!val || 'Field cannot be empty']"
+      :placeholder="t('order.enterName')"
+      :rules="[(val) => !!val || t('order.fieldCannotBeEmpty')]"
     />
 
     <div class="mb-12"></div>
-    <span>Address</span>
+    <span>{{ t('order.address') }}</span>
     <AddressInput :initial-value="data.address" @update:model-value="setLocation" />
 
     <FmCard variant="outlined" class="mt-5">
@@ -35,7 +35,10 @@ import type { FdoPickupPoint } from '@feedmepos/core/entity'
 import { computed, reactive, ref, watch } from 'vue'
 import { GoogleMap } from '@/components'
 import AddressInput from './AddressInput.vue'
+import { useI18n } from '@feedmepos/mf-common'
 
+const { t } = useI18n();
+ 
 const props = defineProps<{
   initialValue: FdoPickupPoint
 }>()

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

@@ -4,12 +4,13 @@
   </div>
   <div v-else class="block m-3">
     <div class="flex justify-end items-center mb-3">
-      <FmSearch v-model="searchKey" placeholder="Search" />
+      <FmSearch v-model="searchKey" :placeholder="t('order.search')" />
     </div>
     <PickupList :pickupSettingData="pickupSettingData" @toggleSideSheet="toggleSideSheet"
       class="mt-5 md:hidden lg:hidden xl:hidden" />
     <FmTable class="h-[500px] xs:hidden sm:hidden" :row-data="pickupSettingData" :hideFooter="true"
-      :column-defs="columns" :loading="isLoading" @row-click="toggleSideSheet"></FmTable>
+      :column-defs="columns" :loading="isLoading" @row-click="toggleSideSheet" :pageSize="pickupSettingData.length">
+    </FmTable>
     <PickUpSettingDialog :showPickupDialog="sideSheet" @closeSideSheet="closeSideSheet" />
   </div>
 </template>
@@ -25,7 +26,9 @@ import { sentenceCase } from 'change-case'
 import PickUpSettingDialog from './PickUpSettingDialog.vue'
 import { useLoading } from '@/composables/loading'
 import PickupList from './PickupList.vue'
+import { useI18n } from '@feedmepos/mf-common'
 
+const { t } = useI18n()
 const { searchKey, filter } = useSearch()
 const { restaurants, changeRestaurant, currentRestaurant } = useCoreStore()
 const restaurantStore = useRestaurantStore()
@@ -120,10 +123,10 @@ const pickupSettingData = computed<PickupSettingData[]>(() => {
         .filter((v) => !!v)
         .join(', ')
 
-    const onlineStatus = item.enable ? 'Activated' : 'Inactive'
+    const onlineStatus = item.enable ? t('order.activated') : t('order.inactive')
 
     const preorderRange = item.pickupTime
-      ? `${item.pickupTime.day.min} to ${item.pickupTime.day.max - 1} Day`
+      ? `${item.pickupTime.day.min} ${t('order.to')} ${item.pickupTime.day.max - 1} ${t('order.day')}`
       : '-'
     const pickupPointCount = item.pickupPointConfig?.points.length || 0
 
@@ -134,7 +137,7 @@ const pickupSettingData = computed<PickupSettingData[]>(() => {
       online: onlineStatus,
       enable: item.enable,
       preorder: preorderRange,
-      pickuppoint: `${pickupPointCount} pickup point`
+      pickuppoint: `${pickupPointCount} ${t('order.pickupPoint')}`
     }
   })
 })
@@ -166,7 +169,7 @@ const getClassForOnline = (enabled: boolean) => {
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: 'restaurant',
-    header: () => 'Restaurant',
+    header: () => t('order.restaurant'),
     meta: {
       maxWidth: '150px'
     },
@@ -174,12 +177,12 @@ const columns: ColumnDef<any>[] = [
   },
   {
     accessorKey: 'paymentmethod',
-    header: () => 'Payment method',
+    header: () => t('order.paymentMethod'),
     enableSorting: false
   },
   {
     accessorKey: 'online',
-    header: () => 'Online',
+    header: () => t('order.online'),
     cell: (info: any) => {
       const enabled = info.row.original.enable
       const onlineStatus = info.getValue()
@@ -189,12 +192,12 @@ const columns: ColumnDef<any>[] = [
   },
   {
     accessorKey: 'preorder',
-    header: () => 'Preorder',
+    header: () => t('order.preOrder'),
     enableSorting: false
   },
   {
     accessorKey: 'pickuppoint',
-    header: () => 'Pickup point',
+    header: () => t('order.pickupPoint'),
     enableSorting: false
   }
 ]

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

@@ -1,11 +1,11 @@
 <template>
-  <FmSideSheet header="Update Pickup Setting" dismiss-away class="w-full fm-typo-en-title-md-600" :maxWidth="600"
+  <FmSideSheet :header="t('order.updatePickupSetting')" dismiss-away class="w-full fm-typo-en-title-md-600" :maxWidth="600"
     :model-value="props.showPickupDialog" @update:model-value="togglePickupDialog">
     <PickUpSettingDialogContent @updatePickup="updatePickupSetting" :pickup="pickupSetting" />
     <template #side-sheet-footer>
       <div class="flex gap-8 items-center justify-start">
-        <FmButton variant="primary" label="Apply" size="lg" @click="onSave" />
-        <FmButton variant="secondary" label="Cancel" size="lg" @click="togglePickupDialog" />
+        <FmButton variant="primary" :label="t('order.apply')" size="lg" @click="onSave" />
+        <FmButton variant="secondary" :label="t('order.cancel')" size="lg" @click="togglePickupDialog" />
       </div>
     </template>
   </FmSideSheet>
@@ -19,6 +19,9 @@ import { useLoading } from '@/composables/loading'
 import { useRestaurantStore } from '@/stores/restaurant'
 import { useSnackbarFunctions } from '@/components/snackbar'
 import { F_ORDER_PAYMENT_TYPE, FdoRestaurantPickup } from '@feedmepos/core/entity'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const { currentRestaurant } = useCoreStore()
 const { startAsyncCallWithErr } = useLoading()
@@ -26,7 +29,6 @@ const restaurantStore = useRestaurantStore()
 const { showSuccess } = useSnackbarFunctions()
 
 const pickupSetting = ref<FdoRestaurantPickup>(initDefaultPickupSetting())
-
 const props = defineProps({
   showPickupDialog: {
     type: Boolean,
@@ -68,9 +70,12 @@ async function onSave() {
   await restaurantStore.readRestaurantSetting(currentRestaurant.value?._id || '')
 }
 
-watch(() => props.showPickupDialog, () => {
-  if (currentRestaurant.value) {
-    pickupSetting.value = currentRestaurant.value.pickup ?? initDefaultPickupSetting()
+watch(
+  () => props.showPickupDialog,
+  () => {
+    if (currentRestaurant.value) {
+      pickupSetting.value = currentRestaurant.value.pickup ?? initDefaultPickupSetting()
+    }
   }
-})
+)
 </script>

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

@@ -1,31 +1,38 @@
 <template>
-  <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-3">General Setting</div>
-  <FmSwitch :model-value="pickupSetting.ignoreStock ?? false" value="ignoreStock" label="Ignore stock"
-    sublabel="Product can be order even out of stock" label-placement="right" @update:model-value="updateIgnoreStock" />
+  <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-3">{{ t('order.generalSetting') }}</div>
+  <FmSwitch :model-value="pickupSetting.ignoreStock ?? false" value="ignoreStock" :label="t('order.ignoreStock')"
+    :sublabel="t('order.ignoreStockSublabel')" label-placement="right" @update:model-value="updateIgnoreStock" />
   <FmCard variant="outlined" class="p-5 mt-10">
     <Preorder :model-value="pickupData" @update:model-value="updatePickupSetting" />
   </FmCard>
 
   <FmCard variant="outlined" class="p-5 mt-10">
-    <PaymentSidesheet :offline-payment-types="pickupSetting.offlinePaymentTypes"
-      :payment-types="pickupSetting.paymentTypes" @update:paymentTypes="updatePaymentTypes"
-      @update:offlinePaymentTypes="updateOfflinePaymentTypes" @update:payments="updatePayments" />
+    <PaymentSidesheet
+      :offline-payment-types="pickupSetting.offlinePaymentTypes"
+      :allow-e-payment="restaurantStore.getRestaurantEPayment(currentRestaurant)"
+      :payment-types="pickupSetting.paymentTypes"
+      @update:payments="updatePayments"
+    />
   </FmCard>
 
   <FmCard variant="outlined" class="p-5 mt-10">
-    <div class="flex-grow fm-typo-en-title-sm-600 mb-3">Pickup point</div>
-    <FmSwitch :model-value="!!pickupSetting.pickupPointConfig" value="pickuppoint" label="Multiple pickup point"
-      sublabel="Allow customer pickup at multiple address instead of restaurant only" label-placement="right"
+    <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.pickupPoint') }}</div>
+    <FmSwitch :model-value="!!pickupSetting.pickupPointConfig" value="pickuppoint" :label="t('order.multiplePickupPoint')"
+      :sublabel="t('order.allowMultiplePickupSublabel')" label-placement="right"
       @update:model-value="toggleMultiplePickupPoint" />
 
     <template v-if="pickupSetting.pickupPointConfig">
       <div class="mt-3">
-        <FmCheckbox v-model="pickupSetting.pickupPointConfig.restaurantEnable" label="Restaurant as pickup point"
+        <FmCheckbox v-model="pickupSetting.pickupPointConfig.restaurantEnable" :label="t('order.restaurantAsPickupPoint')"
           value="restaurant" />
       </div>
       <PickUpPointDialog @update:address="updatePickupPoints" :pickup-setting="pickupSetting" />
       <div v-if="pickupSetting.pickupPointConfig">
-        <div v-for="point in pickupSetting.pickupPointConfig.points" :key="point.address" class="mb-5"></div>
+        <div
+          v-for="point in pickupSetting.pickupPointConfig.points"
+          :key="point.address"
+          class="mb-5"
+        ></div>
       </div>
     </template>
   </FmCard>
@@ -36,18 +43,22 @@ import {
   F_ORDER_PAYMENT_TYPE,
   FdoOfflinePaymentMethod,
   FdoPickupPoint,
-  FdoRestaurantPickup,
-  FdoPickupTime,
-  FdoRestaurant
+  FdoRestaurantPickup
 } from '@feedmepos/core/entity'
 
-import { useCoreStore } from '@feedmepos/mf-common'
 import { computed, ref, watch, type PropType } from 'vue'
 import PickUpPointDialog from './PickUpPointDialog.vue'
 import Preorder, { type PreorderData } from './Preorder.vue'
 
 import PaymentSidesheet from './PaymentSidesheet.vue'
 import { utils } from '@feedmepos/core'
+import { useI18n } from '@feedmepos/mf-common'
+import { useRestaurantStore } from '@/stores/restaurant'
+import { useCoreStore } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
+const restaurantStore = useRestaurantStore()
+const { currentRestaurant } = useCoreStore()
 
 const emits = defineEmits<{
   (event: 'update-pickup', v: FdoRestaurantPickup): void
@@ -57,12 +68,12 @@ const props = defineProps({
   pickup: {
     type: Object as PropType<FdoRestaurantPickup>,
     required: true
-  },
+  }
 })
 const pickupSetting = ref<FdoRestaurantPickup>(defaultPickupSetting())
 const pickupData = computed<PreorderData | null>(() => {
   if (!pickupSetting.value.pickupTime) {
-    return null;
+    return null
   }
   const { min, max } = pickupSetting.value.pickupTime.day
   return {
@@ -78,10 +89,6 @@ function defaultPickupSetting(): FdoRestaurantPickup {
     paymentTypes: [F_ORDER_PAYMENT_TYPE.enum.cash]
   }
 }
-const allowEPayment = computed(() => {
-  const paymentTypes = pickupSetting.value.paymentTypes || []
-  return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment)
-})
 
 const allowOfflinePayment = computed(() => {
   const paymentTypes = pickupSetting.value.paymentTypes || []
@@ -100,7 +107,8 @@ const checkboxChildren = [
 const initializeCheckboxes = () => {
   const initialValues: string[] = []
   if (allowOfflinePayment.value) initialValues.push('offline')
-  if (allowEPayment.value) initialValues.push('e-payment')
+  if (restaurantStore.getRestaurantEPayment(currentRestaurant.value))
+    initialValues.push('e-payment')
   nestedVal.value = initialValues
   parent.value = initialValues.length === checkboxChildren.length
 }
@@ -120,26 +128,16 @@ function toggleMultiplePickupPoint(value: boolean) {
   emits('update-pickup', pickup)
 }
 
-function updatePayments(payments: { paymentTypes: F_ORDER_PAYMENT_TYPE[], offlinePaymentTypes: FdoOfflinePaymentMethod[] | undefined | null }) {
+function updatePayments(payments: {
+  paymentTypes: F_ORDER_PAYMENT_TYPE[]
+  offlinePaymentTypes: FdoOfflinePaymentMethod[] | undefined | null
+}) {
   const pickup = utils.clone(pickupSetting.value)
   pickup.paymentTypes = payments.paymentTypes
   pickup.offlinePaymentTypes = payments.offlinePaymentTypes
   emits('update-pickup', pickup)
 }
 
-function updatePaymentTypes(paymentTypes: F_ORDER_PAYMENT_TYPE[]) {
-  const pickup = utils.clone(pickupSetting.value)
-  pickup.paymentTypes = paymentTypes
-  emits('update-pickup', pickup)
-}
-
-function updateOfflinePaymentTypes(offlinePaymentTypes: FdoOfflinePaymentMethod[] | undefined | null) {
-  const pickup = utils.clone(pickupSetting.value)
-
-  pickup.offlinePaymentTypes = offlinePaymentTypes
-  emits('update-pickup', pickup)
-}
-
 async function updatePickupPoints(newPoints: FdoPickupPoint[]) {
   const pickup = utils.clone(pickupSetting.value)
 
@@ -150,7 +148,9 @@ async function updatePickupPoints(newPoints: FdoPickupPoint[]) {
     }
   }
   const existingPoints = pickup.pickupPointConfig.points || []
-  const existingPointsMap = new Map(existingPoints.map((point: FdoPickupPoint) => [point.address, point]))
+  const existingPointsMap = new Map(
+    existingPoints.map((point: FdoPickupPoint) => [point.address, point])
+  )
   const newPointsMap = new Map(newPoints.map((point) => [point.address, point]))
   const updatedPoints = [
     ...newPoints.filter((point: FdoPickupPoint) => !existingPointsMap.has(point.address)),

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import Day from 'dayjs'
 import { type PropType, computed } from 'vue'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 export interface PreorderData {
   day: {
@@ -101,24 +104,23 @@ const endTimeRule = computed(() => (value: number) => {
 </script>
 
 <template>
-  <div class="flex-grow fm-typo-en-title-sm-600">Order Type</div>
+  <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.orderType') }}</div>
   <FmRadioGroup :model-value="pickupType" @update:model-value="updatePickupType">
-    <FmRadio value="asap" label="ASAP" />
-    <FmRadio value="preorder" label="Pre-order" />
+    <FmRadio value="asap" :label="t('order.asap')" />
+    <FmRadio value="preorder" :label="t('order.preOrder')" />
   </FmRadioGroup>
   <div v-if="pickupType === 'preorder'" class="flex items-center">
-    Order from
+    {{ t('order.orderFrom') }}
     <div class="w-20 ml-3 mr-3">
       <FmTextField :model-value="min" @update:model-value="updateStartTime" :rules="[startTimeRule]" />
     </div>
-    days to
+    {{ t('order.daysTo') }}
     <div class="w-20 ml-3 mr-3">
       <FmTextField :model-value="max" @update:model-value="updateEndTime" :rules="[endTimeRule]" />
     </div>
-    days
+    {{ t('order.days') }}
   </div>
   <div v-if="pickupType === 'preorder'" class="text-fm-color-overlay-background fm-typo-en-body-sm-400 mt-3">
-    Order on {{ preorderHint.today }}, Customer can order between {{ preorderHint.start }} and
-    {{ preorderHint.end }}. Max 7 days.
+    {{ t('order.preOrderHint', {today: preorderHint.today, start: preorderHint.start, end:preorderHint.end}) }}
   </div>
 </template>