@feedmepos/mf-order-setting 0.0.84 → 0.0.85

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

@@ -11,6 +11,9 @@ const props = defineProps<{
   value: unknown
   mediaEnabled: boolean
   imageIsUsable: (url: string) => boolean
+  /** Sibling prop of a video field. The thumbnail cannot come from `value`:
+   * that is the .mp4, which no <img> will render. */
+  posterUrl?: string
 }>()
 
 const emit = defineEmits<{
@@ -29,6 +32,7 @@ const seconds = computed(() => Math.round(
   (typeof props.value === 'number' ? props.value : props.field.min ?? 10_000) / 1000
 ))
 const imageUrl = computed(() => String(props.value ?? ''))
+const videoPoster = computed(() => props.posterUrl ?? '')
 
 const selectItems = computed<ISelectItem[]>(() =>
   (props.field.options ?? []).map((option) => ({
@@ -71,6 +75,39 @@ const selectItems = computed<ISelectItem[]>(() =>
     :step="field.step ?? 1"
     @update:model-value="(next) => emit('update', next)"
   />
+  <div v-else-if="field.control === 'video'" class="media-field">
+    <span class="media-label">{{ t(field.labelKey) }}</span>
+    <img
+      v-if="imageIsUsable(videoPoster)"
+      class="media-thumb"
+      :src="videoPoster"
+      alt=""
+      @error="emit('image-error', videoPoster)"
+    >
+    <!-- A set video with no poster is the undecodable case, not a cosmetic
+         gap, so it reads as a warning rather than an empty state. -->
+    <span v-else :class="imageUrl ? 'media-warning' : 'media-empty'">
+      {{ imageUrl
+        ? t('order.displaySystem.editor.ui.videoUndecodable')
+        : t('order.displaySystem.editor.ui.noVideo') }}
+    </span>
+    <div class="media-actions">
+      <FmButton
+        variant="secondary"
+        :label="imageUrl
+          ? t('order.displaySystem.editor.ui.replaceVideo')
+          : t('order.displaySystem.editor.ui.chooseVideo')"
+        :disabled="!mediaEnabled"
+        @click="emit('pick-media')"
+      />
+      <FmButton
+        v-if="imageUrl"
+        variant="plain"
+        :label="t('order.displaySystem.editor.ui.clearVideo')"
+        @click="emit('clear-image')"
+      />
+    </div>
+  </div>
   <div v-else-if="field.control === 'image'" class="media-field">
     <span class="media-label">{{ t(field.labelKey) }}</span>
     <img
@@ -132,6 +169,15 @@ const selectItems = computed<ISelectItem[]>(() =>
   color: #9ca3af;
   font-size: 12px;
 }
+.media-warning {
+  display: grid;
+  height: 72px;
+  place-items: center;
+  border: 1px dashed #d1d5db;
+  border-radius: 8px;
+  color: #b54708;
+  font-size: 12px;
+}
 .media-actions {
   display: flex;
   gap: 6px;

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

@@ -4,7 +4,7 @@ import type { FmTabProps } from '@feedmepos/ui-library'
 import { useI18n } from '@feedmepos/mf-common'
 import type { BlockEditorControl, BlockEditorField, BlockEditorItemVariant } from '@entity'
 
-import type { DisplayBlockDraft, DisplayZoneDraft } from '@/modules/display-system/interface'
+import type { DisplayBlockDraft, DisplayMediaTarget, DisplayZoneDraft } from '@/modules/display-system/interface'
 import { blockDefinition } from '@/modules/display-system/interface'
 import DisplayFieldControl from './DisplayFieldControl.vue'
 
@@ -24,7 +24,7 @@ const emit = defineEmits<{
   /** `path` may be dotted (`items.0.url`), so one handler covers block props
    * and list items alike. */
   (event: 'set-prop', payload: { path: string; control: BlockEditorControl; value: unknown }): void
-  (event: 'pick-media', target: { kind: 'background' } | { kind: 'block'; path: string }): void
+  (event: 'pick-media', target: DisplayMediaTarget): void
   (event: 'clear-background'): void
   (event: 'clear-prop', path: string): void
   (event: 'add-item', payload: { path: string; variant: string }): void
@@ -238,7 +238,12 @@ function canRemoveItem(field: BlockEditorField): boolean {
             :media-enabled="mediaEnabled"
             :image-is-usable="imageIsUsable"
             @update="(value) => emit('set-prop', { path: field.path, control: field.control, value })"
-            @pick-media="emit('pick-media', { kind: 'block', path: field.path })"
+            :poster-url="typeof values.posterUrl === 'string' ? values.posterUrl : undefined"
+            @pick-media="emit('pick-media', {
+              kind: 'block',
+              path: field.path,
+              mediaKind: field.control === 'video' ? 'video' : 'image'
+            })"
             @clear-image="emit('clear-prop', field.path)"
             @image-error="(url) => emit('image-error', url)"
           />

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

@@ -5,7 +5,7 @@ import type { FmTabProps, ISelectItem } from '@feedmepos/ui-library'
 
 import { useSnackbarFunctions } from '@/components/snackbar'
 import type { CreateDisplayScreen, DisplayScreen, DisplayTemplate, DisplayTemplateDraft } from '@/modules/display-system/interface'
-import { displayTemplatePayload, displayTemplateToDraft, templateCapabilities, walkZones } from '@/modules/display-system/interface'
+import { displayTemplatePayload, displayTemplateToDraft, templateCapabilities, unlicensedScreenIds, walkZones } from '@/modules/display-system/interface'
 import { useDisplaySystemStore } from '@/stores/display-system'
 import DisplayScreenEditor from './DisplayScreenEditor.vue'
 import DisplayTemplateEditor from './DisplayTemplateEditor.vue'
@@ -27,6 +27,10 @@ const saving = ref(false)
 const tabs = computed<FmTabProps[]>(() => [{ label: t('order.displaySystem.screens'), value: 'screens' }, { label: t('order.displaySystem.templates'), value: 'templates' }])
 const restaurantItems = computed<ISelectItem[]>(() => core.restaurants.value.map((restaurant) => ({ label: restaurant.profile.name, value: restaurant._id })))
 const entitlement = computed(() => store.screenCapabilities)
+// Oldest screens keep the licence, so the newest lose it first. Merchants can
+// act on this: buy another screen, or pause one.
+const unlicensedScreens = computed(() =>
+  unlicensedScreenIds(store.screens, entitlement.value?.screenLimit ?? 0))
 const remainingScreens = computed(() => Math.max(0, (entitlement.value?.screenLimit ?? 0) - (entitlement.value?.screenUsed ?? 0)))
 const applicableTemplates = computed(() => store.templates.filter((template) => !template.restaurantIds?.length || template.restaurantIds.includes(selectedRestaurantId.value)))
 const canAddScreen = computed(() => Boolean(selectedRestaurantId.value && entitlement.value?.posV8 && remainingScreens.value > 0 && applicableTemplates.value.length))
@@ -125,7 +129,7 @@ watch(() => core.restaurants.value.length, async (length) => { if (!selectedRest
         <div v-if="store.loadingScreens" class="flex justify-center py-40"><FmCircularProgress size="lg" /></div>
         <div v-else-if="!store.screens.length" class="empty-state"><strong>{{ t('order.displaySystem.noScreens') }}</strong><span>Create a screen and assign one applicable template.</span></div>
         <div v-else class="grid grid-cols-1 gap-16 xl:grid-cols-2">
-          <article v-for="screen in store.screens" :key="screen._id" class="resource-card"><div class="flex justify-between gap-12"><div class="min-w-0"><div class="flex flex-wrap items-center gap-8"><h3 class="truncate text-lg font-semibold">{{ screen.name }}</h3><span class="status-badge" :class="screen.status.toLowerCase()">{{ screen.status }}</span><span class="online-dot" :class="{ online: isOnline(screen) }">{{ isOnline(screen) ? t('order.displaySystem.online') : t('order.displaySystem.offline') }}</span></div><p class="mt-4 text-sm text-gray-500">{{ templateName(screen.templateId) }}</p><p v-if="orientationMismatch(screen)" class="mt-2 text-xs text-orange-700">Reported viewport orientation does not match the template.</p></div><div class="flex gap-4"><FmButton :icon="screen.status === 'DISABLED' ? 'play_arrow' : 'pause'" variant="plain" @click="toggleStatus(screen)" /><FmButton icon="edit" variant="plain" @click="editScreen(screen)" /><FmButton icon="delete" variant="plain" @click="removeScreen(screen)" /></div></div><dl class="meta-grid"><div><dt>{{ t('order.displaySystem.deviceId') }}</dt><dd>{{ screen.deviceId || '—' }}</dd></div><div><dt>{{ t('order.displaySystem.lastSeen') }}</dt><dd>{{ screen.lastSeenAt ? new Date(screen.lastSeenAt).toLocaleString() : '—' }}</dd></div></dl></article>
+          <article v-for="screen in store.screens" :key="screen._id" class="resource-card"><div class="flex justify-between gap-12"><div class="min-w-0"><div class="flex flex-wrap items-center gap-8"><h3 class="truncate text-lg font-semibold">{{ screen.name }}</h3><span class="status-badge" :class="screen.status.toLowerCase()">{{ screen.status }}</span><span class="online-dot" :class="{ online: isOnline(screen) }">{{ isOnline(screen) ? t('order.displaySystem.online') : t('order.displaySystem.offline') }}</span><span v-if="unlicensedScreens.has(screen._id)" class="status-badge unlicensed">{{ t('order.displaySystem.unlicensed') }}</span></div><p class="mt-4 text-sm text-gray-500">{{ templateName(screen.templateId) }}</p><p v-if="orientationMismatch(screen)" class="mt-2 text-xs text-orange-700">Reported viewport orientation does not match the template.</p><p v-if="unlicensedScreens.has(screen._id)" class="mt-2 text-xs text-red-700">{{ t('order.displaySystem.unlicensedNote') }}</p></div><div class="flex gap-4"><FmButton :icon="screen.status === 'DISABLED' ? 'play_arrow' : 'pause'" variant="plain" @click="toggleStatus(screen)" /><FmButton icon="edit" variant="plain" @click="editScreen(screen)" /><FmButton icon="delete" variant="plain" @click="removeScreen(screen)" /></div></div><dl class="meta-grid"><div><dt>{{ t('order.displaySystem.deviceId') }}</dt><dd>{{ screen.deviceId || '—' }}</dd></div><div><dt>{{ t('order.displaySystem.lastSeen') }}</dt><dd>{{ screen.lastSeenAt ? new Date(screen.lastSeenAt).toLocaleString() : '—' }}</dd></div></dl></article>
         </div>
       </section>
       <section v-else class="mt-12">
@@ -140,5 +144,5 @@ watch(() => core.restaurants.value.length, async (length) => { if (!selectedRest
 </template>
 
 <style scoped>
-.display-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e5e7eb;padding-bottom:14px}.display-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px}.display-restaurant-select{width:min(360px,100%)}.display-outlet{display:flex;align-items:center;gap:16px}.display-entitlement{color:#6b7280;font-size:12px;white-space:nowrap}.restriction-note{margin-top:12px;border:1px solid #fed7aa;border-radius:10px;padding:10px 12px;color:#9a3412;background:#fff7ed;font-size:13px}.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}.layout-thumb{display:flex;height:auto;min-height:96px;margin-top:16px;border-radius:10px;background:#f3f4f6;padding:5px;pointer-events:none}.thumb-caption{margin-top:8px;color:#6b7280;font-size:11px}.resource-card{border:1px solid #e5e7eb;border-radius:12px;padding:20px;background:white;box-shadow:0 2px 8px #0000000a}.mode-badge,.status-badge{border-radius:999px;padding:3px 8px;background:#f3f4f6;font-size:11px;font-weight:700}.status-badge.active{color:#166534;background:#dcfce7}.status-badge.disabled{color:#991b1b;background:#fee2e2}.online-dot{color:#6b7280;font-size:11px}.online-dot::before{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#9ca3af;content:''}.online-dot.online{color:#15803d}.online-dot.online::before{background:#22c55e}.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;border-top:1px solid #f0f0f0;padding-top:16px}.meta-grid dt{color:#6b7280;font-size:11px}.meta-grid dd{overflow:hidden;margin-top:2px;font-size:12px;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.display-toolbar{align-items:flex-start}.display-controls{align-items:stretch;flex-direction:column}.display-outlet{align-items:stretch;flex-direction:column;gap:8px}.display-restaurant-select{width:100%}}
+.display-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e5e7eb;padding-bottom:14px}.display-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px}.display-restaurant-select{width:min(360px,100%)}.display-outlet{display:flex;align-items:center;gap:16px}.display-entitlement{color:#6b7280;font-size:12px;white-space:nowrap}.restriction-note{margin-top:12px;border:1px solid #fed7aa;border-radius:10px;padding:10px 12px;color:#9a3412;background:#fff7ed;font-size:13px}.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}.layout-thumb{display:flex;height:auto;min-height:96px;margin-top:16px;border-radius:10px;background:#f3f4f6;padding:5px;pointer-events:none}.thumb-caption{margin-top:8px;color:#6b7280;font-size:11px}.resource-card{border:1px solid #e5e7eb;border-radius:12px;padding:20px;background:white;box-shadow:0 2px 8px #0000000a}.mode-badge,.status-badge{border-radius:999px;padding:3px 8px;background:#f3f4f6;font-size:11px;font-weight:700}.status-badge.active{color:#166534;background:#dcfce7}.status-badge.disabled{color:#991b1b;background:#fee2e2}.status-badge.unlicensed{color:#b42318;background:#fef3f2;border:1px solid #fecdca}.online-dot{color:#6b7280;font-size:11px}.online-dot::before{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#9ca3af;content:''}.online-dot.online{color:#15803d}.online-dot.online::before{background:#22c55e}.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;border-top:1px solid #f0f0f0;padding-top:16px}.meta-grid dt{color:#6b7280;font-size:11px}.meta-grid dd{overflow:hidden;margin-top:2px;font-size:12px;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.display-toolbar{align-items:flex-start}.display-controls{align-items:stretch;flex-direction:column}.display-outlet{align-items:stretch;flex-direction:column;gap:8px}.display-restaurant-select{width:100%}}
 </style>

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

@@ -11,6 +11,7 @@ import {
 } from '@/api/brandkit'
 import type {
   DisplayCapability,
+  DisplayMediaTarget,
   DisplaySplitDraft,
   DisplayTemplate,
   DisplayTemplateDraft,
@@ -69,7 +70,7 @@ const dragging = ref(false)
 /** Type carried by the palette drag, so a drop knows what to insert. */
 const draggedType = ref('')
 const mediaPickerOpen = ref(false)
-const mediaTarget = ref<{ kind: 'background' } | { kind: 'block'; path: string }>({ kind: 'background' })
+const mediaTarget = ref<DisplayMediaTarget>({ kind: 'background' })
 const brokenImages = ref(new Set<string>())
 let previewBrandKitRequest = 0
 
@@ -380,7 +381,7 @@ function imageIsUsable(url: string): boolean {
   return Boolean(url) && !brokenImages.value.has(url)
 }
 
-function pickMedia(target: { kind: 'background' } | { kind: 'block'; path: string }): void {
+function pickMedia(target: DisplayMediaTarget): void {
   mediaTarget.value = target
   mediaPickerOpen.value = true
 }
@@ -398,10 +399,32 @@ function selectMedia(selection: MediaSelection): void {
   } else if (target.kind === 'block') {
     const holder = propHolder(target.path)
     if (holder) holder.holder[holder.key] = selection.url
+    if (selection.kind === 'video') applyVideoPoster(target.path, selection)
   }
   mediaPickerOpen.value = false
 }
 
+/** The poster is a sibling prop that comes from the server: a video's key ends
+ * in a file extension while its poster hangs off the key segments, so it cannot
+ * be built from the url.
+ *
+ * hasPoster === false leaves it empty on purpose. It does not mean "no
+ * thumbnail" -- the uploading browser could not decode the file, which is the
+ * best signal available that a screen may not play it either. An empty poster
+ * against a set url is what makes the field render that warning, with no extra
+ * state to keep in sync. */
+function applyVideoPoster(path: string, selection: MediaSelection): void {
+  const posterPath = path.replace(/(^|\.)url$/, '$1posterUrl')
+  // A replace that matched nothing would resolve to the url's own prop and
+  // overwrite the video with its poster.
+  if (posterPath === path) return
+  const poster = propHolder(posterPath)
+  if (!poster) return
+  poster.holder[poster.key] = selection.asset.hasPoster === false
+    ? ''
+    : selection.asset.posterUrl ?? ''
+}
+
 function clearBackground(): void {
   if (selectedZone.value) selectedZone.value.background = undefined
 }
@@ -628,11 +651,14 @@ function save(): void {
         </div>
       </section>
 
+      <!-- Only the field being filled decides what is offered: a zone
+           background and every carousel item render as an image. -->
       <MediaPickerModal
         v-model:open="mediaPickerOpen"
         :z-index="70"
         :business-id="mediaBusinessId"
         :restaurant-id="previewRestaurantId || undefined"
+        :kinds="[mediaTarget.kind === 'block' ? mediaTarget.mediaKind ?? 'image' : 'image']"
         @select="selectMedia"
       />
     </div>

package/src/views/kiosk/settings/KioskSettingView.vue

@@ -188,67 +188,118 @@
       </div>
     </div>
 
-    <!-- Cover Image Section -->
+    <!--
+      Cover Image Section
+
+      One ordered list per orientation, not one image: the kiosk landing screen
+      cross-fades between them. `coverCarousel.ts` is what turns a list back
+      into the two stored fields, so nothing here has to know that a
+      single-image merchant keeps writing `coverImage*` exactly as before.
+    -->
     <div class="flex flex-col gap-2">
       <span class="fm-typo-en-title-sm-600">{{ t('order.coverImage') }}</span>
       <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
         t('order.coverImageFallbackHint')
       }}</span>
+      <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
+        t('order.coverCarouselHint', { max: MAX_COVER_IMAGES })
+      }}</span>
 
-      <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-4 my-5 w-11/12">
-        <span class="fm-typo-en-body-md-600">{{ t('order.coverImageLandscape') }}</span>
+      <div
+        v-for="orientation in COVER_ORIENTATIONS"
+        :key="orientation.value"
+        class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-4 my-5 w-11/12"
+      >
+        <span class="fm-typo-en-body-md-600">{{ t(orientation.labelKey) }}</span>
         <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
-          t('order.coverImageLandscapeHint')
+          t(orientation.hintKey)
         }}</span>
-        <FmDropField
-          v-if="!getCoverImagePreview('coverImageLandscape')"
-          accept="image/*"
-          :max-file-size="MAX_IMAGE_FILE_SIZE"
-          content-class="w-full max-w-[400px] aspect-video"
-          @file-upload="uploadCoverImage('coverImageLandscape', $event)"
-          @file-rejected="handleCoverImageRejected('coverImageLandscape', $event)"
-        />
-        <div v-else class="flex flex-col gap-2">
-          <img
-            :src="getCoverImagePreview('coverImageLandscape')!"
-            :alt="t('order.coverImageLandscape')"
-            class="max-w-[400px] aspect-video object-cover rounded-md border border-fm-color-neutral-gray-200"
-          />
-          <FmButton
-            variant="tertiary"
-            class="mr-auto"
-            :label="t('common.delete')"
-            @click="clearCoverImage('coverImageLandscape')"
+
+        <div class="flex flex-wrap items-start gap-4">
+          <div
+            v-for="(image, index) in coverImages(orientation.value)"
+            :key="`${orientation.value}-${index}-${image}`"
+            class="flex flex-col gap-2"
+          >
+            <div class="relative">
+              <img
+                :src="image"
+                :alt="`${t(orientation.labelKey)} ${index + 1}`"
+                :class="[
+                  orientation.previewClass,
+                  'object-cover rounded-md border border-fm-color-neutral-gray-200'
+                ]"
+              />
+              <!--
+                The number is the point of the list: order is what the kiosk
+                fades through, and a wall of thumbnails does not show it.
+
+                `bg-fm-color-typo-primary`, not the neutral-gray-500 you would
+                expect: that token generates NOTHING in this app (measured
+                transparent), which left white text sitting on a photo. gray-400
+                and gray-200 do exist — the 500 step simply is not in the bg
+                scale.
+              -->
+              <span
+                class="absolute top-2 left-2 px-2 rounded-full bg-fm-color-typo-primary text-fm-color-neutral-white fm-typo-en-body-sm-400"
+              >
+                {{ index + 1 }}
+              </span>
+            </div>
+            <div class="flex items-center gap-1">
+              <FmButton
+                variant="tertiary"
+                size="md"
+                prepend-icon="arrow_back"
+                :disabled="index === 0"
+                :aria-label="t('order.coverCarouselMoveEarlier')"
+                @click="moveCoverImage(orientation.value, index, index - 1)"
+              />
+              <FmButton
+                variant="tertiary"
+                size="md"
+                prepend-icon="arrow_forward"
+                :disabled="index === coverImages(orientation.value).length - 1"
+                :aria-label="t('order.coverCarouselMoveLater')"
+                @click="moveCoverImage(orientation.value, index, index + 1)"
+              />
+              <FmButton
+                variant="tertiary"
+                size="md"
+                prepend-icon="delete"
+                :aria-label="t('common.delete')"
+                @click="removeCoverImage(orientation.value, index)"
+              />
+            </div>
+          </div>
+
+          <FmDropField
+            v-if="coverImages(orientation.value).length < MAX_COVER_IMAGES"
+            accept="image/*"
+            :max-file-size="MAX_IMAGE_FILE_SIZE"
+            :content-class="orientation.dropClass"
+            @file-upload="addCoverImage(orientation.value, $event)"
+            @file-rejected="handleCoverImageRejected(orientation.value, $event)"
           />
         </div>
       </div>
 
-      <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-4 my-5 w-11/12">
-        <span class="fm-typo-en-body-md-600">{{ t('order.coverImagePortrait') }}</span>
+      <!--
+        Only worth showing once there is something to fade between — with a
+        single image the kiosk never starts its timer.
+      -->
+      <div v-if="hasCoverCarousel" class="w-11/12">
+        <FmStepperField
+          v-model="coverIntervalSeconds"
+          class="max-w-[240px]"
+          :label="t('order.coverCarouselInterval')"
+          :min="MIN_COVER_INTERVAL_SECONDS"
+          :max="MAX_COVER_INTERVAL_SECONDS"
+          :placeholder="String(DEFAULT_COVER_INTERVAL_SECONDS)"
+        />
         <span class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">{{
-          t('order.coverImagePortraitHint')
+          t('order.coverCarouselIntervalHint', { seconds: DEFAULT_COVER_INTERVAL_SECONDS })
         }}</span>
-        <FmDropField
-          v-if="!getCoverImagePreview('coverImagePortrait')"
-          accept="image/*"
-          :max-file-size="MAX_IMAGE_FILE_SIZE"
-          content-class="w-[240px] aspect-[9/16]"
-          @file-upload="uploadCoverImage('coverImagePortrait', $event)"
-          @file-rejected="handleCoverImageRejected('coverImagePortrait', $event)"
-        />
-        <div v-else class="flex flex-col gap-2">
-          <img
-            :src="getCoverImagePreview('coverImagePortrait')!"
-            :alt="t('order.coverImagePortrait')"
-            class="max-w-[200px] aspect-[9/16] object-cover rounded-md border border-fm-color-neutral-gray-200"
-          />
-          <FmButton
-            variant="tertiary"
-            class="mr-auto"
-            :label="t('common.delete')"
-            @click="clearCoverImage('coverImagePortrait')"
-          />
-        </div>
       </div>
     </div>
 
@@ -340,6 +391,18 @@ import { useLoading } from '@/composables/loading'
 import { useSnackbar } from '@feedmepos/ui-library'
 import { useCoreStore, useI18n } from '@feedmepos/mf-common'
 import { uploadImageFile } from '@/utils/firebase-storage'
+import {
+  applyCoverImages,
+  applyIntervalSeconds,
+  DEFAULT_COVER_INTERVAL_SECONDS,
+  MAX_COVER_IMAGES,
+  MAX_COVER_INTERVAL_SECONDS,
+  MIN_COVER_INTERVAL_SECONDS,
+  readCoverImages,
+  readIntervalSeconds,
+  reorderCoverImages,
+  type CoverOrientation
+} from '@/modules/order-setting/kiosk/coverCarousel'
 
 const { t } = useI18n()
 const CoreStore = useCoreStore()
@@ -481,28 +544,79 @@ function updateEPaymentSetting(form: FdoEPaymentMethod) {
 }
 
 const restaurantStore = useRestaurantStore()
-type CoverImageField = 'coverImageLandscape' | 'coverImagePortrait'
+
+// ---------------------------------------------------------------------------
+// Landing-screen cover images
+//
+// The editor works on ONE list per orientation; coverCarousel.ts decides how
+// that list is stored (single field vs carousel list). Every write goes
+// through applyCoverImages / applyIntervalSeconds so the two never drift.
+// ---------------------------------------------------------------------------
+
 const MAX_IMAGE_FILE_SIZE = 10 * 1000 * 1000
 
-function clearCoverImage(field: CoverImageField) {
-  kioskOrderSettingForm.value[field] = null
+const COVER_ORIENTATIONS = [
+  {
+    value: 'landscape' as CoverOrientation,
+    labelKey: 'order.coverImageLandscape',
+    hintKey: 'order.coverImageLandscapeHint',
+    previewClass: 'w-[280px] aspect-video',
+    dropClass: 'w-[280px] aspect-video'
+  },
+  {
+    value: 'portrait' as CoverOrientation,
+    labelKey: 'order.coverImagePortrait',
+    hintKey: 'order.coverImagePortraitHint',
+    previewClass: 'w-[160px] aspect-[9/16]',
+    dropClass: 'w-[160px] aspect-[9/16]'
+  }
+] as const
+
+function coverImages(orientation: CoverOrientation): string[] {
+  return readCoverImages(kioskOrderSettingForm.value, orientation)
 }
 
-function getCoverImagePreview(field: CoverImageField): string | null {
-  const value = kioskOrderSettingForm.value[field]
-  if (!value) return null
-  const trimmed = value.trim()
-  return trimmed.length > 0 ? trimmed : null
+const hasCoverCarousel = computed(
+  () => coverImages('landscape').length > 1 || coverImages('portrait').length > 1
+)
+
+function setCoverImages(orientation: CoverOrientation, images: string[]) {
+  Object.assign(
+    kioskOrderSettingForm.value,
+    applyCoverImages(kioskOrderSettingForm.value, orientation, images)
+  )
+}
+
+function moveCoverImage(orientation: CoverOrientation, from: number, to: number) {
+  setCoverImages(orientation, reorderCoverImages(coverImages(orientation), from, to))
+}
+
+function removeCoverImage(orientation: CoverOrientation, index: number) {
+  const next = coverImages(orientation).filter((_, i) => i !== index)
+  setCoverImages(orientation, next)
 }
 
-async function uploadCoverImage(field: CoverImageField, file: File) {
+const coverIntervalSeconds = computed<number | null>({
+  get: () => readIntervalSeconds(kioskOrderSettingForm.value),
+  set: (seconds) => {
+    Object.assign(
+      kioskOrderSettingForm.value,
+      applyIntervalSeconds(kioskOrderSettingForm.value, seconds)
+    )
+  }
+})
+
+async function addCoverImage(orientation: CoverOrientation, file: File) {
+  if (coverImages(orientation).length >= MAX_COVER_IMAGES) return
   try {
     const imageUrl = await startAsyncCall(async () => {
-      const path = `/restaurant/${props.restaurantId}/kiosk/${field}`
+      // Every upload gets its own generated filename, so several images can
+      // share one prefix without overwriting each other.
+      const path = `/restaurant/${props.restaurantId}/kiosk/cover-${orientation}`
       return await uploadImageFile(path, file)
     })
 
-    kioskOrderSettingForm.value[field] = imageUrl
+    setCoverImages(orientation, [...coverImages(orientation), imageUrl])
     SnackBar.open({
       title: t('order.imageUploadSuccess'),
       type: 'success'
@@ -517,11 +631,13 @@ async function uploadCoverImage(field: CoverImageField, file: File) {
 }
 
 function handleCoverImageRejected(
-  field: CoverImageField,
+  orientation: CoverOrientation,
   rejected: { file: File; reason: string[] }[]
 ) {
   const fieldName =
-    field === 'coverImageLandscape' ? t('order.coverImageLandscape') : t('order.coverImagePortrait')
+    orientation === 'landscape'
+      ? t('order.coverImageLandscape')
+      : t('order.coverImagePortrait')
   const firstReason = rejected[0]?.reason?.[0]
   SnackBar.open({
     title: firstReason

package/src/views/order-settings/auto-send-kitchen.spec.ts

@@ -0,0 +1,137 @@
+import { describe, expect, it } from 'vitest'
+import type { OrderSettingChannelAutoAccept } from '@entity'
+import {
+  autoCloseSublabelKey,
+  autoSendFromSelectValue,
+  autoSendSelectValue,
+  requiresAutoSendConfirmation
+} from './auto-send-kitchen'
+
+/**
+ * Presentation only. The resolution these helpers read is shared with the
+ * backend stamper and is covered by `auto-send-resolve.spec.ts`; what is
+ * asserted here is what the merchant SEES and when they are asked to confirm.
+ *
+ * Note the change of role since the backend invariant landed: the dialog is no
+ * longer the safety mechanism, so "fails open" below means "stays quiet", not
+ * "lets a bad pair through" — the stamper suppresses the close either way.
+ */
+const channel = (
+  autoAccept: boolean,
+  autoAcceptPaidOnly = false
+): OrderSettingChannelAutoAccept => ({ autoAccept, autoAcceptPaidOnly })
+
+describe('autoSendSelectValue', () => {
+  it('maps unset to the inherit option', () => {
+    expect(autoSendSelectValue(null)).toBe('null')
+    // `undefined` matters as much as `null`: a settings document written before
+    // the field existed parses to undefined, and mapping it with a bare
+    // String() renders a select with nothing selected.
+    expect(autoSendSelectValue(undefined)).toBe('null')
+  })
+
+  it('maps explicit booleans to their own option', () => {
+    expect(autoSendSelectValue(true)).toBe('true')
+    expect(autoSendSelectValue(false)).toBe('false')
+  })
+})
+
+describe('autoSendFromSelectValue', () => {
+  it('round-trips through the select', () => {
+    expect(autoSendFromSelectValue('null')).toBeNull()
+    expect(autoSendFromSelectValue('true')).toBe(true)
+    expect(autoSendFromSelectValue('false')).toBe(false)
+  })
+
+  it('leaves unset as null rather than false, so inheritance is never pinned', () => {
+    expect(autoSendFromSelectValue('null')).not.toBe(false)
+  })
+})
+
+describe('requiresAutoSendConfirmation', () => {
+  it.each<[string, boolean | null, OrderSettingChannelAutoAccept | null, boolean]>([
+    ['explicitly disabled', false, channel(true), true],
+    ['inherits auto-accept off — the reported bug', null, channel(false), true],
+    ['explicitly enabled', true, channel(false), false],
+    ['inherits auto-accept on', null, channel(true), false],
+    // Evaluated for a PAID order: those reach the kitchen here, and unpaid ones
+    // could never auto-close anyway, so there is nothing to warn about.
+    ['inherits paid-only auto-accept', null, channel(true, true), false],
+    ['unknown auto-accept stays quiet', null, null, false]
+  ])('%s', (_label, autoSendKitchen, ch, expected) => {
+    expect(requiresAutoSendConfirmation(autoSendKitchen, ch)).toBe(expected)
+  })
+
+  it('still asks when kitchen send is explicitly off on a paid-only channel', () => {
+    // Explicit `false` suppresses the kitchen for PAID orders too — the ones
+    // that can actually close — so auto-close would be entirely inert.
+    expect(requiresAutoSendConfirmation(false, channel(true, true))).toBe(true)
+  })
+
+  it('still honours an explicit choice when auto-accept is unknown', () => {
+    // REGRESSION GUARD. An explicit value never consults auto-accept —
+    // `resolveAutoSend` returns it before reaching the fallback — so the answer
+    // is fully determined and an unreadable channel must not swallow it.
+    // Checking the channel first (which this guard briefly did) left a merchant
+    // who had chosen "Disabled" with no dialog, no warning sublabel and no
+    // reverse-clear: they saved the inert pair with no feedback anywhere.
+    expect(requiresAutoSendConfirmation(false, null)).toBe(true)
+    expect(requiresAutoSendConfirmation(true, null)).toBe(false)
+    // Inherited values are explicit too, for the channels that inherit.
+    expect(requiresAutoSendConfirmation(null, null, false)).toBe(true)
+    expect(requiresAutoSendConfirmation(null, null, true)).toBe(false)
+    // Only a genuinely unresolved value falls through, and THAT fails open.
+    expect(requiresAutoSendConfirmation(null, null)).toBe(false)
+    expect(requiresAutoSendConfirmation(null, null, null)).toBe(false)
+  })
+
+  describe('inheriting channels (queue, kiosk)', () => {
+    it('reads the inherited value when its own is unset', () => {
+      expect(requiresAutoSendConfirmation(null, channel(true), false)).toBe(true)
+      expect(requiresAutoSendConfirmation(null, channel(false), true)).toBe(false)
+    })
+
+    it('lets its own explicit value win over the inherited one', () => {
+      // This is the Queue-page hole: an explicit queue `false` beats a dine-in
+      // `true` that the dine-in dialog pinned.
+      expect(requiresAutoSendConfirmation(false, channel(true), true)).toBe(true)
+      expect(requiresAutoSendConfirmation(true, channel(false), false)).toBe(false)
+    })
+  })
+})
+
+describe('autoCloseSublabelKey', () => {
+  it('flags a STORED pair that is already inert', () => {
+    // The merchant arrived in this state without touching a control, so the
+    // dialog never fired for them — the row has to say so.
+    expect(autoCloseSublabelKey(null, channel(false), true)).toBe(
+      'order.autoCloseBillRequiresAutoSend'
+    )
+    expect(autoCloseSublabelKey(false, channel(true), true)).toBe(
+      'order.autoCloseBillRequiresAutoSend'
+    )
+  })
+
+  it('stays neutral while auto-close is off, however auto-send resolves', () => {
+    expect(autoCloseSublabelKey(null, channel(false), false)).toBe('order.autoCloseBillSublabel')
+    expect(autoCloseSublabelKey(false, channel(true), null)).toBe('order.autoCloseBillSublabel')
+  })
+
+  it('stays neutral for the combinations that do something', () => {
+    expect(autoCloseSublabelKey(true, channel(false), true)).toBe('order.autoCloseBillSublabel')
+    expect(autoCloseSublabelKey(null, channel(true), true)).toBe('order.autoCloseBillSublabel')
+    expect(autoCloseSublabelKey(null, channel(true, true), true)).toBe(
+      'order.autoCloseBillSublabel'
+    )
+    expect(autoCloseSublabelKey(null, null, true)).toBe('order.autoCloseBillSublabel')
+  })
+
+  it('follows the inherited value for queue and kiosk', () => {
+    expect(autoCloseSublabelKey(null, channel(true), true, false)).toBe(
+      'order.autoCloseBillRequiresAutoSend'
+    )
+    expect(autoCloseSublabelKey(null, channel(false), true, true)).toBe(
+      'order.autoCloseBillSublabel'
+    )
+  })
+})