@circlesquare/embedding-next 1.0.1 → 2.1.0

package/dist/frame-url.js

@@ -0,0 +1,88 @@
+import { CsSport } from './types.js';
+export const DEFAULT_CS_BASE_URL = 'https://circlesquare.app';
+const WIDGET_PATHS = {
+    courts: '/embedded/court-availability',
+    events: '/embedded/events',
+};
+const SUPPORTED_LANGUAGES = ['en', 'de'];
+/* The page matches a sport's key without spaces, `_` and `-` and in any
+   case (the clubs domain's sport.model.ts), and drops one it does not know. */
+const normaliseSportKey = (value) => value.replace(/[\s_-]/g, '').toLowerCase();
+const KNOWN_SPORTS = Object.values(CsSport).map(normaliseSportKey);
+/** Each theme option by the parameter the framed page reads. */
+const THEME_PARAMETERS = {
+    appearance: 'appearance',
+    surfaceColor: 'surface',
+    textColor: 'text',
+    accentColor: 'accent',
+    accentTextColor: 'accentText',
+    eventColor: 'event',
+    borderRadius: 'radius',
+    fontFamily: 'font',
+};
+const COLOUR_OPTIONS = ['surfaceColor', 'textColor', 'accentColor', 'accentTextColor', 'eventColor'];
+const getBaseUrl = (config) => config.csBaseUrl || DEFAULT_CS_BASE_URL;
+/* A plain JavaScript caller can pass any string as the language. */
+const isSupportedLanguage = (language) => SUPPORTED_LANGUAGES.includes(language.toLowerCase());
+/* A configured language goes in front of the path, which is how the pages
+   are served per language; without one, or with one the pages do not
+   have, the page negotiates the language from the visitor. */
+const getLocalizedPath = (path, { language }) => language && isSupportedLanguage(language) ? `/${language.toLowerCase()}${path}` : path;
+const joinList = (values) => (values ?? []).map(String).join(',');
+/**
+ * The frame's address. `csEmbedded` is sent as the loader sends it; the framed page knows it is
+ * framed from its path.
+ */
+export function getFrameUrl({ widget, containerId, config, }) {
+    const url = new URL(getLocalizedPath(WIDGET_PATHS[widget], config), getBaseUrl(config));
+    const append = (name, value) => {
+        if (value)
+            url.searchParams.append(name, value);
+    };
+    append('containerId', containerId);
+    append('csEmbedded', 'true');
+    append('hostId', config.hostId);
+    append('clubId', config.merchantId);
+    append('eventTypes', joinList(config.eventTypes));
+    append('sports', joinList(config.sports));
+    append('sportIds', joinList(config.sportIds));
+    append('background', config.backgroundColor);
+    for (const [option, parameter] of Object.entries(THEME_PARAMETERS)) {
+        const value = config[option];
+        if (value !== undefined && value !== null)
+            append(parameter, String(value));
+    }
+    return url;
+}
+/**
+ * Where the fallback notice sends a visitor: the club's page on the tab the widget stands for, or
+ * the events on CircleSquare for an organizer's list.
+ */
+export function getFallbackUrl({ widget, config }) {
+    const path = config.merchantId ? `/clubs/${encodeURIComponent(config.merchantId)}` : '/events';
+    const url = new URL(getLocalizedPath(path, config), getBaseUrl(config));
+    if (config.merchantId)
+        url.searchParams.set('tab', widget === 'courts' ? 'booking' : 'events');
+    return url;
+}
+/**
+ * What the host asked for that the frame will not show, as one console warning, or null. The page
+ * leaves out a colour it cannot read and keeps the kit's own; the host's browser says so here,
+ * before the host wonders why the club's colour does not show. `isColour` is the browser's check.
+ */
+export function getConfigWarning(config, { isColour }) {
+    const warnings = COLOUR_OPTIONS.flatMap((option) => {
+        const value = config[option];
+        return value && !isColour(value) ? [`${option} "${value}" is not a colour, leaving the widget's own`] : [];
+    });
+    /* A key the types allow is always known; this is for a plain JavaScript caller or a cast. */
+    for (const sport of config.sports ?? []) {
+        if (!KNOWN_SPORTS.includes(normaliseSportKey(String(sport)))) {
+            warnings.push(`sport "${sport}" is not one of ${Object.values(CsSport).join(', ')}, leaving it out`);
+        }
+    }
+    if (config.language && !isSupportedLanguage(config.language)) {
+        warnings.push(`unsupported language "${config.language}", falling back to automatic selection`);
+    }
+    return warnings.length ? warnings.map((warning) => `[CircleSquare] ${warning}`).join('\n') : null;
+}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-export * from './types';
-export * from './CsEmbeddingConfigProvider';
-export * from './CsEvents';
-export * from './CsCourtAvailability';
+export * from './types.js';
+export { CircleSquareEmbeddingConfigProvider, useCircleSquareEmbeddingConfig, type CircleSquareEmbeddingConfigProviderProps, } from './embedding-config.js';
+export { CSEvents, type CSEventsProps } from './cs-events.js';
+export { CSCourtAvailability, type CSCourtAvailabilityProps } from './cs-court-availability.js';
+export { DEFAULT_TIMEOUT_MS } from './embedded-frame.js';
+export { DEFAULT_CS_BASE_URL } from './frame-url.js';

package/dist/index.js

@@ -1,4 +1,6 @@
-export * from './types';
-export * from './CsEmbeddingConfigProvider';
-export * from './CsEvents';
-export * from './CsCourtAvailability';
+export * from './types.js';
+export { CircleSquareEmbeddingConfigProvider, useCircleSquareEmbeddingConfig, } from './embedding-config.js';
+export { CSEvents } from './cs-events.js';
+export { CSCourtAvailability } from './cs-court-availability.js';
+export { DEFAULT_TIMEOUT_MS } from './embedded-frame.js';
+export { DEFAULT_CS_BASE_URL } from './frame-url.js';

package/dist/types.d.ts

@@ -1,24 +1,71 @@
+/** The kinds of event the list can be limited to, as the API spells them. */
 export declare enum CsEventType {
-    KnockOutTournament = "KNOCKOUT_TOURNAMENT",
+    OpenPlay = "OPEN_PLAY",
+    Training = "TRAINING",
+    League = "LEAGUE",
+    Tournament = "TOURNAMENT",
     RoundRobinTournament = "ROUND_ROBIN_TOURNAMENT",
     AmericanoTournament = "AMERICANO_TOURNAMENT",
     Americano = "AMERICANO",
-    OpenPlay = "OPEN_PLAY",
-    Training = "TRAINING",
-    Other = "OTHER",
-    League = "LEAGUE"
+    LevelingSession = "LEVELING_SESSION",
+    Other = "OTHER"
+}
+/** The sports a widget can be limited to, by the keys the framed page reads. */
+export declare enum CsSport {
+    Tennis = "TENNIS",
+    Padel = "PADEL",
+    Pickleball = "PICKLEBALL",
+    BeachVolleyball = "BEACH_VOLLEYBALL",
+    Football = "FOOTBALL",
+    Badminton = "BADMINTON",
+    Squash = "SQUASH"
+}
+export type CsLanguage = 'en' | 'de';
+export type CsAppearance = 'light' | 'dark';
+/** The typefaces the framed page serves itself; a frame cannot use the fonts of the page around it. */
+export type CsFontFamily = 'Barlow' | 'DM Sans' | 'Inter' | 'Lato' | 'Manrope' | 'Montserrat' | 'Nunito' | 'Open Sans' | 'Oswald' | 'Poppins' | 'Roboto';
+/** The club's look. Every colour is any CSS colour: hex, a colour function or a name. */
+export interface CsEmbeddingTheme {
+    /** The look the rest follows: `dark` for a dark site. Light by default. */
+    appearance?: CsAppearance;
+    /** The widget's own surface, such as the court grid's card and a popover. */
+    surfaceColor?: string;
+    /** The text; secondary text, lines and the unavailable cells are mixed from it. */
+    textColor?: string;
+    /** The club's colour: your booking, the chosen slot, the main button, focus. */
+    accentColor?: string;
+    /** The text on the accent; without it, black or white, whichever reads on the accent. */
+    accentTextColor?: string;
+    /** The events in the court grid. */
+    eventColor?: string;
+    /** A card's corner: a number of pixels or a CSS length in `px` or `rem`. */
+    borderRadius?: number | string;
+    fontFamily?: CsFontFamily;
 }
-export interface CsEmbeddingBaseConfig {
+export interface CsEmbeddingBaseConfig extends CsEmbeddingTheme {
+    /** The club. */
     merchantId?: string;
+    /** The page behind the widget, any CSS colour; the widget's surface by default. */
     backgroundColor?: string;
-    language?: 'en' | 'de';
+    /** Without one, the framed page picks the visitor's language. */
+    language?: CsLanguage;
+    /** Where the framed pages are served: `https://circlesquare.app` by default. */
     csBaseUrl?: string;
 }
 export interface CsEventsConfig extends CsEmbeddingBaseConfig {
+    /** The organizer whose events are listed; replaces `merchantId` for an organizer's own list. */
     hostId?: string;
     eventTypes?: CsEventType[];
+    /** The sports whose events are listed; every sport by default. */
+    sports?: CsSport[];
+    /** @deprecated Name the sports with `sports` instead. The page still reads the ids beside it. */
+    sportIds?: number[];
 }
 export interface CsCourtAvailabilityConfig extends CsEmbeddingBaseConfig {
+    /** The sports the court grid offers; every sport of the club by default. */
+    sports?: CsSport[];
+    /** @deprecated Name the sports with `sports` instead. The page still reads the ids beside it. */
+    sportIds?: number[];
 }
 export interface CircleSquareEmbeddingConfigContextType {
     config: CsEmbeddingBaseConfig;

package/dist/types.js

@@ -1,11 +1,29 @@
+/* WHAT A CLUB'S SITE PASSES TO THE FRAMES. The option names are the loader's
+   (apps/web/public/assets/scripts/embed.js), so a club that moves between
+   the loader and this package keeps its configuration. The framed page reads
+   them as apps/web/src/lib/embed.ts and lib/embed-theme.ts describe, and
+   leaves out a value it cannot read. */
+/** The kinds of event the list can be limited to, as the API spells them. */
 export var CsEventType;
 (function (CsEventType) {
-    CsEventType["KnockOutTournament"] = "KNOCKOUT_TOURNAMENT";
+    CsEventType["OpenPlay"] = "OPEN_PLAY";
+    CsEventType["Training"] = "TRAINING";
+    CsEventType["League"] = "LEAGUE";
+    CsEventType["Tournament"] = "TOURNAMENT";
     CsEventType["RoundRobinTournament"] = "ROUND_ROBIN_TOURNAMENT";
     CsEventType["AmericanoTournament"] = "AMERICANO_TOURNAMENT";
     CsEventType["Americano"] = "AMERICANO";
-    CsEventType["OpenPlay"] = "OPEN_PLAY";
-    CsEventType["Training"] = "TRAINING";
+    CsEventType["LevelingSession"] = "LEVELING_SESSION";
     CsEventType["Other"] = "OTHER";
-    CsEventType["League"] = "LEAGUE";
 })(CsEventType || (CsEventType = {}));
+/** The sports a widget can be limited to, by the keys the framed page reads. */
+export var CsSport;
+(function (CsSport) {
+    CsSport["Tennis"] = "TENNIS";
+    CsSport["Padel"] = "PADEL";
+    CsSport["Pickleball"] = "PICKLEBALL";
+    CsSport["BeachVolleyball"] = "BEACH_VOLLEYBALL";
+    CsSport["Football"] = "FOOTBALL";
+    CsSport["Badminton"] = "BADMINTON";
+    CsSport["Squash"] = "SQUASH";
+})(CsSport || (CsSport = {}));

package/package.json

@@ -1,28 +1,7 @@
 {
   "name": "@circlesquare/embedding-next",
-  "private": false,
-  "version": "1.0.1",
-  "description": "Next.js components for embedding your CircleSquare events and court availability",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc",
-    "prepare": "npm run build"
-  },
-  "peerDependencies": {
-    "next": ">=13.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^5.0.0"
-  },
-  "files": [
-    "dist"
-  ],
+  "version": "2.1.0",
+  "description": "React components for Next.js that embed a club's CircleSquare events and court availability, in the club's look",
   "keywords": [
     "circlesquare",
     "embedding",
@@ -30,5 +9,41 @@
     "react"
   ],
   "author": "CircleSquare",
-  "license": "MIT"
-} 
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@circlesquare/config": "0.0.0",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "~19.2.4",
+    "eslint": "^10.10.0",
+    "jsdom": "^30.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

package/dist/CsCourtAvailability.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { CsCourtAvailabilityConfig } from './types';
-interface CSCourtAvailabilityProps extends CsCourtAvailabilityConfig {
-    className?: string;
-    fallback?: React.ReactNode;
-    timeoutMs?: number;
-}
-export declare const CSCourtAvailability: React.FC<CSCourtAvailabilityProps>;
-export {};

package/dist/CsCourtAvailability.jsx

@@ -1,80 +0,0 @@
-'use client';
-import React, { useEffect, useId, useState, useRef } from 'react';
-import { useCircleSquareEmbeddingConfig } from './CsEmbeddingConfigProvider';
-import { getBaseUrlWithLanguage } from './utils';
-export var CSCourtAvailability = function (_a) {
-    var merchantId = _a.merchantId, backgroundColor = _a.backgroundColor, csBaseUrl = _a.csBaseUrl, language = _a.language, className = _a.className, fallback = _a.fallback, _b = _a.timeoutMs, timeoutMs = _b === void 0 ? 3000 : _b;
-    var containerId = useId();
-    var context = useCircleSquareEmbeddingConfig();
-    var _c = useState(), iframeUrl = _c[0], setIframeUrl = _c[1];
-    var _d = useState(), height = _d[0], setHeight = _d[1];
-    var _e = useState('loading'), status = _e[0], setStatus = _e[1];
-    var timerRef = useRef();
-    useEffect(function () {
-        var finalConfig = {
-            merchantId: merchantId || (context === null || context === void 0 ? void 0 : context.merchantId),
-            backgroundColor: backgroundColor || (context === null || context === void 0 ? void 0 : context.backgroundColor),
-            csBaseUrl: csBaseUrl || (context === null || context === void 0 ? void 0 : context.csBaseUrl) || 'https://circlesquare.app',
-        };
-        if (!finalConfig.merchantId) {
-            console.error('[CircleSquare] merchantId is required');
-            setStatus('error');
-            return;
-        }
-        var url = new URL("".concat(getBaseUrlWithLanguage(finalConfig.csBaseUrl, language || (context === null || context === void 0 ? void 0 : context.language)), "/embedded/court-availability"));
-        url.searchParams.append('clubId', finalConfig.merchantId);
-        url.searchParams.append('containerId', containerId);
-        if (finalConfig.backgroundColor) {
-            url.searchParams.append('background', finalConfig.backgroundColor);
-        }
-        setIframeUrl(url.toString());
-        // start our timeout
-        timerRef.current = window.setTimeout(function () {
-            if (status === 'loading') {
-                console.warn('[CircleSquare] iframe didn’t respond in time');
-                setStatus('error');
-            }
-        }, timeoutMs);
-        // message listener
-        var handleMessage = function (event) {
-            if (event.origin !== finalConfig.csBaseUrl)
-                return;
-            if (event.data.type === 'setHeight' && event.data.containerId === containerId) {
-                clearTimeout(timerRef.current);
-                setHeight(event.data.height);
-                setStatus('ready');
-            }
-        };
-        window.addEventListener('message', handleMessage);
-        return function () {
-            clearTimeout(timerRef.current);
-            window.removeEventListener('message', handleMessage);
-        };
-    }, [
-        merchantId,
-        backgroundColor,
-        csBaseUrl,
-        context === null || context === void 0 ? void 0 : context.merchantId,
-        context === null || context === void 0 ? void 0 : context.backgroundColor,
-        context === null || context === void 0 ? void 0 : context.csBaseUrl,
-        containerId,
-        timeoutMs,
-    ]);
-    if (status === 'error' || !iframeUrl) {
-        return <div className={className}>{fallback ? fallback : <Fallback csBaseUrl={csBaseUrl || 'https://circlesquare.app'} merchantId={merchantId || (context === null || context === void 0 ? void 0 : context.merchantId)} backgroundColor={backgroundColor || (context === null || context === void 0 ? void 0 : context.backgroundColor)} language={language || (context === null || context === void 0 ? void 0 : context.language)}/>}</div>;
-    }
-    return (<iframe className={className} src={iframeUrl} style={{ width: '100%', border: 'none', height: height }} onError={function () { return setStatus('error'); }}/>);
-};
-function Fallback(_a) {
-    var csBaseUrl = _a.csBaseUrl, merchantId = _a.merchantId, backgroundColor = _a.backgroundColor, language = _a.language;
-    var title = language === 'de' ? 'Verfügbarkeit kann nicht angezeigt werden' : 'Unable to display court availability';
-    var description = language === 'de' ? 'Bitte klicken unten, um einen Platz direkt über CircleSquare zu buchen.' : 'Please click the button below to book a court via CircleSquare directly.';
-    var buttonText = language === 'de' ? 'Platz über CircleSquare buchen' : 'Book a court via CircleSquare';
-    return <div style={{ width: '100%', minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: backgroundColor, padding: '2rem' }}>
-    <p style={{ marginBottom: '0.5rem', fontSize: '1.2rem', fontWeight: 'bold', color: '#000' }}>{title}</p>
-    <p style={{ marginBottom: '1rem', color: '#000' }}>{description}</p>
-    <a href={"".concat(getBaseUrlWithLanguage(csBaseUrl, language), "/clubs/").concat(merchantId)} style={{ display: 'block', width: 'fit-content', padding: '10px 20px', backgroundColor: '#007A70', color: '#fff', borderRadius: '5px', textDecoration: 'none', fontWeight: 'semibold', cursor: 'pointer' }}>
-      <span>{buttonText}</span>
-    </a>
-  </div>;
-}

package/dist/CsEmbeddingConfigProvider.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { CsEmbeddingBaseConfig } from './types';
-export declare const useCircleSquareEmbeddingConfig: () => CsEmbeddingBaseConfig | null;
-interface CircleSquareEmbeddingConfigProviderProps {
-    children: React.ReactNode;
-    merchantId: string;
-    backgroundColor?: string;
-    csBaseUrl?: string;
-    language?: 'en' | 'de';
-}
-export declare const CircleSquareEmbeddingConfigProvider: React.FC<CircleSquareEmbeddingConfigProviderProps>;
-export {};

package/dist/CsEmbeddingConfigProvider.jsx

@@ -1,22 +0,0 @@
-'use client';
-import React, { createContext, useContext } from 'react';
-var CircleSquareEmbeddingConfigContext = createContext(null);
-export var useCircleSquareEmbeddingConfig = function () {
-    var context = useContext(CircleSquareEmbeddingConfigContext);
-    if (!context) {
-        return null;
-    }
-    return context.config;
-};
-export var CircleSquareEmbeddingConfigProvider = function (_a) {
-    var children = _a.children, merchantId = _a.merchantId, backgroundColor = _a.backgroundColor, _b = _a.csBaseUrl, csBaseUrl = _b === void 0 ? 'https://circlesquare.app' : _b, language = _a.language;
-    var config = {
-        merchantId: merchantId,
-        backgroundColor: backgroundColor,
-        csBaseUrl: csBaseUrl,
-        language: language,
-    };
-    return (<CircleSquareEmbeddingConfigContext.Provider value={{ config: config }}>
-      {children}
-    </CircleSquareEmbeddingConfigContext.Provider>);
-};

package/dist/CsEvents.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { CsEventsConfig } from './types';
-interface CSEventsProps extends CsEventsConfig {
-    className?: string;
-    /** Render this instead of the iframe if something goes wrong */
-    fallback?: React.ReactNode;
-    /** How long (ms) to wait for a height postMessage before erroring */
-    timeoutMs?: number;
-}
-export declare const CSEvents: React.FC<CSEventsProps>;
-export {};

package/dist/CsEvents.jsx

@@ -1,94 +0,0 @@
-'use client';
-import React, { useEffect, useId, useState, useRef } from 'react';
-import { useCircleSquareEmbeddingConfig } from './CsEmbeddingConfigProvider';
-import { getBaseUrlWithLanguage } from './utils';
-export var CSEvents = function (_a) {
-    var merchantId = _a.merchantId, hostId = _a.hostId, backgroundColor = _a.backgroundColor, csBaseUrl = _a.csBaseUrl, eventTypes = _a.eventTypes, className = _a.className, language = _a.language, fallback = _a.fallback, _b = _a.timeoutMs, timeoutMs = _b === void 0 ? 3000 : _b;
-    var containerId = useId();
-    var context = useCircleSquareEmbeddingConfig();
-    // Computed iframe URL (or undefined if missing merchantId)
-    var _c = useState(), iframeUrl = _c[0], setIframeUrl = _c[1];
-    // Measured height from postMessage
-    var _d = useState(), height = _d[0], setHeight = _d[1];
-    // 'loading' → 'ready' → 'error'
-    var _e = useState('loading'), status = _e[0], setStatus = _e[1];
-    var timerRef = useRef();
-    useEffect(function () {
-        var finalConfig = {
-            merchantId: merchantId || (context === null || context === void 0 ? void 0 : context.merchantId),
-            hostId: hostId,
-            backgroundColor: backgroundColor || (context === null || context === void 0 ? void 0 : context.backgroundColor),
-            csBaseUrl: csBaseUrl || (context === null || context === void 0 ? void 0 : context.csBaseUrl) || 'https://circlesquare.app',
-        };
-        if (!finalConfig.merchantId) {
-            console.error('[CircleSquare] merchantId is required for events');
-            setStatus('error');
-            return;
-        }
-        // Build URL
-        var url = new URL("".concat(getBaseUrlWithLanguage(finalConfig.csBaseUrl, language || (context === null || context === void 0 ? void 0 : context.language)), "/embedded/events"));
-        url.searchParams.append('clubId', finalConfig.merchantId);
-        url.searchParams.append('containerId', containerId);
-        if (finalConfig.hostId) {
-            url.searchParams.append('hostId', finalConfig.hostId);
-        }
-        if (eventTypes) {
-            url.searchParams.append('eventTypes', eventTypes.join(','));
-        }
-        if (finalConfig.backgroundColor) {
-            url.searchParams.append('background', finalConfig.backgroundColor);
-        }
-        setIframeUrl(url.toString());
-        // Kick off a timeout to catch silent failures/ad-blockers
-        timerRef.current = window.setTimeout(function () {
-            if (status === 'loading') {
-                console.warn('[CircleSquare] events iframe did not respond in time');
-                setStatus('error');
-            }
-        }, timeoutMs);
-        // Listen for height postMessage
-        var handleMessage = function (event) {
-            if (event.origin !== finalConfig.csBaseUrl)
-                return;
-            if (event.data.type === 'setHeight' && event.data.containerId === containerId) {
-                clearTimeout(timerRef.current);
-                setHeight(event.data.height);
-                setStatus('ready');
-            }
-        };
-        window.addEventListener('message', handleMessage);
-        return function () {
-            clearTimeout(timerRef.current);
-            window.removeEventListener('message', handleMessage);
-        };
-    }, [
-        merchantId,
-        hostId,
-        backgroundColor,
-        csBaseUrl,
-        eventTypes,
-        context === null || context === void 0 ? void 0 : context.merchantId,
-        context === null || context === void 0 ? void 0 : context.backgroundColor,
-        context === null || context === void 0 ? void 0 : context.csBaseUrl,
-        containerId,
-        timeoutMs,
-        status,
-    ]);
-    if (status === 'error' || !iframeUrl) {
-        return <div className={className}>{fallback ? fallback : <Fallback csBaseUrl={csBaseUrl || 'https://circlesquare.app'} merchantId={merchantId || (context === null || context === void 0 ? void 0 : context.merchantId)} backgroundColor={backgroundColor || (context === null || context === void 0 ? void 0 : context.backgroundColor)} language={language || (context === null || context === void 0 ? void 0 : context.language)}/>}</div>;
-    }
-    return (<iframe className={className} src={iframeUrl} style={{ width: '100%', border: 'none', height: height }} onError={function () { return setStatus('error'); }}/>);
-};
-function Fallback(_a) {
-    var csBaseUrl = _a.csBaseUrl, merchantId = _a.merchantId, backgroundColor = _a.backgroundColor, language = _a.language;
-    var title = language === 'de' ? 'Events können nicht angezeigt werden' : 'Unable to display events';
-    var description = language === 'de' ? 'Bitte klicken unten, um alle unsere Events bei CircleSquare anzuzeigen.' : 'Please click the button below to view all our events on CircleSquare.';
-    var buttonText = language === 'de' ? 'Events bei CircleSquare anzeigen' : 'View events on CircleSquare';
-    return <div style={{ width: '100%', minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: backgroundColor, padding: '2rem' }}>
-    <p style={{ marginBottom: '0.5rem', fontSize: '1.2rem', fontWeight: 'bold', color: '#000' }}>{title}</p>
-    <p style={{ marginBottom: '1rem', color: '#000' }}>{description}</p>
-    <a href={"".concat(getBaseUrlWithLanguage(csBaseUrl, language), "/clubs/").concat(merchantId)} style={{ display: 'block', width: 'fit-content', padding: '10px 20px', backgroundColor: '#007A70', color: '#fff', borderRadius: '5px', textDecoration: 'none', fontWeight: 'semibold', cursor: 'pointer' }}>
-      <span>{buttonText}</span>
-    </a>
-  </div>;
-}