@eventlook/sdk 1.4.44 → 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;