@feedmepos/mf-order-setting 0.0.90 → 0.0.91

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import type { ISelectItem } from '@feedmepos/ui-library'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useDialog, type ISelectItem } from '@feedmepos/ui-library'
 import { useCoreStore, useI18n } from '@feedmepos/mf-common'
 import { MediaPickerModal, type MediaSelection } from '@feedmepos/media-picker'
 import type { BlockEditorControl } from '@entity'
@@ -18,26 +18,26 @@ import type {
   DisplayTemplatePreset
 } from '@/modules/display-system/interface'
 import {
-  DISPLAY_CONTAINER_CHILD_LIMIT,
   addArea,
+  addAreaBeside,
   applyDividerRatio,
   blockDefinition,
   clearBlock,
+  DISPLAY_CONTAINER_CHILD_LIMIT,
   defaultBlock,
   defaultDisplayTemplateDraft,
   displayTemplateToDraft,
-  mergeGroup,
   removeArea,
   setBlock,
+  setLayoutDirection,
   splitArea,
   swapBlocks,
   walkZones,
-  zoneFitsMinimum,
-  zoneParent
+  zoneFitsMinimum
 } from '@/modules/display-system/interface'
 import DisplayPreview from './DisplayPreview.vue'
 import DisplayLayoutCanvas from './DisplayLayoutCanvas.vue'
-import DisplayModulePalette from './DisplayModulePalette.vue'
+import DisplayModulePickerDialog from './DisplayModulePickerDialog.vue'
 import DisplayInspector from './DisplayInspector.vue'
 
 const props = defineProps<{
@@ -58,6 +58,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const { currentBusiness, currentCountry, namespace, restaurants } = useCoreStore()
+const Dialog = useDialog()
 
 const draft = ref(defaultDisplayTemplateDraft())
 const previewBrandKit = ref<RestaurantDisplayBrandKit | null>()
@@ -67,8 +68,9 @@ const inspectorScope = ref<'area' | 'module'>('module')
 const presetsOpen = ref(false)
 const error = ref('')
 const dragging = ref(false)
-/** Type carried by the palette drag, so a drop knows what to insert. */
-const draggedType = ref('')
+/** A divider drag, kept separate from `dragging`: that flag also lights up
+ * every area as a drop target, which a resize must not do. */
+const resizingLayout = ref(false)
 const mediaPickerOpen = ref(false)
 const mediaTarget = ref<DisplayMediaTarget>({ kind: 'background' })
 const brokenImages = ref(new Set<string>())
@@ -115,14 +117,24 @@ const PRESETS: PresetOption[] = [
   { key: 'media', labelKey: 'presetMedia', direction: 'ROW', cells: [100] }
 ]
 
+/** Mirrors `syncDisplayScale` in display-system-v3's App.vue: the brand
+ * footer is a fixed 3.6rem there, and that root font-size is
+ * `16 * iframeWidth * scale / baseWidth` (1920 landscape, 1080 portrait). As a
+ * share of the FRAME's own height rather than its width, that only depends on
+ * scale and orientation, never on how large the frame itself renders here --
+ * so the overlay can reserve the same footer strip without asking the iframe
+ * for it. */
+function previewFooterHeightPercent(orientation: DisplayTemplateDraft['orientation'], scale: number): number {
+  const baseWidth = orientation === 'PORTRAIT' ? 1080 : 1920
+  const aspect = orientation === 'PORTRAIT' ? 9 / 16 : 16 / 9
+  return ((3.6 * 16 * scale) / baseWidth) * aspect * 100
+}
+
+const previewFooterPercent = computed(() => draft.value.hideFooter
+  ? 0
+  : previewFooterHeightPercent(draft.value.orientation, draft.value.scale ?? 1))
+
 const splitRoot = computed(() => (draft.value.root.kind === 'SPLIT' ? draft.value.root : undefined))
-const canAddArea = computed(
-  () => draft.value.root.kind === 'ZONE'
-    || (splitRoot.value?.children.length ?? 0) < DISPLAY_CONTAINER_CHILD_LIMIT
-)
-const canRemoveArea = computed(() => Boolean(
-  selectedZone.value && zoneParent(draft.value.root, selectedZone.value.id)
-))
 const isColumn = computed(() => splitRoot.value?.direction === 'COLUMN')
 
 const tooSmallFor = computed(() => {
@@ -213,13 +225,44 @@ function selectBlock(payload: { zoneId: string; blockId: string }): void {
   inspectorScope.value = 'module'
 }
 
-/** An area holds one module, so adding one replaces what is there. */
-function addModule(type: string, zoneId?: string): void {
-  const target = zoneId ?? selectedZone.value?.id
-  if (!target) return
-  const block = defaultBlock(type)
-  if (!setBlock(draft.value, target, block)) return
-  selectBlock({ zoneId: target, blockId: block.id })
+/** An area holds one module, so adding one replaces what is there -- silently
+ * for an empty area, but only after confirming when it would discard one
+ * that is already set up. */
+function addModule(type: string, zoneId: string): void {
+  const existing = zones.value.find((zone) => zone.id === zoneId)?.block
+  const apply = () => {
+    const block = defaultBlock(type)
+    if (!setBlock(draft.value, zoneId, block)) return
+    selectBlock({ zoneId, blockId: block.id })
+  }
+  if (!existing) {
+    apply()
+    return
+  }
+  Dialog.open({
+    title: t('order.displaySystem.editor.ui.replaceModuleConfirmTitle'),
+    message: t('order.displaySystem.editor.ui.replaceModuleConfirmMessage', {
+      current: t(blockDefinition(existing.type)?.editor.labelKey ?? existing.type)
+    }),
+    primaryActions: { text: t('order.displaySystem.editor.ui.replaceModuleConfirmAction'), variant: 'destructive', close: true },
+    secondaryActions: { text: t('order.displaySystem.common.cancel'), variant: 'tertiary', close: true },
+    // Without this it falls back to Tailwind's z-50, behind this editor's own
+    // z-[60] overlay -- the same reason MediaPickerModal below needs its :z-index.
+    zIndex: 70
+  }).onPrimary(apply)
+}
+
+/** The full grouped picker, opened right on the area it will fill -- an empty
+ * area is never more than one click from getting its module. */
+function openModulePicker(zoneId: string): void {
+  Dialog.open({
+    title: t('order.displaySystem.editor.ui.pickModuleTitle'),
+    contentComponent: DisplayModulePickerDialog,
+    zIndex: 70
+  }).onPrimary((type: string) => {
+    Dialog.close()
+    void nextTick(() => addModule(type, zoneId))
+  })
 }
 
 function onMoveBlock(payload: { fromZoneId: string; toZoneId: string }): void {
@@ -241,31 +284,44 @@ function onResize(payload: { path: number[]; index: number; ratio: number }): vo
   if (container) applyDividerRatio(container.children, payload.index, payload.ratio)
 }
 
-function onAddArea(): void {
-  // A new area starts empty: the merchant picks its module from the palette,
-  // which is one step instead of replacing a filler nobody asked for.
-  const created = addArea(draft.value, splitRoot.value?.direction ?? 'ROW')
-  if (created) selectZone(created)
+function onAddArea(direction: DisplaySplitDraft['direction']): void {
+  // A new area starts empty, so the picker opens on it right away instead of
+  // leaving a filler nobody asked for until the merchant notices it.
+  const created = addArea(draft.value, direction)
+  if (created) { selectZone(created); openModulePicker(created) }
 }
 
 function onSplitArea(zoneId: string): void {
   const created = splitArea(draft.value, zoneId)
-  if (created) selectZone(created)
+  if (created) { selectZone(created); openModulePicker(created) }
   else error.value = t('order.displaySystem.editor.ui.splitLimit')
 }
 
-function onMergeGroup(zoneId: string): void {
-  const kept = mergeGroup(draft.value, zoneId)
-  if (kept) selectZone(kept)
+function onExtendArea(zoneId: string): void {
+  const created = addAreaBeside(draft.value, zoneId)
+  if (created) { selectZone(created); openModulePicker(created) }
 }
 
-function onRemoveArea(): void {
-  const zone = selectedZone.value
-  if (zone && removeArea(draft.value, zone.id)) selectFirst()
+function onRemoveArea(zoneId: string): void {
+  const zone = zones.value.find((item) => item.id === zoneId)
+  const apply = () => {
+    if (removeArea(draft.value, zoneId)) selectFirst()
+  }
+  if (!zone?.block) {
+    apply()
+    return
+  }
+  Dialog.open({
+    title: t('order.displaySystem.editor.ui.removeAreaConfirmTitle'),
+    message: t('order.displaySystem.editor.ui.removeAreaConfirmMessage'),
+    primaryActions: { text: t('order.displaySystem.editor.ui.removeArea'), variant: 'destructive', close: true },
+    secondaryActions: { text: t('order.displaySystem.common.cancel'), variant: 'tertiary', close: true },
+    zIndex: 70
+  }).onPrimary(apply)
 }
 
 function toggleDirection(): void {
-  if (splitRoot.value) splitRoot.value.direction = isColumn.value ? 'ROW' : 'COLUMN'
+  if (splitRoot.value) setLayoutDirection(splitRoot.value, isColumn.value ? 'ROW' : 'COLUMN')
 }
 
 function removeModule(): void {
@@ -517,113 +573,112 @@ function save(): void {
               />
               <p v-if="footerWarning" class="rail-scale-warning">{{ footerWarning }}</p>
             </div>
-            <DisplayModulePalette
-              :can-add="Boolean(selectedZone)"
-              @add="addModule($event)"
-              @dragstart="(type) => { draggedType = type; dragging = true }"
-              @dragend="dragging = false; draggedType = ''"
-            />
           </aside>
 
-          <main class="editor-stage" :class="{ 'editor-stage-portrait': draft.orientation === 'PORTRAIT' }">
-            <section class="stage-preview">
-              <div
-                class="preview-frame"
-                :class="draft.orientation === 'PORTRAIT' ? 'preview-portrait' : 'preview-landscape'"
-              >
-                <DisplayPreview :config="draft" :restaurant="previewRestaurant" />
+          <main class="editor-stage">
+            <div class="layout-bar">
+              <div class="layout-bar-title">
+                <h3 class="layout-title">{{ t('order.displaySystem.editor.ui.layoutTitle') }}</h3>
+                <p class="layout-hint">{{ t('order.displaySystem.editor.ui.layoutHint') }}</p>
               </div>
-            </section>
-
-            <section class="stage-layout">
-              <!-- Layout controls belong to the canvas, so they sit on its edge
-                   rather than in a toolbar far from what they change. -->
-              <div class="layout-bar">
-                <div class="layout-bar-title">
-                  <h3 class="layout-title">{{ t('order.displaySystem.editor.ui.layoutTitle') }}</h3>
-                  <p class="layout-hint">{{ t('order.displaySystem.editor.ui.layoutHint') }}</p>
-                </div>
-                <div class="layout-actions">
-                  <FmTooltip
-                    :text="isColumn
-                      ? t('order.displaySystem.editor.ui.directionRow')
-                      : t('order.displaySystem.editor.ui.directionColumn')"
-                  >
-                    <FmButton
-                      v-if="splitRoot"
-                      variant="secondary"
-                      :prepend-icon="isColumn ? 'view_column' : 'view_agenda'"
-                      :label="isColumn
-                        ? t('order.displaySystem.editor.ui.directionColumn')
-                        : t('order.displaySystem.editor.ui.directionRow')"
-                      @click="toggleDirection"
-                    />
-                  </FmTooltip>
+              <div class="layout-actions">
+                <FmButton
+                  variant="secondary"
+                  prepend-icon="add"
+                  :label="t('order.displaySystem.editor.ui.addArea')"
+                  :disabled="Boolean(splitRoot && splitRoot.children.length >= DISPLAY_CONTAINER_CHILD_LIMIT)"
+                  @click="onAddArea(splitRoot?.direction ?? 'ROW')"
+                />
+                <FmTooltip
+                  :text="isColumn
+                    ? t('order.displaySystem.editor.ui.directionRow')
+                    : t('order.displaySystem.editor.ui.directionColumn')"
+                >
                   <FmButton
+                    v-if="splitRoot"
                     variant="secondary"
-                    prepend-icon="add"
-                    :label="t('order.displaySystem.editor.ui.addArea')"
-                    :disabled="!canAddArea"
-                    @click="onAddArea"
-                  />
-                  <FmTooltip :text="t('order.displaySystem.editor.ui.removeAreaTooltip')">
-                    <FmButton
-                      variant="plain"
-                      prepend-icon="delete"
-                      :disabled="!canRemoveArea"
-                      @click="onRemoveArea"
-                    />
-                  </FmTooltip>
-                  <FmButton
-                    variant="plain"
-                    prepend-icon="dashboard_customize"
-                    :label="t('order.displaySystem.editor.ui.resetLayout')"
-                    @click="presetsOpen = !presetsOpen"
+                    :prepend-icon="isColumn ? 'view_column' : 'view_agenda'"
+                    :label="isColumn
+                      ? t('order.displaySystem.editor.ui.directionColumn')
+                      : t('order.displaySystem.editor.ui.directionRow')"
+                    @click="toggleDirection"
                   />
-                </div>
+                </FmTooltip>
+                <FmButton
+                  variant="plain"
+                  prepend-icon="dashboard_customize"
+                  :label="t('order.displaySystem.editor.ui.resetLayout')"
+                  @click="presetsOpen = !presetsOpen"
+                />
               </div>
+            </div>
 
-              <div v-if="presetsOpen" class="preset-row">
-                <button
-                  v-for="preset in PRESETS"
-                  :key="preset.key"
-                  type="button"
-                  class="preset-card"
-                  @click="applyPreset(preset.key)"
+            <div v-if="presetsOpen" class="preset-row">
+              <button
+                v-for="preset in PRESETS"
+                :key="preset.key"
+                type="button"
+                class="preset-card"
+                @click="applyPreset(preset.key)"
+              >
+                <span
+                  class="preset-diagram"
+                  :class="preset.direction === 'ROW' ? 'preset-row-dir' : 'preset-column-dir'"
                 >
                   <span
-                    class="preset-diagram"
-                    :class="preset.direction === 'ROW' ? 'preset-row-dir' : 'preset-column-dir'"
-                  >
-                    <span
-                      v-for="(cell, index) in preset.cells"
-                      :key="index"
-                      class="preset-cell"
-                      :style="{ flexGrow: cell }"
-                    />
-                  </span>
-                  <span class="preset-label">
-                    {{ t(`order.displaySystem.editor.ui.${preset.labelKey}`) }}
-                  </span>
-                </button>
-              </div>
+                    v-for="(cell, index) in preset.cells"
+                    :key="index"
+                    class="preset-cell"
+                    :style="{ flexGrow: cell }"
+                  />
+                </span>
+                <span class="preset-label">
+                  {{ t(`order.displaySystem.editor.ui.${preset.labelKey}`) }}
+                </span>
+              </button>
+            </div>
 
-              <DisplayLayoutCanvas
-                :root="draft.root"
-                :selected-zone-id="selectedZone?.id ?? ''"
-                :selected-block-id="selectedBlockId"
-                :scope="inspectorScope"
-                :dragging="dragging"
-                @select-zone="selectZone"
-                @select-block="selectBlock"
-                @drop-block="(payload) => draggedType && addModule(draggedType, payload.zoneId)"
-                @move-block="onMoveBlock"
-                @resize="onResize"
-                @split-area="onSplitArea"
-                @merge-group="onMergeGroup"
-                @block-dragstart="dragging = true"
-                @block-dragend="dragging = false"
-              />
+            <!-- The editor lives directly on the preview it edits: a translucent
+                 layer that surfaces on hover or stays visible on touch devices.
+                 At rest, a mouse user sees what the screen will actually show. It sits beside the clipped
+                 preview frame rather than inside it, so the frame keeps rounding
+                 off the real content while the overlay's own border controls
+                 stay free to straddle an area's edge without being cut off. -->
+            <section class="stage-preview">
+              <div
+                class="preview-box"
+                :class="draft.orientation === 'PORTRAIT' ? 'preview-portrait' : 'preview-landscape'"
+              >
+                <div class="preview-frame">
+                  <DisplayPreview :config="draft" :restaurant="previewRestaurant" />
+                </div>
+                <div
+                  class="preview-edit-overlay"
+                  :class="{ 'preview-edit-overlay-active': dragging || resizingLayout }"
+                  :style="{ bottom: `${previewFooterPercent}%` }"
+                >
+                  <DisplayLayoutCanvas
+                    :root="draft.root"
+                    :selected-zone-id="selectedZone?.id ?? ''"
+                    :selected-block-id="selectedBlockId"
+                    :scope="inspectorScope"
+                    :dragging="dragging"
+                    @select-zone="selectZone"
+                    @select-block="selectBlock"
+                    @open-module-picker="openModulePicker"
+                    @move-block="onMoveBlock"
+                    @resize="onResize"
+                    @add-area="onAddArea"
+                    @split-area="onSplitArea"
+                    @extend-area="onExtendArea"
+                    @remove-area="onRemoveArea"
+                    @block-dragstart="dragging = true"
+                    @block-dragend="dragging = false"
+                    @resize-start="resizingLayout = true"
+                    @resize-end="resizingLayout = false"
+                  />
+                </div>
+              </div>
             </section>
           </main>
 
@@ -753,85 +808,70 @@ function save(): void {
   overflow: auto;
   padding: 16px;
 }
-/* A portrait preview is narrow, so stacking the canvas under it wastes the
-   width beside it. Sit them side by side instead. */
-.editor-stage-portrait {
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 16px;
-}
-.editor-stage-portrait {
-  /* Side by side, so the preview is free to use the full stage height. */
-  height: 100%;
-}
-.editor-stage-portrait .stage-preview {
-  min-height: 0;
-  flex: 0 0 auto;
-  align-self: stretch;
-}
-.editor-stage-portrait .preview-portrait {
-  height: 100%;
-  max-height: none;
-}
-.editor-stage-portrait .stage-layout {
-  min-width: 0;
-  flex: 1;
-}
-/* The column is narrower than in landscape, so the title and the actions no
-   longer fit on one line without crushing the hint. */
-.editor-stage-portrait .layout-bar {
-  flex-direction: column;
-  align-items: stretch;
-  gap: 8px;
-}
-.editor-stage-portrait .layout-actions {
-  flex-wrap: wrap;
-}
 .stage-preview {
   display: flex;
-  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
 }
-.preview-frame {
-  overflow: hidden;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  background: #101828;
+/* The sizing box: the frame and the overlay both sit inside this at
+   `inset: 0`, so they always share exactly the same bounds without either
+   one clipping the other. */
+.preview-box {
+  position: relative;
   margin: 0 auto;
 }
 /* Landscape is width-driven; portrait must be height-driven. Giving portrait
    `width: 100%` too would pin the width and let max-height clamp the height,
    which drops the aspect ratio entirely and leaves the frame looking landscape. */
-.preview-landscape {
+.preview-box.preview-landscape {
   width: 100%;
-  max-height: 52vh;
+  max-height: 72vh;
   aspect-ratio: 16 / 9;
 }
-.preview-portrait {
-  height: 52vh;
+.preview-box.preview-portrait {
+  height: 72vh;
   max-width: 100%;
   aspect-ratio: 9 / 16;
 }
+/* Clips the real preview to its rounded corners. The editor overlay lives
+   outside this box (a sibling, not a child) precisely so it is never subject
+   to this clipping -- its own border controls need to straddle an area's
+   edge without being cut off, which content inside the frame never does. */
+.preview-frame {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #101828;
+}
 .preview-frame :deep(> *) {
   width: 100%;
   height: 100%;
 }
-
-.stage-layout {
-  display: flex;
-  min-height: 0;
-  flex: 0 0 auto;
-  flex-direction: column;
-  gap: 10px;
-}
-/* Side by side, every area shares the full canvas height, so a cap keeps the
-   canvas from leaving dead space. Stacked, the areas divide that height between
-   them, so the canvas has to grow with how many there are. */
-.stage-layout :deep(.canvas-row) {
-  min-height: 176px;
-  max-height: 260px;
-}
-.stage-layout :deep(.canvas-column) {
-  min-height: calc(var(--area-count, 2) * 96px + 16px);
+/* The translucent editing layer: invisible until the merchant is actually
+   pointing at the preview (or mid-drag), so idle the screen reads as a plain
+   preview rather than a diagram. */
+.preview-edit-overlay {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+.preview-box:hover .preview-edit-overlay,
+.preview-box:focus-within .preview-edit-overlay,
+.preview-edit-overlay.preview-edit-overlay-active {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (hover: none), (pointer: coarse) {
+  .preview-edit-overlay {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 .layout-bar {
   display: flex;

package/src/views/kiosk/KioskView.vue

@@ -61,6 +61,7 @@ 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 { bindDeviceErrorKey } from '@/modules/kiosk/bindDeviceError'
 import { useCoreStore, useI18n } from '@feedmepos/mf-common'
 import { useOrderSettings } from '@/stores/order-setting'
 import { usePaymentStore } from '@/stores/payment'
@@ -185,10 +186,7 @@ async function requestOtp() {
     await KioskStore.requestOtp()
   } catch (e) {
     SnackBar.open({
-      title:
-        e instanceof SvcCompanyApiError && e.status === 403
-          ? t('order.bindDevicePermissionDenied')
-          : t('order.bindDeviceFailed'),
+      title: t(bindDeviceErrorKey(e instanceof SvcCompanyApiError ? e : null)),
       type: 'error'
     })
     return

package/vitest.config.ts

@@ -1,7 +1,9 @@
 import { fileURLToPath } from 'node:url'
+import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
+  plugins: [vue()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),