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

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,71 +8,78 @@ 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
-        name={checkboxName}
-        label={
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            spacing={1}
-            sx={{ width: '100%' }}
+    <Controller
+      name={checkboxName}
+      control={control}
+      render={({ field }) => (
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          useFlexGap
+          spacing={1}
+          sx={{ width: '100%', mb: 0.5 }}
+        >
+          <Typography variant="body2" sx={{ flex: 1 }}>
+            {label}
+          </Typography>
+          <Box
+            sx={{
+              position: 'relative',
+              display: 'flex',
+              alignItems: 'center',
+            }}
           >
-            <Typography variant="caption" sx={{ flex: 1 }}>
-              {label}
+            <Typography
+              variant="body2"
+              sx={{
+                mr: field.value ? 0 : 1,
+                ...(field.value
+                  ? {
+                      position: 'absolute',
+                      right: 0,
+                    }
+                  : {}),
+              }}
+            >
+              {value}
             </Typography>
-            <Stack alignItems="flex-end">
-              <Typography variant="caption" fontWeight="600">
-                {value}
-              </Typography>
-              <Link variant="caption" onClick={handleOpen}>
-                {t('more_info')}
-              </Link>
-            </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>
-    </>
+            <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>
+      )}
+    />
   );
 };
 

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,8 @@ 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';
+import { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';
 
 interface Props {
   eventProduct: IEventProduct;
@@ -17,85 +31,270 @@ 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 > MAX_TICKETS_PER_ORDER) 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 >= MAX_TICKETS_PER_ORDER || 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>
     </>
   );
 };