@eventlook/sdk 1.4.45 → 1.4.46-beta.1

package/src/form/tickets/ReleaseDescription.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button, Collapse, Typography } from '@mui/material';
+import { Iconify } from '@components/iconify';
+
+interface ReleaseDescriptionProps {
+  description?: string | null;
+  isExpanded: boolean;
+  onToggle: () => void;
+  moreInfoLabel: string;
+  showCollapse?: boolean;
+}
+
+const ReleaseDescription: React.FC<ReleaseDescriptionProps> = ({
+  description,
+  isExpanded,
+  onToggle,
+  moreInfoLabel,
+  showCollapse = false,
+}) => {
+  if (!description) return null;
+
+  if (showCollapse) {
+    return (
+      <Collapse in={isExpanded}>
+        <Typography variant="body2" color="text.secondary">
+          {description}
+        </Typography>
+      </Collapse>
+    );
+  }
+
+  return (
+    <Button
+      size="small"
+      onClick={onToggle}
+      endIcon={
+        <Iconify
+          sx={{ width: 24, height: 24 }}
+          icon={isExpanded ? 'eva:chevron-up-fill' : 'eva:chevron-down-fill'}
+        />
+      }
+      sx={{
+        px: 0,
+        minWidth: 'auto',
+        textTransform: 'none',
+        color: 'text.primary',
+        textDecoration: 'underline',
+        fontWeight: 400,
+        '& .MuiButton-endIcon': { ml: 0 },
+      }}
+    >
+      {moreInfoLabel}
+    </Button>
+  );
+};
+
+export default ReleaseDescription;

package/src/form/tickets/ReleaseWithMerchandise.tsx

@@ -0,0 +1,237 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Stack, Typography } from '@mui/material';
+import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
+import TicketQuantityControl from '@form/tickets/TicketQuantityControl';
+import { IReleaseShort } from '@utils/types/release.type';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+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 { getSelectedQuantityByVariant } from '@utils/product';
+import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
+import ReleaseDescription from '@form/tickets/ReleaseDescription';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  eventId: number;
+  release: IReleaseShort;
+  activeReleases: IReleaseShort[];
+  currency: Currencies;
+  index: number;
+}
+
+const ReleaseWithMerchandise: React.FC<Props> = ({
+  eventId,
+  release,
+  activeReleases,
+  currency,
+  index,
+}) => {
+  const { t, lang } = useGlobal();
+  const [openVariantDialog, setOpenVariantDialog] = useState<'add' | 'increase' | null>(null);
+  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
+  const { setValue } = useFormContext<ITicketForm>();
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
+  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
+  const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+  const countTickets = addedRelease?.quantity || 0;
+
+  const getReleaseTitle = (release: IReleaseShort) =>
+    release.releaseCategoryName || release.name || '';
+
+  const getSelectedQuantity = (id: number) =>
+    tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;
+
+  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;
+  };
+
+  const isMaxQuantity = (releaseId: number) => {
+    const release = tickets.find((ticket) => ticket.releaseId === releaseId);
+    if (!release) return false;
+    return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);
+  };
+
+  const addRelease = (productsToAdd?: IEventProductForm[] | IEventProductForm) => {
+    const normalizedProducts = Array.isArray(productsToAdd)
+      ? productsToAdd
+      : productsToAdd
+        ? [productsToAdd]
+        : [];
+    const quantity = normalizedProducts.length ? normalizedProducts.length : 1;
+    const extraFields = release.extraFields?.length
+      ? Array.from({ length: quantity }, () =>
+          release.extraFields!.map((field) => ({
+            eventExtraFieldId: field.id,
+            value: '',
+          }))
+        )
+      : [];
+
+    setValue(`tickets.${eventId}`, [
+      ...tickets,
+      {
+        releaseId: release.id,
+        quantity,
+        itemName: '',
+        price: 0,
+        products: normalizedProducts,
+        extraFields,
+      },
+    ]);
+    setOpenVariantDialog(null);
+  };
+
+  const increaseQuantity = (productsToAdd?: IEventProductForm[] | IEventProductForm) => {
+    const normalizedProducts = Array.isArray(productsToAdd)
+      ? productsToAdd
+      : productsToAdd
+        ? [productsToAdd]
+        : [];
+    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+    if (addedRelease) {
+      const increment = normalizedProducts.length ? normalizedProducts.length : 1;
+      const maxQuantity = getAvailableTicketsForRelease(addedRelease);
+      const availableIncrement = Math.max(
+        0,
+        Math.min(increment, maxQuantity - Number(addedRelease.quantity))
+      );
+      if (availableIncrement === 0) return;
+
+      const newQuantity = Number(addedRelease.quantity) + availableIncrement;
+      const productsSlice = normalizedProducts.slice(0, availableIncrement);
+      const extraFieldsToAdd = release.extraFields?.length
+        ? Array.from({ length: availableIncrement }, () =>
+            release.extraFields!.map((field) => ({
+              eventExtraFieldId: field.id,
+              value: '',
+            }))
+          )
+        : [];
+
+      setValue(
+        `tickets.${eventId}`,
+        tickets.map((ticket) =>
+          ticket.releaseId === release.id
+            ? {
+                ...ticket,
+                quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,
+                products: [...ticket.products, ...productsSlice],
+                extraFields: release.extraFields?.length
+                  ? [...ticket.extraFields, ...extraFieldsToAdd]
+                  : [],
+              }
+            : ticket
+        )
+      );
+      setOpenVariantDialog(null);
+    }
+  };
+
+  const decreaseQuantity = useCallback(() => {
+    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+    if (addedRelease) {
+      const newQuantity = Number(addedRelease.quantity) - 1;
+      if (newQuantity < 1) {
+        setValue(
+          `tickets.${eventId}`,
+          tickets.filter((ticket) => ticket.releaseId !== release.id)
+        );
+      } else {
+        setValue(
+          `tickets.${eventId}`,
+          tickets.map((ticket) => {
+            if (ticket.releaseId !== release.id) return ticket;
+
+            return {
+              ...ticket,
+              quantity: newQuantity,
+              products: ticket?.products?.slice(0, -1), // non-mutating "pop"
+              extraFields: ticket?.extraFields?.slice(0, -1),
+            };
+          })
+        );
+      }
+    }
+  }, [tickets, release.id, setValue]);
+
+  return (
+    <Box
+      sx={{
+        p: 1,
+        pb: 0,
+        borderRadius: 1,
+        bgcolor: (theme) =>
+          theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800],
+      }}
+    >
+      <Stack spacing={0}>
+        <Box>
+          <Typography variant="subtitle1" fontWeight={600}>
+            {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, currency)}
+            </Typography>
+
+            <ReleaseDescription
+              description={release.description}
+              isExpanded={isDescriptionExpanded}
+              onToggle={() => setIsDescriptionExpanded((prev) => !prev)}
+              moreInfoLabel={t('more_info')}
+            />
+          </Stack>
+
+          <TicketQuantityControl
+            quantity={getSelectedQuantity(release.id)}
+            isDisabled={release.locked}
+            canAddFirst={!release.locked}
+            canAddMore={!isMaxQuantity(release.id)}
+            addLabel={t('add')}
+            onDecrement={() => decreaseQuantity()}
+            onIncrement={() =>
+              release.product ? setOpenVariantDialog('increase') : increaseQuantity()
+            }
+            onAddFirst={() => (release.product ? setOpenVariantDialog('add') : addRelease())}
+          />
+        </Stack>
+
+        <ReleaseDescription
+          description={release.description}
+          isExpanded={isDescriptionExpanded}
+          onToggle={() => setIsDescriptionExpanded((prev) => !prev)}
+          moreInfoLabel={t('more_info')}
+          showCollapse
+        />
+        {release.extraFields && release.extraFields.length > 0 && (
+          <ReleaseExtraFields
+            release={release}
+            eventId={eventId}
+            releaseIndex={index}
+            quantity={countTickets}
+          />
+        )}
+        {release.product && (
+          <ProductVariantsDialog
+            eventProduct={release.product}
+            openDialog={!!openVariantDialog}
+            callback={openVariantDialog === 'increase' ? increaseQuantity : addRelease}
+            onClose={() => setOpenVariantDialog(null)}
+            selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
+            eventId={eventId}
+            canAddOnlyOneAtATime
+          />
+        )}
+      </Stack>
+    </Box>
+  );
+};
+
+export default ReleaseWithMerchandise;

package/src/form/tickets/TicketQuantityControl.tsx

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

package/src/form/{TicketSelection.tsx → tickets/TicketSelection.tsx}

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import {
   Box,
-  Button,
   Divider,
   Grid,
   IconButton,
@@ -18,12 +17,12 @@ import { fCurrency } from '@utils/formatNumber';
 import { Iconify } from '@components/iconify';
 import { groupBy } from '@utils/global';
 import { IReleaseShort } from '@utils/types/release.type';
-import FeeBox from '@form/payment/FeeBox';
 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 useGlobal from '@hooks/useGlobal.ts';
+import TicketSelectionMobile from './TicketSelectionMobile';
 
 interface Props {
   event: IEvent;
@@ -188,117 +187,147 @@ const TicketSelection: React.FC<Props> = ({ event }) => {
   };
 
   return (
-    <Stack spacing={3} direction="column" divider={<Divider sx={{ borderStyle: 'dashed' }} />}>
-      {tickets.map((item, index) => (
-        <Box key={index}>
-          <Grid container spacing={3}>
-            <Grid item xs={12} md={6}>
-              {showLoading ? (
-                <Skeleton
-                  variant="rounded"
-                  sx={{
-                    width: '100%',
-                    height: (theme) => theme.spacing(7.5),
-                  }}
-                />
-              ) : (
-                <RHFSelect
-                  name={`tickets.${event.id}.${index}.releaseId`}
-                  value={item.releaseId}
-                  label={
-                    index > 0
-                      ? t('form.labels.add_another_release')
-                      : t('form.labels.release_category_price')
-                  }
-                  maxHeight="calc(100vh - 2rem)"
-                  onChange={(e) => {
-                    setValue(`tickets.${event.id}.${index}.releaseId`, Number(e.target.value));
-                    setValue(`tickets.${event.id}.${index}.extraFields`, []);
-                  }}
-                >
-                  <MenuItem key={0} value="">
-                    {t('choose')}
-                  </MenuItem>
-                  {activeReleases?.map((activeRelease) => (
-                    <MenuItem
-                      key={activeRelease.id}
-                      value={activeRelease.id}
-                      disabled={
-                        isReleaseSelected(activeRelease.id) ||
-                        (activeRelease.locked &&
-                          !soldOutReleaseCategoryNames.includes(activeRelease.releaseCategoryName))
-                      }
-                    >
-                      {activeRelease.releaseCategoryName} - {activeRelease.name}:{' '}
-                      {activeRelease.price === 0
-                        ? t('free')
-                        : fCurrency(activeRelease.price, lang, event.currency)}
-                    </MenuItem>
-                  ))}
-                </RHFSelect>
-              )}
-            </Grid>
-            <Grid key={index} item xs={12} md={6}>
-              {showLoading ? (
-                <Skeleton
-                  variant="rounded"
-                  sx={{
-                    width: '100%',
-                    height: (theme) => theme.spacing(7.5),
-                  }}
-                />
-              ) : (
-                <Stack direction="row" alignItems="center" spacing={1}>
+    <Stack
+      spacing={3}
+      direction="column"
+      divider={!isMobile ? <Divider sx={{ borderStyle: 'dashed' }} /> : undefined}
+    >
+      <TicketSelectionMobile
+        event={event}
+        activeReleases={activeReleases}
+        showLoading={showLoading}
+        soldOutReleaseCategoryNames={soldOutReleaseCategoryNames}
+        tickets={tickets}
+        isQuantityDisabled={isQuantityDisabled}
+        setValue={setValue as (name: string, value: any) => void}
+        removeTicket={removeTicket}
+        getExtraFields={getExtraFields}
+      />
+      {/* {isMobile ? (
+        <TicketSelectionMobile
+          event={event}
+          activeReleases={activeReleases}
+          showLoading={showLoading}
+          soldOutReleaseCategoryNames={soldOutReleaseCategoryNames}
+          tickets={tickets}
+          isQuantityDisabled={isQuantityDisabled}
+          setValue={setValue as (name: string, value: any) => void}
+          removeTicket={removeTicket}
+          getExtraFields={getExtraFields}
+        />
+      ) : (
+        tickets.map((item, index) => (
+          <Box key={index}>
+            <Grid container spacing={3}>
+              <Grid item xs={12} md={6}>
+                {showLoading ? (
+                  <Skeleton
+                    variant="rounded"
+                    sx={{
+                      width: '100%',
+                      height: (theme) => theme.spacing(7.5),
+                    }}
+                  />
+                ) : (
                   <RHFSelect
-                    name={`tickets.${event.id}.${index}.quantity`}
-                    value={item.quantity}
-                    label={t('form.labels.quantity')}
+                    name={`tickets.${event.id}.${index}.releaseId`}
+                    value={item.releaseId}
+                    label={
+                      index > 0
+                        ? t('form.labels.add_another_release')
+                        : t('form.labels.release_category_price')
+                    }
+                    maxHeight="calc(100vh - 2rem)"
+                    onChange={(e) => {
+                      setValue(`tickets.${event.id}.${index}.releaseId`, Number(e.target.value));
+                      setValue(`tickets.${event.id}.${index}.extraFields`, []);
+                    }}
                   >
-                    {[...Array(getAvailableTicketsForRelease(item))].map((_, index2) => (
+                    <MenuItem key={0} value="">
+                      {t('choose')}
+                    </MenuItem>
+                    {activeReleases?.map((activeRelease) => (
                       <MenuItem
-                        key={index2}
-                        value={index2 + 1}
-                        disabled={isQuantityDisabled(index2 + 1, item.releaseId)}
+                        key={activeRelease.id}
+                        value={activeRelease.id}
+                        disabled={
+                          isReleaseSelected(activeRelease.id) ||
+                          (activeRelease.locked &&
+                            !soldOutReleaseCategoryNames.includes(
+                              activeRelease.releaseCategoryName
+                            ))
+                        }
                       >
-                        {index2 + 1}
+                        {activeRelease.releaseCategoryName} - {activeRelease.name}:{' '}
+                        {activeRelease.price === 0
+                          ? t('free')
+                          : fCurrency(activeRelease.price, lang, event.currency)}
                       </MenuItem>
                     ))}
-                    {!item.releaseId && (
-                      <MenuItem disabled sx={{ textTransform: 'unset!important' }}>
-                        {t('event.tickets.stepper.1.quantity_select')}
-                      </MenuItem>
-                    )}
                   </RHFSelect>
-                  {item.releaseId && item.quantity && (
-                    <Box>
-                      <IconButton color="primary" onClick={() => removeTicket(index)}>
-                        <Iconify icon="carbon:trash-can" />
-                      </IconButton>
-                    </Box>
-                  )}
-                </Stack>
-              )}
+                )}
+              </Grid>
+              <Grid key={index} item xs={12} md={6}>
+                {showLoading ? (
+                  <Skeleton
+                    variant="rounded"
+                    sx={{
+                      width: '100%',
+                      height: (theme) => theme.spacing(7.5),
+                    }}
+                  />
+                ) : (
+                  <Stack direction="row" alignItems="center" spacing={1}>
+                    <RHFSelect
+                      name={`tickets.${event.id}.${index}.quantity`}
+                      value={item.quantity}
+                      label={t('form.labels.quantity')}
+                    >
+                      {[...Array(getAvailableTicketsForRelease(item))].map((_, index2) => (
+                        <MenuItem
+                          key={index2}
+                          value={index2 + 1}
+                          disabled={isQuantityDisabled(index2 + 1, item.releaseId)}
+                        >
+                          {index2 + 1}
+                        </MenuItem>
+                      ))}
+                      {!item.releaseId && (
+                        <MenuItem disabled sx={{ textTransform: 'unset!important' }}>
+                          {t('event.tickets.stepper.1.quantity_select')}
+                        </MenuItem>
+                      )}
+                    </RHFSelect>
+                    {item.releaseId && item.quantity && (
+                      <Box>
+                        <IconButton color="primary" onClick={() => removeTicket(index)}>
+                          <Iconify icon="carbon:trash-can" />
+                        </IconButton>
+                      </Box>
+                    )}
+                  </Stack>
+                )}
+              </Grid>
             </Grid>
-          </Grid>
-          {activeReleases && item.releaseId && (
-            <Typography
-              variant="caption"
-              content="div"
-              mt={2}
-              mb={getRelease(item.releaseId)?.extraFields?.length ? 2 : 0}
-              display="block"
-            >
-              {getRelease(item.releaseId)?.description ?? ''}
-            </Typography>
-          )}
-          {getExtraFields(item.releaseId, index)}
-        </Box>
-      ))}
+            {activeReleases && item.releaseId && (
+              <Typography
+                variant="caption"
+                content="div"
+                mt={2}
+                mb={getRelease(item.releaseId)?.extraFields?.length ? 2 : 0}
+                display="block"
+              >
+                {getRelease(item.releaseId)?.description ?? ''}
+              </Typography>
+            )}
+            {getExtraFields(item.releaseId, index)}
+          </Box>
+        ))
+      )} */}
       <Box>
         <Typography variant="caption" component="div" fontStyle="italic" mb={2}>
           *{t('event.tickets.stepper.1.max_ticket_quantity')}
         </Typography>
-        {isMobile && <FeeBox event={event} align="right" />}
       </Box>
     </Stack>
   );