@eventlook/sdk 1.4.45 → 1.4.46-beta.1

package/src/form/merchandise/MerchandiseSlider.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Box, SxProps } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { IEventProduct } from '@utils/types/event-product.type';
+import ProductCard from '@form/product/ProductCard';
+
+interface Props {
+  sx?: SxProps;
+  eventProducts: IEventProduct[];
+  eventId: number;
+}
+
+const MerchandiseSlider: React.FC<Props> = ({ eventProducts, eventId, sx }) => {
+  const [emblaRef] = useEmblaCarousel();
+  const theme = useTheme();
+
+  return (
+    <Box sx={sx}>
+      <Box
+        sx={{
+          overflow: 'hidden',
+          padding: theme.spacing(8, 3),
+          margin: theme.spacing(-8, -3),
+        }}
+      >
+        <Box ref={emblaRef} className="embla" sx={{ overflow: 'visible' }}>
+          <Box
+            className="embla__container"
+            sx={{
+              display: 'flex',
+            }}
+          >
+            {eventProducts.map((eventProduct, index) => (
+              <Box
+                key={`event-slide-${index}`}
+                className="embla__slide"
+                sx={{
+                  flex: `0 0 ${eventProducts.length > 1 ? '78%' : '100%'}`,
+                  minWidth: 0,
+                  margin: `0 ${theme.spacing(1)}`,
+                  transition: 'opacity 0.2s ease',
+                  [theme.breakpoints.up('sm')]: {
+                    flex: '0 0 43%',
+                  },
+                  [theme.breakpoints.up('md')]: {
+                    flex: '0 0 33.3333%',
+                  },
+                }}
+              >
+                <ProductCard eventProduct={eventProduct} eventId={eventId} isOnlyMerchandise />
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default MerchandiseSlider;

package/src/form/payment/FeeBox.tsx

@@ -63,16 +63,6 @@ const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
         </Stack>
         <Typography variant="subtitle1">{fCurrency(values.total, lang, event.currency)}</Typography>
       </Stack>
-      {!!values.totalFee && (
-        <Typography
-          variant="caption"
-          sx={{
-            color: (theme) => theme.palette.grey.A700,
-          }}
-        >
-          {t('form.labels.with_fee')}
-        </Typography>
-      )}
     </Box>
   );
 };

package/src/form/payment/PaymentOverviewCheckbox.tsx

@@ -1,14 +1,6 @@
-import React, { JSX, useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Link,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { RHFCheckbox } from '@components/hook-form';
+import React, { JSX } from 'react';
+import { Button, Stack, Typography } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
 import useGlobal from '@hooks/useGlobal.ts';
 import { Iconify } from '@components';
 
@@ -16,70 +8,55 @@ interface Props {
   checkboxName: string;
   label: string;
   value: string | JSX.Element;
-  modal: {
-    title: string;
-    description: string | JSX.Element;
-  };
 }
 
-const PaymentOverviewCheckbox: React.FC<Props> = ({ checkboxName, label, value, modal }) => {
+const PaymentOverviewCheckbox: React.FC<Props> = ({ checkboxName, label, value }) => {
   const { t } = useGlobal();
-  const [open, setOpen] = useState(false);
-
-  const handleOpen = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setOpen(true);
-  };
-  const handleClose = () => setOpen(false);
+  const { control } = useFormContext();
 
   return (
     <>
-      <RHFCheckbox
+      <Controller
         name={checkboxName}
-        label={
+        control={control}
+        render={({ field }) => (
           <Stack
             direction="row"
             justifyContent="space-between"
             alignItems="center"
             spacing={1}
-            sx={{ width: '100%' }}
+            sx={{ width: '100%', mb: 0.5 }}
           >
             <Typography variant="caption" sx={{ flex: 1 }}>
               {label}
             </Typography>
-            <Stack alignItems="flex-end">
-              <Typography variant="caption" fontWeight="600">
-                {value}
-              </Typography>
-              <Link variant="caption" onClick={handleOpen}>
-                {t('more_info')}
-              </Link>
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <Typography variant="caption">{value}</Typography>
+              {!field.value && (
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  size="small"
+                  startIcon={<Iconify icon="carbon:add" />}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    field.onChange(true);
+                  }}
+                  sx={{
+                    borderRadius: 1,
+                    textTransform: 'none',
+                    px: 1.5,
+                    minWidth: 96,
+                  }}
+                >
+                  {t('add')}
+                </Button>
+              )}
             </Stack>
           </Stack>
-        }
-        sx={{
-          width: 'calc(100% + 11px)',
-          mb: 0.5,
-          '& > .MuiTypography-root': {
-            width: '100%',
-          },
-        }}
+        )}
       />
-
-      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
-        <DialogTitle
-          sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-        >
-          {modal.title}
-          <IconButton onClick={handleClose} size="small">
-            <Iconify icon="carbon:close" />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent>
-          <Typography variant="body2">{modal.description}</Typography>
-        </DialogContent>
-      </Dialog>
     </>
   );
 };

package/src/form/product/ProductCard.tsx

@@ -1,5 +1,4 @@
-import { Button, Card, Stack, Typography } from '@mui/material';
-import { Iconify } from '@components/iconify';
+import { Box, Button, Card, Stack, Typography } from '@mui/material';
 import Image from '@components/Image';
 import { IEventProduct } from '@utils/types/event-product.type';
 import React, { useMemo, useState } from 'react';
@@ -9,6 +8,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
 import { getSelectedQuantityByVariant } from '@utils/product';
 import useGlobal from '@hooks/useGlobal.ts';
+import { fCurrency } from '@utils/formatNumber';
 
 interface Props {
   eventProduct: IEventProduct;
@@ -17,72 +17,77 @@ interface Props {
 }
 
 const ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise }) => {
-  const { t } = useGlobal();
+  const { t, lang } = useGlobal();
   const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);
-  const { setValue } = useFormContext<ITicketForm>();
+  const { setValue, getValues } = useFormContext<ITicketForm>();
   const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
   const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
 
-  const onSelectVariant = (selectedVariant: IEventProductForm) => {
-    const variant = products.find(
-      (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId
-    );
+  const onSelectVariant = (selectedVariants: IEventProductForm[] | IEventProductForm) => {
+    const normalized = Array.isArray(selectedVariants) ? selectedVariants : [selectedVariants];
+    const currentProducts =
+      (getValues(`products.${eventId}`) as IEventProductForm[] | undefined) ?? [];
+    const nextProducts = [...currentProducts];
+
+    normalized.forEach((selectedVariant) => {
+      const index = nextProducts.findIndex(
+        (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId
+      );
 
-    if (variant) {
-      if (selectedVariant.quantity === 0) {
-        setValue(
-          `products.${eventId}`,
-          products.filter(
-            (product) => product.eventProductVariantId !== variant.eventProductVariantId
-          )
-        );
+      if (index >= 0) {
+        if (selectedVariant.quantity <= 0) {
+          nextProducts.splice(index, 1);
+        } else {
+          nextProducts[index] = {
+            ...nextProducts[index],
+            quantity: selectedVariant.quantity,
+          };
+        }
       } else {
-        setValue(
-          `products.${eventId}`,
-          products.map((product) => {
-            if (product.eventProductVariantId === selectedVariant.eventProductVariantId) {
-              return {
-                ...product,
-                quantity: selectedVariant.quantity,
-              };
-            }
-            return product;
-          })
-        );
+        if (selectedVariant.quantity > 0) {
+          nextProducts.push(selectedVariant);
+        }
       }
-    } else if (selectedVariant.quantity !== 0) {
-      setValue(`products.${eventId}`, [...products, selectedVariant]);
-    }
+    });
+
+    setValue(`products.${eventId}`, nextProducts, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
   };
 
-  const eventNotEmpty = useMemo(() => products.some((product) => product?.quantity), [products]);
+  const eventNotEmpty = useMemo(() => {
+    const variantIds = new Set(eventProduct.eventProductVariants.map((variant) => variant.id));
+    return products.some(
+      (product) => product?.quantity && variantIds.has(product.eventProductVariantId)
+    );
+  }, [products, eventProduct.eventProductVariants]);
 
   return (
     <>
-      <Card sx={{ p: 2 }}>
-        <Stack spacing={1}>
-          <Image src={eventProduct.product.previewImage.url} ratio="1/1" sx={{ borderRadius: 2 }} />
-          <Typography variant="h5">{eventProduct.product.name}</Typography>
-          <Typography
-            variant="caption"
-            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}
-            sx={{
-              height: 44,
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-              display: '-webkit-box',
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: 'vertical',
-            }}
+      <Card
+        sx={{
+          p: 0,
+          borderRadius: 0,
+          boxShadow: 'none',
+          background: 'none',
+        }}
+      >
+        <Stack spacing={0}>
+          <Image
+            src={eventProduct.product.previewImage.url}
+            ratio="16/9"
+            sx={{ borderRadius: 2 }}
           />
-          <Button
-            variant="contained"
-            onClick={() => setOpenVariantDialog(true)}
-            fullWidth
-            startIcon={
-              eventNotEmpty ? <Iconify icon="eva:edit-fill" /> : <Iconify icon="eva:plus-fill" />
-            }
-          >
+          <Typography variant="h5">{eventProduct.product.name}</Typography>
+          <Box>
+            <Typography variant="h6" color="primary">
+              {eventProduct.product.priceWithVat > 0
+                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                : t('free')}
+            </Typography>
+          </Box>
+          <Button variant="outlined" onClick={() => setOpenVariantDialog(true)} fullWidth>
             {eventNotEmpty ? t('change') : t('add')}
           </Button>
         </Stack>