@eventlook/sdk 1.4.3 → 1.4.5-1.beta.1

package/dist/cjs/form/product/ProductCard.js

@@ -3,58 +3,169 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var material = require('@mui/material');
-var Iconify = require('../../components/iconify/Iconify.js');
 var Image = require('../../components/Image.js');
+var Iconify = require('../../components/iconify/Iconify.js');
 var React = require('react');
 var ProductVariantsDialog = require('./ProductVariantsDialog.js');
 var reactHookForm = require('react-hook-form');
 var product = require('../../utils/product.js');
 var useGlobal = require('../../hooks/useGlobal.js');
+var formatNumber = require('../../utils/formatNumber.js');
+var ticket = require('../../utils/data/ticket.js');
 
 const ProductCard = ({ eventProduct, eventId, isOnlyMerchandise }) => {
-    const { t } = useGlobal.default();
+    const { t, lang } = useGlobal.default();
     const [openVariantDialog, setOpenVariantDialog] = React.useState(false);
-    const { setValue } = reactHookForm.useFormContext();
+    const [openSimpleProductDialog, setOpenSimpleProductDialog] = React.useState(false);
+    const { setValue, getValues } = reactHookForm.useFormContext();
     const tickets = reactHookForm.useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
     const products = reactHookForm.useWatch({ name: `products.${eventId}`, defaultValue: [] });
-    const onSelectVariant = (selectedVariant) => {
-        const variant = products.find((product) => product.eventProductVariantId === selectedVariant.eventProductVariantId);
-        if (variant) {
-            if (selectedVariant.quantity === 0) {
-                setValue(`products.${eventId}`, products.filter((product) => product.eventProductVariantId !== variant.eventProductVariantId));
+    const isSimpleProduct = eventProduct.eventProductVariants.length === 1;
+    const simpleVariant = isSimpleProduct ? eventProduct.eventProductVariants[0] : undefined;
+    const onSelectVariant = (selectedVariants) => {
+        const normalized = Array.isArray(selectedVariants) ? selectedVariants : [selectedVariants];
+        const currentProducts = getValues(`products.${eventId}`) ?? [];
+        const nextProducts = [...currentProducts];
+        normalized.forEach((selectedVariant) => {
+            const index = nextProducts.findIndex((product) => product.eventProductVariantId === selectedVariant.eventProductVariantId);
+            if (index >= 0) {
+                if (selectedVariant.quantity <= 0) {
+                    nextProducts.splice(index, 1);
+                }
+                else {
+                    nextProducts[index] = {
+                        ...nextProducts[index],
+                        quantity: selectedVariant.quantity,
+                    };
+                }
             }
             else {
-                setValue(`products.${eventId}`, products.map((product) => {
-                    if (product.eventProductVariantId === selectedVariant.eventProductVariantId) {
-                        return {
-                            ...product,
-                            quantity: selectedVariant.quantity,
-                        };
-                    }
-                    return product;
-                }));
+                if (selectedVariant.quantity > 0) {
+                    nextProducts.push(selectedVariant);
+                }
             }
-        }
-        else if (selectedVariant.quantity !== 0) {
-            setValue(`products.${eventId}`, [...products, selectedVariant]);
-        }
+        });
+        setValue(`products.${eventId}`, nextProducts, {
+            shouldDirty: true,
+            shouldValidate: true,
+        });
+    };
+    const eventNotEmpty = React.useMemo(() => {
+        const variantIds = new Set(eventProduct.eventProductVariants.map((variant) => variant.id));
+        return products.some((product) => product?.quantity && variantIds.has(product.eventProductVariantId));
+    }, [products, eventProduct.eventProductVariants]);
+    const selectedQuantityByVariant = React.useMemo(() => product.getSelectedQuantityByVariant(products, tickets), [products, tickets]);
+    const simpleProductQuantity = React.useMemo(() => {
+        if (!simpleVariant)
+            return 0;
+        const matched = products.find((product) => product.eventProductVariantId === simpleVariant.id);
+        return matched?.quantity ?? 0;
+    }, [products, simpleVariant]);
+    const simpleProductMaxAvailable = React.useMemo(() => {
+        if (!simpleVariant)
+            return 0;
+        const { quantity, sold } = simpleVariant.productVariant;
+        if (!quantity)
+            return Number.POSITIVE_INFINITY;
+        const used = selectedQuantityByVariant[simpleVariant.id] ?? 0;
+        return quantity - sold - used;
+    }, [simpleVariant, selectedQuantityByVariant]);
+    const onChangeSimpleProductQuantity = (nextQuantity) => {
+        if (!simpleVariant)
+            return;
+        if (nextQuantity < 0 || nextQuantity > ticket.MAX_TICKETS_PER_ORDER)
+            return;
+        if (nextQuantity > simpleProductQuantity &&
+            nextQuantity - simpleProductQuantity > simpleProductMaxAvailable)
+            return;
+        onSelectVariant({
+            eventProductVariantId: simpleVariant.id,
+            productVariantId: simpleVariant.productVariant.id,
+            quantity: nextQuantity,
+            price: simpleVariant.priceWithVat,
+            excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),
+        });
     };
-    const eventNotEmpty = React.useMemo(() => products.some((product) => product?.quantity), [products]);
+    const simpleProductQuantityControl = simpleProductQuantity > 0 ? (React.createElement(material.Stack, { direction: "row", spacing: 1, alignItems: "center", width: "100%" },
+        React.createElement(material.IconButton, { onClick: () => onChangeSimpleProductQuantity(simpleProductQuantity - 1), disabled: simpleProductQuantity <= 0, sx: {
+                flex: '1 1 0',
+                height: 36,
+                p: 0,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: 'grey.300',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            React.createElement(Iconify.default, { icon: "eva:minus-fill", width: 18, height: 18 })),
+        React.createElement(material.Box, { sx: {
+                flex: '1 1 0',
+                height: 36,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: 'grey.300',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 700,
+            } }, simpleProductQuantity),
+        React.createElement(material.IconButton, { onClick: () => onChangeSimpleProductQuantity(simpleProductQuantity + 1), disabled: simpleProductQuantity >= ticket.MAX_TICKETS_PER_ORDER || simpleProductMaxAvailable <= 0, sx: {
+                flex: '1 1 0',
+                height: 36,
+                p: 0,
+                borderRadius: 1,
+                bgcolor: 'primary.main',
+                color: 'primary.contrastText',
+                '&:hover': { bgcolor: 'primary.dark' },
+                '&.Mui-disabled': {
+                    bgcolor: 'action.disabledBackground',
+                    color: 'action.disabled',
+                },
+            } },
+            React.createElement(Iconify.default, { icon: "eva:plus-fill", width: 18, height: 18 })))) : (React.createElement(material.Button, { variant: "contained", onClick: () => onChangeSimpleProductQuantity(1), disabled: simpleProductMaxAvailable <= 0, fullWidth: true }, t('add')));
     return (React.createElement(React.Fragment, null,
-        React.createElement(material.Card, { sx: { p: 2 } },
-            React.createElement(material.Stack, { spacing: 1 },
-                React.createElement(Image.default, { src: eventProduct.product.previewImage.url, ratio: "1/1", sx: { borderRadius: 2 } }),
-                React.createElement(material.Typography, { variant: "h5" }, eventProduct.product.name),
-                React.createElement(material.Typography, { variant: "caption", dangerouslySetInnerHTML: { __html: eventProduct.product.description }, sx: {
-                        height: 44,
-                        textOverflow: 'ellipsis',
-                        overflow: 'hidden',
-                        display: '-webkit-box',
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: 'vertical',
-                    } }),
-                React.createElement(material.Button, { variant: "contained", onClick: () => setOpenVariantDialog(true), fullWidth: true, startIcon: eventNotEmpty ? React.createElement(Iconify.default, { icon: "eva:edit-fill" }) : React.createElement(Iconify.default, { icon: "eva:plus-fill" }) }, eventNotEmpty ? t('change') : t('add')))),
-        React.createElement(ProductVariantsDialog.default, { eventProduct: eventProduct, eventId: eventId, openDialog: openVariantDialog, onClose: () => setOpenVariantDialog(false), callback: onSelectVariant, selectedQuantityByVariant: product.getSelectedQuantityByVariant(products, tickets), isOnlyMerchandise: isOnlyMerchandise })));
+        React.createElement(material.Card, { sx: {
+                p: 0,
+                borderRadius: 0,
+                boxShadow: 'none',
+                background: 'none',
+            } },
+            React.createElement(material.Stack, { spacing: 0 },
+                React.createElement(Image.default, { src: eventProduct.product.previewImage.url, ratio: "21/9", sx: { borderRadius: 1, maxHeight: 96 } }),
+                React.createElement(material.Typography, { variant: "h5", sx: { fontSize: '14px', fontWeight: 700 } }, eventProduct.product.name),
+                React.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 1 },
+                    React.createElement(material.Typography, { variant: "body2", color: "text.primary" }, eventProduct.product.priceWithVat > 0
+                        ? formatNumber.fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                        : t('free')),
+                    isSimpleProduct && (React.createElement(material.Link, { onClick: () => setOpenSimpleProductDialog(true), color: "inherit", underline: "always", fontSize: 12 }, t('more_info')))),
+                isSimpleProduct ? (simpleProductQuantityControl) : (React.createElement(material.Button, { variant: eventNotEmpty ? 'contained' : 'outlined', onClick: () => setOpenVariantDialog(true), fullWidth: true, sx: {
+                        color: eventNotEmpty ? (theme) => theme.palette.common.white : 'inherit',
+                        borderColor: (theme) => theme.palette.grey[300],
+                    } }, eventNotEmpty
+                    ? t('event.tickets.merchandise.show_added')
+                    : t('event.tickets.merchandise.show_sizes'))))),
+        React.createElement(ProductVariantsDialog.default, { eventProduct: eventProduct, eventId: eventId, openDialog: openVariantDialog && !isSimpleProduct, onClose: () => setOpenVariantDialog(false), callback: onSelectVariant, selectedQuantityByVariant: selectedQuantityByVariant, isOnlyMerchandise: isOnlyMerchandise }),
+        React.createElement(material.Dialog, { open: openSimpleProductDialog && isSimpleProduct, onClose: () => setOpenSimpleProductDialog(false), fullWidth: true, maxWidth: "sm" },
+            React.createElement(material.DialogTitle, { sx: {
+                    textAlign: 'center',
+                    fontWeight: 700,
+                    fontSize: { xs: '1.5rem', sm: '2rem' },
+                    mb: 2,
+                } }, eventProduct.product.name),
+            React.createElement(material.DialogContent, { sx: { pb: 0 } },
+                React.createElement(material.Stack, { spacing: 2 },
+                    React.createElement(material.Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: eventProduct.product.description } }),
+                    React.createElement(material.Typography, { variant: "body1", color: "text.primary" }, eventProduct.product.priceWithVat > 0
+                        ? formatNumber.fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)
+                        : t('free')))),
+            React.createElement(material.DialogActions, { sx: { px: 3, pb: 3 } },
+                React.createElement(material.Stack, { spacing: 1, width: "100%" },
+                    simpleProductQuantityControl,
+                    React.createElement(material.Button, { variant: "outlined", onClick: () => setOpenSimpleProductDialog(false), fullWidth: true, sx: {
+                            color: 'inherit',
+                            borderColor: (theme) => theme.palette.grey[300],
+                        } }, t('close')))))));
 };
 
 exports.default = ProductCard;

package/dist/cjs/form/product/ProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.js","sources":["../../../../src/form/product/ProductCard.tsx"],"sourcesContent":["import { Button, Card, Stack, Typography } from '@mui/material';\nimport { Iconify } from '@components/iconify';\nimport Image from '@components/Image';\nimport { IEventProduct } from '@utils/types/event-product.type';\nimport React, { useMemo, useState } from 'react';\nimport ProductVariantsDialog from '@form/product/ProductVariantsDialog';\nimport { IEventProductForm } from '@utils/types/product.type';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';\nimport { getSelectedQuantityByVariant } from '@utils/product';\nimport useGlobal from '@hooks/useGlobal.ts';\n\ninterface Props {\n  eventProduct: IEventProduct;\n  eventId: number;\n  isOnlyMerchandise?: boolean;\n}\n\nconst ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise }) => {\n  const { t } = useGlobal();\n  const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);\n  const { setValue } = useFormContext<ITicketForm>();\n  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });\n  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });\n\n  const onSelectVariant = (selectedVariant: IEventProductForm) => {\n    const variant = products.find(\n      (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId\n    );\n\n    if (variant) {\n      if (selectedVariant.quantity === 0) {\n        setValue(\n          `products.${eventId}`,\n          products.filter(\n            (product) => product.eventProductVariantId !== variant.eventProductVariantId\n          )\n        );\n      } else {\n        setValue(\n          `products.${eventId}`,\n          products.map((product) => {\n            if (product.eventProductVariantId === selectedVariant.eventProductVariantId) {\n              return {\n                ...product,\n                quantity: selectedVariant.quantity,\n              };\n            }\n            return product;\n          })\n        );\n      }\n    } else if (selectedVariant.quantity !== 0) {\n      setValue(`products.${eventId}`, [...products, selectedVariant]);\n    }\n  };\n\n  const eventNotEmpty = useMemo(() => products.some((product) => product?.quantity), [products]);\n\n  return (\n    <>\n      <Card sx={{ p: 2 }}>\n        <Stack spacing={1}>\n          <Image src={eventProduct.product.previewImage.url} ratio=\"1/1\" sx={{ borderRadius: 2 }} />\n          <Typography variant=\"h5\">{eventProduct.product.name}</Typography>\n          <Typography\n            variant=\"caption\"\n            dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}\n            sx={{\n              height: 44,\n              textOverflow: 'ellipsis',\n              overflow: 'hidden',\n              display: '-webkit-box',\n              WebkitLineClamp: 2,\n              WebkitBoxOrient: 'vertical',\n            }}\n          />\n          <Button\n            variant=\"contained\"\n            onClick={() => setOpenVariantDialog(true)}\n            fullWidth\n            startIcon={\n              eventNotEmpty ? <Iconify icon=\"eva:edit-fill\" /> : <Iconify icon=\"eva:plus-fill\" />\n            }\n          >\n            {eventNotEmpty ? t('change') : t('add')}\n          </Button>\n        </Stack>\n      </Card>\n      <ProductVariantsDialog\n        eventProduct={eventProduct}\n        eventId={eventId}\n        openDialog={openVariantDialog}\n        onClose={() => setOpenVariantDialog(false)}\n        callback={onSelectVariant}\n        selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}\n        isOnlyMerchandise={isOnlyMerchandise}\n      />\n    </>\n  );\n};\n\nexport default ProductCard;\n"],"names":["useGlobal","useState","useFormContext","useWatch","useMemo","Card","Stack","Image","Typography","Button","Iconify","ProductVariantsDialog","getSelectedQuantityByVariant"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,WAAW,GAAoB,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,iBAAiB,EAAE,KAAI;AACpF,IAAA,MAAM,EAAE,CAAC,EAAE,GAAGA,iBAAS,EAAE;IACzB,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGC,cAAQ,CAAU,KAAK,CAAC;AAC1E,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAGC,4BAAc,EAAe;AAClD,IAAA,MAAM,OAAO,GAAwBC,sBAAQ,CAAC,EAAE,IAAI,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;AAC/F,IAAA,MAAM,QAAQ,GAAwBA,sBAAQ,CAAC,EAAE,IAAI,EAAE,CAAA,SAAA,EAAY,OAAO,CAAA,CAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;AAEjG,IAAA,MAAM,eAAe,GAAG,CAAC,eAAkC,KAAI;AAC7D,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAC3B,CAAC,OAAO,KAAK,OAAO,CAAC,qBAAqB,KAAK,eAAe,CAAC,qBAAqB,CACrF;QAED,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,eAAe,CAAC,QAAQ,KAAK,CAAC,EAAE;gBAClC,QAAQ,CACN,YAAY,OAAO,CAAA,CAAE,EACrB,QAAQ,CAAC,MAAM,CACb,CAAC,OAAO,KAAK,OAAO,CAAC,qBAAqB,KAAK,OAAO,CAAC,qBAAqB,CAC7E,CACF;;iBACI;AACL,gBAAA,QAAQ,CACN,CAAA,SAAA,EAAY,OAAO,CAAA,CAAE,EACrB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,KAAI;oBACvB,IAAI,OAAO,CAAC,qBAAqB,KAAK,eAAe,CAAC,qBAAqB,EAAE;wBAC3E,OAAO;AACL,4BAAA,GAAG,OAAO;4BACV,QAAQ,EAAE,eAAe,CAAC,QAAQ;yBACnC;;AAEH,oBAAA,OAAO,OAAO;iBACf,CAAC,CACH;;;AAEE,aAAA,IAAI,eAAe,CAAC,QAAQ,KAAK,CAAC,EAAE;AACzC,YAAA,QAAQ,CAAC,CAAA,SAAA,EAAY,OAAO,CAAA,CAAE,EAAE,CAAC,GAAG,QAAQ,EAAE,eAAe,CAAC,CAAC;;AAEnE,KAAC;IAED,MAAM,aAAa,GAAGC,aAAO,CAAC,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAE9F,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAA,CAAA,aAAA,CAACC,aAAI,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAA;AAChB,YAAA,KAAA,CAAA,aAAA,CAACC,cAAK,EAAA,EAAC,OAAO,EAAE,CAAC,EAAA;gBACf,KAAA,CAAA,aAAA,CAACC,aAAK,IAAC,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,EAAA,CAAI;gBAC1F,KAAA,CAAA,aAAA,CAACC,mBAAU,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA,EAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAc;AACjE,gBAAA,KAAA,CAAA,aAAA,CAACA,mBAAU,EAAA,EACT,OAAO,EAAC,SAAS,EACjB,uBAAuB,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,EACrE,EAAE,EAAE;AACF,wBAAA,MAAM,EAAE,EAAE;AACV,wBAAA,YAAY,EAAE,UAAU;AACxB,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,OAAO,EAAE,aAAa;AACtB,wBAAA,eAAe,EAAE,CAAC;AAClB,wBAAA,eAAe,EAAE,UAAU;qBAC5B,EAAA,CACD;gBACF,KAAA,CAAA,aAAA,CAACC,eAAM,EAAA,EACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,MAAM,oBAAoB,CAAC,IAAI,CAAC,EACzC,SAAS,EAAA,IAAA,EACT,SAAS,EACP,aAAa,GAAG,KAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,IAAI,EAAC,eAAe,EAAA,CAAG,GAAG,KAAA,CAAA,aAAA,CAACA,eAAO,EAAA,EAAC,IAAI,EAAC,eAAe,EAAA,CAAG,EAAA,EAGpF,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAChC,CACH,CACH;AACP,QAAA,KAAA,CAAA,aAAA,CAACC,6BAAqB,EAAA,EACpB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,iBAAiB,EAC7B,OAAO,EAAE,MAAM,oBAAoB,CAAC,KAAK,CAAC,EAC1C,QAAQ,EAAE,eAAe,EACzB,yBAAyB,EAAEC,oCAA4B,CAAC,QAAQ,EAAE,OAAO,CAAC,EAC1E,iBAAiB,EAAE,iBAAiB,EAAA,CACpC,CACD;AAEP;;;;"}
+{"version":3,"file":"ProductCard.js","sources":["../../../../src/form/product/ProductCard.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Card,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  Link,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport Image from '@components/Image';\nimport { Iconify } from '@components/iconify';\nimport { IEventProduct } from '@utils/types/event-product.type';\nimport React, { useMemo, useState } from 'react';\nimport ProductVariantsDialog from '@form/product/ProductVariantsDialog';\nimport { IEventProductForm } from '@utils/types/product.type';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';\nimport { getSelectedQuantityByVariant } from '@utils/product';\nimport useGlobal from '@hooks/useGlobal.ts';\nimport { fCurrency } from '@utils/formatNumber';\nimport { MAX_TICKETS_PER_ORDER } from '@utils/data/ticket';\n\ninterface Props {\n  eventProduct: IEventProduct;\n  eventId: number;\n  isOnlyMerchandise?: boolean;\n}\n\nconst ProductCard: React.FC<Props> = ({ eventProduct, eventId, isOnlyMerchandise }) => {\n  const { t, lang } = useGlobal();\n  const [openVariantDialog, setOpenVariantDialog] = useState<boolean>(false);\n  const [openSimpleProductDialog, setOpenSimpleProductDialog] = useState<boolean>(false);\n  const { setValue, getValues } = useFormContext<ITicketForm>();\n  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });\n  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });\n  const isSimpleProduct = eventProduct.eventProductVariants.length === 1;\n  const simpleVariant = isSimpleProduct ? eventProduct.eventProductVariants[0] : undefined;\n\n  const onSelectVariant = (selectedVariants: IEventProductForm[] | IEventProductForm) => {\n    const normalized = Array.isArray(selectedVariants) ? selectedVariants : [selectedVariants];\n    const currentProducts =\n      (getValues(`products.${eventId}`) as IEventProductForm[] | undefined) ?? [];\n    const nextProducts = [...currentProducts];\n\n    normalized.forEach((selectedVariant) => {\n      const index = nextProducts.findIndex(\n        (product) => product.eventProductVariantId === selectedVariant.eventProductVariantId\n      );\n\n      if (index >= 0) {\n        if (selectedVariant.quantity <= 0) {\n          nextProducts.splice(index, 1);\n        } else {\n          nextProducts[index] = {\n            ...nextProducts[index],\n            quantity: selectedVariant.quantity,\n          };\n        }\n      } else {\n        if (selectedVariant.quantity > 0) {\n          nextProducts.push(selectedVariant);\n        }\n      }\n    });\n\n    setValue(`products.${eventId}`, nextProducts, {\n      shouldDirty: true,\n      shouldValidate: true,\n    });\n  };\n\n  const eventNotEmpty = useMemo(() => {\n    const variantIds = new Set(eventProduct.eventProductVariants.map((variant) => variant.id));\n    return products.some(\n      (product) => product?.quantity && variantIds.has(product.eventProductVariantId)\n    );\n  }, [products, eventProduct.eventProductVariants]);\n\n  const selectedQuantityByVariant = useMemo(\n    () => getSelectedQuantityByVariant(products, tickets),\n    [products, tickets]\n  );\n\n  const simpleProductQuantity = useMemo(() => {\n    if (!simpleVariant) return 0;\n    const matched = products.find((product) => product.eventProductVariantId === simpleVariant.id);\n    return matched?.quantity ?? 0;\n  }, [products, simpleVariant]);\n\n  const simpleProductMaxAvailable = useMemo(() => {\n    if (!simpleVariant) return 0;\n    const { quantity, sold } = simpleVariant.productVariant;\n    if (!quantity) return Number.POSITIVE_INFINITY;\n    const used = selectedQuantityByVariant[simpleVariant.id] ?? 0;\n    return quantity - sold - used;\n  }, [simpleVariant, selectedQuantityByVariant]);\n\n  const onChangeSimpleProductQuantity = (nextQuantity: number) => {\n    if (!simpleVariant) return;\n    if (nextQuantity < 0 || nextQuantity > MAX_TICKETS_PER_ORDER) return;\n    if (\n      nextQuantity > simpleProductQuantity &&\n      nextQuantity - simpleProductQuantity > simpleProductMaxAvailable\n    )\n      return;\n\n    onSelectVariant({\n      eventProductVariantId: simpleVariant.id,\n      productVariantId: simpleVariant.productVariant.id,\n      quantity: nextQuantity,\n      price: simpleVariant.priceWithVat,\n      excludedShippingMethodIds: eventProduct.excludedShippingMethods.map((method) => method.id),\n    });\n  };\n\n  const simpleProductQuantityControl =\n    simpleProductQuantity > 0 ? (\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\" width=\"100%\">\n        <IconButton\n          onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity - 1)}\n          disabled={simpleProductQuantity <= 0}\n          sx={{\n            flex: '1 1 0',\n            height: 36,\n            p: 0,\n            borderRadius: 1,\n            border: '1px solid',\n            borderColor: 'grey.300',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <Iconify icon=\"eva:minus-fill\" width={18} height={18} />\n        </IconButton>\n        <Box\n          sx={{\n            flex: '1 1 0',\n            height: 36,\n            borderRadius: 1,\n            border: '1px solid',\n            borderColor: 'grey.300',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            fontWeight: 700,\n          }}\n        >\n          {simpleProductQuantity}\n        </Box>\n        <IconButton\n          onClick={() => onChangeSimpleProductQuantity(simpleProductQuantity + 1)}\n          disabled={\n            simpleProductQuantity >= MAX_TICKETS_PER_ORDER || simpleProductMaxAvailable <= 0\n          }\n          sx={{\n            flex: '1 1 0',\n            height: 36,\n            p: 0,\n            borderRadius: 1,\n            bgcolor: 'primary.main',\n            color: 'primary.contrastText',\n            '&:hover': { bgcolor: 'primary.dark' },\n            '&.Mui-disabled': {\n              bgcolor: 'action.disabledBackground',\n              color: 'action.disabled',\n            },\n          }}\n        >\n          <Iconify icon=\"eva:plus-fill\" width={18} height={18} />\n        </IconButton>\n      </Stack>\n    ) : (\n      <Button\n        variant=\"contained\"\n        onClick={() => onChangeSimpleProductQuantity(1)}\n        disabled={simpleProductMaxAvailable <= 0}\n        fullWidth\n      >\n        {t('add')}\n      </Button>\n    );\n\n  return (\n    <>\n      <Card\n        sx={{\n          p: 0,\n          borderRadius: 0,\n          boxShadow: 'none',\n          background: 'none',\n        }}\n      >\n        <Stack spacing={0}>\n          <Image\n            src={eventProduct.product.previewImage.url}\n            ratio=\"21/9\"\n            sx={{ borderRadius: 1, maxHeight: 96 }}\n          />\n          <Typography variant=\"h5\" sx={{ fontSize: '14px', fontWeight: 700 }}>\n            {eventProduct.product.name}\n          </Typography>\n          <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n            <Typography variant=\"body2\" color=\"text.primary\">\n              {eventProduct.product.priceWithVat > 0\n                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)\n                : t('free')}\n            </Typography>\n            {isSimpleProduct && (\n              <Link\n                onClick={() => setOpenSimpleProductDialog(true)}\n                color=\"inherit\"\n                underline=\"always\"\n                fontSize={12}\n              >\n                {t('more_info')}\n              </Link>\n            )}\n          </Stack>\n          {isSimpleProduct ? (\n            simpleProductQuantityControl\n          ) : (\n            <Button\n              variant={eventNotEmpty ? 'contained' : 'outlined'}\n              onClick={() => setOpenVariantDialog(true)}\n              fullWidth\n              sx={{\n                color: eventNotEmpty ? (theme) => theme.palette.common.white : 'inherit',\n                borderColor: (theme) => theme.palette.grey[300],\n              }}\n            >\n              {eventNotEmpty\n                ? t('event.tickets.merchandise.show_added')\n                : t('event.tickets.merchandise.show_sizes')}\n            </Button>\n          )}\n        </Stack>\n      </Card>\n      <ProductVariantsDialog\n        eventProduct={eventProduct}\n        eventId={eventId}\n        openDialog={openVariantDialog && !isSimpleProduct}\n        onClose={() => setOpenVariantDialog(false)}\n        callback={onSelectVariant}\n        selectedQuantityByVariant={selectedQuantityByVariant}\n        isOnlyMerchandise={isOnlyMerchandise}\n      />\n      <Dialog\n        open={openSimpleProductDialog && isSimpleProduct}\n        onClose={() => setOpenSimpleProductDialog(false)}\n        fullWidth\n        maxWidth=\"sm\"\n      >\n        <DialogTitle\n          sx={{\n            textAlign: 'center',\n            fontWeight: 700,\n            fontSize: { xs: '1.5rem', sm: '2rem' },\n            mb: 2,\n          }}\n        >\n          {eventProduct.product.name}\n        </DialogTitle>\n        <DialogContent sx={{ pb: 0 }}>\n          <Stack spacing={2}>\n            <Typography\n              variant=\"body2\"\n              dangerouslySetInnerHTML={{ __html: eventProduct.product.description }}\n            />\n            <Typography variant=\"body1\" color=\"text.primary\">\n              {eventProduct.product.priceWithVat > 0\n                ? fCurrency(eventProduct.product.priceWithVat, lang, eventProduct.product.currency)\n                : t('free')}\n            </Typography>\n          </Stack>\n        </DialogContent>\n        <DialogActions sx={{ px: 3, pb: 3 }}>\n          <Stack spacing={1} width=\"100%\">\n            {simpleProductQuantityControl}\n            <Button\n              variant=\"outlined\"\n              onClick={() => setOpenSimpleProductDialog(false)}\n              fullWidth\n              sx={{\n                color: 'inherit',\n                borderColor: (theme) => theme.palette.grey[300],\n              }}\n            >\n              {t('close')}\n            </Button>\n          </Stack>\n        </DialogActions>\n      </Dialog>\n    </>\n  );\n};\n\nexport default ProductCard;\n"],"names":["useGlobal","useState","useFormContext","useWatch","useMemo","getSelectedQuantityByVariant","MAX_TICKETS_PER_ORDER","Stack","IconButton","Iconify","Box","Button","Card","Image","Typography","fCurrency","Link","ProductVariantsDialog","Dialog","DialogTitle","DialogContent","DialogActions"],"mappings":"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"}

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

@@ -7,20 +7,13 @@ var material = require('@mui/material');
 var Image = require('../../components/Image.js');
 var reactHookForm = require('react-hook-form');
 var formatNumber = require('../../utils/formatNumber.js');
+var ticket = require('../../utils/data/ticket.js');
 var useGlobal = require('../../hooks/useGlobal.js');
-require('framer-motion');
-require('../../components/animate/IconButtonAnimate.js');
-require('@mui/material/styles');
-require('@mui/material/useMediaQuery');
-var Iconify = require('../../components/iconify/Iconify.js');
 
-const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, selectedQuantityByVariant, isOnlyMerchandise, eventId, }) => {
+const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, selectedQuantityByVariant, isOnlyMerchandise, eventId, canAddOnlyOneAtATime, maxSelectableQuantity, }) => {
     const { t, lang, options } = useGlobal.default();
     const { showSnackbar } = useGlobal.default();
-    const [selectedVariant, setSelectedVariant] = React.useState(null);
-    const [variantPrice, setVariantPrice] = React.useState(null);
-    const [variantQuantity, setVariantQuantity] = React.useState(1);
-    const [isVariantClicked, setIsVariantClicked] = React.useState(false);
+    const [draftQuantities, setDraftQuantities] = React.useState({});
     const tickets = reactHookForm.useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
     const products = reactHookForm.useWatch({ name: `products.${eventId}`, defaultValue: [] });
     React.useEffect(() => {
@@ -31,38 +24,46 @@ const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, se
         }
     }, [openDialog]);
     React.useEffect(() => {
-        if (isVariantClicked) {
-            setVariantQuantity(selectedQuantityByVariant &&
-                selectedVariant &&
-                selectedQuantityByVariant[selectedVariant.eventProductVariantId] !== undefined
-                ? selectedQuantityByVariant[selectedVariant.eventProductVariantId]
-                : 1);
-            setIsVariantClicked(false);
+        if (openDialog && canAddOnlyOneAtATime) {
+            setDraftQuantities({});
         }
-    }, [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, canAddOnlyOneAtATime]);
+    React.useEffect(() => {
+        if (openDialog && !canAddOnlyOneAtATime) {
+            setDraftQuantities(selectedQuantityByVariant ?? {});
+        }
+    }, [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),
+            };
+        })
+            .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;
@@ -73,59 +74,82 @@ 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 (canAddOnlyOneAtATime) {
+                if (maxAvailable < 1)
+                    return prev;
+                return { [variant.id]: 1 };
             }
-        }
-        return false;
+            const maxSelectable = maxSelectableQuantity === undefined
+                ? ticket.MAX_TICKETS_PER_ORDER
+                : Math.max(0, Math.min(maxSelectableQuantity, ticket.MAX_TICKETS_PER_ORDER));
+            if (next > maxSelectable || next > maxAvailable)
+                return prev;
+            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 = React.useMemo(() => new Map(eventProduct.eventProductVariants.map((variant) => [variant.id, variant])), [eventProduct.eventProductVariants]);
+    const totalDraftPrice = React.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 = React.useMemo(() => eventProduct.eventProductVariants.some((variant) => (draftQuantities[variant.id] ?? 0) > 0), [eventProduct.eventProductVariants, draftQuantities]);
     return (React.createElement(material.Dialog, { open: openDialog, onClose: () => onClose && onClose(), fullWidth: true, sx: {
             mx: 'auto',
             width: {
@@ -138,35 +162,96 @@ const ProductVariantsDialog = ({ eventProduct, openDialog, onClose, callback, se
                 height: options?.isIframe ? 'auto' : '100%',
             },
         } },
-        React.createElement(material.DialogTitle, null),
-        React.createElement(material.DialogContent, null,
+        React.createElement(material.DialogTitle, { sx: { textAlign: 'center', fontWeight: 700, fontSize: { xs: '1.5rem', sm: '1.5rem' } } }, eventProduct.product.name),
+        React.createElement(material.DialogContent, { sx: { pb: 0 } },
             React.createElement(material.Stack, { spacing: 1 },
-                React.createElement(Image.default, { src: eventProduct.product.previewImage.url, alt: eventProduct.product.name, ratio: "1/1", sx: { borderRadius: 2 } }),
-                React.createElement(material.Typography, { variant: "h5" }, eventProduct.product.name),
+                React.createElement(Image.default, { src: eventProduct.product.previewImage.url, alt: eventProduct.product.name, ratio: "16/9", sx: { borderRadius: 1 } }),
                 React.createElement(material.Typography, { variant: "body2", color: "primary" },
                     t('form.labels.category'),
                     ": ",
                     eventProduct.product.category.value.text),
                 React.createElement(material.Typography, { variant: "caption", dangerouslySetInnerHTML: { __html: eventProduct.product.description } }))),
         React.createElement(material.DialogActions, { sx: { justifyContent: 'flex-start' } },
-            React.createElement(material.Stack, { spacing: 2, width: "100%" },
-                React.createElement(material.Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, textAlign: "left" }, eventProduct.eventProductVariants.map((variant) => (React.createElement(material.Button, { key: variant.id, onClick: () => handleOnClick(variant), variant: variant.id === selectedVariant?.eventProductVariantId ? 'contained' : 'outlined', size: "large", disabled: isOnlyMerchandise ? false : isVariantDisabled(variant) },
-                    React.createElement(material.Badge, { color: "primary", badgeContent: selectedQuantityByVariant ? selectedQuantityByVariant[variant.id] : 0, sx: { position: 'unset' } }, variant.productVariant.value))))),
-                React.createElement(material.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", pt: 1 },
-                    selectedVariant && isOnlyMerchandise && (React.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 1 },
-                        React.createElement(material.IconButton, { size: "small", color: "primary", onClick: handleRemoveQuantity, disabled: variantQuantity < 1 },
-                            React.createElement(Iconify.default, { icon: "eva:minus-fill" })),
-                        React.createElement(material.Typography, { color: "grey.500" }, variantQuantity),
-                        React.createElement(material.IconButton, { size: "small", color: "primary", onClick: handleAddQuantity, disabled: isVariantSoldOut() },
-                            React.createElement(Iconify.default, { icon: "eva:plus-fill" })))),
-                    React.createElement(material.Typography, { variant: "h4", textAlign: "right", mt: 0 }, variantPrice !== null
-                        ? variantPrice > 0
-                            ? formatNumber.fCurrency(variantPrice, lang, eventProduct.product.currency)
-                            : t('free')
-                        : t('unselected'))),
+            React.createElement(material.Stack, { spacing: 1, width: "100%" },
+                React.createElement(material.Stack, { spacing: 1 }, eventProduct.eventProductVariants.map((variant) => {
+                    const draftQty = draftQuantities[variant.id] ?? 0;
+                    const maxAvailable = getMaxAvailable(variant);
+                    const maxSelectable = maxSelectableQuantity === undefined
+                        ? ticket.MAX_TICKETS_PER_ORDER
+                        : Math.max(0, Math.min(maxSelectableQuantity, ticket.MAX_TICKETS_PER_ORDER));
+                    const isAddDisabled = isVariantDisabled(variant) ||
+                        maxAvailable <= 0 ||
+                        (!canAddOnlyOneAtATime && maxSelectable <= 0);
+                    const isAnotherSelected = canAddOnlyOneAtATime &&
+                        Object.keys(draftQuantities).length > 0 &&
+                        !draftQuantities[variant.id];
+                    return (React.createElement(material.Stack, { key: variant.id, direction: "row", spacing: 1, alignItems: "center", width: "100%" },
+                        React.createElement(material.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(material.Typography, { variant: "body2", fontWeight: 600 }, variant.productVariant.value)),
+                        draftQty > 0 ? (React.createElement(material.Box, { sx: {
+                                flex: 1,
+                                display: 'grid',
+                                gridTemplateColumns: canAddOnlyOneAtATime
+                                    ? 'repeat(2, minmax(0, 1fr))'
+                                    : 'repeat(3, minmax(0, 1fr))',
+                                gap: 1,
+                                alignItems: 'center',
+                            } },
+                            React.createElement(material.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',
+                                } }, "-"),
+                            React.createElement(material.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(material.Button, { variant: "contained", onClick: () => handleAddQuantity(variant), "aria-label": t('components.product_variant_dialog.increase_quantity'), disabled: draftQty >= maxSelectable || draftQty >= maxAvailable, sx: { minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 } }, "+")))) : (React.createElement(material.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(material.Typography, { variant: "body2" }, variant.priceWithVat > 0
+                            ? formatNumber.fCurrency(variant.priceWithVat, lang, eventProduct.product.currency)
+                            : t('free'))));
+                })),
+                React.createElement(material.Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", width: "100%" },
+                    React.createElement(material.Typography, { variant: "body2" }, t('form.labels.total')),
+                    React.createElement(material.Typography, { variant: "body2", fontWeight: 600 }, formatNumber.fCurrency(totalDraftPrice, lang, eventProduct.product.currency))),
                 React.createElement(material.Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", width: "100%" },
-                    onClose && React.createElement(material.Button, { onClick: onClose }, t('cancel')),
-                    React.createElement(material.Button, { variant: "contained", onClick: handleOnAdd, disabled: !selectedVariant }, t('add')))))));
+                    hasSelectedVariants && !canAddOnlyOneAtATime && (React.createElement(material.Button, { variant: "outlined", color: "error", onClick: handleRemoveProduct }, t('remove'))),
+                    onClose && (React.createElement(material.Button, { onClick: onClose, sx: {
+                            border: 1,
+                            color: 'inherit',
+                            borderColor: (theme) => theme.palette.grey[300],
+                        } }, t('cancel'))),
+                    React.createElement(material.Button, { variant: "contained", onClick: handleOnAdd, disabled: !hasDraftSelection }, t('confirm')))))));
 };
 
 exports.default = ProductVariantsDialog;