@eventlook/sdk 1.7.6 → 1.7.8

package/src/form/PaymentOverviewBox.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Iconify, Image, TextIconLabel } from '@components';
-import { Box, Button, Divider, Grid, Stack, Typography } from '@mui/material';
+import { Box, Button, Divider, Grid, IconButton, Stack, Typography } from '@mui/material';
 import PaymentOverviewCheckbox from '@form/payment/PaymentOverviewCheckbox';
 import locationIcon from '@iconify/icons-carbon/location';
 import { getPlaceAsString } from '@utils/place';
@@ -27,6 +27,7 @@ import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import useDebounce from '@hooks/useDebounce';
 import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global';
 import { isInsuranceAvailable } from '@utils/insurance';
+import { useSeatPicker } from '@context/SeatPickerContext';
 
 interface Props {
   event: IEvent;
@@ -34,8 +35,9 @@ interface Props {
   hideBuyButton?: boolean;
 }
 
-const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyButton }) => {
+const PaymentOverviewBox: React.FC<Props> = ({ event, hideBuyButton }) => {
   const { t, lang, options } = useGlobal();
+  const { deselect } = useSeatPicker();
   const xs = useResponsive('only', 'xs');
   const md = useResponsive('only', 'md');
   const isMobile = useResponsive('down', 'md');
@@ -95,6 +97,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
             price: release?.price || 0,
             quantity: ticket.quantity,
             releaseId: ticket.releaseId,
+            location: ticket.location,
             products: ticket.products.map((product) => {
               const variant = release?.product?.eventProductVariants.find(
                 (variant) => variant.id === product.eventProductVariantId
@@ -423,7 +426,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
   return (
     <OverviewCard id="overview-card" stickyHeaderTop={options?.stickyHeaderTop || 0}>
       {!isMobile && (
-        <Stack className="overview-card__event-info" p={2} spacing={2}>
+        <Stack className="overview-card__event-info" spacing={2} sx={{ pt: 2, px: 2, pb: 1 }}>
           <Typography variant="h6">{event.name}</Typography>
           <Box>
             <Grid container spacing={1}>
@@ -487,18 +490,19 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
       )}
       <Stack
         className="overview-card__order-info"
-        // Keep horizontal padding on mobile even when `withoutPadding` — that
-        // flag is only meant to drop the vertical gap under the header, not let
-        // the rows run into the card edge.
         sx={{
           px: 2,
-          pt: { xs: 1.5, sm: 2 },
-          pb: { xs: withoutPadding ? 0 : 2, md: 2 },
+          // Desktop gets its top spacing from the event-info block above; on
+          // mobile that block isn't rendered, so pad the card edge directly.
+          pt: { xs: 2, md: 0 },
+          pb: 2,
         }}
         spacing={1.25}
         useFlexGap
       >
-        {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed', my: 1 }} />}
+        {!!selectedTickets.length && !isMobile && (
+          <Divider sx={{ borderStyle: 'dashed', mt: 0, mb: 1 }} />
+        )}
 
         {!!selectedTickets.length && (
           <Stack spacing={1}>
@@ -537,17 +541,29 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
               <Typography variant="body2">
                 {ticket.quantity}x {ticket.itemName}
               </Typography>
-              <Typography variant="body2">
-                {fCurrency(
-                  calculatePriceWithDiscount(
-                    ticket.price,
-                    promoCodesValues.percent,
-                    promoCodesValues.fixedDevidedTickets
-                  ) * Number(ticket.quantity),
-                  lang,
-                  event.currency
+              <Stack direction="row" alignItems="center" spacing={0.5}>
+                <Typography variant="body2">
+                  {fCurrency(
+                    calculatePriceWithDiscount(
+                      ticket.price,
+                      promoCodesValues.percent,
+                      promoCodesValues.fixedDevidedTickets
+                    ) * Number(ticket.quantity),
+                    lang,
+                    event.currency
+                  )}
+                </Typography>
+                {ticket.location?.id && (
+                  <IconButton
+                    size="small"
+                    aria-label={t('remove')}
+                    onClick={() => deselect(ticket.location!.id)}
+                    sx={{ p: 0.25, color: 'text.secondary' }}
+                  >
+                    <Iconify icon="eva:close-outline" width={16} height={16} />
+                  </IconButton>
                 )}
-              </Typography>
+              </Stack>
             </Stack>
             {ticket.products.map((product, index2) => (
               <Stack

package/src/form/PaymentPending.tsx

@@ -1,41 +1,24 @@
-import React, { lazy, useEffect, useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import bankTransferAnimation from '../utils/data/lottie/bank-transfer.json';
+import React from 'react';
+import { Box, CircularProgress, Typography } from '@mui/material';
 import { varBounce } from '@components/animate';
 import { m } from 'motion/react';
 import useGlobal from '@hooks/useGlobal';
 
-const Lottie = lazy(() => import('lottie-react'));
-
+// Payment-pending is a brief transitional screen (waiting on a bank transfer).
+// A spinner conveys "waiting" and avoids bundling lottie-web (~300 KB) just for a
+// looping animation here.
 const PaymentPending: React.FC = () => {
   const { t } = useGlobal();
-  const [LottieComponent, setLottieComponent] = useState<React.ComponentType<any> | null>(null);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    let isMounted = true;
-
-    import('lottie-react').then((module) => {
-      if (isMounted) {
-        setLottieComponent(() => module.default);
-      }
-    });
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
 
   return (
     <Box textAlign="center">
       <m.div variants={varBounce().in}>
-        <Typography variant="h4" sx={{ mb: 2, maxWidth: 600, mx: 'auto' }}>
+        <Typography variant="h4" sx={{ mb: 3, maxWidth: 600, mx: 'auto' }}>
           {t('event.tickets.payment_pending')}
         </Typography>
       </m.div>
       <Box maxWidth={600} mx="auto">
-        {LottieComponent ? <LottieComponent animationData={bankTransferAnimation} /> : null}
+        <CircularProgress size={64} thickness={4} />
       </Box>
     </Box>
   );

package/src/form/ReleaseWithMerchandise.tsx

@@ -139,7 +139,14 @@ const ReleaseWithMerchandise: React.FC<Props> = ({
           spacing={1}
           justifyContent="space-between"
           alignItems="center"
-          sx={{ width: '100%', backgroundColor: 'grey.200', p: 1, pl: 1.5, borderRadius: 1 }}
+          sx={{
+            width: '100%',
+            backgroundColor: (theme) =>
+              theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[800],
+            p: 1,
+            pl: 1.5,
+            borderRadius: 1,
+          }}
         >
           <Stack direction="row" spacing={2} alignItems="center">
             <Stack direction="row" spacing={0.5} alignItems="center">

package/src/form/TicketForm.tsx

@@ -19,6 +19,7 @@ import TicketSelection from '@form/tickets/TicketSelection';
 import ContactPerson from '@form/ContactPerson';
 import Payment from '@form/Payment';
 import EmailConfirmation from '@form/EmailConfirmation';
+import { SeatPickerProvider } from '@context/SeatPickerContext';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { PropsWithChildren } from '@utils/types/global.type';
 import { getSearchParamsInObject } from '@utils/url';
@@ -29,6 +30,8 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { postOrder } from '@modules/order';
 import { IEvent } from '@utils/types/event.type';
 import PaymentOverviewBox from '@form/PaymentOverviewBox';
+import RichText from '@components/RichText';
+import { isEmptyRichText } from '@utils/render-rich-text';
 import { IEcommerce, IPixels } from '@utils/types/gtm.type';
 import {
   getGtmAddPaymentInfo,
@@ -669,206 +672,243 @@ const TicketForm: React.FC<Props> = ({
           locale={lang}
           apiRef={stripeCheckoutRef}
         >
-          <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' }}
-              sx={{
-                mb: 2,
-              }}
+          <SeatPickerProvider>
+            <FormProvider
+              methods={methods}
+              // @ts-ignore -- handleSubmit type mismatch with FormProvider onSubmit prop
+              onSubmit={methods.handleSubmit(onSubmit, onInvalid)}
+              formId={EVENTLOOK_ORDER_FORM_ID}
             >
-              <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"
-                  sx={(theme) => ({
-                    [theme.breakpoints.down('sm')]: {
-                      '& .MuiStepContent-root': {
-                        borderLeftWidth: 0,
-                        paddingLeft: 0,
-                        marginLeft: 0,
+              <Stack
+                className="overview-card__event-info"
+                display={{ md: 'none' }}
+                sx={{
+                  mb: 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 }}>
+                  {!isEmptyRichText(event.purchaseInstructions) && (
+                    <Box
+                      sx={(theme) => ({
+                        display: 'flex',
+                        gap: 1.25,
+                        mb: 3,
+                        p: 2,
+                        borderRadius: 1,
+                        backgroundColor: theme.palette.action.hover,
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.875rem',
+                        lineHeight: 1.5,
+                      })}
+                    >
+                      <Box
+                        component="svg"
+                        viewBox="0 0 24 24"
+                        aria-hidden
+                        sx={{
+                          flexShrink: 0,
+                          width: 18,
+                          height: 18,
+                          mt: '1px',
+                          fill: 'currentColor',
+                        }}
+                      >
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+                      </Box>
+                      <RichText content={event.purchaseInstructions} />
+                    </Box>
+                  )}
+                  <Stepper
+                    orientation="vertical"
+                    sx={(theme) => ({
+                      [theme.breakpoints.down('sm')]: {
+                        '& .MuiStepContent-root': {
+                          borderLeftWidth: 0,
+                          paddingLeft: 0,
+                          marginLeft: 0,
+                        },
+                        '& .MuiStepConnector-line': { borderLeftWidth: 0 },
                       },
-                      '& .MuiStepConnector-line': { borderLeftWidth: 0 },
-                    },
-                  })}
-                >
-                  {event.type === EventType.RECURRING && (
+                    })}
+                  >
+                    {event.type === EventType.RECURRING && (
+                      <Step active>
+                        <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
+                        <StepContent sx={{ pr: { xs: 0 } }}>
+                          <TimeslotSelection event={event} />
+                        </StepContent>
+                      </Step>
+                    )}
                     <Step active>
-                      <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
+                      <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
                       <StepContent sx={{ pr: { xs: 0 } }}>
-                        <TimeslotSelection event={event} />
+                        {event.mapId && seatingIframeUrl ? (
+                          <TicketSelectionMap event={event} />
+                        ) : event.hasMerchandise ? (
+                          <TicketWithMerchandiseSelection event={event} />
+                        ) : (
+                          <TicketSelection event={event} />
+                        )}
                       </StepContent>
                     </Step>
-                  )}
-                  <Step active>
-                    <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
-                    <StepContent sx={{ pr: { xs: 0 } }}>
-                      {event.mapId && seatingIframeUrl ? (
-                        <TicketSelectionMap event={event} />
-                      ) : event.hasMerchandise ? (
-                        <TicketWithMerchandiseSelection event={event} />
-                      ) : (
-                        <TicketSelection event={event} />
-                      )}
-                    </StepContent>
-                  </Step>
-                  {event.hasMerchandise && eventProducts.length && (
+                    {event.hasMerchandise && eventProducts.length && (
+                      <Step active>
+                        <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
+                        <StepContent sx={{ pr: { xs: 0 } }}>
+                          <MerchandiseSelection
+                            eventProducts={eventProducts}
+                            eventId={event.id}
+                            isLoading={isLoading}
+                          />
+                        </StepContent>
+                      </Step>
+                    )}
                     <Step active>
-                      <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
+                      <StepLabel>{t('event.tickets.stepper.8.title')}</StepLabel>
                       <StepContent sx={{ pr: { xs: 0 } }}>
-                        <MerchandiseSelection
-                          eventProducts={eventProducts}
-                          eventId={event.id}
-                          isLoading={isLoading}
-                        />
+                        <Services event={event} />
                       </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 && (
+                    {event.children.length && (
+                      <Step active>
+                        <StepLabel>{t('event.tickets.stepper.7.title')}</StepLabel>
+                        <StepContent sx={{ pr: { xs: 0 } }}>
+                          <ChildEventSection events={event.children} />
+                        </StepContent>
+                      </Step>
+                    )}
                     <Step active>
-                      <StepLabel>{t('event.tickets.stepper.7.title')}</StepLabel>
+                      <StepLabel>{t('event.tickets.stepper.2.title')}</StepLabel>
                       <StepContent sx={{ pr: { xs: 0 } }}>
-                        <ChildEventSection events={event.children} />
+                        <ContactPerson event={event} />
                       </StepContent>
                     </Step>
-                  )}
-                  <Step active>
-                    <StepLabel>{t('event.tickets.stepper.2.title')}</StepLabel>
-                    <StepContent sx={{ pr: { xs: 0 } }}>
-                      <ContactPerson event={event} />
-                    </StepContent>
-                  </Step>
-                  {event.hasMerchandise && showShippingMethods() && (
+                    {event.hasMerchandise && showShippingMethods() && (
+                      <Step active>
+                        <StepLabel>{t('event.tickets.stepper.5.title')}</StepLabel>
+                        <StepContent sx={{ pr: { xs: 0 } }}>
+                          <Shipping event={event} />
+                        </StepContent>
+                      </Step>
+                    )}
                     <Step active>
-                      <StepLabel>{t('event.tickets.stepper.5.title')}</StepLabel>
+                      <StepLabel>
+                        {t(
+                          `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
+                        )}
+                      </StepLabel>
                       <StepContent sx={{ pr: { xs: 0 } }}>
-                        <Shipping event={event} />
+                        <Payment event={event} stripeReady={stripeReady} />
                       </StepContent>
                     </Step>
-                  )}
-                  <Step active>
-                    <StepLabel>
-                      {t(
-                        `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
-                      )}
-                    </StepLabel>
-                    <StepContent sx={{ pr: { xs: 0 } }}>
-                      <Payment event={event} stripeReady={stripeReady} />
-                    </StepContent>
-                  </Step>
-                </Stepper>
-                <Stack
-                  ref={termsAndConditionsRef}
-                  mt={2}
-                  ml={{ xs: 1, md: 4 }}
-                  sx={{ scrollMarginBottom: { xs: 220, md: 0 } }}
-                >
-                  <RHFCheckbox
-                    name="termsAndConditions"
-                    label={
-                      <>
-                        <Trans
-                          text="event.tickets.terms_and_conditions"
-                          values={{
-                            termsAndConditionsCompanies: options?.termsAndConditionsCompanies
-                              ? options.termsAndConditionsCompanies.join(t('and'))
-                              : ['Eventlook', 'GoPay'].join(` ${t('and')} `),
-                          }}
-                          components={{
-                            0: (
-                              <CustomLink key={2} href={links.termsAndConditions} target="_blank" />
-                            ),
-                            1: <CustomLink key={1} href={links.gdpr} target="_blank" />,
-                          }}
-                        />
-                      </>
-                    }
-                  />
-                  {values.ticketInsurance && (
+                  </Stepper>
+                  <Stack
+                    ref={termsAndConditionsRef}
+                    mt={2}
+                    ml={{ xs: 1, md: 4 }}
+                    sx={{ scrollMarginBottom: { xs: 220, md: 0 } }}
+                  >
                     <RHFCheckbox
-                      name="insuranceTermsAndConditions"
+                      name="termsAndConditions"
                       label={
                         <>
                           <Trans
-                            text="event.tickets.insurance.checkbox"
+                            text="event.tickets.terms_and_conditions"
+                            values={{
+                              termsAndConditionsCompanies: options?.termsAndConditionsCompanies
+                                ? options.termsAndConditionsCompanies.join(t('and'))
+                                : ['Eventlook', 'GoPay'].join(` ${t('and')} `),
+                            }}
                             components={{
                               0: (
                                 <CustomLink
                                   key={2}
-                                  href="https://eventigo.s3-central.vshosting.cloud/production/colonnade/pp-storno-cz-eventlook-012026.pdf"
-                                  target="_blank"
-                                />
-                              ),
-                              1: (
-                                <CustomLink
-                                  key={1}
-                                  href="https://eventigo.s3-central.vshosting.cloud/production/colonnade/ipid-storno-cz-112025.pdf"
+                                  href={links.termsAndConditions}
                                   target="_blank"
                                 />
                               ),
+                              1: <CustomLink key={1} href={links.gdpr} target="_blank" />,
                             }}
                           />
                         </>
                       }
                     />
-                  )}
-                </Stack>
-              </Grid>
-              <Grid size={12} sx={{ display: { xs: 'block', md: 'none' } }}>
-                <Divider sx={{ borderStyle: 'dashed' }} />
+                    {values.ticketInsurance && (
+                      <RHFCheckbox
+                        name="insuranceTermsAndConditions"
+                        label={
+                          <>
+                            <Trans
+                              text="event.tickets.insurance.checkbox"
+                              components={{
+                                0: (
+                                  <CustomLink
+                                    key={2}
+                                    href="https://eventigo.s3-central.vshosting.cloud/production/colonnade/pp-storno-cz-eventlook-012026.pdf"
+                                    target="_blank"
+                                  />
+                                ),
+                                1: (
+                                  <CustomLink
+                                    key={1}
+                                    href="https://eventigo.s3-central.vshosting.cloud/production/colonnade/ipid-storno-cz-112025.pdf"
+                                    target="_blank"
+                                  />
+                                ),
+                              }}
+                            />
+                          </>
+                        }
+                      />
+                    )}
+                  </Stack>
+                </Grid>
+                <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>
-              <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}
+
+              {!isIframe && (
+                <PaymentOverviewDrawer
+                  event={event}
+                  totalPrice={values.total}
+                  termsAndConditionsRef={termsAndConditionsRef}
+                  onOpenChange={setIsPaymentOverviewDrawerOpen}
+                />
+              )}
+
+              <EmailConfirmation
+                open={formStep === 2 && !isIframe}
+                onClose={() => setFormStep(1)}
+                // @ts-ignore -- handleSubmit type mismatch with onConfirm prop
+                onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
               />
-            )}
-
-            <EmailConfirmation
-              open={formStep === 2 && !isIframe}
-              onClose={() => setFormStep(1)}
-              // @ts-ignore -- handleSubmit type mismatch with onConfirm prop
-              onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
-            />
-          </FormProvider>
+            </FormProvider>
+          </SeatPickerProvider>
         </StripeCheckoutProvider>
       )}
     </Box>

package/src/form/services/index.tsx

@@ -49,6 +49,7 @@ const BorderedCheckbox: React.FC<BorderedCheckboxProps> = ({
       control={control}
       render={({ field }) => (
         <FormControlLabel
+          className="eventlook-service-row"
           control={
             <Checkbox
               {...field}