@eventlook/sdk 1.4.48 → 1.4.49-beta.2

package/src/form/TicketForm.tsx

@@ -14,7 +14,7 @@ import {
   Typography,
 } from '@mui/material';
 import dayjs from 'dayjs';
-import TicketSelection from '@form/TicketSelection';
+import TicketSelection from '@form/tickets/TicketSelection';
 import ContactPerson from '@form/ContactPerson';
 import Payment from '@form/Payment';
 import EmailConfirmation from '@form/EmailConfirmation';
@@ -44,18 +44,23 @@ import {
 import ReleaseCountdown from '@form/ReleaseCountdown';
 import { cloneObject } from '@utils/global';
 import PaymentPending from '@form/PaymentPending';
-import MerchandiseSelection from '@form/MerchandiseSelection';
-import TicketWithMerchandiseSelection from '@form/TicketWithMerchandiseSelection';
+import MerchandiseSelection from '@form/merchandise/MerchandiseSelection';
+import TicketWithMerchandiseSelection from '@form/tickets/TicketWithMerchandiseSelection';
 import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import Shipping from '@form/Shipping';
 import useErrors from '@hooks/useErrors';
 import { EventType } from '@utils/data/event';
 import TimeslotSelection from '@form/TimeslotSelection';
 import useGlobal from '@hooks/useGlobal';
+import useConsentScrollOnDrawerOpen from '@hooks/useConsentScrollOnDrawerOpen';
+import useScrollToFirstError from '@hooks/useScrollToFirstError';
 import { Trans } from '@components/Trans';
-import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
+import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_ID } from '@utils/data/global.ts';
 import ChildEventSection from './ChildEvents';
-import TicketSelectionMap from '@form/TicketSelectionMap.tsx';
+import TicketSelectionMap from '@form/tickets/TicketSelectionMap';
+import PaymentOverviewDrawer from './PaymentOverviewDrawer';
+import { getPlaceAsString } from '@utils/place';
+import Services from '@form/services';
 
 interface Props {
   event: IEvent;
@@ -63,14 +68,30 @@ interface Props {
   selectedReleaseId?: number;
   isIframe?: boolean;
   isInline?: boolean;
+  headerSlot?: React.ReactNode;
 }
 
+const getCartItemCount = (formValues: ITicketForm) => {
+  const flatTickets = Object.values(formValues.tickets ?? {}).flat();
+  const ticketsCount = flatTickets.reduce((sum, ticket) => sum + (Number(ticket.quantity) || 0), 0);
+  const ticketsWithProductsCount = flatTickets.reduce(
+    (sum, ticket) => sum + ((ticket.products?.length ?? 0) > 0 ? 1 : 0),
+    0
+  );
+  const productsCount = Object.values(formValues.products ?? {})
+    .flat()
+    .reduce((sum, product) => sum + (Number(product.quantity) || 0), 0);
+
+  return ticketsCount + ticketsWithProductsCount + productsCount;
+};
+
 const TicketForm: React.FC<Props> = ({
   event,
   hasGopayIdSsr,
   selectedReleaseId,
   isIframe,
   isInline,
+  headerSlot,
 }) => {
   const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } =
     useGlobal();
@@ -80,6 +101,7 @@ const TicketForm: React.FC<Props> = ({
   const [hasGopayId, setHasGopayId] = useState<boolean>(hasGopayIdSsr);
   const [isPaying, setIsPaying] = useState<boolean>(false);
   const [formStep, setFormStep] = useState<number>(1);
+  const [isPaymentOverviewDrawerOpen, setIsPaymentOverviewDrawerOpen] = useState<boolean>(false);
   const [showReleaseDate, setShowReleaseDate] = useState(
     dayjs(event.releaseDate).diff(dayjs()) > 0
   );
@@ -88,6 +110,13 @@ const TicketForm: React.FC<Props> = ({
   const hasFiredViewCart = useRef(false);
   const hasFiredBeginCheckout = useRef(false);
   const hasFiredPaymentMethod = useRef(false);
+  const termsAndConditionsRef = useRef<HTMLDivElement | null>(null);
+
+  useConsentScrollOnDrawerOpen({
+    isDrawerOpen: isPaymentOverviewDrawerOpen,
+    consentRef: termsAndConditionsRef,
+  });
+
   const item: IEcommerce = {
     currency: event.currency,
     items: [
@@ -274,11 +303,36 @@ const TicketForm: React.FC<Props> = ({
     //   }
     //   return true;
     // }),
-    shipping: Yup.object().shape({
-      shippingMethodId: Yup.number().nullable(),
-      branchId: Yup.string().nullable(),
-      price: Yup.number(),
-    }),
+    shipping: Yup.object()
+      .shape({
+        shippingMethodId: Yup.number().nullable(),
+        branchId: Yup.string().nullable(),
+        price: Yup.number(),
+      })
+      .test('shipping-method-required', t('form.validation.required'), function (value) {
+        if (!event.hasMerchandise) {
+          return true;
+        }
+
+        const formValues = this.parent as ITicketForm;
+        const hasProducts = Object.values(formValues.products ?? {}).some((arr) => arr.length > 0);
+        const allTickets = Object.values(formValues.tickets ?? {}).flat();
+        const hasTicketProducts = allTickets.some((ticket) => (ticket.products?.length ?? 0) > 0);
+        const requiresShipping = hasProducts || hasTicketProducts;
+
+        if (!requiresShipping) {
+          return true;
+        }
+
+        if (value?.shippingMethodId !== null && value?.shippingMethodId !== undefined) {
+          return true;
+        }
+
+        return this.createError({
+          path: 'shipping.shippingMethodId',
+          message: t('form.validation.required'),
+        });
+      }),
     paymentMethodId: Yup.number().nullable().required(t('form.validation.required')),
     paymentMethodOptionId: Yup.number().nullable(),
     termsAndConditions: Yup.boolean().isTrue(t('form.validation.terms_and_conditions')),
@@ -306,15 +360,11 @@ const TicketForm: React.FC<Props> = ({
     defaultValues,
   });
   const values = methods.watch();
+  const cartItemCount = useMemo(() => getCartItemCount(values), [values.tickets, values.products]);
+  const onInvalid = useScrollToFirstError(methods);
 
   const onSubmit = async (values: ITicketForm) => {
-    const allTickets = Object.values(values.tickets).flat();
-    if (
-      allTickets.length === 1 &&
-      !allTickets[0].releaseId &&
-      !allTickets[0].quantity &&
-      !values.products.length
-    ) {
+    if (cartItemCount <= 0) {
       showSnackbar(t('form.validation.count_tickets_or_products'), {
         variant: 'error',
       });
@@ -444,7 +494,7 @@ const TicketForm: React.FC<Props> = ({
   }, [window.location.search]);
 
   useEffect(() => {
-    const subscription = methods.watch((value, { name }) => {
+    const subscription = methods.watch((value) => {
       if (
         JSON.stringify(defaultValues) !== JSON.stringify(value) &&
         !hasFiredBeginCheckout.current
@@ -471,7 +521,7 @@ const TicketForm: React.FC<Props> = ({
   useEffect(() => {
     if (hasGopayId || isPaying || paymentRedirect) {
       if (options?.autoscrollAfterViewChange) {
-        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_ID);
+        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_CONTAINER_ID);
         if (orderForm) {
           orderForm.scrollIntoView({ behavior: 'smooth' });
         }
@@ -483,7 +533,7 @@ const TicketForm: React.FC<Props> = ({
     return <ReleaseCountdown event={event} setShowReleaseDate={setShowReleaseDate} />;
 
   return (
-    <Box id={EVENTLOOK_ORDER_FORM_ID}>
+    <Box id={EVENTLOOK_ORDER_FORM_CONTAINER_ID}>
       {hasGopayId ? (
         <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} pixels={pixels} />
       ) : isPaying ? (
@@ -496,32 +546,65 @@ const TicketForm: React.FC<Props> = ({
           isInline={isInline}
         />
       ) : (
-        // @ts-ignore
-        <FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
-          <Typography
+        <FormProvider
+          methods={methods}
+          // @ts-ignore
+          onSubmit={methods.handleSubmit(onSubmit, onInvalid)}
+          formId={EVENTLOOK_ORDER_FORM_ID}
+        >
+          <Stack
             className="overview-card__event-info"
             display={{ md: 'none' }}
-            variant="h4"
             sx={{
               mb: 2,
             }}
           >
-            {event.name} - {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
-          </Typography>
-          <Grid container spacing={2}>
+            <Typography variant="h3" component="h1">
+              {event.name} a
+            </Typography>
+            <Typography variant="h5" component="h2">
+              {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
+            </Typography>
+            <Typography variant="body2" mt={1}>
+              {getPlaceAsString(event.place)}
+            </Typography>
+            {headerSlot ? <>{headerSlot}</> : null}
+          </Stack>
+          <Grid
+            container
+            spacing={2}
+            sx={{
+              pb: {
+                xs: isPaymentOverviewDrawerOpen ? getCartItemCount(values) * 3 + 18 : 0,
+                md: 0,
+              },
+            }}
+          >
             <Grid item xs={12} md={8}>
-              <Stepper orientation="vertical">
+              <Stepper
+                orientation="vertical"
+                sx={(theme) => ({
+                  [theme.breakpoints.down('sm')]: {
+                    '& .MuiStepContent-root': {
+                      borderLeftWidth: 0,
+                      paddingLeft: 0,
+                      marginLeft: 0,
+                    },
+                    '& .MuiStepConnector-line': { borderLeftWidth: 0 },
+                  },
+                })}
+              >
                 {event.type === EventType.RECURRING && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
-                    <StepContent>
+                    <StepContent sx={{ pr: { xs: 0 } }}>
                       <TimeslotSelection event={event} />
                     </StepContent>
                   </Step>
                 )}
                 <Step active>
                   <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
-                  <StepContent>
+                  <StepContent sx={{ pr: { xs: 0 } }}>
                     {event.mapId && seatingIframeUrl ? (
                       <TicketSelectionMap event={event} />
                     ) : event.hasMerchandise ? (
@@ -534,7 +617,7 @@ const TicketForm: React.FC<Props> = ({
                 {event.hasMerchandise && eventProducts.length && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
-                    <StepContent>
+                    <StepContent sx={{ pr: { xs: 0 } }}>
                       <MerchandiseSelection
                         eventProducts={eventProducts}
                         eventId={event.id}
@@ -543,24 +626,30 @@ const TicketForm: React.FC<Props> = ({
                     </StepContent>
                   </Step>
                 )}
+                <Step active>
+                  <StepLabel>{t('event.tickets.stepper.8.title')}</StepLabel>
+                  <StepContent sx={{ pr: { xs: 0 } }}>
+                    <Services event={event} />
+                  </StepContent>
+                </Step>
                 {event.children.length && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.7.title')}</StepLabel>
-                    <StepContent>
+                    <StepContent sx={{ pr: { xs: 0 } }}>
                       <ChildEventSection events={event.children} />
                     </StepContent>
                   </Step>
                 )}
                 <Step active>
                   <StepLabel>{t('event.tickets.stepper.2.title')}</StepLabel>
-                  <StepContent>
+                  <StepContent sx={{ pr: { xs: 0 } }}>
                     <ContactPerson event={event} />
                   </StepContent>
                 </Step>
                 {event.hasMerchandise && showShippingMethods() && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.5.title')}</StepLabel>
-                    <StepContent>
+                    <StepContent sx={{ pr: { xs: 0 } }}>
                       <Shipping event={event} />
                     </StepContent>
                   </Step>
@@ -571,12 +660,17 @@ const TicketForm: React.FC<Props> = ({
                       `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
                     )}
                   </StepLabel>
-                  <StepContent>
+                  <StepContent sx={{ pr: { xs: 0 } }}>
                     <Payment event={event} />
                   </StepContent>
                 </Step>
               </Stepper>
-              <Stack mt={2} ml={4}>
+              <Stack
+                ref={termsAndConditionsRef}
+                mt={2}
+                ml={{ xs: 1, md: 4 }}
+                sx={{ scrollMarginBottom: { xs: 220, md: 0 } }}
+              >
                 <RHFCheckbox
                   name="termsAndConditions"
                   label={
@@ -596,15 +690,22 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid item xs={12} md={4}>
+            <Grid item xs={12} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
               <PaymentOverviewBox event={event} />
             </Grid>
           </Grid>
+
+          <PaymentOverviewDrawer
+            event={event}
+            totalPrice={values.total}
+            onOpenChange={setIsPaymentOverviewDrawerOpen}
+          />
+
           <EmailConfirmation
             open={formStep === 2 && !isIframe}
             onClose={() => setFormStep(1)}
             // @ts-ignore
-            onConfirm={methods.handleSubmit(onSubmit)}
+            onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
           />
         </FormProvider>
       )}
@@ -613,7 +714,7 @@ const TicketForm: React.FC<Props> = ({
 };
 
 const CustomLink: React.FC<PropsWithChildren<LinkProps>> = ({ href = '', children, ...other }) => (
-  <Link href={href} {...other}>
+  <Link href={href} {...other} sx={{ color: 'inherit', textDecoration: 'underline' }}>
     {children}
   </Link>
 );

package/src/form/index.tsx

@@ -5,7 +5,7 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/uk';
 import 'dayjs/locale/sk';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactNode } from 'react';
 import TicketForm from '@form/TicketForm';
 import { GlobalProvider } from '@context/GlobalContext';
 import api from '@utils/axios';
@@ -33,6 +33,7 @@ export interface OrderFormProps {
   lang?: Languages;
   slots?: {
     showSnackbar: IGlobalContext['showSnackbar'];
+    headerSlot?: ReactNode;
   };
   user?: IUser;
   selectedReleaseId?: number;
@@ -112,6 +113,7 @@ const ClientRender: React.FC<OrderFormProps> = ({
             hasGopayIdSsr={options?.hasGopayId || false}
             isIframe={options?.isIframe}
             selectedReleaseId={selectedReleaseId}
+            headerSlot={slots?.headerSlot}
           />
         )}
       </GlobalProvider>

package/src/form/merchandise/MerchandiseSelection.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Grid } from '@mui/material';
+import { IEventProduct } from '@utils/types/event-product.type';
+import CustomSkeleton from '@components/CustomSkeleton';
+import MerchandiseSlider from './MerchandiseSlider';
+
+interface Props {
+  eventProducts: IEventProduct[];
+  eventId: number;
+  isLoading?: boolean;
+}
+
+const MerchandiseSelection: React.FC<Props> = ({ eventProducts, eventId, isLoading }) =>
+  isLoading ? (
+    [...Array(3)].map((item) => (
+      <Grid key={item} item xs={12} md={4}>
+        <CustomSkeleton height={334} />
+      </Grid>
+    ))
+  ) : (
+    <MerchandiseSlider eventProducts={eventProducts} eventId={eventId} />
+  );
+
+export default MerchandiseSelection;

package/src/form/merchandise/MerchandiseSlider.tsx

@@ -0,0 +1,62 @@
+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/payment/FeeBox.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { Box, Stack, Tooltip, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { fCurrency } from '@utils/formatNumber';
-import { Iconify } from '@components/iconify';
 import { IEvent } from '@utils/types/event.type';
-import useResponsive from '@hooks/useResponsive';
 import { useFormContext } from 'react-hook-form';
 import { ITicketForm } from '@utils/types/ticket.type';
 import useGlobal from '@hooks/useGlobal.ts';
@@ -15,7 +13,6 @@ interface Props {
 
 const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
   const { t, lang } = useGlobal();
-  const xs = useResponsive('only', 'xs');
   const { watch } = useFormContext<ITicketForm>();
   const values = watch();
   const isRight = align === 'right';
@@ -44,35 +41,11 @@ const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
         alignItems="center"
         spacing={1}
       >
-        <Stack direction="row" alignItems="center" spacing={1}>
-          <Tooltip
-            title={t('form.labels.price_including_service_fee', {
-              fee: fCurrency(values.totalFee ?? 0, lang, event.currency),
-            })}
-            placement={xs ? 'top' : 'left'}
-            arrow
-            sx={{ cursor: 'help' }}
-          >
-            <Stack alignItems="center">
-              <Iconify icon="carbon:information-filled" />
-            </Stack>
-          </Tooltip>
-          <Typography variant="subtitle1" sx={{ textAlign: 'right' }}>
-            {t('form.labels.total')}:
-          </Typography>
-        </Stack>
+        <Typography variant="subtitle1" sx={{ textAlign: 'right' }}>
+          {t('form.labels.total')}:
+        </Typography>
         <Typography variant="subtitle1">{fCurrency(values.total, lang, event.currency)}</Typography>
       </Stack>
-      {!!values.totalFee && (
-        <Typography
-          variant="caption"
-          sx={{
-            color: (theme) => theme.palette.grey.A700,
-          }}
-        >
-          {t('form.labels.with_fee')}
-        </Typography>
-      )}
     </Box>
   );
 };

package/src/form/payment/PaymentOverviewCheckbox.tsx

@@ -1,14 +1,6 @@
-import React, { JSX, useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Link,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { RHFCheckbox } from '@components/hook-form';
+import React, { JSX } from 'react';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
 import useGlobal from '@hooks/useGlobal.ts';
 import { Iconify } from '@components';
 
@@ -16,70 +8,79 @@ interface Props {
   checkboxName: string;
   label: string;
   value: string | JSX.Element;
-  modal: {
-    title: string;
-    description: string | JSX.Element;
-  };
 }
 
-const PaymentOverviewCheckbox: React.FC<Props> = ({ checkboxName, label, value, modal }) => {
+const PaymentOverviewCheckbox: React.FC<Props> = ({ checkboxName, label, value }) => {
   const { t } = useGlobal();
-  const [open, setOpen] = useState(false);
-
-  const handleOpen = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setOpen(true);
-  };
-  const handleClose = () => setOpen(false);
+  const { control } = useFormContext();
 
   return (
     <>
-      <RHFCheckbox
+      <Controller
         name={checkboxName}
-        label={
+        control={control}
+        render={({ field }) => (
           <Stack
             direction="row"
             justifyContent="space-between"
             alignItems="center"
+            useFlexGap
             spacing={1}
-            sx={{ width: '100%' }}
+            sx={{ width: '100%', mb: 0.5 }}
           >
-            <Typography variant="caption" sx={{ flex: 1 }}>
+            <Typography variant="body2" sx={{ flex: 1 }}>
               {label}
             </Typography>
-            <Stack alignItems="flex-end">
-              <Typography variant="caption" fontWeight="600">
+            <Box
+              sx={{
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Typography
+                variant="body2"
+                sx={{
+                  mr: field.value ? 0 : 1,
+                  ...(field.value
+                    ? {
+                        position: 'absolute',
+                        right: 0,
+                      }
+                    : {}),
+                }}
+              >
                 {value}
               </Typography>
-              <Link variant="caption" onClick={handleOpen}>
-                {t('more_info')}
-              </Link>
-            </Stack>
+              <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>
-        }
-        sx={{
-          width: 'calc(100% + 11px)',
-          mb: 0.5,
-          '& > .MuiTypography-root': {
-            width: '100%',
-          },
-        }}
+        )}
       />
-
-      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
-        <DialogTitle
-          sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-        >
-          {modal.title}
-          <IconButton onClick={handleClose} size="small">
-            <Iconify icon="carbon:close" />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent>
-          <Typography variant="body2">{modal.description}</Typography>
-        </DialogContent>
-      </Dialog>
     </>
   );
 };