@eventlook/sdk 1.4.44 → 1.4.46-beta.1

package/src/form/product/ProductVariantsDialog.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Badge,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
   Stack,
   Typography,
 } from '@mui/material';
@@ -17,16 +15,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.ts';
-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 +35,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 +52,41 @@ 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 (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 +99,82 @@ 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 { [variant.id]: _removed, ...rest } = prev;
+        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
+  );
+
   return (
     <Dialog
       open={openDialog}
@@ -187,16 +193,17 @@ const ProductVariantsDialog: React.FC<Props> = ({
         },
       }}
     >
-      <DialogTitle />
+      <DialogTitle sx={{ textAlign: 'center', fontWeight: 700 }}>
+        {eventProduct.product.name}
+      </DialogTitle>
       <DialogContent>
         <Stack spacing={1}>
           <Image
             src={eventProduct.product.previewImage.url}
             alt={eventProduct.product.name}
-            ratio="1/1"
+            ratio="16/9"
             sx={{ borderRadius: 2 }}
           />
-          <Typography variant="h5">{eventProduct.product.name}</Typography>
           <Typography variant="body2" color="primary">
             {t('form.labels.category')}: {eventProduct.product.category.value.text}
           </Typography>
@@ -208,62 +215,113 @@ const ProductVariantsDialog: React.FC<Props> = ({
       </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.5}>
+            {eventProduct.eventProductVariants.map((variant) => {
+              const draftQty = draftQuantities[variant.id] ?? 0;
+              const selectedQty = selectedQuantityByVariant?.[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>
-            ))}
-          </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')}
-            </Typography>
+                  <Button
+                    onClick={() => handleAddQuantity(variant)}
+                    variant={draftQty > 0 ? 'contained' : 'outlined'}
+                    size="large"
+                    disabled={isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected}
+                    sx={{
+                      minWidth: 64,
+                      height: 40,
+                      borderRadius: 1,
+                      fontWeight: 700,
+                    }}
+                  >
+                    {variant.productVariant.value}
+                  </Button>
+                  {draftQty > 0 ? (
+                    <Stack direction="row" spacing={1} alignItems="center" sx={{ flex: 1 }}>
+                      <Button
+                        variant="outlined"
+                        onClick={() => handleRemoveQuantity(variant)}
+                        disabled={draftQty < 1}
+                        sx={{ minWidth: 40, height: 40, borderRadius: 1, fontWeight: 700 }}
+                      >
+                        -
+                      </Button>
+                      <Typography
+                        sx={{
+                          minWidth: 40,
+                          textAlign: 'center',
+                          fontWeight: 700,
+                          color: 'text.secondary',
+                        }}
+                      >
+                        {draftQty}
+                      </Typography>
+                      {!canAddOnlyOneAtATime && (
+                        <Button
+                          variant="contained"
+                          onClick={() => handleAddQuantity(variant)}
+                          disabled={draftQty >= 10 || draftQty >= maxAvailable}
+                          sx={{ minWidth: 40, height: 40, borderRadius: 1, fontWeight: 700 }}
+                        >
+                          +
+                        </Button>
+                      )}
+                    </Stack>
+                  ) : (
+                    <Button
+                      variant="contained"
+                      onClick={() => handleAddQuantity(variant)}
+                      disabled={isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected}
+                      sx={{
+                        flex: 1,
+                        height: 40,
+                        borderRadius: 1,
+                        fontWeight: 700,
+                        textTransform: 'none',
+                      }}
+                    >
+                      {t('add')}
+                    </Button>
+                  )}
+                  <Stack direction="row" spacing={1} alignItems="center">
+                    {selectedQty > 0 && (
+                      <Typography variant="caption" color="text.secondary">
+                        {selectedQty}x
+                      </Typography>
+                    )}
+                    <Typography variant="body1" fontWeight={600}>
+                      {variant.priceWithVat > 0
+                        ? fCurrency(variant.priceWithVat, lang, eventProduct.product.currency)
+                        : t('free')}
+                    </Typography>
+                  </Stack>
+                </Stack>
+              );
+            })}
           </Stack>
           <Stack direction="row" spacing={1} justifyContent="flex-end" width="100%">
+            {hasSelectedVariants && !canAddOnlyOneAtATime && (
+              <Button variant="outlined" color="error" onClick={handleRemoveProduct}>
+                {t('remove')}
+              </Button>
+            )}
             {onClose && <Button onClick={onClose}>{t('cancel')}</Button>}
-            <Button variant="contained" onClick={handleOnAdd} disabled={!selectedVariant}>
+            <Button
+              variant="contained"
+              onClick={handleOnAdd}
+              disabled={!Object.values(draftQuantities).some((qty) => qty > 0)}
+            >
               {t('add')}
             </Button>
           </Stack>

package/src/form/services/index.tsx

@@ -0,0 +1,217 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  IconButton,
+  Link,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { RHFCheckbox } from '@components/hook-form';
+import { fCurrency } from '@utils/formatNumber';
+import useGlobal from '@hooks/useGlobal';
+import { Iconify } from '@components';
+import { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';
+import { IEvent } from '@utils/types/event.type';
+
+interface Props {
+  event: IEvent;
+}
+
+interface BorderedCheckboxProps {
+  name: string;
+  disabled: boolean;
+  title: React.ReactNode;
+  price: React.ReactNode;
+}
+
+const BorderedCheckbox: React.FC<BorderedCheckboxProps> = ({ name, disabled, title, price }) => (
+  <RHFCheckbox
+    name={name}
+    disabled={disabled}
+    label={
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ width: '100%' }}
+      >
+        <Typography variant="body2" fontWeight={600}>
+          {title}
+        </Typography>
+        <Typography variant="body2" fontWeight={700} sx={{ whiteSpace: 'nowrap' }}>
+          {price}
+        </Typography>
+      </Stack>
+    }
+    sx={{
+      m: 0,
+      px: 1,
+      pr: 0.5,
+      pl: 0,
+      borderRadius: 1,
+      width: '100%',
+      border: '1px    solid',
+      borderColor: 'primary.main',
+      '& .MuiFormControlLabel-label': {
+        width: '100%',
+      },
+    }}
+  />
+);
+
+const Services: React.FC<Props> = ({ event }) => {
+  const { t, lang } = useGlobal();
+  const [open, setOpen] = useState(false);
+  const ticketInsurancePricePerUnit = Number(
+    useWatch<ITicketForm>({
+      name: 'ticketInsurancePricePerUnit',
+      defaultValue: 0,
+    }) || 0
+  );
+  const smsNotificationPrice = Number(
+    useWatch<ITicketForm>({
+      name: 'smsNotificationPrice',
+      defaultValue: 0,
+    }) || 0
+  );
+  const tickets = useWatch<ITicketForm, 'tickets'>({
+    name: 'tickets',
+    defaultValue: {},
+  });
+
+  const totalTickets = useMemo(() => {
+    const items: ITicketFormTicket[] = Object.values(tickets || {}).flat();
+    return items.reduce((sum, ticket) => sum + (Number(ticket.quantity) || 0), 0);
+  }, [tickets]);
+
+  const handleOpen = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    setOpen(true);
+  };
+
+  const handleClose = () => setOpen(false);
+
+  return (
+    <Stack spacing={1.5}>
+      <BorderedCheckbox
+        name="ticketInsurance"
+        disabled={totalTickets <= 0}
+        title={t('event.tickets.insurance.label')}
+        price={
+          <>
+            + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}
+            {t('event.tickets.insurance.per_ticket')}
+          </>
+        }
+      />
+
+      <BorderedCheckbox
+        name="smsNotification"
+        disabled={totalTickets <= 0}
+        title={t('event.tickets.sms_notification.label')}
+        price={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
+      />
+
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Link variant="body2" underline="always" onClick={handleOpen} color={'text.primary'}>
+          {t('event.tickets.stepper.8.additional_info')}
+        </Link>
+      </Box>
+
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        maxWidth="sm"
+        fullWidth
+        PaperProps={{
+          sx: {
+            borderRadius: 4,
+            overflow: 'hidden',
+          },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            position: 'relative',
+            textAlign: 'center',
+            fontWeight: 700,
+            fontSize: { xs: '1.5rem', sm: '1.75rem' },
+            pt: { xs: 3.5, sm: 4 },
+            pb: { xs: 2, sm: 2.5 },
+            px: { xs: 3, sm: 4 },
+          }}
+        >
+          {t('event.tickets.stepper.8.title')}
+          <IconButton
+            onClick={handleClose}
+            size="small"
+            sx={{ position: 'absolute', right: 16, top: 16 }}
+          >
+            <Iconify icon="carbon:close" />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent sx={{ px: { xs: 3, sm: 4 }, pb: { xs: 4, sm: 5 } }}>
+          <Stack spacing={3}>
+            <Box>
+              <Typography variant="subtitle2" fontWeight={700} gutterBottom>
+                {t('event.tickets.insurance.label')}
+              </Typography>
+              <Typography variant="body2" paragraph>
+                {t('event.tickets.insurance.modal.description')}
+              </Typography>
+              <Typography variant="body2" paragraph>
+                {t('event.tickets.insurance.modal.coverage')}
+              </Typography>
+              <BorderedCheckbox
+                name="ticketInsurance"
+                disabled={totalTickets <= 0}
+                title={t('event.tickets.insurance.label')}
+                price={
+                  <>
+                    + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}
+                    {t('event.tickets.insurance.per_ticket')}
+                  </>
+                }
+              />
+            </Box>
+            <Divider />
+            <Box>
+              <Typography variant="subtitle2" fontWeight={700} gutterBottom>
+                {t('event.tickets.sms_notification.label')}
+              </Typography>
+              <Typography variant="body2" paragraph>
+                {t('event.tickets.sms_notification.modal.description')}
+              </Typography>
+              <BorderedCheckbox
+                name="smsNotification"
+                disabled={totalTickets <= 0}
+                title={t('event.tickets.sms_notification.label')}
+                price={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}
+              />
+            </Box>
+            <Button
+              variant="outlined"
+              onClick={handleClose}
+              sx={{
+                mt: 1,
+                py: 1.25,
+                borderRadius: 2,
+                fontWeight: 700,
+              }}
+            >
+              {t('close')}
+            </Button>
+          </Stack>
+        </DialogContent>
+      </Dialog>
+    </Stack>
+  );
+};
+
+export default Services;