@eventlook/sdk 1.4.50 → 1.4.51

package/src/form/tickets/ReleaseWithMerchandise.tsx

@@ -8,6 +8,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { IEventProductForm } from '@utils/types/product.type';
 import { fCurrency } from '@utils/formatNumber';
 import { Currencies } from '@utils/data/currency';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
 import { getSelectedQuantityByVariant } from '@utils/product';
 import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
 import ReleaseDescription from '@form/tickets/ReleaseDescription';
@@ -43,10 +44,19 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
   const getSelectedQuantity = (id: number) =>
     tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;
 
+  const countSelectedTickets = () => {
+    let count = 0;
+    for (const ticket of tickets) {
+      count += Number(ticket.quantity || 0);
+    }
+
+    return count;
+  };
+
   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;
+    return availableQuantity > MAX_TICKETS_PER_ORDER ? MAX_TICKETS_PER_ORDER : availableQuantity;
   };
 
   const isMaxQuantity = (releaseId: number) => {
@@ -61,7 +71,17 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
       : productsToAdd
         ? [productsToAdd]
         : [];
-    const quantity = normalizedProducts.length ? normalizedProducts.length : 1;
+    const requestedQuantity = normalizedProducts.length ? normalizedProducts.length : 1;
+    const releaseMaxQuantity = Math.min(release.availableTickets || 0, MAX_TICKETS_PER_ORDER);
+    const remainingOrderCapacity = Math.max(0, MAX_TICKETS_PER_ORDER - countSelectedTickets());
+    const quantity = Math.min(requestedQuantity, releaseMaxQuantity, remainingOrderCapacity);
+
+    if (quantity <= 0) {
+      setOpenVariantDialog(null);
+      return;
+    }
+
+    const selectedProducts = normalizedProducts.slice(0, quantity);
     const extraFields = release.extraFields?.length
       ? Array.from({ length: quantity }, () =>
           release.extraFields!.map((field) => ({
@@ -78,7 +98,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
         quantity,
         itemName: '',
         price: 0,
-        products: normalizedProducts,
+        products: selectedProducts,
         extraFields,
       },
     ]);
@@ -95,9 +115,10 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
     if (addedRelease) {
       const increment = normalizedProducts.length ? normalizedProducts.length : 1;
       const maxQuantity = getAvailableTicketsForRelease(addedRelease);
+      const remainingOrderCapacity = Math.max(0, MAX_TICKETS_PER_ORDER - countSelectedTickets());
       const availableIncrement = Math.max(
         0,
-        Math.min(increment, maxQuantity - Number(addedRelease.quantity))
+        Math.min(increment, maxQuantity - Number(addedRelease.quantity), remainingOrderCapacity)
       );
       if (availableIncrement === 0) return;
 
@@ -158,6 +179,13 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
     }
   }, [tickets, release.id, setValue]);
 
+  const remainingOrderCapacity = Math.max(0, MAX_TICKETS_PER_ORDER - countSelectedTickets());
+  const nextRelease = activeReleases?.find(
+    (item) =>
+      item.releaseCategoryName === release.releaseCategoryName && item.order === release.order + 1
+  );
+  const hasSelectedNextRelease = !!nextRelease && getSelectedQuantity(nextRelease.id) > 0;
+
   return (
     <Box
       sx={{
@@ -173,7 +201,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
       <Stack spacing={0}>
         <Box>
           <Typography variant="subtitle2" fontWeight={700}>
-            {getReleaseTitle(release)}
+            {getReleaseTitle(release)} - {release.name}
           </Typography>
         </Box>
 
@@ -193,9 +221,11 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
 
           <TicketQuantityControl
             quantity={getSelectedQuantity(release.id)}
-            isDisabled={release.locked}
-            canAddFirst={!release.locked}
-            canAddMore={!isMaxQuantity(release.id)}
+            isDisabled={release.locked || hasSelectedNextRelease}
+            canAddFirst={!release.locked && !hasSelectedNextRelease && remainingOrderCapacity > 0}
+            canAddMore={
+              !isMaxQuantity(release.id) && !hasSelectedNextRelease && remainingOrderCapacity > 0
+            }
             addLabel={t('add')}
             onDecrement={() => decreaseQuantity()}
             onIncrement={() =>
@@ -229,6 +259,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
             selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
             eventId={eventId}
             canAddOnlyOneAtATime
+            maxSelectableQuantity={remainingOrderCapacity}
           />
         )}
       </Stack>

package/src/form/tickets/TicketSelection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+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';
@@ -9,6 +9,7 @@ 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.ts';
 import TicketSelectionMobile from './TicketSelectionMobile';
 
@@ -25,7 +26,6 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
     defaultValue: [],
   }) as ITicketFormTicket[];
   const eventTimeslotId = watch('eventTimeslotId');
-  const [soldOutReleaseCategoryNames, setSoldOutReleaseCategoryNames] = useState<string[]>([]);
   const isProcessingRef = useRef(false);
   const { data: activeReleases, mutate } = useEventActiveReleases(
     event.id,
@@ -68,7 +68,7 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
   // 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;
+  //   return availableQuantity > MAX_TICKETS_PER_ORDER ? MAX_TICKETS_PER_ORDER : availableQuantity;
   // };
 
   const countReleaseCategories = (): number => {
@@ -83,7 +83,15 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
           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;
+      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);
   };
@@ -102,8 +110,8 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
   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;
+      ? countSelectedTickets() + value - releaseSelected.quantity > MAX_TICKETS_PER_ORDER
+      : countSelectedTickets() + value > MAX_TICKETS_PER_ORDER;
   };
 
   const removeTicket = (indexToRemove: number) => {
@@ -113,21 +121,47 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
 
   const selectedTickets = async () => {
     const releases = await mutate();
+    const currentReleases = releases || activeReleases || [];
     const allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
 
-    const soldOutReleaseCategories = activeReleases?.filter((release) =>
+    const soldOutReleaseCategories = currentReleases.filter((release) =>
       tickets.find(
         (ticket) =>
           release.id === ticket.releaseId &&
-          ticket.quantity === release.availableTickets &&
-          release.availableTickets !== 10
+          Number(ticket.quantity) >= Math.min(release.availableTickets || 0, MAX_TICKETS_PER_ORDER)
       )
     );
-    setSoldOutReleaseCategoryNames(
-      soldOutReleaseCategories?.map((item) => item.releaseCategoryName) || []
-    );
 
-    const hasSelectableRelease = activeReleases?.some(
+    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
     );
 
@@ -136,9 +170,9 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
         selectedReleaseIsSoldOut(releases) &&
         tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
         !allFilled.length) ||
-      (activeReleases &&
-        soldOutReleaseCategories?.length &&
-        activeReleases?.length > tickets.length &&
+      (currentReleases.length &&
+        soldOutReleaseCategories.length &&
+        currentReleases.length > tickets.length &&
         tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
         !allFilled.length) ||
       (tickets.length < countReleaseCategories() && !allFilled.length);
@@ -184,7 +218,6 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
         event={event}
         activeReleases={activeReleases}
         showLoading={showLoading}
-        soldOutReleaseCategoryNames={soldOutReleaseCategoryNames}
         tickets={tickets}
         isQuantityDisabled={isQuantityDisabled}
         setValue={setValue as (name: string, value: any) => void}

package/src/form/tickets/TicketSelectionMap.tsx

@@ -5,6 +5,7 @@ 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';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
 import Iconify from '@components/iconify/Iconify';
 
 interface Props {
@@ -43,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: [],

package/src/form/tickets/TicketSelectionMobile.tsx

@@ -4,6 +4,7 @@ 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';
@@ -12,7 +13,6 @@ interface Props {
   event: IEvent;
   activeReleases?: IReleaseShort[];
   showLoading: boolean;
-  soldOutReleaseCategoryNames: string[];
   tickets: ITicketFormTicket[];
   isQuantityDisabled: (value: number, releaseId: number | '') => boolean;
   setValue: (name: string, value: any) => void;
@@ -24,7 +24,6 @@ const TicketSelectionMobile: React.FC<Props> = ({
   event,
   activeReleases,
   showLoading,
-  soldOutReleaseCategoryNames,
   tickets,
   isQuantityDisabled,
   setValue,
@@ -47,8 +46,11 @@ const TicketSelectionMobile: React.FC<Props> = ({
     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, 10);
+    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);
 
@@ -100,76 +102,84 @@ const TicketSelectionMobile: React.FC<Props> = ({
 
   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={{
-              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)}
+      {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)} - {release.name}
                   </Typography>
-
-                  <ReleaseDescription
-                    description={release.description}
-                    isExpanded={Boolean(expandedReleaseIds[release.id])}
-                    onToggle={() => toggleReleaseDescription(release.id)}
-                    moreInfoLabel={t('more_info')}
+                </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>
 
-                <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)}
+                <ReleaseDescription
+                  description={release.description}
+                  isExpanded={Boolean(expandedReleaseIds[release.id])}
+                  onToggle={() => toggleReleaseDescription(release.id)}
+                  moreInfoLabel={t('more_info')}
+                  showCollapse
                 />
-              </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>
-        );
-      })}
+                {ticketIndex >= 0 && getExtraFields(release.id, ticketIndex)}
+              </Stack>
+            </Box>
+          );
+        })}
     </Stack>
   );
 };

package/src/form/tickets/TicketWithMerchandiseSelection.tsx

@@ -8,6 +8,7 @@ import { IReleaseShort } from '@utils/types/release.type';
 import { IEvent } from '@utils/types/event.type';
 import ReleaseWithMerchandise from '@form/tickets/ReleaseWithMerchandise';
 import { EventType } from '@utils/data/event';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
 import useGlobal from '@hooks/useGlobal.ts';
 
 interface Props {
@@ -42,7 +43,15 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
           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;
+      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);
   };
@@ -53,33 +62,40 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
 
   const selectedTickets = async () => {
     const releases = await mutate();
+    const currentReleases = releases || activeReleases || [];
     const allFilled = tickets.filter((item) => !item.releaseId || !item.quantity);
 
-    const soldOutReleaseCategories = activeReleases?.filter((release) =>
+    const soldOutReleaseCategories = currentReleases.filter((release) =>
       tickets.find(
         (ticket) =>
           release.id === ticket.releaseId &&
-          ticket.quantity === release.availableTickets &&
-          release.availableTickets !== 10
+          Number(ticket.quantity) >= Math.min(release.availableTickets || 0, MAX_TICKETS_PER_ORDER)
       )
     );
 
     // Unlock next releases when current release is sold out
-    if (soldOutReleaseCategories?.length && activeReleases) {
+    if (currentReleases.length) {
       let hasChanges = false;
-      const updatedReleases = activeReleases.map((release) => {
-        // For each sold-out release, find and unlock the next one
-        const soldOutRelease = soldOutReleaseCategories.find(
-          (soldOut) =>
-            soldOut.releaseCategoryName === release.releaseCategoryName &&
-            soldOut.order === release.order - 1 &&
-            release.locked
+      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
         );
-        if (soldOutRelease) {
-          hasChanges = true;
-          return { ...release, locked: false };
-        }
-        return release;
+        const shouldUnlock = Number(previousTicket?.quantity || 0) >= previousMaxSelectable;
+
+        if (!shouldUnlock) return release;
+
+        hasChanges = true;
+        return { ...release, locked: false };
       });
 
       if (hasChanges) {
@@ -87,7 +103,7 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
       }
     }
 
-    const hasSelectableRelease = activeReleases?.some(
+    const hasSelectableRelease = currentReleases.some(
       (release) => !isReleaseSelected(release.id) && !release.locked
     );
 
@@ -96,9 +112,9 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
         selectedReleaseIsSoldOut(releases) &&
         tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
         !allFilled.length) ||
-      (activeReleases &&
-        soldOutReleaseCategories?.length &&
-        activeReleases?.length > tickets.length &&
+      (currentReleases.length &&
+        soldOutReleaseCategories.length &&
+        currentReleases.length > tickets.length &&
         tickets.length < soldOutReleaseCategories.length + countUnlockedReleases() &&
         !allFilled.length) ||
       (tickets.length < countReleaseCategories() && !allFilled.length);
@@ -145,16 +161,18 @@ const TicketWithMerchandiseSelection: React.FC<Props> = ({ event }) => {
           }}
         />
       ) : (
-        activeReleases?.map((release, index) => (
-          <ReleaseWithMerchandise
-            key={release.id}
-            eventId={event.id}
-            release={release}
-            activeReleases={activeReleases}
-            currency={event.currency}
-            index={index}
-          />
-        ))
+        activeReleases
+          ?.filter((release) => !release.locked || isReleaseSelected(release.id))
+          .map((release, index) => (
+            <ReleaseWithMerchandise
+              key={release.id}
+              eventId={event.id}
+              release={release}
+              activeReleases={activeReleases}
+              currency={event.currency}
+              index={index}
+            />
+          ))
       )}
       {!activeReleases && event.type === EventType.RECURRING && (
         <Typography variant="h5">{t('event.tickets.stepper.1.select_timeslot')}</Typography>

package/src/utils/data/ticket.ts

@@ -0,0 +1 @@
+export const MAX_TICKETS_PER_ORDER = 10;

package/dist/cjs/hooks/useFirstRender.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function useFirstRender() {
-    const firstRender = React.useRef(true);
-    React.useEffect(() => {
-        firstRender.current = false;
-    }, []);
-    return firstRender.current;
-}
-
-exports.useFirstRender = useFirstRender;
-//# sourceMappingURL=useFirstRender.js.map

package/dist/cjs/hooks/useFirstRender.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFirstRender.js","sources":["../../../src/hooks/useFirstRender.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\nexport function useFirstRender(): boolean {\n  const firstRender = useRef(true);\n\n  useEffect(() => {\n    firstRender.current = false;\n  }, []);\n\n  return firstRender.current;\n}\n"],"names":["useRef","useEffect"],"mappings":";;;;SAEgB,cAAc,GAAA;AAC5B,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAC,IAAI,CAAC;IAEhCC,eAAS,CAAC,MAAK;AACb,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK;KAC5B,EAAE,EAAE,CAAC;IAEN,OAAO,WAAW,CAAC,OAAO;AAC5B;;;;"}

package/dist/esm/hooks/useFirstRender.js

@@ -1,12 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-function useFirstRender() {
-    const firstRender = useRef(true);
-    useEffect(() => {
-        firstRender.current = false;
-    }, []);
-    return firstRender.current;
-}
-
-export { useFirstRender };
-//# sourceMappingURL=useFirstRender.js.map

package/dist/esm/hooks/useFirstRender.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFirstRender.js","sources":["../../../src/hooks/useFirstRender.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\nexport function useFirstRender(): boolean {\n  const firstRender = useRef(true);\n\n  useEffect(() => {\n    firstRender.current = false;\n  }, []);\n\n  return firstRender.current;\n}\n"],"names":[],"mappings":";;SAEgB,cAAc,GAAA;AAC5B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;IAEhC,SAAS,CAAC,MAAK;AACb,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK;KAC5B,EAAE,EAAE,CAAC;IAEN,OAAO,WAAW,CAAC,OAAO;AAC5B;;;;"}