@eventlook/sdk 1.4.45 → 1.4.46-beta.1

package/.env.example

@@ -0,0 +1 @@
+GITLAB_TOKEN=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventlook/sdk",
-  "version": "1.4.45",
+  "version": "1.4.46-beta.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -75,6 +75,8 @@
     "chokidar-cli": "^3.0.0",
     "concurrently": "^9.1.2",
     "dayjs": "^1.11.13",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.4.0",

package/rollup.config.mjs

@@ -63,6 +63,8 @@ export default {
     'swr',
     'mui-tel-input',
     '@seat-picker/seat-picker-sdk',
+    'embla-carousel',
+    'embla-carousel-react',
     '@mui/material',
     '@emotion/react',
     '@emotion/styled',

package/src/components/hook-form/FormProvider.tsx

@@ -7,12 +7,15 @@ type Props = {
   children: React.ReactNode;
   methods: UseFormReturn<any>;
   onSubmit?: VoidFunction;
+  formId?: string;
 };
 
-export default function FormProvider({ children, onSubmit, methods }: Props) {
+export default function FormProvider({ children, onSubmit, methods, formId }: Props) {
   return (
     <Form {...methods}>
-      <form onSubmit={onSubmit}>{children}</form>
+      <form id={formId} onSubmit={onSubmit}>
+        {children}
+      </form>
     </Form>
   );
 }

package/src/form/ChildEventDialog.tsx

@@ -2,10 +2,10 @@ import useActiveEventProducts from '@hooks/data/useActiveEventProducts';
 import { Dialog, DialogContent, Stack, Step, StepContent, StepLabel, Stepper } from '@mui/material';
 import { IEvent } from '@utils/types/event.type';
 import React from 'react';
-import TicketWithMerchandiseSelection from './TicketWithMerchandiseSelection';
-import TicketSelection from './TicketSelection';
+import TicketWithMerchandiseSelection from './tickets/TicketWithMerchandiseSelection';
+import TicketSelection from './tickets/TicketSelection';
 import useGlobal from '@hooks/useGlobal';
-import MerchandiseSelection from './MerchandiseSelection';
+import MerchandiseSelection from './merchandise/MerchandiseSelection';
 
 interface Props {
   event: IEvent;

package/src/form/ContactPerson.tsx

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

package/src/form/PaymentOverviewBox.tsx

@@ -26,6 +26,7 @@ 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;
@@ -54,9 +55,9 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     totalFee,
     isPaymentVerify,
     ticketInsurance,
-    ticketInsurancePricePerUnit,
     smsNotification,
     smsNotificationPrice,
+    ticketInsurancePricePerUnit,
   } = values;
   const tickets: Record<string, ITicketFormTicket[]> = useWatch({
     name: 'tickets',
@@ -446,7 +447,8 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
               />
             }
             sx={{
-              backgroundColor: (theme) => theme.palette.grey.A100,
+              backgroundColor: (theme) =>
+                theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
               borderRadius: 1,
             }}
           >
@@ -475,6 +477,34 @@ 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}>
@@ -558,22 +588,6 @@ 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>
@@ -583,61 +597,14 @@ 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" variant="contained" size="large" fullWidth>
+        <LoadingButton
+          type="submit"
+          form={EVENTLOOK_ORDER_FORM_ID}
+          variant="contained"
+          size="large"
+          fullWidth
+        >
           {t(isPaymentVerify ? 'verify' : 'buy')}
         </LoadingButton>
       </Stack>

package/src/form/PaymentOverviewDrawer.tsx

@@ -0,0 +1,169 @@
+import { Box, Button, Drawer, styled, Typography } from '@mui/material';
+import { grey } from '@mui/material/colors';
+import React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import PaymentOverviewBox from './PaymentOverviewBox';
+import { IEvent } from '@utils/types/event.type';
+import useGlobal from '@hooks/useGlobal';
+import { fCurrency } from '@utils/formatNumber';
+import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
+
+interface Props {
+  event: IEvent;
+  totalPrice: number;
+}
+
+const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice }) => {
+  const { t, lang } = useGlobal();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const prevYRef = useRef<number>(Number.POSITIVE_INFINITY);
+
+  // Opens drawer when scrolling down
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (totalPrice <= 0) return;
+          const currentY = entry.boundingClientRect.y;
+          const isScrollingDown = currentY < prevYRef.current;
+
+          if (entry.isIntersecting && isScrollingDown) {
+            setOpenDrawer(true);
+          }
+
+          prevYRef.current = currentY;
+        });
+      },
+      {
+        threshold: 0,
+        rootMargin: '0px 0px -40% 0px',
+      }
+    );
+
+    observer.observe(sentinel);
+
+    return () => {
+      observer.unobserve(sentinel);
+    };
+  }, [totalPrice]);
+
+  const toggleDrawer = () => {
+    setOpenDrawer((prev) => !prev);
+  };
+
+  const Puller = styled('div')(({ theme }) => ({
+    width: 30,
+    height: 6,
+    backgroundColor: grey[300],
+    borderRadius: 3,
+    margin: 'auto',
+    marginTop: 12,
+    ...theme.applyStyles('dark', {
+      backgroundColor: grey[700],
+    }),
+  }));
+
+  return (
+    <Box sx={{ display: { md: 'none' } }}>
+      {/* Sentinel element for intersection observer */}
+      <Box ref={sentinelRef} sx={{ height: 1, visibility: 'hidden' }} />
+
+      {/* Drawer Tab */}
+      {!openDrawer && (
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: (theme) => theme.palette.background.paper,
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
+            zIndex: 1300,
+          }}
+          // onClick={toggleDrawer}
+        >
+          <Puller onClick={toggleDrawer} />
+          <Box
+            sx={{
+              width: '100%',
+              px: 2,
+              pb: 2,
+            }}
+          >
+            <Typography
+              sx={{
+                fontWeight: 'bold',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <span>{t('form.labels.total')}:</span>
+              <span>{fCurrency(totalPrice, lang, event.currency)}</span>
+            </Typography>
+
+            <Button
+              type="submit"
+              form={EVENTLOOK_ORDER_FORM_ID}
+              variant="contained"
+              size="large"
+              fullWidth
+              sx={{ mt: 1 }}
+            >
+              {t('buy')}
+            </Button>
+          </Box>
+        </Box>
+      )}
+
+      {/* Drawer Content */}
+      <Drawer
+        anchor="bottom"
+        open={openDrawer}
+        onClose={toggleDrawer}
+        sx={{ display: { md: 'none' } }}
+        ModalProps={{
+          disableScrollLock: true,
+          BackdropProps: {
+            sx: { background: 'rgba(0,0,0,0)' },
+            onClick: toggleDrawer,
+          },
+        }}
+        PaperProps={{
+          sx: {
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
+          },
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            backgroundColor: (theme) => theme.palette.background.paper,
+            py: 1,
+          }}
+        >
+          <Puller onClick={toggleDrawer} />
+        </Box>
+        <Box
+          sx={{
+            height: '100%',
+            overflow: 'auto',
+          }}
+        >
+          <PaymentOverviewBox event={event} />
+        </Box>
+      </Drawer>
+    </Box>
+  );
+};
+
+export default PaymentOverviewDrawer;

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/TicketForm.tsx

@@ -14,7 +14,7 @@ import {
   Typography,
 } from '@mui/material';
 import dayjs from 'dayjs';
-import TicketSelection from '@form/TicketSelection';
+import TicketSelection from '@form/tickets/TicketSelection';
 import ContactPerson from '@form/ContactPerson';
 import Payment from '@form/Payment';
 import EmailConfirmation from '@form/EmailConfirmation';
@@ -44,8 +44,8 @@ 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';
@@ -53,9 +53,12 @@ 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 } from '@utils/data/global.ts';
+import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_ID } from '@utils/data/global.ts';
 import ChildEventSection from './ChildEvents';
-import TicketSelectionMap from '@form/TicketSelectionMap.tsx';
+import TicketSelectionMap from '@form/tickets/TicketSelectionMap';
+import PaymentOverviewDrawer from './PaymentOverviewDrawer';
+import { getPlaceAsString } from '@utils/place';
+import Services from '@form/services';
 
 interface Props {
   event: IEvent;
@@ -63,6 +66,7 @@ interface Props {
   selectedReleaseId?: number;
   isIframe?: boolean;
   isInline?: boolean;
+  headerSlot?: React.ReactNode;
 }
 
 const TicketForm: React.FC<Props> = ({
@@ -71,6 +75,7 @@ const TicketForm: React.FC<Props> = ({
   selectedReleaseId,
   isIframe,
   isInline,
+  headerSlot,
 }) => {
   const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } =
     useGlobal();
@@ -444,7 +449,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 +476,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 +488,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,21 +501,43 @@ const TicketForm: React.FC<Props> = ({
           isInline={isInline}
         />
       ) : (
-        // @ts-ignore
-        <FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
-          <Typography
+        <FormProvider
+          methods={methods}
+          // @ts-ignore
+          onSubmit={methods.handleSubmit(onSubmit)}
+          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>
+            <Typography variant="h3" component="h1">
+              {event.name}
+            </Typography>
+            <Typography variant="h4" component="h2">
+              {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
+            </Typography>
+            <Typography variant="body2">{getPlaceAsString(event.place)}</Typography>
+            {headerSlot ? <>{headerSlot}</> : null}
+          </Stack>
           <Grid container spacing={2}>
             <Grid item xs={12} md={8}>
-              <Stepper orientation="vertical">
+              <Stepper
+                orientation="vertical"
+                sx={(theme) => ({
+                  [theme.breakpoints.down('sm')]: {
+                    '& .MuiStepContent-root': {
+                      borderLeftWidth: 0,
+                      paddingLeft: 0,
+                      marginLeft: 0,
+                    },
+                    '& .MuiStepConnector-line': { borderLeftWidth: 0 },
+                  },
+                })}
+              >
                 {event.type === EventType.RECURRING && (
                   <Step active>
                     <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
@@ -543,6 +570,12 @@ 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>
@@ -576,7 +609,7 @@ const TicketForm: React.FC<Props> = ({
                   </StepContent>
                 </Step>
               </Stepper>
-              <Stack mt={2} ml={4}>
+              <Stack mt={2} ml={{ xs: 1, md: 4 }}>
                 <RHFCheckbox
                   name="termsAndConditions"
                   label={
@@ -596,10 +629,13 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid item xs={12} md={4}>
+            <Grid item xs={12} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
               <PaymentOverviewBox event={event} />
             </Grid>
           </Grid>
+
+          <PaymentOverviewDrawer event={event} totalPrice={values.total} />
+
           <EmailConfirmation
             open={formStep === 2 && !isIframe}
             onClose={() => setFormStep(1)}

package/src/form/index.tsx

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

package/src/form/merchandise/MerchandiseSelection.tsx

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