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

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';
 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';
+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,85 @@ 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)}
                   </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)}{' '}
+                      - {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>
 
-                <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';
 
 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/locales/cs.tsx

@@ -112,7 +112,7 @@ const cs = {
           title: 'Přidružené eventy',
         },
         8: {
-          title: 'EventLook služby',
+          title: 'Dodatečné služby',
           additional_info: 'Více informací ke službám',
         },
       },

package/src/locales/en.tsx

@@ -112,7 +112,7 @@ const en = {
           title: 'Associated events',
         },
         8: {
-          title: 'EventLook services',
+          title: 'Additional services',
           additional_info: 'More information about services',
         },
       },

package/src/locales/es.tsx

@@ -112,7 +112,7 @@ const es = {
           title: 'Eventos asociados',
         },
         8: {
-          title: 'EventLook servicios',
+          title: 'Servicios adicionales',
           additional_info: 'Más información sobre los servicios',
         },
       },

package/src/locales/pl.tsx

@@ -112,7 +112,7 @@ const pl = {
           title: 'Powiązane wydarzenia',
         },
         8: {
-          title: 'EventLook usługi',
+          title: 'Usługi dodatkowe',
           additional_info: 'Więcej informacji o usługach',
         },
       },

package/src/locales/sk.tsx

@@ -112,7 +112,7 @@ const sk = {
           title: 'Pridružené eventy',
         },
         8: {
-          title: 'EventLook služby',
+          title: 'Dodatočné služby',
           additional_info: 'Viac informácií o službách',
         },
       },

package/src/locales/uk.tsx

@@ -112,7 +112,7 @@ const uk = {
           title: 'Пов’язані події',
         },
         8: {
-          title: 'EventLook послуги',
+          title: 'Додаткові послуги',
           additional_info: 'Додаткова інформація про послуги',
         },
       },

package/src/utils/data/ticket.ts

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