@eventlook/sdk 1.4.49 → 1.4.51

package/src/form/product/ProductCard.tsx

@@ -22,6 +22,7 @@ import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
 import { getSelectedQuantityByVariant } from '@utils/product';
 import useGlobal from '@hooks/useGlobal.ts';
 import { fCurrency } from '@utils/formatNumber';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
 
 interface Props {
   eventProduct: IEventProduct;
@@ -100,7 +101,7 @@ const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise
 
   const onChangeSimpleProductQuantity = (nextQuantity: number) => {
     if (!simpleVariant) return;
-    if (nextQuantity < 0 || nextQuantity > 10) return;
+    if (nextQuantity < 0 || nextQuantity > MAX_TICKETS_PER_ORDER) return;
     if (
       nextQuantity > simpleProductQuantity &&
       nextQuantity - simpleProductQuantity > simpleProductMaxAvailable
@@ -153,7 +154,9 @@ const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise
         </Box>
         <IconButton
           onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity + 1)}
-          disabled={simpleProductQuantity >= 10 || simpleProductMaxAvailable <= 0}
+          disabled={
+            simpleProductQuantity >= MAX_TICKETS_PER_ORDER || simpleProductMaxAvailable <= 0
+          }
           sx={{
             flex: '1 1 0',
             height: 36,

package/src/form/product/ProductVariantsDialog.tsx

@@ -15,6 +15,7 @@ import { useWatch } from 'react-hook-form';
 import { ITicketFormTicket } from '@utils/types/ticket.type';
 import { IEventProductForm } from '@utils/types/product.type';
 import { fCurrency } from '@utils/formatNumber';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
 import useGlobal from '@hooks/useGlobal.ts';
 
 interface Props {
@@ -26,6 +27,7 @@ interface Props {
   selectedQuantityByVariant?: Record<number, number>;
   isOnlyMerchandise?: boolean;
   canAddOnlyOneAtATime?: boolean;
+  maxSelectableQuantity?: number;
 }
 
 const ProductVariantsDialog: React.FC<Props> = ({
@@ -37,6 +39,7 @@ const ProductVariantsDialog: React.FC<Props> = ({
   isOnlyMerchandise,
   eventId,
   canAddOnlyOneAtATime,
+  maxSelectableQuantity,
 }) => {
   const { t, lang, options } = useGlobal();
   const { showSnackbar } = useGlobal();
@@ -53,8 +56,14 @@ const ProductVariantsDialog: React.FC<Props> = ({
   }, [openDialog]);
 
   useEffect(() => {
-    if (openDialog) {
-      setDraftQuantities(canAddOnlyOneAtATime ? {} : (selectedQuantityByVariant ?? {}));
+    if (openDialog && canAddOnlyOneAtATime) {
+      setDraftQuantities({});
+    }
+  }, [openDialog, canAddOnlyOneAtATime]);
+
+  useEffect(() => {
+    if (openDialog && !canAddOnlyOneAtATime) {
+      setDraftQuantities(selectedQuantityByVariant ?? {});
     }
   }, [openDialog, selectedQuantityByVariant, canAddOnlyOneAtATime]);
 
@@ -126,11 +135,18 @@ const ProductVariantsDialog: React.FC<Props> = ({
       const current = prev[variant.id] ?? 0;
       const next = current + 1;
       const maxAvailable = getMaxAvailable(variant);
-      if (next > 10 || next > maxAvailable) return prev;
+
       if (canAddOnlyOneAtATime) {
-        // Only allow one variant to be selected
+        if (maxAvailable < 1) return prev;
         return { [variant.id]: 1 };
       }
+
+      const maxSelectable =
+        maxSelectableQuantity === undefined
+          ? MAX_TICKETS_PER_ORDER
+          : Math.max(0, Math.min(maxSelectableQuantity, MAX_TICKETS_PER_ORDER));
+
+      if (next > maxSelectable || next > maxAvailable) return prev;
       return { ...prev, [variant.id]: next };
     });
   };
@@ -248,7 +264,14 @@ const ProductVariantsDialog: React.FC<Props> = ({
             {eventProduct.eventProductVariants.map((variant) => {
               const draftQty = draftQuantities[variant.id] ?? 0;
               const maxAvailable = getMaxAvailable(variant);
-              const isAddDisabled = isVariantDisabled(variant) || maxAvailable <= 0;
+              const maxSelectable =
+                maxSelectableQuantity === undefined
+                  ? MAX_TICKETS_PER_ORDER
+                  : Math.max(0, Math.min(maxSelectableQuantity, MAX_TICKETS_PER_ORDER));
+              const isAddDisabled =
+                isVariantDisabled(variant) ||
+                maxAvailable <= 0 ||
+                (!canAddOnlyOneAtATime && maxSelectable <= 0);
               const isAnotherSelected =
                 canAddOnlyOneAtATime &&
                 Object.keys(draftQuantities).length > 0 &&
@@ -330,7 +353,7 @@ const ProductVariantsDialog: React.FC<Props> = ({
                           variant="contained"
                           onClick={() => handleAddQuantity(variant)}
                           aria-label={t('components.product_variant_dialog.increase_quantity')}
-                          disabled={draftQty >= 10 || draftQty >= maxAvailable}
+                          disabled={draftQty >= maxSelectable || draftQty >= maxAvailable}
                           sx={{ minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 }}
                         >
                           +

package/src/form/services/index.tsx

@@ -138,18 +138,18 @@ const Services: React.FC<Props> = ({ event }) => {
 
   return (
     <Stack spacing={1}>
-      <BorderedCheckbox
-        name="ticketInsurance"
-        disabled={false}
-        title={t('event.tickets.insurance.label')}
-        price={
-          <>
-            + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}
-            {t('event.tickets.insurance.per_ticket')}
-          </>
-        }
-        onChange={handleServiceChange}
-      />
+      {/*<BorderedCheckbox*/}
+      {/*  name="ticketInsurance"*/}
+      {/*  disabled={false}*/}
+      {/*  title={t('event.tickets.insurance.label')}*/}
+      {/*  price={*/}
+      {/*    <>*/}
+      {/*      + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
+      {/*      {t('event.tickets.insurance.per_ticket')}*/}
+      {/*    </>*/}
+      {/*  }*/}
+      {/*  onChange={handleServiceChange}*/}
+      {/*/>*/}
 
       <BorderedCheckbox
         name="smsNotification"
@@ -199,30 +199,30 @@ const Services: React.FC<Props> = ({ event }) => {
         </DialogTitle>
         <DialogContent sx={{ px: { xs: 3, sm: 4 }, pb: { xs: 4, sm: 5 } }}>
           <Stack spacing={3}>
-            <Box>
-              <Typography variant="subtitle2" fontWeight={700} gutterBottom>
-                {t('event.tickets.insurance.label')}
-              </Typography>
-              <Typography variant="body2" paragraph>
-                {t('event.tickets.insurance.modal.description')}
-              </Typography>
-              <Typography variant="body2" paragraph>
-                {t('event.tickets.insurance.modal.coverage')}
-              </Typography>
-              <BorderedCheckbox
-                name="ticketInsurance"
-                disabled={false}
-                title={t('event.tickets.insurance.label')}
-                price={
-                  <>
-                    + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}
-                    {t('event.tickets.insurance.per_ticket')}
-                  </>
-                }
-                onChange={handleServiceChange}
-              />
-            </Box>
-            <Divider />
+            {/*<Box>*/}
+            {/*  <Typography variant="subtitle2" fontWeight={700} gutterBottom>*/}
+            {/*    {t('event.tickets.insurance.label')}*/}
+            {/*  </Typography>*/}
+            {/*  <Typography variant="body2" paragraph>*/}
+            {/*    {t('event.tickets.insurance.modal.description')}*/}
+            {/*  </Typography>*/}
+            {/*  <Typography variant="body2" paragraph>*/}
+            {/*    {t('event.tickets.insurance.modal.coverage')}*/}
+            {/*  </Typography>*/}
+            {/*  <BorderedCheckbox*/}
+            {/*    name="ticketInsurance"*/}
+            {/*    disabled={false}*/}
+            {/*    title={t('event.tickets.insurance.label')}*/}
+            {/*    price={*/}
+            {/*      <>*/}
+            {/*        + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
+            {/*        {t('event.tickets.insurance.per_ticket')}*/}
+            {/*      </>*/}
+            {/*    }*/}
+            {/*    onChange={handleServiceChange}*/}
+            {/*  />*/}
+            {/*</Box>*/}
+            {/*<Divider />*/}
             <Box>
               <Typography variant="subtitle2" fontWeight={700} gutterBottom>
                 {t('event.tickets.sms_notification.label')}

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>
   );
 };