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

package/src/form/product/ProductVariantsDialog.tsx

@@ -1,12 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
-  Badge,
+  Box,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
   Stack,
   Typography,
 } from '@mui/material';
@@ -17,16 +16,16 @@ import { ITicketFormTicket } from '@utils/types/ticket.type';
 import { IEventProductForm } from '@utils/types/product.type';
 import { fCurrency } from '@utils/formatNumber';
 import useGlobal from '@hooks/useGlobal';
-import { Iconify } from '@components';
 
 interface Props {
   eventProduct: IEventProduct;
   eventId: number;
   openDialog: boolean;
-  callback: (variant: IEventProductForm) => void;
+  callback: (variants: IEventProductForm[]) => void;
   onClose?: () => void;
   selectedQuantityByVariant?: Record<number, number>;
   isOnlyMerchandise?: boolean;
+  canAddOnlyOneAtATime?: boolean;
 }
 
 const ProductVariantsDialog: React.FC<Props> = ({
@@ -37,13 +36,11 @@ const ProductVariantsDialog: React.FC<Props> = ({
   selectedQuantityByVariant,
   isOnlyMerchandise,
   eventId,
+  canAddOnlyOneAtATime,
 }) => {
   const { t, lang, options } = useGlobal();
   const { showSnackbar } = useGlobal();
-  const [selectedVariant, setSelectedVariant] = useState<IEventProductForm | null>(null);
-  const [variantPrice, setVariantPrice] = useState<number | null>(null);
-  const [variantQuantity, setVariantQuantity] = useState<number>(1);
-  const [isVariantClicked, setIsVariantClicked] = useState(false);
+  const [draftQuantities, setDraftQuantities] = useState<Record<number, number>>({});
   const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
   const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });
 
@@ -56,43 +53,45 @@ const ProductVariantsDialog: React.FC<Props> = ({
   }, [openDialog]);
 
   useEffect(() => {
-    if (isVariantClicked) {
-      setVariantQuantity(
-        selectedQuantityByVariant &&
-          selectedVariant &&
-          selectedQuantityByVariant[selectedVariant.eventProductVariantId] !== undefined
-          ? selectedQuantityByVariant[selectedVariant.eventProductVariantId]
-          : 1
-      );
-      setIsVariantClicked(false);
+    if (openDialog) {
+      setDraftQuantities(canAddOnlyOneAtATime ? {} : (selectedQuantityByVariant ?? {}));
     }
-  }, [selectedVariant, isVariantClicked]);
-
-  const handleOnClick = (variant: IEventProductVariant) => {
-    setVariantPrice(variant.priceWithVat);
-    setSelectedVariant({
-      eventProductVariantId: variant.id,
-      productVariantId: variant.productVariant.id,
-      quantity: 1,
-      price: variant.priceWithVat,
-      excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
-    });
-    setIsVariantClicked(true);
-  };
+  }, [openDialog, selectedQuantityByVariant, canAddOnlyOneAtATime]);
 
   const handleOnAdd = () => {
-    if (!selectedVariant) {
+    const selectedVariants = eventProduct.eventProductVariants
+      .map((variant) => {
+        const quantity = draftQuantities[variant.id] ?? 0;
+        const selectedQty = selectedQuantityByVariant?.[variant.id] ?? 0;
+        if (canAddOnlyOneAtATime) {
+          if (quantity <= 0) return null;
+        } else if (quantity <= 0 && selectedQty <= 0) {
+          return null;
+        }
+        return {
+          eventProductVariantId: variant.id,
+          productVariantId: variant.productVariant.id,
+          quantity,
+          price: variant.priceWithVat,
+          excludedShippingMethodIds: eventProduct.excludedShippingMethods.map(
+            (method) => method.id
+          ),
+        } as IEventProductForm;
+      })
+      .filter((variant): variant is IEventProductForm => Boolean(variant));
+
+    if (selectedVariants.length === 0) {
       showSnackbar(t('components.product_variant_dialog.select_variant'), { variant: 'error' });
       return;
     }
-    callback(selectedVariant);
-    setSelectedVariant(null);
+
+    callback(selectedVariants);
+    setDraftQuantities({});
     onClose?.();
   };
 
-  const isVariantDisabled = (variant: IEventProductVariant) => {
+  const getUsedCount = (variant: IEventProductVariant) => {
     let countUsed = 0;
-    let selectedVariantQuantity = 0;
 
     for (const product of products) {
       if (product.productVariantId === variant.productVariant.id) {
@@ -105,70 +104,104 @@ const ProductVariantsDialog: React.FC<Props> = ({
         for (const product of ticket.products) {
           if (product.productVariantId === variant.productVariant.id) {
             countUsed += product.quantity;
-            selectedVariantQuantity = product.quantity;
           }
         }
       }
     }
-
-    return (
-      (variant.productVariant.quantity &&
-        countUsed + variant.productVariant.sold >= variant.productVariant.quantity) ||
-      selectedVariantQuantity >= 10
-    );
+    return countUsed;
   };
 
-  const isVariantSoldOut = () => {
-    const variant = eventProduct.eventProductVariants.find(
-      (product) => product.id === selectedVariant?.eventProductVariantId
-    );
-    let countUsed = variantQuantity;
+  const getMaxAvailable = (variant: IEventProductVariant) => {
+    if (!variant.productVariant.quantity) return Number.POSITIVE_INFINITY;
+    return variant.productVariant.quantity - variant.productVariant.sold - getUsedCount(variant);
+  };
 
-    for (const ticket of tickets) {
-      if (ticket.products) {
-        for (const product of ticket.products) {
-          if (product.productVariantId === variant?.productVariant.id) {
-            countUsed += product.quantity;
-          }
-        }
-      }
-    }
+  const isVariantDisabled = (variant: IEventProductVariant) => {
+    if (!variant.productVariant.quantity) return false;
+    return getMaxAvailable(variant) <= 0;
+  };
 
-    if (variant && variant.productVariant.quantity) {
-      if (
-        variant.productVariant.sold + countUsed >= variant.productVariant.quantity ||
-        variantQuantity >= 10
-      ) {
-        return true;
+  const handleAddQuantity = (variant: IEventProductVariant) => {
+    setDraftQuantities((prev) => {
+      const current = prev[variant.id] ?? 0;
+      const next = current + 1;
+      const maxAvailable = getMaxAvailable(variant);
+      if (next > 10 || next > maxAvailable) return prev;
+      if (canAddOnlyOneAtATime) {
+        // Only allow one variant to be selected
+        return { [variant.id]: 1 };
       }
-    }
-    return false;
+      return { ...prev, [variant.id]: next };
+    });
   };
 
-  const handleAddQuantity = () => {
-    setVariantQuantity(variantQuantity + 1);
-    setSelectedVariant((prevState) => {
-      if (!prevState) return null;
-      return {
-        ...prevState,
-        quantity: variantQuantity + 1,
-      };
+  const handleRemoveQuantity = (variant: IEventProductVariant) => {
+    setDraftQuantities((prev) => {
+      const current = prev[variant.id] ?? 0;
+      const next = current - 1;
+      if (next <= 0) {
+        const rest = { ...prev };
+        delete rest[variant.id];
+        return rest;
+      }
+      if (canAddOnlyOneAtATime) {
+        // Remove the only variant
+        return {};
+      }
+      return { ...prev, [variant.id]: next };
     });
   };
 
-  const handleRemoveQuantity = () => {
-    if (variantQuantity > 0) {
-      setVariantQuantity(variantQuantity - 1);
+  const handleRemoveProduct = () => {
+    const variantsToRemove = eventProduct.eventProductVariants
+      .filter((variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0)
+      .map(
+        (variant) =>
+          ({
+            eventProductVariantId: variant.id,
+            productVariantId: variant.productVariant.id,
+            quantity: 0,
+            price: variant.priceWithVat,
+            excludedShippingMethodIds: eventProduct.excludedShippingMethods.map(
+              (method) => method.id
+            ),
+          }) as IEventProductForm
+      );
+
+    if (variantsToRemove.length === 0) {
+      return;
     }
-    setSelectedVariant((prevState) => {
-      if (!prevState) return null;
-      return {
-        ...prevState,
-        quantity: variantQuantity - 1,
-      };
-    });
+
+    callback(variantsToRemove);
+    setDraftQuantities({});
+    onClose?.();
   };
 
+  const hasSelectedVariants = eventProduct.eventProductVariants.some(
+    (variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0
+  );
+
+  const variantsById = useMemo(
+    () => new Map(eventProduct.eventProductVariants.map((variant) => [variant.id, variant])),
+    [eventProduct.eventProductVariants]
+  );
+
+  const totalDraftPrice = useMemo(
+    () =>
+      Object.entries(draftQuantities).reduce((total, [variantId, qty]) => {
+        const variant = variantsById.get(Number(variantId));
+        if (!variant) return total;
+        return total + variant.priceWithVat * qty;
+      }, 0),
+    [draftQuantities, variantsById]
+  );
+
+  const hasDraftSelection = useMemo(
+    () =>
+      eventProduct.eventProductVariants.some((variant) => (draftQuantities[variant.id] ?? 0) > 0),
+    [eventProduct.eventProductVariants, draftQuantities]
+  );
+
   return (
     <Dialog
       open={openDialog}
@@ -187,16 +220,19 @@ const ProductVariantsDialog: React.FC<Props> = ({
         },
       }}
     >
-      <DialogTitle />
-      <DialogContent>
+      <DialogTitle
+        sx={{ textAlign: 'center', fontWeight: 700, fontSize: { xs: '1.5rem', sm: '1.5rem' } }}
+      >
+        {eventProduct.product.name}
+      </DialogTitle>
+      <DialogContent sx={{ pb: 0 }}>
         <Stack spacing={1}>
           <Image
             src={eventProduct.product.previewImage.url}
             alt={eventProduct.product.name}
-            ratio="1/1"
-            sx={{ borderRadius: 2 }}
+            ratio="16/9"
+            sx={{ borderRadius: 1 }}
           />
-          <Typography variant="h5">{eventProduct.product.name}</Typography>
           <Typography variant="body2" color="primary">
             {t('form.labels.category')}: {eventProduct.product.category.value.text}
           </Typography>
@@ -207,64 +243,158 @@ const ProductVariantsDialog: React.FC<Props> = ({
         </Stack>
       </DialogContent>
       <DialogActions sx={{ justifyContent: 'flex-start' }}>
-        <Stack spacing={2} width="100%">
-          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap textAlign="left">
-            {eventProduct.eventProductVariants.map((variant) => (
-              <Button
-                key={variant.id}
-                onClick={() => handleOnClick(variant)}
-                variant={
-                  variant.id === selectedVariant?.eventProductVariantId ? 'contained' : 'outlined'
-                }
-                size="large"
-                disabled={isOnlyMerchandise ? false : isVariantDisabled(variant)}
-              >
-                <Badge
-                  color="primary"
-                  badgeContent={
-                    selectedQuantityByVariant ? selectedQuantityByVariant[variant.id] : 0
-                  }
-                  sx={{ position: 'unset' }}
+        <Stack spacing={1} width="100%">
+          <Stack spacing={1}>
+            {eventProduct.eventProductVariants.map((variant) => {
+              const draftQty = draftQuantities[variant.id] ?? 0;
+              const maxAvailable = getMaxAvailable(variant);
+              const isAddDisabled = isVariantDisabled(variant) || maxAvailable <= 0;
+              const isAnotherSelected =
+                canAddOnlyOneAtATime &&
+                Object.keys(draftQuantities).length > 0 &&
+                !draftQuantities[variant.id];
+              return (
+                <Stack
+                  key={variant.id}
+                  direction="row"
+                  spacing={1}
+                  alignItems="center"
+                  width="100%"
                 >
-                  {variant.productVariant.value}
-                </Badge>
-              </Button>
-            ))}
+                  <Box
+                    sx={{
+                      minWidth: 64,
+                      maxWidth: 64,
+                      height: 36,
+                      borderRadius: 1,
+                      border: 1,
+                      borderColor: 'divider',
+                      bgcolor: 'background.paper',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Typography variant="body2" fontWeight={600}>
+                      {variant.productVariant.value}
+                    </Typography>
+                  </Box>
+                  {draftQty > 0 ? (
+                    <Box
+                      sx={{
+                        flex: 1,
+                        display: 'grid',
+                        gridTemplateColumns: canAddOnlyOneAtATime
+                          ? 'repeat(2, minmax(0, 1fr))'
+                          : 'repeat(3, minmax(0, 1fr))',
+                        gap: 1,
+                        alignItems: 'center',
+                      }}
+                    >
+                      <Button
+                        variant="outlined"
+                        onClick={() => handleRemoveQuantity(variant)}
+                        aria-label={t('components.product_variant_dialog.decrease_quantity')}
+                        disabled={draftQty < 1}
+                        sx={{
+                          minWidth: 0,
+                          height: 36,
+                          borderRadius: 1,
+                          fontWeight: 700,
+                          borderColor: 'grey.300',
+                          color: 'text.primary',
+                        }}
+                      >
+                        -
+                      </Button>
+                      <Typography
+                        sx={{
+                          minWidth: 0,
+                          height: 36,
+                          borderRadius: 1,
+                          border: 1,
+                          borderColor: 'divider',
+                          boxSizing: 'border-box',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          textAlign: 'center',
+                          fontWeight: 700,
+                          color: 'text.primary',
+                        }}
+                      >
+                        {draftQty}
+                      </Typography>
+                      {!canAddOnlyOneAtATime && (
+                        <Button
+                          variant="contained"
+                          onClick={() => handleAddQuantity(variant)}
+                          aria-label={t('components.product_variant_dialog.increase_quantity')}
+                          disabled={draftQty >= 10 || draftQty >= maxAvailable}
+                          sx={{ minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 }}
+                        >
+                          +
+                        </Button>
+                      )}
+                    </Box>
+                  ) : (
+                    <Button
+                      variant="contained"
+                      onClick={() => handleAddQuantity(variant)}
+                      disabled={isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected}
+                      sx={{
+                        flex: 1,
+                        height: 36,
+                        borderRadius: 1,
+                        fontWeight: 700,
+                        textTransform: 'none',
+                      }}
+                    >
+                      {t('add')}
+                    </Button>
+                  )}
+
+                  <Typography variant="body2">
+                    {variant.priceWithVat > 0
+                      ? fCurrency(variant.priceWithVat, lang, eventProduct.product.currency)
+                      : t('free')}
+                  </Typography>
+                </Stack>
+              );
+            })}
           </Stack>
-          <Stack direction="row" justifyContent="space-between" alignItems="center" pt={1}>
-            {selectedVariant && isOnlyMerchandise && (
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <IconButton
-                  size="small"
-                  color="primary"
-                  onClick={handleRemoveQuantity}
-                  disabled={variantQuantity < 1}
-                >
-                  <Iconify icon="eva:minus-fill" />
-                </IconButton>
-                <Typography color="grey.500">{variantQuantity}</Typography>
-                <IconButton
-                  size="small"
-                  color="primary"
-                  onClick={handleAddQuantity}
-                  disabled={isVariantSoldOut()}
-                >
-                  <Iconify icon="eva:plus-fill" />
-                </IconButton>
-              </Stack>
-            )}
-            <Typography variant="h4" textAlign="right" mt={0}>
-              {variantPrice !== null
-                ? variantPrice > 0
-                  ? fCurrency(variantPrice, lang, eventProduct.product.currency)
-                  : t('free')
-                : t('unselected')}
+          <Stack
+            direction="row"
+            spacing={1}
+            justifyContent="space-between"
+            alignItems="center"
+            width="100%"
+          >
+            <Typography variant="body2">{t('form.labels.total')}</Typography>
+            <Typography variant="body2" fontWeight={600}>
+              {fCurrency(totalDraftPrice, lang, eventProduct.product.currency)}
             </Typography>
           </Stack>
           <Stack direction="row" spacing={1} justifyContent="flex-end" width="100%">
-            {onClose && <Button onClick={onClose}>{t('cancel')}</Button>}
-            <Button variant="contained" onClick={handleOnAdd} disabled={!selectedVariant}>
-              {t('add')}
+            {hasSelectedVariants && !canAddOnlyOneAtATime && (
+              <Button variant="outlined" color="error" onClick={handleRemoveProduct}>
+                {t('remove')}
+              </Button>
+            )}
+            {onClose && (
+              <Button
+                onClick={onClose}
+                sx={{
+                  border: 1,
+                  color: 'inherit',
+                  borderColor: (theme) => theme.palette.grey[300],
+                }}
+              >
+                {t('cancel')}
+              </Button>
+            )}
+            <Button variant="contained" onClick={handleOnAdd} disabled={!hasDraftSelection}>
+              {t('confirm')}
             </Button>
           </Stack>
         </Stack>