@eventlook/sdk 1.7.6 → 1.7.8

package/src/form/tickets/TicketSelectionMap.tsx

@@ -1,98 +1,265 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import useGlobal from '@hooks/useGlobal';
 import { IEvent } from '@utils/types/event.type';
-import { Button } from '@mui/material';
-import { iframe, TicketSelection } from '@seat-picker/seat-picker-sdk';
+import { Box, Stack, Typography, useTheme } from '@mui/material';
+import { iframe, SeatPickerCategory, TicketSelection } from '@seat-picker/seat-picker-sdk';
 import { useFormContext } from 'react-hook-form';
 import { ITicketForm, ITicketFormTicket, ITicketLocation } from '@utils/types/ticket.type';
 import { getMaxTicketsPerOrder } from '@utils/data/ticket';
-import Iconify from '@components/iconify/Iconify';
+import { useSeatPicker } from '@context/SeatPickerContext';
+import { fCurrency } from '@utils/formatNumber';
 
 interface Props {
   event: IEvent;
 }
 
 const TicketSelectionMap: React.FC<Props> = ({ event }) => {
-  const { t, seatingIframeUrl } = useGlobal();
+  const { seatingIframeUrl, lang, t } = useGlobal();
   const { setValue, watch } = useFormContext<ITicketForm>();
+  const { registerDeselect } = useSeatPicker();
   const uuid = watch('uuid');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [aspectRatio, setAspectRatio] = useState<number | null>(null);
+  const [categories, setCategories] = useState<SeatPickerCategory[]>([]);
+  // The picker follows the host page's MUI theme: passed at mount for the
+  // first paint, then synced live via handle.setTheme (no remount — that
+  // would flash and re-open the reservation WS).
+  const themeMode = useTheme().palette.mode;
+  const themeModeRef = useRef(themeMode);
+  themeModeRef.current = themeMode;
+  const handleRef = useRef<ReturnType<typeof iframe.openPicker> | null>(null);
 
-  if (!uuid) return;
-
-  const onSelect = (seats: TicketSelection) => {
-    const tickets: ITicketFormTicket[] = [];
-    const groupedSeatsByZone = seats.reduce(
-      (tickets, seat) => {
-        const zoneIndex = tickets.findIndex((ticket) => ticket.seat.id === seat.locationId);
-        if (zoneIndex !== -1) {
-          tickets[zoneIndex].quantity += 1;
-        } else {
-          tickets.push({
-            seat: {
-              id: seat.locationId,
-              type: seat.locationType,
-              locationDescription: seat.locationTypeDescription,
-            },
-            quantity: 1,
-            ticket: seat.ticket,
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!uuid || !seatingIframeUrl || !container) return;
+
+    // Assigned right below; onSelect only fires via postMessage, i.e. after
+    // openPicker has returned.
+    let handle: ReturnType<typeof iframe.openPicker> | null = null;
+
+    const onSelect = (seats: TicketSelection) => {
+      const tickets: ITicketFormTicket[] = [];
+      const groupedSeatsByZone = seats.reduce(
+        (tickets, seat) => {
+          const zoneIndex = tickets.findIndex((ticket) => ticket.seat.id === seat.locationId);
+          if (zoneIndex !== -1) {
+            tickets[zoneIndex].quantity += 1;
+          } else {
+            tickets.push({
+              seat: {
+                id: seat.locationId,
+                type: seat.locationType,
+                locationDescription: seat.locationTypeDescription,
+              },
+              quantity: 1,
+              ticket: seat.ticket,
+            });
+          }
+
+          return tickets;
+        },
+        // TODO: fix types
+        [] as { quantity: number; seat: ITicketLocation; ticket: any }[]
+      );
+
+      let remainingTicketCapacity = getMaxTicketsPerOrder(event.id);
+      // Selections beyond the per-order cap. The picker enforces the cap at
+      // click time, so this only triggers when the two disagree (e.g. a
+      // restored previous session after the cap was lowered) — but when it
+      // does, the excess must be RELEASED back through the picker, not
+      // silently dropped: a dropped ticket would keep its WS reservation and
+      // block the seat for everyone while being in nobody's cart.
+      const overflow: { locationId: string; count: number }[] = [];
+
+      for (const groupedSeat of groupedSeatsByZone) {
+        const quantity = Math.min(groupedSeat.quantity, remainingTicketCapacity);
+        remainingTicketCapacity -= quantity;
+
+        if (quantity < groupedSeat.quantity) {
+          overflow.push({
+            locationId: groupedSeat.seat.id,
+            count: groupedSeat.quantity - quantity,
           });
         }
+        if (quantity <= 0) continue;
 
-        return tickets;
-      },
-      // TODO: fix types
-      [] as { quantity: number; seat: ITicketLocation; ticket: any }[]
-    );
-
-    let remainingTicketCapacity = getMaxTicketsPerOrder(event.id);
-
-    for (const groupedSeat of groupedSeatsByZone) {
-      if (remainingTicketCapacity <= 0) break;
-
-      const quantity = Math.min(groupedSeat.quantity, remainingTicketCapacity);
-      remainingTicketCapacity -= quantity;
-
-      tickets.push({
-        releaseId: groupedSeat.ticket.id,
-        price: groupedSeat.ticket.price,
-        quantity,
-        itemName: `${groupedSeat.ticket.releaseCategoryName} - ${groupedSeat.ticket.name}`,
-        products: [],
-        extraFields: [],
-        location: {
-          id: groupedSeat.seat.id,
-          type: groupedSeat.seat.type,
-          locationDescription: groupedSeat.seat.locationDescription,
-        },
-      });
-    }
+        tickets.push({
+          releaseId: groupedSeat.ticket.id,
+          price: groupedSeat.ticket.price,
+          quantity,
+          itemName: `${groupedSeat.ticket.releaseCategoryName} - ${groupedSeat.ticket.name}`,
+          products: [],
+          extraFields: [],
+          location: {
+            id: groupedSeat.seat.id,
+            type: groupedSeat.seat.type,
+            locationDescription: groupedSeat.seat.locationDescription,
+          },
+        });
+      }
+
+      setValue(`tickets.${event.id}`, tickets);
+
+      if (overflow.length) {
+        console.warn(
+          '[eventlook] seat selection exceeds the per-order ticket cap; releasing the excess:',
+          overflow
+        );
+        // Release ONE unit per pass: the picker re-emits the shrunken
+        // selection after each removal, which re-enters this handler — so
+        // releasing everything at once here would stack with those re-entrant
+        // passes and over-release. One-at-a-time converges on exactly the cap.
+        handle?.deselect(overflow[0].locationId);
+      }
+    };
 
-    setValue(`tickets.${event.id}`, tickets);
-  };
+    handle = iframe.openPicker({
+      eventId: String(event.id),
+      onSelect,
+      onResize: setAspectRatio,
+      onCategories: setCategories,
+      baseUrl: seatingIframeUrl,
+      clientId: uuid,
+      container,
+      maxTickets: getMaxTicketsPerOrder(event.id),
+      // Read via ref so a theme toggle doesn't remount the picker.
+      theme: themeModeRef.current,
+      // Site language — release names/descriptions follow the site, not the
+      // browser's Accept-Language.
+      lang,
+    });
+    handleRef.current = handle;
+
+    // Let the host cart's remove button drive deselection in the picker.
+    registerDeselect((locationId: string) => handle?.deselect(locationId));
+
+    return () => {
+      registerDeselect(null);
+      handleRef.current = null;
+      handle?.destroy();
+    };
+  }, [uuid, seatingIframeUrl, event.id, registerDeselect, lang]);
+
+  // Follow live theme toggles on the host page.
+  useEffect(() => {
+    handleRef.current?.setTheme(themeMode);
+  }, [themeMode]);
 
   if (!seatingIframeUrl) return null;
 
   return (
-    <Button
-      variant="outlined"
-      onClick={() =>
-        iframe.openPicker({
-          eventId: String(event.id),
-          onSelect,
-          baseUrl: seatingIframeUrl,
-          clientId: uuid,
-        })
-      }
-      sx={{
-        width: { xs: '100%' },
-        color: 'text.primary',
-        borderColor: (theme) => theme.palette.grey['300'],
-        '& .MuiButton-endIcon': { ml: 0, fontSize: '1.5em' },
-      }}
-      endIcon={<Iconify icon="eva:chevron-right-outline" />}
-    >
-      {t('form.labels.open_map')}
-    </Button>
+    <Box>
+      {categories.length > 0 && (
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(210px, 1fr))',
+            gap: 1,
+            mb: 1.5,
+          }}
+          role="list"
+          aria-label={t('event.tickets.stepper.1.title')}
+        >
+          {categories.map((category) => (
+            <Stack
+              key={category.releaseCategoryId}
+              role="listitem"
+              direction="row"
+              // Tapping a chip pulses that category's seats/zones on the map
+              // (the rest dim briefly) — the touch answer to "which seats are
+              // these?", where hover doesn't exist.
+              onClick={() => handleRef.current?.highlightCategory(category.releaseCategoryId)}
+              sx={{
+                gap: 1,
+                pl: 0.75,
+                pr: 1.25,
+                py: 0.5,
+                borderRadius: 1.5,
+                border: (theme) => `1px solid ${theme.palette.divider}`,
+                bgcolor: 'background.paper',
+                cursor: 'pointer',
+                userSelect: 'none',
+                '&:hover': {
+                  borderColor: category.color,
+                },
+              }}
+            >
+              {/* Rounded color bar — a distinct swatch rather than a dot. */}
+              <Box
+                sx={{
+                  width: 6,
+                  borderRadius: 3,
+                  bgcolor: category.color,
+                  flexShrink: 0,
+                  alignSelf: 'stretch',
+                  minHeight: 18,
+                }}
+              />
+              <Box sx={{ minWidth: 0, flex: 1 }}>
+                <Stack
+                  direction="row"
+                  alignItems="baseline"
+                  justifyContent="space-between"
+                  sx={{ gap: 1 }}
+                >
+                  <Typography variant="body2" fontWeight={600} noWrap>
+                    {category.name}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" noWrap sx={{ flexShrink: 0 }}>
+                    {category.hasMultiplePrices
+                      ? t('price_from', { price: fCurrency(category.price, lang, event.currency) })
+                      : fCurrency(category.price, lang, event.currency)}
+                  </Typography>
+                </Stack>
+                {category.description && (
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    // Wraps fully — truncating hides purchase-relevant info,
+                    // and the title-attribute tooltip is unreachable on touch.
+                    sx={{ display: 'block', lineHeight: 1.35 }}
+                  >
+                    {category.description}
+                  </Typography>
+                )}
+              </Box>
+            </Stack>
+          ))}
+        </Box>
+      )}
+      <Box
+        sx={{
+          width: '100%',
+          // Size to the map's aspect ratio once known (so the frame matches the
+          // map); fall back to a fixed height until the map reports it.
+          aspectRatio: aspectRatio ?? undefined,
+          height: aspectRatio ? undefined : { xs: 440, sm: 560 },
+          minHeight: 300,
+          maxHeight: '78vh',
+          // When the 78vh cap kicks in (very tall maps), also cap the width to
+          // the matching aspect-ratio value and center — otherwise the box goes
+          // wider than the map and the equal padding breaks.
+          maxWidth: aspectRatio ? `calc(78vh * ${aspectRatio})` : undefined,
+          mx: 'auto',
+          boxSizing: 'border-box',
+          // Equal space on all four sides between the card edge and the map.
+          p: { xs: 1.5, sm: 2 },
+          borderRadius: 2,
+          overflow: 'hidden',
+          // Follows the host theme; the picker iframe renders the matching
+          // surface so card and map read as one piece. Light mode uses a soft
+          // gray (admin-map style) — pure white is blinding next to the page.
+          bgcolor: (theme) =>
+            theme.palette.mode === 'dark'
+              ? theme.palette.background.paper
+              : theme.palette.grey[200],
+          border: (theme) => `1px solid ${theme.palette.divider}`,
+          boxShadow: (theme) => theme.shadows[2],
+        }}
+      >
+        <Box ref={containerRef} sx={{ width: '100%', height: '100%' }} />
+      </Box>
+    </Box>
   );
 };
 

package/src/index.ts

@@ -1,3 +1,7 @@
+// The npm-published entry (OrderFormSdk). Consumed by Eventlook's own frontend and
+// existing third parties. DEPRECATED for new third-party distribution — new embeds
+// use the hosted in-page loader (src/embed.tsx → eventlook.js). Kept during the
+// migration window; see frontend/docs/embed-sdk.md.
 import React from 'react';
 import OrderForm from '@form/index';
 import type { OrderFormProps } from '@form/index';

package/src/locales/cs.tsx

@@ -9,6 +9,7 @@ const cs = {
   cancel: 'Zrušit',
   close: 'Zavřít',
   remove: 'Odstranit',
+  price_from: 'od {{price}}',
   pay: 'Zaplatit',
   change: 'Změnit',
   free: 'Zdarma',

package/src/locales/en.tsx

@@ -9,6 +9,7 @@ const en = {
   cancel: 'Cancel',
   close: 'Close',
   remove: 'Remove',
+  price_from: 'from {{price}}',
   pay: 'Pay',
   change: 'Change',
   free: 'Free',

package/src/locales/es.tsx

@@ -9,6 +9,7 @@ const es = {
   cancel: 'Cancelar',
   close: 'Cerrar',
   remove: 'Eliminar',
+  price_from: 'desde {{price}}',
   pay: 'Pagar',
   change: 'Cambiar',
   free: 'Gratis',

package/src/locales/pl.tsx

@@ -9,6 +9,7 @@ const pl = {
   cancel: 'Anuluj',
   close: 'Zamknij',
   remove: 'Usuń',
+  price_from: 'od {{price}}',
   pay: 'Zapłać',
   change: 'Zmień',
   free: 'Darmowe',

package/src/locales/sk.tsx

@@ -9,6 +9,7 @@ const sk = {
   cancel: 'Zrušiť',
   close: 'Zavrieť',
   remove: 'Odstrániť',
+  price_from: 'od {{price}}',
   pay: 'Zaplaťte',
   change: 'Zmeniť',
   free: 'Zadarmo',

package/src/locales/uk.tsx

@@ -9,6 +9,7 @@ const uk = {
   cancel: 'Скасувати',
   close: 'Закрити',
   remove: 'Видалити',
+  price_from: 'від {{price}}',
   pay: 'Оплатити',
   change: 'Змінити',
   free: 'Безкоштовно',

package/src/react-dom-client.d.ts

@@ -0,0 +1,11 @@
+// Minimal ambient declaration for react-dom/client (used by the standalone embed
+// entry). Avoids pulling @types/react-dom just for createRoot in the IIFE build.
+declare module 'react-dom/client' {
+  import { ReactNode } from 'react';
+  export interface Root {
+    render(children: ReactNode): void;
+    unmount(): void;
+  }
+  export function createRoot(container: Element | DocumentFragment, options?: unknown): Root;
+  export function hydrateRoot(container: Element, children: ReactNode, options?: unknown): Root;
+}

package/src/utils/axios.ts

@@ -6,6 +6,9 @@ const api = axios.create({
     'Content-Type': 'application/json',
   },
   withCredentials: false,
+  // Bound stalled requests so a hung fetch (flaky mobile network) fails instead
+  // of leaving the form stuck on its loading skeleton — SWR then auto-retries.
+  timeout: 20000,
 });
 
 api.interceptors.response.use(

package/src/utils/render-rich-text.ts

@@ -0,0 +1,100 @@
+// Render rich-text columns into safe HTML. Accepts both legacy HTML (pre-EVE-94 rows) and ProseMirror JSON (post-EVE-94 rows). Ported from frontend/src/utils/render-rich-text.ts — schema mirrors admin/src/components/editor/rich-text-extensions.ts and backend/src/utils/rich-text-schema.ts — keep all copies in sync.
+
+type JSONNode = {
+  type?: string;
+  attrs?: Record<string, unknown>;
+  content?: JSONNode[];
+  text?: string;
+  marks?: Array<{ type: string; attrs?: Record<string, unknown> }>;
+};
+
+export function renderRichTextToHtml(content: string | null | undefined): string {
+  if (!content || typeof content !== 'string') return '';
+  const trimmed = content.trim();
+  if (!trimmed) return '';
+  if (trimmed.startsWith('{')) {
+    try {
+      return renderNode(JSON.parse(trimmed) as JSONNode);
+    } catch {
+      return '';
+    }
+  }
+  return trimmed;
+}
+
+function renderNode(node: JSONNode): string {
+  if (!node) return '';
+  if (node.type === 'text') return renderTextNode(node);
+  const children = (node.content ?? []).map(renderNode).join('');
+  switch (node.type) {
+    case 'doc':
+      return children;
+    case 'paragraph':
+      return `<p>${children}</p>`;
+    case 'heading': {
+      const level = node.attrs?.level === 3 ? 3 : 2;
+      return `<h${level}>${children}</h${level}>`;
+    }
+    case 'bulletList':
+      return `<ul>${children}</ul>`;
+    case 'orderedList':
+      return `<ol>${children}</ol>`;
+    case 'listItem':
+      return `<li>${children}</li>`;
+    default:
+      return children;
+  }
+}
+
+function renderTextNode(node: JSONNode): string {
+  let html = escapeHtml(node.text ?? '');
+  for (const mark of node.marks ?? []) {
+    html = applyMark(mark, html);
+  }
+  return html;
+}
+
+function applyMark(mark: { type: string; attrs?: Record<string, unknown> }, inner: string): string {
+  switch (mark.type) {
+    case 'bold':
+      return `<strong>${inner}</strong>`;
+    case 'italic':
+      return `<em>${inner}</em>`;
+    case 'underline':
+      return `<u>${inner}</u>`;
+    case 'link': {
+      const href = String(mark.attrs?.href ?? '');
+      if (!href || !isSafeHref(href)) return inner;
+      return `<a href="${escapeAttr(href)}" rel="noopener noreferrer nofollow" target="_blank">${inner}</a>`;
+    }
+    default:
+      return inner;
+  }
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+// Block javascript:/data: URIs; allow http(s)/mailto/tel/relative.
+function isSafeHref(href: string): boolean {
+  return /^(https?:|mailto:|tel:|\/|#)/i.test(href);
+}
+
+// True when the content has no renderable text (empty editor → '' or an empty paragraph doc).
+export function isEmptyRichText(content: string | null | undefined): boolean {
+  return (
+    renderRichTextToHtml(content)
+      .replace(/<[^>]*>/g, '')
+      .trim() === ''
+  );
+}

package/src/utils/types/event.type.ts

@@ -22,6 +22,7 @@ export interface IEvent extends IBase {
   releaseEndDate: string;
   place: IPlace;
   description: string;
+  purchaseInstructions: string | null;
   image: IFile;
   verified: boolean;
   ageLimit: number | null;