Partner Cover Image Self-Serve — Frontend Spec (Rough Draft)

Companion to Partner_Cover_Image_SelfServe_20260909000000.md (the product PRD). This document captures the frontend side of the feature in book-bite (partner portal). Updated Sep 09, 2026 with the actual Figma design.

1. Scope

In scope (this spec)

• Flow 1 — Cover image Add/Edit/Remove UI on the Main Package list (design covers this)
• Flow 4 — Toggle / edit-other-fields permission-driven controls (read can_toggle / can_edit_other_fields from backend)
• Flow 5 — “Created by Admin” badge + tooltip on package list rows

Design gap (no Figma yet)

• Flow 2 — Menu item image edit UI on package Menu tab — no design. FE needs a follow-up screen before building this. Do not start until design lands.

Out of scope

• Diner-facing changes (not applicable — partner-portal only)
• The existing whole-package edit flow (Flow 3) — stays unchanged

2. Component Strategy (from Figma)

2.1 Package List row action (Flow 1 entry point)

The design puts the entry point on the Main Package list table, as a row action, alongside View Menu / Print Menu / Edit Package.

Confirm with FE/PM: per PRD text, the affordance should also exist on the package detail screen. Design only covers the list row. Determine whether detail screen gets it too, and whether it reuses the same modal.

2.2 Add/Edit Cover Image modal

Single shared modal, titled by state:

• “Add Cover Image” (no image yet)
• “Edit Cover Image” (image present)

Contents (from Figma):

2.3 Remove image confirm modal

“Remove image” opens a confirm:

Design wobble: the mock reuses a “Reject this booking” component — cosmetic only, build it fresh.

2.4 Success toast

“Great success!” / “Your cover image is updated.” (with smiley + close icon).

2.5 Error states (inline on the modal)

2.6 “Created by Admin” badge (Flow 5)

• Renders on the package list row only (never on menu-item cards).
• Hover tooltip: “This package was set up by the Hungry Hub team. You can still update its photo — turning it on/off or changing its other details isn’t available here. Contact your Account Manager if you need those changed.”

2.7 Proposed structure

Rough draft — exact placement TBD. The modal + badge are the two genuinely new components.

src/pages/packages/
├── MainPackageList.vue          # existing — add row action buttons + badge
├── components/
│   ├── CoverImageModal.vue      # NEW: Add/Edit/Remove cover image (single shared modal)
│   ├── RemoveCoverImageModal.vue# NEW: confirm "Are you sure..." (or folded into CoverImageModal)
│   ├── AdminBadge.vue           # NEW: "Created by Admin" + tooltip
│   └── (reuse) existing image uploader widget from package creation

3. State Machines

Cover image modal (Flow 1)

[ idle ]  package list, image action visible (status Active/Inactive)
   │ tap "Add Cover Image" / "Edit Cover Image"
   ▼
[ modal_open ]
   ├─ no image yet → [ selecting / dropzone ]
   ├─ image present → [ change_image / remove_image ]
   │      │ pick/change image
   │      ▼
   │   [ validating ]  ← client-side: ≤10MB, {jpeg,jpg,png,heic,tif,tiff,webp}
   │      │ pass
   │      ▼
   │   [ preview_ready ]  ← Save enabled
   │      │ error
   │      ▼
   │   [ inline_error ]   ← retry, Save stays disabled
   ▼
[ saving ]  ← Save tapped, backend pending
   │ success
   ▼
[ success ] ← toast "Great success! / Your cover image is updated." + close modal, row updated
   │
   ▼
[ idle ]

Remove path:
[ modal_open ] → "Remove image" → [ confirm_modal ] → Remove → [ removing ] → success → [ idle ]

4. Form Behavior & Validation

Cover image rules (client mirrors server; server is authority)

Menu item image rules (Flow 2 — design pending, note the format difference)

Don’t reuse the cover-image format list for menu images — they differ on purpose. Confirm which shared uploader/constant to use at implementation time.

5. Analytics Events (v1)

6. i18n — Copy + Keys

Rough draft — Localization to fill TH/SG/MY. Copied verbatim from Figma design.

7. Open Questions for FE Team

These are the branches worth re-grilling once implementation begins:

1. Menu-item image edit (Flow 2) — no Figma design. Blocked on design; don’t build UI until it lands.
2. Detail-screen entry point — design only shows list row action; PRD mentions detail screen. Confirm whether both.
3. Save disabled rule — design draws Save gray in 4 of 7 modal copies. Is Save disabled until a new image is selected, or only while uploading? (Note: in Edit mode with an image present, is Save re-enabled on any change?)
4. Remove flow scope — is removing the cover image in v1, or only add/edit? Design includes it; confirm.
5. Existing image-uploader reuse — confirm exact props/events of the package-creation uploader before reusing in the modal.
6. Badge placement — badge sits on the list row in the design; does the detail screen also show it?
7. Concurrent edit handling — optimistic update or wait for confirmation?
8. Pagination/list API — does the list response include has_cover_image (to choose Add vs Edit label) or does the row need the raw image URL?

8. Test Strategy (FE-side, rough)

• Component tests: modal open (add vs edit title), dropzone, change image, remove-image confirm flow, validation errors (size/format), Save disabled state, success toast, badge render + tooltip, row-action visibility by status (Active/Inactive show; Pending Review/Rejected hide).
• E2E tests: add → save → toast → row updated; edit → save; remove → confirm → row label returns to “Add Cover Image”; Pending Review / Rejected rows show no image action.
• Visual regression (if set up): modal empty / image-present / error states.

This section is rough — QA team to refine with full test matrix (see QA spec).