@tribe-nest/forge 3.24.0 → 3.26.0

package/src/ui/styled/EventTickets.tsx

@@ -16,6 +16,7 @@ import {
   ticketSeatState,
 } from "../format/ticketAvailability";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { usePageActions } from "../../data/queries/usePageActions";
 import { Loading } from "./Loading";
 import { PaystackPayButton } from "./PaystackPayButton";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
@@ -80,6 +81,20 @@ export function EventTickets({
   const c = useEventCheckout(slug, { finalisePath, onComplete });
   const renderPay = renderPayment ?? registered ?? undefined;
 
+  // Does this page sell add-ons for this event? Same query key as the page's
+  // own <PageActions> mount, so this is a cache read, not a second request.
+  // When add-ons exist, the PRIMARY exit from ticket selection is the cart
+  // (that's what unlocks the add-on grid); direct payment stays the happy
+  // path only on pages without add-ons.
+  const { data: pageActionsData } = usePageActions("event_detail", c.event?.id);
+  const hasAddons = useMemo(
+    () =>
+      (pageActionsData?.actions ?? []).some(
+        (action) => action.type === "product_cards" && Boolean((action.config as Record<string, unknown>)?.isAddon),
+      ),
+    [pageActionsData],
+  );
+
   const [open, setOpen] = useState(false);
 
   const tryClose = (next: boolean) => {
@@ -133,9 +148,20 @@ export function EventTickets({
               renderPayment={renderPay}
               loginPath={loginPath}
               membershipPath={membershipPath}
-              // Selection is safe in the cart now — close so the buyer can go
-              // browse the add-ons.
-              onAddedToCart={() => setOpen(false)}
+              hasAddons={hasAddons}
+              // Selection is safe in the cart now: close, and bring the
+              // freshly unlocked add-on grid into view so the buyer lands on
+              // the next step instead of wherever they left the page.
+              onAddedToCart={() => {
+                setOpen(false);
+                if (typeof document !== "undefined") {
+                  setTimeout(() => {
+                    document
+                      .querySelector('[data-testid="addons-block"]')
+                      ?.scrollIntoView({ behavior: "smooth", block: "center" });
+                  }, 100);
+                }
+              }}
             />
           )}
         </DialogContent>
@@ -152,6 +178,7 @@ function EventTicketsBody({
   fmt,
   renderPayment,
   onAddedToCart,
+  hasAddons,
   loginPath,
   membershipPath,
 }: {
@@ -160,6 +187,7 @@ function EventTicketsBody({
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
   onAddedToCart?: () => void;
+  hasAddons?: boolean;
   loginPath?: string;
   membershipPath?: string;
 }) {
@@ -173,6 +201,7 @@ function EventTicketsBody({
           event={event}
           fmt={fmt}
           onAddedToCart={onAddedToCart}
+          hasAddons={hasAddons}
           loginPath={loginPath}
           membershipPath={membershipPath}
         />
@@ -232,6 +261,7 @@ function TicketStep({
   event,
   fmt,
   onAddedToCart,
+  hasAddons,
   loginPath,
   membershipPath,
 }: {
@@ -239,6 +269,7 @@ function TicketStep({
   event: IEvent;
   fmt: (n: number) => string;
   onAddedToCart?: () => void;
+  hasAddons?: boolean;
   loginPath?: string;
   membershipPath?: string;
 }) {
@@ -533,21 +564,37 @@ function TicketStep({
       </div>
 
       {c.error && <p style={{ color: "#ef4444", fontSize: 14, marginTop: 12 }}>{c.error}</p>}
-      <ActionBar
-        c={c}
-        fmt={fmt}
-        onNext={c.goToDetails}
-        nextLabel="Continue"
-        // Buying tickets alone still goes straight down the untouched
-        // per-event flow; this exit exists so the buyer can go add merch and
-        // come back with the selection intact.
-        secondary={{
-          label: c.ticketsInCart ? "Update cart" : "Add to cart",
-          onClick: () => {
+      {/* Two shapes of this bar. With add-ons on the page, the PRIMARY action
+          is the cart: that is the only path that unlocks the add-on grid, so
+          it has to be the happy path, with a direct tickets-only checkout as
+          the secondary exit. Without add-ons the original flow is untouched:
+          Continue goes straight to details, the cart is the secondary exit. */}
+      {hasAddons ? (
+        <ActionBar
+          c={c}
+          fmt={fmt}
+          onNext={() => {
             if (c.addTicketsToCart()) onAddedToCart?.();
-          },
-        }}
-      />
+          }}
+          nextLabel={c.ticketsInCart ? "Update cart & choose add-ons" : "Continue to add-ons"}
+          nextTestId="tickets-add-to-cart"
+          secondary={{ label: "Checkout tickets only", onClick: c.goToDetails, testId: "tickets-checkout-only" }}
+        />
+      ) : (
+        <ActionBar
+          c={c}
+          fmt={fmt}
+          onNext={c.goToDetails}
+          nextLabel="Continue"
+          secondary={{
+            label: c.ticketsInCart ? "Update cart" : "Add to cart",
+            onClick: () => {
+              if (c.addTicketsToCart()) onAddedToCart?.();
+            },
+            testId: "tickets-add-to-cart",
+          }}
+        />
+      )}
     </div>
   );
 }
@@ -692,7 +739,13 @@ function DetailsStep({
         fmt={fmt}
         onBack={() => c.setStep("tickets")}
         onNext={onContinue}
-        nextLabel={c.isProcessing ? "Processing…" : "Continue to payment"}
+        // Nothing to pay means no payment step follows, so promising one is a
+        // lie the next screen immediately contradicts. Read off `totalAmount`
+        // rather than the ticket prices because it already carries the booking
+        // fee and any discount: a free ticket with a FLAT booking fee still
+        // costs money and still goes to payment, and a 100%-off code on a paid
+        // ticket does not.
+        nextLabel={c.isProcessing ? "Processing…" : c.totalAmount > 0 ? "Continue to payment" : "Confirm"}
         nextDisabled={c.isProcessing}
       />
     </div>
@@ -865,6 +918,7 @@ function ActionBar({
   onNext,
   nextLabel,
   nextDisabled,
+  nextTestId,
   secondary,
 }: {
   c: Checkout;
@@ -873,8 +927,11 @@ function ActionBar({
   onNext: () => void;
   nextLabel: string;
   nextDisabled?: boolean;
-  /** Extra exit shown next to Back — "Add to cart" on the selection step. */
-  secondary?: { label: string; onClick: () => void };
+  /** Test id for the primary button; the caller says which button is which
+      action, because add-to-cart moves between slots depending on add-ons. */
+  nextTestId?: string;
+  /** Extra exit shown next to Back on the selection step. */
+  secondary?: { label: string; onClick: () => void; testId?: string };
 }) {
   const theme = useForgeTheme();
   return (
@@ -904,7 +961,7 @@ function ActionBar({
       </div>
       <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
         {secondary ? (
-          <button data-testid="tickets-add-to-cart" onClick={secondary.onClick} style={secondaryButtonStyle(theme)}>
+          <button data-testid={secondary.testId} onClick={secondary.onClick} style={secondaryButtonStyle(theme)}>
             {secondary.label}
           </button>
         ) : (
@@ -912,7 +969,12 @@ function ActionBar({
             Back
           </button>
         )}
-        <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>
+        <button
+          data-testid={nextTestId}
+          onClick={onNext}
+          disabled={nextDisabled}
+          style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}
+        >
           {nextLabel}
         </button>
       </div>