@eventlook/sdk 1.4.46-beta.7 → 1.4.46

package/src/form/merchandise/MerchandiseSlider.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
-import { Box, SxProps } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { IEventProduct } from '@utils/types/event-product.type';
-import ProductCard from '@form/product/ProductCard';
-
-interface Props {
-  sx?: SxProps;
-  eventProducts: IEventProduct[];
-  eventId: number;
-}
-
-const MerchandiseSlider: React.FC<Props> = ({ eventProducts, eventId, sx }) => {
-  const [emblaRef] = useEmblaCarousel();
-  const theme = useTheme();
-
-  return (
-    <Box sx={sx}>
-      <Box
-        sx={{
-          overflow: 'hidden',
-          padding: theme.spacing(8, 3),
-          margin: theme.spacing(-8, -3),
-        }}
-      >
-        <Box ref={emblaRef} className="embla" sx={{ overflow: 'visible' }}>
-          <Box
-            className="embla__container"
-            sx={{
-              display: 'flex',
-            }}
-          >
-            {eventProducts.map((eventProduct, index) => (
-              <Box
-                key={`event-slide-${index}`}
-                className="embla__slide"
-                sx={{
-                  flex: `0 0 ${eventProducts.length > 1 ? '78%' : '100%'}`,
-                  minWidth: 0,
-                  maxWidth: 220,
-                  margin: `0 ${theme.spacing(0.5)}`,
-                  transition: 'opacity 0.2s ease',
-                  [theme.breakpoints.up('sm')]: {
-                    flex: '0 0 43%',
-                  },
-                  [theme.breakpoints.up('md')]: {
-                    flex: '0 0 33.3333%',
-                  },
-                }}
-              >
-                <ProductCard eventProduct={eventProduct} eventId={eventId} isOnlyMerchandise />
-              </Box>
-            ))}
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export default MerchandiseSlider;

package/src/form/services/index.tsx

@@ -1,263 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import {
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  FormControlLabel,
-  IconButton,
-  Link,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { useWatch, Controller } 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;
-}
-
-interface BorderedCheckboxProps {
-  name: string;
-  disabled: boolean;
-  title: React.ReactNode;
-  price: React.ReactNode;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const BorderedCheckbox: React.FC<BorderedCheckboxProps> = ({
-  name,
-  disabled,
-  title,
-  price,
-  onChange,
-}) => {
-  const { control } = useFormContext<ITicketForm>();
-
-  return (
-    <Controller
-      name={name as any}
-      control={control}
-      render={({ field }) => (
-        <FormControlLabel
-          control={
-            <Checkbox
-              {...field}
-              checked={field.value || false}
-              onChange={(e) => {
-                onChange?.(e);
-                if (!e.defaultPrevented) {
-                  field.onChange(e);
-                }
-              }}
-              disabled={disabled}
-            />
-          }
-          label={
-            <Stack
-              direction="row"
-              justifyContent="space-between"
-              alignItems="center"
-              sx={{ width: '100%', pr: 1 }}
-            >
-              <Typography variant="body2" fontWeight={400}>
-                {title}
-              </Typography>
-              <Typography variant="body2" fontWeight={700} sx={{ whiteSpace: 'nowrap' }}>
-                {price}
-              </Typography>
-            </Stack>
-          }
-          sx={{
-            m: 0,
-            px: 1,
-            pr: 0.5,
-            pl: 0,
-            borderRadius: 1,
-            width: '100%',
-            border: '1px solid',
-            borderColor: 'primary.main',
-            '& .MuiFormControlLabel-label': {
-              width: '100%',
-            },
-          }}
-        />
-      )}
-    />
-  );
-};
-
-const Services: React.FC<Props> = ({ event }) => {
-  const { t, lang, showSnackbar } = useGlobal();
-  const [open, setOpen] = useState(false);
-  const ticketInsurancePricePerUnit = Number(
-    useWatch<ITicketForm>({
-      name: 'ticketInsurancePricePerUnit',
-      defaultValue: 0,
-    }) || 0
-  );
-  const smsNotificationPrice = Number(
-    useWatch<ITicketForm>({
-      name: 'smsNotificationPrice',
-      defaultValue: 0,
-    }) || 0
-  );
-  const tickets = useWatch<ITicketForm, 'tickets'>({
-    name: 'tickets',
-    defaultValue: {},
-  });
-
-  const totalTickets = useMemo(() => {
-    const items: ITicketFormTicket[] = Object.values(tickets || {}).flat();
-    return items.reduce((sum, ticket) => sum + (Number(ticket.quantity) || 0), 0);
-  }, [tickets]);
-
-  const handleOpen = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    setOpen(true);
-  };
-
-  const handleClose = () => setOpen(false);
-
-  const handleServiceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (totalTickets <= 0) {
-      e.preventDefault();
-      showSnackbar(t('event.tickets.services.add_tickets_first'), {
-        variant: 'error',
-      });
-    }
-  };
-
-  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="smsNotification"
-        disabled={false}
-        title={t('event.tickets.sms_notification.label')}
-        price={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
-        onChange={handleServiceChange}
-      />
-
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Link variant="body2" underline="always" onClick={handleOpen} color={'text.primary'}>
-          {t('event.tickets.stepper.8.additional_info')}
-        </Link>
-      </Box>
-
-      <Dialog
-        open={open}
-        onClose={handleClose}
-        maxWidth="sm"
-        fullWidth
-        PaperProps={{
-          sx: {
-            borderRadius: 4,
-            overflow: 'hidden',
-          },
-        }}
-      >
-        <DialogTitle
-          sx={{
-            position: 'relative',
-            textAlign: 'center',
-            fontWeight: 700,
-            fontSize: { xs: '1.5rem', sm: '1.75rem' },
-            pt: { xs: 3.5, sm: 4 },
-            pb: { xs: 2, sm: 2.5 },
-            px: { xs: 3, sm: 4 },
-          }}
-        >
-          {t('event.tickets.stepper.8.title')}:
-          <IconButton
-            onClick={handleClose}
-            size="small"
-            sx={{ position: 'absolute', right: 16, top: 16 }}
-          >
-            <Iconify icon="carbon:close" />
-          </IconButton>
-        </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.sms_notification.label')}
-              </Typography>
-              <Typography variant="body2" paragraph>
-                {t('event.tickets.sms_notification.modal.description')}
-              </Typography>
-              <BorderedCheckbox
-                name="smsNotification"
-                disabled={false}
-                title={t('event.tickets.sms_notification.label')}
-                price={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
-                onChange={handleServiceChange}
-              />
-            </Box>
-            <Button
-              variant="outlined"
-              onClick={handleClose}
-              sx={{
-                mt: 1,
-                py: 1.25,
-                borderRadius: 1,
-                height: 36,
-                fontWeight: 700,
-                borderColor: 'grey.300',
-                color: 'text.primary',
-              }}
-            >
-              {t('close')}
-            </Button>
-          </Stack>
-        </DialogContent>
-      </Dialog>
-    </Stack>
-  );
-};
-
-export default Services;

package/src/form/tickets/ReleaseDescription.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Box, Collapse, Link, Stack, 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 (
-    <Link onClick={onToggle} color="inherit" underline="always" fontSize={12}>
-      <Stack direction="row" alignItems="center" spacing={0}>
-        <Box>{moreInfoLabel}</Box>
-
-        <Iconify
-          sx={{ width: 24, height: 24 }}
-          icon={isExpanded ? 'eva:chevron-up-fill' : 'eva:chevron-down-fill'}
-        />
-      </Stack>
-    </Link>
-  );
-};
-
-export default ReleaseDescription;

package/src/form/tickets/ReleaseWithMerchandise.tsx

@@ -1,239 +0,0 @@
-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={{
-        pt: 1,
-        pr: 0.5,
-        pb: 0,
-        pl: 2,
-        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

@@ -1,94 +0,0 @@
-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: 36, md: 40 },
-            height: { xs: 36, md: 40 },
-            borderRadius: 1,
-            border: '1px solid',
-            borderColor: 'grey.300',
-          }}
-        >
-          <Iconify icon="eva:minus-fill" />
-        </IconButton>
-        <Box
-          sx={{
-            width: { xs: 36, md: 40 },
-            height: { xs: 36, 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: 36, md: 40 },
-            height: { xs: 36, 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: 36, md: 40 },
-        width: { xs: 116, md: 136 },
-        borderRadius: 1,
-        px: 3,
-        textTransform: 'none',
-        fontWeight: 600,
-      }}
-    >
-      {addLabel}
-    </Button>
-  );
-};
-
-export default TicketQuantityControl;