@feedmepos/mf-order-setting 0.0.91 → 0.0.93

package/src/views/display-system/legacy-ods/LegacyOdsTemplateList.spec.ts

@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { ref } from 'vue'
+import { getBusinessBrandkit, saveBusinessOds } from '@/api/brandkit'
+
+const dialog = vi.hoisted(() => ({ open: vi.fn(), close: vi.fn() }))
+vi.mock('@feedmepos/ui-library', () => ({ useDialog: () => dialog }))
+vi.mock('@/api/brandkit', () => ({ getBusinessBrandkit: vi.fn(), saveBusinessOds: vi.fn() }))
+vi.mock('@/components/snackbar', () => ({
+  useSnackbarFunctions: () => ({ showError: vi.fn(), showSuccess: vi.fn() })
+}))
+vi.mock('@/composables/useLegacyOdsAccess', () => ({
+  useLegacyOdsAccess: () => ({ canAccessOdsTemplateSettings: ref(false) })
+}))
+vi.mock('@feedmepos/mf-common', () => ({
+  useCoreStore: () => ({
+    currentBusiness: ref({ _id: 'business' }),
+    namespace: ref('dev'),
+    restaurants: ref([])
+  }),
+  useI18n: () => ({ t: (key: string) => key })
+}))
+vi.mock('./LegacyOdsEditorDialog.vue', () => ({
+  default: {
+    name: 'LegacyOdsEditorDialog',
+    props: ['modelValue', 'entry', 'allEntries'],
+    template: '<div />'
+  }
+}))
+import List from './LegacyOdsTemplateList.vue'
+
+const wrappers: VueWrapper[] = []
+afterEach(() => {
+  wrappers.forEach((wrapper) => wrapper.unmount())
+  wrappers.length = 0
+  vi.resetAllMocks()
+})
+
+async function list() {
+  vi.mocked(getBusinessBrandkit).mockResolvedValue({
+    ods: [
+      { label: 'Default', isDefault: true, restaurantIds: ['outlet'] },
+      { label: 'Other', isDefault: false, restaurantIds: ['other'] }
+    ]
+  })
+  const wrapper = mount(List, {
+    global: {
+      stubs: {
+        FmButton: {
+          props: ['icon', 'disabled'],
+          template: '<button :data-icon="icon" :disabled="disabled" />'
+        },
+        FmSnackbar: true,
+        FmCircularProgress: true
+      }
+    }
+  })
+  wrappers.push(wrapper)
+  await flushPromises()
+  return wrapper
+}
+function buttons(wrapper: VueWrapper, icon: string) {
+  return wrapper.findAll(`button[data-icon="${icon}"]`)
+}
+
+function editor(wrapper: VueWrapper) {
+  return wrapper.findComponent({ name: 'LegacyOdsEditorDialog' })
+}
+
+describe('legacy ODS list without the template flag', () => {
+  it('saves a new default right away and clears the old default', async () => {
+    const wrapper = await list()
+    ;(wrapper.vm as unknown as { addOdsEntry: () => void }).addOdsEntry()
+    await wrapper.vm.$nextTick()
+    expect(editor(wrapper).props('modelValue')).toBe(true)
+    expect(editor(wrapper).props('entry')).toMatchObject({ isDefault: false })
+    editor(wrapper).vm.$emit('save', { label: 'New default', isDefault: true })
+    await flushPromises()
+    expect(saveBusinessOds).toHaveBeenCalledWith(
+      'business',
+      [
+        { label: 'Default', isDefault: false, restaurantIds: ['outlet'] },
+        { label: 'Other', isDefault: false, restaurantIds: ['other'] },
+        { label: 'New default', isDefault: true }
+      ],
+      'dev'
+    )
+    expect(editor(wrapper).props('modelValue')).toBe(false)
+  })
+
+  it('keeps the editor open when saving fails', async () => {
+    const wrapper = await list()
+    vi.mocked(saveBusinessOds).mockRejectedValue(new Error('offline'))
+    await buttons(wrapper, 'edit')[1].trigger('click')
+    editor(wrapper).vm.$emit('save', { label: 'Renamed', isDefault: false })
+    await flushPromises()
+    expect(editor(wrapper).props('modelValue')).toBe(true)
+    expect(editor(wrapper).props('allEntries')[1].label).toBe('Other')
+  })
+
+  it('duplicates and deletes after confirmation, never offering to delete the default', async () => {
+    const wrapper = await list()
+    expect(buttons(wrapper, 'delete')).toHaveLength(1)
+    dialog.open.mockReturnValue({ onPrimary: (callback: () => Promise<void>) => callback() })
+    await buttons(wrapper, 'content_copy')[0].trigger('click')
+    await flushPromises()
+    expect(saveBusinessOds).toHaveBeenLastCalledWith(
+      'business',
+      [
+        { label: 'Default', isDefault: true, restaurantIds: ['outlet'] },
+        { label: 'Other', isDefault: false, restaurantIds: ['other'] },
+        { label: 'order.displaySystem.legacyOds.copyLabel', isDefault: false, restaurantIds: [] }
+      ],
+      'dev'
+    )
+    expect(buttons(wrapper, 'delete')).toHaveLength(2)
+    await buttons(wrapper, 'delete')[1].trigger('click')
+    await flushPromises()
+    expect(dialog.open).toHaveBeenCalledTimes(2)
+    expect(editor(wrapper).props('allEntries')).toHaveLength(2)
+    expect(editor(wrapper).props('allEntries')[0].isDefault).toBe(true)
+  })
+})

package/src/views/display-system/legacy-ods/LegacyOdsTemplateList.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { useDialog } from '@feedmepos/ui-library'
+import { getBusinessBrandkit, saveBusinessOds } from '@/api/brandkit'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import {
+  migrateOdsToArray,
+  type BrandKit,
+  type OdsConfigEntry
+} from '@/modules/display-system/legacy-ods/interface'
+import LegacyOdsEditorDialog from './LegacyOdsEditorDialog.vue'
+
+const Core = useCoreStore()
+const { t } = useI18n()
+const dialog = useDialog()
+const { showError, showSuccess } = useSnackbarFunctions()
+const brandkit = ref<BrandKit>({})
+const loading = ref(true)
+const saving = ref(false)
+const loaded = ref(false)
+const odsConfigs = computed(() =>
+  migrateOdsToArray(brandkit.value.ods, t('order.displaySystem.legacyOds.default'))
+)
+
+const colorOverrideFields = computed(() => [
+  {
+    key: 'colors.primary',
+    title: t('order.displaySystem.legacyOds.color.primary.title'),
+    description: t('order.displaySystem.legacyOds.color.primary.description')
+  },
+  {
+    key: 'colors.secondary',
+    title: t('order.displaySystem.legacyOds.color.secondary.title'),
+    description: t('order.displaySystem.legacyOds.color.secondary.description')
+  },
+  {
+    key: 'colors.accent',
+    title: t('order.displaySystem.legacyOds.color.accent.title'),
+    description: t('order.displaySystem.legacyOds.color.accent.description')
+  },
+  {
+    key: 'colors.text.onPrimary',
+    title: t('order.displaySystem.legacyOds.typography.onPrimary.title'),
+    description: t('order.displaySystem.legacyOds.typography.onPrimary.description')
+  },
+  {
+    key: 'colors.text.primary',
+    title: t('order.displaySystem.legacyOds.typography.primary.title'),
+    description: t('order.displaySystem.legacyOds.typography.primary.description')
+  },
+  {
+    key: 'colors.text.secondary',
+    title: t('order.displaySystem.legacyOds.typography.secondary.title'),
+    description: t('order.displaySystem.legacyOds.typography.secondary.description')
+  },
+  {
+    key: 'colors.text.tertiary',
+    title: t('order.displaySystem.legacyOds.typography.tertiary.title'),
+    description: t('order.displaySystem.legacyOds.typography.tertiary.description')
+  },
+  {
+    key: 'colors.neutral.light',
+    title: t('order.displaySystem.legacyOds.neutralColors.light.title'),
+    description: t('order.displaySystem.legacyOds.neutralColors.light.description')
+  },
+  {
+    key: 'colors.neutral.mid',
+    title: t('order.displaySystem.legacyOds.neutralColors.mid.title'),
+    description: t('order.displaySystem.legacyOds.neutralColors.mid.description')
+  },
+  {
+    key: 'colors.neutral.dark',
+    title: t('order.displaySystem.legacyOds.neutralColors.dark.title'),
+    description: t('order.displaySystem.legacyOds.neutralColors.dark.description')
+  },
+  {
+    key: 'colors.background.base',
+    title: t('order.displaySystem.legacyOds.backgroundColors.base.title'),
+    description: t('order.displaySystem.legacyOds.backgroundColors.base.description')
+  },
+  {
+    key: 'colors.background.elevated',
+    title: t('order.displaySystem.legacyOds.backgroundColors.elevated.title'),
+    description: t('order.displaySystem.legacyOds.backgroundColors.elevated.description')
+  }
+])
+
+const odsEditorOpen = ref(false)
+const odsEditingIndex = ref(-1)
+const odsEditingEntry = ref<OdsConfigEntry>({ isDefault: false })
+
+const cloneOds = () => JSON.parse(JSON.stringify(odsConfigs.value)) as OdsConfigEntry[]
+
+const entryLabel = (entry: OdsConfigEntry, index: number) =>
+  entry.label ||
+  (entry.isDefault
+    ? t('order.displaySystem.legacyOds.default')
+    : t('order.displaySystem.legacyOds.configNumber', { index: index + 1 }))
+
+async function persist(ods: OdsConfigEntry[]) {
+  const businessId = Core.currentBusiness.value?._id
+  const namespace = Core.namespace.value
+  if (!businessId || !loaded.value || saving.value) return false
+  saving.value = true
+  try {
+    await saveBusinessOds(businessId, ods, namespace)
+    if (Core.currentBusiness.value?._id !== businessId || Core.namespace.value !== namespace) return false
+    brandkit.value = { ...brandkit.value, ods }
+    showSuccess(t('order.displaySystem.legacyOds.saved'))
+    return true
+  } catch (error) {
+    showError(error instanceof Error ? error.message : t('order.displaySystem.saveFailed'))
+    return false
+  } finally {
+    saving.value = false
+  }
+}
+
+const addOdsEntry = () => {
+  const hasDefault = odsConfigs.value.some((e) => e.isDefault)
+  odsEditingIndex.value = -1
+  odsEditingEntry.value = {
+    label: hasDefault ? '' : t('order.displaySystem.legacyOds.default'),
+    isDefault: !hasDefault
+  }
+  odsEditorOpen.value = true
+}
+
+const editOdsEntry = (index: number) => {
+  const entry = odsConfigs.value[index]
+  if (!entry) return
+  odsEditingIndex.value = index
+  odsEditingEntry.value = JSON.parse(JSON.stringify(entry))
+  odsEditorOpen.value = true
+}
+
+const duplicateOdsEntry = (index: number) => {
+  const entry = odsConfigs.value[index]
+  if (!entry) return
+  const label = entryLabel(entry, index)
+
+  dialog
+    .open({
+      title: t('order.displaySystem.legacyOds.duplicateConfiguration'),
+      message: t('order.displaySystem.legacyOds.duplicateConfirmation', { label }),
+      primaryActions: {
+        text: t('order.displaySystem.legacyOds.duplicate'),
+        close: false
+      },
+      secondaryActions: {
+        text: t('order.displaySystem.legacyOds.cancel'),
+        close: true
+      }
+    })
+    .onPrimary(async () => {
+      const duplicate = JSON.parse(JSON.stringify(entry)) as OdsConfigEntry
+      duplicate.label = t('order.displaySystem.legacyOds.copyLabel', { label })
+      duplicate.isDefault = false
+      if (entry.isDefault) {
+        duplicate.restaurantIds = []
+      }
+      if (await persist([...cloneOds(), duplicate])) dialog.close()
+    })
+}
+
+const deleteOdsEntry = (index: number) => {
+  const entry = odsConfigs.value[index]
+  if (!entry) return
+
+  dialog
+    .open({
+      title: t('order.displaySystem.legacyOds.deleteConfiguration'),
+      message: t('order.displaySystem.legacyOds.deleteConfirmation', {
+        label: entryLabel(entry, index)
+      }),
+      primaryActions: {
+        text: t('order.displaySystem.legacyOds.delete'),
+        close: false
+      },
+      secondaryActions: {
+        text: t('order.displaySystem.legacyOds.cancel'),
+        close: true
+      }
+    })
+    .onPrimary(async () => {
+      const ods = cloneOds()
+      ods.splice(index, 1)
+      if (await persist(ods)) dialog.close()
+    })
+}
+
+const onSaveOdsEntry = async (entry: OdsConfigEntry) => {
+  const ods = cloneOds()
+  if (entry.isDefault) {
+    for (const e of ods) {
+      e.isDefault = false
+    }
+  }
+  if (odsEditingIndex.value >= 0) {
+    ods[odsEditingIndex.value] = entry
+  } else {
+    ods.push(entry)
+  }
+  if (await persist(ods)) odsEditorOpen.value = false
+}
+
+const restaurantNameMap = computed(() => {
+  const map = new Map<string, string>()
+  for (const r of Core.restaurants?.value ?? []) {
+    map.set(r._id, r.profile.name)
+  }
+  return map
+})
+
+const restaurantNamesForEntry = (entry: OdsConfigEntry) => {
+  if (entry.isDefault) return t('order.displaySystem.legacyOds.allRestaurantsDefault')
+  if (!entry.restaurantIds?.length) return t('order.displaySystem.legacyOds.noRestaurantsSelected')
+  return entry.restaurantIds.map((id) => restaurantNameMap.value.get(id) ?? id).join(', ')
+}
+
+watch(
+  [() => Core.currentBusiness.value?._id, () => Core.namespace.value],
+  async ([businessId, namespace], _, onCleanup) => {
+    let cancelled = false
+    onCleanup(() => {
+      cancelled = true
+    })
+    odsEditorOpen.value = false
+    loaded.value = false
+    loading.value = true
+    if (!businessId) {
+      loading.value = false
+      return
+    }
+    try {
+      const result = await getBusinessBrandkit(businessId, namespace)
+      if (cancelled) return
+      brandkit.value = result
+      loaded.value = true
+    } catch (error) {
+      if (!cancelled)
+        showError(error instanceof Error ? error.message : t('order.displaySystem.loadFailed'))
+    } finally {
+      if (!cancelled) loading.value = false
+    }
+  },
+  { immediate: true }
+)
+
+defineExpose({ addOdsEntry })
+</script>
+
+<template>
+  <section class="mt-12">
+    <div v-if="loading" class="flex justify-center py-40"><FmCircularProgress size="lg" /></div>
+    <template v-else-if="loaded">
+      <div v-if="!odsConfigs.length" class="empty-state">
+        <strong>{{ t('order.displaySystem.legacyOds.noConfigsYet') }}</strong>
+        <span>{{ t('order.displaySystem.legacyOds.noConfigsDescription') }}</span>
+      </div>
+      <div v-else class="grid grid-cols-1 gap-16 xl:grid-cols-2">
+        <article v-for="(entry, index) in odsConfigs" :key="index" class="resource-card">
+          <div class="flex justify-between gap-12">
+            <div class="min-w-0">
+              <div class="flex items-center gap-8">
+                <h3 class="truncate text-lg font-semibold">{{ entryLabel(entry, index) }}</h3>
+                <span v-if="entry.isDefault" class="default-badge">{{ t('order.displaySystem.legacyOds.default') }}</span>
+              </div>
+              <p class="mt-4 truncate text-sm text-gray-500">{{ restaurantNamesForEntry(entry) }}</p>
+            </div>
+            <div class="flex gap-4">
+              <FmButton icon="edit" variant="plain" :disabled="saving" @click="editOdsEntry(index)" />
+              <FmButton icon="content_copy" variant="plain" :disabled="saving" @click="duplicateOdsEntry(index)" />
+              <FmButton v-if="!entry.isDefault" icon="delete" variant="plain" :disabled="saving" @click="deleteOdsEntry(index)" />
+            </div>
+          </div>
+        </article>
+      </div>
+    </template>
+    <LegacyOdsEditorDialog
+      v-model="odsEditorOpen"
+      :entry="odsEditingEntry"
+      :editing-index="odsEditingIndex"
+      :all-entries="odsConfigs"
+      :brandkit="brandkit"
+      :color-fields="colorOverrideFields"
+      :saving="saving"
+      @save="onSaveOdsEntry"
+      @cancel="odsEditorOpen = false"
+    />
+  </section>
+</template>
+
+<style scoped>
+.empty-state{display:grid;justify-items:center;gap:6px;border:1px dashed #d1d5db;border-radius:12px;padding:56px 20px;color:#6b7280;text-align:center}.empty-state strong{color:#111827}.resource-card{border:1px solid #e5e7eb;border-radius:12px;padding:20px;background:white;box-shadow:0 2px 8px #0000000a}.default-badge{border-radius:999px;padding:3px 8px;background:#f3f4f6;font-size:11px;font-weight:700}
+</style>

package/src/views/display-system/legacy-ods/brandkit.spec.ts

@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import axios from 'axios'
+import { getBusinessBrandkit, saveBusinessOds } from '@/api/brandkit'
+import { migrateOdsToArray } from '@/modules/display-system/legacy-ods/interface'
+
+vi.mock('axios', () => ({ default: { get: vi.fn(), post: vi.fn() } }))
+beforeEach(() => vi.resetAllMocks())
+
+describe('business ODS persistence', () => {
+  it('reads the latest brandkit on every save and only replaces ods', async () => {
+    const latest = {
+      colors: { primary: '#123456' },
+      fonts: { brand: 'Inter' },
+      layout: { app: { template: { mainView: { id: 'new-app' } } }, kiosk: { currentVersion: 3 } },
+      ordering: { app: { singleCategory: true } },
+      unknownField: { preserved: true },
+      ods: [{ isDefault: true, label: 'Old' }]
+    }
+    const ods = [{ isDefault: true, label: 'Updated' }]
+    vi.mocked(axios.get).mockResolvedValue({ data: latest })
+    vi.mocked(axios.post).mockResolvedValue({})
+    await saveBusinessOds('business/id', ods, 'dev')
+    expect(axios.get).toHaveBeenCalledWith(
+      'https://api.feedmedev.vip/metadata/business%2Fid/brandkit'
+    )
+    expect(axios.post).toHaveBeenCalledWith(
+      'https://api.feedmedev.vip/metadata/business%2Fid/brandkit',
+      { ...latest, ods }
+    )
+    expect(latest.ods[0].label).toBe('Old')
+    const newer = { ...latest, colors: { primary: '#abcdef' } }
+    vi.mocked(axios.get).mockResolvedValue({ data: newer })
+    await saveBusinessOds('business/id', ods, 'prod')
+    expect(axios.post).toHaveBeenLastCalledWith(
+      'https://api.feedme.vip/metadata/business%2Fid/brandkit',
+      { ...newer, ods }
+    )
+  })
+
+  it('does not overwrite metadata when reading the latest document fails', async () => {
+    vi.mocked(axios.get).mockRejectedValue(new Error('offline'))
+    await expect(saveBusinessOds('business', [], 'dev')).rejects.toThrow('offline')
+    expect(axios.post).not.toHaveBeenCalled()
+  })
+
+  it('returns business metadata without altering it', async () => {
+    const brandkit = { ods: [] }
+    vi.mocked(axios.get).mockResolvedValue({ data: brandkit })
+    expect(await getBusinessBrandkit('business', 'prod')).toBe(brandkit)
+  })
+})
+
+describe('legacy ODS shape', () => {
+  it('wraps an object in a default entry and preserves its settings', () => {
+    const legacy = {
+      layout: { boardWidthPercent: 80 },
+      display: { hideCompletedOrders: true },
+      brandkitOverride: { colors: { primary: '#fff' } }
+    }
+    expect(migrateOdsToArray(legacy, 'Default')).toEqual([
+      { label: 'Default', isDefault: true, ...legacy }
+    ])
+    expect(migrateOdsToArray(undefined, 'Default')).toEqual([])
+    const entries = [{ isDefault: false }]
+    expect(migrateOdsToArray(entries, 'Default')).toBe(entries)
+  })
+})

package/src/views/display-system/view-selection.spec.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest'
+import {
+  availableDisplaySystemViews,
+  defaultDisplaySystemView,
+  isPosV8,
+  requestedDisplaySystemView
+} from './view-selection'
+
+const v7a = { _id: 'v7a', posVersion: '7.9.0' }
+const v7b = { _id: 'v7b', posVersion: '7.12.31' }
+const v8a = { _id: 'v8a', posVersion: '8.0.0-beta.1' }
+const v8b = { _id: 'v8b', posVersion: '9.0.0' }
+const fresh = { _id: 'fresh', posVersion: null }
+
+const both = { canManageOrderSetting: true, canManageBrandkit: true, hasLegacyOdsConfigs: false }
+
+describe('available Display System views', () => {
+  it('offers each view only to users with its permission', () => {
+    expect(availableDisplaySystemViews({ ...both, outlets: [v7a, v8a] })).toEqual(['v8', 'v7'])
+    expect(
+      availableDisplaySystemViews({ ...both, canManageBrandkit: false, outlets: [v7a] })
+    ).toEqual(['v8'])
+    expect(
+      availableDisplaySystemViews({ ...both, canManageOrderSetting: false, outlets: [v7a] })
+    ).toEqual(['v7'])
+    expect(
+      availableDisplaySystemViews({
+        ...both,
+        canManageOrderSetting: false,
+        canManageBrandkit: false,
+        outlets: [v7a]
+      })
+    ).toEqual([])
+  })
+
+  it('offers the v7 view to an all-v8 business only while it still has v7 ODS configs', () => {
+    expect(availableDisplaySystemViews({ ...both, outlets: [v8a, v8b] })).toEqual(['v8'])
+    expect(
+      availableDisplaySystemViews({ ...both, outlets: [v8a, v8b], hasLegacyOdsConfigs: true })
+    ).toEqual(['v8', 'v7'])
+  })
+
+  it('does not count outlets without a POS version as v7', () => {
+    expect(availableDisplaySystemViews({ ...both, outlets: [fresh] })).toEqual(['v8'])
+    expect(
+      availableDisplaySystemViews({ ...both, canManageOrderSetting: false, outlets: [fresh, v8a] })
+    ).toEqual([])
+  })
+})
+
+describe('default Display System view', () => {
+  it('follows the business when every outlet runs the same POS', () => {
+    expect(defaultDisplaySystemView(['v8', 'v7'], [v7a, v7b])).toBe('v7')
+    expect(defaultDisplaySystemView(['v8', 'v7'], [v8a, v8b])).toBe('v8')
+  })
+
+  it('ignores outlets without a POS version, and defaults to v8 when none has one', () => {
+    expect(defaultDisplaySystemView(['v8', 'v7'], [v7a, fresh])).toBe('v7')
+    expect(defaultDisplaySystemView(['v8', 'v7'], [fresh])).toBe('v8')
+    expect(defaultDisplaySystemView(['v8', 'v7'], [])).toBe('v8')
+  })
+
+  it('follows the selected outlet in a mixed business', () => {
+    expect(defaultDisplaySystemView(['v8', 'v7'], [v7a, v8a], 'v7a')).toBe('v7')
+    expect(defaultDisplaySystemView(['v8', 'v7'], [v7a, v8a], 'v8a')).toBe('v8')
+    expect(defaultDisplaySystemView(['v8', 'v7'], [v7a, v8a, fresh], 'fresh')).toBe('v8')
+    expect(defaultDisplaySystemView(['v8', 'v7'], [v7a, v8a])).toBe('v8')
+  })
+
+  it('uses the only view a user can open', () => {
+    expect(defaultDisplaySystemView(['v7'], [v8a])).toBe('v7')
+    expect(defaultDisplaySystemView(['v8'], [v7a])).toBe('v8')
+    expect(defaultDisplaySystemView([], [v7a])).toBeUndefined()
+  })
+})
+
+describe('requested Display System view', () => {
+  it('reads ?view and the brand-app ?tab=legacy-ods link', () => {
+    expect(requestedDisplaySystemView({ view: 'v7' })).toBe('v7')
+    expect(requestedDisplaySystemView({ view: 'v8' })).toBe('v8')
+    expect(requestedDisplaySystemView({ tab: 'legacy-ods' })).toBe('v7')
+    expect(requestedDisplaySystemView({ view: 'other' })).toBeUndefined()
+    expect(requestedDisplaySystemView({})).toBeUndefined()
+  })
+})
+
+it('parses the major version like the backend', () => {
+  for (const posVersion of [undefined, null, '', '7.99', 'invalid']) {
+    expect(isPosV8(posVersion)).toBe(false)
+  }
+  expect(isPosV8('8.0.0-beta.1')).toBe(true)
+  expect(isPosV8('10')).toBe(true)
+})

package/src/views/display-system/view-selection.ts

@@ -0,0 +1,54 @@
+export type DisplaySystemView = 'v8' | 'v7'
+
+interface Outlet {
+  _id: string
+  posVersion?: string | null
+}
+
+export function isPosV8(posVersion: string | null | undefined): boolean {
+  if (!posVersion) return false
+  return parseInt(posVersion.split('.')[0]) >= 8
+}
+
+// An outlet that has never reported a POS version says nothing about which
+// system the merchant runs, so it is left out of every choice below.
+const isKnownV7 = (outlet: Outlet) => Boolean(outlet.posVersion) && !isPosV8(outlet.posVersion)
+
+export function availableDisplaySystemViews(options: {
+  canManageOrderSetting: boolean
+  canManageBrandkit: boolean
+  outlets: Outlet[]
+  hasLegacyOdsConfigs: boolean
+}): DisplaySystemView[] {
+  const views: DisplaySystemView[] = options.canManageOrderSetting ? ['v8'] : []
+  if (
+    options.canManageBrandkit &&
+    (options.outlets.some(isKnownV7) || options.hasLegacyOdsConfigs)
+  ) {
+    views.push('v7')
+  }
+  return views
+}
+
+export function defaultDisplaySystemView(
+  available: DisplaySystemView[],
+  outlets: Outlet[],
+  currentOutletId?: string
+): DisplaySystemView | undefined {
+  if (available.length < 2) return available[0]
+  const known = outlets.filter((outlet) => outlet.posVersion)
+  if (known.length && known.every(isKnownV7)) return 'v7'
+  if (known.every((outlet) => isPosV8(outlet.posVersion))) return 'v8'
+  const current = outlets.find((outlet) => outlet._id === currentOutletId)
+  return current && isKnownV7(current) ? 'v7' : 'v8'
+}
+
+// `?tab=legacy-ods` is what the brand-app Brandkit link sends.
+export function requestedDisplaySystemView(query: {
+  view?: unknown
+  tab?: unknown
+}): DisplaySystemView | undefined {
+  if (query.view === 'v7' || query.tab === 'legacy-ods') return 'v7'
+  if (query.view === 'v8') return 'v8'
+  return undefined
+}

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

@@ -27,13 +27,16 @@ import SmsSetting from './sms/SmsSetting.vue'
 
 import GeneralSetting from './general/GeneralSetting.vue'
 import QueueSetting from './queue/QueueSetting.vue'
+import ReservationSetting from './reservation/ReservationSetting.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 { currentRestaurant, sessionUser } = useCoreStore()
+// Reservations are FeedMe-admin only during the pilot (as the Dine-in switch).
+const isAdmin = computed(() => sessionUser.value?.role?.isAdmin ?? false)
 const menuStore = useMenuStore()
 const { showError } = useSnackbarFunctions()
 const qrEnabled = useQrOrderingEnabled()
@@ -47,6 +50,7 @@ type OrderSettingMenuItemValue =
   // | 'discountRule'
   | 'general'
   | 'queue'
+  | 'reservation'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
 const settingItem = computed<FmTabProps[]>(() => {
@@ -63,7 +67,8 @@ const settingItem = computed<FmTabProps[]>(() => {
     // { label: t('order.discountRule.title'), value: 'discountRule' },
     { label: t('order.notifications'), value: 'sms' },
     { label: t('order.general'), value: 'general' },
-    { label: t('order.queue'), value: 'queue' }
+    { label: t('order.queue'), value: 'queue' },
+    ...(isAdmin.value ? [{ label: t('order.reservation'), value: 'reservation' }] : [])
   ]
 })
 
@@ -97,6 +102,8 @@ const currentComponent = computed(() => {
       return GeneralSetting
     case 'queue':
       return QueueSetting
+    case 'reservation':
+      return ReservationSetting
     default:
       return DeliverySetting
   }