@eventlook-sro/order-form-sdk

A simple and modular SDK package for integrating an event order form into Next.js or any React application.

This SDK enables you to embed a fully functional and customizable ticketing form into any React app. It is designed for the Eventlook platform.

📦 Installation

npm install @eventlook-sro/order-form-sdk
# or
yarn add @eventlook-sro/order-form-sdk

Recommended package versions:

npm install 
# or
yarn add \
  @emotion/react@^11.14.0 \
  @emotion/styled@^11.14.0 \
  @hookform/resolvers@^5.0.1 \
  @iconify/icons-carbon@^1.2.20 \
  @iconify/react@^6.0.0 \
  @mui/lab@^5.0.0-alpha.87 \
  @mui/material@^5.8.5 \
  @mui/x-date-pickers@^6.3.0 \
  axios@^1.9.0 \
  dayjs@^1.11.13 \
  framer-motion@^12.12.1 \
  js-cookie@^3.0.5 \
  lodash@^4.17.21 \
  lottie-react@^2.4.1 \
  mui-tel-input@^9.0.0 \
  numeral@^2.0.6 \
  react@^18.0.0 \
  react-dom@^18.0.0 \
  react-hook-form@^7.56.4 \
  react-lazy-load-image-component@^1.6.3 \
  swr@^2.3.3 \
  yup@^1.6.1

🚀 Usage

import { OrderFormSdk } from '@eventlook-sro/order-form-sdk';

<OrderFormSdk
  eventSlug="some-slug"
  apiUrl="https://api.eventlook.cz"
  lang="cs" // Options: 'cs' | 'en' | 'es' | 'pl' | 'uk' | 'sk' 
  selectedReleaseId={1} // Optional, preselects a specific release
  callbacks={{
    homepage: () => router.replace('/'),
    tickets: () => router.replace(`/events/some-slug/tickets`),
    detail: () => router.replace(`/events/some-slug`),
  }}
  links={{
    termsAndConditions: '/terms-and-conditions',
    gdpr: '/gdpr',
  }}
  options={{
    packataApiKey: process.env.NEXT_PUBLIC_PACKATA_API_KEY,
    stickyHeaderTop: 80,
  }}
/>

🧩 Props

| Name | Type | Description | |---------------------|-----------------------------------------------------------|--------------------------------------------------------------| | eventSlug | string | Event slug (e.g., some-slug) | | apiUrl | string | API endpoint for fetching data | | callbacks | IGlobalContextCallbacks | Navigation callbacks | | links | IGlobalContextLinks | Links to documents like Terms & Conditions, GDPR, etc. | | options | IGlobalContextOptions (optional) | Optional SDK settings (e.g., sticky header, Packeta API key) | | slots | { showSnackbar: (text, options?) => void } (optional) | Function for showing notifications | | user | IUser (optional) | Authenticated user if available | | selectedReleaseId | number (optional) | Preselect default release | | content | IContent (optional) | Content customization |

🔁 Callbacks

interface IGlobalContextCallbacks {
  homepage: () => void;
  tickets: () => void;
  detail: () => void;
}

🔗 Links

interface IGlobalContextLinks {
  termsAndConditions: string;
  gdpr: string;
}

⚙️ Options

interface IGlobalContextOptions {
  packataApiKey?: string;
  isIframe?: boolean;
  stickyHeaderTop?: number;
  autoscrollAfterViewChange?: boolean;
  termsAndConditionsCompanies?: string[];
}

📝 Content

export interface IContent {
  form?: {
    disableBirthDate?: boolean;
    disableGender?: boolean;
  };
  orderConfirmation?: {
    title?: string;
    image?: IContentImage;
  };
  paymentConfirmation?: {
    title?: string;
    status?: string;
    subtitle?: string;
    image?: IContentImage;
  }
}

export interface IContentImage {
  src: string;
  maxWidth?: string;
}

📝 License

MIT

📮 Contact

If you have any questions or suggestions for improvements, feel free to contact us at [email protected].