@eventlook/sdk 1.4.48 → 1.4.49-beta.2

package/dist/cjs/form/PaymentOverviewDrawer.js

@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var material = require('@mui/material');
+var React = require('react');
+var PaymentOverviewBox = require('./PaymentOverviewBox.js');
+var useGlobal = require('../hooks/useGlobal.js');
+var formatNumber = require('../utils/formatNumber.js');
+var global = require('../utils/data/global.js');
+
+const swipeAreaWidth = 56;
+const PaymentOverviewDrawer = ({ event, totalPrice, onOpenChange }) => {
+    const { t, lang } = useGlobal.default();
+    const [openDrawer, setOpenDrawer] = React.useState(false);
+    const touchStartYRef = React.useRef(null);
+    const sentinelRef = React.useRef(null);
+    const prevYRef = React.useRef(Number.POSITIVE_INFINITY);
+    // Opens drawer when scrolling down
+    React.useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (totalPrice <= 0)
+                    return;
+                const currentY = entry.boundingClientRect.y;
+                const isScrollingDown = currentY < prevYRef.current;
+                if (entry.isIntersecting && isScrollingDown) {
+                    openDrawerHandler();
+                }
+                prevYRef.current = currentY;
+            });
+        }, {
+            threshold: 0,
+            rootMargin: '0px 0px 0px 0px',
+        });
+        observer.observe(sentinel);
+        return () => {
+            observer.unobserve(sentinel);
+        };
+    }, [totalPrice]);
+    const toggleDrawer = () => {
+        setOpenDrawer((prev) => {
+            const next = !prev;
+            onOpenChange?.(next);
+            return next;
+        });
+    };
+    const openDrawerHandler = () => {
+        setOpenDrawer(true);
+        onOpenChange?.(true);
+    };
+    const closeDrawerHandler = () => {
+        setOpenDrawer(false);
+        onOpenChange?.(false);
+    };
+    const handleClosedTabTouchStart = (event) => {
+        touchStartYRef.current = event.touches[0]?.clientY ?? null;
+    };
+    const handleClosedTabTouchEnd = (event) => {
+        const startY = touchStartYRef.current;
+        const endY = event.changedTouches[0]?.clientY;
+        if (startY === null || typeof endY !== 'number') {
+            touchStartYRef.current = null;
+            return;
+        }
+        const swipeDistance = startY - endY;
+        if (swipeDistance > 24) {
+            openDrawerHandler();
+        }
+        touchStartYRef.current = null;
+    };
+    return (React.createElement(material.Box, { sx: { display: { md: 'none' } } },
+        React.createElement(material.Box, { ref: sentinelRef, sx: { height: 1, visibility: 'hidden' } }),
+        !openDrawer && (React.createElement(material.Box, { onTouchStart: handleClosedTabTouchStart, onTouchEnd: handleClosedTabTouchEnd, sx: {
+                position: 'fixed',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                backgroundColor: (theme) => theme.palette.background.paper,
+                borderTopLeftRadius: 16,
+                borderTopRightRadius: 16,
+                boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
+                zIndex: 1300,
+            } },
+            React.createElement(material.Box, { role: "button", "aria-label": t('form.labels.payment_overview_open'), onClick: toggleDrawer, sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    width: '100%',
+                    py: 1,
+                } },
+                React.createElement(material.Box, { sx: {
+                        width: 30,
+                        height: 6,
+                        backgroundColor: (theme) => theme.palette.grey[300],
+                        borderRadius: 3,
+                    } })),
+            React.createElement(material.Box, { sx: {
+                    width: '100%',
+                    px: 2,
+                    pb: 2,
+                } },
+                React.createElement(material.Typography, { sx: {
+                        fontWeight: 'bold',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    } },
+                    React.createElement("span", null,
+                        t('form.labels.total'),
+                        ":"),
+                    React.createElement("span", null, formatNumber.fCurrency(totalPrice, lang, event.currency))),
+                React.createElement(material.Button, { type: "submit", form: global.EVENTLOOK_ORDER_FORM_ID, variant: "contained", size: "large", fullWidth: true, sx: { mt: 1, height: { xs: 36, md: 40 } } }, t('buy'))))),
+        React.createElement(material.SwipeableDrawer, { anchor: "bottom", open: openDrawer, onClose: closeDrawerHandler, onOpen: openDrawerHandler, swipeAreaWidth: swipeAreaWidth, disableSwipeToOpen: false, keepMounted: true, sx: { display: { md: 'none' } }, ModalProps: {
+                disableScrollLock: true,
+                keepMounted: false,
+                BackdropProps: {
+                    sx: { background: 'rgba(0,0,0,0)' },
+                    onClick: (event) => {
+                        event.stopPropagation();
+                    },
+                },
+            }, PaperProps: {
+                sx: {
+                    borderTopLeftRadius: 16,
+                    borderTopRightRadius: 16,
+                    boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
+                    overflow: 'hidden',
+                },
+            } },
+            React.createElement(material.Box, { role: "button", "aria-label": t('form.labels.payment_overview_close'), onClick: toggleDrawer, sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: (theme) => theme.palette.background.paper,
+                    cursor: 'pointer',
+                    py: 1,
+                } },
+                React.createElement(material.Box, { sx: {
+                        width: 30,
+                        height: 6,
+                        backgroundColor: (theme) => theme.palette.grey[300],
+                        borderRadius: 3,
+                    } })),
+            React.createElement(material.Box, { sx: {
+                    height: '100%',
+                    overflow: 'auto',
+                } },
+                React.createElement(PaymentOverviewBox.default, { event: event })))));
+};
+
+exports.default = PaymentOverviewDrawer;
+//# sourceMappingURL=PaymentOverviewDrawer.js.map

package/dist/cjs/form/PaymentOverviewDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentOverviewDrawer.js","sources":["../../../src/form/PaymentOverviewDrawer.tsx"],"sourcesContent":["import { Box, Button, SwipeableDrawer, Typography } from '@mui/material';\nimport React, { useEffect } from 'react';\nimport { useRef, useState } from 'react';\nimport PaymentOverviewBox from './PaymentOverviewBox';\nimport { IEvent } from '@utils/types/event.type';\nimport useGlobal from '@hooks/useGlobal';\nimport { fCurrency } from '@utils/formatNumber';\nimport { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';\n\ninterface Props {\n  event: IEvent;\n  totalPrice: number;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst swipeAreaWidth = 56;\n\nconst PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChange }) => {\n  const { t, lang } = useGlobal();\n  const [openDrawer, setOpenDrawer] = useState(false);\n  const touchStartYRef = useRef<number | null>(null);\n\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const prevYRef = useRef<number>(Number.POSITIVE_INFINITY);\n\n  // Opens drawer when scrolling down\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (totalPrice <= 0) return;\n          const currentY = entry.boundingClientRect.y;\n          const isScrollingDown = currentY < prevYRef.current;\n\n          if (entry.isIntersecting && isScrollingDown) {\n            openDrawerHandler();\n          }\n\n          prevYRef.current = currentY;\n        });\n      },\n      {\n        threshold: 0,\n        rootMargin: '0px 0px 0px 0px',\n      }\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      observer.unobserve(sentinel);\n    };\n  }, [totalPrice]);\n\n  const toggleDrawer = () => {\n    setOpenDrawer((prev) => {\n      const next = !prev;\n      onOpenChange?.(next);\n      return next;\n    });\n  };\n\n  const openDrawerHandler = () => {\n    setOpenDrawer(true);\n    onOpenChange?.(true);\n  };\n\n  const closeDrawerHandler = () => {\n    setOpenDrawer(false);\n    onOpenChange?.(false);\n  };\n\n  const handleClosedTabTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n    touchStartYRef.current = event.touches[0]?.clientY ?? null;\n  };\n\n  const handleClosedTabTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n    const startY = touchStartYRef.current;\n    const endY = event.changedTouches[0]?.clientY;\n\n    if (startY === null || typeof endY !== 'number') {\n      touchStartYRef.current = null;\n      return;\n    }\n\n    const swipeDistance = startY - endY;\n    if (swipeDistance > 24) {\n      openDrawerHandler();\n    }\n\n    touchStartYRef.current = null;\n  };\n\n  return (\n    <Box sx={{ display: { md: 'none' } }}>\n      {/* Sentinel element for intersection observer */}\n      <Box ref={sentinelRef} sx={{ height: 1, visibility: 'hidden' }} />\n\n      {/* Drawer Tab */}\n      {!openDrawer && (\n        <Box\n          onTouchStart={handleClosedTabTouchStart}\n          onTouchEnd={handleClosedTabTouchEnd}\n          sx={{\n            position: 'fixed',\n            bottom: 0,\n            left: 0,\n            right: 0,\n            backgroundColor: (theme) => theme.palette.background.paper,\n            borderTopLeftRadius: 16,\n            borderTopRightRadius: 16,\n            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',\n            zIndex: 1300,\n          }}\n        >\n          <Box\n            role=\"button\"\n            aria-label={t('form.labels.payment_overview_open')}\n            onClick={toggleDrawer}\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              cursor: 'pointer',\n              width: '100%',\n              py: 1,\n            }}\n          >\n            <Box\n              sx={{\n                width: 30,\n                height: 6,\n                backgroundColor: (theme) => theme.palette.grey[300],\n                borderRadius: 3,\n              }}\n            />\n          </Box>\n          <Box\n            sx={{\n              width: '100%',\n              px: 2,\n              pb: 2,\n            }}\n          >\n            <Typography\n              sx={{\n                fontWeight: 'bold',\n                display: 'flex',\n                justifyContent: 'space-between',\n                alignItems: 'center',\n              }}\n            >\n              <span>{t('form.labels.total')}:</span>\n              <span>{fCurrency(totalPrice, lang, event.currency)}</span>\n            </Typography>\n\n            <Button\n              type=\"submit\"\n              form={EVENTLOOK_ORDER_FORM_ID}\n              variant=\"contained\"\n              size=\"large\"\n              fullWidth\n              sx={{ mt: 1, height: { xs: 36, md: 40 } }}\n            >\n              {t('buy')}\n            </Button>\n          </Box>\n        </Box>\n      )}\n\n      {/* Drawer Content */}\n      <SwipeableDrawer\n        anchor=\"bottom\"\n        open={openDrawer}\n        onClose={closeDrawerHandler}\n        onOpen={openDrawerHandler}\n        swipeAreaWidth={swipeAreaWidth}\n        disableSwipeToOpen={false}\n        keepMounted\n        sx={{ display: { md: 'none' } }}\n        ModalProps={{\n          disableScrollLock: true,\n          keepMounted: false,\n          BackdropProps: {\n            sx: { background: 'rgba(0,0,0,0)' },\n            onClick: (event: React.MouseEvent<HTMLDivElement>) => {\n              event.stopPropagation();\n            },\n          },\n        }}\n        PaperProps={{\n          sx: {\n            borderTopLeftRadius: 16,\n            borderTopRightRadius: 16,\n            boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',\n            overflow: 'hidden',\n          },\n        }}\n      >\n        <Box\n          role=\"button\"\n          aria-label={t('form.labels.payment_overview_close')}\n          onClick={toggleDrawer}\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            backgroundColor: (theme) => theme.palette.background.paper,\n            cursor: 'pointer',\n            py: 1,\n          }}\n        >\n          <Box\n            sx={{\n              width: 30,\n              height: 6,\n              backgroundColor: (theme) => theme.palette.grey[300],\n              borderRadius: 3,\n            }}\n          />\n        </Box>\n        <Box\n          sx={{\n            height: '100%',\n            overflow: 'auto',\n          }}\n        >\n          <PaymentOverviewBox event={event} />\n        </Box>\n      </SwipeableDrawer>\n    </Box>\n  );\n};\n\nexport default PaymentOverviewDrawer;\n"],"names":["useGlobal","useState","useRef","useEffect","Box","Typography","fCurrency","Button","EVENTLOOK_ORDER_FORM_ID","SwipeableDrawer","PaymentOverviewBox"],"mappings":"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"}

package/dist/cjs/form/PaymentPending.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var material = require('@mui/material');
-var Lottie = require('lottie-react');
 var bankTransfer = require('../utils/data/lottie/bank-transfer.json.js');
 var bounce = require('../components/animate/variants/bounce.js');
 var framerMotion = require('framer-motion');
@@ -15,11 +14,24 @@ var useGlobal = require('../hooks/useGlobal.js');
 
 const PaymentPending = () => {
     const { t } = useGlobal.default();
+    const [LottieComponent, setLottieComponent] = React.useState(null);
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        let isMounted = true;
+        import('lottie-react').then((module) => {
+            if (isMounted) {
+                setLottieComponent(() => module.default);
+            }
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, []);
     return (React.createElement(material.Box, { textAlign: "center" },
         React.createElement(framerMotion.m.div, { variants: bounce.varBounce().in },
             React.createElement(material.Typography, { variant: "h4", sx: { mb: 2, maxWidth: 600, mx: 'auto' } }, t('event.tickets.payment_pending'))),
-        React.createElement(material.Box, { maxWidth: 600, mx: "auto" },
-            React.createElement(Lottie, { animationData: bankTransfer.default }))));
+        React.createElement(material.Box, { maxWidth: 600, mx: "auto" }, LottieComponent ? React.createElement(LottieComponent, { animationData: bankTransfer.default }) : null)));
 };
 
 exports.default = PaymentPending;

package/dist/cjs/form/PaymentPending.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentPending.js","sources":["../../../src/form/PaymentPending.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport Lottie from 'lottie-react';\nimport bankTransferAnimation from '../utils/data/lottie/bank-transfer.json';\nimport { varBounce } from '@components/animate';\nimport { m } from 'framer-motion';\nimport useGlobal from '@hooks/useGlobal.ts';\n\nconst PaymentPending: React.FC = () => {\n  const { t } = useGlobal();\n\n  return (\n    <Box textAlign=\"center\">\n      <m.div variants={varBounce().in}>\n        <Typography variant=\"h4\" sx={{ mb: 2, maxWidth: 600, mx: 'auto' }}>\n          {t('event.tickets.payment_pending')}\n        </Typography>\n      </m.div>\n      <Box maxWidth={600} mx=\"auto\">\n        <Lottie animationData={bankTransferAnimation} />\n      </Box>\n    </Box>\n  );\n};\n\nexport default PaymentPending;\n"],"names":["useGlobal","Box","m","varBounce","Typography","bankTransferAnimation"],"mappings":";;;;;;;;;;;;;;;AAQA,MAAM,cAAc,GAAa,MAAK;AACpC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAGA,iBAAS,EAAE;AAEzB,IAAA,QACE,KAAA,CAAA,aAAA,CAACC,YAAG,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA;QACrB,KAAA,CAAA,aAAA,CAACC,cAAC,CAAC,GAAG,EAAA,EAAC,QAAQ,EAAEC,gBAAS,EAAE,CAAC,EAAE,EAAA;YAC7B,KAAA,CAAA,aAAA,CAACC,mBAAU,EAAA,EAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,EAC9D,CAAC,CAAC,+BAA+B,CAAC,CACxB,CACP;QACR,KAAA,CAAA,aAAA,CAACH,YAAG,IAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAC,MAAM,EAAA;YAC3B,KAAA,CAAA,aAAA,CAAC,MAAM,IAAC,aAAa,EAAEI,oBAAqB,EAAA,CAAI,CAC5C,CACF;AAEV;;;;"}
+{"version":3,"file":"PaymentPending.js","sources":["../../../src/form/PaymentPending.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport bankTransferAnimation from '../utils/data/lottie/bank-transfer.json';\nimport { varBounce } from '@components/animate';\nimport { m } from 'framer-motion';\nimport useGlobal from '@hooks/useGlobal.ts';\n\nconst PaymentPending: React.FC = () => {\n  const { t } = useGlobal();\n  const [LottieComponent, setLottieComponent] = useState<React.ComponentType<any> | null>(null);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    let isMounted = true;\n\n    import('lottie-react').then((module) => {\n      if (isMounted) {\n        setLottieComponent(() => module.default);\n      }\n    });\n\n    return () => {\n      isMounted = false;\n    };\n  }, []);\n\n  return (\n    <Box textAlign=\"center\">\n      <m.div variants={varBounce().in}>\n        <Typography variant=\"h4\" sx={{ mb: 2, maxWidth: 600, mx: 'auto' }}>\n          {t('event.tickets.payment_pending')}\n        </Typography>\n      </m.div>\n      <Box maxWidth={600} mx=\"auto\">\n        {LottieComponent ? <LottieComponent animationData={bankTransferAnimation} /> : null}\n      </Box>\n    </Box>\n  );\n};\n\nexport default PaymentPending;\n"],"names":["useGlobal","useState","useEffect","Box","m","varBounce","Typography","bankTransferAnimation"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,cAAc,GAAa,MAAK;AACpC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAGA,iBAAS,EAAE;IACzB,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGC,cAAQ,CAAkC,IAAI,CAAC;IAE7FC,eAAS,CAAC,MAAK;QACb,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE;QAEnC,IAAI,SAAS,GAAG,IAAI;QAEpB,OAAO,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;YACrC,IAAI,SAAS,EAAE;gBACb,kBAAkB,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC;;AAE5C,SAAC,CAAC;AAEF,QAAA,OAAO,MAAK;YACV,SAAS,GAAG,KAAK;AACnB,SAAC;KACF,EAAE,EAAE,CAAC;AAEN,IAAA,QACE,KAAA,CAAA,aAAA,CAACC,YAAG,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA;QACrB,KAAA,CAAA,aAAA,CAACC,cAAC,CAAC,GAAG,EAAA,EAAC,QAAQ,EAAEC,gBAAS,EAAE,CAAC,EAAE,EAAA;YAC7B,KAAA,CAAA,aAAA,CAACC,mBAAU,EAAA,EAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,EAC9D,CAAC,CAAC,+BAA+B,CAAC,CACxB,CACP;AACR,QAAA,KAAA,CAAA,aAAA,CAACH,YAAG,EAAA,EAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAC,MAAM,EAAA,EAC1B,eAAe,GAAG,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,aAAa,EAAEI,oBAAqB,EAAA,CAAI,GAAG,IAAI,CAC/E,CACF;AAEV;;;;"}

package/dist/cjs/form/ReleaseWithMerchandise.js

@@ -4,23 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var material = require('@mui/material');
-var Iconify = require('../components/iconify/Iconify.js');
 var ProductVariantsDialog = require('./product/ProductVariantsDialog.js');
+var TicketQuantityControl = require('./tickets/TicketQuantityControl.js');
 var reactHookForm = require('react-hook-form');
 var formatNumber = require('../utils/formatNumber.js');
 var product = require('../utils/product.js');
 var ReleaseExtraFields = require('./extra-field/ReleaseExtraFields.js');
+var ReleaseDescription = require('./tickets/ReleaseDescription.js');
 var useGlobal = require('../hooks/useGlobal.js');
 
 const ReleaseWithMerchandise = ({ eventId, release, activeReleases, currency, index, }) => {
     const { t, lang } = useGlobal.default();
     const [openVariantDialog, setOpenVariantDialog] = React.useState(null);
+    const [isDescriptionExpanded, setIsDescriptionExpanded] = React.useState(false);
     const { setValue } = reactHookForm.useFormContext();
     const tickets = reactHookForm.useWatch({ name: `tickets.${eventId}`, defaultValue: [] });
     const products = reactHookForm.useWatch({ name: `products.${eventId}`, defaultValue: [] });
     const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
     const countTickets = addedRelease?.quantity || 0;
-    const isReleaseSelected = (id) => !!tickets.find((ticket) => ticket.releaseId === id);
+    const getReleaseTitle = (release) => release.releaseCategoryName || release.name || '';
     const getSelectedQuantity = (id) => tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;
     const getAvailableTicketsForRelease = (release) => {
         const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);
@@ -33,45 +35,60 @@ const ReleaseWithMerchandise = ({ eventId, release, activeReleases, currency, in
             return false;
         return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);
     };
-    const addRelease = (product) => {
+    const addRelease = (productsToAdd) => {
+        const normalizedProducts = Array.isArray(productsToAdd)
+            ? productsToAdd
+            : productsToAdd
+                ? [productsToAdd]
+                : [];
+        const quantity = normalizedProducts.length ? normalizedProducts.length : 1;
+        const extraFields = release.extraFields?.length
+            ? Array.from({ length: quantity }, () => release.extraFields.map((field) => ({
+                eventExtraFieldId: field.id,
+                value: '',
+            })))
+            : [];
         setValue(`tickets.${eventId}`, [
             ...tickets,
             {
                 releaseId: release.id,
-                quantity: 1,
+                quantity,
                 itemName: '',
                 price: 0,
-                products: product ? [product] : [],
-                extraFields: release.extraFields?.length
-                    ? [
-                        release.extraFields.map((field) => ({
-                            eventExtraFieldId: field.id,
-                            value: '',
-                        })),
-                    ]
-                    : [],
+                products: normalizedProducts,
+                extraFields,
             },
         ]);
         setOpenVariantDialog(null);
     };
-    const increaseQuantity = (product) => {
+    const increaseQuantity = (productsToAdd) => {
+        const normalizedProducts = Array.isArray(productsToAdd)
+            ? productsToAdd
+            : productsToAdd
+                ? [productsToAdd]
+                : [];
         const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);
         if (addedRelease) {
-            const newQuantity = Number(addedRelease.quantity) + 1;
+            const increment = normalizedProducts.length ? normalizedProducts.length : 1;
             const maxQuantity = getAvailableTicketsForRelease(addedRelease);
+            const availableIncrement = Math.max(0, Math.min(increment, maxQuantity - Number(addedRelease.quantity)));
+            if (availableIncrement === 0)
+                return;
+            const newQuantity = Number(addedRelease.quantity) + availableIncrement;
+            const productsSlice = normalizedProducts.slice(0, availableIncrement);
+            const extraFieldsToAdd = release.extraFields?.length
+                ? Array.from({ length: availableIncrement }, () => release.extraFields.map((field) => ({
+                    eventExtraFieldId: field.id,
+                    value: '',
+                })))
+                : [];
             setValue(`tickets.${eventId}`, tickets.map((ticket) => ticket.releaseId === release.id
                 ? {
                     ...ticket,
                     quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,
-                    products: product ? [...ticket.products, product] : ticket.products,
+                    products: [...ticket.products, ...productsSlice],
                     extraFields: release.extraFields?.length
-                        ? [
-                            ...ticket.extraFields,
-                            release.extraFields.map((field) => ({
-                                eventExtraFieldId: field.id,
-                                value: '',
-                            })),
-                        ]
+                        ? [...ticket.extraFields, ...extraFieldsToAdd]
                         : [],
                 }
                 : ticket));
@@ -99,31 +116,23 @@ const ReleaseWithMerchandise = ({ eventId, release, activeReleases, currency, in
             }
         }
     }, [tickets, release.id, setValue]);
-    return (React.createElement(material.Box, null,
-        React.createElement(material.Stack, { direction: "row", spacing: 1 },
-            React.createElement(material.Stack, { direction: "row", spacing: 1, justifyContent: "space-between", alignItems: "center", sx: { width: '100%', backgroundColor: 'grey.200', p: 1, pl: 1.5, borderRadius: 1 } },
-                React.createElement(material.Stack, { direction: "row", spacing: 2, alignItems: "center" },
-                    React.createElement(material.Stack, { direction: "row", spacing: 0.5, alignItems: "center" },
-                        React.createElement(Iconify.default, { icon: "ion:ticket-outline", color: "primary.main", sx: { width: 24, height: 24 } }),
-                        release.product && (React.createElement(React.Fragment, null,
-                            React.createElement(material.Typography, { fontSize: 20, lineHeight: 1 }, "+"),
-                            React.createElement(Iconify.default, { icon: "lucide-lab:shirt-t", color: "primary.main", sx: { width: 24, height: 24 } })))),
-                    React.createElement(material.Typography, { color: "grey.500" },
-                        release.releaseCategoryName,
-                        " - ",
-                        release.name,
-                        " -",
-                        ' ',
-                        formatNumber.fCurrency(release.price, lang, currency))),
-                isReleaseSelected(release.id) ? (React.createElement(material.Stack, { direction: "row", spacing: 1, py: 0.5 },
-                    React.createElement(material.IconButton, { onClick: () => decreaseQuantity(), size: "small", color: "primary" },
-                        React.createElement(Iconify.default, { icon: "eva:minus-fill" })),
-                    React.createElement(material.Typography, { color: "grey.500" }, getSelectedQuantity(release.id)),
-                    React.createElement(material.IconButton, { onClick: () => release.product ? setOpenVariantDialog('increase') : increaseQuantity(), size: "small", color: "primary", disabled: isMaxQuantity(release.id) },
-                        React.createElement(Iconify.default, { icon: "eva:plus-fill" })))) : (React.createElement(material.Button, { onClick: () => !release.locked && (release.product ? setOpenVariantDialog('add') : addRelease()), variant: "contained", disabled: release.locked }, t('add'))))),
-        React.createElement(material.Typography, { variant: "caption", content: "div", mt: 2, mb: release.extraFields?.length ? 2 : 0, display: "block" }, release.description),
-        release.extraFields && release.extraFields.length > 0 && (React.createElement(ReleaseExtraFields.default, { release: release, eventId: eventId, releaseIndex: index, quantity: countTickets })),
-        release.product && (React.createElement(ProductVariantsDialog.default, { eventProduct: release.product, openDialog: !!openVariantDialog, callback: openVariantDialog === 'increase' ? increaseQuantity : addRelease, onClose: () => setOpenVariantDialog(null), selectedQuantityByVariant: product.getSelectedQuantityByVariant(products, tickets), eventId: eventId }))));
+    return (React.createElement(material.Box, { sx: {
+            p: 1,
+            pb: 0,
+            borderRadius: 1,
+            bgcolor: 'grey.100',
+        } },
+        React.createElement(material.Stack, { spacing: 0 },
+            React.createElement(material.Box, null,
+                React.createElement(material.Typography, { variant: "subtitle1", fontWeight: 600 }, getReleaseTitle(release))),
+            React.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" },
+                React.createElement(material.Stack, null,
+                    React.createElement(material.Typography, { variant: "body2" }, release.price === 0 ? t('free') : formatNumber.fCurrency(release.price, lang, currency)),
+                    React.createElement(ReleaseDescription.default, { description: release.description, isExpanded: isDescriptionExpanded, onToggle: () => setIsDescriptionExpanded((prev) => !prev), moreInfoLabel: t('more_info') })),
+                React.createElement(TicketQuantityControl.default, { quantity: getSelectedQuantity(release.id), isDisabled: release.locked, canAddFirst: !release.locked, canAddMore: !isMaxQuantity(release.id), addLabel: t('add'), onDecrement: () => decreaseQuantity(), onIncrement: () => release.product ? setOpenVariantDialog('increase') : increaseQuantity(), onAddFirst: () => (release.product ? setOpenVariantDialog('add') : addRelease()) })),
+            React.createElement(ReleaseDescription.default, { description: release.description, isExpanded: isDescriptionExpanded, onToggle: () => setIsDescriptionExpanded((prev) => !prev), moreInfoLabel: t('more_info'), showCollapse: true }),
+            release.extraFields && release.extraFields.length > 0 && (React.createElement(ReleaseExtraFields.default, { release: release, eventId: eventId, releaseIndex: index, quantity: countTickets })),
+            release.product && (React.createElement(ProductVariantsDialog.default, { eventProduct: release.product, openDialog: !!openVariantDialog, callback: openVariantDialog === 'increase' ? increaseQuantity : addRelease, onClose: () => setOpenVariantDialog(null), selectedQuantityByVariant: product.getSelectedQuantityByVariant(products, tickets), eventId: eventId, canAddOnlyOneAtATime: true })))));
 };
 
 exports.default = ReleaseWithMerchandise;

package/dist/cjs/form/ReleaseWithMerchandise.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseWithMerchandise.js","sources":["../../../src/form/ReleaseWithMerchandise.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Box, Button, IconButton, Stack, Typography } from '@mui/material';\nimport { Iconify } from '@components/iconify';\nimport ProductVariantsDialog from '@form/product/ProductVariantsDialog';\nimport { IReleaseShort } from '@utils/types/release.type';\nimport { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { IEventProductForm } from '@utils/types/product.type';\nimport { fCurrency } from '@utils/formatNumber';\nimport { Currencies } from '@utils/data/currency';\nimport { getSelectedQuantityByVariant } from '@utils/product';\nimport ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';\nimport useGlobal from '@hooks/useGlobal.ts';\n\ninterface Props {\n  eventId: number;\n  release: IReleaseShort;\n  activeReleases: IReleaseShort[];\n  currency: Currencies;\n  index: number;\n}\n\nconst ReleaseWithMerchandise: React.FC<Props> = ({\n  eventId,\n  release,\n  activeReleases,\n  currency,\n  index,\n}) => {\n  const { t, lang } = useGlobal();\n  const [openVariantDialog, setOpenVariantDialog] = useState<'add' | 'increase' | null>(null);\n  const { setValue } = useFormContext<ITicketForm>();\n  const tickets: ITicketFormTicket[] = useWatch({ name: `tickets.${eventId}`, defaultValue: [] });\n  const products: IEventProductForm[] = useWatch({ name: `products.${eventId}`, defaultValue: [] });\n  const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);\n  const countTickets = addedRelease?.quantity || 0;\n\n  const isReleaseSelected = (id: number) => !!tickets.find((ticket) => ticket.releaseId === id);\n\n  const getSelectedQuantity = (id: number) =>\n    tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;\n\n  const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {\n    const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);\n    const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;\n    return availableQuantity > 10 ? 10 : availableQuantity;\n  };\n\n  const isMaxQuantity = (releaseId: number) => {\n    const release = tickets.find((ticket) => ticket.releaseId === releaseId);\n    if (!release) return false;\n    return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);\n  };\n\n  const addRelease = (product?: IEventProductForm) => {\n    setValue(`tickets.${eventId}`, [\n      ...tickets,\n      {\n        releaseId: release.id,\n        quantity: 1,\n        itemName: '',\n        price: 0,\n        products: product ? [product] : [],\n        extraFields: release.extraFields?.length\n          ? [\n              release.extraFields.map((field) => ({\n                eventExtraFieldId: field.id,\n                value: '',\n              })),\n            ]\n          : [],\n      },\n    ]);\n    setOpenVariantDialog(null);\n  };\n\n  const increaseQuantity = (product?: IEventProductForm) => {\n    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);\n    if (addedRelease) {\n      const newQuantity = Number(addedRelease.quantity) + 1;\n      const maxQuantity = getAvailableTicketsForRelease(addedRelease);\n      setValue(\n        `tickets.${eventId}`,\n        tickets.map((ticket) =>\n          ticket.releaseId === release.id\n            ? {\n                ...ticket,\n                quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,\n                products: product ? [...ticket.products, product] : ticket.products,\n                extraFields: release.extraFields?.length\n                  ? [\n                      ...ticket.extraFields,\n                      release.extraFields.map((field) => ({\n                        eventExtraFieldId: field.id,\n                        value: '',\n                      })),\n                    ]\n                  : [],\n              }\n            : ticket\n        )\n      );\n      setOpenVariantDialog(null);\n    }\n  };\n\n  const decreaseQuantity = useCallback(() => {\n    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);\n    if (addedRelease) {\n      const newQuantity = Number(addedRelease.quantity) - 1;\n      if (newQuantity < 1) {\n        setValue(\n          `tickets.${eventId}`,\n          tickets.filter((ticket) => ticket.releaseId !== release.id)\n        );\n      } else {\n        setValue(\n          `tickets.${eventId}`,\n          tickets.map((ticket) => {\n            if (ticket.releaseId !== release.id) return ticket;\n\n            return {\n              ...ticket,\n              quantity: newQuantity,\n              products: ticket?.products?.slice(0, -1), // non-mutating \"pop\"\n              extraFields: ticket?.extraFields?.slice(0, -1),\n            };\n          })\n        );\n      }\n    }\n  }, [tickets, release.id, setValue]);\n\n  return (\n    <Box>\n      <Stack direction=\"row\" spacing={1}>\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n          sx={{ width: '100%', backgroundColor: 'grey.200', p: 1, pl: 1.5, borderRadius: 1 }}\n        >\n          <Stack direction=\"row\" spacing={2} alignItems=\"center\">\n            <Stack direction=\"row\" spacing={0.5} alignItems=\"center\">\n              <Iconify\n                icon=\"ion:ticket-outline\"\n                color=\"primary.main\"\n                sx={{ width: 24, height: 24 }}\n              />\n              {release.product && (\n                <>\n                  <Typography fontSize={20} lineHeight={1}>\n                    +\n                  </Typography>\n                  <Iconify\n                    icon=\"lucide-lab:shirt-t\"\n                    color=\"primary.main\"\n                    sx={{ width: 24, height: 24 }}\n                  />\n                </>\n              )}\n            </Stack>\n            <Typography color=\"grey.500\">\n              {release.releaseCategoryName} - {release.name} -{' '}\n              {fCurrency(release.price, lang, currency)}\n            </Typography>\n          </Stack>\n          {isReleaseSelected(release.id) ? (\n            <Stack direction=\"row\" spacing={1} py={0.5}>\n              <IconButton onClick={() => decreaseQuantity()} size=\"small\" color=\"primary\">\n                <Iconify icon=\"eva:minus-fill\" />\n              </IconButton>\n              <Typography color=\"grey.500\">{getSelectedQuantity(release.id)}</Typography>\n              <IconButton\n                onClick={() =>\n                  release.product ? setOpenVariantDialog('increase') : increaseQuantity()\n                }\n                size=\"small\"\n                color=\"primary\"\n                disabled={isMaxQuantity(release.id)}\n              >\n                <Iconify icon=\"eva:plus-fill\" />\n              </IconButton>\n            </Stack>\n          ) : (\n            <Button\n              onClick={() =>\n                !release.locked && (release.product ? setOpenVariantDialog('add') : addRelease())\n              }\n              variant=\"contained\"\n              disabled={release.locked}\n            >\n              {t('add')}\n            </Button>\n          )}\n        </Stack>\n      </Stack>\n      <Typography\n        variant=\"caption\"\n        content=\"div\"\n        mt={2}\n        mb={release.extraFields?.length ? 2 : 0}\n        display=\"block\"\n      >\n        {release.description}\n      </Typography>\n      {release.extraFields && release.extraFields.length > 0 && (\n        <ReleaseExtraFields\n          release={release}\n          eventId={eventId}\n          releaseIndex={index}\n          quantity={countTickets}\n        />\n      )}\n      {release.product && (\n        <ProductVariantsDialog\n          eventProduct={release.product}\n          openDialog={!!openVariantDialog}\n          callback={openVariantDialog === 'increase' ? increaseQuantity : addRelease}\n          onClose={() => setOpenVariantDialog(null)}\n          selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}\n          eventId={eventId}\n        />\n      )}\n    </Box>\n  );\n};\n\nexport default ReleaseWithMerchandise;\n"],"names":["useGlobal","useState","useFormContext","useWatch","useCallback","Box","Stack","Iconify","Typography","fCurrency","IconButton","Button","ReleaseExtraFields","ProductVariantsDialog","getSelectedQuantityByVariant"],"mappings":"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"}
+{"version":3,"file":"ReleaseWithMerchandise.js","sources":["../../../src/form/ReleaseWithMerchandise.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Box, Stack, Typography } from '@mui/material';\nimport ProductVariantsDialog from '@form/product/ProductVariantsDialog';\nimport TicketQuantityControl from '@form/tickets/TicketQuantityControl';\nimport { IReleaseShort } from '@utils/types/release.type';\nimport { ITicketForm, ITicketFormTicket } from '@utils/types/ticket.type';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { IEventProductForm } from '@utils/types/product.type';\nimport { fCurrency } from '@utils/formatNumber';\nimport { Currencies } from '@utils/data/currency';\nimport { getSelectedQuantityByVariant } from '@utils/product';\nimport ReleaseExtraFields from '@form/extra-field/ReleaseExtraFields';\nimport ReleaseDescription from '@form/tickets/ReleaseDescription';\nimport useGlobal from '@hooks/useGlobal.ts';\n\ninterface Props {\n  eventId: number;\n  release: IReleaseShort;\n  activeReleases: IReleaseShort[];\n  currency: Currencies;\n  index: number;\n}\n\nconst ReleaseWithMerchandise: React.FC<Props> = ({\n  eventId,\n  release,\n  activeReleases,\n  currency,\n  index,\n}) => {\n  const { t, lang } = useGlobal();\n  const [openVariantDialog, setOpenVariantDialog] = useState<'add' | 'increase' | null>(null);\n  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(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  const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);\n  const countTickets = addedRelease?.quantity || 0;\n\n  const getReleaseTitle = (release: IReleaseShort) =>\n    release.releaseCategoryName || release.name || '';\n\n  const getSelectedQuantity = (id: number) =>\n    tickets.find((ticket) => ticket.releaseId === id)?.quantity || 0;\n\n  const getAvailableTicketsForRelease = (release: ITicketFormTicket): number => {\n    const selectedRelease = activeReleases?.find((item) => item.id === release.releaseId);\n    const availableQuantity = selectedRelease ? selectedRelease.availableTickets : 0;\n    return availableQuantity > 10 ? 10 : availableQuantity;\n  };\n\n  const isMaxQuantity = (releaseId: number) => {\n    const release = tickets.find((ticket) => ticket.releaseId === releaseId);\n    if (!release) return false;\n    return getSelectedQuantity(releaseId) >= getAvailableTicketsForRelease(release);\n  };\n\n  const addRelease = (productsToAdd?: IEventProductForm[] | IEventProductForm) => {\n    const normalizedProducts = Array.isArray(productsToAdd)\n      ? productsToAdd\n      : productsToAdd\n        ? [productsToAdd]\n        : [];\n    const quantity = normalizedProducts.length ? normalizedProducts.length : 1;\n    const extraFields = release.extraFields?.length\n      ? Array.from({ length: quantity }, () =>\n          release.extraFields!.map((field) => ({\n            eventExtraFieldId: field.id,\n            value: '',\n          }))\n        )\n      : [];\n\n    setValue(`tickets.${eventId}`, [\n      ...tickets,\n      {\n        releaseId: release.id,\n        quantity,\n        itemName: '',\n        price: 0,\n        products: normalizedProducts,\n        extraFields,\n      },\n    ]);\n    setOpenVariantDialog(null);\n  };\n\n  const increaseQuantity = (productsToAdd?: IEventProductForm[] | IEventProductForm) => {\n    const normalizedProducts = Array.isArray(productsToAdd)\n      ? productsToAdd\n      : productsToAdd\n        ? [productsToAdd]\n        : [];\n    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);\n    if (addedRelease) {\n      const increment = normalizedProducts.length ? normalizedProducts.length : 1;\n      const maxQuantity = getAvailableTicketsForRelease(addedRelease);\n      const availableIncrement = Math.max(\n        0,\n        Math.min(increment, maxQuantity - Number(addedRelease.quantity))\n      );\n      if (availableIncrement === 0) return;\n\n      const newQuantity = Number(addedRelease.quantity) + availableIncrement;\n      const productsSlice = normalizedProducts.slice(0, availableIncrement);\n      const extraFieldsToAdd = release.extraFields?.length\n        ? Array.from({ length: availableIncrement }, () =>\n            release.extraFields!.map((field) => ({\n              eventExtraFieldId: field.id,\n              value: '',\n            }))\n          )\n        : [];\n\n      setValue(\n        `tickets.${eventId}`,\n        tickets.map((ticket) =>\n          ticket.releaseId === release.id\n            ? {\n                ...ticket,\n                quantity: newQuantity > maxQuantity ? maxQuantity : newQuantity,\n                products: [...ticket.products, ...productsSlice],\n                extraFields: release.extraFields?.length\n                  ? [...ticket.extraFields, ...extraFieldsToAdd]\n                  : [],\n              }\n            : ticket\n        )\n      );\n      setOpenVariantDialog(null);\n    }\n  };\n\n  const decreaseQuantity = useCallback(() => {\n    const addedRelease = tickets.find((ticket) => ticket.releaseId === release.id);\n    if (addedRelease) {\n      const newQuantity = Number(addedRelease.quantity) - 1;\n      if (newQuantity < 1) {\n        setValue(\n          `tickets.${eventId}`,\n          tickets.filter((ticket) => ticket.releaseId !== release.id)\n        );\n      } else {\n        setValue(\n          `tickets.${eventId}`,\n          tickets.map((ticket) => {\n            if (ticket.releaseId !== release.id) return ticket;\n\n            return {\n              ...ticket,\n              quantity: newQuantity,\n              products: ticket?.products?.slice(0, -1), // non-mutating \"pop\"\n              extraFields: ticket?.extraFields?.slice(0, -1),\n            };\n          })\n        );\n      }\n    }\n  }, [tickets, release.id, setValue]);\n\n  return (\n    <Box\n      sx={{\n        p: 1,\n        pb: 0,\n        borderRadius: 1,\n        bgcolor: 'grey.100',\n      }}\n    >\n      <Stack spacing={0}>\n        <Box>\n          <Typography variant=\"subtitle1\" fontWeight={600}>\n            {getReleaseTitle(release)}\n          </Typography>\n        </Box>\n\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\">\n          <Stack>\n            <Typography variant=\"body2\">\n              {release.price === 0 ? t('free') : fCurrency(release.price, lang, currency)}\n            </Typography>\n\n            <ReleaseDescription\n              description={release.description}\n              isExpanded={isDescriptionExpanded}\n              onToggle={() => setIsDescriptionExpanded((prev) => !prev)}\n              moreInfoLabel={t('more_info')}\n            />\n          </Stack>\n\n          <TicketQuantityControl\n            quantity={getSelectedQuantity(release.id)}\n            isDisabled={release.locked}\n            canAddFirst={!release.locked}\n            canAddMore={!isMaxQuantity(release.id)}\n            addLabel={t('add')}\n            onDecrement={() => decreaseQuantity()}\n            onIncrement={() =>\n              release.product ? setOpenVariantDialog('increase') : increaseQuantity()\n            }\n            onAddFirst={() => (release.product ? setOpenVariantDialog('add') : addRelease())}\n          />\n        </Stack>\n\n        <ReleaseDescription\n          description={release.description}\n          isExpanded={isDescriptionExpanded}\n          onToggle={() => setIsDescriptionExpanded((prev) => !prev)}\n          moreInfoLabel={t('more_info')}\n          showCollapse\n        />\n        {release.extraFields && release.extraFields.length > 0 && (\n          <ReleaseExtraFields\n            release={release}\n            eventId={eventId}\n            releaseIndex={index}\n            quantity={countTickets}\n          />\n        )}\n        {release.product && (\n          <ProductVariantsDialog\n            eventProduct={release.product}\n            openDialog={!!openVariantDialog}\n            callback={openVariantDialog === 'increase' ? increaseQuantity : addRelease}\n            onClose={() => setOpenVariantDialog(null)}\n            selectedQuantityByVariant={getSelectedQuantityByVariant(products, tickets)}\n            eventId={eventId}\n            canAddOnlyOneAtATime\n          />\n        )}\n      </Stack>\n    </Box>\n  );\n};\n\nexport default ReleaseWithMerchandise;\n"],"names":["useGlobal","useState","useFormContext","useWatch","useCallback","Box","Stack","Typography","fCurrency","ReleaseDescription","TicketQuantityControl","ReleaseExtraFields","ProductVariantsDialog","getSelectedQuantityByVariant"],"mappings":"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"}

package/dist/cjs/form/Shipping.js

@@ -30,7 +30,6 @@ const Shipping = ({ event }) => {
     });
     const flatProducts = React.useMemo(() => Object.values(products).flat(), [products]);
     const shippingMethodId = watch('shipping.shippingMethodId');
-    const branchId = watch('shipping.branchId');
     const [displayBranchName, setDisplayBranchName] = React.useState(null);
     const [firstRender, setFirstRender] = React.useState(true);
     const filteredShippingMethods = React.useMemo(() => shippingMethods?.filter((shippingMethod) => !flatProducts?.find((product) => product.excludedShippingMethodIds?.includes(shippingMethod?.id)) &&
@@ -50,9 +49,20 @@ const Shipping = ({ event }) => {
             setDisplayBranchName(null);
         }
     };
+    const openPacketaWidget = () => {
+        const interval = setInterval(() => {
+            if (window.Packeta && window.Packeta.Widget) {
+                clearInterval(interval);
+                window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
+                    language: lang,
+                });
+            }
+        }, 100);
+    };
     const handleChangeBranch = () => {
         setValue('shipping.branchId', null);
         setDisplayBranchName(null);
+        openPacketaWidget();
     };
     React.useEffect(() => {
         if (firstRender && filteredShippingMethods.length === 1) {
@@ -64,19 +74,7 @@ const Shipping = ({ event }) => {
         const selectedShippingMethod = shippingMethods.find((method) => method.id === Number(shippingMethodId));
         if (selectedShippingMethod) {
             setValue('shipping.price', selectedShippingMethod.price);
-            if (selectedShippingMethod.type === shippingMethod.ShippingTypes.PACKETA) {
-                if (!branchId) {
-                    const interval = setInterval(() => {
-                        if (window.Packeta && window.Packeta.Widget) {
-                            clearInterval(interval);
-                            window.Packeta.Widget.pick(options?.packetaApiKey, onSelectBranch, {
-                                language: lang,
-                            });
-                        }
-                    }, 100);
-                }
-            }
-            else {
+            if (selectedShippingMethod.type !== shippingMethod.ShippingTypes.PACKETA) {
                 setValue('shipping.branchId', null);
                 setDisplayBranchName(null);
             }
@@ -84,12 +82,18 @@ const Shipping = ({ event }) => {
         else {
             setValue('shipping.price', 0);
         }
-    }, [shippingMethodId, shippingMethods, branchId]);
+    }, [shippingMethodId, shippingMethods]);
     return (React.createElement(React.Fragment, null,
         React.createElement(ScriptLoader.default, null),
         React.createElement("div", null, isLoading ? (React.createElement(ShippingSkeleton.default, null)) : (React.createElement(React.Fragment, null, filteredShippingMethods.length === 0 ? (React.createElement(material.Typography, { variant: "h4", color: "error" }, t('event.tickets.stepper.5.error'))) : (React.createElement(React.Fragment, null,
             React.createElement(reactHookForm.Controller, { name: "shipping.shippingMethodId", control: control, render: ({ field, fieldState: { error } }) => (React.createElement(material.FormControl, { component: "fieldset", sx: { width: '100%' } },
-                    React.createElement(material.RadioGroup, { ...field }, filteredShippingMethods.map((shippingMethod$1) => (React.createElement(style.ShippingMethodItem, { key: shippingMethod$1.id, active: Number(shippingMethodId) === shippingMethod$1.id },
+                    React.createElement(material.RadioGroup, { ...field, onChange: (event, value) => {
+                            field.onChange(event);
+                            const selectedShippingMethod = filteredShippingMethods.find((method) => method.id === Number(value));
+                            if (selectedShippingMethod?.type === shippingMethod.ShippingTypes.PACKETA) {
+                                openPacketaWidget();
+                            }
+                        } }, filteredShippingMethods.map((shippingMethod$1) => (React.createElement(style.ShippingMethodItem, { key: shippingMethod$1.id, active: Number(shippingMethodId) === shippingMethod$1.id, hasError: !!error },
                         React.createElement(material.FormControlLabel, { value: shippingMethod$1.id, control: React.createElement(material.Radio, null), label: React.createElement(material.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%" },
                                 React.createElement(material.Stack, { direction: "row", alignItems: "center" },
                                     React.createElement(material.Box, { sx: {
@@ -101,8 +105,7 @@ const Shipping = ({ event }) => {
                                             shippingMethod$1.id === Number(shippingMethodId) && (React.createElement(material.Typography, { variant: "caption", sx: { lineHeight: 1 } }, displayBranchName))),
                                     paymentImages[shippingMethod$1.type]),
                                 shippingMethod$1.type === shippingMethod.ShippingTypes.PACKETA &&
-                                    shippingMethod$1.id === Number(shippingMethodId) &&
-                                    branchId && (React.createElement(material.Box, null,
+                                    shippingMethod$1.id === Number(shippingMethodId) && (React.createElement(material.Box, null,
                                     React.createElement(material.Button, { onClick: handleChangeBranch, variant: "outlined", size: "small" }, t('change'))))), sx: {
                                 '&:not(:last-of-type)': {
                                     mb: 0,