@feedmepos/mf-order-setting 0.0.90 → 0.0.91

package/src/views/display-system/DisplayModulePickerDialog.spec.ts

@@ -0,0 +1,71 @@
+// @vitest-environment happy-dom
+import { expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import { FeedMeUI } from '@feedmepos/ui-library'
+import { defaultDisplayTemplateDraft } from '@/modules/display-system/interface'
+
+vi.mock('@feedmepos/media-picker', () => ({ MediaPickerModal: { template: '<div />' } }))
+vi.mock('@feedmepos/mf-common', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+  useCoreStore: () => ({
+    currentBusiness: ref({}),
+    currentCountry: ref('MY'),
+    namespace: ref(''),
+    restaurants: ref([])
+  })
+}))
+vi.mock('@/api/brandkit', () => ({ getRestaurantDisplayBrandKit: vi.fn() }))
+vi.mock('./DisplayPreview.vue', () => ({ default: { template: '<iframe />' } }))
+vi.mock('./DisplayInspector.vue', () => ({ default: { template: '<div />' } }))
+import Editor from './DisplayTemplateEditor.vue'
+import Picker from './DisplayModulePickerDialog.vue'
+
+it('unmounts every replacement picker and fires onClose with ui-library 1.10.13', async () => {
+  const unmounted = vi.fn()
+  const closed = vi.fn()
+  const originalMixins = Picker.mixins
+  Picker.mixins = [...(originalMixins ?? []), { unmounted }]
+  const w = mount(Editor, {
+    props: { modelValue: false, template: defaultDisplayTemplateDraft('ads') as never },
+    global: { plugins: [FeedMeUI], stubs: { Teleport: true } }
+  })
+  const dialog = (
+    w.vm as unknown as {
+      $dialog: {
+        currentDialog: { dialogCount: number }
+        open: (options: unknown) => { onClose: (cb: () => void) => unknown }
+        close: () => void
+      }
+    }
+  ).$dialog
+  const originalOpen = dialog.open.bind(dialog)
+  const spy = vi.spyOn(dialog, 'open').mockImplementation((options) => {
+    const result = originalOpen(options)
+    result.onClose(closed)
+    return result
+  })
+  try {
+    await w.setProps({ modelValue: true })
+    for (let count = 1; count <= 3; count += 1) {
+      await w.find('.canvas-chip-swap').trigger('click')
+      await nextTick()
+      const pick = document.querySelector<HTMLButtonElement>('.module-picker-card')!
+      expect(pick).toBeTruthy()
+      pick.click()
+      await nextTick()
+      expect(unmounted).toHaveBeenCalledTimes(count)
+      expect(closed).toHaveBeenCalledTimes(count * 2 - 1)
+      expect(document.querySelector('.module-picker')).toBeNull()
+      expect(dialog.currentDialog.dialogCount).toBe(1)
+      dialog.close()
+      await nextTick()
+      expect(dialog.currentDialog.dialogCount).toBe(0)
+    }
+  } finally {
+    while (dialog.currentDialog.dialogCount > 0) dialog.close()
+    spy.mockRestore()
+    w.unmount()
+    Picker.mixins = originalMixins
+  }
+})

package/src/views/display-system/DisplayModulePickerDialog.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@feedmepos/mf-common'
+import { useDialogChild } from '@feedmepos/ui-library'
+import { DISPLAY_BLOCK_DEFINITIONS } from '@entity'
+
+const { t } = useI18n()
+const { emitData, emitAction } = useDialogChild<string>()
+
+const GROUP_ORDER = ['pickup', 'queue', 'media', 'info'] as const
+
+const groups = computed(() =>
+  GROUP_ORDER.map((group) => ({
+    group,
+    label: t(`order.displaySystem.editor.ui.group${group.charAt(0).toUpperCase()}${group.slice(1)}`),
+    items: DISPLAY_BLOCK_DEFINITIONS.filter((definition) => definition.editor.group === group)
+  })).filter((entry) => entry.items.length)
+)
+
+function pick(type: string): void {
+  emitData(type)
+  emitAction('primary')
+}
+</script>
+
+<template>
+  <div class="module-picker">
+    <p class="module-picker-hint">{{ t('order.displaySystem.editor.ui.pickModuleHint') }}</p>
+    <section v-for="entry in groups" :key="entry.group" class="module-picker-group">
+      <h4 class="module-picker-group-label">{{ entry.label }}</h4>
+      <div class="module-picker-grid">
+        <button
+          v-for="definition in entry.items"
+          :key="definition.type"
+          type="button"
+          class="module-picker-card"
+          @click="pick(definition.type)"
+        >
+          <span class="module-picker-icon"><FmIcon :name="definition.editor.icon" size="sm" /></span>
+          <span class="module-picker-label">{{ t(definition.editor.labelKey) }}</span>
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.module-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.module-picker-hint {
+  margin: 0;
+  color: #6b7280;
+  font-size: 12px;
+}
+.module-picker-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.module-picker-group-label {
+  margin: 0;
+  color: #9ca3af;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.module-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+}
+.module-picker-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 14px 10px;
+  background: white;
+  color: #374151;
+  font-size: 13px;
+  text-align: center;
+  cursor: pointer;
+}
+.module-picker-card:hover {
+  border-color: #f97316;
+  background: #fffbf5;
+}
+.module-picker-icon {
+  display: grid;
+  height: 36px;
+  width: 36px;
+  place-items: center;
+  border-radius: 8px;
+  background: #f3f4f6;
+  color: #4b5563;
+}
+.module-picker-label {
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+</style>

package/src/views/display-system/DisplayTemplateEditor.spec.ts

@@ -0,0 +1,151 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import { FdtoCreateDisplayTemplate } from '@entity'
+import {
+  defaultDisplayTemplateDraft,
+  displayTemplatePayload,
+  walkZones,
+  type DisplaySplitDraft
+} from '@/modules/display-system/interface'
+
+const dialog = vi.hoisted(() => ({ open: vi.fn(), close: vi.fn() }))
+vi.mock('@feedmepos/ui-library', () => ({ useDialog: () => dialog }))
+vi.mock('@feedmepos/media-picker', () => ({ MediaPickerModal: { template: '<div />' } }))
+vi.mock('@feedmepos/mf-common', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+  useCoreStore: () => ({
+    currentBusiness: ref({}),
+    currentCountry: ref('MY'),
+    namespace: ref(''),
+    restaurants: ref([])
+  })
+}))
+vi.mock('@/api/brandkit', () => ({ getRestaurantDisplayBrandKit: vi.fn() }))
+vi.mock('./DisplayPreview.vue', () => ({ default: { template: '<iframe />' } }))
+vi.mock('./DisplayInspector.vue', () => ({ default: { template: '<div />' } }))
+import Editor from './DisplayTemplateEditor.vue'
+import Canvas from './DisplayLayoutCanvas.vue'
+
+const wrappers: VueWrapper[] = []
+afterEach(() => {
+  wrappers.forEach((w) => w.unmount())
+  wrappers.length = 0
+  vi.clearAllMocks()
+})
+async function editor() {
+  const draft = defaultDisplayTemplateDraft('ads')
+  draft.label = 'Board and ads'
+  walkZones(draft.root).forEach((zone) => {
+    if (zone.block?.type === 'media.image')
+      zone.block.props.url = 'https://image.feedme.cc/promo.png'
+    if (zone.block?.type === 'media.carousel')
+      zone.block.props.items = [
+        { kind: 'IMAGE', url: 'https://image.feedme.cc/ad.png', objectFit: 'COVER' }
+      ]
+  })
+  const w = mount(Editor, {
+    props: { modelValue: false, template: draft as never },
+    global: {
+      stubs: {
+        Teleport: true,
+        FmTooltip: { template: '<div><slot /></div>' },
+        FmButton: {
+          props: ['label', 'disabled'],
+          template: '<button :disabled="disabled">{{ label }}</button>'
+        },
+        FmIcon: true,
+        FmTextField: true,
+        FmStepperField: true,
+        FmSelect: true,
+        FmSwitch: true
+      }
+    }
+  })
+  wrappers.push(w)
+  await w.setProps({ modelValue: true })
+  return w
+}
+function button(w: VueWrapper, suffix: string) {
+  return w.findAll('button').find((b) => b.text().endsWith(suffix))!
+}
+function root(w: VueWrapper) {
+  return w.findComponent(Canvas).props('root') as DisplaySplitDraft
+}
+
+describe('DisplayTemplateEditor review regressions', () => {
+  it('offers a top-level add action for Board + ads and stops at the cap', async () => {
+    dialog.open.mockReturnValue({ onPrimary: vi.fn() })
+    const w = await editor()
+    for (let count = 2; count < 6; count += 1) {
+      const add = button(w, '.addArea')
+      expect(add).toBeDefined()
+      await add.trigger('click')
+      expect(root(w).children).toHaveLength(count + 1)
+    }
+    expect(button(w, '.addArea').attributes('disabled')).toBeDefined()
+    expect(
+      walkZones(root(w))
+        .slice(0, 3)
+        .map((zone) => zone.block?.type)
+    ).toEqual(['pickup.categoryBoard', 'media.image', 'media.carousel'])
+  })
+
+  it('toggles nested directions and emits a Save payload accepted by the API', async () => {
+    const w = await editor()
+    const baseline = FdtoCreateDisplayTemplate.safeParse(
+      displayTemplatePayload({ ...defaultDisplayTemplateDraft(), label: 'Valid', root: root(w) })
+    )
+    expect(baseline.success, JSON.stringify(baseline)).toBe(true)
+    await button(w, '.directionRow').trigger('click')
+    expect((root(w).children[1]!.node as DisplaySplitDraft).direction).toBe('ROW')
+    await button(w, '.save').trigger('click')
+    const saved = w.emitted('save')![0]![0] as ReturnType<typeof defaultDisplayTemplateDraft>
+    expect(FdtoCreateDisplayTemplate.safeParse(displayTemplatePayload(saved)).success).toBe(true)
+  })
+
+  it('confirms populated removal, leaves it on cancel, and removes empty areas immediately', async () => {
+    let confirm: (() => void) | undefined
+    dialog.open.mockReturnValue({
+      onPrimary: (cb: () => void) => {
+        confirm = cb
+      }
+    })
+    const w = await editor()
+    await w.find('.canvas-area-remove').trigger('click')
+    expect(walkZones(root(w))).toHaveLength(3)
+    expect(dialog.open).toHaveBeenCalledWith(
+      expect.objectContaining({ title: expect.stringContaining('removeAreaConfirmTitle') })
+    )
+    // Cancelling never invokes the primary callback.
+    expect(walkZones(root(w))[0]!.block?.type).toBe('pickup.categoryBoard')
+    confirm!()
+    await nextTick()
+    expect(walkZones(root(w))).toHaveLength(2)
+    const zone = walkZones(root(w))[1]!
+    delete zone.block
+    await nextTick()
+    dialog.open.mockClear()
+    await w.findAll('.canvas-area-remove')[1]!.trigger('click')
+    expect(dialog.open).not.toHaveBeenCalled()
+    expect(w.findComponent(Canvas).props('root').kind).toBe('ZONE')
+  })
+
+  it('closes the picker before opening replacement confirmation', async () => {
+    let pick: ((type: string) => void) | undefined
+    dialog.open.mockReturnValue({
+      onPrimary: (cb: (type: string) => void) => {
+        pick = cb
+      }
+    })
+    const w = await editor()
+    await w.find('.canvas-chip-swap').trigger('click')
+    pick!('info.text')
+    await nextTick()
+    expect(dialog.close).toHaveBeenCalledTimes(1)
+    expect(dialog.close.mock.invocationCallOrder[0]).toBeLessThan(
+      dialog.open.mock.invocationCallOrder[1]!
+    )
+  })
+})