@eventlook/sdk 1.5.0-beta.6 → 1.5.0-beta.8

package/src/form/TicketSelection.tsx

@@ -1,307 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import {
-  Box,
-  Button,
-  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';
-
-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={<Divider sx={{ borderStyle: 'dashed' }} />}>
-      {tickets.map((item, index) => (
-        <Box key={index}>
-          <Grid container spacing={3}>
-            <Grid size={{ 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} size={{ 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>
-        {isMobile && <FeeBox event={event} align="right" />}
-      </Box>
-    </Stack>
-  );
-};
-
-export default TicketSelection;