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

package/src/form/services/index.tsx

@@ -0,0 +1,263 @@
+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/style.ts

@@ -5,17 +5,29 @@ export const OverviewCard = styled(Card)<{ stickyHeaderTop: number }>(
   ({ theme, stickyHeaderTop }) => ({
     position: 'sticky',
     top: stickyHeaderTop,
+    borderRadius: theme.spacing(2),
+
+    [theme.breakpoints.down('sm')]: {
+      borderRadius: theme.spacing(1),
+      boxShadow: 'none',
+    },
   })
 );
 
 export const ShippingMethodItem = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active: boolean }>(({ theme, active }) => ({
+  shouldForwardProp: (prop) => prop !== 'active' && prop !== 'hasError',
+})<{ active: boolean; hasError?: boolean }>(({ theme, active, hasError }) => ({
   borderRadius: theme.spacing(1),
-  border: `1px solid ${active ? theme.palette.primary.main : theme.palette.grey.A200}`,
+  border: `1px solid ${
+    hasError
+      ? theme.palette.error.main
+      : active
+        ? theme.palette.primary.main
+        : theme.palette.grey.A200
+  }`,
   marginTop: theme.spacing(1),
   width: '100%',
-  padding: `0 ${theme.spacing(2)}`,
+  padding: `0 0 0 ${theme.spacing(2)}`,
   transitionDuration: '.3s',
 
   '& > .MuiFormControlLabel-root': {

package/src/form/tickets/ReleaseDescription.tsx

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,231 @@
+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';
+
+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[]) => {
+    const normalizedProducts = 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[]) => {
+    const normalizedProducts = 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.5,
+        pl: 2,
+        borderRadius: 1,
+        bgcolor: (theme) =>
+          theme.palette.mode === 'light' ? 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, 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,100 @@
+import React from 'react';
+import { Box, Button, IconButton, Stack } from '@mui/material';
+import { Iconify } from '@components/iconify';
+import useGlobal from '@hooks/useGlobal';
+
+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,
+}) => {
+  const { t } = useGlobal();
+
+  if (quantity > 0) {
+    return (
+      <Stack direction="row" spacing={{ xs: 0.5, md: 1 }} alignItems="center">
+        <IconButton
+          onClick={onDecrement}
+          aria-label={t('form.labels.ticket_quantity_decrease')}
+          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}
+          aria-label={t('form.labels.ticket_quantity_increase')}
+          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}
+      aria-label={addLabel}
+      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;