@eventlook/sdk 1.4.46-beta.6 → 1.4.46

package/src/form/ContactPerson.tsx

@@ -18,7 +18,7 @@ const ContactPerson: React.FC<Props> = ({ event }) => {
   const { t, content } = useGlobal();
 
   return (
-    <Grid container spacing={{ xs: 1, md: 2 }}>
+    <Grid container spacing={3}>
       <Grid item xs={12} md={6}>
         <RHFTextField name="firstName" label={t('form.labels.first_name')} />
       </Grid>

package/src/form/MerchandiseSelection.tsx

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

package/src/form/Payment.tsx

@@ -286,7 +286,7 @@ const Payment: React.FC<Props> = ({ event }) => {
                               src={payment.image.url}
                               sx={{
                                 height: '20px',
-                                '& .wrapper img': {
+                                '& img': {
                                   objectFit: 'contain',
                                 },
                               }}
@@ -320,7 +320,7 @@ const Payment: React.FC<Props> = ({ event }) => {
                                           maxWidth: '70px',
                                           display: 'inline-block',
                                           marginRight: 1,
-                                          '& .wrapper img': {
+                                          '& img': {
                                             objectFit: 'contain',
                                             objectPosition: 'left',
                                           },

package/src/form/PaymentOverviewBox.tsx

@@ -26,7 +26,6 @@ import { ICalculateShoppingCartDto, IShoppingCartDto } from '@utils/types/shoppi
 import { PromoCodeTypes } from '@utils/data/promo-code.ts';
 import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import useDebounce from '@hooks/useDebounce';
-import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
 
 interface Props {
   event: IEvent;
@@ -55,9 +54,9 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     totalFee,
     isPaymentVerify,
     ticketInsurance,
+    ticketInsurancePricePerUnit,
     smsNotification,
     smsNotificationPrice,
-    ticketInsurancePricePerUnit,
   } = values;
   const tickets: Record<string, ITicketFormTicket[]> = useWatch({
     name: 'tickets',
@@ -447,8 +446,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
               />
             }
             sx={{
-              backgroundColor: (theme) =>
-                theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+              backgroundColor: (theme) => theme.palette.grey.A100,
               borderRadius: 1,
             }}
           >
@@ -477,34 +475,6 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
       )}
       <Stack className="overview-card__order-info" p={2} spacing={1}>
         {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed' }} />}
-
-        {!!selectedTickets.length && (
-          <>
-            {/* TODO: Uncomment this when Colonnade response - must update terms and conditions and email info */}
-            <PaymentOverviewCheckbox
-              checkboxName="ticketInsurance"
-              label={t('event.tickets.insurance.label')}
-              value={
-                <>
-                  {ticketInsurance && totalItemCount.totalTickets > 0 ? '' : '+ '}
-                  {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}
-                  {t('event.tickets.insurance.per_ticket')}
-                </>
-              }
-            />
-            <PaymentOverviewCheckbox
-              checkboxName="smsNotification"
-              label={t('event.tickets.sms_notification.label')}
-              value={
-                <>
-                  {smsNotification && totalItemCount.totalTickets > 0 ? '' : '+ '}
-                  {fCurrency(smsNotificationPrice, lang, event.currency)}
-                </>
-              }
-            />
-            <Divider sx={{ borderStyle: 'dashed' }} />
-          </>
-        )}
         {selectedTickets.map((ticket, index) => (
           <Box key={index}>
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
@@ -588,6 +558,22 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
             </Typography>
           </Stack>
         )}
+        {ticketInsurance && totalItemCount.totalTickets > 0 && (
+          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+            <Typography variant="caption">{t('form.labels.ticket_insurance')}</Typography>
+            <Typography variant="caption">
+              {fCurrency(values.ticketInsurancePrice, lang, event.currency)}
+            </Typography>
+          </Stack>
+        )}
+        {smsNotification && totalItemCount.totalTickets > 0 && (
+          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+            <Typography variant="caption">{t('form.labels.sms_notification')}</Typography>
+            <Typography variant="caption">
+              {fCurrency(values.smsNotificationPrice, lang, event.currency)}
+            </Typography>
+          </Stack>
+        )}
         {!!total && !!totalFee && (
           <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
             <Typography variant="caption">{t('form.labels.service_fee')}</Typography>
@@ -597,15 +583,61 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
         {((!!selectedTickets.length && isMobile) || !isMobile) && (
           <Divider sx={{ borderStyle: 'dashed' }} />
         )}
+        {!!selectedTickets.length && (
+          <>
+            {/* TODO: Uncomment this when Colonnade response - must update terms and conditions and email info */}
+            {/*<PaymentOverviewCheckbox*/}
+            {/*  checkboxName="ticketInsurance"*/}
+            {/*  label={t('event.tickets.insurance.label')}*/}
+            {/*  value={*/}
+            {/*    <>*/}
+            {/*      + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
+            {/*      {t('event.tickets.insurance.per_ticket')}*/}
+            {/*    </>*/}
+            {/*  }*/}
+            {/*  modal={{*/}
+            {/*    title: t('event.tickets.insurance.label'),*/}
+            {/*    description: (*/}
+            {/*      <>*/}
+            {/*        <Typography variant="body2" paragraph>*/}
+            {/*          {t('event.tickets.insurance.modal.description')}*/}
+            {/*        </Typography>*/}
+            {/*        <Typography variant="body2" paragraph>*/}
+            {/*          {t('event.tickets.insurance.modal.coverage')}*/}
+            {/*        </Typography>*/}
+            {/*        <Typography variant="body2" sx={{ fontWeight: 600 }}>*/}
+            {/*          {t('event.tickets.insurance.modal.price')}:{' '}*/}
+            {/*          {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}*/}
+            {/*          {t('event.tickets.insurance.per_ticket')}*/}
+            {/*        </Typography>*/}
+            {/*      </>*/}
+            {/*    ),*/}
+            {/*  }}*/}
+            {/*/>*/}
+            <PaymentOverviewCheckbox
+              checkboxName="smsNotification"
+              label={t('event.tickets.sms_notification.label')}
+              value={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
+              modal={{
+                title: t('event.tickets.sms_notification.label'),
+                description: (
+                  <>
+                    <Typography variant="body2" paragraph>
+                      {t('event.tickets.sms_notification.modal.description')}
+                    </Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                      {t('event.tickets.sms_notification.modal.price')}:{' '}
+                      {fCurrency(smsNotificationPrice, lang, event.currency)}
+                    </Typography>
+                  </>
+                ),
+              }}
+            />
+            <Divider sx={{ borderStyle: 'dashed' }} />
+          </>
+        )}
         <FeeBox event={event} />
-        <LoadingButton
-          type="submit"
-          form={EVENTLOOK_ORDER_FORM_ID}
-          variant="contained"
-          size="large"
-          fullWidth
-          sx={{ height: { xs: 36, md: 40 } }}
-        >
+        <LoadingButton type="submit" variant="contained" size="large" fullWidth>
           {t(isPaymentVerify ? 'verify' : 'buy')}
         </LoadingButton>
       </Stack>

package/src/form/PaymentPending.tsx

@@ -17,7 +17,7 @@ const PaymentPending: React.FC = () => {
         </Typography>
       </m.div>
       <Box maxWidth={600} mx="auto">
-        {/* <Lottie animationData={bankTransferAnimation} /> */}
+        <Lottie animationData={bankTransferAnimation} />
       </Box>
     </Box>
   );

package/src/form/ReleaseWithMerchandise.tsx

@@ -0,0 +1,230 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Button, IconButton, Stack, Typography } from '@mui/material';
+import { Iconify } from '@components/iconify';
+import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
+import { IReleaseShort } from '@utils/types/release.type';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { IEventProductForm } from '@utils/types/product.type';
+import { fCurrency } from '@utils/formatNumber';
+import { Currencies } from '@utils/data/currency';
+import { getSelectedQuantityByVariant } from '@utils/product';
+import ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';
+import useGlobal from '@hooks/useGlobal.ts';
+
+interface Props {
+  eventId: number;
+  release: IReleaseShort;
+  activeReleases: IReleaseShort[];
+  currency: Currencies;
+  index: number;
+}
+
+const ReleaseWithMerchandise: React.FC<Props> = ({
+  eventId,
+  release,
+  activeReleases,
+  currency,
+  index,
+}) => {
+  const { t, lang } = useGlobal();
+  const [openVariantDialog, setOpenVariantDialog] = useState<'add' | 'increase' | null>(null);
+  const { setValue } = useFormContext<ITicketForm>();
+  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
+  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
+  const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+  const countTickets = addedRelease?.quantity || 0;
+
+  const isReleaseSelected = (id: number) => !!tickets.find((ticket) => ticket.releaseId === id);
+
+  const getSelectedQuantity = (id: number) =>
+    tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;
+
+  const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {
+    const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
+    const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;
+    return availableQuantity > 10 ? 10 : availableQuantity;
+  };
+
+  const isMaxQuantity = (releaseId: number) => {
+    const release = tickets.find((ticket) => ticket.releaseId === releaseId);
+    if (!release) return false;
+    return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);
+  };
+
+  const addRelease = (product?: IEventProductForm) => {
+    setValue(`tickets.${eventId}`, [
+      ...tickets,
+      {
+        releaseId: release.id,
+        quantity: 1,
+        itemName: '',
+        price: 0,
+        products: product ? [product] : [],
+        extraFields: release.extraFields?.length
+          ? [
+              release.extraFields.map((field) => ({
+                eventExtraFieldId: field.id,
+                value: '',
+              })),
+            ]
+          : [],
+      },
+    ]);
+    setOpenVariantDialog(null);
+  };
+
+  const increaseQuantity = (product?: IEventProductForm) => {
+    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+    if (addedRelease) {
+      const newQuantity = Number(addedRelease.quantity) + 1;
+      const maxQuantity = getAvailableTicketsForRelease(addedRelease);
+      setValue(
+        `tickets.${eventId}`,
+        tickets.map((ticket) =>
+          ticket.releaseId === release.id
+            ? {
+                ...ticket,
+                quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,
+                products: product ? [...ticket.products, product] : ticket.products,
+                extraFields: release.extraFields?.length
+                  ? [
+                      ...ticket.extraFields,
+                      release.extraFields.map((field) => ({
+                        eventExtraFieldId: field.id,
+                        value: '',
+                      })),
+                    ]
+                  : [],
+              }
+            : ticket
+        )
+      );
+      setOpenVariantDialog(null);
+    }
+  };
+
+  const decreaseQuantity = useCallback(() => {
+    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
+    if (addedRelease) {
+      const newQuantity = Number(addedRelease.quantity) - 1;
+      if (newQuantity < 1) {
+        setValue(
+          `tickets.${eventId}`,
+          tickets.filter((ticket) => ticket.releaseId !== release.id)
+        );
+      } else {
+        setValue(
+          `tickets.${eventId}`,
+          tickets.map((ticket) => {
+            if (ticket.releaseId !== release.id) return ticket;
+
+            return {
+              ...ticket,
+              quantity: newQuantity,
+              products: ticket?.products?.slice(0, -1), // non-mutating "pop"
+              extraFields: ticket?.extraFields?.slice(0, -1),
+            };
+          })
+        );
+      }
+    }
+  }, [tickets, release.id, setValue]);
+
+  return (
+    <Box>
+      <Stack direction="row" spacing={1}>
+        <Stack
+          direction="row"
+          spacing={1}
+          justifyContent="space-between"
+          alignItems="center"
+          sx={{ width: '100%', backgroundColor: 'grey.200', p: 1, pl: 1.5, borderRadius: 1 }}
+        >
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              <Iconify
+                icon="ion:ticket-outline"
+                color="primary.main"
+                sx={{ width: 24, height: 24 }}
+              />
+              {release.product && (
+                <>
+                  <Typography fontSize={20} lineHeight={1}>
+                    +
+                  </Typography>
+                  <Iconify
+                    icon="lucide-lab:shirt-t"
+                    color="primary.main"
+                    sx={{ width: 24, height: 24 }}
+                  />
+                </>
+              )}
+            </Stack>
+            <Typography color="grey.500">
+              {release.releaseCategoryName} - {release.name} -{' '}
+              {fCurrency(release.price, lang, currency)}
+            </Typography>
+          </Stack>
+          {isReleaseSelected(release.id) ? (
+            <Stack direction="row" spacing={1} py={0.5}>
+              <IconButton onClick={() => decreaseQuantity()} size="small" color="primary">
+                <Iconify icon="eva:minus-fill" />
+              </IconButton>
+              <Typography color="grey.500">{getSelectedQuantity(release.id)}</Typography>
+              <IconButton
+                onClick={() =>
+                  release.product ? setOpenVariantDialog('increase') : increaseQuantity()
+                }
+                size="small"
+                color="primary"
+                disabled={isMaxQuantity(release.id)}
+              >
+                <Iconify icon="eva:plus-fill" />
+              </IconButton>
+            </Stack>
+          ) : (
+            <Button
+              onClick={() =>
+                !release.locked && (release.product ? setOpenVariantDialog('add') : addRelease())
+              }
+              variant="contained"
+              disabled={release.locked}
+            >
+              {t('add')}
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+      <Typography
+        variant="caption"
+        content="div"
+        mt={2}
+        mb={release.extraFields?.length ? 2 : 0}
+        display="block"
+      >
+        {release.description}
+      </Typography>
+      {release.extraFields && release.extraFields.length > 0 && (
+        <ReleaseExtraFields
+          release={release}
+          eventId={eventId}
+          releaseIndex={index}
+          quantity={countTickets}
+        />
+      )}
+      {release.product && (
+        <ProductVariantsDialog
+          eventProduct={release.product}
+          openDialog={!!openVariantDialog}
+          callback={openVariantDialog === 'increase' ? increaseQuantity : addRelease}
+          onClose={() => setOpenVariantDialog(null)}
+          selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
+          eventId={eventId}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ReleaseWithMerchandise;

package/src/form/TicketForm.tsx

@@ -14,7 +14,7 @@ import {
   Typography,
 } from '@mui/material';
 import dayjs from 'dayjs';
-import TicketSelection from '@form/tickets/TicketSelection';
+import TicketSelection from '@form/TicketSelection';
 import ContactPerson from '@form/ContactPerson';
 import Payment from '@form/Payment';
 import EmailConfirmation from '@form/EmailConfirmation';
@@ -44,8 +44,8 @@ import {
 import ReleaseCountdown from '@form/ReleaseCountdown';
 import { cloneObject } from '@utils/global';
 import PaymentPending from '@form/PaymentPending';
-import MerchandiseSelection from '@form/merchandise/MerchandiseSelection';
-import TicketWithMerchandiseSelection from '@form/tickets/TicketWithMerchandiseSelection';
+import MerchandiseSelection from '@form/MerchandiseSelection';
+import TicketWithMerchandiseSelection from '@form/TicketWithMerchandiseSelection';
 import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import Shipping from '@form/Shipping';
 import useErrors from '@hooks/useErrors';
@@ -53,12 +53,9 @@ import { EventType } from '@utils/data/event';
 import TimeslotSelection from '@form/TimeslotSelection';
 import useGlobal from '@hooks/useGlobal';
 import { Trans } from '@components/Trans';
-import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_ID } from '@utils/data/global.ts';
+import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
 import ChildEventSection from './ChildEvents';
-import TicketSelectionMap from '@form/tickets/TicketSelectionMap';
-import PaymentOverviewDrawer from './PaymentOverviewDrawer';
-import { getPlaceAsString } from '@utils/place';
-import Services from '@form/services';
+import TicketSelectionMap from '@form/TicketSelectionMap.tsx';
 
 interface Props {
   event: IEvent;
@@ -66,7 +63,6 @@ interface Props {
   selectedReleaseId?: number;
   isIframe?: boolean;
   isInline?: boolean;
-  headerSlot?: React.ReactNode;
 }
 
 const TicketForm: React.FC<Props> = ({
@@ -75,7 +71,6 @@ const TicketForm: React.FC<Props> = ({
   selectedReleaseId,
   isIframe,
   isInline,
-  headerSlot,
 }) => {
   const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } =
     useGlobal();
@@ -449,7 +444,7 @@ const TicketForm: React.FC<Props> = ({
   }, [window.location.search]);
 
   useEffect(() => {
-    const subscription = methods.watch((value) => {
+    const subscription = methods.watch((value, { name }) => {
       if (
         JSON.stringify(defaultValues) !== JSON.stringify(value) &&
         !hasFiredBeginCheckout.current
@@ -476,7 +471,7 @@ const TicketForm: React.FC<Props> = ({
   useEffect(() => {
     if (hasGopayId || isPaying || paymentRedirect) {
       if (options?.autoscrollAfterViewChange) {
-        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_CONTAINER_ID);
+        const orderForm = document.getElementById(EVENTLOOK_ORDER_FORM_ID);
         if (orderForm) {
           orderForm.scrollIntoView({ behavior: 'smooth' });
         }
@@ -488,7 +483,7 @@ const TicketForm: React.FC<Props> = ({
     return <ReleaseCountdown event={event} setShowReleaseDate={setShowReleaseDate} />;
 
   return (
-    <Box id={EVENTLOOK_ORDER_FORM_CONTAINER_ID}>
+    <Box id={EVENTLOOK_ORDER_FORM_ID}>
       {hasGopayId ? (
         <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} pixels={pixels} />
       ) : isPaying ? (
@@ -501,45 +496,21 @@ const TicketForm: React.FC<Props> = ({
           isInline={isInline}
         />
       ) : (
-        <FormProvider
-          methods={methods}
-          // @ts-ignore
-          onSubmit={methods.handleSubmit(onSubmit)}
-          formId={EVENTLOOK_ORDER_FORM_ID}
-        >
-          <Stack
+        // @ts-ignore
+        <FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
+          <Typography
             className="overview-card__event-info"
             display={{ md: 'none' }}
+            variant="h4"
             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>
+            {event.name} - {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
+          </Typography>
           <Grid container spacing={2}>
             <Grid item xs={12} md={8}>
-              <Stepper
-                orientation="vertical"
-                sx={(theme) => ({
-                  [theme.breakpoints.down('sm')]: {
-                    '& .MuiStepContent-root': {
-                      borderLeftWidth: 0,
-                      paddingLeft: 0,
-                      marginLeft: 0,
-                    },
-                    '& .MuiStepConnector-line': { borderLeftWidth: 0 },
-                  },
-                })}
-              >
+              <Stepper orientation="vertical">
                 {event.type === EventType.RECURRING && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
@@ -572,12 +543,6 @@ const TicketForm: React.FC<Props> = ({
                     </StepContent>
                   </Step>
                 )}
-                <Step active>
-                  <StepLabel>{t('event.tickets.stepper.8.title')}</StepLabel>
-                  <StepContent>
-                    <Services event={event} />
-                  </StepContent>
-                </Step>
                 {event.children.length && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.7.title')}</StepLabel>
@@ -611,7 +576,7 @@ const TicketForm: React.FC<Props> = ({
                   </StepContent>
                 </Step>
               </Stepper>
-              <Stack mt={2} ml={{ xs: 1, md: 4 }}>
+              <Stack mt={2} ml={4}>
                 <RHFCheckbox
                   name="termsAndConditions"
                   label={
@@ -631,13 +596,10 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid item xs={12} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
+            <Grid item xs={12} md={4}>
               <PaymentOverviewBox event={event} />
             </Grid>
           </Grid>
-
-          <PaymentOverviewDrawer event={event} totalPrice={values.total} />
-
           <EmailConfirmation
             open={formStep === 2 && !isIframe}
             onClose={() => setFormStep(1)}
@@ -651,7 +613,7 @@ const TicketForm: React.FC<Props> = ({
 };
 
 const CustomLink: React.FC<PropsWithChildren<LinkProps>> = ({ href = '', children, ...other }) => (
-  <Link href={href} {...other} sx={{ color: 'inherit', textDecoration: 'underline' }}>
+  <Link href={href} {...other}>
     {children}
   </Link>
 );