Merge pull request #302 from HiEventsDev/develop

HiEventsDev · Nov 25, 2024 · 014065d · 014065d
2 parents dbfffad + 9ee352b
commit 014065d
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx b/frontend/src/components/routes/ticket-widget/SelectTickets/index.tsx
@@ -21,7 +21,7 @@ import {
     TicketPriceQuantityFormValue
 } from "../../../../api/order.client.ts";
 import {useForm} from "@mantine/form";
-import {range, useDisclosure, useInputState, useResizeObserver} from "@mantine/hooks";
+import {range, useInputState, useResizeObserver} from "@mantine/hooks";
 import React, {useEffect, useMemo, useRef, useState} from "react";
 import {showError, showInfo, showSuccess} from "../../../../utilites/notifications.tsx";
 import {addQueryStringToUrl, isObjectEmpty, removeQueryStringFromUrl} from "../../../../utilites/helpers.ts";
@@ -33,7 +33,7 @@ import {PoweredByFooter} from "../../../common/PoweredByFooter";
 import {Event} from "../../../../types.ts";
 import {eventsClientPublic} from "../../../../api/event.client.ts";
 import {promoCodeClientPublic} from "../../../../api/promo-code.client.ts";
-import {IconX, IconChevronRight} from "@tabler/icons-react"
+import {IconChevronRight, IconX} from "@tabler/icons-react"
 import {getSessionIdentifier} from "../../../../utilites/sessionIdentifier.ts";
 import {Constants} from "../../../../constants.ts";
 
@@ -81,6 +81,7 @@ const SelectTickets = (props: SelectTicketsProps) => {
     const [event, setEvent] = useState(props.event);
     const [orderInProcessOverlayVisible, setOrderInProcessOverlayVisible] = useState(false);
     const [resizeRef, resizeObserverRect] = useResizeObserver();
+    const [collapsedTickets, setCollapsedTickets] = useState<{ [key: number]: boolean }>({});
 
     useEffect(() => sendHeightToIframeWidgets(), [resizeObserverRect.height]);
 
@@ -297,14 +298,21 @@ const SelectTickets = (props: SelectTicketsProps) => {
                                 .map((n) => n.toString());
                             quantityRange.unshift("0");
 
-                            const [ticketIsCollapsed, {toggle: collapseTicket}] = useDisclosure(ticket.start_collapsed);
+                            const isTicketCollapsed = collapsedTickets[Number(ticket.id)] ?? ticket.start_collapsed;
+                            const toggleCollapse = () => {
+                                setCollapsedTickets(prev => ({
+                                    ...prev,
+                                    [Number(ticket.id)]: !isTicketCollapsed
+                                }));
+                            };
 
                             return (
                                 <div key={ticket.id} className={'hi-ticket-row'}>
                                     <div className={'hi-title-row'}>
-                                        <UnstyledButton variant={'transparent'}
-                                                        className={'hi-ticket-title'}
-                                                        onClick={collapseTicket}
+                                        <UnstyledButton
+                                            variant={'transparent'}
+                                            className={'hi-ticket-title'}
+                                            onClick={toggleCollapse}
                                         >
                                             <h3>
                                                 {ticket.title}
@@ -330,12 +338,12 @@ const SelectTickets = (props: SelectTicketsProps) => {
                                                 )}
                                             </div>
                                             <span className={`hi-ticket-collapse-arrow`}>
-                                                <IconChevronRight className={ticketIsCollapsed ? "" : "open"} />
+                                                <IconChevronRight className={!isTicketCollapsed ? "" : "open"}/>
                                             </span>
                                         </UnstyledButton>
                                     </div>
 
-                                    <Collapse in={!ticketIsCollapsed} className={'hi-ticket-content'}>
+                                    <Collapse in={!isTicketCollapsed} className={'hi-ticket-content'}>
                                         <div className={'hi-price-tiers-rows'}>
                                             <TieredPricing
                                                 ticketIndex={ticketIndex}