@feedmepos/mf-order-setting 0.0.26 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-order-setting",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "module": "./dist/app.js",
   "license": "UNLICENSED",
@@ -25,8 +25,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@feedmepos/core": "^2.14.0",
-    "@feedmepos/menu": "^1.5.6",
+    "@feedmepos/core": "^2.14.10",
+    "@feedmepos/menu": "^1.5.14",
     "@feedmepos/mf-common": "1.20.0-beta.2",
     "@feedmepos/ordering": "^0.0.3",
     "@feedmepos/ui-library": "1.5.2-beta.1",

package/src/api/kiosk/index.ts

@@ -1,22 +1,27 @@
 import { getData, restaurantClientInstance } from '@/api';
 import { KioskOtpDto, KioskDeviceDto } from '@entity';
 
-async function requestOtp() : Promise<KioskOtpDto>{
+async function requestOtp(): Promise<KioskOtpDto> {
     const result = await restaurantClientInstance().get('/kiosk/otp');
     return getData<KioskOtpDto>(result);
 }
 
-async function getDevices(): Promise<KioskDeviceDto[]>{
+async function getDevices(): Promise<KioskDeviceDto[]> {
     const result = await restaurantClientInstance().get('/kiosk/devices');
     return getData<KioskDeviceDto[]>(result);
 }
 
-async function unbind(machineId: string): Promise<void>{
+async function unbind(machineId: string): Promise<void> {
     await restaurantClientInstance().delete(`/kiosk/unbind/${machineId}`);
 }
 
+async function updateDevicePin(pinInfo: string, machineId: string): Promise<void> {
+    await restaurantClientInstance().put(`/kiosk/updateDevicePin/${machineId}`, { pinInfo });
+}
+
 export const KioskApi = {
     requestOtp,
     getDevices,
-    unbind
+    unbind,
+    updateDevicePin
 };

package/src/app.ts

@@ -1,10 +1,13 @@
 import enUS from "./locales/en-US.json"
 import zhCN from "./locales/zh-CN.json"
+import thTh from "./locales/th-TH.json"
+
 export type AppMessagesSchema = typeof enUS
 
 export const i18nMessages = {
     "en-US": enUS,
-    "zh-CN": zhCN
+    "zh-CN": zhCN,
+    "th-TH": thTh,
 }
 
 export { default as FmApp } from './App.vue'

package/src/locales/th-TH.json

@@ -252,6 +252,13 @@
         "updatePickupSetting": "อัปเดตการตั้งค่าการรับสินค้า",
         "updateSetting": "อัปเดตการตั้งค่า",
         "vendorBearPercentage": "เปอร์เซ็นต์ที่ผู้ขายรับผิดชอบ",
-        "wednesday": "วันพุธ"
+        "wednesday": "วันพุธ",
+        "externalDelivery": "จัดการการจัดส่ง External",
+        "manageExternalDelivery": "จัดการการจัดส่งภายนอก",
+        "deliveryCatalog": "แคตตาล็อกการจัดส่ง",
+        "pickupCatalog": "แคตตาล็อกการรับสินค้า",
+        "DeliverySettingUpdated": "อัปเดตการตั้งค่าการจัดส่งแล้ว",
+        "selectPlatform": "เลือกแพลตฟอร์ม",
+        "platform": "แพลตฟอร์ม"
     }
 }

package/src/modules/kiosk/interface.ts

@@ -1,4 +1,4 @@
-import { Printer, ScannerInfoDto, KioskTerminalInfoDto } from '@entity';
+import { Printer, ScannerInfoDto, KioskTerminalInfoDto, F_ORDER_PLATFORM_TYPE } from '@entity';
 export interface MfKioskDeviceConfigs {
     printerInfo?: Printer,
     scannerInfo?: ScannerInfoDto,
@@ -10,6 +10,10 @@ export interface MfKioskDevice {
     machineId: string,
     config: MfKioskDeviceConfigs,
     activatedAt: Date,
+    deviceAppType?: F_ORDER_PLATFORM_TYPE,
+    slotInfo?: string,
+    pinInfo?: string,
+    deviceAppVersion?: string,
 }
 
 

package/src/stores/kiosk/index.ts

@@ -5,7 +5,7 @@ import { type MfKioskDevice } from "../../modules/kiosk/interface";
 import { KioskMapper } from "./mapper";
 
 interface State {
-    otp : string;
+    otp: string;
     devices: MfKioskDevice[];
 }
 
@@ -16,25 +16,30 @@ export const useKioskStore = defineStore('kiosk', () => {
         devices: [],
     });
 
-    async function requestOtp(){
+    async function requestOtp() {
         const result = await KioskApi.requestOtp();
         state.value.otp = result.otp;
     }
 
-    async function getDevices(){
+    async function getDevices() {
         const result = await KioskApi.getDevices();
         state.value.devices = result.map((r) => KioskMapper.toMfKioskDevice(r));
     }
 
-    async function unbind(machineId: string){
+    async function unbind(machineId: string) {
         await KioskApi.unbind(machineId);
         await getDevices();
     }
 
+    async function updateDevicePin(pinInfo: string, machineId: string) {
+        await KioskApi.updateDevicePin(pinInfo, machineId);
+    }
+
     return {
         state: state.value,
         requestOtp,
         getDevices,
         unbind,
+        updateDevicePin
     }
 });

package/src/stores/kiosk/mapper.ts

@@ -1,7 +1,7 @@
 import { type MfKioskDevice } from "@/modules/kiosk/interface";
 import type { KioskDeviceDto } from "@entity";
 
-const toMfKioskDevice = (dto : KioskDeviceDto) : MfKioskDevice => {
+const toMfKioskDevice = (dto: KioskDeviceDto): MfKioskDevice => {
     return {
         name: dto.name ?? 'N/A',
         machineId: dto.machineId,
@@ -11,6 +11,10 @@ const toMfKioskDevice = (dto : KioskDeviceDto) : MfKioskDevice => {
             terminalInfo: dto.terminalInfo ?? undefined,
         },
         activatedAt: tokenToActivatedAt(dto.token),
+        deviceAppType: dto.deviceAppType ?? undefined,
+        slotInfo: dto.slotInfo ?? undefined,
+        pinInfo: dto.pinInfo ?? undefined,
+        deviceAppVersion: dto.deviceAppVersion ?? undefined,
     };
 };
 

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

@@ -1,53 +1,118 @@
 <template>
-
-    <div class="border fm-corner-radius-lg flex justify-between pr-[1rem] w-11/12">
-        <FmSideSheet :header="t('order.deviceDetails')" dismiss-away class="w-full" :maxWidth="700">
-            <template #side-sheet-button>
-                <FmListItem class="flex-1" :label="device.name"
-                    :sublabel="`${t('order.activatedDate')}: ${dayjs(device.activatedAt).format('DD MMM YYYY HH:mm')}`">
-                </FmListItem>
-            </template>
-            <div class="py-[1rem] flex flex-col gap-6">
-                <span class="fm-typo-en-title-sm-600">{{ device.name }}</span>
-                <div v-for="config in configs.filter(c => c[1])"
-                    class="w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2">
-                    <span class="fm-typo-en-title-sm-600" v-if="config[1]">{{ config[0] }}</span>
-                    <div class="flex flex-col gap-1" v-if="config[1]" v-for="configEntry in Object.entries(config[1])">
-                        <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ configEntry[0]
-                            }}</span>
-                        <span class="fm-typo-en-body-lg-600 block">{{ configEntry[1] == '' ? '-' : configEntry[1]
-                            }}</span>
-                    </div>
-                </div>
-            </div>
-        </FmSideSheet>
-        <FmButton variant="plain" append-icon="link_off" class=" text-fm-color-system-error-300 align-middle my-auto"
-            @click="openUnbindDialog" />
-    </div>
+  <div class="border fm-corner-radius-lg flex justify-between pr-[1rem] w-11/12">
+    <FmSideSheet
+      :header="t('order.deviceDetails')"
+      dismiss-away
+      class="w-full"
+      :maxWidth="700"
+      @on:clickedAway="closeUpdateDevicePin"
+    >
+      <template #side-sheet-button>
+        <FmListItem
+          class="flex-1"
+          :label="device.name"
+          :sublabel="`${t('order.activatedDate')}: ${dayjs(device.activatedAt).format('DD MMM YYYY HH:mm')}`"
+        >
+        </FmListItem>
+      </template>
+      <div v-if="!showPinSetting" class="py-[1rem] flex flex-col gap-6">
+        <span class="fm-typo-en-title-sm-600">{{ device.name }}</span>
+        <div class="w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2">
+          <span class="fm-typo-en-title-sm-600 mb-3">App Info</span>
+          <div class="flex flex-col gap-1 mb-2">
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Type</span>
+            <span class="fm-typo-en-body-lg-600 block">{{ appType }}</span>
+          </div>
+          <div class="flex flex-col gap-1 mb-2">
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Version</span>
+            <span class="fm-typo-en-body-lg-600 block">{{
+              device.deviceAppVersion ?? 'Below 0.0.42'
+            }}</span>
+          </div>
+          <div class="flex flex-col gap-1 mb-2">
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">PIN Code</span>
+            <span class="fm-typo-en-body-lg-600 block">{{ isPinUpdate ? 'Yes' : 'No' }}</span>
+          </div>
+          <FmButton
+            class="w-auto"
+            variant="primary"
+            :label="device?.pinInfo ? 'Reset Device PIN' : 'Set Device PIN'"
+            @click="showUpdateDevicePin"
+          />
+        </div>
+        <div
+          v-for="config in configs.filter((c) => c[1])"
+          class="w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2"
+        >
+          <span class="fm-typo-en-title-sm-600" v-if="config[1]">{{ config[0] }}</span>
+          <div
+            class="flex flex-col gap-1"
+            v-if="config[1]"
+            v-for="configEntry in Object.entries(config[1])"
+          >
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{
+              configEntry[0]
+            }}</span>
+            <span class="fm-typo-en-body-lg-600 block">{{
+              configEntry[1] == '' ? '-' : configEntry[1]
+            }}</span>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <div class="py-[1rem] flex flex-col gap-6 text-center items-center">
+          <div class="flex flex-col gap-1 mb-2">
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ pinText }}</span>
+            <span class="mt-5 block">
+              <FmPinField v-if="!isPinEntered" :length="4" @complete="(val) => pinEntered(val)" />
+              <FmPinField v-if="isPinEntered" :length="4" @complete="(val) => pinEntered(val)" />
+            </span>
+          </div>
+          <FmButton
+            class="w-1/3"
+            variant="secondary"
+            label="Cancel reset PIN"
+            @click="closeUpdateDevicePin"
+          />
+        </div>
+      </div>
+    </FmSideSheet>
+    <FmButton
+      variant="plain"
+      append-icon="link_off"
+      class="text-fm-color-system-error-300 align-middle my-auto"
+      @click="openUnbindDialog"
+    />
+  </div>
 </template>
 <script setup lang="ts">
-import type { MfKioskDevice } from '@/modules/kiosk/interface';
-import { type SnackbarPosition, useDialog, useSnackbar } from '@feedmepos/ui-library';
-import KioskUnbindConfirm from './KioskUnbindConfirm.vue';
-import { computed, ref } from 'vue';
-import { useKioskStore } from '@/stores/kiosk';
-import dayjs from 'dayjs';
+import type { MfKioskDevice } from '@/modules/kiosk/interface'
+import { type SnackbarPosition, useDialog, useSnackbar } from '@feedmepos/ui-library'
+import KioskUnbindConfirm from './KioskUnbindConfirm.vue'
+import { computed, onUnmounted, 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();
-const Kiosk = useKioskStore();
+const Dialog = useDialog()
+const Snackbar = useSnackbar()
+const Kiosk = useKioskStore()
+const showPinSetting = ref(false)
 
 interface Props {
-    device: MfKioskDevice,
+  device: MfKioskDevice
 }
-const props = defineProps<Props>();
-const unBindTextFieldValue = ref<string>('');
+const props = defineProps<Props>()
+const unBindTextFieldValue = ref<string>('')
 
 const configs = computed(() => {
-    return Object.entries(props.device.config);
+  return Object.entries(props.device.config)
+})
+
+const appType = computed(() => {
+  return props.device?.deviceAppType === 'TABLET_APP' ? 'Tablet App' : 'Kiosk App'
 })
 
 // function showDeviceDetails() {
@@ -61,49 +126,106 @@ const configs = computed(() => {
 // }
 
 function openUnbindDialog() {
-    unBindTextFieldValue.value = '';
-    Dialog.open({
-        title: t('order.unbindKioskDevice'),
-        contentComponent: KioskUnbindConfirm,
-        contentComponentProps: {
-            machineId: props.device.machineId,
-            'onUpdate:modelValue': (v: string) => {
-                unBindTextFieldValue.value = v;
-            }
-        },
-        dismissAway: false,
-        primaryActions: {
-            text: t('order.unbind'),
-            variant: 'destructive',
-            close: false,
-        },
-        secondaryActions: {
-            text: t('order.cancel'),
-            variant: 'tertiary',
-            close: true,
-        }
-    }).onPrimary(async () => {
-        if (unBindTextFieldValue.value == props.device.machineId) {
-            await unbind();
-            Snackbar.open({
-                type: 'success',
-                message: t('order.unbindSuccess'),
-                position: 'bottom' as SnackbarPosition,
-            });
-            Dialog.close();
-        } else {
-            Snackbar.open({
-                type: 'warning',
-                message: t('order.unbindWarning'),
-                position: 'bottom' as SnackbarPosition,
-
-            });
-        }
-    });
+  unBindTextFieldValue.value = ''
+  Dialog.open({
+    title: t('order.unbindKioskDevice'),
+    contentComponent: KioskUnbindConfirm,
+    contentComponentProps: {
+      machineId: props.device.machineId,
+      'onUpdate:modelValue': (v: string) => {
+        unBindTextFieldValue.value = v
+      }
+    },
+    dismissAway: false,
+    primaryActions: {
+      text: t('order.unbind'),
+      variant: 'destructive',
+      close: false
+    },
+    secondaryActions: {
+      text: t('order.cancel'),
+      variant: 'tertiary',
+      close: true
+    }
+  }).onPrimary(async () => {
+    if (unBindTextFieldValue.value == props.device.machineId) {
+      await unbind()
+      Snackbar.open({
+        type: 'success',
+        message: t('order.unbindSuccess'),
+        position: 'bottom' as SnackbarPosition
+      })
+      Dialog.close()
+    } else {
+      Snackbar.open({
+        type: 'warning',
+        message: t('order.unbindWarning'),
+        position: 'bottom' as SnackbarPosition
+      })
+    }
+  })
 }
 
-async function unbind() {
-    await Kiosk.unbind(props.device.machineId);
+const isPinUpdate = computed(() => {
+  return props.device?.pinInfo
+})
+
+const pinText = computed(() => {
+  return isPinEntered.value ? 'Re-enter new PIN' : 'Enter new PIN'
+})
+
+const isPinEntered = ref(false)
+const enteredPin = ref()
+const reEnteredPin = ref()
+
+function showUpdateDevicePin() {
+  showPinSetting.value = true
+}
+
+function closeUpdateDevicePin() {
+  isPinEntered.value = false
+  enteredPin.value = null
+  reEnteredPin.value = null
+  showPinSetting.value = false
 }
 
-</script>
+function pinEntered(pinVal: string) {
+  if (isPinEntered.value) {
+    reEnteredPin.value = pinVal
+    validatePin()
+  } else {
+    enteredPin.value = pinVal
+    isPinEntered.value = true
+  }
+}
+
+function checkCurrentPin(pinVal: string) {
+  return isPinUpdate.value && pinVal !== props.device?.pinInfo
+}
+
+async function validatePin() {
+  if (enteredPin.value === reEnteredPin.value) {
+    await updateDevicePin()
+    Snackbar.open({
+      type: 'success',
+      message: 'Successfuly update device PIN',
+      position: 'top' as SnackbarPosition
+    })
+  } else {
+    Snackbar.open({
+      type: 'error',
+      message: 'Entered PIN not the same, please try again',
+      position: 'top' as SnackbarPosition
+    })
+  }
+  closeUpdateDevicePin()
+}
+
+async function updateDevicePin() {
+  await Kiosk.updateDevicePin(enteredPin.value, props.device.machineId)
+}
+
+async function unbind() {
+  await Kiosk.unbind(props.device.machineId)
+}
+</script>

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

@@ -459,7 +459,7 @@ const foodpanda = computed<FdoFoodpandaSettings>(() => {
   return {
     ...deliveryData.initFoodpandaDelivery(),
     ...foodpandaSetting.value,
-    autoAccept: foodpandaSetting?.value?.autoAccept ?? false,
+    autoAccept: foodpandaSetting?.value?.autoAccept ?? true,
     ignoreDiscount: foodpandaSetting?.value?.ignoreDiscount ?? false
   }
 })

package/src/views/order-settings/delivery/delivery.data.ts

@@ -39,7 +39,7 @@ export function initFoodpandaDelivery(): FdoFoodpandaSettings {
       discountCampaigns: [],
       commissionRate: 0
     },
-    autoAccept: false
+    autoAccept: true
   };
 }
 
@@ -72,7 +72,7 @@ function initExternalDelivery(): FdoExternalSetting {
     _id: '',
     enable: false,
     config: {
-      autoAccept: false,
+      autoAccept: true,
       autoSend: false,
       autoCloseBill: false,
     },

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

@@ -5,6 +5,7 @@
       :label="t('order.activateIntegration', { integrationType: t('order.auto') })"
       label-placement="right"
       @update:model-value="updateEnable"
+      :disabled="!canEdit"
     />
     <div v-if="data.enable">
       <FmCard variant="outlined" class="mt-10 p-5">
@@ -17,6 +18,7 @@
             :label="t('order.platform')"
             :items="platformOptions"
             @update:model-value="updatePlatform"
+            :disabled="!canEdit"
           />
 
           <FmSelect
@@ -26,6 +28,7 @@
             :label="t('order.deliveryCatalog')"
             :items="menuStore.catalogOptions"
             @update:model-value="updateDeliveryMenuCatalog"
+            :disabled="!canEdit"
           />
 
           <FmSelect
@@ -35,11 +38,17 @@
             :label="t('order.pickupCatalog')"
             :items="menuStore.catalogOptions"
             @update:model-value="updatePickupMenuCatalog"
+            :disabled="!canEdit"
           />
         </div>
 
         <div class="flex flex-row mt-5">
-          <FmButton variant="primary" :label="t('order.syncMenu')" @click="syncMenu()" />
+          <FmButton
+            variant="primary"
+            :label="t('order.syncMenu')"
+            @click="syncMenu()"
+            :disabled="!canEdit"
+          />
         </div>
       </FmCard>
     </div>
@@ -49,7 +58,7 @@
 <script setup lang="ts">
 import { type PropType, computed, reactive, ref, watch } from 'vue'
 import { F_ORDER_PLATFORM, type FdoExternalSetting } from '@entity'
-import { useI18n } from '@feedmepos/mf-common'
+import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 import { clone } from '@/helpers/object'
 import { useMenuStore } from '@/stores/menu/menu'
 import { useLoading } from '@/composables/loading'
@@ -59,6 +68,9 @@ import { useSnackbarFunctions } from '@/components/snackbar'
 const { showSuccess } = useSnackbarFunctions()
 const { t } = useI18n()
 const menuStore = useMenuStore()
+const CoreStore = useCoreStore()
+
+const canEdit = computed(() => CoreStore.sessionUser.value?.role.isAdmin ?? false)
 
 const props = defineProps({
   initialValue: {

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

@@ -49,11 +49,11 @@ const modelValue = computed<IntegratedDeliverySettingData>(() => {
       catalogId: auto?.catalogId ?? null,
       commissionRate: auto.reportConfig?.commissionRate ?? 0,
       lastSynchronize: auto.lastSynchronize ?? '',
-      autoAccept: auto.autoAccept ?? false,
+      autoAccept: true,
       ignoreDiscount: auto.ignoreDiscount ?? false,
       status: auto.status,
       updatedAt: auto.updatedAt,
-      sstInclusive: auto.sstInclusive,
+      sstInclusive: auto.sstInclusive ?? false,
       menuSyncError: auto.menuSyncError
     }
   }
@@ -232,37 +232,5 @@ async function cancelTestOrder() {
     @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">
-        {{ 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">
-          <FmCard variant="outlined" class="p-5 flex justify-between items-center mb-5">
-            <div>
-              <span class="font-bold"
-                >{{ campaign.name }} ({{ campaign.vendorBearPercentage }}%)</span
-              >
-              <br />
-              {{ formatCampaignDate(campaign.date) }}
-            </div>
-            <div>
-              <div class="flex flex-row">
-                <FmButton append-icon="edit" variant="tertiary" @click="updateCampaign(index)" />
-                <FmButton append-icon="delete" variant="tertiary" @click="deleteCampaign(index)" />
-              </div>
-            </div>
-          </FmCard>
-        </div>
-      </div>
-    </template>
   </IntegratedDelivery>
 </template>