@eventlook/sdk 1.4.46-beta.2 → 1.4.46-beta.3

package/src/form/tickets/TicketSelection.tsx

@@ -1,336 +0,0 @@
-import React, { useEffect, 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 { 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 TicketSelectionMobile from './TicketSelectionMobile';
-
-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 isProcessingRef = useRef(false);
-  const { data: activeReleases, mutate } = useEventActiveReleases(
-    event.id,
-    false,
-    event.type === EventType.RECURRING ? eventTimeslotId : undefined
-  );
-
-  const showLoading = !activeReleases && event.type !== EventType.RECURRING;
-
-  useEffect(() => {
-    if (!isProcessingRef.current) selectedTickets();
-  }, [tickets, activeReleases]);
-
-  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 | '', index: number) => {
-    if (!releaseId) return null;
-
-    const release = getRelease(releaseId);
-
-    if (!release || !release?.extraFields || release?.extraFields.length <= 0) return null;
-
-    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
-    const countTickets = addedRelease?.quantity || 0;
-    return (
-      <ReleaseExtraFields
-        release={release}
-        eventId={event.id}
-        releaseIndex={index}
-        quantity={countTickets}
-      />
-    );
-  };
-
-  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 + 1
-      );
-      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) || []
-    );
-
-    const hasSelectableRelease = activeReleases?.some(
-      (release) => !isReleaseSelected(release.id) && !release.locked
-    );
-
-    const shouldAddRow =
-      (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);
-
-    const shouldRemoveEmptyRows =
-      allFilled.length > 0 &&
-      tickets.length > 1 &&
-      !hasSelectableRelease &&
-      (!soldOutReleaseCategories?.length || !selectedReleaseIsSoldOut(releases));
-
-    if (shouldAddRow) {
-      isProcessingRef.current = true;
-      setValue(`tickets.${event.id}`, [
-        ...tickets,
-        {
-          releaseId: '',
-          quantity: '',
-          itemName: '',
-          price: 0,
-          products: [],
-          extraFields: [],
-        },
-      ]);
-      setTimeout(() => (isProcessingRef.current = false), 0);
-    } else if (shouldRemoveEmptyRows) {
-      // Only remove completely empty rows (no releaseId), keep rows where user started selecting
-      const nonEmptyTickets = tickets.filter((item) => item.releaseId);
-      if (nonEmptyTickets.length < tickets.length) {
-        isProcessingRef.current = true;
-        setValue(`tickets.${event.id}`, nonEmptyTickets);
-        setTimeout(() => (isProcessingRef.current = false), 0);
-      }
-    }
-  };
-
-  return (
-    <Stack
-      spacing={3}
-      direction="column"
-      divider={!isMobile ? <Divider sx={{ borderStyle: 'dashed' }} /> : undefined}
-    >
-      <TicketSelectionMobile
-        event={event}
-        activeReleases={activeReleases}
-        showLoading={showLoading}
-        soldOutReleaseCategoryNames={soldOutReleaseCategoryNames}
-        tickets={tickets}
-        isQuantityDisabled={isQuantityDisabled}
-        setValue={setValue as (name: string, value: any) => void}
-        removeTicket={removeTicket}
-        getExtraFields={getExtraFields}
-      />
-      {/* {isMobile ? (
-        <TicketSelectionMobile
-          event={event}
-          activeReleases={activeReleases}
-          showLoading={showLoading}
-          soldOutReleaseCategoryNames={soldOutReleaseCategoryNames}
-          tickets={tickets}
-          isQuantityDisabled={isQuantityDisabled}
-          setValue={setValue as (name: string, value: any) => void}
-          removeTicket={removeTicket}
-          getExtraFields={getExtraFields}
-        />
-      ) : (
-        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}:{' '}
-                        {activeRelease.price === 0
-                          ? t('free')
-                          : 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, index)}
-          </Box>
-        ))
-      )} */}
-      <Box>
-        <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
-          *{t('event.tickets.stepper.1.max_ticket_quantity')}
-        </Typography>
-      </Box>
-    </Stack>
-  );
-};
-
-export default TicketSelection;

package/src/form/tickets/TicketSelectionMap.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import useGlobal from '@hooks/useGlobal.ts';
-import { IEvent } from '@utils/types/event.type.ts';
-import { Button } from '@mui/material';
-import { iframe, TicketSelection } from '@seat-picker/seat-picker-sdk';
-import { useFormContext } from 'react-hook-form';
-import { ITicketForm, ITicketFormTicket, ITicketLocation } from '@utils/types/ticket.type.ts';
-
-interface Props {
-  event: IEvent;
-}
-
-const TicketSelectionMap: React.FC<Props> = ({ event }) => {
-  const { t, seatingIframeUrl } = useGlobal();
-  const { setValue, watch } = useFormContext<ITicketForm>();
-  const uuid = watch('uuid');
-
-  if (!uuid) return;
-
-  const onSelect = (seats: TicketSelection) => {
-    const tickets: ITicketFormTicket[] = [];
-    const groupedSeatsByZone = seats.reduce(
-      (tickets, seat) => {
-        const zoneIndex = tickets.findIndex((ticket) => ticket.seat.id === seat.locationId);
-        if (zoneIndex !== -1) {
-          tickets[zoneIndex].quantity += 1;
-        } else {
-          tickets.push({
-            seat: {
-              id: seat.locationId,
-              type: seat.locationType,
-              locationDescription: seat.locationTypeDescription,
-            },
-            quantity: 1,
-            ticket: seat.ticket,
-          });
-        }
-
-        return tickets;
-      },
-      // TODO: fix types
-      [] as { quantity: number; seat: ITicketLocation; ticket: any }[]
-    );
-
-    for (const groupedSeat of groupedSeatsByZone) {
-      tickets.push({
-        releaseId: groupedSeat.ticket.id,
-        price: groupedSeat.ticket.price,
-        quantity: groupedSeat.quantity,
-        itemName: `${groupedSeat.ticket.releaseCategoryName} - ${groupedSeat.ticket.name}`,
-        products: [],
-        extraFields: [],
-        location: {
-          id: groupedSeat.seat.id,
-          type: groupedSeat.seat.type,
-          locationDescription: groupedSeat.seat.locationDescription,
-        },
-      });
-    }
-
-    setValue(`tickets.${event.id}`, tickets);
-  };
-
-  if (!seatingIframeUrl) return null;
-
-  return (
-    <Button
-      variant="contained"
-      onClick={() =>
-        iframe.openPicker({
-          eventId: String(event.id),
-          onSelect,
-          baseUrl: seatingIframeUrl,
-          clientId: uuid,
-        })
-      }
-    >
-      {t('form.labels.open_map')}
-    </Button>
-  );
-};
-
-export default TicketSelectionMap;

package/src/form/tickets/TicketSelectionMobile.tsx

@@ -1,175 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Skeleton, Stack, Typography, useTheme } from '@mui/material';
-import { fCurrency } from '@utils/formatNumber';
-import { IEvent } from '@utils/types/event.type';
-import { IReleaseShort } from '@utils/types/release.type';
-import { ITicketFormTicket } from '@utils/types/ticket.type';
-import useGlobal from '@hooks/useGlobal';
-import ReleaseDescription from './ReleaseDescription';
-import TicketQuantityControl from './TicketQuantityControl';
-
-interface Props {
-  event: IEvent;
-  activeReleases?: IReleaseShort[];
-  showLoading: boolean;
-  soldOutReleaseCategoryNames: string[];
-  tickets: ITicketFormTicket[];
-  isQuantityDisabled: (value: number, releaseId: number | '') => boolean;
-  setValue: (name: string, value: any) => void;
-  removeTicket: (indexToRemove: number) => void;
-  getExtraFields: (releaseId: number | '', index: number) => React.ReactNode;
-}
-
-const TicketSelectionMobile: React.FC<Props> = ({
-  event,
-  activeReleases,
-  showLoading,
-  soldOutReleaseCategoryNames,
-  tickets,
-  isQuantityDisabled,
-  setValue,
-  removeTicket,
-  getExtraFields,
-}) => {
-  const { t, lang } = useGlobal();
-  const [expandedReleaseIds, setExpandedReleaseIds] = useState<Record<number, boolean>>({});
-  const theme = useTheme();
-  const isLight = theme.palette.mode === 'light';
-
-  const getReleaseTitle = (release: IReleaseShort) =>
-    release.releaseCategoryName || release.name || '';
-
-  const getTicketIndexByRelease = (releaseId: number) =>
-    tickets.findIndex((ticket) => ticket.releaseId === releaseId);
-
-  const getReleaseQuantity = (releaseId: number) => {
-    const ticket = tickets.find((t) => t.releaseId === releaseId);
-    return Number(ticket?.quantity || 0);
-  };
-
-  const updateReleaseQuantity = (release: IReleaseShort, nextQuantity: number) => {
-    const maxAvailable = Math.min(release.availableTickets || 0, 10);
-    const clampedQuantity = Math.max(0, Math.min(nextQuantity, maxAvailable));
-    const ticketIndex = getTicketIndexByRelease(release.id);
-
-    if (clampedQuantity <= 0) {
-      if (ticketIndex >= 0) removeTicket(ticketIndex);
-      return;
-    }
-
-    if (ticketIndex >= 0) {
-      setValue(`tickets.${event.id}.${ticketIndex}.quantity`, clampedQuantity);
-      return;
-    }
-
-    setValue(`tickets.${event.id}`, [
-      ...tickets,
-      {
-        releaseId: release.id,
-        quantity: clampedQuantity,
-        itemName: getReleaseTitle(release),
-        price: release.price || 0,
-        products: [],
-        extraFields: [],
-      },
-    ]);
-  };
-
-  const toggleReleaseDescription = (releaseId: number) =>
-    setExpandedReleaseIds((prev) => ({
-      ...prev,
-      [releaseId]: !prev[releaseId],
-    }));
-
-  if (showLoading) {
-    return (
-      <Stack spacing={2}>
-        {[...Array(2)].map((_, index) => (
-          <Skeleton
-            key={index}
-            variant="rounded"
-            sx={{
-              width: '100%',
-              height: (theme) => theme.spacing(12),
-            }}
-          />
-        ))}
-      </Stack>
-    );
-  }
-
-  return (
-    <Stack spacing={2}>
-      {activeReleases?.map((release) => {
-        const quantity = getReleaseQuantity(release.id);
-        const ticketIndex = getTicketIndexByRelease(release.id);
-        const maxAvailable = Math.min(release.availableTickets || 0, 10);
-        const isLocked =
-          release.locked && !soldOutReleaseCategoryNames.includes(release.releaseCategoryName);
-        const isDisabled = isLocked && quantity === 0;
-        const canAddFirst = maxAvailable > 0 && !isQuantityDisabled(1, release.id);
-        const canAddMore = quantity < maxAvailable && !isQuantityDisabled(quantity + 1, release.id);
-
-        return (
-          <Box
-            key={release.id}
-            sx={{
-              p: 1,
-              pb: 0,
-              borderRadius: 1,
-              bgcolor: (theme) => (isLight ? theme.palette.grey[100] : theme.palette.grey[800]),
-            }}
-          >
-            <Stack spacing={0}>
-              <Box>
-                <Typography variant="subtitle1" fontWeight={600}>
-                  {getReleaseTitle(release)}
-                </Typography>
-              </Box>
-
-              <Stack direction="row" alignItems="center" justifyContent="space-between">
-                <Stack>
-                  <Typography variant="body2">
-                    {release.price === 0
-                      ? t('free')
-                      : fCurrency(release.price, lang, event.currency)}
-                  </Typography>
-
-                  <ReleaseDescription
-                    description={release.description}
-                    isExpanded={Boolean(expandedReleaseIds[release.id])}
-                    onToggle={() => toggleReleaseDescription(release.id)}
-                    moreInfoLabel={t('more_info')}
-                  />
-                </Stack>
-
-                <TicketQuantityControl
-                  quantity={quantity}
-                  isDisabled={isDisabled}
-                  canAddFirst={canAddFirst}
-                  canAddMore={canAddMore}
-                  addLabel={t('add')}
-                  onDecrement={() => updateReleaseQuantity(release, quantity - 1)}
-                  onIncrement={() => updateReleaseQuantity(release, quantity + 1)}
-                  onAddFirst={() => updateReleaseQuantity(release, 1)}
-                />
-              </Stack>
-
-              <ReleaseDescription
-                description={release.description}
-                isExpanded={Boolean(expandedReleaseIds[release.id])}
-                onToggle={() => toggleReleaseDescription(release.id)}
-                moreInfoLabel={t('more_info')}
-                showCollapse
-              />
-
-              {ticketIndex >= 0 && getExtraFields(release.id, ticketIndex)}
-            </Stack>
-          </Box>
-        );
-      })}
-    </Stack>
-  );
-};
-
-export default TicketSelectionMobile;