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

package/src/main.ts

@@ -1,22 +1,17 @@
 import './assets/main.css'
 
-import { computed, createApp } from 'vue'
+import { createApp, type Plugin } from 'vue'
 import { createPinia } from 'pinia'
 import Entry from './Entry.vue'
 import { router } from './router'
 import { initialize, useCoreStore } from '@feedmepos/mf-common'
 import { FeedMeUI } from '@feedmepos/ui-library';
-import { AuthApi } from './api/auth'
-import { signInWithCustomToken } from 'firebase/auth'
-import { useIframeStore } from './stores/iframe'
 import { createFeedMeI18n, type I18n, detectLocale } from "@feedmepos/mf-common"
 import enUS from "./locales/en-US.json"
 import zhCN from "./locales/zh-CN.json"
 import thTH from "./locales/th-TH.json"
 import jaJP from "./locales/ja-JP.json"
 
-import { getFirebaseAuth } from '@/utils/firebase-app'
-
 export const i18nMessages = {
     "en-US": enUS,
     "zh-CN": zhCN,
@@ -35,53 +30,21 @@ 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();
-const iframeMode = computed(() => {
-    return new URLSearchParams(window.location.search).get('iframe') === 'true';
-});
-
-useIframeStore().init(iframeMode.value);
-
-const firebaseAuth = getFirebaseAuth()
-
-async function signInWithToken(token: string) {
-    const customToken = await AuthApi.getCustomToken(token);
-    const { user } = await signInWithCustomToken(firebaseAuth, customToken);
-    await CoreStore.signInWithToken({ ...user, id: user.uid }, await user.getIdToken());
-}
-
-async function init() {
-    if (iframeMode.value) {
-        router.beforeEach((to, from, next) => {
-            window.addEventListener('message', async (event: MessageEvent<{ event: string, data: any }>) => {
-                switch (event.data.event) {
-                    case 'init':
-                        await signInWithToken(event.data.data.token);
-                        await CoreStore.changeCountry(event.data.data.country);
-                        await CoreStore.changeBusiness(event.data.data.business);
-                        CoreStore.changeRestaurant(event.data.data.restaurant);
-                        break;
-                    default:
-                        break;
-                }
-            });
-            next();
-        });
-    }
-    if (!iframeMode.value || import.meta.env.VITE_DEBUG_MODE === 'true') {
-        initialize(import.meta.env.VITE_AUTH_CLIENT_ID);
-        CoreStore.setNamespace(import.meta.env.DEV ? 'dev' : 'prod');
-    }
-}
 
+initialize(import.meta.env.VITE_AUTH_CLIENT_ID);
+CoreStore.setNamespace(import.meta.env.DEV ? 'dev' : 'prod');
 
-init().then(() => app.mount('#app'))
+app.mount('#app')

package/src/router/index.ts

@@ -3,8 +3,8 @@ import { routes } from './routes'
 
 const router = createRouter({
   history: createWebHistory(),
-  routes,
+  routes
 })
 
 export { router }
-export default router;
+export default router

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/stores/menu/menu.ts

@@ -1,5 +1,5 @@
 import { generator, overrideMenu } from '@feedmepos/menu';
-import { F_MENU_VERSION, FdoHasPosition, FdoItemOverriderV4, FdoItemVariant, FdoMenuV4, FdoMenuV4Catalog, FdoMenuV4Category, FdoMenuV4Item, FdoMenuV4VariantGroup, FdtoRestaurantWithMenuV4 } from '@feedmepos/menu/entity';
+import { F_MENU_VERSION, FdoHasPosition, FdoItemOverriderV4, FdoItemVariant, FdoMenuV4, FdoMenuV4Catalog, FdoMenuV4Category, FdoMenuV4Item, FdoMenuV4VariantGroup, FdtoRestaurantWithMenuV4 } from '@feedmepos/entity';
 
 import { defineStore } from 'pinia';
 import { menuApi } from '@/api/menu';
@@ -10,10 +10,10 @@ import { useCoreStore } from '@feedmepos/mf-common';
 
 interface MenuState {
   restaurants: FdtoRestaurantWithMenuV4[];
-  menu: { _rev: string } & FdoMenuV4;
+  menu: { _rev: string; } & FdoMenuV4;
   currentCatalogId: string | null;
   currentSchedulerId: string;
-  catalogOptions: { label: string; value: string | null }[];
+  catalogOptions: { label: string; value: string | null; }[];
   loadingCatalogOptions: boolean;
   catalogOptionsError: string | null;
 }
@@ -35,7 +35,7 @@ export function sortPosition<T extends FdoHasPosition>(
   elseIf: keyof T | ((v: T) => string),
 ) {
   const cloned = arr;
-  const result = cloned.reduce<{ hasPosition: T[], noPosition: T[] }>((pv, v) => {
+  const result = cloned.reduce<{ hasPosition: T[], noPosition: T[]; }>((pv, v) => {
     if (v.position == null) {
       pv.noPosition.push(v);
     } else {
@@ -53,8 +53,8 @@ export function sortPosition<T extends FdoHasPosition>(
 type Item = Omit<FdoMenuV4Item, 'variant'> & {
   codeName: string;
   variant?: Omit<FdoItemVariant, 'variantCombinations'> & {
-    variantCombinations: (VariantItem & { codeName: string })[]
-  }
+    variantCombinations: (VariantItem & { codeName: string; })[];
+  };
 };
 
 interface VariantItem extends FdoItemOverriderV4 {
@@ -63,10 +63,10 @@ interface VariantItem extends FdoItemOverriderV4 {
 
 
 export function categorizedItems(
-  categories: (Omit<FdoMenuV4Category, '_id'> & { _id: string | null })[],
+  categories: (Omit<FdoMenuV4Category, '_id'> & { _id: string | null; })[],
   items: FdoMenuV4Item[],
 ): CategorizedItem[] {
-  const mapped = items.reduce<{ [key: string]: Item[] }>((pv, p) => {
+  const mapped = items.reduce<{ [key: string]: Item[]; }>((pv, p) => {
     const key = p.category || '';
     const combinations = mapVariant(p.variant?.variantGroupIds);
     const i = {
@@ -105,28 +105,23 @@ export const useMenuStore = defineStore('menu', {
     version() {
       return (useCoreStore().currentBusiness?.value?.menuVersion || F_MENU_VERSION.enum.v3) as F_MENU_VERSION;
     },
-   
     mergedMenu(): FdoMenuV4 {
       const res = overrideMenu({
         menu: this.menu as FdoMenuV4,
         catalogId: this.currentCatalogId,
-        
       });
-
-      
       return res;
-
     },
     catalogs(): FdoMenuV4Catalog[] {
       const catalogs = this.menu.modules.catalog;
-      return catalogs
+      return catalogs;
     },
     currentCatalog: (state): FdoMenuV4Catalog | undefined => {
       return state.menu.modules.catalog.find(
         (catalog) => catalog._id === state.currentCatalogId
       );
     },
-    categories(): (Omit<FdoMenuV4Category, '_id'> & { _id: string | null })[] {
+    categories(): (Omit<FdoMenuV4Category, '_id'> & { _id: string | null; })[] {
       const categories = this.mergedMenu.modules.category;
       return [
         ...this.rules.item.addon ? [{ _id: this.currentCatalogId ? '' : null, name: 'Addon', position: 0 }] : [],
@@ -137,17 +132,17 @@ export const useMenuStore = defineStore('menu', {
       const items = this.mergedMenu.modules.item;
       return sortPosition(items, (item) => item.code || item.name);
     },
-    sortedItems(): { [key: string]: number } {
+    sortedItems(): { [key: string]: number; } {
       const category = this.menu.modules.category;
       const sorted = sortPosition(category, (c) => c.name)
-        .reduce<{ [key: string]: number }>((pv, c, index) => {
+        .reduce<{ [key: string]: number; }>((pv, c, index) => {
           pv[c._id] = index;
           return pv;
         }, { ['']: 0 });
 
       const items = this.menu.modules.item;
       return sortPosition(items, (item) => item.code || item.name)
-        .reduce<{ [key: string]: number }>((pv, item, index) => {
+        .reduce<{ [key: string]: number; }>((pv, item, index) => {
           pv[item._id] = index + sorted[item.category || ''];
           return pv;
         }, {});
@@ -160,6 +155,32 @@ export const useMenuStore = defineStore('menu', {
     categorizedItems(): CategorizedItem[] {
       return categorizedItems(this.categories, this.items);
     },
+    rawCategorizedItems(): CategorizedItem[] {
+      const grouped = this.menu.modules.item.reduce<Record<string, Item[]>>((acc, p) => {
+        const key = p.category || '';
+        const i: Item = {
+          ...p,
+          codeName: [p.code, p.name].filter(Boolean).join(' '),
+          variant: {
+            variantGroupIds: p.variant?.variantGroupIds ?? [],
+            variantCombinations: (p.variant?.variantCombinations ?? []).map((vc) => ({
+              ...vc,
+              codeName: [vc.code, vc.name].filter(Boolean).join(' ').trim() || '-',
+            })),
+          },
+        };
+        acc[key] = acc[key] ? [...acc[key], i] : [i];
+        return acc;
+      }, {});
+
+      const res = sortPosition(this.menu.modules.category, (c) => c.name).map((category) => ({
+        id: category._id,
+        name: category.name,
+        items: grouped[category._id] ?? [],
+      }));
+
+      return res
+    },
     rules(): MenuRules {
       const isDefault = this.currentCatalogId == undefined;
       const isV4 = this.version === F_MENU_VERSION.enum.v4;
@@ -247,24 +268,24 @@ export const useMenuStore = defineStore('menu', {
     async loadCatalogOptions(restaurantId: string) {
       this.loadingCatalogOptions = true;
       this.catalogOptionsError = null;
-      const options: {label:string, value: string | null}[] = [{
+      const options: { label: string, value: string | null; }[] = [{
         label: 'Main',
         value: null,
       }];
 
       try {
-       const resp = await menuApi.readCatalogOptions(restaurantId);
-       const restaurntCatalogOptions = resp[restaurantId] ?? [];
-       for (let index = 0; index < restaurntCatalogOptions.length; index++) {
-        const opt = restaurntCatalogOptions[index];
+        const resp = await menuApi.readCatalogOptions(restaurantId);
+        const restaurntCatalogOptions = resp[restaurantId] ?? [];
+        for (let index = 0; index < restaurntCatalogOptions.length; index++) {
+          const opt = restaurntCatalogOptions[index];
           options.push({
             label: opt.name,
             value: opt._id
-          })
-       }
-       this.catalogOptions = options;
+          });
+        }
+        this.catalogOptions = options;
       } catch (error) {
-        console.error('Failed to load catalog options:', error)
+        console.error('Failed to load catalog options:', error);
         this.catalogOptionsError = 'order.failedToLoadCatalogOptions';
       } finally {
         this.loadingCatalogOptions = false;

package/src/stores/restaurant/index.ts

@@ -20,6 +20,7 @@ import {
   FdoGrabfoodSettings,
   FdoExternalSetting,
   FdoFoodpandaSettings,
+  FdoLinemanSettings,
   FdoGoFoodSettings,
   FdoShopeeFoodSettings
 } from '@entity'
@@ -29,7 +30,6 @@ import { remoteOrderApi } from '@/api/remoteOrder'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 import { computed, ref, watch } from 'vue'
 
-
 export interface Profile extends FdoProfile {
   address: Address
 }
@@ -65,7 +65,9 @@ function initRestaurantState(): RestaurantState {
 export const useRestaurantStore = defineStore('restaurant', () => {
   const CoreStore = useCoreStore()
   const state = ref(initRestaurantState())
-  const currentRestaurantSetting = computed<RestaurantSettingDoc | undefined>(() => state.value.restaurantSettings[CoreStore.currentRestaurant.value?._id || ''])
+  const currentRestaurantSetting = computed<RestaurantSettingDoc | undefined>(
+    () => state.value.restaurantSettings[CoreStore.currentRestaurant.value?._id || '']
+  )
 
   async function readRestaurantSetting(restaurantId: string) {
     const restaurantSetting = await restaurantApi.readRestaurantSetting(restaurantId)
@@ -104,20 +106,32 @@ export const useRestaurantStore = defineStore('restaurant', () => {
   async function updateFeedmeDelivery(restaurantId: string, dto: FdoRestaurantFeedmeDelivery) {
     return await remoteOrderApi.integratedDelivery.updateFeedme(restaurantId, dto)
   }
-  async function updateIntegratedFoodpandaDelivery(restaurantId: string, dto: FdoFoodpandaSettings) {
+  async function updateIntegratedFoodpandaDelivery(
+    restaurantId: string,
+    dto: FdoFoodpandaSettings
+  ) {
     await remoteOrderApi.integratedDelivery.updateFoodpanda(restaurantId, dto)
   }
   async function updateIntegratedGrabfoodDelivery(restaurantId: string, dto: FdoGrabfoodSettings) {
     await remoteOrderApi.integratedDelivery.updateGrabfood(restaurantId, dto)
   }
-  async function updateIntegratedShopeefoodDelivery(restaurantId: string, dto: FdoShopeeFoodSettings) {
+  async function updateIntegratedLinemanDelivery(restaurantId: string, dto: FdoLinemanSettings) {
+    await remoteOrderApi.integratedDelivery.updateLineman(restaurantId, dto)
+  }
+  async function updateIntegratedShopeefoodDelivery(
+    restaurantId: string,
+    dto: FdoShopeeFoodSettings
+  ) {
     await remoteOrderApi.integratedDelivery.updateShopeefood(restaurantId, dto)
   }
   async function updateIntegratedGofoodDelivery(restaurantId: string, dto: FdoGoFoodSettings) {
     await remoteOrderApi.integratedDelivery.updateGofood(restaurantId, dto)
   }
 
-  async function updateIntegratedDeliverooDelivery(restaurantId: string, dto: FdoDeliverooSettings) {
+  async function updateIntegratedDeliverooDelivery(
+    restaurantId: string,
+    dto: FdoDeliverooSettings
+  ) {
     await remoteOrderApi.integratedDelivery.updateDeliveroo(restaurantId, dto)
   }
   async function updateExternalDelivery(restaurantId: string, dto: FdoExternalSetting) {
@@ -127,10 +141,10 @@ export const useRestaurantStore = defineStore('restaurant', () => {
   function getRestaurantEPayment(): true | string {
     const { t } = useI18n()
     if (!CoreStore.currentRestaurant.value) {
-      return 'getRestaurantEPayment - Invalid restaurant ';
+      return 'getRestaurantEPayment - Invalid restaurant '
     }
-    const payoutAccount = CoreStore.currentRestaurant.value.payoutAccount;
-    const posVersion = CoreStore.currentRestaurant.value.posVersion;
+    const payoutAccount = CoreStore.currentRestaurant.value.payoutAccount
+    const posVersion = CoreStore.currentRestaurant.value.posVersion
 
     const validPosVersion =
       !!posVersion &&
@@ -163,10 +177,11 @@ export const useRestaurantStore = defineStore('restaurant', () => {
     updateFeedmeDelivery,
     updateIntegratedFoodpandaDelivery,
     updateIntegratedGrabfoodDelivery,
+    updateIntegratedLinemanDelivery,
     updateIntegratedShopeefoodDelivery,
     updateIntegratedGofoodDelivery,
     updateIntegratedDeliverooDelivery,
     updateExternalDelivery,
-    getRestaurantEPayment,
+    getRestaurantEPayment
   }
 })

package/src/utils/firebase-storage.ts

@@ -1,5 +1,4 @@
-import { AuthApi } from '@/api/auth'
-import { SvcConfig } from '@/api'
+import { FeedMeAuth } from '@feedmepos/mf-common'
 import { signInWithCustomToken, signOut } from 'firebase/auth'
 import { ref, uploadBytes } from 'firebase/storage'
 import { getFirebaseAuth, getFirebaseStorage } from './firebase-app'
@@ -45,12 +44,7 @@ async function ensureFirebaseAuth(): Promise<void> {
 
   if (!pendingFirebaseSignIn) {
     pendingFirebaseSignIn = (async () => {
-      const idToken = SvcConfig.getIdToken()
-      if (!idToken) {
-        throw new Error('Missing session token for Firebase authentication')
-      }
-
-      const customToken = await AuthApi.getCustomToken(idToken)
+      const customToken = await FeedMeAuth.getCustomToken()
       await signInWithCustomToken(auth, customToken)
     })().finally(() => {
       pendingFirebaseSignIn = null
@@ -65,16 +59,12 @@ async function ensureFirebaseAuth(): Promise<void> {
 
 async function forceRefreshFirebaseAuth(): Promise<void> {
   const auth = getFirebaseAuth()
-  const idToken = SvcConfig.getIdToken()
-  if (!idToken) {
-    throw new Error('Missing session token for Firebase authentication')
-  }
 
   if (auth.currentUser) {
     await signOut(auth)
   }
 
-  const customToken = await AuthApi.getCustomToken(idToken)
+  const customToken = await FeedMeAuth.getCustomToken()
   await signInWithCustomToken(auth, customToken)
 }
 

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>