🌟 Custom Template tab in Ticket Designer — upload image + drag QR/counter overlay

[joesaby]

Summary

Add a Custom Template tab to the existing Ticket Designer. Organizers upload a PNG/JPG background image and use a drag-and-resize canvas to position the QR code and optional ticket counter. At print time, the custom template replaces the standard layout for that event.

The existing Standard Design tab and all existing ticket behaviour are completely unchanged.

---

Motivation

The current Ticket Designer lets organizers control accent colour, logo, and footer text — but the overall ticket layout is fixed. Many organizers want full brand control: custom artwork, sponsor logos, venue maps, or decorative layouts that don't fit the standard grid. This feature unlocks that without breaking the existing flow for everyone else.

---

Proposed Behaviour

1. Organizer opens Ticket Designer → Custom Template tab
2. Uploads a PNG/JPG ticket background (minimum 400×200px)
3. An interactive canvas appears: drag the yellow box to position the QR code (resize to scale it); drag the green dashed box to position the ticket counter (e.g. 001, 002…)
4. Clicks Save Custom Template — positions are stored in the existing ticket_design_settings JSONB
5. Enables the "Enable Custom Template" toggle and saves
6. All ticket print URLs for the event now render the custom template with the QR code and counter overlaid at the saved positions

Disabling the toggle reverts to the standard layout immediately.

---

Architecture Overview

Purely additive — no existing behaviour changes.

Frontend (new / modified)

Component	Status	Purpose
QRPlacementCanvas	New	Drag+resize canvas; outputs qr_x/y/size, num_x/y in design-native px
CustomTemplateTicket	New	Print-time renderer: template PNG + positioned QR + counter
TicketDesigner/index.tsx	Modified	Add Tabs with Standard Design + Custom Template panels
PrintProduct/index.tsx	Modified	Check use_custom_template → route to CustomTemplateTicket or AttendeeTicket
types.ts	Modified	Extend ImageType union + ticket_design_settings type

Backend (modified only)

File	Change
ImageType.php	Add TICKET_TEMPLATE enum case (event image type, one-per-event, min 400×200px)
UpdateEventSettingsDTO.php	Add 7 new fields to createWithDefaults() inside ticket_design_settings
UpdateEventSettingsRequest.php	Add validation rules for the 7 new fields
CreateImageHandler.php	Add TICKET_TEMPLATE to IMAGES_TYPES_WITH_ONLY_ONE_IMAGE_ALLOWED

Database

No schema change. All new fields go into the existing ticket_design_settings JSONB column:

+ use_custom_template  boolean  (default false)
+ template_image_id    integer|null
+ qr_x, qr_y, qr_size integer|null  (design-native px)
+ num_x, num_y         integer|null  (counter position; null = hidden)

No new API endpoints

All data flows through the existing PATCH /api/v1/events/{id}/settings endpoint.

---

Runtime Flow

Print URL → PrintProduct checks use_custom_template
  → true  → CustomTemplateTicket (template PNG + QR at qr_x/y/size)
  → false → AttendeeTicket (existing, unchanged)

QR value is still attendee.public_id — check-in scanners continue to work without any changes.

---

Visual Design

A visual mockup of the two-tab layout and drag canvas was created during planning. Will include screenshots in the PR.

---

Implementation Notes

• Uses react-qr-code (already a dependency) — no new packages required
• TICKET_TEMPLATE image type follows the same single-image-per-entity pattern as TICKET_LOGO
• All new UI strings wrapped in Lingui t macro; yarn messages:extract && yarn messages:compile run before PR
• PHP follows PSR-12; React follows Airbnb style guide

---

Happy to implement this if the team is open to the enhancement.