@eventlook/sdk 1.4.46-beta.7 → 1.4.46

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,30 @@ 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,
         }}
       >
         <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 +76,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,15 +7,12 @@ type Props = {
   children: React.ReactNode;
   methods: UseFormReturn<any>;
   onSubmit?: VoidFunction;
-  formId?: string;
 };
 
-export default function FormProvider({ children, onSubmit, methods, formId }: Props) {
+export default function FormProvider({ children, onSubmit, methods }: Props) {
   return (
     <Form {...methods}>
-      <form id={formId} onSubmit={onSubmit}>
-        {children}
-      </form>
+      <form 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 './tickets/TicketWithMerchandiseSelection';
-import TicketSelection from './tickets/TicketSelection';
+import TicketWithMerchandiseSelection from './TicketWithMerchandiseSelection';
+import TicketSelection from './TicketSelection';
 import useGlobal from '@hooks/useGlobal';
-import MerchandiseSelection from './merchandise/MerchandiseSelection';
+import MerchandiseSelection from './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={{ 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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Iconify, Image, TextIconLabel } from '@components';
-import { Box, Divider, Grid, Stack, Typography } from '@mui/material';
+import { Box, Divider, Grid, IconButton, Stack, Typography } from '@mui/material';
 import PaymentOverviewCheckbox from '@form/payment/PaymentOverviewCheckbox.tsx';
 import locationIcon from '@iconify/icons-carbon/location';
 import { getPlaceAsString } from '@utils/place';
@@ -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',
@@ -386,29 +385,29 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
     }
   }, []);
 
-  // const removeProduct = (variant: ISelectedProductVariant) => {
-  //   const { eventId, variantId } = variant;
-  //   const list = Array.isArray(products[eventId]) ? [...products[eventId]] : [];
+  const removeProduct = (variant: ISelectedProductVariant) => {
+    const { eventId, variantId } = variant;
+    const list = Array.isArray(products[eventId]) ? [...products[eventId]] : [];
 
-  //   const idx = list.findIndex((p) => Number(p.eventProductVariantId) === Number(variantId));
-  //   if (idx === -1) return;
-  //   const item = list[idx];
+    const idx = list.findIndex((p) => Number(p.eventProductVariantId) === Number(variantId));
+    if (idx === -1) return;
+    const item = list[idx];
 
-  //   if ((item.quantity ?? 0) <= 1) {
-  //     list.splice(idx, 1);
-  //   } else {
-  //     list[idx] = { ...item, quantity: (item.quantity ?? 1) - 1 };
-  //   }
+    if ((item.quantity ?? 0) <= 1) {
+      list.splice(idx, 1);
+    } else {
+      list[idx] = { ...item, quantity: (item.quantity ?? 1) - 1 };
+    }
 
-  //   const next = { ...products, [eventId]: list };
+    const next = { ...products, [eventId]: list };
 
-  //   if (list.length === 0) {
-  //     const { [eventId]: _removed, ...rest } = next;
-  //     setValue('products', rest);
-  //   } else {
-  //     setValue('products', next);
-  //   }
-  // };
+    if (list.length === 0) {
+      const { [eventId]: _removed, ...rest } = next;
+      setValue('products', rest);
+    } else {
+      setValue('products', next);
+    }
+  };
 
   return (
     <OverviewCard id="overview-card" stickyHeaderTop={options?.stickyHeaderTop || 0}>
@@ -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,
             }}
           >
@@ -475,49 +473,15 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
           </Stack>
         </Stack>
       )}
-      <Stack
-        className="overview-card__order-info"
-        p={2}
-        pt={{ xs: 0, sm: 2 }}
-        spacing={0.75}
-        useFlexGap
-      >
+      <Stack className="overview-card__order-info" p={2} spacing={1}>
         {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed' }} />}
-
-        {!!selectedTickets.length && (
-          <Stack spacing={0.5}>
-            {/* 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' }} />
-          </Stack>
-        )}
         {selectedTickets.map((ticket, index) => (
           <Box key={index}>
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-              <Typography variant="body2">
+              <Typography variant="caption">
                 {ticket.quantity}x {ticket.itemName}
               </Typography>
-              <Typography variant="body2">
+              <Typography variant="caption">
                 {fCurrency(
                   calculatePriceWithDiscount(
                     ticket.price,
@@ -537,10 +501,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
                 alignItems="center"
                 spacing={2}
               >
-                <Typography variant="body2">
+                <Typography variant="caption">
                   - {product.quantity}x {product.name}
                 </Typography>
-                <Typography variant="body2">
+                <Typography variant="caption">
                   {product.price > 0
                     ? fCurrency(
                         calculatePriceWithDiscount(
@@ -562,49 +526,118 @@ const PaymentOverviewBox: React.FC<Props> = ({ event }) => {
         {selectedVariants.map((variant, index) => (
           <Box key={index}>
             <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-              <Typography variant="body2">
+              <Typography variant="caption">
                 {variant.quantity}x {variant.name}
               </Typography>
-              <Typography variant="body2">
-                {fCurrency(
-                  calculatePriceWithDiscount(
-                    variant.price,
-                    promoCodesValues.productDiscountPercent,
-                    promoCodesValues.fixedDevidedProducts
-                      ? promoCodesValues.fixedDevidedProducts * variant.quantity
-                      : 0
-                  ),
-                  lang,
-                  event.currency
-                )}
-              </Typography>
+              <Stack direction="row" spacing={1} alignItems="center">
+                <Typography variant="caption">
+                  {fCurrency(
+                    calculatePriceWithDiscount(
+                      variant.price,
+                      promoCodesValues.productDiscountPercent,
+                      promoCodesValues.fixedDevidedProducts
+                        ? promoCodesValues.fixedDevidedProducts * variant.quantity
+                        : 0
+                    ),
+                    lang,
+                    event.currency
+                  )}
+                </Typography>
+                <IconButton onClick={() => removeProduct(variant)} color="primary" size="small">
+                  <Iconify icon="carbon:trash-can" />
+                </IconButton>
+              </Stack>
             </Stack>
           </Box>
         ))}
         {!!shippingFee && (
           <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-            <Typography variant="body2">{t('form.labels.shipping_fee')}</Typography>
-            <Typography variant="body2">{fCurrency(shippingFee, lang, event.currency)}</Typography>
+            <Typography variant="caption">{t('form.labels.shipping_fee')}</Typography>
+            <Typography variant="caption">
+              {fCurrency(shippingFee, lang, event.currency)}
+            </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="body2">{t('form.labels.service_fee')}</Typography>
-            <Typography variant="body2">{getFee}</Typography>
+            <Typography variant="caption">{t('form.labels.service_fee')}</Typography>
+            <Typography variant="caption">{getFee}</Typography>
           </Stack>
         )}
         {((!!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>
   );