@eventlook/sdk 1.4.0

package/src/form/timeslot/TimeslotCalendar.tsx

@@ -0,0 +1,112 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import { DateCalendar, PickersDay, PickersDayProps } from '@mui/x-date-pickers';
+import { Box } from '@mui/material';
+
+const Day: React.FC<
+  PickersDayProps<Dayjs> & {
+    selectedDay?: string | null;
+    selectedDays?: string[];
+    setSelectedDate?: (date: string | null) => void;
+    disableUnselectedDays?: boolean;
+  }
+> = ({
+  selectedDay,
+  selectedDays = [],
+  setSelectedDate = () => {},
+  day,
+  outsideCurrentMonth,
+  disableUnselectedDays,
+  disabled,
+  ...other
+}) => {
+  const isCurrentDay = !!selectedDay && selectedDay.indexOf(day.format('YYYY-MM-DD')) >= 0;
+  const isSelected =
+    !outsideCurrentMonth && (selectedDays.indexOf(day.format('YYYY-MM-DD')) >= 0 || isCurrentDay);
+
+  return (
+    <Box>
+      <PickersDay
+        {...other}
+        outsideCurrentMonth={outsideCurrentMonth}
+        day={day}
+        selected={isSelected}
+        disabled={disabled || (disableUnselectedDays && !isSelected)}
+        onClick={() => setSelectedDate(day.format('YYYY-MM-DD'))}
+        sx={{
+          ...other.sx,
+          ...(!isCurrentDay && {
+            '&.Mui-selected': {
+              backgroundColor: 'common.white',
+              color: 'primary.main',
+              border: '1px solid',
+              '&:hover, &:focus': {
+                backgroundColor: 'primary.lighter',
+              },
+            },
+          }),
+        }}
+      />
+    </Box>
+  );
+};
+
+interface Props {
+  selectedDay: string | null;
+  selectedDays: string[];
+  setSelectedDate: (date: string | null) => void;
+  activeMonth?: Dayjs;
+  setActiveMonth?: Dispatch<SetStateAction<Dayjs | null>>;
+  disableUnselectedDays?: boolean;
+}
+
+const TimeslotCalendar: React.FC<Props> = ({
+  selectedDay,
+  selectedDays,
+  setSelectedDate,
+  activeMonth,
+  setActiveMonth,
+  disableUnselectedDays,
+}) => {
+  const handleMonthChange = (date: Dayjs) => {
+    if (setActiveMonth) {
+      setActiveMonth(dayjs(date));
+    }
+  };
+
+  const handleYearChange = (date: Dayjs) => {
+    if (setActiveMonth) {
+      setActiveMonth(dayjs(date));
+    }
+  };
+
+  return (
+    <DateCalendar
+      minDate={dayjs()}
+      slots={{
+        day: Day,
+      }}
+      slotProps={{
+        day: {
+          selectedDay,
+          selectedDays,
+          setSelectedDate,
+          disableUnselectedDays,
+        } as any,
+      }}
+      value={activeMonth}
+      onMonthChange={handleMonthChange}
+      onYearChange={handleYearChange}
+      views={['year', 'month', 'day']}
+      dayOfWeekFormatter={(day, date) => dayjs(date).format('ddd').slice(0, 2).toUpperCase()}
+      sx={{
+        m: 0,
+        borderRadius: 2,
+        border: (theme) => `1px solid ${theme.palette.grey.A200}`,
+        boxShadow: (theme) => theme.shadows[10],
+      }}
+    />
+  );
+};
+
+export default TimeslotCalendar;

package/src/hooks/data/useActiveEventProducts.ts

@@ -0,0 +1,21 @@
+import useSWR from 'swr';
+import { getActiveEventProducts } from '@modules/event';
+import { IEventProduct } from '@utils/types/event-product.type';
+
+export default function useActiveEventProducts(id?: number, inlcudeChildren?: boolean) {
+  const { data, error, mutate, isValidating } = useSWR<IEventProduct[]>(
+    ['active-event-products', id, inlcudeChildren],
+    id ? () => getActiveEventProducts(id, inlcudeChildren) : null,
+    {
+      revalidateOnMount: true,
+    }
+  );
+
+  return {
+    data: data ? data : [],
+    error,
+    mutate,
+    isValidating,
+    isLoading: !error && !data,
+  };
+}

package/src/hooks/data/useAllowedPaymentMethods.ts

@@ -0,0 +1,22 @@
+import useSWR from 'swr';
+import { getAllowedPaymentMethods } from '@modules/order';
+import { Currencies } from '@utils/data/currency';
+import { IPaymentMethod } from '@utils/types/payment-method.type';
+
+export default function useAllowedPaymentMethods(currency: Currencies, eventId?: number) {
+  const { data, error, mutate, isValidating } = useSWR<IPaymentMethod[]>(
+    ['allowed-payment-methods', currency, eventId],
+    () => getAllowedPaymentMethods(currency, eventId),
+    {
+      revalidateOnMount: true,
+    }
+  );
+
+  return {
+    data,
+    error,
+    mutate,
+    isValidating,
+    isLoading: !error && !data,
+  };
+}

package/src/hooks/data/useEvent.ts

@@ -0,0 +1,21 @@
+import useSWR from 'swr';
+import { getEventBySlug } from '@modules/event';
+import { IEvent } from '@utils/types/event.type';
+
+export default function useEvent(slug?: string) {
+  const { data, error, mutate, isValidating } = useSWR<IEvent>(
+    ['event', slug],
+    slug ? (_: any) => getEventBySlug(slug) : null,
+    {
+      revalidateOnMount: true,
+    }
+  );
+
+  return {
+    data: data,
+    error,
+    mutate,
+    isValidating,
+    isLoading: !error && !data,
+  };
+}

package/src/hooks/data/useEventActiveReleases.ts

@@ -0,0 +1,29 @@
+import useSWR from 'swr';
+import { getEventActiveReleases } from '@modules/event';
+import { IReleaseShort } from '@utils/types/release.type';
+
+export default function useEventActiveReleases(
+  id?: number,
+  includeChildren?: boolean,
+  timeslotId?: number | null
+) {
+  const { data, error, mutate, isValidating } = useSWR<IReleaseShort[]>(
+    ['event-active-releases', id, includeChildren, timeslotId],
+    id
+      ? timeslotId === undefined || !!timeslotId
+        ? () => getEventActiveReleases(id, includeChildren, timeslotId)
+        : null
+      : null,
+    {
+      revalidateOnMount: true,
+    }
+  );
+
+  return {
+    data: data,
+    error,
+    mutate,
+    isValidating,
+    isLoading: !error && !data,
+  };
+}

package/src/hooks/data/useEventShippingMethods.ts

@@ -0,0 +1,21 @@
+import useSWR from 'swr';
+import { getEventShippingMethods } from '@modules/event';
+import { IShippingMethod, IShippingMethodFilter } from '@utils/types/shipping-method.type';
+
+export default function useEventShippingMethods(id?: number, filters?: IShippingMethodFilter) {
+  const { data, error, mutate, isValidating } = useSWR<IShippingMethod[]>(
+    ['event-shipping-methods', id, filters],
+    id ? () => getEventShippingMethods(id, filters) : null,
+    {
+      revalidateOnMount: true,
+    }
+  );
+
+  return {
+    data: data ? data : [],
+    error,
+    mutate,
+    isValidating,
+    isLoading: !error && !data,
+  };
+}

package/src/hooks/data/useEventTimeslots.ts

@@ -0,0 +1,23 @@
+import useSWR from 'swr';
+import { IPaginate } from '@utils/types/global.type';
+import { getEventTimeslots } from '@modules/event-timeslot';
+import { IEventTimeslotDate, IEventTimeslotFilters } from '@utils/types/event-timeslot.type';
+
+export default function useEventTimeslots(eventId: number, filters?: IEventTimeslotFilters) {
+  const { data, error, mutate, isValidating } = useSWR<IPaginate<IEventTimeslotDate[]>>(
+    ['event-timeslots', eventId, filters],
+    () => getEventTimeslots(eventId, filters),
+    {
+      revalidateOnMount: true,
+    }
+  );
+
+  return {
+    data: data ? data.data : [],
+    meta: data?.meta,
+    error,
+    mutate,
+    isValidating,
+    isLoading: !error && !data,
+  };
+}

package/src/hooks/useCountdown.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+
+// ----------------------------------------------------------------------
+
+export default function useCountdown(date: Date) {
+  const [countdown, setCountdown] = useState({
+    days: '00',
+    hours: '00',
+    minutes: '00',
+    seconds: '00',
+  });
+
+  useEffect(() => {
+    const interval = setInterval(() => setNewTime(), 1000);
+    return () => clearInterval(interval);
+  }, [date]);
+
+  const setNewTime = () => {
+    const startTime = date;
+    const endTime = new Date();
+    const distanceToNow = startTime.valueOf() - endTime.valueOf();
+
+    const getDays = Math.floor(distanceToNow / (1000 * 60 * 60 * 24));
+
+    const getHours = `0${Math.floor(
+      (distanceToNow % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+    )}`.slice(-2);
+
+    const getMinutes = `0${Math.floor((distanceToNow % (1000 * 60 * 60)) / (1000 * 60))}`.slice(-2);
+
+    const getSeconds = `0${Math.floor((distanceToNow % (1000 * 60)) / 1000)}`.slice(-2);
+
+    setCountdown({
+      days: getDays.toString() || '000',
+      hours: getHours || '00',
+      minutes: getMinutes || '00',
+      seconds: getSeconds || '00',
+    });
+  };
+
+  return countdown;
+}
+
+// Usage
+// const countdown = useCountdown(new Date('07/07/2022 21:30'));

package/src/hooks/useDebounce.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export default function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/useErrors.ts

@@ -0,0 +1,23 @@
+import useGlobal from '@hooks/useGlobal.ts';
+
+const useErrors = (defaultMessage?: string) => {
+  const { t, showSnackbar } = useGlobal();
+
+  const transformErrors = (message: string | string[] | undefined) => {
+    if (Array.isArray(message)) {
+      for (const error of message) {
+        showSnackbar(error, { variant: 'error' });
+      }
+    } else if (message) {
+      showSnackbar(message, { variant: 'error' });
+    } else {
+      showSnackbar(defaultMessage ?? t('error'), { variant: 'error' });
+    }
+  };
+
+  return {
+    transformErrors,
+  };
+};
+
+export default useErrors;

package/src/hooks/useEventListener.ts

@@ -0,0 +1,71 @@
+import { RefObject, useEffect, useRef, useLayoutEffect } from 'react';
+
+// ----------------------------------------------------------------------
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+// Window Event based useEventListener interface
+function useEventListener<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void,
+  element?: undefined,
+  options?: boolean | AddEventListenerOptions
+): void;
+
+// Element Event based useEventListener interface
+function useEventListener<
+  K extends keyof HTMLElementEventMap,
+  T extends HTMLElement = HTMLDivElement,
+>(
+  eventName: K,
+  handler: (event: HTMLElementEventMap[K]) => void,
+  element: RefObject<T>,
+  options?: boolean | AddEventListenerOptions
+): void;
+
+// Document Event based useEventListener interface
+function useEventListener<K extends keyof DocumentEventMap>(
+  eventName: K,
+  handler: (event: DocumentEventMap[K]) => void,
+  element: RefObject<Document>,
+  options?: boolean | AddEventListenerOptions
+): void;
+
+function useEventListener<
+  KW extends keyof WindowEventMap,
+  KH extends keyof HTMLElementEventMap,
+  T extends HTMLElement | void = void,
+>(
+  eventName: KW | KH,
+  handler: (event: WindowEventMap[KW] | HTMLElementEventMap[KH] | Event) => void,
+  element?: RefObject<T>,
+  options?: boolean | AddEventListenerOptions
+) {
+  // Create a ref that stores handler
+  const savedHandler = useRef(handler);
+
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement: T | Window = element?.current || window;
+    if (!(targetElement && targetElement.addEventListener)) {
+      return;
+    }
+
+    // Create event listener that calls handler function stored in ref
+    const eventListener: typeof handler = (event) => savedHandler.current(event);
+
+    targetElement.addEventListener(eventName, eventListener, options);
+
+    // Remove event listener on cleanup
+
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element, options]);
+}
+
+export default useEventListener;

package/src/hooks/useFirstRender.ts

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from 'react';
+
+export function useFirstRender(): boolean {
+  const firstRender = useRef(true);
+
+  useEffect(() => {
+    firstRender.current = false;
+  }, []);
+
+  return firstRender.current;
+}

package/src/hooks/useGlobal.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { GlobalContext } from '@context/GlobalContext';
+
+const useGlobal = () => useContext(GlobalContext);
+
+export default useGlobal;

package/src/hooks/useResponsive.ts

@@ -0,0 +1,54 @@
+import { Breakpoint } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+type Query = 'up' | 'down' | 'between' | 'only';
+type Key = Breakpoint | number;
+type Start = Breakpoint | number;
+type End = Breakpoint | number;
+
+export default function useResponsive(query: Query, key?: Key, start?: Start, end?: End) {
+  const theme = useTheme();
+
+  const mediaUp = useMediaQuery(theme.breakpoints.up(key as Key));
+
+  const mediaDown = useMediaQuery(theme.breakpoints.down(key as Key));
+
+  const mediaBetween = useMediaQuery(theme.breakpoints.between(start as Start, end as End));
+
+  const mediaOnly = useMediaQuery(theme.breakpoints.only(key as Breakpoint));
+
+  if (query === 'up') {
+    return mediaUp;
+  }
+
+  if (query === 'down') {
+    return mediaDown;
+  }
+
+  if (query === 'between') {
+    return mediaBetween;
+  }
+
+  if (query === 'only') {
+    return mediaOnly;
+  }
+}
+
+// ----------------------------------------------------------------------
+
+type BreakpointOrNull = Breakpoint | null;
+
+export function useWidth() {
+  const theme = useTheme();
+
+  const keys = [...theme.breakpoints.keys].reverse();
+
+  return (
+    keys.reduce((output: BreakpointOrNull, key: Breakpoint) => {
+      const matches = useMediaQuery(theme.breakpoints.up(key));
+
+      return !output && matches ? key : output;
+    }, null) || 'xs'
+  );
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import OrderForm from '@form/index';
+import type { OrderFormProps } from '@form/index';
+
+export const OrderFormSdk: React.FC<OrderFormProps> = OrderForm;
+export type { OrderFormProps };

package/src/locales/cs.tsx

@@ -0,0 +1,139 @@
+const cs = {
+  and: 'a',
+  choose: 'Vyberte',
+  apply: 'Použít',
+  buy: 'Zakoupit',
+  add: 'Přidat',
+  confirm: 'Potvrdit',
+  cancel: 'Zrušit',
+  pay: 'Zaplatit',
+  change: 'Změnit',
+  back_to_tickets: 'Zpět na vstupenky',
+  unselected: 'Nevybráno',
+  go_home: 'Přejít na úvodní stránku',
+  apple_wallet: 'Stáhnout do Apple Wallet',
+  google_wallet: 'Stáhnout do Google Wallet',
+  shipping_method: {
+    types: {
+      PACKETA: 'Zásilkovna',
+      PICK_UP: 'Vyzvednutí na místě',
+    },
+  },
+  form: {
+    labels: {
+      release_category_price: 'Kategorie vstupenek a cena',
+      add_another_release: 'Přidat další kategorii',
+      quantity: 'Počet',
+      first_name: 'Jméno',
+      last_name: 'Příjmení',
+      email: 'E-mailová adresa',
+      phone: 'Telefon',
+      birthdate: 'Datum narození',
+      gender: 'Pohlaví',
+      male: 'Muž',
+      female: 'Žena',
+      other: 'Jiné',
+      promo_code: 'Slevový kód',
+      start_date: 'Datum konání',
+      organizer: 'Pořadatel',
+      total: 'Celkem ',
+      with_fee: 'vč. servisního poplatku',
+      service_fee: 'Servisní poplatek',
+      shipping_fee: 'Doprava',
+      price_including_service_fee: 'Cena zahrnuje servisní poplatek v hodnotě {{fee}}.',
+      price_including_service_fee_percentage:
+        'Cena zahrnuje servisní poplatek v výši {{percentage}} z celkové částky.',
+      terms_and_conditions: 'Souhlasím se zpracováním osobních údajů',
+      original_price: 'Původní cena',
+      ticket: 'Vstupenka',
+      category: 'Kategorie',
+    },
+    validation: {
+      required: 'Toto pole je povinné.',
+      email: 'E-mail musí být validní E-mailová adresa.',
+      phone: 'Telefon není validní.',
+      invalid_date: 'Datum není platné.',
+      terms_and_conditions: 'Musíte souhlasit s obchodními podmínkami.',
+      promo_code_invalid: 'Slevový kód není platný.',
+      count_tickets_or_products: 'Musíte vybrat alespoň 1 vstupenku nebo produkt.',
+    },
+  },
+  event: {
+    tickets: {
+      title: 'Vstupenky',
+      error: {
+        order: 'Objednávku se nepodařilo dokončit. Zkuste to prosím znovu.',
+      },
+      stepper: {
+        1: {
+          title: 'Výběr vstupenek',
+          reserve: 'vstupenky máte zarezervované ještě na {{minutes}}:{{seconds}}',
+          quantity_select: 'Nejdříve musíte vybrat kategorii',
+          max_ticket_quantity:
+            'Je povoleno zakoupit až 10 vstupenek na jednu osobu, s možností volby z různých kategorií.',
+          no_tickets: 'Pro tuto událost nejsou k dispozici žádné vstupenky.',
+          select_timeslot: 'Nejdříve musíte vybrat časový slot',
+        },
+        2: {
+          title: 'Kontaktní osoba',
+        },
+        3: {
+          title: 'Způsoby platby',
+          subtitle: 'Platební metody',
+        },
+        4: {
+          title: 'Produkty',
+        },
+        5: {
+          title: 'Způsob dopravy',
+          error:
+            'Pro tuto kombinaci produktů nejsou k dispozici žádné způsoby dopravy. Zkuste jinou kombinaci.',
+        },
+        6: {
+          title: 'Výběr časového slotu',
+        },
+        7: {
+          title: 'Přidružené eventy',
+        },
+      },
+      terms_and_conditions:
+        'Odesláním objednávky souhlasím s <0>Obchodními podmínkami</0> {{termsAndConditionsCompanies}} a beru na vědomí <1>Zásady soukromí</1>.',
+      order_success: {
+        title: 'Vstupenky byly úspěšně zarezervovány. Teď už zbývá jenom zaplatit.',
+        description:
+          'Odpočet běží {{countdown}}. Pokud k přesměrování nedojde automaticky, klikněte na tlačítko Zaplatit níže.',
+      },
+      payment_success: {
+        loading: 'Zpracováváme platbu. Ještě chvilku strpení... ⏳',
+        paid: {
+          status: 'Vaše platba byla schválena!',
+          title: 'Děkujeme za <br/> Váš nákup!',
+          subtitle:
+            'Na E-mail jsme Vám zaslali vstupenky. V případě problémů nás neváhejte kontaktovat.',
+          tickets: 'Vaše vstupenky',
+          button: 'Stáhnout vstupenku',
+          products: 'Vaše produkty',
+        },
+        unpaid: 'Platba neproběhla',
+        unpaid_description: 'Zkuste to prosím znovu kliknutím na tlačítko Zaplatit.',
+      },
+      payment_pending: 'Kontaktuji poskytovatele bankovních služeb...',
+      email_confirmation: {
+        title: 'Zkontrolujte prosím Vaši e-mailovou adresu, na kterou Vám zašleme vstupenky.',
+        description: '',
+      },
+      release_countdown: {
+        title: 'Předprodej již brzy!',
+        countdown:
+          '{{days}}d<span>:</span>{{hours}}h<span>:</span>{{minutes}}m<span>:</span>{{seconds}}s',
+      },
+    },
+  },
+  components: {
+    product_variant_dialog: {
+      select_variant: 'Musíte vybrat variantu produktu.',
+    },
+  },
+};
+
+export default cs;