@tribe-nest/forge 3.54.0 → 3.58.0

package/src/ui/styled/Cart.tsx

@@ -8,6 +8,7 @@ import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { CartLineOptions } from "./CartLineOptions";
+import { internalPath } from "../../runtime/pages";
 
 export interface CartProps {
   /** Custom cart icon (defaults to a shopping bag). */
@@ -122,114 +123,178 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
         )}
       </button>
 
-      {isCartOpen && typeof document !== "undefined" && createPortal(
-        <>
-          <style>{KEYFRAMES}</style>
-          <div
-            onClick={() => setCartOpen(false)}
-            aria-label={translate("forge.cart.aria_close")}
-            style={{ position: "fixed", inset: 0, zIndex: OVERLAY_Z, background: "rgba(0,0,0,0.3)" }}
-          />
-          <aside
-            style={{
-              position: "fixed",
-              top: 0,
-              right: 0,
-              height: "100%",
-              width: "100%",
-              maxWidth: 420,
-              zIndex: DRAWER_Z,
-              background: t.background,
-              color: t.text,
-              borderLeft: `2px solid ${t.primary}`,
-              boxShadow: "-8px 0 30px -20px rgba(0,0,0,0.5)",
-              display: "flex",
-              flexDirection: "column",
-              fontFamily: t.fontFamily,
-              animation: "forge-cart-slide .3s cubic-bezier(.4,0,.2,1)",
-            }}
-          >
+      {isCartOpen &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <>
+            <style>{KEYFRAMES}</style>
             <div
+              onClick={() => setCartOpen(false)}
+              aria-label={translate("forge.cart.aria_close")}
+              style={{ position: "fixed", inset: 0, zIndex: OVERLAY_Z, background: "rgba(0,0,0,0.3)" }}
+            />
+            <aside
               style={{
+                position: "fixed",
+                top: 0,
+                right: 0,
+                height: "100%",
+                width: "100%",
+                maxWidth: 420,
+                zIndex: DRAWER_Z,
+                background: t.background,
+                color: t.text,
+                borderLeft: `2px solid ${t.primary}`,
+                boxShadow: "-8px 0 30px -20px rgba(0,0,0,0.5)",
                 display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                padding: 16,
-                borderBottom: `1px solid ${t.border}`,
+                flexDirection: "column",
+                fontFamily: t.fontFamily,
+                animation: "forge-cart-slide .3s cubic-bezier(.4,0,.2,1)",
               }}
             >
-              <h2 style={{ fontSize: 18, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>
-                {translate("forge.cart.title")}
-              </h2>
-              <button
-                type="button"
-                onClick={() => setCartOpen(false)}
-                aria-label={translate("forge.cart.aria_close")}
-                style={{ background: "transparent", border: "none", cursor: "pointer", color: t.text }}
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: 16,
+                  borderBottom: `1px solid ${t.border}`,
+                }}
               >
-                <X size={22} />
-              </button>
-            </div>
+                <h2 style={{ fontSize: 18, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>
+                  {translate("forge.cart.title")}
+                </h2>
+                <button
+                  type="button"
+                  onClick={() => setCartOpen(false)}
+                  aria-label={translate("forge.cart.aria_close")}
+                  style={{ background: "transparent", border: "none", cursor: "pointer", color: t.text }}
+                >
+                  <X size={22} />
+                </button>
+              </div>
 
-            <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 16 }}>
-              {count === 0 && (
-                <p style={{ textAlign: "center", opacity: 0.7 }}>{translate("forge.cart.empty_title")}</p>
-              )}
+              <div
+                style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 16 }}
+              >
+                {count === 0 && (
+                  <p style={{ textAlign: "center", opacity: 0.7 }}>{translate("forge.cart.empty_title")}</p>
+                )}
 
-              {ticketItems.map((ticket) => (
-                <div
-                  key={ticket.eventId}
-                  data-testid="cart-ticket-line"
-                  style={{
-                    display: "flex",
-                    gap: 12,
-                    alignItems: "flex-start",
-                    borderBottom: `1px solid ${t.border}`,
-                    paddingBottom: 16,
-                    position: "relative",
-                  }}
-                >
-                  <img
-                    src={ticket.coverImage || undefined}
-                    alt={ticket.eventTitle}
+                {ticketItems.map((ticket) => (
+                  <div
+                    key={ticket.eventId}
+                    data-testid="cart-ticket-line"
                     style={{
-                      width: 64,
-                      height: 64,
-                      objectFit: "cover",
-                      borderRadius: t.cornerRadius,
-                      background: `${t.primary}10`,
-                      flexShrink: 0,
+                      display: "flex",
+                      gap: 12,
+                      alignItems: "flex-start",
+                      borderBottom: `1px solid ${t.border}`,
+                      paddingBottom: 16,
+                      position: "relative",
                     }}
-                  />
-                  <div style={{ flex: 1, minWidth: 0, paddingRight: 28 }}>
-                    <div style={{ fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                      {ticket.eventTitle}
-                    </div>
-                    {Object.entries(ticket.tickets).map(([id, qty]) => (
-                      <div key={id} style={{ fontSize: 12, marginTop: 4, opacity: 0.75 }}>
-                        {translate("forge.cart.ticket_line", {
-                          ticket_title: ticket.ticketMeta[id]?.title ?? translate("forge.cart.ticket_fallback_title"),
-                          quantity: qty,
-                        })}
+                  >
+                    <img
+                      src={ticket.coverImage || undefined}
+                      alt={ticket.eventTitle}
+                      style={{
+                        width: 64,
+                        height: 64,
+                        objectFit: "cover",
+                        borderRadius: t.cornerRadius,
+                        background: `${t.primary}10`,
+                        flexShrink: 0,
+                      }}
+                    />
+                    <div style={{ flex: 1, minWidth: 0, paddingRight: 28 }}>
+                      <div
+                        style={{ fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                      >
+                        {ticket.eventTitle}
                       </div>
-                    ))}
-                    <div style={{ fontSize: 14, marginTop: 4, opacity: 0.8 }}>{fmt(ticketTotal(ticket))}</div>
+                      {Object.entries(ticket.tickets).map(([id, qty]) => {
+                        // A reserved-seating tier: its quantity is its seat
+                        // count, so the seats are listed by name and there is
+                        // no stepper. Changing them happens on the event page,
+                        // where the map is.
+                        const seats = ticket.ticketMeta[id]?.seats ?? [];
+                        return (
+                          <div key={id}>
+                            <div style={{ fontSize: 12, marginTop: 4, opacity: 0.75 }}>
+                              {translate("forge.cart.ticket_line", {
+                                ticket_title:
+                                  ticket.ticketMeta[id]?.title ?? translate("forge.cart.ticket_fallback_title"),
+                                quantity: qty,
+                              })}
+                            </div>
+                            {seats.length > 0 && (
+                              <div
+                                data-testid="cart-seat-chips"
+                                style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 4 }}
+                              >
+                                {seats.map((seat) => (
+                                  <span
+                                    key={seat.id}
+                                    data-testid="cart-seat-chip"
+                                    style={{
+                                      padding: "2px 8px",
+                                      borderRadius: 999,
+                                      background: `${t.primary}14`,
+                                      color: t.text,
+                                      fontSize: 11,
+                                      lineHeight: 1.4,
+                                    }}
+                                  >
+                                    {seat.label}
+                                  </span>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                      {Object.values(ticket.ticketMeta).some((meta) => (meta.seats?.length ?? 0) > 0) && (
+                        <a
+                          href={internalPath("events/$slug", { slug: ticket.eventSlug || ticket.eventId })}
+                          data-testid="cart-change-seats"
+                          onClick={() => setCartOpen(false)}
+                          style={{
+                            display: "inline-block",
+                            fontSize: 12,
+                            marginTop: 6,
+                            color: t.primary,
+                            textDecoration: "underline",
+                          }}
+                        >
+                          {translate("forge.cart.change_seats")}
+                        </a>
+                      )}
+                      <div style={{ fontSize: 14, marginTop: 4, opacity: 0.8 }}>{fmt(ticketTotal(ticket))}</div>
+                    </div>
+                    <button
+                      type="button"
+                      // Removing the ticket takes its add-ons with it — they
+                      // cannot be bought on their own, and leaving them would
+                      // produce a checkout the server refuses.
+                      onClick={() => removeTickets(ticket.eventId)}
+                      aria-label={translate("forge.cart.aria_remove_tickets")}
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: t.primary,
+                        padding: 4,
+                      }}
+                    >
+                      <Trash2 size={16} />
+                    </button>
                   </div>
-                  <button
-                    type="button"
-                    // Removing the ticket takes its add-ons with it — they
-                    // cannot be bought on their own, and leaving them would
-                    // produce a checkout the server refuses.
-                    onClick={() => removeTickets(ticket.eventId)}
-                    aria-label={translate("forge.cart.aria_remove_tickets")}
-                    style={{ position: "absolute", top: 0, right: 0, background: "transparent", border: "none", cursor: "pointer", color: t.primary, padding: 4 }}
-                  >
-                    <Trash2 size={16} />
-                  </button>
-                </div>
-              ))}
+                ))}
 
-              {cartItems.map((item) => (
+                {cartItems.map((item) => (
                   <div
                     key={item.productId + item.productVariantId + String(item.isGift) + (item.recipientEmail || "")}
                     // Named so a test can assert on the LINE rather than the
@@ -300,55 +365,66 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                       type="button"
                       onClick={() => removeFromCart(item.productVariantId, item.isGift, item.recipientEmail)}
                       aria-label={translate("forge.cart.aria_remove_item")}
-                      style={{ position: "absolute", top: 0, right: 0, background: "transparent", border: "none", cursor: "pointer", color: t.primary, padding: 4 }}
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: t.primary,
+                        padding: 4,
+                      }}
                     >
                       <Trash2 size={16} />
                     </button>
                   </div>
                 ))}
-            </div>
+              </div>
 
-            {count > 0 && (
-              <div
-                style={{
-                  padding: 16,
-                  borderTop: `1px solid ${t.border}`,
-                  background: t.background,
-                }}
-              >
-                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
-                  <span style={{ fontSize: 18, fontWeight: 600 }}>{translate("forge.cart.total")}</span>
-                  <span style={{ fontSize: 18, fontWeight: 800, color: t.primary, textAlign: "right" }}>
-                    {fmt(total)}
-                    {pricesIncludeTax && (
-                      <span style={{ display: "block", fontSize: 11, fontWeight: 400, color: t.text, opacity: 0.65 }}>
-                        {translate("forge.cart.incl_tax")}
-                      </span>
-                    )}
-                  </span>
-                </div>
-                <button
-                  type="button"
-                  onClick={goCheckout}
+              {count > 0 && (
+                <div
                   style={{
-                    width: "100%",
-                    padding: "12px 16px",
-                    borderRadius: t.cornerRadius,
-                    border: "none",
-                    fontWeight: 700,
-                    cursor: "pointer",
-                    background: t.primary,
-                    color: onPrimary,
+                    padding: 16,
+                    borderTop: `1px solid ${t.border}`,
+                    background: t.background,
                   }}
                 >
-                  {translate("forge.cart.checkout")}
-                </button>
-              </div>
-            )}
-          </aside>
-        </>,
-        document.body,
-      )}
+                  <div
+                    style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}
+                  >
+                    <span style={{ fontSize: 18, fontWeight: 600 }}>{translate("forge.cart.total")}</span>
+                    <span style={{ fontSize: 18, fontWeight: 800, color: t.primary, textAlign: "right" }}>
+                      {fmt(total)}
+                      {pricesIncludeTax && (
+                        <span style={{ display: "block", fontSize: 11, fontWeight: 400, color: t.text, opacity: 0.65 }}>
+                          {translate("forge.cart.incl_tax")}
+                        </span>
+                      )}
+                    </span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={goCheckout}
+                    style={{
+                      width: "100%",
+                      padding: "12px 16px",
+                      borderRadius: t.cornerRadius,
+                      border: "none",
+                      fontWeight: 700,
+                      cursor: "pointer",
+                      background: t.primary,
+                      color: onPrimary,
+                    }}
+                  >
+                    {translate("forge.cart.checkout")}
+                  </button>
+                </div>
+              )}
+            </aside>
+          </>,
+          document.body,
+        )}
     </>
   );
 }