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

package/dist/types/form/product/ProductVariantsDialog.d.ts

@@ -10,6 +10,7 @@ interface Props {
     selectedQuantityByVariant?: Record<number, number>;
     isOnlyMerchandise?: boolean;
     canAddOnlyOneAtATime?: boolean;
+    maxSelectableQuantity?: number;
 }
 declare const ProductVariantsDialog: React.FC<Props>;
 export default ProductVariantsDialog;

package/dist/types/form/tickets/TicketSelectionMobile.d.ts

@@ -6,7 +6,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;

package/dist/types/utils/data/ticket.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventlook/sdk",
-  "version": "1.5.0-beta.7",
+  "version": "1.5.0-beta.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",

package/src/form/PaymentOverviewDrawer.tsx

@@ -1,6 +1,5 @@
 import { Box, Button, SwipeableDrawer, Typography } from '@mui/material';
-import React, { useEffect } from 'react';
-import { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PaymentOverviewBox from './PaymentOverviewBox';
 import { IEvent } from '@utils/types/event.type';
 import useGlobal from '@hooks/useGlobal';

package/src/form/Shipping.tsx

@@ -136,90 +136,89 @@ const Shipping: React.FC<Props> = ({ event }) => {
                 {t('event.tickets.stepper.5.error')}
               </Typography>
             ) : (
-              <>
-                <Controller
-                  name="shipping.shippingMethodId"
-                  control={control}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl component="fieldset" sx={{ width: '100%' }}>
-                      <RadioGroup
-                        {...field}
-                        onChange={(event, value) => {
-                          field.onChange(event);
-                          const selectedShippingMethod = filteredShippingMethods.find(
-                            (method) => method.id === Number(value)
-                          );
+              <Controller
+                name="shipping.shippingMethodId"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl component="fieldset" sx={{ width: '100%' }}>
+                    <RadioGroup
+                      {...field}
+                      onChange={(event, value) => {
+                        field.onChange(event);
+                        const selectedShippingMethod = filteredShippingMethods.find(
+                          (method) => method.id === Number(value)
+                        );
 
-                          if (selectedShippingMethod?.type === ShippingTypes.PACKETA) {
-                            openPacketaWidget();
-                          }
-                        }}
-                      >
-                        {filteredShippingMethods.map((shippingMethod) => (
-                          <ShippingMethodItem
-                            key={shippingMethod.id}
-                            active={Number(shippingMethodId) === shippingMethod.id}
-                            hasError={!!error}
-                            sx={{
-                              '& .MuiFormControlLabel-labelPlacementEnd': {
-                                mr: 0,
-                                width: '100%',
-                              },
-                            }}
-                          >
-                            <FormControlLabel
-                              value={shippingMethod.id}
-                              control={<Radio />}
-                              label={
-                                <Stack
-                                  direction="row"
-                                  justifyContent="space-between"
-                                  alignItems="center"
-                                  width="100%"
-                                >
-                                  <Stack direction="column">
-                                    <Stack direction="row" alignItems="center" spacing={1}>
-                                      <Typography sx={{ lineHeight: 1.2 }}>
-                                        {t(`shipping_method.types.${shippingMethod.type}`)}
-                                      </Typography>
-                                      {paymentImages[shippingMethod.type]}
-                                    </Stack>
-                                    {displayBranchName &&
-                                      shippingMethod.type === ShippingTypes.PACKETA &&
-                                      shippingMethod.id === Number(shippingMethodId) && (
-                                        <Typography variant="caption" sx={{ lineHeight: 1 }}>
-                                          {displayBranchName}
-                                        </Typography>
-                                      )}
+                        if (selectedShippingMethod?.type === ShippingTypes.PACKETA) {
+                          openPacketaWidget();
+                        }
+                      }}
+                    >
+                      {filteredShippingMethods.map((shippingMethod) => (
+                        <ShippingMethodItem
+                          key={shippingMethod.id}
+                          active={Number(shippingMethodId) === shippingMethod.id}
+                          hasError={!!error}
+                          sx={{
+                            '& .MuiFormControlLabel-labelPlacementEnd': {
+                              mr: 0,
+                              width: '100%',
+                            },
+                          }}
+                        >
+                          <FormControlLabel
+                            value={shippingMethod.id}
+                            control={<Radio />}
+                            label={
+                              <Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center"
+                                width="100%"
+                              >
+                                <Stack direction="column">
+                                  <Stack direction="row" alignItems="center" spacing={1}>
+                                    <Typography sx={{ lineHeight: 1.2 }}>
+                                      {t(`shipping_method.types.${shippingMethod.type}`)}
+                                    </Typography>
+                                    {paymentImages[shippingMethod.type]}
                                   </Stack>
-                                  {shippingMethod.type === ShippingTypes.PACKETA &&
+                                  {displayBranchName &&
+                                    shippingMethod.type === ShippingTypes.PACKETA &&
                                     shippingMethod.id === Number(shippingMethodId) && (
-                                      <Box>
-                                        <Button
-                                          onClick={handleChangeBranch}
-                                          variant="outlined"
-                                          size="small"
-                                          sx={{ px: 1, whiteSpace: 'nowrap' }}
-                                        >
-                                          {t('event.tickets.shipping.choose_address')}
-                                        </Button>
-                                      </Box>
+                                      <Typography variant="caption" sx={{ lineHeight: 1 }}>
+                                        {displayBranchName}
+                                      </Typography>
                                     )}
                                 </Stack>
-                              }
-                              sx={{
-                                '&:not(:last-of-type)': {
-                                  mb: 0,
-                                },
-                                '& .MuiFormControlLabel-label': {
-                                  width: '100%',
-                                  mr: 0,
-                                },
-                              }}
-                            />
-                          </ShippingMethodItem>
-                        ))}
-                      </RadioGroup>
+                                {shippingMethod.type === ShippingTypes.PACKETA &&
+                                  shippingMethod.id === Number(shippingMethodId) && (
+                                    <Box>
+                                      <Button
+                                        onClick={handleChangeBranch}
+                                        variant="outlined"
+                                        size="small"
+                                        sx={{ px: 1, whiteSpace: 'nowrap' }}
+                                      >
+                                        {t('event.tickets.shipping.choose_address')}
+                                      </Button>
+                                    </Box>
+                                  )}
+                              </Stack>
+                            }
+                            sx={{
+                              '&:not(:last-of-type)': {
+                                mb: 0,
+                              },
+                              '& .MuiFormControlLabel-label': {
+                                width: '100%',
+                                mr: 0,
+                              },
+                            }}
+                          />
+                        </ShippingMethodItem>
+                      ))}
+                    </RadioGroup>
 
                     {!!error && (
                       <FormHelperText error={!!error} sx={{ mx: 0 }}>
@@ -229,7 +228,6 @@ const Shipping: React.FC<Props> = ({ event }) => {
                   </FormControl>
                 )}
               />
-              </>
             )}
           </>
         )}

package/src/form/TicketForm.tsx

@@ -546,7 +546,7 @@ const TicketForm: React.FC<Props> = ({
       ) : (
         <FormProvider
           methods={methods}
-          // @ts-ignore
+          // @ts-ignore -- handleSubmit type mismatch with FormProvider onSubmit prop
           onSubmit={methods.handleSubmit(onSubmit, onInvalid)}
           formId={EVENTLOOK_ORDER_FORM_ID}
         >
@@ -696,17 +696,19 @@ const TicketForm: React.FC<Props> = ({
             </Grid>
           </Grid>
 
-          <PaymentOverviewDrawer
-            event={event}
-            totalPrice={values.total}
-            termsAndConditionsRef={termsAndConditionsRef}
-            onOpenChange={setIsPaymentOverviewDrawerOpen}
-          />
+          {!isIframe && (
+            <PaymentOverviewDrawer
+              event={event}
+              totalPrice={values.total}
+              termsAndConditionsRef={termsAndConditionsRef}
+              onOpenChange={setIsPaymentOverviewDrawerOpen}
+            />
+          )}
 
           <EmailConfirmation
             open={formStep === 2 && !isIframe}
             onClose={() => setFormStep(1)}
-            // @ts-ignore
+            // @ts-ignore -- handleSubmit type mismatch with onConfirm prop
             onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
           />
         </FormProvider>

package/src/form/payment/PaymentOverviewCheckbox.tsx

@@ -15,73 +15,71 @@ const PaymentOverviewCheckbox: React.FC<Props> = ({ checkboxName, label, value }
   const { control } = useFormContext();
 
   return (
-    <>
-      <Controller
-        name={checkboxName}
-        control={control}
-        render={({ field }) => (
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            useFlexGap
-            spacing={1}
-            sx={{ width: '100%', mb: 0.5 }}
+    <Controller
+      name={checkboxName}
+      control={control}
+      render={({ field }) => (
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          useFlexGap
+          spacing={1}
+          sx={{ width: '100%', mb: 0.5 }}
+        >
+          <Typography variant="body2" sx={{ flex: 1 }}>
+            {label}
+          </Typography>
+          <Box
+            sx={{
+              position: 'relative',
+              display: 'flex',
+              alignItems: 'center',
+            }}
           >
-            <Typography variant="body2" sx={{ flex: 1 }}>
-              {label}
+            <Typography
+              variant="body2"
+              sx={{
+                mr: field.value ? 0 : 1,
+                ...(field.value
+                  ? {
+                      position: 'absolute',
+                      right: 0,
+                    }
+                  : {}),
+              }}
+            >
+              {value}
             </Typography>
-            <Box
+            <Button
+              variant="outlined"
+              color="primary"
+              size="small"
+              startIcon={<Iconify icon="carbon:add" />}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                field.onChange(true);
+              }}
               sx={{
-                position: 'relative',
-                display: 'flex',
-                alignItems: 'center',
+                borderRadius: 1,
+                textTransform: 'none',
+                px: 1,
+                width: 96,
+                minWidth: 96,
+                color: 'text.primary',
+                visibility: field.value ? 'hidden' : 'visible',
+                pointerEvents: field.value ? 'none' : 'auto',
               }}
+              tabIndex={field.value ? -1 : 0}
+              aria-hidden={field.value}
             >
-              <Typography
-                variant="body2"
-                sx={{
-                  mr: field.value ? 0 : 1,
-                  ...(field.value
-                    ? {
-                        position: 'absolute',
-                        right: 0,
-                      }
-                    : {}),
-                }}
-              >
-                {value}
-              </Typography>
-              <Button
-                variant="outlined"
-                color="primary"
-                size="small"
-                startIcon={<Iconify icon="carbon:add" />}
-                onClick={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  field.onChange(true);
-                }}
-                sx={{
-                  borderRadius: 1,
-                  textTransform: 'none',
-                  px: 1,
-                  width: 96,
-                  minWidth: 96,
-                  color: 'text.primary',
-                  visibility: field.value ? 'hidden' : 'visible',
-                  pointerEvents: field.value ? 'none' : 'auto',
-                }}
-                tabIndex={field.value ? -1 : 0}
-                aria-hidden={field.value}
-              >
-                {t('add')}
-              </Button>
-            </Box>
-          </Stack>
-        )}
-      />
-    </>
+              {t('add')}
+            </Button>
+          </Box>
+        </Stack>
+      )}
+    />
   );
 };
 

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';
 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';
 
 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

@@ -13,13 +13,12 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { useWatch, Controller } from 'react-hook-form';
+import { useWatch, Controller, useFormContext } from 'react-hook-form';
 import { fCurrency } from '@utils/formatNumber';
 import useGlobal from '@hooks/useGlobal';
 import { Iconify } from '@components';
 import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
 import { IEvent } from '@utils/types/event.type';
-import { useFormContext } from 'react-hook-form';
 
 interface Props {
   event: IEvent;

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) => {
@@ -55,9 +65,23 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
     return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);
   };
 
-  const addRelease = (productsToAdd?: IEventProductForm[]) => {
-    const normalizedProducts = productsToAdd ?? [];
-    const quantity = normalizedProducts.length ? normalizedProducts.length : 1;
+  const addRelease = (productsToAdd?: IEventProductForm[] | IEventProductForm) => {
+    const normalizedProducts = Array.isArray(productsToAdd)
+      ? productsToAdd
+      : productsToAdd
+        ? [productsToAdd]
+        : [];
+    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) => ({
@@ -74,7 +98,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
         quantity,
         itemName: '',
         price: 0,
-        products: normalizedProducts,
+        products: selectedProducts,
         extraFields,
       },
     ]);
@@ -87,9 +111,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;
 
@@ -150,6 +175,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={{
@@ -172,7 +204,8 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
         <Stack direction="row" alignItems="center" justifyContent="space-between">
           <Stack>
             <Typography variant="body2">
-              {release.price === 0 ? t('free') : fCurrency(release.price, lang, currency)}
+              {release.price === 0 ? t('free') : fCurrency(release.price, lang, currency)} -{' '}
+              {release.name}
             </Typography>
 
             <ReleaseDescription
@@ -185,9 +218,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={() =>
@@ -221,6 +256,7 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
             selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
             eventId={eventId}
             canAddOnlyOneAtATime
+            maxSelectableQuantity={remainingOrderCapacity}
           />
         )}
       </Stack>