Merge branch 'develop' into v1.0.0-alpha

# Conflicts:
#	frontend/src/components/routes/product-widget/SelectProducts/index.tsx
#	frontend/src/styles/widget/default.scss

Author: daveearley

frontend/src/components/routes/product-widget/SelectProducts/Prices/Tiered/index.tsx

@@ -20,7 +20,7 @@ export const TieredPricing = ({product, event, form, productIndex}: TieredPricin
             {product?.prices?.map((price, index) => {
                 return (
                     <div key={index} className={'hi-price-tier-row'}>
-                        <Group justify={'space-between'}>
+                        <Group justify={'space-between'} wrap={'nowrap'}>
                             <div className={'hi-price-tier'}>
                                 <div className={'hi-price-tier-label'}>{price.label}</div>
                                 <div className={'hi-price-tier-price'}>

frontend/src/components/routes/product-widget/SelectProducts/index.tsx

@@ -33,7 +33,7 @@ import {PoweredByFooter} from "../../../common/PoweredByFooter";
 import {Event, Product} from "../../../../types.ts";
 import {eventsClientPublic} from "../../../../api/event.client.ts";
 import {promoCodeClientPublic} from "../../../../api/promo-code.client.ts";
-import {IconX} from "@tabler/icons-react"
+import {IconX, IconChevronRight} from "@tabler/icons-react"
 import {getSessionIdentifier} from "../../../../utilites/sessionIdentifier.ts";
 import {Constants} from "../../../../constants.ts";
 
@@ -318,7 +318,7 @@ const SelectProducts = (props: SelectProductsProps) => {
                                                 .map((n) => n.toString());
                                             quantityRange.unshift("0");
 
-                                            const [productIsCollapsed, {toggle: collapseProduct}] = useDisclosure(!product.start_collapsed);
+                            const [productIsCollapsed, {toggle: collapseProduct}] = useDisclosure(product.start_collapsed);
 
                                             return (
                                                 <div key={product.id} className={'hi-product-row'}>
@@ -346,17 +346,25 @@ const SelectProducts = (props: SelectProductsProps) => {
                                                                     </>
                                                                 )}
 
-                                                                {(!product.is_available && product.type === 'TIERED') && (
-                                                                    <ProductAvailabilityMessage product={product} event={event}/>
-                                                                )}
-
-                                                                <span className={'hi-product-collapse-arrow'}>
-                                                                    {productIsCollapsed ? '\u25BC' : '\u25B6'}
-                                                                </span>
-                                                            </div>
-                                                        </UnstyledButton>
-                                                    </div>
+                                                {(!product.is_available && product.type === 'TIERED') && (
+                                                    <ProductAvailabilityMessage product={product} event={event}/>
+                                                )}
+                                            </div>
+                                            <span className={`hi-ticket-collapse-arrow`}>
+                                                <IconChevronRight className={productIsCollapsed ? "" : "open"} />
+                                            </span>
+                                        </UnstyledButton>
+                                    </div>
 
+                                    <Collapse in={!productIsCollapsed} className={'hi-product-content'}>
+                                        <div className={'hi-price-tiers-rows'}>
+                                            <TieredPricing
+                                                productIndex={productIndex}
+                                                event={event}
+                                                product={product}
+                                                form={form}
+                                            />
+                                        </div>
                                                     <Collapse in={productIsCollapsed} className={'hi-product-content'}>
                                                         <div className={'hi-price-tiers-rows'}>
                                                             <TieredPricing

frontend/src/styles/widget/default.scss

@@ -40,6 +40,7 @@
           align-items: center;
 
           h3 {
+            flex: 1;
             margin: 10px 0;
 
             a {
@@ -48,14 +49,23 @@
           }
 
           .hi-product-title-metadata {
-            .hi-product-collapse-arrow {
-              color: var(--widget-secondary-color, var(--tk-primary));
-              margin-left: 10px;
-            }
-
             margin-left: 5px;
             font-weight: normal;
           }
+
+          .hi-product-collapse-arrow {
+            display: flex;
+            color: var(--widget-secondary-color, var(--tk-primary));
+            margin-left: 10px;
+
+            svg {
+              transition: all 0.1s linear;
+            }
+
+            svg.open {
+              transform: rotate(90deg);
+            }
+          }
         }
       }