@feedmepos/mf-order-setting 0.0.13 → 0.0.14

package/src/views/order-settings/servicecharge/RateInput.vue

@@ -1,9 +1,13 @@
 <template>
-  <FmTextField 
-    :model-value="rate" 
-    label="Rate" 
-    append-icon="percent" 
-    @update:model-value="handleInputChange" 
+  <FmTextField
+    :model-value="rate"
+    :label="t('order.rate')" 
+    append-icon="percent"
+    :rules="[
+      (val) => (val >= 0 && val <= 100) || 'Invalid rate (0% - 100%)',
+    ]"
+    type="number"
+    @update:model-value="handleInputChange"
   />
 </template>
 
@@ -11,6 +15,9 @@
 import { Dinero } from '@feedmepos/core'
 import { type PropType, computed } from 'vue'
 import { percentToAdjustment, type AdjustmentAmount } from '@/helpers/number'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const props = defineProps({
   modelValue: {

package/src/views/order-settings/servicecharge/ServiceChargeRule.vue

@@ -6,6 +6,9 @@ import RateInput from './RateInput.vue'
 import type { FdoServiceChargeRule, FdoTable } from '@feedmepos/core/entity'
 import type { AdjustmentAmount } from '@/helpers/number'
 import { F_SERVICE_CHARGE_ORDER_TYPE } from '@feedmepos/core/entity'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const props = defineProps({
   modelValue: {
@@ -44,19 +47,19 @@ const emits = defineEmits<{
 }>()
 
 const itemSelected = computed(() => {
-  if (props.isLoadingMenu) return 'Loading menu'
-  if (!props.items.length) return 'No available item'
+  if (props.isLoadingMenu) return t('order.loadingMenu')
+  if (!props.items.length) return t('order.noAvailableItem')
   const items = props.modelValue.condition.items
-  if (!items) return 'All'
-  return `${items.length} Item`
+  if (!items) return t('order.all')
+  return `${items.length} ${t('order.item')}`
 })
 
 const tableSelected = computed(() => {
-  if (props.isLoadingTable) return 'Loading table'
-  if (!props.tables.length) return 'No available table'
+  if (props.isLoadingTable) return t('order.loadingTable')
+  if (!props.tables.length) return t('order.noAvailableTable')
   const tables = props.modelValue.condition.tables
-  if (!tables) return 'All'
-  return `${tables.length} Table`
+  if (!tables) return t('order.all')
+  return `${tables.length} ${t('order.table')}`
 })
 
 enum ServiceChargeOrderType {
@@ -67,9 +70,26 @@ enum ServiceChargeOrderType {
   pickup = 'PICKUP'
 }
 
+function convertServiceChargeOrderToI18n(serviceChargeType: ServiceChargeOrderType) {
+  switch (serviceChargeType) {
+    case ServiceChargeOrderType.dineIn:
+      return t('order.dineIn')
+    case ServiceChargeOrderType.takeaway:
+      return t('order.takeaway')
+    case ServiceChargeOrderType.inHouseDelivery: 
+      return t('order.deliveryTitle', {company: "In house"})
+    case ServiceChargeOrderType.deliveryCompany:
+      return t('order.deliveryCompany')
+    case ServiceChargeOrderType.pickup:
+      return t('order.pickup')
+    default:
+      return
+  }
+}
+
 const diningOptions = computed(() => {
   return Object.values(ServiceChargeOrderType).map((v) => ({
-    label: sentenceCase(v),
+    label: convertServiceChargeOrderToI18n(v),
     value: v
   }))
 })
@@ -311,15 +331,15 @@ function initializeMenuState(items: any[]) {
     <FmButton append-icon="delete" variant="tertiary" @click="emits('delete')" />
   </div>
   <div class="flex items-center justify-between">
-    <div class="font-semibold mb-3">Select item</div>
+    <div class="font-semibold mb-3">{{ t('order.selectItem') }}</div>
     <FmButton variant="plain" :label="itemSelected" size="lg" @click="toggleSideSheet" />
   </div>
 
-  <FmSideSheet header="Select item" :maxWidth="600" dismiss-away v-model="sideSheetItem">
+  <FmSideSheet :header="t('order.selectItem')" :maxWidth="600" dismiss-away v-model="sideSheetItem">
     <div>
       <div class="text-fm-color-typo-secondary mt-5 mb-5 flex flex-row">
-        {{ props.modelValue.condition.items?.length ?? initialValue?.length }} product(s) selected
-        <FmSearch v-model:model-value="searchValueItem" class="ml-auto" placeholder="Search" />
+        {{ props.modelValue.condition.items?.length ?? initialValue?.length }} {{ t('order.productSelected') }}
+        <FmSearch v-model:model-value="searchValueItem" class="ml-auto" :placeholder="t('order.search')" />
       </div>
 
       <div v-for="(item, index) in filteredItem" :key="index" class="flex flex-col mb-6">
@@ -366,20 +386,20 @@ function initializeMenuState(items: any[]) {
     </div>
     <template #side-sheet-footer>
       <div class="flex gap-8 items-center justify-start">
-        <FmButton variant="primary" label="Confirm" size="lg" @click="updateItems" />
-        <FmButton variant="secondary" label="Cancel" size="lg" @click="sideSheetItem = false" />
+        <FmButton variant="primary" :label="t('order.confirm')" size="lg" @click="updateItems" />
+        <FmButton variant="secondary" :label="t('order.cancel')" size="lg" @click="sideSheetItem = false" />
       </div>
     </template>
   </FmSideSheet>
 
   <div class="flex items-center justify-between">
-    <div class="font-semibold mb-3">Select table</div>
+    <div class="font-semibold mb-3">{{ t('order.selectTable') }}</div>
     <FmButton variant="plain" :label="tableSelected" size="lg" @click="toggleSideSheetTable" />
   </div>
-  <FmSideSheet header="Select table" :maxWidth="600" dismiss-away v-model="sideSheetTable">
+  <FmSideSheet :header="t('order.selectTable')" :maxWidth="600" dismiss-away v-model="sideSheetTable">
     <div class="text-fm-color-typo-secondary mt-5 mb-5 flex flex-row">
-      {{ props.modelValue.condition.tables?.length ?? props.tables.length }} table(s) selected
-      <FmSearch v-model:model-value="searchValueTable" class="ml-auto" placeholder="Search" />
+      {{ props.modelValue.condition.tables?.length ?? props.tables.length }} {{ t('order.tableSelected') }}
+      <FmSearch v-model:model-value="searchValueTable" class="ml-auto" :placeholder="t('order.search')" />
     </div>
 
     <FmCard variant="outlined" class="p-5">
@@ -387,7 +407,7 @@ function initializeMenuState(items: any[]) {
         <FmCheckbox
           :value="parentTable"
           :model-value="parentTable"
-          label="All"
+          :label="t('order.all')"
           :indeterminate="
             nestedValTable.length > 0 && nestedValTable.length < checkboxChildrenTable.length
           "
@@ -426,17 +446,17 @@ function initializeMenuState(items: any[]) {
     </FmCard>
     <template #side-sheet-footer>
       <div class="flex gap-8 items-center justify-start">
-        <FmButton variant="primary" label="Confirm" size="lg" @click="updateTable" />
-        <FmButton variant="secondary" label="Cancel" size="lg" @click="sideSheetTable = false" />
+        <FmButton variant="primary" :label="t('order.confirm')" size="lg" @click="updateTable" />
+        <FmButton variant="secondary" :label="t('order.cancel')" size="lg" @click="sideSheetTable = false" />
       </div>
     </template>
   </FmSideSheet>
 
-  <div>Apply for</div>
+  <div>{{ t('order.applyFor') }}</div>
   <div class="flex flex-col">
     <FmCheckbox
       v-model="parent"
-      label="All"
+      :label="t('order.all')"
       value="all"
       :indeterminate="nestedVal.length > 0 && nestedVal.length < diningOptions.length"
       @update:model-value="handleParentUpdate"

package/src/views/order-settings/servicecharge/ServiceChargeSetting.vue

@@ -5,31 +5,31 @@
   <div v-if="!isLoading">
     <div class="p-[1.5rem] flex flex-col gap-5">
       <FmCard variant="outlined" class="p-5 sm:w-2/3 md:w-2/3 lg:w-1/3 xl:w-1/3">
-        <div class="flex-grow fm-typo-en-title-sm-600 mb-3">Enable Service Charge</div>
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-3">{{ t('order.enableServiceCharge') }}</div>
         <FmSwitch v-model="data.active" value="first"
-          sublabel="Make your own rules to omit change based on different conditions such as restaurant, dining option, items, slot, etc."
-          label="Service charge" label-placement="right" :disabled="!canUseServiceCharge" />
+          :sublabel="t('order.serviceChargeSublabel')"
+          :label="t('order.serviceCharge')" label-placement="right" :disabled="!canUseServiceCharge" />
         <div v-if="!canUseServiceCharge" class="fm-typo-en-body-md-400 text-fm-color-typo-error ml-14">
-          * Service Charge required POS version 4.0.0 or higher.
+          {{ t('order.serviceChargeRule') }}
         </div>
 
         <div class="flex flex-col gap-5 m-5" v-if="data.active">
-          <FmRadioGroup :model-value="chargeTime" label="Charge when" @update:model-value="updateChargeWhen">
-            <FmRadio value="beforeDiscount" label="Before bill discount" />
-            <FmRadio value="afterDiscount" label="After bill discount" />
+          <FmRadioGroup :model-value="chargeTime" :label="t('order.chargeWhen')" @update:model-value="updateChargeWhen">
+            <FmRadio value="beforeDiscount" :label="t('order.beforeBillDiscount')" />
+            <FmRadio value="afterDiscount" :label="t('order.afterBillDiscount')" />
           </FmRadioGroup>
           <RateInput :model-value="data.rate" @update:model-value="handleUpdateRate" />
 
-          <FmRadioGroup :model-value="chargeValue" label="Charge" @update:model-value="updateInclusive">
-            <FmRadio value="exclusive" label="Exclusive" />
-            <FmRadio value="inclusive" label="Inclusive" />
+          <FmRadioGroup :model-value="chargeValue" :label="t('order.selectServiceChargeType')" @update:model-value="updateInclusive">
+            <FmRadio value="exclusive" :label="t('order.exclusive')" />
+            <FmRadio value="inclusive" :label="t('order.inclusive')" />
           </FmRadioGroup>
         </div>
       </FmCard>
     </div>
     <div v-if="data.active">
       <div class="flex flex-col gap-5 m-5">
-        <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-3">Custom Service Charge</div>
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-3 mt-3">{{ t('order.customServiceCharge') }}</div>
         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
           <div v-for="(rule, index) in data.rules" :key="index" class="h-full">
             <FmCard variant="outlined">
@@ -45,7 +45,7 @@
           <div>
             <FmCard variant="outlined" class="flex items-center justify-center w-full h-full border-dashed">
               <FmCardSection class="flex items-center justify-center w-full">
-                <FmButton variant="plain" label="Add service charge" icon="add" @click="createRule"
+                <FmButton variant="plain" :label="t('order.addServiceCharge')" icon="add" @click="createRule"
                   class="border fm-corner-radius-lg border-fm-color-primary" />
               </FmCardSection>
             </FmCard>
@@ -54,7 +54,7 @@
       </div>
     </div>
     <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
-      <FmButton variant="primary" label="Save Setting" class="mr-auto" @click="updateServiceChargeSetting" />
+      <FmButton variant="primary" :label="t('order.saveSetting')" class="mr-auto" @click="updateServiceChargeSetting" />
     </div>
   </div>
   <FmCircularProgress size="xxl" v-else />
@@ -78,6 +78,9 @@ import { percentToAdjustment, type AdjustmentAmount } from '@/helpers/number'
 import { useTableSettingStore } from '@/stores/table-settings'
 import ServiceChargeRule from './ServiceChargeRule.vue'
 import { Pos } from '@feedmepos/core'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
 
 const isLoadingMenu = ref(false)
 const isBeforeDiscountBoolean = computed(() => {

package/src/views/order-settings/sms/SmsSetting.vue

@@ -2,12 +2,23 @@
 import { ref, watch, onMounted, computed } from 'vue'
 import { OrderSettingApi, smsApi } from '@/api/order-setting'
 import { useLoading } from '@/composables/loading'
-import { F_ORDER_TYPE, F_SMS_ACTION, type OrderSettingsDto, type OrderSmsSettingDto } from '@entity'
+import {
+  F_ORDER_DINE_IN_TYPE,
+  F_ORDER_TYPE,
+  F_SMS_ACTION,
+  F_SMS_KEY,
+  type OrderSettingsDto,
+  type OrderSmsSettingDto
+} from '@entity'
 import RestaurantSelector from '../components/RestaurantSelector.vue'
 
 import { useCoreStore } from '@feedmepos/mf-common'
 import { Dinero } from '@feedmepos/core'
 import { useSnackbarFunctions } from '@/components/snackbar'
+import { useI18n } from '@feedmepos/mf-common'
+
+const { t } = useI18n()
+import { SMS } from '@common'
 
 const { showSuccess, showError } = useSnackbarFunctions()
 const { currentRestaurant } = useCoreStore()
@@ -19,8 +30,6 @@ const orderSmsSettings = ref<OrderSmsSettingDto[]>(initOrderSmsSettings())
 const smsCredit = ref()
 
 const editing = ref<number | undefined>(undefined)
-const showTextField = ref<boolean[]>(orderSmsSettings.value.map(() => false))
-const inputValues = ref<string[]>(orderSmsSettings.value.map((sms) => sms.message.raw))
 
 onMounted(() => {
   init()
@@ -34,6 +43,25 @@ watch(
   { immediate: true }
 )
 
+const editingOptionKeys = computed(() => {
+  if (editing.value != undefined) {
+    const setting = orderSmsSettings.value[editing.value]
+    return SMS.readKeyByType(setting.type).map((e, i) => ({ label: e, value: e }))
+  } else return []
+})
+
+const messageKeys = computed(() => {
+  if (editing.value != undefined) {
+    const rawMessage = orderSmsSettings.value[editing.value].message.raw ?? ''
+
+    return [
+      ...new Set(
+        (rawMessage.match(/{{(.*?)}}/g) ?? []).map((e) => e.replace(/{/g, '').replace(/}/g, ''))
+      )
+    ]
+  } else return []
+})
+
 async function readOrderSetting(): Promise<OrderSettingsDto> {
   return await startAsyncCallWithErr(async () => {
     return await OrderSettingApi.getOrderSetting()
@@ -82,26 +110,30 @@ async function init() {
 
 function processEditing(index?: number) {
   editing.value = index
-  if (index !== undefined) {
-    inputValues.value[index] = orderSmsSettings.value[index].message.raw
-  }
 }
 
-function confirmTextField(index: number) {
+async function confirmTextField(index: number) {
   if (index !== undefined) {
-    orderSmsSettings.value[index].message.raw = inputValues.value[index]
-    updateOrderSetting()
-    showTextField.value[index] = false
+    await updateOrderSetting()
   }
 }
 
-function toggleTextField(index: number) {
-  showTextField.value[index] = !showTextField.value[index]
-  if (showTextField.value[index]) {
-    inputValues.value[index] = orderSmsSettings.value[index].message.raw
-  } else {
-    confirmTextField(index)
-  }
+function updateRawMessage(rawMessage: string, index: number) {
+  const settings = [...orderSmsSettings.value]
+  settings[index].message.raw = rawMessage
+
+  orderSmsSettings.value = settings
+}
+
+function updateMessageKey(messageKey: string, option: string, index: number) {
+  const settings = [...orderSmsSettings.value]
+  settings[index].message.keys[messageKey] = F_SMS_KEY.parse(option)
+
+  orderSmsSettings.value = settings
+}
+
+function isEditing(index: number) {
+  return editing.value === index
 }
 
 function initOrderSmsSettings() {
@@ -120,6 +152,26 @@ function initOrderSmsSettings() {
     }
   ]
 }
+
+function convertTypeI18n(type: F_ORDER_TYPE | F_ORDER_DINE_IN_TYPE) {
+  switch (type) {
+    case F_ORDER_TYPE.enum.PICKUP:
+      return t('order.pickup')
+    default:
+      return ''
+  }
+}
+
+function convertActionI18n(action: F_SMS_ACTION) {
+  switch (action) {
+    case F_SMS_ACTION.Enum.ACCEPT:
+      return t('order.accept')
+    case F_SMS_ACTION.Enum.SERVE:
+      return t('order.serve')
+    default:
+      throw new Error('convertActionI18n - Invalid action')
+  }
+}
 </script>
 
 <template>
@@ -130,33 +182,57 @@ function initOrderSmsSettings() {
   <div v-else>
     <FmCard variant="outlined" class="p-5 m-5 w-2/3">
       <div class="flex flex-col gap-">
-        <div class="flex-grow fm-typo-en-title-sm-600 mb-5">Credit</div>
+        <div class="flex-grow fm-typo-en-title-sm-600 mb-5">{{ t('order.credit') }}</div>
 
-        <span class="text-fm-color-neutral-gray-400">Balance</span>
+        <span class="text-fm-color-neutral-gray-400">{{ t('order.balance') }}</span>
         <span class="font-bold">{{ Dinero.fromFdoDinero(smsCredit?.balance).toFormat(true) }}</span>
 
-        <span class="text-fm-color-neutral-gray-400">Price per message</span>
+        <span class="text-fm-color-neutral-gray-400">{{ t('order.pricePerMessage') }}</span>
         <span class="font-bold">{{
           Dinero.fromFdoDinero(smsCredit?.pricePerMessage).toFormat(true)
-          }}</span>
+        }}</span>
       </div>
     </FmCard>
 
     <FmCard variant="outlined" class="p-5 m-5 w-2/3">
       <div class="flex flex-col gap-5">
-        <div class="flex-grow fm-typo-en-title-sm-600">Setting</div>
+        <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.setting') }}</div>
         <div v-for="(sms, i) in orderSmsSettings" :key="i">
-          <FmSwitch :model-value="sms.enable" @update:model-value="(v: boolean) => toggleEnable(v, sms)"
-            :label="`${sms.type} - ${sms.action}`" :sublabel="sms.message.raw" label-placement="right" />
+          <FmSwitch
+            :model-value="sms.enable"
+            @update:model-value="(v: boolean) => toggleEnable(v, sms)"
+            :label="`${convertTypeI18n(sms.type).toUpperCase()} - ${convertActionI18n(sms.action).toUpperCase()}`"
+            :sublabel="sms.message.raw"
+            label-placement="right"
+          />
           <div class="mb-12"></div>
 
-          <div v-if="showTextField[i]">
-            <FmTextField v-model="inputValues[i]" />
+          <div v-if="isEditing(i)">
+            <FmTextField
+              :model-value="orderSmsSettings[i].message.raw"
+              @update:model-value="(message: string) => updateRawMessage(message, i)"
+            />
             <div class="mb-12"></div>
+            <div v-for="(messageKey, index) of messageKeys" :key="index" class="row q-py-xs">
+              <div class="my-2 col self-center flex flex-row justify-between">
+                <div class="col self-center">{{ index + 1 }}. {{ messageKey }}</div>
+                <FmSelect
+                  class="w-1/2"
+                  :items="editingOptionKeys"
+                  :model-value="orderSmsSettings[i].message.keys[messageKey]"
+                  @update:model-value="(value: string) => updateMessageKey(messageKey, value, i)"
+                />
+              </div>
+            </div>
           </div>
-          <FmButton variant="secondary" text-color="primary" border-color="primary"
-            :label="showTextField[i] ? 'Confirm' : 'Edit'" :icon="showTextField[i] ? '' : 'edit'"
-            @click="showTextField[i] ? confirmTextField(i) : toggleTextField(i)" />
+          <FmButton
+            variant="secondary"
+            text-color="primary"
+            border-color="primary"
+            :label="isEditing(i) ? t('order.confirm') : t('order.edit')"
+            :icon="isEditing(i) ? '' : 'edit'"
+            @click="isEditing(i) ? confirmTextField(i) : processEditing(i)"
+          />
           <div class="mb-12"></div>
         </div>
       </div>

package/tsconfig.app.json

@@ -5,12 +5,14 @@
     "src/**/*",
     "src/**/*.vue",
     "../../package/entity/**/*",
-    "../../common/**/*"
+    "../../common/**/*",
+    "src/**/*.json"
   ],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "rootDir": "./../..",
     "composite": true,
+    "resolveJsonModule": true,
     "baseUrl": ".",
     "isolatedModules": true,
     "types": ["googlemaps"],

package/tsconfig.json

@@ -13,6 +13,7 @@
     "src/*",
     "../../package/entity/*",
     "../../package/entity/index.ts",
-    "../../common/*"
+    "../../common/*",
+    "src/**/*.json"
   ]
 }

package/tsconfig.node.json

@@ -5,10 +5,12 @@
     "vitest.config.*",
     "cypress.config.*",
     "nightwatch.conf.*",
-    "playwright.config.*"
+    "playwright.config.*",
+    "src/**/*.json"
   ],
   "compilerOptions": {
     "composite": true,
+    "resolveJsonModule": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "types": ["node"]

package/vite.config.ts

@@ -12,7 +12,8 @@ export default defineConfig((env) => {
       preserveSymlinks: true,
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
-        '@entity': fileURLToPath(new URL('./../../package/entity', import.meta.url))
+        '@entity': fileURLToPath(new URL('./../../package/entity', import.meta.url)),
+        '@common': fileURLToPath(new URL('./../../common', import.meta.url))
       }
     },
     define: {

package/dist/KioskSettingView-_h6R-Crz.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./app-E2uM-UYx.js";
-export {
-  f as default
-};