@feedmepos/mf-order-setting 0.0.22 → 0.0.24

package/src/views/kiosk/settings/KioskSettingView.vue

@@ -24,6 +24,14 @@
         @update:model-value="updateMenuItemSetting"
       />
     </div>
+    <div class="flex flex-col gap-2">
+      <span class="fm-typo-en-title-sm-600">{{ t('order.displayPaxDialogTitle') }}</span>
+      <KioskEnablePaxDialogSection
+        :key="'enable-pax-dialog-' + restaurantId"
+        :v="enablePaxDialog"
+        @update-enable-pax-dialog="updateEnablePaxDialogSetting"
+      />
+    </div>
     <div class="flex flex-col gap-2">
       <span class="fm-typo-en-title-sm-600">{{ t('order.acceptedPayment') }}</span>
       <span class="fm-typo-en-title-sm-400 font-bold">{{ t('order.configuration') }}</span>
@@ -70,6 +78,7 @@ import type {
 import { useLoading } from '@/composables/loading'
 import { useSnackbar } from '@feedmepos/ui-library'
 import { useI18n } from '@feedmepos/mf-common'
+import KioskEnablePaxDialogSection from './KioskEnablePaxDialogSection.vue'
 
 const { t } = useI18n()
 
@@ -106,7 +115,12 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
             min: f.dineIn.displayStand.standSlotRange.min ?? 0,
             max: f.dineIn.displayStand.standSlotRange.max ?? 10
           },
-          prefix: f.dineIn.displayStand.prefix ?? ''
+          prefix: f.dineIn.displayStand.prefix ?? '',
+          enablePaxDialog: f.dineIn.displayStand.enablePaxDialog,
+          submitOrderInstruction: {
+            payAtCounter: f.dineIn.displayStand.submitOrderInstruction.payAtCounter ?? null,
+            paid: f.dineIn.displayStand.submitOrderInstruction.paid ?? null
+          }
         }
       }
     }
@@ -134,7 +148,12 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
               min: displayStand.standSlotRange.min,
               max: displayStand.standSlotRange.max
             },
-            prefix: displayStand.prefix ?? ''
+            prefix: displayStand.prefix ?? '',
+            enablePaxDialog: displayStand.enablePaxDialog,
+            submitOrderInstruction: {
+              payAtCounter: displayStand.submitOrderInstruction.payAtCounter ?? null,
+              paid: displayStand.submitOrderInstruction.paid ?? null
+            }
           }
         }
       }
@@ -154,7 +173,12 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
           min: f.dineIn.displayStand.standSlotRange.min ?? 0,
           max: f.dineIn.displayStand.standSlotRange.max ?? 10
         },
-        prefix: f.dineIn.displayStand.prefix ?? ''
+        prefix: f.dineIn.displayStand.prefix ?? '',
+        enablePaxDialog: f.dineIn.displayStand.enablePaxDialog,
+        submitOrderInstruction: {
+          payAtCounter: f.dineIn.displayStand.submitOrderInstruction.payAtCounter ?? null,
+          paid: f.dineIn.displayStand.submitOrderInstruction.paid ?? null
+        }
       }
     }
   }
@@ -187,6 +211,20 @@ const allowEPayment = computed(() => {
     return paymentTypes.includes(F_ORDER_PAYMENT_TYPE.enum.ePayment);
 })
 
+async function updateEnablePaxDialogSetting(v: boolean) {
+  kioskOrderSettingForm.value.dineIn.displayStand.enablePaxDialog = v
+  kioskOrderSettingForm.value.dineIn.pickUp.enablePaxDialog = v
+}
+
+const enablePaxDialog = computed(() => {
+  return (
+    ((kioskOrderSettingForm.value.dineIn.displayStand.enabled &&
+      kioskOrderSettingForm.value.dineIn.displayStand.enablePaxDialog) ||
+      kioskOrderSettingForm.value.dineIn.pickUp.enablePaxDialog) ??
+    false
+  )
+})
+
 async function submitForm() {
   if (validKioskOrderSetting.value) {
     const kioskOrderSetting = validKioskOrderSetting.value

package/src/views/kiosk/settings/KioskTakeawaySection.vue

@@ -4,14 +4,21 @@
       :model-value="v.enabled"
       :label="t('order.takeaway')"
       label-placement="right"
-      @update:model-value="updateTakeawaySetting"
+      @update:model-value="updateTakeawaySettingEnabled"
       class="mb-5"
     />
+    <kiosk-instruction-section
+      v-show="v.enabled"
+      :fields="instructionFields"
+      @update:field="updateTakeawaySettingInstructions"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import type { KioskTakeawaySettingForm } from '@/modules/order-setting/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
+import { computed } from 'vue'
+import KioskInstructionSection from './KioskInstructionSection.vue'
 
 const { t } = useI18n()
 
@@ -23,10 +30,37 @@ interface Emits {
   (e: 'updateTakeaway', setting: KioskTakeawaySettingForm): void
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 const emits = defineEmits<Emits>()
 
-function updateTakeawaySetting(v: boolean) {
-  emits('updateTakeaway', { enabled: v })
+const instructionFields = computed(() => {
+  return [
+    {
+      id: 'payAtCounter',
+      value: props.v.submitOrderInstruction.payAtCounter ?? undefined,
+      title: t('order.payAtCounter'),
+      defaultValue: 'Collect your transaction slip below and present it to the cashier'
+    },
+    {
+      id: 'paid',
+      value: props.v.submitOrderInstruction.paid ?? undefined,
+      title: t('order.paid'),
+      defaultValue: "Please wait as we prepare your food. We'll call your number when it's ready."
+    }
+  ]
+})
+
+function updateTakeawaySettingEnabled(v: boolean) {
+  emits('updateTakeaway', { ...props.v, enabled: v })
+}
+
+function updateTakeawaySettingInstructions(id: string, instructions: string) {
+  emits('updateTakeaway', {
+    ...props.v,
+    submitOrderInstruction: {
+      ...props.v.submitOrderInstruction,
+      [id]: instructions
+    }
+  })
 }
 </script>

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

@@ -479,17 +479,12 @@ watch(
           class="ml-auto"
         />
       </div>
-      <div class="fm-corner-radius-lg flex flex-col">
-        <div
-          v-for="(item, index) in filteredTable"
-          :key="index"
-          class="flex flex-col pl-6"
-          v-if="showTable"
-        >
+      <div class="fm-corner-radius-lg flex flex-col" v-if="showTable">
+        <div v-for="(item, index) in filteredTable" :key="index" class="flex flex-col pl-6">
           <FmCheckbox
+            :value="item.name"
             :model-value="selectedTables[item.name].isSelected"
             :label="item.name"
-            value=""
             @update:model-value="(v: boolean) => handleChildUpdateTable(v, item.name)"
           />
         </div>