@feedmepos/mf-order-setting 0.0.73-dev → 0.0.74-dev

package/src/main.ts

@@ -1,6 +1,6 @@
 import './assets/main.css'
 
-import { createApp } from 'vue'
+import { createApp, type Plugin } from 'vue'
 import { createPinia } from 'pinia'
 import Entry from './Entry.vue'
 import { router } from './router'
@@ -30,15 +30,18 @@ function initI18n(): I18n {
 
 const app = createApp(Entry)
 
+// mf-common's createFeedMeI18n returns vue-i18n's I18n instance, which is a valid
+// Vue plugin at runtime but doesn't structurally match vue's tightened Plugin type
+// after the mf-common bump — cast at the install site.
+app.use(initI18n() as unknown as Plugin)
+app.use(createPinia())
+app.use(router)
+
+
 app.use(FeedMeUI, {
     locale: detectLocale(),
 })
 
-app.use(createPinia() as any)
-app.use(router)
-app.use(initI18n() as any)
-
-
 const CoreStore = useCoreStore();
 
 initialize(import.meta.env.VITE_AUTH_CLIENT_ID);

package/src/router/routes.ts

@@ -1,26 +1,55 @@
-import { type RouteRecordRaw } from 'vue-router'
+import { type RouteRecordRaw, type RouteMeta } from 'vue-router'
+import { defineAsyncComponent } from 'vue'
+import { Permission, type CaslPermission } from '@feedmepos/hrm-permission'
+import { withPermission } from '@feedmepos/hrm-permission/components'
+import { kioskPermission } from '@/composables/useKioskPermission'
+import { orderSettingPermission } from '@/composables/useOrderSettingPermission'
 import { PortalRoute } from '@/utils/constants/route';
 
+/** Wrap CASL permissions into a route meta the withPermission HOC validates. */
+const permissionMeta = (permissions: CaslPermission[]): RouteMeta =>
+  ({
+    validationManifest: { requiredCaslPermissions: permissions }
+  }) as unknown as RouteMeta;
+
+const manageDevices = kioskPermission(Permission.Action.manage, 'deviceManagement');
+const bindDevices = kioskPermission(Permission.Action.manage, 'deviceBinding');
+const manageOrderSetting = orderSettingPermission(Permission.Action.manage);
+
 const routes: RouteRecordRaw[] = [
   {
+    // Main Kiosk view hosts both the device-binding and management tabs, so
+    // allow access via either subject (coverSubject = OR fallback).
     path: PortalRoute.KioskRoute,
     name: 'Kiosk',
-    component: () => import('@/views/kiosk/KioskView.vue')
+    component: withPermission(defineAsyncComponent(() => import('@/views/kiosk/KioskView.vue'))),
+    meta: permissionMeta([{ ...manageDevices, coverSubject: bindDevices.subject }]),
   },
   {
     path: PortalRoute.KioskDeviceRoute,
     name: 'Kiosk Device',
-    component: () => import('@/views/kiosk/devices/KioskDevicesView.vue')
+    component: withPermission(
+      defineAsyncComponent(() => import('@/views/kiosk/devices/KioskDevicesView.vue')),
+    ),
+    meta: permissionMeta([manageDevices]),
   },
   {
+    // The Kiosk "Settings" tab is order settings, so it is governed by the
+    // order-setting subject (a kiosk permission is still required to reach /kiosk).
     path: PortalRoute.KioskOrderSettingRoute,
     name: 'Kiosk Order Setting',
-    component: () => import('@/views/kiosk/settings/KioskSettingView.vue')
+    component: withPermission(
+      defineAsyncComponent(() => import('@/views/kiosk/settings/KioskSettingView.vue')),
+    ),
+    meta: permissionMeta([manageOrderSetting]),
   },
   {
     path: PortalRoute.OrderSettingView,
     name: 'Order Setting View',
-    component: () => import('@/views/order-settings/OrderSettingsView.vue')
+    component: withPermission(
+      defineAsyncComponent(() => import('@/views/order-settings/OrderSettingsView.vue')),
+    ),
+    meta: permissionMeta([manageOrderSetting]),
   },
 ];
 

package/src/views/kiosk/KioskStatePanel.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-col items-center justify-center gap-3 py-16 text-center col-span-2">
+    <div
+      class="flex items-center justify-center w-16 h-16 rounded-full bg-fm-color-surface-secondary"
+    >
+      <FmIcon :name="icon" size="xl" class="text-fm-color-typo-tertiary" />
+    </div>
+    <span class="fm-typo-en-title-sm-600 block">{{ title }}</span>
+    <span class="fm-typo-en-body-md-400 block text-fm-color-typo-tertiary max-w-[360px]">
+      {{ message }}
+    </span>
+    <div v-if="$slots.default" class="pt-2">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Lightweight, self-contained state panel for the kiosk surface (e.g. permission
+// denied / load error). Kept local because @feedmepos/hrm-permission only exposes
+// its NoPermission illustration via the route-level withPermission HOC, not as a
+// standalone component we can render on an API 403.
+withDefaults(
+  defineProps<{
+    title: string
+    message: string
+    icon?: string
+  }>(),
+  { icon: 'info' }
+)
+</script>

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

@@ -108,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,

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

@@ -66,7 +66,7 @@ export function useDelivery() {
     const thSupported = [
       AUTO_INTEGRATION_CLIENT.grabfood,
       AUTO_INTEGRATION_CLIENT.external,
-      AUTO_INTEGRATION_CLIENT.lineman
+      // AUTO_INTEGRATION_CLIENT.lineman
     ]
     const pkSupported = [AUTO_INTEGRATION_CLIENT.foodpanda, AUTO_INTEGRATION_CLIENT.external]
     const idSupported = [

package/vite.config.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
-import { defineConfig, loadEnv } from 'vite'
+import { defineConfig, loadEnv, type UserConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { fmmfVitePresent } from '@feedmepos/mf-common/vite-preset'
 
@@ -58,5 +58,8 @@ export default defineConfig((env) => {
   }
 
   // return config
-  return fmmfVitePresent(config, env)
+  // fmmfVitePresent / @vitejs/plugin-vue types drifted vs vite's UserConfig after
+  // the mf-common ecosystem bump; the runtime shape is correct — cast to satisfy
+  // defineConfig's overload.
+  return fmmfVitePresent(config, env) as unknown as UserConfig
 })