@eventlook/sdk 1.4.48 → 1.4.49-beta.1

package/dist/esm/form/product/ProductVariantsDialog.js

@@ -1,22 +1,14 @@
-import React, { useState, useEffect } from 'react';
-import { Dialog, DialogTitle, DialogContent, Stack, Typography, DialogActions, Button, Badge, IconButton } from '@mui/material';
+import React, { useState, useEffect, useMemo } from 'react';
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, DialogActions, Box, Button } from '@mui/material';
 import Image from '../../components/Image.js';
 import { useWatch } from 'react-hook-form';
 import { fCurrency } from '../../utils/formatNumber.js';
 import useGlobal from '../../hooks/useGlobal.js';
-import 'framer-motion';
-import '../../components/animate/IconButtonAnimate.js';
-import '@mui/material/styles';
-import '@mui/material/useMediaQuery';
-import Iconify from '../../components/iconify/Iconify.js';
 
-const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, selectedQuantityByVariant, isOnlyMerchandise, eventId, }) => {
+const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, selectedQuantityByVariant, isOnlyMerchandise, eventId, canAddOnlyOneAtATime, }) => {
     const { t, lang, options } = useGlobal();
     const { showSnackbar } = useGlobal();
-    const [selectedVariant, setSelectedVariant] = useState(null);
-    const [variantPrice, setVariantPrice] = useState(null);
-    const [variantQuantity, setVariantQuantity] = useState(1);
-    const [isVariantClicked, setIsVariantClicked] = useState(false);
+    const [draftQuantities, setDraftQuantities] = useState({});
     const tickets = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
     const products = useWatch({ name: `products.${eventId}`, defaultValue: [] });
     useEffect(() => {
@@ -27,38 +19,36 @@ const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, se
         }
     }, [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) => {
-        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),
+            };
+        })
+            .filter((variant) => 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) => {
+    const getUsedCount = (variant) => {
         let countUsed = 0;
-        let selectedVariantQuantity = 0;
         for (const product of products) {
             if (product.productVariantId === variant.productVariant.id) {
                 countUsed += product.quantity;
@@ -69,59 +59,78 @@ const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, se
                 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;
-        for (const ticket of tickets) {
-            if (ticket.products) {
-                for (const product of ticket.products) {
-                    if (product.productVariantId === variant?.productVariant.id) {
-                        countUsed += product.quantity;
-                    }
-                }
-            }
-        }
-        if (variant && variant.productVariant.quantity) {
-            if (variant.productVariant.sold + countUsed >= variant.productVariant.quantity ||
-                variantQuantity >= 10) {
-                return true;
+    const getMaxAvailable = (variant) => {
+        if (!variant.productVariant.quantity)
+            return Number.POSITIVE_INFINITY;
+        return variant.productVariant.quantity - variant.productVariant.sold - getUsedCount(variant);
+    };
+    const isVariantDisabled = (variant) => {
+        if (!variant.productVariant.quantity)
+            return false;
+        return getMaxAvailable(variant) <= 0;
+    };
+    const handleAddQuantity = (variant) => {
+        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) => {
+        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),
+        }));
+        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 (React.createElement(Dialog, { open: openDialog, onClose: () => onClose && onClose(), fullWidth: true, sx: {
             mx: 'auto',
             width: {
@@ -134,35 +143,87 @@ const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, se
                 height: options?.isIframe ? 'auto' : '100%',
             },
         } },
-        React.createElement(DialogTitle, null),
-        React.createElement(DialogContent, null,
+        React.createElement(DialogTitle, { sx: { textAlign: 'center', fontWeight: 700, fontSize: { xs: '1.5rem', sm: '1.5rem' } } }, eventProduct.product.name),
+        React.createElement(DialogContent, { sx: { pb: 0 } },
             React.createElement(Stack, { spacing: 1 },
-                React.createElement(Image, { src: eventProduct.product.previewImage.url, alt: eventProduct.product.name, ratio: "1/1", sx: { borderRadius: 2 } }),
-                React.createElement(Typography, { variant: "h5" }, eventProduct.product.name),
+                React.createElement(Image, { src: eventProduct.product.previewImage.url, alt: eventProduct.product.name, ratio: "16/9", sx: { borderRadius: 1 } }),
                 React.createElement(Typography, { variant: "body2", color: "primary" },
                     t('form.labels.category'),
                     ": ",
                     eventProduct.product.category.value.text),
                 React.createElement(Typography, { variant: "caption", dangerouslySetInnerHTML: { __html: eventProduct.product.description } }))),
         React.createElement(DialogActions, { sx: { justifyContent: 'flex-start' } },
-            React.createElement(Stack, { spacing: 2, width: "100%" },
-                React.createElement(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, textAlign: "left" }, eventProduct.eventProductVariants.map((variant) => (React.createElement(Button, { key: variant.id, onClick: () => handleOnClick(variant), variant: variant.id === selectedVariant?.eventProductVariantId ? 'contained' : 'outlined', size: "large", disabled: isOnlyMerchandise ? false : isVariantDisabled(variant) },
-                    React.createElement(Badge, { color: "primary", badgeContent: selectedQuantityByVariant ? selectedQuantityByVariant[variant.id] : 0, sx: { position: 'unset' } }, variant.productVariant.value))))),
-                React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", pt: 1 },
-                    selectedVariant && isOnlyMerchandise && (React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 1 },
-                        React.createElement(IconButton, { size: "small", color: "primary", onClick: handleRemoveQuantity, disabled: variantQuantity < 1 },
-                            React.createElement(Iconify, { icon: "eva:minus-fill" })),
-                        React.createElement(Typography, { color: "grey.500" }, variantQuantity),
-                        React.createElement(IconButton, { size: "small", color: "primary", onClick: handleAddQuantity, disabled: isVariantSoldOut() },
-                            React.createElement(Iconify, { icon: "eva:plus-fill" })))),
-                    React.createElement(Typography, { variant: "h4", textAlign: "right", mt: 0 }, variantPrice !== null
-                        ? variantPrice > 0
-                            ? fCurrency(variantPrice, lang, eventProduct.product.currency)
-                            : t('free')
-                        : t('unselected'))),
+            React.createElement(Stack, { spacing: 1, width: "100%" },
+                React.createElement(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 (React.createElement(Stack, { key: variant.id, direction: "row", spacing: 1, alignItems: "center", width: "100%" },
+                        React.createElement(Box, { sx: {
+                                minWidth: 64,
+                                maxWidth: 64,
+                                height: 36,
+                                borderRadius: 1,
+                                border: 1,
+                                borderColor: 'divider',
+                                bgcolor: 'background.paper',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            } },
+                            React.createElement(Typography, { variant: "body2", fontWeight: 600 }, variant.productVariant.value)),
+                        draftQty > 0 ? (React.createElement(Box, { sx: {
+                                flex: 1,
+                                display: 'grid',
+                                gridTemplateColumns: canAddOnlyOneAtATime
+                                    ? 'repeat(2, minmax(0, 1fr))'
+                                    : 'repeat(3, minmax(0, 1fr))',
+                                gap: 1,
+                                alignItems: 'center',
+                            } },
+                            React.createElement(Button, { variant: "outlined", onClick: () => handleRemoveQuantity(variant), disabled: draftQty < 1, sx: {
+                                    minWidth: 0,
+                                    height: 36,
+                                    borderRadius: 1,
+                                    fontWeight: 700,
+                                    borderColor: 'grey.300',
+                                    color: 'text.primary',
+                                } }, "-"),
+                            React.createElement(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),
+                            !canAddOnlyOneAtATime && (React.createElement(Button, { variant: "contained", onClick: () => handleAddQuantity(variant), disabled: draftQty >= 10 || draftQty >= maxAvailable, sx: { minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 } }, "+")))) : (React.createElement(Button, { variant: "contained", onClick: () => handleAddQuantity(variant), disabled: isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected, sx: {
+                                flex: 1,
+                                height: 36,
+                                borderRadius: 1,
+                                fontWeight: 700,
+                                textTransform: 'none',
+                            } }, t('add'))),
+                        React.createElement(Typography, { variant: "body2" }, variant.priceWithVat > 0
+                            ? fCurrency(variant.priceWithVat, lang, eventProduct.product.currency)
+                            : t('free'))));
+                })),
+                React.createElement(Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", width: "100%" },
+                    React.createElement(Typography, { variant: "body2" }, t('form.labels.total')),
+                    React.createElement(Typography, { variant: "body2", fontWeight: 600 }, fCurrency(totalDraftPrice, lang, eventProduct.product.currency))),
                 React.createElement(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", width: "100%" },
+                    hasSelectedVariants && !canAddOnlyOneAtATime && (React.createElement(Button, { variant: "outlined", color: "error", onClick: handleRemoveProduct }, t('remove'))),
                     onClose && React.createElement(Button, { onClick: onClose }, t('cancel')),
-                    React.createElement(Button, { variant: "contained", onClick: handleOnAdd, disabled: !selectedVariant }, t('add')))))));
+                    React.createElement(Button, { variant: "contained", onClick: handleOnAdd, disabled: !hasDraftSelection }, t('confirm')))))));
 };
 
 export { ProductVariantsDialog as default };

package/dist/esm/form/product/ProductVariantsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductVariantsDialog.js","sources":["../../../../src/form/product/ProductVariantsDialog.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Badge,\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport { IEventProduct, IEventProductVariant } from '@utils/types/event-product.type';\nimport Image from '@components/Image';\nimport { useWatch } from 'react-hook-form';\nimport { ITicketFormTicket } from '@utils/types/ticket.type';\nimport { IEventProductForm } from '@utils/types/product.type';\nimport { fCurrency } from '@utils/formatNumber';\nimport useGlobal from '@hooks/useGlobal.ts';\nimport { Iconify } from '@components';\n\ninterface Props {\n  eventProduct: IEventProduct;\n  eventId: number;\n  openDialog: boolean;\n  callback: (variant: IEventProductForm) => void;\n  onClose?: () => void;\n  selectedQuantityByVariant?: Record<number, number>;\n  isOnlyMerchandise?: boolean;\n}\n\nconst ProductVariantsDialog: React.FC<Props> = ({\n  eventProduct,\n  openDialog,\n  onClose,\n  callback,\n  selectedQuantityByVariant,\n  isOnlyMerchandise,\n  eventId,\n}) => {\n  const { t, lang, options } = useGlobal();\n  const { showSnackbar } = useGlobal();\n  const [selectedVariant, setSelectedVariant] = useState<IEventProductForm | null>(null);\n  const [variantPrice, setVariantPrice] = useState<number | null>(null);\n  const [variantQuantity, setVariantQuantity] = useState<number>(1);\n  const [isVariantClicked, setIsVariantClicked] = useState(false);\n  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });\n  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });\n\n  useEffect(() => {\n    if (openDialog) {\n      const urlParams = new URLSearchParams(new URL(window.location.href).search);\n      const elementId = urlParams.get('elementId');\n      parent.postMessage({ type: 'eventlookFrameOpenDialog', name: elementId }, '*');\n    }\n  }, [openDialog]);\n\n  useEffect(() => {\n    if (isVariantClicked) {\n      setVariantQuantity(\n        selectedQuantityByVariant &&\n          selectedVariant &&\n          selectedQuantityByVariant[selectedVariant.eventProductVariantId] !== undefined\n          ? selectedQuantityByVariant[selectedVariant.eventProductVariantId]\n          : 1\n      );\n      setIsVariantClicked(false);\n    }\n  }, [selectedVariant, isVariantClicked]);\n\n  const handleOnClick = (variant: IEventProductVariant) => {\n    setVariantPrice(variant.priceWithVat);\n    setSelectedVariant({\n      eventProductVariantId: variant.id,\n      productVariantId: variant.productVariant.id,\n      quantity: 1,\n      price: variant.priceWithVat,\n      excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),\n    });\n    setIsVariantClicked(true);\n  };\n\n  const handleOnAdd = () => {\n    if (!selectedVariant) {\n      showSnackbar(t('components.product_variant_dialog.select_variant'), { variant: 'error' });\n      return;\n    }\n    callback(selectedVariant);\n    setSelectedVariant(null);\n    onClose?.();\n  };\n\n  const isVariantDisabled = (variant: IEventProductVariant) => {\n    let countUsed = 0;\n    let selectedVariantQuantity = 0;\n\n    for (const product of products) {\n      if (product.productVariantId === variant.productVariant.id) {\n        countUsed += product.quantity;\n      }\n    }\n\n    for (const ticket of tickets) {\n      if (ticket.products) {\n        for (const product of ticket.products) {\n          if (product.productVariantId === variant.productVariant.id) {\n            countUsed += product.quantity;\n            selectedVariantQuantity = product.quantity;\n          }\n        }\n      }\n    }\n\n    return (\n      (variant.productVariant.quantity &&\n        countUsed + variant.productVariant.sold >= variant.productVariant.quantity) ||\n      selectedVariantQuantity >= 10\n    );\n  };\n\n  const isVariantSoldOut = () => {\n    const variant = eventProduct.eventProductVariants.find(\n      (product) => product.id === selectedVariant?.eventProductVariantId\n    );\n    let countUsed = variantQuantity;\n\n    for (const ticket of tickets) {\n      if (ticket.products) {\n        for (const product of ticket.products) {\n          if (product.productVariantId === variant?.productVariant.id) {\n            countUsed += product.quantity;\n          }\n        }\n      }\n    }\n\n    if (variant && variant.productVariant.quantity) {\n      if (\n        variant.productVariant.sold + countUsed >= variant.productVariant.quantity ||\n        variantQuantity >= 10\n      ) {\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const handleAddQuantity = () => {\n    setVariantQuantity(variantQuantity + 1);\n    setSelectedVariant((prevState) => {\n      if (!prevState) return null;\n      return {\n        ...prevState,\n        quantity: variantQuantity + 1,\n      };\n    });\n  };\n\n  const handleRemoveQuantity = () => {\n    if (variantQuantity > 0) {\n      setVariantQuantity(variantQuantity - 1);\n    }\n    setSelectedVariant((prevState) => {\n      if (!prevState) return null;\n      return {\n        ...prevState,\n        quantity: variantQuantity - 1,\n      };\n    });\n  };\n\n  return (\n    <Dialog\n      open={openDialog}\n      onClose={() => onClose && onClose()}\n      fullWidth\n      sx={{\n        mx: 'auto',\n        width: {\n          xs: '100%',\n          sm: 'calc(100vh - 300px)',\n        },\n        minWidth: 300,\n        maxWidth: 444,\n        '& .MuiDialog-container': {\n          height: options?.isIframe ? 'auto' : '100%',\n        },\n      }}\n    >\n      <DialogTitle />\n      <DialogContent>\n        <Stack spacing={1}>\n          <Image\n            src={eventProduct.product.previewImage.url}\n            alt={eventProduct.product.name}\n            ratio=\"1/1\"\n            sx={{ borderRadius: 2 }}\n          />\n          <Typography variant=\"h5\">{eventProduct.product.name}</Typography>\n          <Typography variant=\"body2\" color=\"primary\">\n            {t('form.labels.category')}: {eventProduct.product.category.value.text}\n          </Typography>\n          <Typography\n            variant=\"caption\"\n            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}\n          />\n        </Stack>\n      </DialogContent>\n      <DialogActions sx={{ justifyContent: 'flex-start' }}>\n        <Stack spacing={2} width=\"100%\">\n          <Stack direction=\"row\" spacing={1} flexWrap=\"wrap\" useFlexGap textAlign=\"left\">\n            {eventProduct.eventProductVariants.map((variant) => (\n              <Button\n                key={variant.id}\n                onClick={() => handleOnClick(variant)}\n                variant={\n                  variant.id === selectedVariant?.eventProductVariantId ? 'contained' : 'outlined'\n                }\n                size=\"large\"\n                disabled={isOnlyMerchandise ? false : isVariantDisabled(variant)}\n              >\n                <Badge\n                  color=\"primary\"\n                  badgeContent={\n                    selectedQuantityByVariant ? selectedQuantityByVariant[variant.id] : 0\n                  }\n                  sx={{ position: 'unset' }}\n                >\n                  {variant.productVariant.value}\n                </Badge>\n              </Button>\n            ))}\n          </Stack>\n          <Stack direction=\"row\" justifyContent=\"space-between\" alignItems=\"center\" pt={1}>\n            {selectedVariant && isOnlyMerchandise && (\n              <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n                <IconButton\n                  size=\"small\"\n                  color=\"primary\"\n                  onClick={handleRemoveQuantity}\n                  disabled={variantQuantity < 1}\n                >\n                  <Iconify icon=\"eva:minus-fill\" />\n                </IconButton>\n                <Typography color=\"grey.500\">{variantQuantity}</Typography>\n                <IconButton\n                  size=\"small\"\n                  color=\"primary\"\n                  onClick={handleAddQuantity}\n                  disabled={isVariantSoldOut()}\n                >\n                  <Iconify icon=\"eva:plus-fill\" />\n                </IconButton>\n              </Stack>\n            )}\n            <Typography variant=\"h4\" textAlign=\"right\" mt={0}>\n              {variantPrice !== null\n                ? variantPrice > 0\n                  ? fCurrency(variantPrice, lang, eventProduct.product.currency)\n                  : t('free')\n                : t('unselected')}\n            </Typography>\n          </Stack>\n          <Stack direction=\"row\" spacing={1} justifyContent=\"flex-end\" width=\"100%\">\n            {onClose && <Button onClick={onClose}>{t('cancel')}</Button>}\n            <Button variant=\"contained\" onClick={handleOnAdd} disabled={!selectedVariant}>\n              {t('add')}\n            </Button>\n          </Stack>\n        </Stack>\n      </DialogActions>\n    </Dialog>\n  );\n};\n\nexport default ProductVariantsDialog;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductVariantsDialog.js","sources":["../../../../src/form/product/ProductVariantsDialog.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n  Box,\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport { IEventProduct, IEventProductVariant } from '@utils/types/event-product.type';\nimport Image from '@components/Image';\nimport { useWatch } from 'react-hook-form';\nimport { ITicketFormTicket } from '@utils/types/ticket.type';\nimport { IEventProductForm } from '@utils/types/product.type';\nimport { fCurrency } from '@utils/formatNumber';\nimport useGlobal from '@hooks/useGlobal.ts';\n\ninterface Props {\n  eventProduct: IEventProduct;\n  eventId: number;\n  openDialog: boolean;\n  callback: (variants: IEventProductForm[]) => void;\n  onClose?: () => void;\n  selectedQuantityByVariant?: Record<number, number>;\n  isOnlyMerchandise?: boolean;\n  canAddOnlyOneAtATime?: boolean;\n}\n\nconst ProductVariantsDialog: React.FC<Props> = ({\n  eventProduct,\n  openDialog,\n  onClose,\n  callback,\n  selectedQuantityByVariant,\n  isOnlyMerchandise,\n  eventId,\n  canAddOnlyOneAtATime,\n}) => {\n  const { t, lang, options } = useGlobal();\n  const { showSnackbar } = useGlobal();\n  const [draftQuantities, setDraftQuantities] = useState<Record<number, number>>({});\n  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });\n  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });\n\n  useEffect(() => {\n    if (openDialog) {\n      const urlParams = new URLSearchParams(new URL(window.location.href).search);\n      const elementId = urlParams.get('elementId');\n      parent.postMessage({ type: 'eventlookFrameOpenDialog', name: elementId }, '*');\n    }\n  }, [openDialog]);\n\n  useEffect(() => {\n    if (openDialog) {\n      setDraftQuantities(canAddOnlyOneAtATime ? {} : (selectedQuantityByVariant ?? {}));\n    }\n  }, [openDialog, selectedQuantityByVariant, canAddOnlyOneAtATime]);\n\n  const handleOnAdd = () => {\n    const selectedVariants = eventProduct.eventProductVariants\n      .map((variant) => {\n        const quantity = draftQuantities[variant.id] ?? 0;\n        const selectedQty = selectedQuantityByVariant?.[variant.id] ?? 0;\n        if (quantity <= 0 && selectedQty <= 0) return null;\n        return {\n          eventProductVariantId: variant.id,\n          productVariantId: variant.productVariant.id,\n          quantity,\n          price: variant.priceWithVat,\n          excludedShippingMethodIds: eventProduct.excludedShippingMethods.map(\n            (method) => method.id\n          ),\n        } as IEventProductForm;\n      })\n      .filter((variant): variant is IEventProductForm => Boolean(variant));\n\n    if (selectedVariants.length === 0) {\n      showSnackbar(t('components.product_variant_dialog.select_variant'), { variant: 'error' });\n      return;\n    }\n\n    callback(selectedVariants);\n    setDraftQuantities({});\n    onClose?.();\n  };\n\n  const getUsedCount = (variant: IEventProductVariant) => {\n    let countUsed = 0;\n\n    for (const product of products) {\n      if (product.productVariantId === variant.productVariant.id) {\n        countUsed += product.quantity;\n      }\n    }\n\n    for (const ticket of tickets) {\n      if (ticket.products) {\n        for (const product of ticket.products) {\n          if (product.productVariantId === variant.productVariant.id) {\n            countUsed += product.quantity;\n          }\n        }\n      }\n    }\n    return countUsed;\n  };\n\n  const getMaxAvailable = (variant: IEventProductVariant) => {\n    if (!variant.productVariant.quantity) return Number.POSITIVE_INFINITY;\n    return variant.productVariant.quantity - variant.productVariant.sold - getUsedCount(variant);\n  };\n\n  const isVariantDisabled = (variant: IEventProductVariant) => {\n    if (!variant.productVariant.quantity) return false;\n    return getMaxAvailable(variant) <= 0;\n  };\n\n  const handleAddQuantity = (variant: IEventProductVariant) => {\n    setDraftQuantities((prev) => {\n      const current = prev[variant.id] ?? 0;\n      const next = current + 1;\n      const maxAvailable = getMaxAvailable(variant);\n      if (next > 10 || next > maxAvailable) return prev;\n      if (canAddOnlyOneAtATime) {\n        // Only allow one variant to be selected\n        return { [variant.id]: 1 };\n      }\n      return { ...prev, [variant.id]: next };\n    });\n  };\n\n  const handleRemoveQuantity = (variant: IEventProductVariant) => {\n    setDraftQuantities((prev) => {\n      const current = prev[variant.id] ?? 0;\n      const next = current - 1;\n      if (next <= 0) {\n        const rest = { ...prev };\n        delete rest[variant.id];\n        return rest;\n      }\n      if (canAddOnlyOneAtATime) {\n        // Remove the only variant\n        return {};\n      }\n      return { ...prev, [variant.id]: next };\n    });\n  };\n\n  const handleRemoveProduct = () => {\n    const variantsToRemove = eventProduct.eventProductVariants\n      .filter((variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0)\n      .map(\n        (variant) =>\n          ({\n            eventProductVariantId: variant.id,\n            productVariantId: variant.productVariant.id,\n            quantity: 0,\n            price: variant.priceWithVat,\n            excludedShippingMethodIds: eventProduct.excludedShippingMethods.map(\n              (method) => method.id\n            ),\n          }) as IEventProductForm\n      );\n\n    if (variantsToRemove.length === 0) {\n      return;\n    }\n\n    callback(variantsToRemove);\n    setDraftQuantities({});\n    onClose?.();\n  };\n\n  const hasSelectedVariants = eventProduct.eventProductVariants.some(\n    (variant) => (selectedQuantityByVariant?.[variant.id] ?? 0) > 0\n  );\n\n  const variantsById = useMemo(\n    () => new Map(eventProduct.eventProductVariants.map((variant) => [variant.id, variant])),\n    [eventProduct.eventProductVariants]\n  );\n\n  const totalDraftPrice = useMemo(\n    () =>\n      Object.entries(draftQuantities).reduce((total, [variantId, qty]) => {\n        const variant = variantsById.get(Number(variantId));\n        if (!variant) return total;\n        return total + variant.priceWithVat * qty;\n      }, 0),\n    [draftQuantities, variantsById]\n  );\n\n  const hasDraftSelection = useMemo(\n    () =>\n      eventProduct.eventProductVariants.some((variant) => (draftQuantities[variant.id] ?? 0) > 0),\n    [eventProduct.eventProductVariants, draftQuantities]\n  );\n\n  return (\n    <Dialog\n      open={openDialog}\n      onClose={() => onClose && onClose()}\n      fullWidth\n      sx={{\n        mx: 'auto',\n        width: {\n          xs: '100%',\n          sm: 'calc(100vh - 300px)',\n        },\n        minWidth: 300,\n        maxWidth: 444,\n        '& .MuiDialog-container': {\n          height: options?.isIframe ? 'auto' : '100%',\n        },\n      }}\n    >\n      <DialogTitle\n        sx={{ textAlign: 'center', fontWeight: 700, fontSize: { xs: '1.5rem', sm: '1.5rem' } }}\n      >\n        {eventProduct.product.name}\n      </DialogTitle>\n      <DialogContent sx={{ pb: 0 }}>\n        <Stack spacing={1}>\n          <Image\n            src={eventProduct.product.previewImage.url}\n            alt={eventProduct.product.name}\n            ratio=\"16/9\"\n            sx={{ borderRadius: 1 }}\n          />\n          <Typography variant=\"body2\" color=\"primary\">\n            {t('form.labels.category')}: {eventProduct.product.category.value.text}\n          </Typography>\n          <Typography\n            variant=\"caption\"\n            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}\n          />\n        </Stack>\n      </DialogContent>\n      <DialogActions sx={{ justifyContent: 'flex-start' }}>\n        <Stack spacing={1} width=\"100%\">\n          <Stack spacing={1}>\n            {eventProduct.eventProductVariants.map((variant) => {\n              const draftQty = draftQuantities[variant.id] ?? 0;\n              const maxAvailable = getMaxAvailable(variant);\n              const isAddDisabled = isVariantDisabled(variant) || maxAvailable <= 0;\n              const isAnotherSelected =\n                canAddOnlyOneAtATime &&\n                Object.keys(draftQuantities).length > 0 &&\n                !draftQuantities[variant.id];\n              return (\n                <Stack\n                  key={variant.id}\n                  direction=\"row\"\n                  spacing={1}\n                  alignItems=\"center\"\n                  width=\"100%\"\n                >\n                  <Box\n                    sx={{\n                      minWidth: 64,\n                      maxWidth: 64,\n                      height: 36,\n                      borderRadius: 1,\n                      border: 1,\n                      borderColor: 'divider',\n                      bgcolor: 'background.paper',\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'center',\n                    }}\n                  >\n                    <Typography variant=\"body2\" fontWeight={600}>\n                      {variant.productVariant.value}\n                    </Typography>\n                  </Box>\n                  {draftQty > 0 ? (\n                    <Box\n                      sx={{\n                        flex: 1,\n                        display: 'grid',\n                        gridTemplateColumns: canAddOnlyOneAtATime\n                          ? 'repeat(2, minmax(0, 1fr))'\n                          : 'repeat(3, minmax(0, 1fr))',\n                        gap: 1,\n                        alignItems: 'center',\n                      }}\n                    >\n                      <Button\n                        variant=\"outlined\"\n                        onClick={() => handleRemoveQuantity(variant)}\n                        disabled={draftQty < 1}\n                        sx={{\n                          minWidth: 0,\n                          height: 36,\n                          borderRadius: 1,\n                          fontWeight: 700,\n                          borderColor: 'grey.300',\n                          color: 'text.primary',\n                        }}\n                      >\n                        -\n                      </Button>\n                      <Typography\n                        sx={{\n                          minWidth: 0,\n                          height: 36,\n                          borderRadius: 1,\n                          border: 1,\n                          borderColor: 'divider',\n                          boxSizing: 'border-box',\n                          display: 'flex',\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          textAlign: 'center',\n                          fontWeight: 700,\n                          color: 'text.primary',\n                        }}\n                      >\n                        {draftQty}\n                      </Typography>\n                      {!canAddOnlyOneAtATime && (\n                        <Button\n                          variant=\"contained\"\n                          onClick={() => handleAddQuantity(variant)}\n                          disabled={draftQty >= 10 || draftQty >= maxAvailable}\n                          sx={{ minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 }}\n                        >\n                          +\n                        </Button>\n                      )}\n                    </Box>\n                  ) : (\n                    <Button\n                      variant=\"contained\"\n                      onClick={() => handleAddQuantity(variant)}\n                      disabled={isOnlyMerchandise ? false : isAddDisabled || isAnotherSelected}\n                      sx={{\n                        flex: 1,\n                        height: 36,\n                        borderRadius: 1,\n                        fontWeight: 700,\n                        textTransform: 'none',\n                      }}\n                    >\n                      {t('add')}\n                    </Button>\n                  )}\n\n                  <Typography variant=\"body2\">\n                    {variant.priceWithVat > 0\n                      ? fCurrency(variant.priceWithVat, lang, eventProduct.product.currency)\n                      : t('free')}\n                  </Typography>\n                </Stack>\n              );\n            })}\n          </Stack>\n          <Stack\n            direction=\"row\"\n            spacing={1}\n            justifyContent=\"space-between\"\n            alignItems=\"center\"\n            width=\"100%\"\n          >\n            <Typography variant=\"body2\">{t('form.labels.total')}</Typography>\n            <Typography variant=\"body2\" fontWeight={600}>\n              {fCurrency(totalDraftPrice, lang, eventProduct.product.currency)}\n            </Typography>\n          </Stack>\n          <Stack direction=\"row\" spacing={1} justifyContent=\"flex-end\" width=\"100%\">\n            {hasSelectedVariants && !canAddOnlyOneAtATime && (\n              <Button variant=\"outlined\" color=\"error\" onClick={handleRemoveProduct}>\n                {t('remove')}\n              </Button>\n            )}\n            {onClose && <Button onClick={onClose}>{t('cancel')}</Button>}\n            <Button variant=\"contained\" onClick={handleOnAdd} disabled={!hasDraftSelection}>\n              {t('confirm')}\n            </Button>\n          </Stack>\n        </Stack>\n      </DialogActions>\n    </Dialog>\n  );\n};\n\nexport default ProductVariantsDialog;\n"],"names":[],"mappings":"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"}

package/dist/esm/form/services/index.js

@@ -0,0 +1,129 @@
+import React, { useState, useMemo } from 'react';
+import { Stack, Box, Link, Dialog, DialogTitle, IconButton, DialogContent, Typography, Divider, Button, FormControlLabel, Checkbox } from '@mui/material';
+import { useWatch, useFormContext, Controller } from 'react-hook-form';
+import { fCurrency } from '../../utils/formatNumber.js';
+import useGlobal from '../../hooks/useGlobal.js';
+import 'framer-motion';
+import '../../components/animate/IconButtonAnimate.js';
+import '@mui/material/styles';
+import '@mui/material/useMediaQuery';
+import Iconify from '../../components/iconify/Iconify.js';
+
+const BorderedCheckbox = ({ name, disabled, title, price, onChange, }) => {
+    const { control } = useFormContext();
+    return (React.createElement(Controller, { name: name, control: control, render: ({ field }) => (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { ...field, checked: field.value || false, onChange: (e) => {
+                    onChange?.(e);
+                    if (!e.defaultPrevented) {
+                        field.onChange(e);
+                    }
+                }, disabled: disabled }), label: React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%', pr: 1 } },
+                React.createElement(Typography, { variant: "body2", fontWeight: 400 }, title),
+                React.createElement(Typography, { variant: "body2", fontWeight: 700, sx: { whiteSpace: 'nowrap' } }, price)), 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 = ({ event }) => {
+    const { t, lang, showSnackbar } = useGlobal();
+    const [open, setOpen] = useState(false);
+    const ticketInsurancePricePerUnit = Number(useWatch({
+        name: 'ticketInsurancePricePerUnit',
+        defaultValue: 0,
+    }) || 0);
+    const smsNotificationPrice = Number(useWatch({
+        name: 'smsNotificationPrice',
+        defaultValue: 0,
+    }) || 0);
+    const tickets = useWatch({
+        name: 'tickets',
+        defaultValue: {},
+    });
+    const totalTickets = useMemo(() => {
+        const items = Object.values(tickets || {}).flat();
+        return items.reduce((sum, ticket) => sum + (Number(ticket.quantity) || 0), 0);
+    }, [tickets]);
+    const handleOpen = (e) => {
+        e.preventDefault();
+        setOpen(true);
+    };
+    const handleClose = () => setOpen(false);
+    const handleServiceChange = (e) => {
+        if (totalTickets <= 0) {
+            e.preventDefault();
+            showSnackbar(t('event.tickets.services.add_tickets_first'), {
+                variant: 'error',
+            });
+        }
+    };
+    return (React.createElement(Stack, { spacing: 1 },
+        React.createElement(BorderedCheckbox, { name: "ticketInsurance", disabled: false, title: t('event.tickets.insurance.label'), price: React.createElement(React.Fragment, null,
+                "+ ",
+                fCurrency(ticketInsurancePricePerUnit, lang, event.currency),
+                " /",
+                ' ',
+                t('event.tickets.insurance.per_ticket')), onChange: handleServiceChange }),
+        React.createElement(BorderedCheckbox, { name: "smsNotification", disabled: false, title: t('event.tickets.sms_notification.label'), price: React.createElement(React.Fragment, null,
+                "+ ",
+                fCurrency(smsNotificationPrice, lang, event.currency)), onChange: handleServiceChange }),
+        React.createElement(Box, { sx: { display: 'flex', justifyContent: 'flex-end' } },
+            React.createElement(Link, { variant: "body2", underline: "always", onClick: handleOpen, color: 'text.primary' }, t('event.tickets.stepper.8.additional_info'))),
+        React.createElement(Dialog, { open: open, onClose: handleClose, maxWidth: "sm", fullWidth: true, PaperProps: {
+                sx: {
+                    borderRadius: 4,
+                    overflow: 'hidden',
+                },
+            } },
+            React.createElement(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'),
+                ":",
+                React.createElement(IconButton, { onClick: handleClose, size: "small", sx: { position: 'absolute', right: 16, top: 16 } },
+                    React.createElement(Iconify, { icon: "carbon:close" }))),
+            React.createElement(DialogContent, { sx: { px: { xs: 3, sm: 4 }, pb: { xs: 4, sm: 5 } } },
+                React.createElement(Stack, { spacing: 3 },
+                    React.createElement(Box, null,
+                        React.createElement(Typography, { variant: "subtitle2", fontWeight: 700, gutterBottom: true }, t('event.tickets.insurance.label')),
+                        React.createElement(Typography, { variant: "body2", paragraph: true }, t('event.tickets.insurance.modal.description')),
+                        React.createElement(Typography, { variant: "body2", paragraph: true }, t('event.tickets.insurance.modal.coverage')),
+                        React.createElement(BorderedCheckbox, { name: "ticketInsurance", disabled: false, title: t('event.tickets.insurance.label'), price: React.createElement(React.Fragment, null,
+                                "+ ",
+                                fCurrency(ticketInsurancePricePerUnit, lang, event.currency),
+                                " /",
+                                ' ',
+                                t('event.tickets.insurance.per_ticket')), onChange: handleServiceChange })),
+                    React.createElement(Divider, null),
+                    React.createElement(Box, null,
+                        React.createElement(Typography, { variant: "subtitle2", fontWeight: 700, gutterBottom: true }, t('event.tickets.sms_notification.label')),
+                        React.createElement(Typography, { variant: "body2", paragraph: true }, t('event.tickets.sms_notification.modal.description')),
+                        React.createElement(BorderedCheckbox, { name: "smsNotification", disabled: false, title: t('event.tickets.sms_notification.label'), price: React.createElement(React.Fragment, null,
+                                "+ ",
+                                fCurrency(smsNotificationPrice, lang, event.currency)), onChange: handleServiceChange })),
+                    React.createElement(Button, { variant: "outlined", onClick: handleClose, sx: {
+                            mt: 1,
+                            py: 1.25,
+                            borderRadius: 1,
+                            height: 36,
+                            fontWeight: 700,
+                            borderColor: 'grey.300',
+                            color: 'text.primary',
+                        } }, t('close')))))));
+};
+
+export { Services as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/form/services/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/form/services/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport {\n  Box,\n  Button,\n  Checkbox,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  Divider,\n  FormControlLabel,\n  IconButton,\n  Link,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport { useWatch, Controller } from 'react-hook-form';\nimport { fCurrency } from '@utils/formatNumber';\nimport useGlobal from '@hooks/useGlobal';\nimport { Iconify } from '@components';\nimport { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';\nimport { IEvent } from '@utils/types/event.type';\nimport { useFormContext } from 'react-hook-form';\n\ninterface Props {\n  event: IEvent;\n}\n\ninterface BorderedCheckboxProps {\n  name: string;\n  disabled: boolean;\n  title: React.ReactNode;\n  price: React.ReactNode;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst BorderedCheckbox: React.FC<BorderedCheckboxProps> = ({\n  name,\n  disabled,\n  title,\n  price,\n  onChange,\n}) => {\n  const { control } = useFormContext<ITicketForm>();\n\n  return (\n    <Controller\n      name={name as any}\n      control={control}\n      render={({ field }) => (\n        <FormControlLabel\n          control={\n            <Checkbox\n              {...field}\n              checked={field.value || false}\n              onChange={(e) => {\n                onChange?.(e);\n                if (!e.defaultPrevented) {\n                  field.onChange(e);\n                }\n              }}\n              disabled={disabled}\n            />\n          }\n          label={\n            <Stack\n              direction=\"row\"\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n              sx={{ width: '100%', pr: 1 }}\n            >\n              <Typography variant=\"body2\" fontWeight={400}>\n                {title}\n              </Typography>\n              <Typography variant=\"body2\" fontWeight={700} sx={{ whiteSpace: 'nowrap' }}>\n                {price}\n              </Typography>\n            </Stack>\n          }\n          sx={{\n            m: 0,\n            px: 1,\n            pr: 0.5,\n            pl: 0,\n            borderRadius: 1,\n            width: '100%',\n            border: '1px solid',\n            borderColor: 'primary.main',\n            '& .MuiFormControlLabel-label': {\n              width: '100%',\n            },\n          }}\n        />\n      )}\n    />\n  );\n};\n\nconst Services: React.FC<Props> = ({ event }) => {\n  const { t, lang, showSnackbar } = useGlobal();\n  const [open, setOpen] = useState(false);\n  const ticketInsurancePricePerUnit = Number(\n    useWatch<ITicketForm>({\n      name: 'ticketInsurancePricePerUnit',\n      defaultValue: 0,\n    }) || 0\n  );\n  const smsNotificationPrice = Number(\n    useWatch<ITicketForm>({\n      name: 'smsNotificationPrice',\n      defaultValue: 0,\n    }) || 0\n  );\n  const tickets = useWatch<ITicketForm, 'tickets'>({\n    name: 'tickets',\n    defaultValue: {},\n  });\n\n  const totalTickets = useMemo(() => {\n    const items: ITicketFormTicket[] = Object.values(tickets || {}).flat();\n    return items.reduce((sum, ticket) => sum + (Number(ticket.quantity) || 0), 0);\n  }, [tickets]);\n\n  const handleOpen = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    e.preventDefault();\n    setOpen(true);\n  };\n\n  const handleClose = () => setOpen(false);\n\n  const handleServiceChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (totalTickets <= 0) {\n      e.preventDefault();\n      showSnackbar(t('event.tickets.services.add_tickets_first'), {\n        variant: 'error',\n      });\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <BorderedCheckbox\n        name=\"ticketInsurance\"\n        disabled={false}\n        title={t('event.tickets.insurance.label')}\n        price={\n          <>\n            + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}\n            {t('event.tickets.insurance.per_ticket')}\n          </>\n        }\n        onChange={handleServiceChange}\n      />\n\n      <BorderedCheckbox\n        name=\"smsNotification\"\n        disabled={false}\n        title={t('event.tickets.sms_notification.label')}\n        price={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}\n        onChange={handleServiceChange}\n      />\n\n      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>\n        <Link variant=\"body2\" underline=\"always\" onClick={handleOpen} color={'text.primary'}>\n          {t('event.tickets.stepper.8.additional_info')}\n        </Link>\n      </Box>\n\n      <Dialog\n        open={open}\n        onClose={handleClose}\n        maxWidth=\"sm\"\n        fullWidth\n        PaperProps={{\n          sx: {\n            borderRadius: 4,\n            overflow: 'hidden',\n          },\n        }}\n      >\n        <DialogTitle\n          sx={{\n            position: 'relative',\n            textAlign: 'center',\n            fontWeight: 700,\n            fontSize: { xs: '1.5rem', sm: '1.75rem' },\n            pt: { xs: 3.5, sm: 4 },\n            pb: { xs: 2, sm: 2.5 },\n            px: { xs: 3, sm: 4 },\n          }}\n        >\n          {t('event.tickets.stepper.8.title')}:\n          <IconButton\n            onClick={handleClose}\n            size=\"small\"\n            sx={{ position: 'absolute', right: 16, top: 16 }}\n          >\n            <Iconify icon=\"carbon:close\" />\n          </IconButton>\n        </DialogTitle>\n        <DialogContent sx={{ px: { xs: 3, sm: 4 }, pb: { xs: 4, sm: 5 } }}>\n          <Stack spacing={3}>\n            <Box>\n              <Typography variant=\"subtitle2\" fontWeight={700} gutterBottom>\n                {t('event.tickets.insurance.label')}\n              </Typography>\n              <Typography variant=\"body2\" paragraph>\n                {t('event.tickets.insurance.modal.description')}\n              </Typography>\n              <Typography variant=\"body2\" paragraph>\n                {t('event.tickets.insurance.modal.coverage')}\n              </Typography>\n              <BorderedCheckbox\n                name=\"ticketInsurance\"\n                disabled={false}\n                title={t('event.tickets.insurance.label')}\n                price={\n                  <>\n                    + {fCurrency(ticketInsurancePricePerUnit, lang, event.currency)} /{' '}\n                    {t('event.tickets.insurance.per_ticket')}\n                  </>\n                }\n                onChange={handleServiceChange}\n              />\n            </Box>\n            <Divider />\n            <Box>\n              <Typography variant=\"subtitle2\" fontWeight={700} gutterBottom>\n                {t('event.tickets.sms_notification.label')}\n              </Typography>\n              <Typography variant=\"body2\" paragraph>\n                {t('event.tickets.sms_notification.modal.description')}\n              </Typography>\n              <BorderedCheckbox\n                name=\"smsNotification\"\n                disabled={false}\n                title={t('event.tickets.sms_notification.label')}\n                price={<>+ {fCurrency(smsNotificationPrice, lang, event.currency)}</>}\n                onChange={handleServiceChange}\n              />\n            </Box>\n            <Button\n              variant=\"outlined\"\n              onClick={handleClose}\n              sx={{\n                mt: 1,\n                py: 1.25,\n                borderRadius: 1,\n                height: 36,\n                fontWeight: 700,\n                borderColor: 'grey.300',\n                color: 'text.primary',\n              }}\n            >\n              {t('close')}\n            </Button>\n          </Stack>\n        </DialogContent>\n      </Dialog>\n    </Stack>\n  );\n};\n\nexport default Services;\n"],"names":[],"mappings":"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"}

package/dist/esm/form/style.js

@@ -6,10 +6,14 @@ const OverviewCard = styled(Card)(({ theme, stickyHeaderTop }) => ({
     top: stickyHeaderTop,
 }));
 const ShippingMethodItem = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'active',
-})(({ theme, active }) => ({
+    shouldForwardProp: (prop) => prop !== 'active' && prop !== 'hasError',
+})(({ theme, active, hasError }) => ({
     borderRadius: theme.spacing(1),
-    border: `1px solid ${active ? theme.palette.primary.main : theme.palette.grey.A200}`,
+    border: `1px solid ${hasError
+        ? theme.palette.error.main
+        : active
+            ? theme.palette.primary.main
+            : theme.palette.grey.A200}`,
     marginTop: theme.spacing(1),
     width: '100%',
     padding: `0 ${theme.spacing(2)}`,