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

package/src/form/TicketForm.tsx

@@ -3,6 +3,7 @@ import PaymentSuccess from '@form/PaymentSuccess';
 import FormProvider, { RHFCheckbox } from '@components/hook-form';
 import {
   Box,
+  Divider,
   Grid,
   Link,
   LinkProps,
@@ -14,7 +15,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 +45,22 @@ 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 useScrollToFirstError from '@hooks/useScrollToFirstError';
 import { Trans } from '@components/Trans';
-import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global';
+import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_ID } from '@utils/data/global';
 import ChildEventSection from './ChildEvents';
-import TicketSelectionMap from '@form/TicketSelectionMap';
+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,33 @@ interface Props {
   selectedReleaseId?: number;
   isIframe?: boolean;
   isInline?: boolean;
+  headerSlot?: React.ReactNode;
 }
 
+const getCartUniqueItemCount = (formValues: ITicketForm) => {
+  const flatTickets = Object.values(formValues.tickets ?? {}).flat();
+  const ticketsCount = flatTickets.reduce(
+    (sum, ticket) => sum + (Number(ticket.quantity) > 0 ? 1 : 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 +104,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 +113,8 @@ const TicketForm: React.FC<Props> = ({
   const hasFiredViewCart = useRef(false);
   const hasFiredBeginCheckout = useRef(false);
   const hasFiredPaymentMethod = useRef(false);
+  const termsAndConditionsRef = useRef<HTMLDivElement | null>(null);
+
   const item: IEcommerce = {
     currency: event.currency,
     items: [
@@ -274,11 +301,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 +358,11 @@ const TicketForm: React.FC<Props> = ({
     defaultValues,
   });
   const values = methods.watch();
+  const cartItemCount = getCartUniqueItemCount(values);
+  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 +492,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 +519,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 +531,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 +544,65 @@ const TicketForm: React.FC<Props> = ({
           isInline={isInline}
         />
       ) : (
-        // @ts-ignore -- FormProvider expects stricter form types
-        <FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
-          <Typography
+        <FormProvider
+          methods={methods}
+          // @ts-ignore -- handleSubmit type mismatch with FormProvider onSubmit prop
+          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}
+            </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 ? cartItemCount * 4 + 18 : 0,
+                md: 0,
+              },
+            }}
+          >
             <Grid size={{ 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 +615,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 +624,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 +658,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 +688,28 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid size={{ xs: 12, md: 4 }}>
-              <PaymentOverviewBox event={event} />
+            <Grid size={12} sx={{ display: { xs: 'block', md: 'none' } }}>
+              <Divider sx={{ borderStyle: 'dashed' }} />
+            </Grid>
+            <Grid size={{ xs: 12, md: 4 }} sx={{ mt: { xs: 0, md: 0 } }}>
+              <PaymentOverviewBox event={event} withoutPadding />
             </Grid>
           </Grid>
+
+          {!isIframe && (
+            <PaymentOverviewDrawer
+              event={event}
+              totalPrice={values.total}
+              termsAndConditionsRef={termsAndConditionsRef}
+              onOpenChange={setIsPaymentOverviewDrawerOpen}
+            />
+          )}
+
           <EmailConfirmation
             open={formStep === 2 && !isIframe}
             onClose={() => setFormStep(1)}
-            // @ts-ignore -- handleSubmit return type mismatch with onConfirm prop
-            onConfirm={methods.handleSubmit(onSubmit)}
+            // @ts-ignore -- handleSubmit type mismatch with onConfirm prop
+            onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
           />
         </FormProvider>
       )}
@@ -613,7 +718,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} size={{ 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, -2.5),
+        }}
+      >
+        <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';
@@ -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>
   );
 };