@tribe-nest/forge 3.21.0 → 3.22.0

package/src/ui/styled/EventDetail.tsx

@@ -1,6 +1,6 @@
 import { Calendar, MapPin } from "lucide-react";
 import type { IEvent } from "../../types/models";
-import { useEvent } from "../../data/queries/useEvents";
+import { usePresaleCode } from "../headless/event/usePresaleCode";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
@@ -11,6 +11,7 @@ import { EventTickets } from "./EventTickets";
 import { EventCountdown } from "./EventCountdown";
 import { EventWaitlist } from "./EventWaitlist";
 import { AddToCalendar } from "./AddToCalendar";
+import { PresaleCodeField } from "./PresaleCode";
 
 export interface EventDetailProps {
   /** Event slug (resolves the event). */
@@ -59,7 +60,11 @@ export function EventDetail({
   const t = useThemeTokens();
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
-  const { data: event, isLoading } = useEvent(slug, { initialData: initialEvent });
+  // Read the event THROUGH the presale field: it is the same query, fetched
+  // with whatever code this buyer has applied, so `tickets` below already
+  // contains the tiers that code unlocked.
+  const presale = usePresaleCode(slug, { initialEvent });
+  const { event, isLoading } = presale;
 
   if (isLoading) return <Loading fullPage />;
   if (!event) return <p>Event not found.</p>;
@@ -116,6 +121,11 @@ export function EventDetail({
               end={event.endDateTime}
               description={event.description}
               location={locationText}
+              // The platform's own `.ics`, which is what makes an Apple option
+              // possible at all. Absent on an older API build, in which case
+              // the control quietly falls back to the three template providers.
+              icsUrl={event.calendarUrl}
+              webcalUrl={event.calendarWebcalUrl}
               style={{ marginTop: 16 }}
             />
           )}
@@ -133,7 +143,12 @@ export function EventDetail({
           <EventWaitlist event={event} style={{ marginTop: 24 }} />
         </div>
 
-        {event.tickets.length > 0 && (
+        {/* The card also appears for an event with NO visible tickets when a
+            presale is the only thing on sale (1.2). Every tier hidden behind a
+            code makes `tickets` empty, so gating the card on the tier list alone
+            left a presale-only event with no box, no button and nothing to do —
+            which is the shape most presales are announced in. */}
+        {(event.tickets.length > 0 || presale.visible) && (
           <aside
             className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
             style={{
@@ -143,27 +158,43 @@ export function EventDetail({
               background: t.surface,
             }}
           >
-            <span style={{ fontWeight: 600 }}>
-              From{" "}
-              <PriceDisplay amount={minPrice} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
-            </span>
-            {/* The cheapest tier is the number a buyer anchors on, and until now
-                it was the whole story they were given — the artist's booking fee
-                was added at checkout and named nowhere. There is no selection
-                here, so there is no amount to quote; the RULE is what makes the
-                "From" figure honest. Renders nothing when no fee is charged. */}
-            {feeNote && (
-              <span data-testid="booking-fee-note" style={{ fontSize: 12, opacity: 0.65 }}>
-                {feeNote}
+            {/* Above the price, because on a presale-only event it is the only
+                way to reach one. Renders nothing on an event with no coded
+                tier. */}
+            <PresaleCodeField presale={presale} />
+            {event.tickets.length === 0 && (
+              <span style={{ fontSize: 13, opacity: 0.7 }}>
+                Tickets for this event are presale only.
               </span>
             )}
-            <EventTickets
-              slug={slug}
-              triggerText="Buy tickets"
-              formatAmount={fmt}
-              finalisePath={finalisePath}
-              onComplete={onComplete}
-            />
+            {event.tickets.length > 0 && (
+              <>
+                <span style={{ fontWeight: 600 }}>
+                  From{" "}
+                  <PriceDisplay amount={minPrice} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
+                </span>
+                {/* The cheapest tier is the number a buyer anchors on, and until
+                    now it was the whole story they were given — the artist's
+                    booking fee was added at checkout and named nowhere. There is
+                    no selection here, so there is no amount to quote; the RULE is
+                    what makes the "From" figure honest. Renders nothing when no
+                    fee is charged, and nothing at all with no price to qualify. */}
+                {feeNote && (
+                  <span data-testid="booking-fee-note" style={{ fontSize: 12, opacity: 0.65 }}>
+                    {feeNote}
+                  </span>
+                )}
+              </>
+            )}
+            {event.tickets.length > 0 && (
+              <EventTickets
+                slug={slug}
+                triggerText="Buy tickets"
+                formatAmount={fmt}
+                finalisePath={finalisePath}
+                onComplete={onComplete}
+              />
+            )}
           </aside>
         )}
       </div>

package/src/ui/styled/EventTickets.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useState } from "react";
-import { AlertCircle, Clock, X } from "lucide-react";
+import { AlertCircle, Clock, KeyRound, X } from "lucide-react";
 import type { IEvent, ITicket } from "../../types/models";
 import { useEventCheckout } from "../headless/event/useEventCheckout";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
@@ -10,7 +10,10 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
+import { MembershipGateNotice } from "./MembershipGateNotice";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
+import { PresaleCodeField } from "./PresaleCode";
+import { HoldNotice } from "./HoldNotice";
 import {
   DialogRoot,
   DialogTrigger,
@@ -34,6 +37,13 @@ export interface EventTicketsProps {
   finalisePath?: (slug: string, orderId: string) => string;
   /** Host-owned navigation on FREE completion (e.g. router navigate). */
   onComplete?: (info: { slug: string; orderId: string }) => void;
+  /**
+   * Where a members-only tier sends a signed-OUT visitor. Default `/login`;
+   * code sites mount theirs under `/i`. The sign-in returns them here.
+   */
+  loginPath?: string;
+  /** Where a members-only tier sends a signed-in NON-member — the tier listing. */
+  membershipPath?: string;
 }
 
 /** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
@@ -51,6 +61,8 @@ export function EventTickets({
   renderPayment,
   finalisePath,
   onComplete,
+  loginPath,
+  membershipPath,
 }: EventTicketsProps) {
   const theme = useForgeTheme();
   const registered = usePaymentRenderer();
@@ -109,6 +121,8 @@ export function EventTickets({
               event={c.event}
               fmt={fmt}
               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)}
@@ -128,19 +142,34 @@ function EventTicketsBody({
   fmt,
   renderPayment,
   onAddedToCart,
+  loginPath,
+  membershipPath,
 }: {
   c: Checkout;
   event: IEvent;
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
   onAddedToCart?: () => void;
+  loginPath?: string;
+  membershipPath?: string;
 }) {
   const stepIndex = c.step === "tickets" ? 0 : c.step === "details" ? 1 : 2;
   return (
     <div style={{ width: "100%" }}>
       <Progress current={stepIndex} />
-      {c.step === "tickets" && <TicketStep c={c} event={event} fmt={fmt} onAddedToCart={onAddedToCart} />}
-      {c.step === "details" && <DetailsStep c={c} event={event} fmt={fmt} />}
+      {c.step === "tickets" && (
+        <TicketStep
+          c={c}
+          event={event}
+          fmt={fmt}
+          onAddedToCart={onAddedToCart}
+          loginPath={loginPath}
+          membershipPath={membershipPath}
+        />
+      )}
+      {c.step === "details" && (
+        <DetailsStep c={c} event={event} fmt={fmt} loginPath={loginPath} membershipPath={membershipPath} />
+      )}
       {c.step === "payment" && <PaymentStep c={c} fmt={fmt} renderPayment={renderPayment} />}
     </div>
   );
@@ -193,11 +222,15 @@ function TicketStep({
   event,
   fmt,
   onAddedToCart,
+  loginPath,
+  membershipPath,
 }: {
   c: Checkout;
   event: IEvent;
   fmt: (n: number) => string;
   onAddedToCart?: () => void;
+  loginPath?: string;
+  membershipPath?: string;
 }) {
   const theme = useForgeTheme();
   // Inclusive stores caption ticket prices as tax-inclusive (display only).
@@ -233,6 +266,11 @@ function TicketStep({
   return (
     <div>
       <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>Select Tickets</h2>
+      {/* Renders nothing on an event with no coded tier (1.2). Here as well as
+          on the page because this modal is reachable on its own — from an offer,
+          and from the broadcast-pass prompt — where there is no page-level box.
+          Both read the SAME stored code, so unlocking in one unlocks the other. */}
+      <PresaleCodeField presale={c.presale} style={{ marginBottom: 16 }} />
       <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         {event.tickets.length === 0 && <p style={{ opacity: 0.7 }}>No tickets available.</p>}
         {event.tickets.map((ticket) => {
@@ -242,6 +280,17 @@ function TicketStep({
           const isSoldOut = remaining <= 0;
           const u = urgency(ticket.expiresAt);
           const isExpired = !!u?.expired;
+          /**
+           * A members-only tier the buyer cannot have (S.4).
+           *
+           * The event-level gate applies to EVERY tier — "no ticket to this show
+           * sells to a non-member" — so it is folded in here rather than drawn
+           * once at the top: a buyer reading one tier row must be able to tell
+           * from that row whether they can buy it.
+           */
+          const gate =
+            event.membershipGate && !event.membershipGate.allowed ? event.membershipGate : ticket.membershipGate;
+          const isGated = !!gate && !gate.allowed;
           const borderColor = isExpired ? "#ef4444" : u && !u.expired ? a(u.color, 0.5) : a(theme.colors.primary, 0.25);
           return (
             <div
@@ -257,6 +306,32 @@ function TicketStep({
               <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
                 <div style={{ flex: 1 }}>
                   <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 6 }}>{ticket.title}</h3>
+                  {/* A hidden tier is only ever on screen because a code
+                      revealed it — so say so. Without the badge, a code that
+                      unlocked a tier the buyer had not seen listed looks like it
+                      did nothing. */}
+                  {ticket.isHidden && (
+                    <div
+                      data-testid="presale-tier-badge"
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "2px 8px",
+                        borderRadius: 6,
+                        fontSize: 12,
+                        fontWeight: 700,
+                        marginBottom: 6,
+                        marginRight: 6,
+                        background: a(theme.colors.primary, 0.1),
+                        color: theme.colors.primary,
+                        border: `1px solid ${a(theme.colors.primary, 0.3)}`,
+                      }}
+                    >
+                      <KeyRound size={12} />
+                      Presale
+                    </div>
+                  )}
                   {u && !u.expired && (
                     <div
                       style={{
@@ -305,7 +380,12 @@ function TicketStep({
                   </span>
                   <button
                     onClick={() => setQty(ticket, selectedQty + 1)}
-                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired}
+                    // A gated tier cannot be added. Not because the client is
+                    // the authority — `createOrder` refuses it regardless — but
+                    // because letting a buyer build a cart the server will not
+                    // sell is precisely the "discoverable only by failing"
+                    // journey this change exists to end.
+                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired || isGated}
                     style={stepperStyle(theme, true)}
                   >
                     +
@@ -329,6 +409,17 @@ function TicketStep({
               {ticket.description && (
                 <p dangerouslySetInnerHTML={{ __html: ticket.description }} style={{ marginTop: 12, fontSize: 14 }} />
               )}
+              {/* Named on the TIER, before the buyer has typed anything. The
+                  tier stays in the list on purpose — hiding it kills the upsell
+                  — so this is what turns "visible but mysteriously unbuyable"
+                  into an offer with a way in. */}
+              <MembershipGateNotice
+                gate={gate}
+                variant="badge"
+                itemLabel={event.membershipGate && !event.membershipGate.allowed ? "This event" : "This ticket"}
+                loginPath={loginPath}
+                membershipPath={membershipPath}
+              />
               {isExpired && (
                 <div
                   style={{
@@ -375,7 +466,19 @@ function TicketStep({
 }
 
 // ── Step 2: buyer details + questionnaire ─────────────────────────────────────
-function DetailsStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: number) => string }) {
+function DetailsStep({
+  c,
+  event,
+  fmt,
+  loginPath,
+  membershipPath,
+}: {
+  c: Checkout;
+  event: IEvent;
+  fmt: (n: number) => string;
+  loginPath?: string;
+  membershipPath?: string;
+}) {
   const theme = useForgeTheme();
   const [confirmEmail, setConfirmEmail] = useState("");
   const [answers, setAnswers] = useState<Record<string, string>>({});
@@ -451,6 +554,50 @@ function DetailsStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: n
           </div>
         )}
 
+        {/* The refusal path. It should be unreachable now that the tier itself
+            is badged, but a membership can lapse mid-checkout and a page can be
+            served from cache — and when it happens the buyer gets the tier's
+            name and a way in, not a red line reading "Something went wrong."
+            `c.error` is deliberately not set for this case, so the two cannot
+            both draw. */}
+        <MembershipGateNotice
+          refusal={c.gateRefusal}
+          variant="card"
+          itemLabel="This ticket"
+          loginPath={loginPath}
+          membershipPath={membershipPath}
+          style={{ marginTop: 4 }}
+        />
+
+        {c.attendeeSlots.length > 0 && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 4 }}>
+            <div>
+              <h3 style={{ fontSize: 16, fontWeight: 700 }}>Who is coming?</h3>
+              <p style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>
+                This event prints each attendee&rsquo;s name on their own pass, so the door list matches who
+                actually turns up.
+              </p>
+            </div>
+            {c.attendeeSlots.map((slot) => (
+              <label
+                key={`${slot.ticketId}-${slot.index}`}
+                style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}
+              >
+                <span>
+                  {slot.label}
+                  {slot.isBuyer && <span style={{ opacity: 0.6 }}> — that&rsquo;s you</span>}
+                </span>
+                <input
+                  placeholder="Full name"
+                  value={slot.value}
+                  onChange={(e) => c.setAttendee(slot.ticketId, slot.index, e.target.value)}
+                  style={inputStyle(theme)}
+                />
+              </label>
+            ))}
+          </div>
+        )}
+
         {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
       </div>
       <ActionBar
@@ -484,6 +631,10 @@ function PaymentStep({
     <div>
       <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Payment</h2>
       <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>Complete your purchase to secure your tickets.</p>
+      {/* The reservation clock. Event ticket holds are taken unconditionally —
+          no feature switch — so this is the one checkout where the countdown
+          fires for every profile, and it was the one that did not render it. */}
+      <HoldNotice hold={c.hold} expiredMessage={c.error ?? undefined} style={{ marginBottom: 16 }} />
       <div
         style={{
           padding: 20,

package/src/ui/styled/HoldNotice.tsx

@@ -0,0 +1,192 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Clock, TimerOff } from "lucide-react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import type { InventoryHoldState } from "../headless/checkout/useInventoryHold";
+
+/** Append an alpha to a 6-digit hex colour (mirrors the other styled blocks). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+export interface HoldNoticeProps {
+  /** The countdown state from `useInventoryHold`. */
+  hold: InventoryHoldState;
+  /**
+   * The server's own words for a 409 `INVENTORY_HOLD_EXPIRED`. Empty/undefined
+   * while nothing has been refused. When set it OUTRANKS the countdown: the
+   * server has spoken and the clock on this device is no longer the story.
+   */
+  expiredMessage?: string;
+  /** Re-take the reservation on the same order. Renders the primary action. */
+  onRetry?: () => void;
+  /** True while a retry is in flight. */
+  isRetrying?: boolean;
+  /** Optional escape hatch ("Change selection", "Back to cart"). */
+  secondaryAction?: { label: string; onClick: () => void };
+  /** What is being held, for the copy. Defaults to "items". */
+  noun?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The reservation, told to the buyer.
+ *
+ * Three states, and they are three different facts:
+ *
+ *  1. **Running** — "Reserved for you · 8:14 left". Quiet by default, insistent
+ *     under two minutes. Only drawn when a hold actually exists; a profile with
+ *     inventory holds switched off, a digital-only cart and an already-settled
+ *     free order all report no hold and get nothing, which is today's page.
+ *  2. **Lapsed on this device** — the clock reached zero. It does not sit on
+ *     "0:00": it changes what it says, because a timer that finishes and then
+ *     says nothing has raised an alarm and refused to explain it. It also does
+ *     not claim the items are gone — this device's clock does not know that.
+ *  3. **Refused by the server** (409) — the reservation is definitively over.
+ *     The message is the API's own, already localised, and it is distinct from
+ *     sold-out on purpose: the units are very often still there, and the retry
+ *     below re-acquires exactly the same ones.
+ *
+ * Every colour comes from the theme. The urgent/expired states use the theme's
+ * `secondary` (falling back to `primary`) rather than a hardcoded red, because
+ * an artist's site is their brand and a stock crimson is wrong on most of them.
+ */
+export function HoldNotice({
+  hold,
+  expiredMessage,
+  onRetry,
+  isRetrying,
+  secondaryAction,
+  noun = "items",
+  style,
+}: HoldNoticeProps): ReactNode {
+  const theme = useForgeTheme();
+  const accent = theme.colors.secondary ?? theme.colors.primary;
+
+  const isExpired = !!expiredMessage || hold.hasLapsed;
+  if (!isExpired && !hold.isHeld) return null;
+
+  const shellStyle: CSSProperties = {
+    position: "relative",
+    display: "flex",
+    gap: 12,
+    alignItems: "flex-start",
+    padding: "12px 14px",
+    marginBottom: 16,
+    border: `1px solid ${a(isExpired || hold.isUrgent ? accent : theme.colors.primary, isExpired ? 0.5 : 0.28)}`,
+    backgroundColor: a(isExpired || hold.isUrgent ? accent : theme.colors.primary, isExpired ? 0.1 : 0.06),
+    borderRadius: theme.cornerRadius,
+    color: theme.colors.text,
+    fontFamily: theme.fontFamily,
+    ...style,
+  };
+
+  if (isExpired) {
+    return (
+      <div data-testid="hold-expired" role="alert" style={shellStyle}>
+        <TimerOff size={18} style={{ marginTop: 2, flexShrink: 0, color: accent }} aria-hidden />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <p style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
+            {expiredMessage ? "Your reservation expired" : "Your reservation has ended"}
+          </p>
+          <p style={{ fontSize: 13, opacity: 0.8, margin: "4px 0 0" }}>
+            {/* The server's message names the right noun and the right verb
+                tense; ours only stands in before it has spoken. */}
+            {expiredMessage ??
+              `These ${noun} are no longer held for you. Try again to reserve them — they may well still be available.`}
+          </p>
+          {(onRetry || secondaryAction) && (
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
+              {onRetry && (
+                <button
+                  type="button"
+                  data-testid="hold-retry"
+                  onClick={onRetry}
+                  disabled={isRetrying}
+                  style={{
+                    padding: "8px 14px",
+                    fontSize: 14,
+                    fontWeight: 600,
+                    cursor: isRetrying ? "default" : "pointer",
+                    opacity: isRetrying ? 0.6 : 1,
+                    border: "none",
+                    backgroundColor: theme.colors.primary,
+                    color: theme.colors.textPrimary ?? readableTextOn(theme.colors.primary),
+                    borderRadius: theme.cornerRadius,
+                    fontFamily: theme.fontFamily,
+                  }}
+                >
+                  {isRetrying ? "Reserving…" : "Try again"}
+                </button>
+              )}
+              {secondaryAction && (
+                <button
+                  type="button"
+                  data-testid="hold-secondary"
+                  onClick={secondaryAction.onClick}
+                  style={{
+                    padding: "8px 14px",
+                    fontSize: 14,
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    background: "transparent",
+                    border: `1px solid ${theme.colors.primary}`,
+                    color: theme.colors.primary,
+                    borderRadius: theme.cornerRadius,
+                    fontFamily: theme.fontFamily,
+                  }}
+                >
+                  {secondaryAction.label}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="hold-countdown"
+      // Polite, not assertive: this updates every second and an assertive live
+      // region would have a screen reader interrupt itself all the way down.
+      // The number is re-read only when it is worth hearing (see below).
+      style={shellStyle}
+    >
+      <Clock size={18} style={{ marginTop: 2, flexShrink: 0, color: hold.isUrgent ? accent : theme.colors.primary }} aria-hidden />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <p style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
+          {`Reserved for you · `}
+          <span data-testid="hold-countdown-value" style={{ fontVariantNumeric: "tabular-nums" }}>
+            {hold.label}
+          </span>
+          {` left`}
+        </p>
+        <p style={{ fontSize: 13, opacity: 0.75, margin: "4px 0 0" }}>
+          {hold.isUrgent
+            ? `Complete payment soon — after this your ${noun} go back on sale.`
+            : `We're holding your ${noun} while you pay.`}
+        </p>
+      </div>
+      {/* A screen reader gets a stable sentence rather than a per-second
+          barrage: the visible digits tick, this announces the minute. */}
+      <span
+        aria-live="polite"
+        style={{
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0 0 0 0)",
+          whiteSpace: "nowrap",
+          border: 0,
+        }}
+      >
+        {hold.secondsRemaining != null && hold.secondsRemaining % 60 === 0
+          ? `${Math.round(hold.secondsRemaining / 60)} minutes left to complete payment`
+          : ""}
+      </span>
+    </div>
+  );
+}