@feedmepos/mf-order-setting 0.0.26 → 0.0.28

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/OrderSettingsView.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="py-[1.5rem]">
-    <FmPageHead :title="t('order.orderSetting')"/>
+    <FmPageHead :title="t('order.orderSetting')" />
     <div class="flex px-[1.5rem]">
       <div class="flex-[2_2_0%] overflow-auto">
-        <FmTabs v-model:model-value="selectedOrderSetting" :items="settingItem" />
+        <FmTabs v-model:model-value="selectedOrderSetting" :items="settingItem" :showMoreAt="99" />
       </div>
     </div>
   </div>
@@ -18,11 +18,20 @@ import DineInSetting from './dine-in/DineInSetting.vue'
 import PickUpSetting from './pickup/PickUpSetting.vue'
 import SmsSetting from './sms/SmsSetting.vue'
 import ServiceChargeSetting from './servicecharge/ServiceChargeSetting.vue'
+import DiscountRuleSetting from './discount-rule/DiscountRuleSetting.vue'
+
 import GeneralSetting from './general/GeneralSetting.vue'
 import { useI18n } from '@feedmepos/mf-common'
 
 const { t } = useI18n()
-type OrderSettingMenuItemValue = 'delivery' | 'pickup' | 'dinein' | 'servicecharge' | 'sms' | 'general'
+type OrderSettingMenuItemValue =
+  | 'delivery'
+  | 'pickup'
+  | 'dinein'
+  | 'servicecharge'
+  | 'sms'
+  | 'discountRule'
+  | 'general'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
 const settingItem = computed<FmTabProps[]>(() => [
@@ -30,8 +39,9 @@ const settingItem = computed<FmTabProps[]>(() => [
   { label: t('order.pickup'), value: 'pickup' },
   { label: t('order.dineIn'), value: 'dinein' },
   { label: t('order.serviceCharge'), value: 'servicecharge' },
+  { label: t('order.discountRule.title'), value: 'discountRule' },
   { label: t('order.sms'), value: 'sms' },
-  { label: t('order.general'), value: 'general'},
+  { label: t('order.general'), value: 'general' }
 ])
 
 const currentComponent = computed(() => {
@@ -46,7 +56,9 @@ const currentComponent = computed(() => {
       return SmsSetting
     case 'servicecharge':
       return ServiceChargeSetting
-    case 'general': 
+    case 'discountRule':
+      return DiscountRuleSetting
+    case 'general':
       return GeneralSetting
   }
 })

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>

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

@@ -53,10 +53,9 @@ const emits = defineEmits<{
 }>()
 
 const menuStore = useMenuStore()
-// const userStore = useUserStore();
-const { sessionUser } = useCoreStore()
+const CoreStore = useCoreStore()
 
-const canEdit = computed(() => sessionUser.value?.role.isAdmin ?? false)
+const canEdit = computed(() => CoreStore.sessionUser.value?.role.isAdmin ?? false)
 
 function updateManual(manual: FdoLinkedDelivery | null) {
   emits('update:model-value', {
@@ -120,7 +119,6 @@ type OrderSettingKey = 'autoAcceptOrder' | 'autoCloseBill' | 'ignoreDiscount' |
 const orderSettingValue = computed(() => {
   const { autoAccept, autoCloseBill, ignoreDiscount, sstInclusive } = props.modelValue.auto
   const value: OrderSettingKey[] = []
-  if (autoAccept) value.push('autoAcceptOrder')
   if (autoCloseBill) value.push('autoCloseBill')
   if (ignoreDiscount) value.push('ignoreDiscount')
   if (sstInclusive) value.push('sstInclusive')
@@ -141,12 +139,6 @@ const orderSettingOptions = computed<
       value: 'autoCloseBill'
     }
   ]
-  if (props.modelValue.auto.autoAccept !== undefined) {
-    options.unshift({
-      label: t('order.allowedAutoAcceptOrder'),
-      value: 'autoAcceptOrder'
-    })
-  }
   if (props.modelValue.auto.autoAccept !== undefined) {
     options.push({
       label: t('order.ignoreDiscount'),
@@ -193,6 +185,7 @@ function convertStatusI18n(status: string) {
   />
   <div v-if="canUseAutoDeliveryIntegration === true" class="mt-10">
     <FmSwitch
+      :disabled="!canEdit"
       :model-value="modelValue.auto.enable"
       :label="t('order.activateIntegration', { integrationType: t('order.auto') })"
       label-placement="right"
@@ -202,6 +195,7 @@ function convertStatusI18n(status: string) {
     <div v-if="modelValue.auto.enable">
       <FmCard variant="outlined" class="mt-10 p-5">
         <FmTextField
+          :disabled="!canEdit"
           :model-value="modelValue.auto.integrationId"
           :label="t('order.remoteId')"
           @update:model-value="updateIntegrateId"
@@ -217,6 +211,7 @@ function convertStatusI18n(status: string) {
               :label="item.label"
               :value="item.value"
               @update:model-value="updateOrderSettings"
+              :disabled="!canEdit"
             />
           </div>
         </div>
@@ -226,6 +221,7 @@ function convertStatusI18n(status: string) {
             :model-value="modelValue.auto.commissionRate"
             :label="t('order.commission')"
             @update:model-value="updateCommission"
+            :disabled="!canEdit"
           >
             <template #append>%</template>
           </FmTextField>
@@ -238,6 +234,7 @@ function convertStatusI18n(status: string) {
             :label="t('order.catalog')"
             :items="menuStore.catalogOptions"
             @update:model-value="updateMenuCatalog"
+            :disabled="!canEdit"
           />
         </div>
 
@@ -250,6 +247,7 @@ function convertStatusI18n(status: string) {
               v-if="modelValue.auto.status === 'FAILED' && modelValue.auto.menuSyncError !== null"
               :content="modelValue.auto.menuSyncError"
               :zIndex="1000"
+              :disabled="!canEdit"
             >
               <FmIcon name="info" size="sm" />
             </FmTooltip>
@@ -261,7 +259,12 @@ function convertStatusI18n(status: string) {
           </div>
         </div>
         <div class="flex flex-row">
-          <FmButton variant="primary" :label="t('order.syncMenu')" @click="emits('syncMenu')" />
+          <FmButton
+            variant="primary"
+            :label="t('order.syncMenu')"
+            @click="emits('syncMenu')"
+            :disabled="!canEdit"
+          />
 
           <div
             v-if="modelValue.auto.lastSynchronize"
@@ -272,7 +275,7 @@ function convertStatusI18n(status: string) {
           </div>
         </div>
 
-        <slot :editable="canEdit" />
+        <slot :editable="!canEdit" />
       </FmCard>
     </div>
   </div>