@eventlook/sdk 1.4.4 → 1.4.5-1.beta.2

package/src/components/Image.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { LazyLoadImage, LazyLoadImageProps } from 'react-lazy-load-image-component';
+import React, { useState } from 'react';
 import { Theme } from '@mui/material/styles';
 import { Box, BoxProps, SxProps } from '@mui/material';
 
@@ -7,9 +6,9 @@ import { Box, BoxProps, SxProps } from '@mui/material';
 
 export type ImageRatio = '4/3' | '3/4' | '6/4' | '4/6' | '16/9' | '9/16' | '21/9' | '9/21' | '1/1';
 
-type IProps = BoxProps & LazyLoadImageProps;
-
-interface Props extends IProps {
+interface Props extends BoxProps {
+  src?: string;
+  alt?: string;
   sx?: SxProps<Theme>;
   ratio?: ImageRatio;
   disabledEffect?: boolean;
@@ -19,11 +18,17 @@ interface Props extends IProps {
 export default function Image({
   ratio,
   disabledEffect = false,
-  effect = 'blur',
   objectFit = 'cover',
   sx,
+  src,
+  alt = '',
   ...other
 }: Props) {
+  const [imgError, setImgError] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  const imgSrc = imgError || !src ? '/assets/img_placeholder.svg' : src;
+
   if (ratio) {
     return (
       <Box
@@ -35,25 +40,31 @@ export default function Image({
           overflow: 'hidden',
           position: 'relative',
           pt: getRatio(ratio),
-          '& .wrapper': {
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            lineHeight: 0,
-            position: 'absolute',
-            backgroundSize: 'cover !important',
-          },
           ...sx,
         }}
+        {...other}
       >
         <Box
-          component={LazyLoadImage}
-          wrapperClassName="wrapper"
-          effect={disabledEffect ? undefined : effect}
-          placeholderSrc="/assets/img_placeholder.svg"
-          sx={{ width: 1, height: 1, objectFit: 'cover' }}
-          {...other}
+          component="img"
+          src={imgSrc}
+          alt={alt}
+          loading="lazy"
+          decoding="async"
+          onLoad={() => setLoaded(true)}
+          onError={() => {
+            if (!imgError) setImgError(true);
+          }}
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: 1,
+            height: 1,
+            objectFit: 'cover',
+            ...(disabledEffect
+              ? {}
+              : { opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }),
+          }}
         />
       </Box>
     );
@@ -66,16 +77,27 @@ export default function Image({
         lineHeight: 1,
         display: 'block',
         overflow: 'hidden',
-        '& .wrapper': { width: 1, height: 1, backgroundSize: 'cover !important' },
         ...sx,
       }}
     >
       <Box
-        component={LazyLoadImage}
-        wrapperClassName="wrapper"
-        effect={disabledEffect ? undefined : effect}
-        placeholderSrc="/assets/img_placeholder.svg"
-        sx={{ width: 1, height: 1, objectFit }}
+        component="img"
+        src={imgSrc}
+        alt={alt}
+        loading="lazy"
+        decoding="async"
+        onLoad={() => setLoaded(true)}
+        onError={() => {
+          if (!imgError) setImgError(true);
+        }}
+        sx={{
+          width: 1,
+          height: 1,
+          objectFit,
+          ...(disabledEffect
+            ? {}
+            : { opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }),
+        }}
         {...other}
       />
     </Box>

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/context/GlobalContext.tsx

@@ -30,6 +30,7 @@ type Props = {
   showSnackbar?: IGlobalContext['showSnackbar'];
   options?: IGlobalContext['options'];
   content?: IGlobalContext['content'];
+  seatingIframeUrl?: IGlobalContext['seatingIframeUrl'];
 };
 
 function GlobalProvider({
@@ -40,6 +41,7 @@ function GlobalProvider({
   links,
   options,
   content,
+  seatingIframeUrl,
 }: Props) {
   const [global, setGlobal] = useState<IGlobalContext>({
     ...initialState,
@@ -49,6 +51,7 @@ function GlobalProvider({
     links,
     options,
     content,
+    seatingIframeUrl,
   });
 
   const handleSetGlobal = (value: Partial<IGlobalContext>) => {

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

@@ -87,12 +87,10 @@ const Payment: React.FC<Props> = ({ event }) => {
         setValue('promoCodes', [...promoCodes, promo]);
         showSnackbar(res.message);
         setPromoCodeError(null);
-        setValue('promoCode', promo);
         setPromoCode('');
       } catch (err) {
         setPromoCodeError(t('form.validation.promo_code_invalid'));
         console.error(err);
-        setValue('promoCode', null);
       }
     },
     1000,
@@ -288,7 +286,7 @@ const Payment: React.FC<Props> = ({ event }) => {
                               src={payment.image.url}
                               sx={{
                                 height: '20px',
-                                '& .wrapper img': {
+                                '& img': {
                                   objectFit: 'contain',
                                 },
                               }}
@@ -322,7 +320,7 @@ const Payment: React.FC<Props> = ({ event }) => {
                                           maxWidth: '70px',
                                           display: 'inline-block',
                                           marginRight: 1,
-                                          '& .wrapper img': {
+                                          '& img': {
                                             objectFit: 'contain',
                                             objectPosition: 'left',
                                           },