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

package/src/form/Shipping.tsx

@@ -46,7 +46,6 @@ const Shipping: React.FC<Props> = ({ event }) => {
     [products]
   );
   const shippingMethodId = watch('shipping.shippingMethodId');
-  const branchId = watch('shipping.branchId');
   const [displayBranchName, setDisplayBranchName] = useState<string | null>(null);
   const [firstRender, setFirstRender] = useState<boolean>(true);
   const filteredShippingMethods = useMemo(
@@ -83,9 +82,21 @@ const Shipping: React.FC<Props> = ({ event }) => {
     }
   };
 
+  const openPacketaWidget = () => {
+    const interval = setInterval(() => {
+      if (window.Packeta && window.Packeta.Widget) {
+        clearInterval(interval);
+        window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
+          language: lang,
+        });
+      }
+    }, 100);
+  };
+
   const handleChangeBranch = () => {
     setValue('shipping.branchId', null);
     setDisplayBranchName(null);
+    openPacketaWidget();
   };
 
   useEffect(() => {
@@ -103,25 +114,14 @@ const Shipping: React.FC<Props> = ({ event }) => {
     if (selectedShippingMethod) {
       setValue('shipping.price', selectedShippingMethod.price);
 
-      if (selectedShippingMethod.type === ShippingTypes.PACKETA) {
-        if (!branchId) {
-          const interval = setInterval(() => {
-            if (window.Packeta && window.Packeta.Widget) {
-              clearInterval(interval);
-              window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
-                language: lang,
-              });
-            }
-          }, 100);
-        }
-      } else {
+      if (selectedShippingMethod.type !== ShippingTypes.PACKETA) {
         setValue('shipping.branchId', null);
         setDisplayBranchName(null);
       }
     } else {
       setValue('shipping.price', 0);
     }
-  }, [shippingMethodId, shippingMethods, branchId]);
+  }, [shippingMethodId, shippingMethods]);
 
   return (
     <>
@@ -136,36 +136,54 @@ const Shipping: React.FC<Props> = ({ event }) => {
                 {t('event.tickets.stepper.5.error')}
               </Typography>
             ) : (
-              <Controller
-                name="shipping.shippingMethodId"
-                control={control}
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl component="fieldset" sx={{ width: '100%' }}>
-                    <RadioGroup {...field}>
-                      {filteredShippingMethods.map((shippingMethod) => (
-                        <ShippingMethodItem
-                          key={shippingMethod.id}
-                          active={Number(shippingMethodId) === shippingMethod.id}
-                        >
-                          <FormControlLabel
-                            value={shippingMethod.id}
-                            control={<Radio />}
-                            label={
-                              <Stack
-                                direction="row"
-                                justifyContent="space-between"
-                                alignItems="center"
-                                width="100%"
-                              >
-                                <Stack direction="row" alignItems="center">
-                                  <Box
-                                    sx={{
-                                      marginRight: 2,
-                                    }}
-                                  >
-                                    <Typography sx={{ lineHeight: 1.2 }}>
-                                      {t(`shipping_method.types.${shippingMethod.type}`)}
-                                    </Typography>
+              <>
+                <Controller
+                  name="shipping.shippingMethodId"
+                  control={control}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl component="fieldset" sx={{ width: '100%' }}>
+                      <RadioGroup
+                        {...field}
+                        onChange={(event, value) => {
+                          field.onChange(event);
+                          const selectedShippingMethod = filteredShippingMethods.find(
+                            (method) => method.id === Number(value)
+                          );
+
+                          if (selectedShippingMethod?.type === ShippingTypes.PACKETA) {
+                            openPacketaWidget();
+                          }
+                        }}
+                      >
+                        {filteredShippingMethods.map((shippingMethod) => (
+                          <ShippingMethodItem
+                            key={shippingMethod.id}
+                            active={Number(shippingMethodId) === shippingMethod.id}
+                            hasError={!!error}
+                            sx={{
+                              '& .MuiFormControlLabel-labelPlacementEnd': {
+                                mr: 0,
+                                width: '100%',
+                              },
+                            }}
+                          >
+                            <FormControlLabel
+                              value={shippingMethod.id}
+                              control={<Radio />}
+                              label={
+                                <Stack
+                                  direction="row"
+                                  justifyContent="space-between"
+                                  alignItems="center"
+                                  width="100%"
+                                >
+                                  <Stack direction="column">
+                                    <Stack direction="row" alignItems="center" spacing={1}>
+                                      <Typography sx={{ lineHeight: 1.2 }}>
+                                        {t(`shipping_method.types.${shippingMethod.type}`)}
+                                      </Typography>
+                                      {paymentImages[shippingMethod.type]}
+                                    </Stack>
                                     {displayBranchName &&
                                       shippingMethod.type === ShippingTypes.PACKETA &&
                                       shippingMethod.id === Number(shippingMethodId) && (
@@ -173,37 +191,35 @@ const Shipping: React.FC<Props> = ({ event }) => {
                                           {displayBranchName}
                                         </Typography>
                                       )}
-                                  </Box>
-                                  {paymentImages[shippingMethod.type]}
+                                  </Stack>
+                                  {shippingMethod.type === ShippingTypes.PACKETA &&
+                                    shippingMethod.id === Number(shippingMethodId) && (
+                                      <Box>
+                                        <Button
+                                          onClick={handleChangeBranch}
+                                          variant="outlined"
+                                          size="small"
+                                          sx={{ px: 1, whiteSpace: 'nowrap' }}
+                                        >
+                                          {t('event.tickets.shipping.choose_address')}
+                                        </Button>
+                                      </Box>
+                                    )}
                                 </Stack>
-                                {shippingMethod.type === ShippingTypes.PACKETA &&
-                                  shippingMethod.id === Number(shippingMethodId) &&
-                                  branchId && (
-                                    <Box>
-                                      <Button
-                                        onClick={handleChangeBranch}
-                                        variant="outlined"
-                                        size="small"
-                                      >
-                                        {t('change')}
-                                      </Button>
-                                    </Box>
-                                  )}
-                              </Stack>
-                            }
-                            sx={{
-                              '&:not(:last-of-type)': {
-                                mb: 0,
-                              },
-                              '& .MuiFormControlLabel-label': {
-                                width: '100%',
-                                mr: 0,
-                              },
-                            }}
-                          />
-                        </ShippingMethodItem>
-                      ))}
-                    </RadioGroup>
+                              }
+                              sx={{
+                                '&:not(:last-of-type)': {
+                                  mb: 0,
+                                },
+                                '& .MuiFormControlLabel-label': {
+                                  width: '100%',
+                                  mr: 0,
+                                },
+                              }}
+                            />
+                          </ShippingMethodItem>
+                        ))}
+                      </RadioGroup>
 
                     {!!error && (
                       <FormHelperText error={!!error} sx={{ mx: 0 }}>
@@ -213,6 +229,7 @@ const Shipping: React.FC<Props> = ({ event }) => {
                   </FormControl>
                 )}
               />
+              </>
             )}
           </>
         )}

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
+          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,26 @@ 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>
+
+          <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
+            onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
           />
         </FormProvider>
       )}
@@ -613,7 +716,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;