@eventlook/sdk 1.4.0

package/src/form/TicketSelection.tsx

@@ -0,0 +1,274 @@
+import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import {
+  Box,
+  Divider,
+  Grid,
+  IconButton,
+  MenuItem,
+  Skeleton,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { RHFSelect } from '@components/hook-form';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import useEventActiveReleases from '@hooks/data/useEventActiveReleases';
+import { fCurrency } from '@utils/formatNumber';
+import { Iconify } from '@components/iconify';
+import { groupBy } from '@utils/global';
+import { IReleaseShort } from '@utils/types/release.type';
+import FeeBox from '@form/payment/FeeBox';
+import { IEvent } from '@utils/types/event.type';
+import useResponsive from '@hooks/useResponsive';
+import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
+import { EventType } from '@utils/data/event';
+import useGlobal from '@hooks/useGlobal.ts';
+import { isEqual } from 'lodash';
+
+interface Props {
+  event: IEvent;
+}
+
+const TicketSelection: React.FC<Props> = ({ event }) => {
+  const { t, lang } = useGlobal();
+  const isMobile = useResponsive('down', 'md');
+  const { setValue, watch } = useFormContext<ITicketForm>();
+  const tickets = useWatch({
+    name: `tickets.${event.id}`,
+    defaultValue: [],
+  }) as ITicketFormTicket[];
+  const eventTimeslotId = watch('eventTimeslotId');
+  const [soldOutReleaseCategoryNames, setSoldOutReleaseCategoryNames] = useState<string[]>([]);
+  const { data: activeReleases, mutate } = useEventActiveReleases(
+    event.id,
+    false,
+    event.type === EventType.RECURRING ? eventTimeslotId : undefined
+  );
+
+  const showLoading = !activeReleases && event.type !== EventType.RECURRING;
+
+  useEffect(() => {
+    selectedTickets();
+  }, [tickets]);
+
+  const isReleaseSelected = (id: number) => !!tickets.find((ticket) => ticket.releaseId === id);
+
+  const getRelease = (releaseId: number) => {
+    const release = activeReleases?.find((activeRelease) => activeRelease.id === releaseId);
+    return release ? release : null;
+  };
+
+  const getExtraFields = (releaseId: number | '') => {
+    if (!releaseId) return null;
+
+    const release = getRelease(releaseId);
+
+    if (!release || !release?.extraFields || release?.extraFields.length <= 0) return null;
+
+    return <ReleaseExtraFields release={release} eventId={event.id} />;
+  };
+
+  const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
+    const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
+    const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
+    return availableQuantity > 10 ? 10 : availableQuantity;
+  };
+
+  const countReleaseCategories = (): number => {
+    const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
+    return Object.keys(grouped).length;
+  };
+
+  const selectedReleaseIsSoldOut = (releases: IReleaseShort[] | undefined) => {
+    const lockedSelectedReleases: boolean[] | undefined = releases?.map((item, index) => {
+      const nextRelease = releases?.find(
+        (item2) =>
+          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order++
+      );
+      const selected = tickets.find((ticket) => ticket.releaseId === item.id);
+      return !!nextRelease && item.locked && !!selected && index + 1 == tickets.length;
+    });
+    return lockedSelectedReleases && lockedSelectedReleases.includes(true);
+  };
+
+  const countUnlockedReleases = () => activeReleases?.filter((item) => !item.locked).length || 0;
+
+  const countSelectedTickets = () => {
+    let count = 0;
+    for (const ticket of tickets) {
+      count += +ticket.quantity;
+    }
+
+    return count;
+  };
+
+  const isQuantityDisabled = (value: number, releaseId: number | '') => {
+    const releaseSelected = tickets.find((item) => item.releaseId === releaseId);
+    return releaseSelected && releaseSelected.quantity
+      ? countSelectedTickets() + value - releaseSelected.quantity > 10
+      : countSelectedTickets() + value > 10;
+  };
+
+  const removeTicket = (indexToRemove: number) => {
+    const activeReleases = tickets.filter((_ticket, index) => index !== indexToRemove);
+    setValue(`tickets.${event.id}`, activeReleases);
+  };
+
+  const selectedTickets = async () => {
+    const releases = await mutate();
+    const allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
+
+    const soldOutReleaseCategories = activeReleases?.filter((release) =>
+      tickets.find(
+        (ticket) =>
+          release.id === ticket.releaseId &&
+          ticket.quantity === release.availableTickets &&
+          release.availableTickets !== 10
+      )
+    );
+    setSoldOutReleaseCategoryNames(
+      soldOutReleaseCategories?.map((item) => item.releaseCategoryName) || []
+    );
+
+    if (
+      (soldOutReleaseCategories &&
+        selectedReleaseIsSoldOut(releases) &&
+        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
+        !allFilled.length) ||
+      (activeReleases &&
+        soldOutReleaseCategories?.length &&
+        activeReleases?.length > tickets.length &&
+        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
+        !allFilled.length) ||
+      (tickets.length < countReleaseCategories() && !allFilled.length)
+    ) {
+      setValue(`tickets.${event.id}`, [
+        ...tickets,
+        {
+          releaseId: '',
+          quantity: '',
+          itemName: '',
+          price: 0,
+          products: [],
+          extraFields: [],
+        },
+      ]);
+    }
+  };
+
+  return (
+    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
+      {tickets.map((item, index) => (
+        <Box key={index}>
+          <Grid container spacing={3}>
+            <Grid item xs={12} md={6}>
+              {showLoading ? (
+                <Skeleton
+                  variant="rounded"
+                  sx={{
+                    width: '100%',
+                    height: (theme) => theme.spacing(7.5),
+                  }}
+                />
+              ) : (
+                <RHFSelect
+                  name={`tickets.${event.id}.${index}.releaseId`}
+                  value={item.releaseId}
+                  label={
+                    index > 0
+                      ? t('form.labels.add_another_release')
+                      : t('form.labels.release_category_price')
+                  }
+                  maxHeight="calc(100vh - 2rem)"
+                  onChange={(e) => {
+                    setValue(`tickets.${event.id}.${index}.releaseId`, Number(e.target.value));
+                    setValue(`tickets.${event.id}.${index}.extraFields`, []);
+                  }}
+                >
+                  <MenuItem key={0} value="">
+                    {t('choose')}
+                  </MenuItem>
+                  {activeReleases?.map((activeRelease) => (
+                    <MenuItem
+                      key={activeRelease.id}
+                      value={activeRelease.id}
+                      disabled={
+                        isReleaseSelected(activeRelease.id) ||
+                        (activeRelease.locked &&
+                          !soldOutReleaseCategoryNames.includes(activeRelease.releaseCategoryName))
+                      }
+                    >
+                      {activeRelease.releaseCategoryName} - {activeRelease.name}:{' '}
+                      {fCurrency(activeRelease.price, lang, event.currency)}
+                    </MenuItem>
+                  ))}
+                </RHFSelect>
+              )}
+            </Grid>
+            <Grid key={index} item xs={12} md={6}>
+              {showLoading ? (
+                <Skeleton
+                  variant="rounded"
+                  sx={{
+                    width: '100%',
+                    height: (theme) => theme.spacing(7.5),
+                  }}
+                />
+              ) : (
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <RHFSelect
+                    name={`tickets.${event.id}.${index}.quantity`}
+                    value={item.quantity}
+                    label={t('form.labels.quantity')}
+                  >
+                    {[...Array(getAvailableTicketsForRelease(item))].map((_, index2) => (
+                      <MenuItem
+                        key={index2}
+                        value={index2 + 1}
+                        disabled={isQuantityDisabled(index2 + 1, item.releaseId)}
+                      >
+                        {index2 + 1}
+                      </MenuItem>
+                    ))}
+                    {!item.releaseId && (
+                      <MenuItem disabled sx={{ textTransform: 'unset!important' }}>
+                        {t('event.tickets.stepper.1.quantity_select')}
+                      </MenuItem>
+                    )}
+                  </RHFSelect>
+                  {item.releaseId && item.quantity && (
+                    <Box>
+                      <IconButton color="primary" onClick={() => removeTicket(index)}>
+                        <Iconify icon="carbon:trash-can" />
+                      </IconButton>
+                    </Box>
+                  )}
+                </Stack>
+              )}
+            </Grid>
+          </Grid>
+          {activeReleases && item.releaseId && (
+            <Typography
+              variant="caption"
+              content="div"
+              mt={2}
+              mb={getRelease(item.releaseId)?.extraFields?.length ? 2 : 0}
+              display="block"
+            >
+              {getRelease(item.releaseId)?.description ?? ''}
+            </Typography>
+          )}
+          {getExtraFields(item.releaseId)}
+        </Box>
+      ))}
+      <Box>
+        <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
+          *{t('event.tickets.stepper.1.max_ticket_quantity')}
+        </Typography>
+        {isMobile && <FeeBox event={event} align="right" />}
+      </Box>
+    </Stack>
+  );
+};
+
+export default TicketSelection;

package/src/form/TicketWithMerchandiseSelection.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { Box, Divider, Skeleton, Stack, Typography } from '@mui/material';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import useEventActiveReleases from '@hooks/data/useEventActiveReleases';
+import { groupBy } from '@utils/global';
+import { IReleaseShort } from '@utils/types/release.type';
+import FeeBox from '@form/payment/FeeBox';
+import { IEvent } from '@utils/types/event.type';
+import useResponsive from '@hooks/useResponsive';
+import ReleaseWithMerchandise from '@form/ReleaseWithMerchandise';
+import { EventType } from '@utils/data/event';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  event: IEvent;
+}
+
+const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
+  const { t } = useGlobal();
+  const isMobile = useResponsive('down', 'md');
+  const { setValue, watch } = useFormContext<ITicketForm>();
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${event.id}`, defaultValue: [] });
+  const eventTimeslotId = watch('eventTimeslotId');
+  const { data: activeReleases, mutate } = useEventActiveReleases(
+    event.id,
+    false,
+    event.type === EventType.RECURRING ? eventTimeslotId : undefined
+  );
+
+  useEffect(() => {
+    selectedTickets();
+  }, [tickets]);
+
+  const countReleaseCategories = (): number => {
+    const grouped = groupBy(activeReleases || [], 'releaseCategoryName');
+    return Object.keys(grouped).length;
+  };
+
+  const selectedReleaseIsSoldOut = (releases: IReleaseShort[] | undefined) => {
+    const lockedSelectedReleases: boolean[] | undefined = releases?.map((item, index) => {
+      const nextRelease = releases?.find(
+        (item2) =>
+          item2.releaseCategoryName === item.releaseCategoryName && item2.order === item.order++
+      );
+      const selected = tickets.find((ticket) => ticket.releaseId === item.id);
+      return !!nextRelease && item.locked && !!selected && index + 1 == tickets.length;
+    });
+    return lockedSelectedReleases && lockedSelectedReleases.includes(true);
+  };
+
+  const countUnlockedReleases = () => activeReleases?.filter((item) => !item.locked).length || 0;
+
+  const selectedTickets = async () => {
+    const releases = await mutate();
+    const allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
+
+    const soldOutReleaseCategories = activeReleases?.filter((release) =>
+      tickets.find(
+        (ticket) =>
+          release.id === ticket.releaseId &&
+          ticket.quantity === release.availableTickets &&
+          release.availableTickets !== 10
+      )
+    );
+
+    if (
+      (soldOutReleaseCategories &&
+        selectedReleaseIsSoldOut(releases) &&
+        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
+        !allFilled.length) ||
+      (activeReleases &&
+        soldOutReleaseCategories?.length &&
+        activeReleases?.length > tickets.length &&
+        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
+        !allFilled.length) ||
+      (tickets.length < countReleaseCategories() && !allFilled.length)
+    ) {
+      setValue(`tickets.${event.id}`, [
+        ...tickets,
+        {
+          releaseId: '',
+          quantity: '',
+          itemName: '',
+          price: 0,
+          products: [],
+          extraFields: [],
+        },
+      ]);
+    }
+  };
+
+  return (
+    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
+      {!activeReleases && event.type !== EventType.RECURRING ? (
+        <Skeleton
+          variant="rounded"
+          sx={{
+            width: '100%',
+            height: (theme) => theme.spacing(7.5),
+          }}
+        />
+      ) : (
+        activeReleases?.map((release) => (
+          <ReleaseWithMerchandise
+            key={release.id}
+            eventId={event.id}
+            release={release}
+            activeReleases={activeReleases}
+            currency={event.currency}
+          />
+        ))
+      )}
+      {!activeReleases && event.type === EventType.RECURRING && (
+        <Typography variant="h5">{t('event.tickets.stepper.1.select_timeslot')}</Typography>
+      )}
+      {!!activeReleases && !activeReleases.length && (
+        <Typography variant="h5">{t('event.tickets.stepper.1.no_tickets')}</Typography>
+      )}
+      <Box>
+        <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
+          *{t('event.tickets.stepper.1.max_ticket_quantity')}
+        </Typography>
+        {isMobile && <FeeBox event={event} align="right" />}
+      </Box>
+    </Stack>
+  );
+};
+
+export default TicketWithMerchandiseSelection;

package/src/form/TimeslotSelection.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { IEvent } from '@utils/types/event.type';
+import useEventTimeslots from '@hooks/data/useEventTimeslots';
+import { Box, Button, Divider, Stack } from '@mui/material';
+import dayjs, { Dayjs } from 'dayjs';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { ITicketForm } from '@utils/types/ticket.type';
+import TimeslotCalendar from '@form/timeslot/TimeslotCalendar';
+import CustomSkeleton from '@components/CustomSkeleton';
+
+interface Props {
+  event: IEvent;
+}
+
+const TimeslotSelection: React.FC<Props> = ({ event }) => {
+  const { watch, setValue } = useFormContext<ITicketForm>();
+  const selectedDate = watch('selectedDate');
+  const eventTimeslotId: number | null = useWatch({ name: 'eventTimeslotId' });
+  const [activeMonth, setActiveMonth] = useState<Dayjs | null>(null);
+  const [totalTimeslots, setTotalTimeslots] = useState<number | null>(null);
+  const filters = useMemo(
+    () => ({
+      startDate: activeMonth?.toISOString(),
+    }),
+    [activeMonth]
+  );
+  const { data, meta } = useEventTimeslots(event.id, filters);
+
+  useEffect(() => {
+    if (!!data && data.length > 0) {
+      setActiveMonth(dayjs(data[0].date).startOf('month'));
+    }
+    if (!totalTimeslots && meta?.total) {
+      setTotalTimeslots(meta?.total);
+    }
+  }, [data, meta]);
+
+  useEffect(() => {
+    if (
+      !!data &&
+      data.length > 0 &&
+      !dayjs(activeMonth).startOf('month').isSame(dayjs(data[0].date).startOf('month'))
+    ) {
+      setActiveMonth(dayjs(data[0].date).tz('Europe/Prague').startOf('month'));
+    }
+  }, [activeMonth, data]);
+
+  useEffect(() => {
+    const activeDate = data?.find((timeslot) => timeslot.date === selectedDate);
+    if (activeDate && activeDate.timeslots.length === 1) {
+      setValue('eventTimeslotId', activeDate.timeslots[0].id);
+    } else {
+      setValue('eventTimeslotId', null);
+    }
+  }, [selectedDate]);
+
+  useEffect(() => {
+    if (eventTimeslotId && !selectedDate && data.length) {
+      const activeDate = data?.find((item) =>
+        item.timeslots.some((timeslot) => timeslot.id === eventTimeslotId)
+      );
+      if (activeDate) setValue('selectedDate', activeDate?.date);
+    }
+  }, [eventTimeslotId, data]);
+
+  return (
+    <Box marginBottom={4}>
+      {!!totalTimeslots && totalTimeslots > 6 ? (
+        <TimeslotCalendar
+          selectedDay={selectedDate}
+          selectedDays={data?.map((timeslot) => timeslot.date) || []}
+          setSelectedDate={(date) => setValue('selectedDate', date)}
+          disableUnselectedDays
+          activeMonth={activeMonth || undefined}
+          setActiveMonth={setActiveMonth}
+        />
+      ) : (
+        <Stack direction="row" flexWrap="wrap" useFlexGap spacing={2}>
+          {!totalTimeslots
+            ? [...Array(6)].map((_, index) => (
+                <CustomSkeleton
+                  key={index}
+                  height={48}
+                  sx={{
+                    width: { xs: '100%', sm: '31%' },
+                  }}
+                />
+              ))
+            : data?.map((timeslot) => (
+                <Button
+                  key={timeslot.date}
+                  variant={selectedDate === timeslot.date ? 'contained' : 'outlined'}
+                  size="large"
+                  onClick={() => setValue('selectedDate', timeslot.date)}
+                  sx={{ width: { xs: '100%', sm: 'auto' } }}
+                >
+                  {dayjs(timeslot.date).format('dddd DD.MM.YYYY')}
+                </Button>
+              ))}
+        </Stack>
+      )}
+      {selectedDate && (
+        <>
+          <Divider sx={{ my: 2, borderStyle: 'dashed' }} />
+          <Stack direction="row" flexWrap="wrap" useFlexGap mt={2} spacing={1}>
+            {data
+              ?.find((timeslot) => timeslot.date === selectedDate)
+              ?.timeslots.map((timeslot) => (
+                <Button
+                  key={timeslot.id}
+                  variant={eventTimeslotId === timeslot.id ? 'contained' : 'outlined'}
+                  onClick={() => setValue('eventTimeslotId', timeslot.id)}
+                  disabled={timeslot.isSoldOut}
+                >
+                  {dayjs(timeslot.startDate).format('HH:mm')}
+                </Button>
+              ))}
+          </Stack>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default TimeslotSelection;

package/src/form/extra-field/ExtraField.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ExtraFieldValueTypes } from '@utils/data/extra-field';
+import { RHFSelect, RHFTextField } from '@components/hook-form';
+import { getTranslation } from '@utils/translation';
+import { MenuItem } from '@mui/material';
+import { IEventExtraField } from '@utils/types/extra-field.type';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  extraField: IEventExtraField;
+  name: `extraFields.${number}.value` | `tickets.${number}.extraFields.${number}.${number}.value`;
+  size?: 'small' | 'medium';
+}
+
+const ExtraField: React.FC<Props> = ({ extraField, name, size }) => {
+  const { lang } = useGlobal();
+
+  return (
+    <>
+      {extraField.valueType === ExtraFieldValueTypes.OPTIONS ? (
+        <RHFSelect
+          name={name}
+          label={getTranslation(extraField.name.translationValues, lang)}
+          size={size}
+        >
+          {extraField.options.map((option) => (
+            <MenuItem key={option.id} value={option.id}>
+              {getTranslation(option.name.translationValues, lang)}
+            </MenuItem>
+          ))}
+        </RHFSelect>
+      ) : (
+        <RHFTextField
+          name={name}
+          label={getTranslation(extraField.name.translationValues, lang)}
+          type={extraField.valueType === ExtraFieldValueTypes.NUMBER ? 'number' : 'text'}
+          inputMode={extraField.valueType === ExtraFieldValueTypes.NUMBER ? 'numeric' : 'text'}
+          size={size}
+        />
+      )}
+    </>
+  );
+};
+
+export default ExtraField;

package/src/form/extra-field/ReleaseExtraFields.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { Box, Grid, Stack, Typography } from '@mui/material';
+import ExtraField from '@form/extra-field/ExtraField';
+import { IReleaseShort } from '@utils/types/release.type';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { IExtraFieldForm } from '@utils/types/extra-field.type';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  release: IReleaseShort;
+  eventId: number;
+}
+
+const ReleseExtraFields: React.FC<Props> = ({ release, eventId }) => {
+  const { t } = useGlobal();
+  const { setValue } = useFormContext<ITicketForm>();
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
+  const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+  const countTickets = addedRelease?.quantity || 0;
+  const releaseIndex = tickets.findIndex((ticket) => ticket.releaseId === release.id);
+
+  useEffect(() => {
+    if (release.extraFields && release.extraFields.length !== addedRelease?.extraFields.length) {
+      const newExtraFields: IExtraFieldForm[][] = [];
+      for (let i = 0; i < release.extraFields.length; i++) {
+        newExtraFields.push(
+          release.extraFields.map((field) => ({ eventExtraFieldId: field.id, value: '' }))
+        );
+      }
+      setValue(`tickets.${eventId}.${releaseIndex}.extraFields`, newExtraFields);
+    }
+  }, [tickets]);
+
+  return (
+    <Stack spacing={2}>
+      {[...Array(countTickets)].map((_, index) => (
+        <Stack key={index} spacing={1}>
+          <Typography variant="body1" fontWeight={700}>
+            {index + 1}. {t('form.labels.ticket')}
+          </Typography>
+          <Box>
+            <Grid container spacing={3}>
+              {release?.extraFields?.map((field, index2) => (
+                <Grid key={field.id} item xs={12} md={6}>
+                  <ExtraField
+                    extraField={field}
+                    name={`tickets.${releaseIndex}.extraFields.${index}.${index2}.value`}
+                    size="small"
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          </Box>
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+
+export default ReleseExtraFields;