@eventlook/sdk 1.5.0-beta.6 → 1.5.0-beta.7

package/src/form/merchandise/MerchandiseSlider.tsx

@@ -0,0 +1,62 @@
+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, -2.5),
+        }}
+      >
+        <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,
+                  maxWidth: 220,
+                  margin: `0 ${theme.spacing(0.5)}`,
+                  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

@@ -1,9 +1,7 @@
 import React from 'react';
-import { Box, Stack, Tooltip, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { fCurrency } from '@utils/formatNumber';
-import { Iconify } from '@components/iconify';
 import { IEvent } from '@utils/types/event.type';
-import useResponsive from '@hooks/useResponsive';
 import { useFormContext } from 'react-hook-form';
 import { ITicketForm } from '@utils/types/ticket.type';
 import useGlobal from '@hooks/useGlobal';
@@ -15,7 +13,6 @@ interface Props {
 
 const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
   const { t, lang } = useGlobal();
-  const xs = useResponsive('only', 'xs');
   const { watch } = useFormContext<ITicketForm>();
   const values = watch();
   const isRight = align === 'right';
@@ -44,35 +41,11 @@ const FeeBox: React.FC<Props> = ({ event, align = 'left' }) => {
         alignItems="center"
         spacing={1}
       >
-        <Stack direction="row" alignItems="center" spacing={1}>
-          <Tooltip
-            title={t('form.labels.price_including_service_fee', {
-              fee: fCurrency(values.totalFee ?? 0, lang, event.currency),
-            })}
-            placement={xs ? 'top' : 'left'}
-            arrow
-            sx={{ cursor: 'help' }}
-          >
-            <Stack alignItems="center">
-              <Iconify icon="carbon:information-filled" />
-            </Stack>
-          </Tooltip>
-          <Typography variant="subtitle1" sx={{ textAlign: 'right' }}>
-            {t('form.labels.total')}:
-          </Typography>
-        </Stack>
+        <Typography variant="subtitle1" sx={{ textAlign: 'right' }}>
+          {t('form.labels.total')}:
+        </Typography>
         <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 { Box, Button, Stack, Typography } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
 import useGlobal from '@hooks/useGlobal';
 import { Iconify } from '@components';
 
@@ -16,70 +8,79 @@ 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"
+            useFlexGap
             spacing={1}
-            sx={{ width: '100%' }}
+            sx={{ width: '100%', mb: 0.5 }}
           >
-            <Typography variant="caption" sx={{ flex: 1 }}>
+            <Typography variant="body2" sx={{ flex: 1 }}>
               {label}
             </Typography>
-            <Stack alignItems="flex-end">
-              <Typography variant="caption" fontWeight="600">
+            <Box
+              sx={{
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Typography
+                variant="body2"
+                sx={{
+                  mr: field.value ? 0 : 1,
+                  ...(field.value
+                    ? {
+                        position: 'absolute',
+                        right: 0,
+                      }
+                    : {}),
+                }}
+              >
                 {value}
               </Typography>
-              <Link variant="caption" onClick={handleOpen}>
-                {t('more_info')}
-              </Link>
-            </Stack>
+              <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,
+                  width: 96,
+                  minWidth: 96,
+                  color: 'text.primary',
+                  visibility: field.value ? 'hidden' : 'visible',
+                  pointerEvents: field.value ? 'none' : 'auto',
+                }}
+                tabIndex={field.value ? -1 : 0}
+                aria-hidden={field.value}
+              >
+                {t('add')}
+              </Button>
+            </Box>
           </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,6 +1,18 @@
-import { Button, Card, Stack, Typography } from '@mui/material';
-import { Iconify } from '@components/iconify';
+import {
+  Box,
+  Button,
+  Card,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Link,
+  Stack,
+  Typography,
+} from '@mui/material';
 import Image from '@components/Image';
+import { Iconify } from '@components/iconify';
 import { IEventProduct } from '@utils/types/event-product.type';
 import React, { useMemo, useState } from 'react';
 import ProductVariantsDialog from '@form/product/ProductVariantsDialog';
@@ -9,6 +21,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';
+import { fCurrency } from '@utils/formatNumber';
 
 interface Props {
   eventProduct: IEventProduct;
@@ -17,85 +30,268 @@ 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 [openSimpleProductDialog, setOpenSimpleProductDialog] = useState<boolean>(false);
+  const { setValue, getValues } = useFormContext<ITicketForm>();
   const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
   const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
+  const isSimpleProduct = eventProduct.eventProductVariants.length === 1;
+  const simpleVariant = isSimpleProduct ? eventProduct.eventProductVariants[0] : undefined;
 
-  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]);
+
+  const selectedQuantityByVariant = useMemo(
+    () => getSelectedQuantityByVariant(products, tickets),
+    [products, tickets]
+  );
+
+  const simpleProductQuantity = useMemo(() => {
+    if (!simpleVariant) return 0;
+    const matched = products.find((product) => product.eventProductVariantId === simpleVariant.id);
+    return matched?.quantity ?? 0;
+  }, [products, simpleVariant]);
+
+  const simpleProductMaxAvailable = useMemo(() => {
+    if (!simpleVariant) return 0;
+    const { quantity, sold } = simpleVariant.productVariant;
+    if (!quantity) return Number.POSITIVE_INFINITY;
+    const used = selectedQuantityByVariant[simpleVariant.id] ?? 0;
+    return quantity - sold - used;
+  }, [simpleVariant, selectedQuantityByVariant]);
+
+  const onChangeSimpleProductQuantity = (nextQuantity: number) => {
+    if (!simpleVariant) return;
+    if (nextQuantity < 0 || nextQuantity > 10) return;
+    if (
+      nextQuantity > simpleProductQuantity &&
+      nextQuantity - simpleProductQuantity > simpleProductMaxAvailable
+    )
+      return;
+
+    onSelectVariant({
+      eventProductVariantId: simpleVariant.id,
+      productVariantId: simpleVariant.productVariant.id,
+      quantity: nextQuantity,
+      price: simpleVariant.priceWithVat,
+      excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
+    });
+  };
+
+  const simpleProductQuantityControl =
+    simpleProductQuantity > 0 ? (
+      <Stack direction="row" spacing={1} alignItems="center" width="100%">
+        <IconButton
+          onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity - 1)}
+          disabled={simpleProductQuantity <= 0}
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            p: 0,
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'grey.300',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Iconify icon="eva:minus-fill" width={18} height={18} />
+        </IconButton>
+        <Box
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'grey.300',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 700,
+          }}
+        >
+          {simpleProductQuantity}
+        </Box>
+        <IconButton
+          onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity + 1)}
+          disabled={simpleProductQuantity >= 10 || simpleProductMaxAvailable <= 0}
+          sx={{
+            flex: '1 1 0',
+            height: 36,
+            p: 0,
+            borderRadius: 1,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            '&:hover': { bgcolor: 'primary.dark' },
+            '&.Mui-disabled': {
+              bgcolor: 'action.disabledBackground',
+              color: 'action.disabled',
+            },
+          }}
+        >
+          <Iconify icon="eva:plus-fill" width={18} height={18} />
+        </IconButton>
+      </Stack>
+    ) : (
+      <Button
+        variant="contained"
+        onClick={() => onChangeSimpleProductQuantity(1)}
+        disabled={simpleProductMaxAvailable <= 0}
+        fullWidth
+      >
+        {t('add')}
+      </Button>
+    );
 
   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="21/9"
+            sx={{ borderRadius: 1, maxHeight: 96 }}
           />
-          <Button
-            variant="contained"
-            onClick={() => setOpenVariantDialog(true)}
-            fullWidth
-            startIcon={
-              eventNotEmpty ? <Iconify icon="eva:edit-fill" /> : <Iconify icon="eva:plus-fill" />
-            }
-          >
-            {eventNotEmpty ? t('change') : t('add')}
-          </Button>
+          <Typography variant="h5" sx={{ fontSize: '14px', fontWeight: 700 }}>
+            {eventProduct.product.name}
+          </Typography>
+          <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
+            <Typography variant="body2" color="text.primary">
+              {eventProduct.product.priceWithVat > 0
+                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                : t('free')}
+            </Typography>
+            {isSimpleProduct && (
+              <Link
+                onClick={() => setOpenSimpleProductDialog(true)}
+                color="inherit"
+                underline="always"
+                fontSize={12}
+              >
+                {t('more_info')}
+              </Link>
+            )}
+          </Stack>
+          {isSimpleProduct ? (
+            simpleProductQuantityControl
+          ) : (
+            <Button
+              variant={eventNotEmpty ? 'contained' : 'outlined'}
+              onClick={() => setOpenVariantDialog(true)}
+              fullWidth
+              sx={{
+                color: eventNotEmpty ? (theme) => theme.palette.common.white : 'inherit',
+                borderColor: (theme) => theme.palette.grey[300],
+              }}
+            >
+              {eventNotEmpty
+                ? t('event.tickets.merchandise.show_added')
+                : t('event.tickets.merchandise.show_sizes')}
+            </Button>
+          )}
         </Stack>
       </Card>
       <ProductVariantsDialog
         eventProduct={eventProduct}
         eventId={eventId}
-        openDialog={openVariantDialog}
+        openDialog={openVariantDialog && !isSimpleProduct}
         onClose={() => setOpenVariantDialog(false)}
         callback={onSelectVariant}
-        selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}
+        selectedQuantityByVariant={selectedQuantityByVariant}
         isOnlyMerchandise={isOnlyMerchandise}
       />
+      <Dialog
+        open={openSimpleProductDialog && isSimpleProduct}
+        onClose={() => setOpenSimpleProductDialog(false)}
+        fullWidth
+        maxWidth="sm"
+      >
+        <DialogTitle
+          sx={{
+            textAlign: 'center',
+            fontWeight: 700,
+            fontSize: { xs: '1.5rem', sm: '2rem' },
+            mb: 2,
+          }}
+        >
+          {eventProduct.product.name}
+        </DialogTitle>
+        <DialogContent sx={{ pb: 0 }}>
+          <Stack spacing={2}>
+            <Typography
+              variant="body2"
+              dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}
+            />
+            <Typography variant="body1" color="text.primary">
+              {eventProduct.product.priceWithVat > 0
+                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                : t('free')}
+            </Typography>
+          </Stack>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 3 }}>
+          <Stack spacing={1} width="100%">
+            {simpleProductQuantityControl}
+            <Button
+              variant="outlined"
+              onClick={() => setOpenSimpleProductDialog(false)}
+              fullWidth
+              sx={{
+                color: 'inherit',
+                borderColor: (theme) => theme.palette.grey[300],
+              }}
+            >
+              {t('close')}
+            </Button>
+          </Stack>
+        </DialogActions>
+      </Dialog>
     </>
   );
 };