@feedmepos/mf-order-setting 0.0.72-test.1 → 0.0.74-dev

package/src/views/kiosk/KioskView.vue

@@ -1,58 +1,63 @@
-<template>
-  <div class="py-[1.5rem]">
-    <FmPageHead :title="t('order.kiosk')" />
-    <div class="px-[1.5rem]">
-      <FmTabs v-model:model-value="selectedMenuItem" :items="menuItems"></FmTabs>
-      <div class="pt-[1.5rem]">
-        <div class="flex flex-col gap-10">
-          <div class="flex flex-col gap-2">
-            <span class="fm-typo-en-title-sm-600"> {{ t('order.activateLocation') }} </span>
-            <span class="fm-typo-en-title-sm-400"> {{ t('order.selectRestaurant') }}: </span>
-            <FmSelect
-              class="w-1/2"
-              v-model="currentSelect"
-              :items="restaurantItems"
-              :placeholder="t('order.selectItem')"
-              @update:model-value="selectRestaurant"
-            />
-          </div>
-          <KioskDevicesView
-            v-if="selectedMenuItem == 'device'"
-            :devices="devices"
-            @request-otp="requestOtp"
-          />
-          <KioskSettingView
-            :key="`KioskSettingView-${currentRestaurantId}`"
-            v-if="selectedMenuItem == 'setting'"
-            :restaurant-id="currentRestaurantId"
-            @update-kiosk-order-setting="updateKioskOrderSetting"
-            :form="OrderSettingStore.state.kiosk ?? defaultKioskOrderSetting"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import KioskDevicesView from '@/views/kiosk/devices/KioskDevicesView.vue'
-import {
-  useDialog,
-  useSnackbar,
-  type FmTabProps,
-  type ISelectItem
-} from '@feedmepos/ui-library'
-import { ref, computed, defineAsyncComponent, watch, onMounted } from 'vue'
+<template>
+  <div class="py-[1.5rem]">
+    <FmPageHead :title="t('order.kiosk')" />
+    <div class="px-[1.5rem]">
+      <FmTabs v-model:model-value="selectedMenuItem" :items="menuItems"></FmTabs>
+      <div class="pt-[1.5rem]">
+        <div class="flex flex-col gap-10">
+          <div class="flex flex-col gap-2">
+            <span class="fm-typo-en-title-sm-600"> {{ t('order.activateLocation') }} </span>
+            <span class="fm-typo-en-title-sm-400"> {{ t('order.selectRestaurant') }}: </span>
+            <FmSelect
+              class="w-1/2"
+              v-model="currentSelect"
+              :items="restaurantItems"
+              :placeholder="t('order.selectItem')"
+              @update:model-value="selectRestaurant"
+            />
+          </div>
+          <KioskDevicesView
+            v-if="selectedMenuItem == 'device'"
+            :devices="devices"
+            :load-error="devicesLoadError"
+            @request-otp="requestOtp"
+            @retry="loadDevices"
+          />
+          <KioskSettingView
+            :key="`KioskSettingView-${currentRestaurantId}`"
+            v-if="selectedMenuItem == 'setting' && canManageOrderSetting"
+            :restaurant-id="currentRestaurantId"
+            @update-kiosk-order-setting="updateKioskOrderSetting"
+            :form="OrderSettingStore.state.kiosk ?? defaultKioskOrderSetting"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import KioskDevicesView from '@/views/kiosk/devices/KioskDevicesView.vue'
+import {
+  useDialog,
+  useSnackbar,
+  type FmTabProps,
+  type ISelectItem
+} from '@feedmepos/ui-library'
+import { ref, computed, defineAsyncComponent, watch, onMounted } from 'vue'
 import { useKioskStore } from '@/stores/kiosk'
 import type { MfKioskDevice } from '@/modules/kiosk/interface'
 import KioskOtpDialog from '@/views/kiosk/devices/KioskOtpDialog.vue'
+import { SvcCompanyApiError } from '@/api'
 import { useCoreStore, useI18n } from '@feedmepos/mf-common'
 import { useOrderSettings } from '@/stores/order-setting'
 import type { MfKioskOrderSetting } from '@/modules/order-setting/kiosk/interface'
 import { defaultKioskOrderSetting } from '@/stores/order-setting/mapper'
+import { useOrderSettingPermission } from '@/composables/useOrderSettingPermission'
 import { capitalCase } from 'change-case'
 
 const { t } = useI18n()
+const { canManageOrderSetting } = useOrderSettingPermission()
 
 type KioskMenuItemValue = 'device' | 'setting'
 
@@ -63,12 +68,15 @@ const KioskSettingView = defineAsyncComponent(
 const selectedMenuItem = ref<KioskMenuItemValue>('device')
 const KioskStore = useKioskStore()
 const OrderSettingStore = useOrderSettings()
-const Dialog = useDialog()
-const { currentRestaurant, restaurants, changeRestaurant } = useCoreStore()
-const SnackBar = useSnackbar()
+const Dialog = useDialog()
+const { currentRestaurant, restaurants, changeRestaurant } = useCoreStore()
+const SnackBar = useSnackbar()
 
 const currentSelect = ref<string | undefined>(currentRestaurant.value?._id ?? undefined)
 
+/** Drives the denied/error panel inside the device tab. 'forbidden' === HTTP 403. */
+const devicesLoadError = ref<'forbidden' | 'error' | null>(null)
+
 const restaurantItems = computed<ISelectItem[]>(() => {
   return restaurants.value.map((r) => ({
     label: r.profile.name,
@@ -78,7 +86,7 @@ const restaurantItems = computed<ISelectItem[]>(() => {
 
 const currentRestaurantId = ref<string>(currentRestaurant.value?._id ?? '')
 
-async function selectRestaurant(v: string) {
+async function selectRestaurant(v: string) {
   const restaurant = restaurants.value.find((r) => r._id == v)
   await changeRestaurant(restaurant)
   await loadRestaurantData()
@@ -87,27 +95,57 @@ async function selectRestaurant(v: string) {
 }
 
 async function loadRestaurantData() {
-  await OrderSettingStore.getSetting()
-  await KioskStore.getDevices()
+  // Order settings are only needed for the (permission-gated) Settings tab. Skip the
+  // fetch when the user can't manage them, and never let its failure block the Device
+  // tab — the order-settings endpoint is now HRM-guarded and 403s without the subject.
+  if (canManageOrderSetting.value) {
+    try {
+      await OrderSettingStore.getSetting()
+    } catch {
+      // Settings tab surfaces its own state; don't block device loading.
+    }
+  }
+  await loadDevices()
 }
 
-const menuItems = computed<FmTabProps[]>(() => [
-  {
-    label: t('order.deviceBinding'),
-    value: 'device'
-  },
-  {
-    label: t('order.settings'),
-    value: 'setting'
+// Loads the device list, mapping a 403 to the in-tab "access denied" panel and any
+// other failure to a retryable error panel (instead of silently showing "no devices").
+async function loadDevices() {
+  devicesLoadError.value = null
+  try {
+    await KioskStore.getDevices()
+  } catch (e) {
+    devicesLoadError.value =
+      e instanceof SvcCompanyApiError && e.status === 403 ? 'forbidden' : 'error'
   }
-])
+}
+
+const menuItems = computed<FmTabProps[]>(() => {
+  const items: FmTabProps[] = [{ label: t('order.deviceBinding'), value: 'device' }]
+  // The Settings tab is order settings — only show it to users who can manage them.
+  if (canManageOrderSetting.value) {
+    items.push({ label: t('order.settings'), value: 'setting' })
+  }
+  return items
+})
 
 const devices = computed<MfKioskDevice[]>(() => {
   return KioskStore.state.devices
 })
 
 async function requestOtp() {
-  await KioskStore.requestOtp()
+  try {
+    await KioskStore.requestOtp()
+  } catch (e) {
+    SnackBar.open({
+      title:
+        e instanceof SvcCompanyApiError && e.status === 403
+          ? t('order.bindDevicePermissionDenied')
+          : t('order.bindDeviceFailed'),
+      type: 'error'
+    })
+    return
+  }
   Dialog.open({
     title: capitalCase(t('order.bindDevice')),
     contentComponent: KioskOtpDialog,
@@ -116,7 +154,7 @@ async function requestOtp() {
     }
   }).onClose(async () => {
     // Refresh devices after dialog closes (in case a device was bound)
-    await KioskStore.getDevices()
+    await loadDevices()
   })
 }
 

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

@@ -80,6 +80,7 @@
               </div>
 
               <FmButton
+                v-if="canManageDevices"
                 class="w-full"
                 variant="primary"
                 :label="device?.pinInfo ? t('order.resetDevicePin') : t('order.setDevicePin')"
@@ -139,6 +140,7 @@
           </div>
         </FmSideSheet>
         <FmButton
+          v-if="canBindDevice"
           variant="plain"
           icon="link_off"
           class="text-fm-color-system-error-300"
@@ -213,9 +215,11 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, ref, watch } from 'vue'
 import KioskUnbindConfirm from './KioskUnbindConfirm.vue'
+import { useKioskPermission } from '@/composables/useKioskPermission'
 dayjs.extend(relativeTime)
 
 const { t } = useI18n()
+const { canManageDevices, canBindDevice } = useKioskPermission()
 
 const Dialog = useDialog()
 const Snackbar = useSnackbar()

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

@@ -7,6 +7,7 @@
           <span class="fm-typo-en-body-md-400 block"> {{ t('order.kioskDisplayDescription') }} </span>
         </div>
         <FmButton
+          v-if="canBindDevice"
           variant="primary"
           :label="t('order.bindDevice')"
           size="md"
@@ -15,6 +16,31 @@
         />
       </div>
 
+      <!-- Permission denied (e.g. the user reached this tab via the bind-only -->
+      <!-- coverSubject, but GET /devices requires the device-management subject). -->
+      <KioskStatePanel
+        v-if="loadError === 'forbidden'"
+        icon="lock"
+        :title="t('order.deviceAccessDeniedTitle')"
+        :message="t('order.deviceAccessDeniedMessage')"
+      />
+
+      <!-- Any other load failure -->
+      <KioskStatePanel
+        v-else-if="loadError === 'error'"
+        icon="error"
+        :title="t('order.deviceLoadErrorTitle')"
+        :message="t('order.deviceLoadErrorMessage')"
+      >
+        <FmButton
+          variant="secondary"
+          :label="t('order.retry')"
+          prepend-icon="refresh"
+          @click="$emit('retry')"
+        />
+      </KioskStatePanel>
+
+      <template v-else>
       <!-- Search and Filter Bar -->
       <div class="flex items-center gap-3 flex-wrap">
         <FmSearch
@@ -72,6 +98,7 @@
           {{ t('order.noDevicesBound') }}
         </div>
       </div>
+      </template>
     </div>
   </div>
 </template>
@@ -80,16 +107,22 @@ import type { MfKioskDevice } from '@/modules/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
 import { computed, ref } from 'vue'
 import KioskDeviceCard from './KioskDeviceCard.vue'
+import KioskStatePanel from '@/views/kiosk/KioskStatePanel.vue'
+import { useKioskPermission } from '@/composables/useKioskPermission'
 
 const { t } = useI18n()
+const { canBindDevice } = useKioskPermission()
 
 interface Props {
   devices: MfKioskDevice[]
+  /** Why the device list failed to load, if at all. 'forbidden' === HTTP 403. */
+  loadError?: 'forbidden' | 'error' | null
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), { loadError: null })
 defineEmits<{
   (e: 'requestOtp'): void
+  (e: 'retry'): void
 }>()
 
 const searchQuery = ref('')
@@ -119,14 +152,14 @@ const filteredDevices = computed(() => {
   // Apply search filter
   const query = searchQuery.value.toLowerCase().trim()
   if (query) {
-      result = result.filter((d) => {
-        const name = d.name?.toLowerCase() || ''
-        const machineId = d.machineId?.toLowerCase() || ''
-        const slot = d.slotInfo?.toLowerCase() || ''
-        const remark = d.remarkInfo?.toLowerCase() || ''
-        return name.includes(query) || machineId.includes(query) || slot.includes(query) || remark.includes(query)
-      })
-    }
+      result = result.filter((d) => {
+        const name = d.name?.toLowerCase() || ''
+        const machineId = d.machineId?.toLowerCase() || ''
+        const slot = d.slotInfo?.toLowerCase() || ''
+        const remark = d.remarkInfo?.toLowerCase() || ''
+        return name.includes(query) || machineId.includes(query) || slot.includes(query) || remark.includes(query)
+      })
+    }
 
   // Sort tablets by slot, kiosks by name
   return result.sort((a, b) => {

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

@@ -337,13 +337,14 @@ const validKioskOrderSetting = computed<MfKioskOrderSetting | null>(() => {
     if (!ePayment) return null
 
     const hasCard = ePayment.card?.terminal || ePayment.card?.nfc
-     const hasWallet =
+    const hasWallet =
       ePayment.eWallet?.qrPay ||
       ePayment.eWallet?.scanPay ||
       ePayment.eWallet?.terminalScanPay ||
       ePayment.eWallet?.terminalQrPay
+    const hasTerminal = ePayment.terminal
 
-    if (!hasCard && !hasWallet) return null
+    if (!hasCard && !hasWallet && !hasTerminal) return null
   }
 
   // Return the form as-is if valid, with display stand disabled when dineIn is disabled

package/src/views/order-settings/OrderSettingsView.vue

@@ -30,11 +30,13 @@ import QueueSetting from './queue/QueueSetting.vue'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 import { useMenuStore } from '@/stores/menu/menu'
 import { useSnackbarFunctions } from '@/components/snackbar'
+import { useQrOrderingEnabled } from '@/composables/useQrOrderingEnabled'
 
 const { t } = useI18n()
 const { currentRestaurant } = useCoreStore()
 const menuStore = useMenuStore()
 const { showError } = useSnackbarFunctions()
+const qrEnabled = useQrOrderingEnabled()
 type OrderSettingMenuItemValue =
   | 'delivery'
   | 'pickup'
@@ -47,17 +49,33 @@ type OrderSettingMenuItemValue =
   | 'queue'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
-const settingItem = computed<FmTabProps[]>(() => [
-  { label: t('order.delivery'), value: 'delivery' },
-  { label: t('order.pickup'), value: 'pickup' },
-  { label: t('order.dineIn'), value: 'dinein' },
-  { label: t('order.driveThru'), value: 'driveThru' },
-  // { 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.queue'), value: 'queue' }
-])
+const settingItem = computed<FmTabProps[]>(() => {
+  // QR ordering off -> expose only the Delivery tab (Local delivery company).
+  if (!qrEnabled.value) {
+    return [{ label: t('order.delivery'), value: 'delivery' }]
+  }
+  return [
+    { label: t('order.delivery'), value: 'delivery' },
+    { label: t('order.pickup'), value: 'pickup' },
+    { label: t('order.dineIn'), value: 'dinein' },
+    { label: t('order.driveThru'), value: 'driveThru' },
+    // { 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.queue'), value: 'queue' }
+  ]
+})
+
+// When QR ordering is off, keep selection on the only visible tab so a
+// previously-selected (now hidden) tab can't stay active.
+watch(
+  qrEnabled,
+  (enabled) => {
+    if (!enabled) selectedOrderSetting.value = 'delivery'
+  },
+  { immediate: true }
+)
 
 const currentComponent = computed(() => {
   switch (selectedOrderSetting.value) {
@@ -79,6 +97,8 @@ const currentComponent = computed(() => {
       return GeneralSetting
     case 'queue':
       return QueueSetting
+    default:
+      return DeliverySetting
   }
 })
 
@@ -88,11 +108,14 @@ onMounted(async () => {
   }
 })
 
-watch(currentRestaurant, async (newRestaurant: any) => {
-  if (newRestaurant?._id) {
-    await menuStore.loadCatalogOptions(newRestaurant._id)
-  }
-})
+watch(
+  () => currentRestaurant.value,
+  async (newRestaurant) => {
+    if (newRestaurant?._id) {
+      await menuStore.loadCatalogOptions(newRestaurant._id)
+    }
+  },
+)
 
 watch(
   () => menuStore.catalogOptionsError,