@eventlook/sdk 1.4.48 → 1.4.49-beta.1

package/src/form/product/ProductCard.tsx

@@ -1,5 +1,16 @@
-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 { IEventProduct } from '@utils/types/event-product.type';
 import React, { useMemo, useState } from 'react';
@@ -9,6 +20,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,85 +29,264 @@ 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),
+    });
+  };
 
   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 ? (
+            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',
+                  }}
+                >
+                  -
+                </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',
+                    },
+                  }}
+                >
+                  +
+                </IconButton>
+              </Stack>
+            ) : (
+              <Button
+                variant="contained"
+                onClick={() => onChangeSimpleProductQuantity(1)}
+                disabled={simpleProductMaxAvailable <= 0}
+                fullWidth
+              >
+                {t('add')}
+              </Button>
+            )
+          ) : (
+            <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%">
+            <Button
+              variant="contained"
+              onClick={() => {
+                onChangeSimpleProductQuantity(simpleProductQuantity + 1);
+                setOpenSimpleProductDialog(false);
+              }}
+              disabled={simpleProductQuantity >= 10 || simpleProductMaxAvailable <= 0}
+              fullWidth
+            >
+              {t('add')}
+            </Button>
+            <Button variant="outlined" onClick={() => setOpenSimpleProductDialog(false)} fullWidth>
+              {t('close')}
+            </Button>
+          </Stack>
+        </DialogActions>
+      </Dialog>
     </>
   );
 };