@eventlook/sdk 1.7.6 → 1.7.8

package/dist/types/components/RichText.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    content: string | null | undefined;
+    className?: string;
+};
+declare const RichText: React.FC<Props>;
+export default RichText;

package/dist/types/context/SeatPickerContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type DeselectFn = (locationId: string) => void;
+interface SeatPickerContextValue {
+    /** The mounted picker registers its deselect handler here (null on unmount). */
+    registerDeselect: (fn: DeselectFn | null) => void;
+    /** Ask the picker to deselect one selection for a locationId (cart remove button). */
+    deselect: DeselectFn;
+}
+export declare const SeatPickerProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useSeatPicker: () => SeatPickerContextValue;
+export {};

package/dist/types/embed.d.ts

@@ -0,0 +1,49 @@
+import { Root } from 'react-dom/client';
+import type { IContent } from '@utils/types/global.type';
+interface ThemeOpts {
+    /** 'light' (default) or 'dark'. */
+    mode?: 'light' | 'dark';
+    /** Brand color — buttons, step markers, accents. */
+    primaryColor?: string;
+    /** Optional secondary accent color. */
+    secondaryColor?: string;
+    /** CSS font-family for the whole form, e.g. "Georgia, serif". */
+    fontFamily?: string;
+    /** Page background behind the form. */
+    background?: string;
+    /** Card / input surface background. */
+    paper?: string;
+    /** Corner radius in px for buttons, cards and inputs. */
+    radius?: number;
+}
+export interface MountOptions {
+    event: string;
+    apiUrl?: string;
+    seatingIframeUrl?: string;
+    lang?: string;
+    packetaApiKey?: string;
+    stickyHeaderTop?: number;
+    theme?: ThemeOpts;
+    callbacks?: {
+        homepage: () => void;
+        tickets: () => void;
+        detail: () => void;
+    };
+    links?: {
+        termsAndConditions: string;
+        gdpr: string;
+    };
+    /** Preselect a ticket release/type by id. */
+    selectedReleaseId?: number;
+    /** Content overrides — hide birth-date/gender fields, custom confirmation copy/image. */
+    content?: IContent;
+    /** Show combined T&C for these company ids (multi-organizer events). */
+    termsAndConditionsCompanies?: string[];
+    /** Auto-scroll to the top of the form after each step change. */
+    autoscrollAfterViewChange?: boolean;
+    /** Paydroid (Sobit / TapyGo) cashless API key. */
+    paydroidApiKey?: string;
+}
+export declare function mount(target: string | Element, userOpts?: Partial<MountOptions>): Root | undefined;
+export declare function unmount(target: string | Element): void;
+export {};

package/dist/types/locales/cs.d.ts

@@ -9,6 +9,7 @@ declare const cs: {
     cancel: string;
     close: string;
     remove: string;
+    price_from: string;
     pay: string;
     change: string;
     free: string;

package/dist/types/locales/en.d.ts

@@ -9,6 +9,7 @@ declare const en: {
     cancel: string;
     close: string;
     remove: string;
+    price_from: string;
     pay: string;
     change: string;
     free: string;

package/dist/types/locales/es.d.ts

@@ -9,6 +9,7 @@ declare const es: {
     cancel: string;
     close: string;
     remove: string;
+    price_from: string;
     pay: string;
     change: string;
     free: string;

package/dist/types/locales/pl.d.ts

@@ -9,6 +9,7 @@ declare const pl: {
     cancel: string;
     close: string;
     remove: string;
+    price_from: string;
     pay: string;
     change: string;
     free: string;

package/dist/types/locales/sk.d.ts

@@ -9,6 +9,7 @@ declare const sk: {
     cancel: string;
     close: string;
     remove: string;
+    price_from: string;
     pay: string;
     change: string;
     free: string;

package/dist/types/locales/uk.d.ts

@@ -9,6 +9,7 @@ declare const uk: {
     cancel: string;
     close: string;
     remove: string;
+    price_from: string;
     pay: string;
     change: string;
     free: string;

package/dist/types/utils/render-rich-text.d.ts

@@ -0,0 +1,2 @@
+export declare function renderRichTextToHtml(content: string | null | undefined): string;
+export declare function isEmptyRichText(content: string | null | undefined): boolean;

package/dist/types/utils/types/event.type.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventlook/sdk",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -14,6 +14,7 @@
   },
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",
+    "build:embed": "rollup -c rollup.embed.config.mjs",
     "prepare": "yarn run build",
     "push": "yalc push --force",
     "push:initial": "yarn build && yalc push --force",
@@ -54,8 +55,9 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@seat-picker/seat-picker-sdk": "^1.2.0",
+    "@seat-picker/seat-picker-sdk": "^2.0.0",
     "@stripe/react-stripe-js": "^6.6.0",
     "@stripe/stripe-js": "^9.7.0",
     "@types/js-cookie": "^3.0.6",

package/rollup.embed.config.mjs

@@ -0,0 +1,74 @@
+/*
+ * Standalone browser build of the SDK — a single self-contained IIFE that bundles
+ * React, MUI, Emotion and the seat-picker SDK, exposing window.Eventlook.mount().
+ * Hosted unversioned by Eventlook so third-party sites never pin a version.
+ *
+ *   yarn build:embed  ->  dist/embed/eventlook.js
+ */
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import replace from '@rollup/plugin-replace';
+import alias from '@rollup/plugin-alias';
+import terser from '@rollup/plugin-terser';
+
+export default {
+  input: './src/embed.tsx',
+  output: {
+    file: 'dist/embed/eventlook.js',
+    format: 'iife',
+    name: 'EventlookEmbedBundle',
+    sourcemap: true,
+    inlineDynamicImports: true,
+    // Shim Node globals some deps reference, without a bundler define step.
+    intro:
+      'var process = (typeof process !== "undefined") ? process : { env: { NODE_ENV: "production" } };' +
+      'var global = (typeof global !== "undefined") ? global : (typeof globalThis !== "undefined" ? globalThis : window);',
+  },
+  onwarn(warning, warn) {
+    // Bundling a large app surfaces benign warnings — keep the log readable.
+    if (
+      warning.code === 'MODULE_LEVEL_DIRECTIVE' ||
+      warning.code === 'THIS_IS_UNDEFINED' ||
+      warning.code === 'CIRCULAR_DEPENDENCY' ||
+      warning.code === 'SOURCEMAP_ERROR'
+    ) {
+      return;
+    }
+    warn(warning);
+  },
+  plugins: [
+    alias({
+      entries: [
+        { find: 'lottie-web', replacement: 'lottie-web/build/player/lottie_light.js' },
+      ],
+    }),
+    replace({
+      preventAssignment: true,
+      values: {
+        'process.env.NODE_ENV': JSON.stringify('production'),
+        'require("form-data")': '{}',
+        "require('form-data')": '{}',
+        'require("zlib")': '{}',
+        "require('zlib')": '{}',
+      },
+    }),
+    json({ compact: true, preferConst: true, namedExports: true }),
+    resolve({
+      browser: true,
+      preferBuiltins: false,
+      moduleDirectories: ['node_modules'],
+      extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
+    }),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      noEmitOnError: false,
+      compilerOptions: { declaration: false, declarationMap: false, sourceMap: true },
+    }),
+    terser(),
+  ],
+  // Bundle everything — the whole point of the hosted script is zero deps on the host.
+  external: [],
+};

package/src/components/RichText.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { renderRichTextToHtml } from '@utils/render-rich-text';
+
+// Renders sanitized rich text (ProseMirror JSON or legacy HTML). Empty
+// paragraphs are emitted as literal `<p></p>` and given height via CSS,
+// matching frontend/src/components/RichText.tsx. See render-rich-text.ts.
+const RootStyle = styled('div')(({ theme }) => ({
+  '& p': {
+    margin: 0,
+  },
+  '& p:empty': {
+    minHeight: '1em',
+  },
+  '& a': {
+    color: theme.palette.primary.main,
+    textDecoration: 'underline',
+  },
+}));
+
+type Props = {
+  content: string | null | undefined;
+  className?: string;
+};
+
+const RichText: React.FC<Props> = ({ content, className }) => (
+  <RootStyle
+    className={className}
+    dangerouslySetInnerHTML={{ __html: renderRichTextToHtml(content) }}
+  />
+);
+
+export default RichText;

package/src/context/SeatPickerContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useCallback, useContext, useRef } from 'react';
+
+type DeselectFn = (locationId: string) => void;
+
+interface SeatPickerContextValue {
+  /** The mounted picker registers its deselect handler here (null on unmount). */
+  registerDeselect: (fn: DeselectFn | null) => void;
+  /** Ask the picker to deselect one selection for a locationId (cart remove button). */
+  deselect: DeselectFn;
+}
+
+const SeatPickerContext = createContext<SeatPickerContextValue>({
+  registerDeselect: () => {},
+  deselect: () => {},
+});
+
+export const SeatPickerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const deselectRef = useRef<DeselectFn | null>(null);
+
+  const registerDeselect = useCallback((fn: DeselectFn | null) => {
+    deselectRef.current = fn;
+  }, []);
+
+  const deselect = useCallback((locationId: string) => {
+    deselectRef.current?.(locationId);
+  }, []);
+
+  return (
+    <SeatPickerContext.Provider value={{ registerDeselect, deselect }}>
+      {children}
+    </SeatPickerContext.Provider>
+  );
+};
+
+export const useSeatPicker = () => useContext(SeatPickerContext);

package/src/embed.tsx

@@ -0,0 +1,243 @@
+/*
+ * Standalone browser entry for the Eventlook SDK.
+ *
+ * This is the same in-page OrderFormSdk, packaged as a self-contained <script>
+ * (React + MUI + everything bundled) so a third-party site can drop it in ONCE
+ * and never pin/upgrade a version — Eventlook redeploys the hosted file and every
+ * site gets it. It renders in-page (not in an iframe), so the seat picker overlays
+ * the real viewport and mobile seating works correctly.
+ *
+ *   Declarative:
+ *     <div data-eventlook-event="my-event-slug"></div>
+ *     <script async src="https://cdn.eventlook.cz/eventlook.js"></script>
+ *
+ *   Imperative:
+ *     Eventlook.mount('#tickets', {
+ *       event: 'my-event-slug',
+ *       theme: { primaryColor: '#9b1d43' },
+ *       callbacks: { detail: () => location.assign('/program') },
+ *     });
+ */
+import React, { useMemo, useState } from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { ThemeProvider, createTheme, ScopedCssBaseline, Snackbar, Alert } from '@mui/material';
+import { OrderFormSdk } from './index';
+import { Languages } from '@utils/data/language';
+import type { IContent } from '@utils/types/global.type';
+
+type SnackVariant = 'success' | 'error';
+
+interface ThemeOpts {
+  /** 'light' (default) or 'dark'. */
+  mode?: 'light' | 'dark';
+  /** Brand color — buttons, step markers, accents. */
+  primaryColor?: string;
+  /** Optional secondary accent color. */
+  secondaryColor?: string;
+  /** CSS font-family for the whole form, e.g. "Georgia, serif". */
+  fontFamily?: string;
+  /** Page background behind the form. */
+  background?: string;
+  /** Card / input surface background. */
+  paper?: string;
+  /** Corner radius in px for buttons, cards and inputs. */
+  radius?: number;
+}
+
+export interface MountOptions {
+  event: string;
+  apiUrl?: string;
+  seatingIframeUrl?: string;
+  lang?: string;
+  packetaApiKey?: string;
+  stickyHeaderTop?: number;
+  theme?: ThemeOpts;
+  callbacks?: { homepage: () => void; tickets: () => void; detail: () => void };
+  links?: { termsAndConditions: string; gdpr: string };
+  /** Preselect a ticket release/type by id. */
+  selectedReleaseId?: number;
+  /** Content overrides — hide birth-date/gender fields, custom confirmation copy/image. */
+  content?: IContent;
+  /** Show combined T&C for these company ids (multi-organizer events). */
+  termsAndConditionsCompanies?: string[];
+  /** Auto-scroll to the top of the form after each step change. */
+  autoscrollAfterViewChange?: boolean;
+  /** Paydroid (Sobit / TapyGo) cashless API key. */
+  paydroidApiKey?: string;
+}
+
+const DEFAULTS = {
+  apiUrl: 'https://api.eventlook.cz',
+  seatingIframeUrl: 'https://iframe.seatily.com',
+  lang: 'cs',
+  termsAndConditions: 'https://www.eventlook.cz/obchodni-podminky/',
+  gdpr: 'https://www.eventlook.cz/gdpr/',
+};
+
+const noop = () => {};
+
+const EmbedApp: React.FC<{ opts: MountOptions }> = ({ opts }) => {
+  const [snack, setSnack] = useState<{ text: string; variant: SnackVariant } | null>(null);
+
+  const theme = useMemo(() => {
+    const t = opts.theme || {};
+    return createTheme({
+      palette: {
+        mode: t.mode || 'light',
+        ...(t.primaryColor ? { primary: { main: t.primaryColor } } : {}),
+        ...(t.secondaryColor ? { secondary: { main: t.secondaryColor } } : {}),
+        ...(t.background || t.paper
+          ? {
+              background: {
+                ...(t.background ? { default: t.background } : {}),
+                ...(t.paper ? { paper: t.paper } : {}),
+              },
+            }
+          : {}),
+      },
+      ...(t.fontFamily ? { typography: { fontFamily: t.fontFamily } } : {}),
+      ...(t.radius != null ? { shape: { borderRadius: t.radius } } : {}),
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <ScopedCssBaseline>
+        <OrderFormSdk
+          eventSlug={opts.event}
+          apiUrl={opts.apiUrl || DEFAULTS.apiUrl}
+          seatingIframeUrl={opts.seatingIframeUrl || DEFAULTS.seatingIframeUrl}
+          lang={(opts.lang || DEFAULTS.lang) as Languages}
+          selectedReleaseId={opts.selectedReleaseId}
+          content={opts.content}
+          callbacks={opts.callbacks || { homepage: noop, tickets: noop, detail: noop }}
+          links={
+            opts.links || {
+              termsAndConditions: DEFAULTS.termsAndConditions,
+              gdpr: DEFAULTS.gdpr,
+            }
+          }
+          options={{
+            packetaApiKey: opts.packetaApiKey,
+            stickyHeaderTop: opts.stickyHeaderTop ?? 0,
+            termsAndConditionsCompanies: opts.termsAndConditionsCompanies,
+            autoscrollAfterViewChange: opts.autoscrollAfterViewChange,
+            paydroidApiKey: opts.paydroidApiKey,
+            // In-page render (not an iframe) — the seat picker overlays the real
+            // viewport, so mobile seating works.
+            isIframe: false,
+          }}
+          slots={{
+            showSnackbar: (text, o) => setSnack({ text, variant: o?.variant || 'success' }),
+          }}
+        />
+        <Snackbar
+          open={!!snack}
+          autoHideDuration={5000}
+          onClose={() => setSnack(null)}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        >
+          {snack ? (
+            <Alert severity={snack.variant} variant="filled" onClose={() => setSnack(null)}>
+              {snack.text}
+            </Alert>
+          ) : (
+            <span />
+          )}
+        </Snackbar>
+      </ScopedCssBaseline>
+    </ThemeProvider>
+  );
+};
+
+const roots = new WeakMap<Element, Root>();
+
+function readAttrTheme(el: Element): ThemeOpts | undefined {
+  const mode = el.getAttribute('data-eventlook-mode');
+  const primary = el.getAttribute('data-eventlook-primary');
+  const secondary = el.getAttribute('data-eventlook-secondary');
+  const font = el.getAttribute('data-eventlook-font');
+  const background = el.getAttribute('data-eventlook-background');
+  const paper = el.getAttribute('data-eventlook-paper');
+  const radius = el.getAttribute('data-eventlook-radius');
+  if (!mode && !primary && !secondary && !font && !background && !paper && !radius) {
+    return undefined;
+  }
+  return {
+    mode: mode === 'dark' ? 'dark' : mode === 'light' ? 'light' : undefined,
+    primaryColor: primary || undefined,
+    secondaryColor: secondary || undefined,
+    fontFamily: font || undefined,
+    background: background || undefined,
+    paper: paper || undefined,
+    radius: radius != null ? Number(radius) : undefined,
+  };
+}
+
+export function mount(
+  target: string | Element,
+  userOpts: Partial<MountOptions> = {}
+): Root | undefined {
+  const el = typeof target === 'string' ? document.querySelector(target) : target;
+  if (!el) {
+    console.error('[eventlook] mount target not found:', target);
+    return;
+  }
+  const event = userOpts.event || el.getAttribute('data-eventlook-event') || '';
+  if (!event) {
+    console.error('[eventlook] missing event slug');
+    return;
+  }
+  if (roots.has(el)) return roots.get(el);
+
+  const opts: MountOptions = {
+    event,
+    apiUrl: userOpts.apiUrl || el.getAttribute('data-eventlook-api') || DEFAULTS.apiUrl,
+    seatingIframeUrl:
+      userOpts.seatingIframeUrl ||
+      el.getAttribute('data-eventlook-seating') ||
+      DEFAULTS.seatingIframeUrl,
+    lang: userOpts.lang || el.getAttribute('data-eventlook-lang') || DEFAULTS.lang,
+    packetaApiKey: userOpts.packetaApiKey || el.getAttribute('data-eventlook-packeta') || undefined,
+    stickyHeaderTop: userOpts.stickyHeaderTop,
+    theme: userOpts.theme || readAttrTheme(el),
+    callbacks: userOpts.callbacks,
+    links: userOpts.links,
+    selectedReleaseId: userOpts.selectedReleaseId,
+    content: userOpts.content,
+    termsAndConditionsCompanies: userOpts.termsAndConditionsCompanies,
+    autoscrollAfterViewChange: userOpts.autoscrollAfterViewChange,
+    paydroidApiKey: userOpts.paydroidApiKey,
+  };
+
+  const root = createRoot(el);
+  roots.set(el, root);
+  root.render(<EmbedApp opts={opts} />);
+  return root;
+}
+
+export function unmount(target: string | Element): void {
+  const el = typeof target === 'string' ? document.querySelector(target) : target;
+  if (!el) return;
+  const root = roots.get(el);
+  if (root) {
+    root.unmount();
+    roots.delete(el);
+  }
+}
+
+function autoInit() {
+  document.querySelectorAll('[data-eventlook-event]').forEach((el) => mount(el));
+}
+
+// Expose the global API used by the hosted snippet.
+type EventlookGlobal = { mount: typeof mount; unmount: typeof unmount };
+const w = window as unknown as { Eventlook?: Partial<EventlookGlobal> };
+w.Eventlook = Object.assign(w.Eventlook || {}, { mount, unmount });
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', autoInit);
+} else {
+  autoInit();
+}

package/src/form/Payment.tsx

@@ -28,7 +28,7 @@ import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
 import useGlobal from '@hooks/useGlobal';
 import { IPromoCode } from '@utils/types/promo-code.type';
 import { PromoCodeTypes } from '@utils/data/promo-code';
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import { Iconify } from '@components';
 import { IEventProductForm } from '@utils/types/product.type';
 
@@ -278,6 +278,11 @@ const Payment: React.FC<Props> = ({ event, stripeReady }) => {
                     <PaymentItem
                       key={payment.type}
                       active={!!paymentMethodId && Number(paymentMethodId) === payment.id}
+                      className={`eventlook-payment-option${
+                        !!paymentMethodId && Number(paymentMethodId) === payment.id
+                          ? ' eventlook-payment-option--active'
+                          : ''
+                      }`}
                     >
                       <FormControlLabel
                         value={payment.id}