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

package/src/form/tickets/TicketQuantityControl.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Box, Button, IconButton, Stack } from '@mui/material';
+import { Iconify } from '@components/iconify';
+import useGlobal from '@hooks/useGlobal';
+
+interface TicketQuantityControlProps {
+  quantity: number;
+  isDisabled: boolean;
+  canAddFirst: boolean;
+  canAddMore: boolean;
+  addLabel: string;
+  onDecrement: () => void;
+  onIncrement: () => void;
+  onAddFirst: () => void;
+}
+
+const TicketQuantityControl: React.FC<TicketQuantityControlProps> = ({
+  quantity,
+  isDisabled,
+  canAddFirst,
+  canAddMore,
+  addLabel,
+  onDecrement,
+  onIncrement,
+  onAddFirst,
+}) => {
+  const { t } = useGlobal();
+
+  if (quantity > 0) {
+    return (
+      <Stack direction="row" spacing={{ xs: 0.5, md: 1 }} alignItems="center">
+        <IconButton
+          onClick={onDecrement}
+          aria-label={t('form.labels.ticket_quantity_decrease')}
+          disabled={isDisabled || quantity <= 0}
+          sx={{
+            width: { xs: 36, md: 40 },
+            height: { xs: 36, md: 40 },
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'grey.300',
+          }}
+        >
+          <Iconify icon="eva:minus-fill" />
+        </IconButton>
+        <Box
+          sx={{
+            width: { xs: 36, md: 40 },
+            height: { xs: 36, md: 40 },
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'grey.300',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 600,
+          }}
+        >
+          {quantity}
+        </Box>
+        <IconButton
+          onClick={onIncrement}
+          aria-label={t('form.labels.ticket_quantity_increase')}
+          disabled={isDisabled || !canAddMore}
+          sx={{
+            width: { xs: 36, md: 40 },
+            height: { xs: 36, md: 40 },
+            borderRadius: 1,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            '&:hover': { bgcolor: 'primary.dark' },
+          }}
+        >
+          <Iconify icon="eva:plus-fill" />
+        </IconButton>
+      </Stack>
+    );
+  }
+
+  return (
+    <Button
+      variant="contained"
+      onClick={onAddFirst}
+      aria-label={addLabel}
+      disabled={isDisabled || !canAddFirst}
+      sx={{
+        height: { xs: 36, md: 40 },
+        width: { xs: 116, md: 136 },
+        borderRadius: 1,
+        px: 3,
+        textTransform: 'none',
+        fontWeight: 600,
+      }}
+    >
+      {addLabel}
+    </Button>
+  );
+};
+
+export default TicketQuantityControl;

package/src/form/tickets/TicketSelection.tsx

@@ -0,0 +1,236 @@
+import React, { useEffect, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { Box, Divider, 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 { 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 { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
+import useGlobal from '@hooks/useGlobal';
+import TicketSelectionMobile from './TicketSelectionMobile';
+
+interface Props {
+  event: IEvent;
+}
+
+const TicketSelection: React.FC<Props> = ({ event }) => {
+  const { t } = 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 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 > MAX_TICKETS_PER_ORDER ? MAX_TICKETS_PER_ORDER : 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);
+      const maxSelectable = Math.min(item.availableTickets || 0, MAX_TICKETS_PER_ORDER);
+
+      return (
+        !!nextRelease &&
+        item.locked &&
+        !!selected &&
+        Number(selected.quantity) >= maxSelectable &&
+        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 > MAX_TICKETS_PER_ORDER
+      : countSelectedTickets() + value > MAX_TICKETS_PER_ORDER;
+  };
+
+  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 currentReleases = releases || activeReleases || [];
+    const allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
+
+    const soldOutReleaseCategories = currentReleases.filter((release) =>
+      tickets.find(
+        (ticket) =>
+          release.id === ticket.releaseId &&
+          Number(ticket.quantity) >= Math.min(release.availableTickets || 0, MAX_TICKETS_PER_ORDER)
+      )
+    );
+
+    if (currentReleases.length) {
+      let hasChanges = false;
+      const updatedReleases = currentReleases.map((release) => {
+        const previousRelease = currentReleases.find(
+          (item) =>
+            item.releaseCategoryName === release.releaseCategoryName &&
+            item.order === release.order - 1
+        );
+
+        if (!release.locked || !previousRelease) return release;
+
+        const previousTicket = tickets.find((ticket) => ticket.releaseId === previousRelease.id);
+        const previousMaxSelectable = Math.min(
+          previousRelease.availableTickets || 0,
+          MAX_TICKETS_PER_ORDER
+        );
+        const shouldUnlock = Number(previousTicket?.quantity || 0) >= previousMaxSelectable;
+
+        if (!shouldUnlock) return release;
+
+        hasChanges = true;
+        return { ...release, locked: false };
+      });
+
+      if (hasChanges) {
+        await mutate(updatedReleases, false);
+      }
+    }
+
+    const hasSelectableRelease = currentReleases.some(
+      (release) => !isReleaseSelected(release.id) && !release.locked
+    );
+
+    const shouldAddRow =
+      (soldOutReleaseCategories &&
+        selectedReleaseIsSoldOut(releases) &&
+        tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
+        !allFilled.length) ||
+      (currentReleases.length &&
+        soldOutReleaseCategories.length &&
+        currentReleases.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}
+        tickets={tickets}
+        isQuantityDisabled={isQuantityDisabled}
+        setValue={setValue as (name: string, value: any) => void}
+        removeTicket={removeTicket}
+        getExtraFields={getExtraFields}
+      />
+      <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/{TicketSelectionMap.tsx → tickets/TicketSelectionMap.tsx}

@@ -5,6 +5,8 @@ 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';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
+import Iconify from '@components/iconify/Iconify';
 
 interface Props {
   event: IEvent;
@@ -42,11 +44,18 @@ const TicketSelectionMap: React.FC<Props> = ({ event }) => {
       [] as { quantity: number; seat: ITicketLocation; ticket: any }[]
     );
 
+    let remainingTicketCapacity = MAX_TICKETS_PER_ORDER;
+
     for (const groupedSeat of groupedSeatsByZone) {
+      if (remainingTicketCapacity <= 0) break;
+
+      const quantity = Math.min(groupedSeat.quantity, remainingTicketCapacity);
+      remainingTicketCapacity -= quantity;
+
       tickets.push({
         releaseId: groupedSeat.ticket.id,
         price: groupedSeat.ticket.price,
-        quantity: groupedSeat.quantity,
+        quantity,
         itemName: `${groupedSeat.ticket.releaseCategoryName} - ${groupedSeat.ticket.name}`,
         products: [],
         extraFields: [],
@@ -65,7 +74,7 @@ const TicketSelectionMap: React.FC<Props> = ({ event }) => {
 
   return (
     <Button
-      variant="contained"
+      variant="outlined"
       onClick={() =>
         iframe.openPicker({
           eventId: String(event.id),
@@ -74,6 +83,13 @@ const TicketSelectionMap: React.FC<Props> = ({ event }) => {
           clientId: uuid,
         })
       }
+      sx={{
+        width: { xs: '100%' },
+        color: 'text.primary',
+        borderColor: (theme) => theme.palette.grey['300'],
+        '& .MuiButton-endIcon': { ml: 0, fontSize: '1.5em' },
+      }}
+      endIcon={<Iconify icon="eva:chevron-right-outline" />}
     >
       {t('form.labels.open_map')}
     </Button>

package/src/form/tickets/TicketSelectionMobile.tsx

@@ -0,0 +1,188 @@
+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 { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
+import useGlobal from '@hooks/useGlobal';
+import ReleaseDescription from './ReleaseDescription';
+import TicketQuantityControl from './TicketQuantityControl';
+
+interface Props {
+  event: IEvent;
+  activeReleases?: IReleaseShort[];
+  showLoading: boolean;
+  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,
+  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 isReleaseVisible = (release: IReleaseShort) =>
+    !release.locked || getReleaseQuantity(release.id) > 0;
+
+  const updateReleaseQuantity = (release: IReleaseShort, nextQuantity: number) => {
+    const maxAvailable = Math.min(release.availableTickets || 0, MAX_TICKETS_PER_ORDER);
+    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
+        ?.filter((release) => isReleaseVisible(release))
+        .map((release) => {
+          const quantity = getReleaseQuantity(release.id);
+          const ticketIndex = getTicketIndexByRelease(release.id);
+          const maxAvailable = Math.min(release.availableTickets || 0, MAX_TICKETS_PER_ORDER);
+          const isLocked = release.locked;
+          const nextRelease = activeReleases?.find(
+            (item) =>
+              item.releaseCategoryName === release.releaseCategoryName &&
+              item.order === release.order + 1
+          );
+          const hasSelectedNextRelease = !!nextRelease && getReleaseQuantity(nextRelease.id) > 0;
+          const isDisabled = hasSelectedNextRelease || (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={{
+                pt: 1,
+                pr: 0.5,
+                pb: 0.5,
+                pl: 2,
+                borderRadius: 1,
+                bgcolor: (theme) => (isLight ? theme.palette.grey[100] : theme.palette.grey[800]),
+              }}
+            >
+              <Stack spacing={0}>
+                <Box>
+                  <Typography variant="subtitle2" fontWeight={700}>
+                    {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)}{' '}
+                      - {release.name}
+                    </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;