@tribe-nest/forge 1.13.0

package/src/ui/styled/CourseCheckout.tsx

@@ -0,0 +1,425 @@
+import { type CSSProperties, type ReactNode, useMemo, useState } from "react";
+import { X } from "lucide-react";
+import type { PublicCourse, QuestionnaireQuestion } from "../../types/models";
+import { useCourseCheckout } from "../headless/course/useCourseCheckout";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { summarizeTaxQuote } from "../format/PriceDisplay";
+import { Loading } from "./Loading";
+import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
+import { buttonStyle } from "./Button";
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from "../headless/dialog";
+
+export interface CourseCheckoutProps {
+  /** Course slug (resolves the course + drives the purchase flow). */
+  slug?: string;
+  /** Trigger button label. */
+  triggerText?: string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  /** Optional payment renderer — falls back to a registered <ForgePaymentProvider>. */
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+  /** Stripe return URL for a PAID enrollment. Default `/i/courses/:slug/finalise`. */
+  finalisePath?: (slug: string, bookingId: string) => string;
+  /** Host-owned navigation on FREE completion (e.g. router navigate). */
+  onComplete?: (info: { slug: string; bookingId: string }) => void;
+}
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+/**
+ * Themed course purchase — an "Enroll" trigger + modal running the two-step flow
+ * (buyer details → payment) on `useCourseCheckout`. Port of the client app's
+ * CoursePurchaseModal, styled from `ForgeThemeProvider`. Free courses skip
+ * payment and auto-redirect to the finalise page inside the hook.
+ */
+export function CourseCheckout({
+  slug,
+  triggerText = "Enroll",
+  formatAmount,
+  renderPayment,
+  finalisePath,
+  onComplete,
+}: CourseCheckoutProps) {
+  const theme = useForgeTheme();
+  const registered = usePaymentRenderer();
+  const fmt = useAmountFormatter(formatAmount);
+  const c = useCourseCheckout(slug, { finalisePath, onComplete });
+  const renderPay = renderPayment ?? registered ?? undefined;
+
+  const [open, setOpen] = useState(false);
+
+  const tryClose = (next: boolean) => {
+    if (!next && c.step !== "details" && typeof window !== "undefined") {
+      if (!window.confirm("Are you sure you want to leave checkout?")) return;
+    }
+    setOpen(next);
+  };
+
+  return (
+    <DialogRoot open={open} onOpenChange={tryClose}>
+      <DialogTrigger asChild>
+        <button style={triggerButtonStyle(theme)}>{triggerText}</button>
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
+        <DialogContent
+          style={{
+            position: "fixed",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "min(640px, calc(100vw - 24px))",
+            maxHeight: "88vh",
+            overflowY: "auto",
+            background: theme.colors.background,
+            color: theme.colors.text,
+            borderRadius: theme.cornerRadius,
+            padding: 24,
+            zIndex: 51,
+            fontFamily: theme.fontFamily,
+          }}
+          aria-describedby={undefined}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>{c.course?.title ?? "Checkout"}</DialogTitle>
+            <DialogClose asChild>
+              <button aria-label="Close" style={closeButtonStyle(theme)}>
+                <X size={18} />
+              </button>
+            </DialogClose>
+          </div>
+
+          {c.isLoading && <Loading />}
+          {!c.isLoading && !c.course && <p style={{ marginTop: 8 }}>Course not found.</p>}
+          {c.course && <CourseCheckoutBody c={c} course={c.course} fmt={fmt} renderPayment={renderPay} />}
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+}
+
+type Checkout = ReturnType<typeof useCourseCheckout>;
+
+function CourseCheckoutBody({
+  c,
+  course,
+  fmt,
+  renderPayment,
+}: {
+  c: Checkout;
+  course: PublicCourse;
+  fmt: (n: number) => string;
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+}) {
+  const stepIndex = c.step === "details" ? 0 : 1;
+  return (
+    <div style={{ width: "100%" }}>
+      <Progress current={stepIndex} />
+      {c.step === "details" && <DetailsStep c={c} course={course} fmt={fmt} />}
+      {c.step === "payment" && <PaymentStep c={c} course={course} fmt={fmt} renderPayment={renderPayment} />}
+    </div>
+  );
+}
+
+// ── Progress indicator (2 numbered steps) ─────────────────────────────────────
+function Progress({ current }: { current: number }) {
+  const theme = useForgeTheme();
+  const steps = [0, 1];
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
+      {steps.map((s, index) => (
+        <div key={s} style={{ display: "flex", alignItems: "center", flex: index < steps.length - 1 ? 1 : "0 0 auto" }}>
+          <div
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: "9999px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              fontWeight: 600,
+              border: `1px solid ${index <= current ? theme.colors.primary : a(theme.colors.primary, 0.25)}`,
+              background: index <= current ? theme.colors.primary : "transparent",
+              color: index <= current ? "#fff" : theme.colors.primary,
+            }}
+          >
+            {index + 1}
+          </div>
+          {index < steps.length - 1 && (
+            <div
+              style={{
+                flex: 1,
+                height: 2,
+                margin: "0 16px",
+                background: index < current ? theme.colors.primary : a(theme.colors.primary, 0.13),
+              }}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Step 1: buyer details + questionnaire ─────────────────────────────────────
+function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fmt: (n: number) => string }) {
+  const theme = useForgeTheme();
+  const [confirmEmail, setConfirmEmail] = useState("");
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const price = Number(course.price);
+  const compareAt = course.compareAtPrice != null ? Number(course.compareAtPrice) : null;
+  const isFree = price <= 0;
+  const questions = useMemo<QuestionnaireQuestion[]>(() => course.questionnaire ?? [], [course.questionnaire]);
+
+  const onAnswer = (qid: string, value: string) => {
+    const next = { ...answers, [qid]: value };
+    setAnswers(next);
+    c.setQuestionnaire(questions.map((q) => ({ ...q, answer: next[q.id] ?? "" })));
+  };
+
+  const onContinue = () => {
+    setLocalError(null);
+    if (!c.firstName.trim() || !c.lastName.trim()) return setLocalError("Please enter your name.");
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email)) return setLocalError("Please enter a valid email.");
+    if (c.email !== confirmEmail) return setLocalError("Emails do not match.");
+    for (const q of questions) {
+      if (!q.optional && !(answers[q.id] ?? "").trim()) return setLocalError(`Please answer: ${q.question}`);
+    }
+    c.continueToPayment();
+  };
+
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>{isFree ? "Get access" : "Contact Information"}</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>
+        Please provide your contact information for the purchase.
+      </p>
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <div style={{ display: "flex", gap: 8 }}>
+          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle(theme)} />
+          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle(theme)} />
+        </div>
+        <div>
+          <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle(theme)} />
+          {c.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email) && <FieldError>Please enter a valid email address</FieldError>}
+        </div>
+        <div>
+          <input placeholder="Confirm email" type="email" value={confirmEmail} onChange={(e) => setConfirmEmail(e.target.value)} style={inputStyle(theme)} />
+          {confirmEmail && c.email !== confirmEmail && <FieldError>Email addresses do not match</FieldError>}
+        </div>
+
+        {questions.length > 0 && (
+          <div style={{ marginTop: 8, paddingTop: 16, borderTop: `1px solid ${a(theme.colors.primary, 0.13)}` }}>
+            <h3 style={{ fontSize: 17, fontWeight: 700, marginBottom: 12 }}>Additional Information</h3>
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              {questions.map((q) => {
+                const missing = !q.optional && !(answers[q.id] ?? "").trim();
+                return (
+                  <label key={q.id} style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}>
+                    <span>
+                      {q.question}
+                      {!q.optional && <span style={{ color: "#ef4444" }}> *</span>}
+                    </span>
+                    {q.type === "select" && q.options && q.options.length > 0 ? (
+                      <select value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)}>
+                        <option value="">Select…</option>
+                        {q.options.map((opt) => (
+                          <option key={opt} value={opt}>
+                            {opt}
+                          </option>
+                        ))}
+                      </select>
+                    ) : q.type === "textarea" ? (
+                      <textarea
+                        value={answers[q.id] ?? ""}
+                        onChange={(e) => onAnswer(q.id, e.target.value)}
+                        rows={3}
+                        style={{ ...inputStyle(theme), resize: "vertical" }}
+                      />
+                    ) : (
+                      <input value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)} />
+                    )}
+                    {missing && <FieldError>This field is required</FieldError>}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <p style={{ fontSize: 12, opacity: 0.6 }}>
+          By continuing, you agree to receive course access and important updates via email.
+        </p>
+
+        {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
+      </div>
+      <ActionBar
+        fmt={fmt}
+        amount={price}
+        compareAt={compareAt}
+        onNext={onContinue}
+        nextLabel={c.isProcessing ? "Processing…" : isFree ? "Confirm Purchase" : "Continue to Payment"}
+        nextDisabled={c.isProcessing}
+      />
+    </div>
+  );
+}
+
+// ── Step 2: payment ───────────────────────────────────────────────────────────
+function PaymentStep({
+  c,
+  course,
+  fmt,
+  renderPayment,
+}: {
+  c: Checkout;
+  course: PublicCourse;
+  fmt: (n: number) => string;
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+}) {
+  const theme = useForgeTheme();
+  const amount = Number(course.price);
+  const compareAt = course.compareAtPrice != null ? Number(course.compareAtPrice) : null;
+  // Authoritative tax quote from start-payment (display only) — the charged
+  // amount already reflects it.
+  const taxSummary = summarizeTaxQuote(c.taxQuote);
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Payment</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>Complete your purchase to access the course.</p>
+      <div
+        style={{
+          padding: 20,
+          border: `2px solid ${a(theme.colors.primary, 0.25)}`,
+          borderRadius: theme.cornerRadius,
+          marginBottom: 16,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ fontSize: 16 }}>Total Amount</span>
+        <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary }}>
+          {compareAt != null && compareAt > amount && (
+            <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 16 }}>
+              {fmt(compareAt)}
+            </span>
+          )}
+          {fmt(amount)}
+          {taxSummary && (
+            <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
+              {taxSummary.mode === "inclusive" ? taxSummary.label : `+ ${taxSummary.formattedTax} tax`}
+            </span>
+          )}
+        </span>
+      </div>
+      {!renderPayment ? (
+        <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
+      ) : c.clientSecret ? (
+        renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount, mode: "redirect" })
+      ) : (
+        <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+      )}
+      <button onClick={() => c.setStep("details")} style={{ ...secondaryButtonStyle(theme), marginTop: 16 }}>
+        Back
+      </button>
+    </div>
+  );
+}
+
+function FieldError({ children }: { children: ReactNode }) {
+  return <p style={{ color: "#ef4444", fontSize: 13, marginTop: 4 }}>{children}</p>;
+}
+
+// ── Shared bits ───────────────────────────────────────────────────────────────
+function ActionBar({
+  fmt,
+  amount,
+  compareAt,
+  onBack,
+  onNext,
+  nextLabel,
+  nextDisabled,
+}: {
+  fmt: (n: number) => string;
+  amount: number;
+  compareAt?: number | null;
+  onBack?: () => void;
+  onNext: () => void;
+  nextLabel: string;
+  nextDisabled?: boolean;
+}) {
+  const theme = useForgeTheme();
+  return (
+    <div style={{ marginTop: 24 }}>
+      <div
+        style={{
+          padding: 16,
+          border: `1px solid ${a(theme.colors.primary, 0.25)}`,
+          borderRadius: theme.cornerRadius,
+          marginBottom: 16,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ fontWeight: 600 }}>Total</span>
+        <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>
+          {compareAt != null && compareAt > amount && (
+            <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 14 }}>
+              {fmt(compareAt)}
+            </span>
+          )}
+          {fmt(amount)}
+        </span>
+      </div>
+      <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
+        <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>
+          Back
+        </button>
+        <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>
+          {nextLabel}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const triggerButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "primary", fullWidth: true });
+
+const primaryButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "primary" });
+
+const secondaryButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "outline" });
+
+const closeButtonStyle = (t: ForgeTheme): CSSProperties => ({
+  background: "transparent",
+  border: "none",
+  color: t.colors.text,
+  cursor: "pointer",
+  fontSize: 16,
+  lineHeight: 1,
+  opacity: 0.7,
+});
+
+const inputStyle = (t: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  padding: 10,
+  border: `1px solid ${a(t.colors.primary, 0.25)}`,
+  borderRadius: t.cornerRadius,
+  background: t.colors.background,
+  color: t.colors.text,
+  fontFamily: t.fontFamily,
+});

package/src/ui/styled/CourseConfirmation.tsx

@@ -0,0 +1,191 @@
+import { AlertTriangle, ArrowRight, GraduationCap, Mail } from "lucide-react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { Loading } from "./Loading";
+import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, Perforation, ConfirmationRow, alpha } from "./Confirmation";
+import { useCourseBookingFinalize } from "../../data/queries/useFinalize";
+import { useGetCourse } from "../../data/queries/useCourses";
+
+export interface CourseConfirmationProps {
+  slug: string;
+  bookingId?: string;
+  /** Formats a monetary amount for display. Defaults to a plain USD-style `$0.00`. */
+  formatAmount?: (n: number) => string;
+  /** Where the "browse more courses" action links. */
+  explorePath?: string;
+}
+
+export function CourseConfirmation({
+  slug,
+  bookingId,
+  formatAmount,
+  explorePath = "/i/courses",
+}: CourseConfirmationProps) {
+  const theme = useForgeTheme();
+  const fmt = useAmountFormatter(formatAmount);
+  const { data, isLoading, error } = useCourseBookingFinalize(slug, bookingId);
+  const { data: course } = useGetCourse(slug);
+
+  const text = theme.colors.text;
+  const primary = theme.colors.primary;
+
+  if (isLoading) {
+    return (
+      <ConfirmationStage>
+        <Loading label="Confirming your enrollment…" />
+      </ConfirmationStage>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <ConfirmationStage>
+        <p style={{ color: text }}>We couldn’t find your enrollment.</p>
+      </ConfirmationStage>
+    );
+  }
+
+  const confirmed = data.status === "confirmed";
+  const cover = course?.media?.find((m) => m.type === "image")?.url ?? course?.media?.[0]?.url;
+
+  return (
+    <ConfirmationStage>
+      <ConfirmationCard>
+        {/* ── Ceremony ── */}
+        <div style={{ padding: "38px 30px 26px", textAlign: "center" }}>
+          {confirmed ? <CheckSeal /> : <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />}
+
+          <p
+            className="cf-rise"
+            style={{
+              margin: "22px 0 6px",
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: "0.22em",
+              textTransform: "uppercase",
+              color: confirmed ? primary : "#f59e0b",
+              animationDelay: "0.15s",
+            }}
+          >
+            {confirmed ? "Enrollment" : "Action needed"}
+          </p>
+          <h1 className="cf-rise" style={{ fontSize: 29, fontWeight: 800, lineHeight: 1.12, margin: "0 0 8px", animationDelay: "0.22s" }}>
+            {confirmed ? "You’re enrolled 🎓" : "Enrollment not completed"}
+          </h1>
+          <p className="cf-rise" style={{ fontSize: 15, color: alpha(text, 0.7), margin: "0 auto", maxWidth: 340, animationDelay: "0.3s" }}>
+            {confirmed
+              ? `Welcome aboard${data.firstName ? `, ${data.firstName}` : ""}! Your spot is secured.`
+              : `Your enrollment is ${data.status}. If you were charged, contact support and we’ll help.`}
+          </p>
+        </div>
+
+        {/* ── Course card ── */}
+        {course && (
+          <div className="cf-rise" style={{ padding: "0 30px 24px", animationDelay: "0.36s" }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                borderRadius: theme.cornerRadius,
+                border: `1px solid ${alpha(primary, 0.18)}`,
+                background: alpha(primary, 0.04),
+                padding: 12,
+              }}
+            >
+              {cover ? (
+                <img src={cover} alt={course.title} style={{ width: 56, height: 56, borderRadius: theme.cornerRadius, objectFit: "cover", flexShrink: 0 }} />
+              ) : (
+                <div style={{ width: 56, height: 56, borderRadius: theme.cornerRadius, background: alpha(primary, 0.12), display: "grid", placeItems: "center", flexShrink: 0 }}>
+                  <GraduationCap size={26} color={primary} />
+                </div>
+              )}
+              <div style={{ minWidth: 0 }}>
+                <div style={{ fontSize: 16, fontWeight: 800 }}>{course.title}</div>
+                {course.modules?.length ? (
+                  <div style={{ fontSize: 13, color: alpha(text, 0.6) }}>{course.modules.length} modules</div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        )}
+
+        <Perforation />
+
+        {/* ── Stub ── */}
+        <div className="cf-rise" style={{ padding: "26px 30px 8px", animationDelay: "0.44s" }}>
+          {confirmed && (
+            <div
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 10,
+                fontSize: 14,
+                color: alpha(text, 0.8),
+                background: alpha(primary, 0.05),
+                border: `1px solid ${alpha(primary, 0.16)}`,
+                borderRadius: theme.cornerRadius,
+                padding: "12px 14px",
+                marginBottom: 16,
+              }}
+            >
+              <Mail size={16} color={primary} style={{ marginTop: 2, flexShrink: 0 }} />
+              <span style={{ lineHeight: 1.5 }}>
+                We’ve emailed a link to <strong style={{ color: text, wordBreak: "break-word" }}>{data.email}</strong> so you can
+                start learning.
+              </span>
+            </div>
+          )}
+          <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 12, columnGap: 16, margin: 0 }}>
+            <ConfirmationRow label="Student" value={`${data.firstName} ${data.lastName}`.trim() || "—"} />
+            <ConfirmationRow label="Reference" value={`#${data.id.slice(0, 8).toUpperCase()}`} mono />
+            {Number(data.taxAmount || 0) > 0 && !data.taxInclusive && (
+              <ConfirmationRow label="Tax" value={fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} />
+            )}
+            {/* The exact charged total (charged currency) when present — never a re-converted catalog amount. */}
+            <ConfirmationRow
+              label="Paid"
+              value={
+                Number(data.totalAmountInChargedCurrency ?? data.totalAmount) > 0
+                  ? data.totalAmountInChargedCurrency
+                    ? fmt(Number(data.totalAmountInChargedCurrency), data.chargedCurrency || undefined)
+                    : fmt(data.totalAmount)
+                  : "Free"
+              }
+              accent
+              strong
+            />
+          </dl>
+          {Number(data.taxAmount || 0) > 0 && data.taxInclusive && (
+            <div style={{ textAlign: "right", fontSize: 12, color: alpha(text, 0.6), marginTop: 6 }}>
+              Includes {fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} tax
+            </div>
+          )}
+        </div>
+
+        {/* ── Action ── */}
+        <div className="cf-rise" style={{ padding: "20px 30px 30px", animationDelay: "0.52s" }}>
+          <a
+            href={explorePath}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              width: "100%",
+              padding: "13px 18px",
+              borderRadius: theme.cornerRadius,
+              background: primary,
+              color: readableTextOn(primary),
+              fontWeight: 700,
+              textDecoration: "none",
+            }}
+          >
+            Browse more courses <ArrowRight size={16} />
+          </a>
+        </div>
+      </ConfirmationCard>
+    </ConfirmationStage>
+  );
+}