@tribe-nest/forge 3.26.0 → 3.29.0

package/src/ui/styled/ResumeCart.tsx

@@ -0,0 +1,289 @@
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import {
+  useCartResume,
+  effectiveUnitCents,
+  type UseCartResumeResult,
+} from "../headless/checkout/useCartResume";
+import type { ResumeLine } from "../../data/queries/useCheckouts";
+import { Button } from "./Button";
+
+export interface ResumeCartProps {
+  /** The `?token=` from the recovery email. */
+  token?: string | null;
+  /** Where the primary button goes. Default `/i/checkout`. */
+  checkoutPath?: string;
+  /** Where "keep browsing" goes, and where a dead link sends the buyer. Default `/i/store`. */
+  storePath?: string;
+  /** Build a course page link. Default `/i/courses/{slug}`. */
+  courseHref?: (line: ResumeLine) => string;
+  /** Build a coaching page link. Default `/i/coaching/{slug}`. */
+  coachingHref?: (line: ResumeLine) => string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * The page a cart-recovery link lands on.
+ *
+ * Drops in at `/i/checkout/resume`. Everything it decides lives in `useCartResume`,
+ * which `apps/client` renders with its own markup, so the two storefronts
+ * cannot drift on what a resumed basket does. This file is only how it looks.
+ *
+ * The one rule the layout enforces: a line that could NOT be restored is drawn
+ * as loudly as one that was. It sits above the fold, not in a footnote, because
+ * the buyer came back for a specific thing and needs to know whether it is
+ * still there before they look at a total.
+ */
+export function ResumeCart({
+  token,
+  checkoutPath = "/i/checkout",
+  storePath = "/i/store",
+  courseHref,
+  coachingHref,
+  formatAmount,
+  className,
+  style,
+}: ResumeCartProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const fmt = useAmountFormatter(formatAmount);
+  const resume = useCartResume({ token });
+
+  const shell: React.CSSProperties = {
+    maxWidth: 640,
+    margin: "0 auto",
+    color: t.text,
+    fontFamily: t.fontFamily,
+    ...style,
+  };
+
+  if (resume.status === "loading") {
+    return (
+      <div className={className} style={shell} aria-busy="true">
+        <p style={{ color: t.muted }}>{tr("forge.resume_cart.loading")}</p>
+      </div>
+    );
+  }
+
+  if (resume.status === "error") {
+    return (
+      <div className={className} style={shell}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: t.headingFontFamily }}>
+          {tr("forge.resume_cart.invalid_title")}
+        </h1>
+        <p style={{ color: t.muted, marginTop: 8 }}>{tr("forge.resume_cart.invalid_body")}</p>
+        <div style={{ marginTop: 24 }}>
+          <Button onClick={() => go(storePath)}>{tr("forge.resume_cart.browse_store")}</Button>
+        </div>
+      </div>
+    );
+  }
+
+  const linkFor = (line: ResumeLine) =>
+    line.type === "course"
+      ? (courseHref?.(line) ?? `/i/courses/${line.courseSlug ?? ""}`)
+      : (coachingHref?.(line) ?? `/i/coaching/${line.coachingProductSlug ?? ""}`);
+
+  return (
+    <div className={className} style={shell}>
+      <h1 style={{ fontSize: 26, fontWeight: 700, fontFamily: t.headingFontFamily }}>
+        {resume.status === "empty"
+          ? tr("forge.resume_cart.empty_title")
+          : tr("forge.resume_cart.title")}
+      </h1>
+      <p style={{ color: t.muted, marginTop: 8 }}>
+        {resume.status === "empty"
+          ? tr("forge.resume_cart.empty_body")
+          : tr("forge.resume_cart.subtitle", { count: resume.itemCount })}
+      </p>
+
+      {/*
+        State the buyer has to act on, so it is visible and not behind a hint:
+        the price of something in their basket is not what it was.
+      */}
+      {resume.repricedLines.length > 0 && (
+        <p role="status" style={notice(t.primary, t.cornerRadius)}>
+          {tr("forge.resume_cart.reprice_notice", { count: resume.repricedLines.length })}
+        </p>
+      )}
+
+      {resume.restoredLines.length > 0 && (
+        <ul style={list}>
+          {resume.restoredLines.map((line, index) => (
+            <li key={`restored-${index}`} style={row(t.border)}>
+              <LineBody line={line} fmt={fmt} muted={t.muted} text={t.text} />
+              <div style={{ textAlign: "right", whiteSpace: "nowrap" }}>
+                {line.priceChanged && line.quotedUnitPriceCents != null && (
+                  <div style={{ color: t.muted, fontSize: 12, textDecoration: "line-through" }}>
+                    {fmt(line.quotedUnitPriceCents / 100)}
+                  </div>
+                )}
+                <div style={{ fontWeight: 600 }}>
+                  {fmt((effectiveUnitCents(line) * line.quantity) / 100)}
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {resume.restoredLines.length > 0 && (
+        <div style={{ ...row(t.border), fontWeight: 700, borderBottom: "none" }}>
+          <span>{tr("forge.resume_cart.subtotal")}</span>
+          <span>{fmt(resume.subtotalCents / 100)}</span>
+        </div>
+      )}
+
+      {resume.unavailableLines.length > 0 && (
+        <section style={{ marginTop: 24 }} aria-label={tr("forge.resume_cart.unavailable_title")}>
+          <h2 style={{ fontSize: 16, fontWeight: 700, fontFamily: t.headingFontFamily }}>
+            {tr("forge.resume_cart.unavailable_title")}
+          </h2>
+          <ul style={list}>
+            {resume.unavailableLines.map((line, index) => (
+              <li key={`gone-${index}`} style={{ ...row(t.border), opacity: 0.75 }}>
+                <LineBody line={line} fmt={fmt} muted={t.muted} text={t.text} />
+                <span style={{ color: t.muted, fontSize: 13, whiteSpace: "nowrap" }}>
+                  {tr(REASON_KEYS[line.unavailableReason ?? "unavailable"])}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/*
+        An add-on whose ticket did not come back. Drawn as loudly as an
+        unavailable line, and for the same reason: it was in the basket the
+        buyer left, so its absence has to be stated rather than discovered.
+      */}
+      {resume.droppedLines.length > 0 && (
+        <section style={{ marginTop: 24 }} aria-label={tr("forge.resume_cart.dropped_title")}>
+          <h2 style={{ fontSize: 16, fontWeight: 700, fontFamily: t.headingFontFamily }}>
+            {tr("forge.resume_cart.dropped_title")}
+          </h2>
+          <ul style={list}>
+            {resume.droppedLines.map((line, index) => (
+              <li key={`dropped-${index}`} style={{ ...row(t.border), opacity: 0.75 }}>
+                <LineBody line={line} fmt={fmt} muted={t.muted} text={t.text} />
+                <span style={{ color: t.muted, fontSize: 13, whiteSpace: "nowrap" }}>
+                  {tr("forge.resume_cart.dropped_reason")}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {resume.continueLines.length > 0 && (
+        <section style={{ marginTop: 24 }}>
+          <h2 style={{ fontSize: 16, fontWeight: 700, fontFamily: t.headingFontFamily }}>
+            {tr("forge.resume_cart.continue_title")}
+          </h2>
+          <ul style={list}>
+            {resume.continueLines.map((line, index) => (
+              <li key={`continue-${index}`} style={row(t.border)}>
+                <LineBody line={line} fmt={fmt} muted={t.muted} text={t.text} />
+                <a href={linkFor(line)} style={{ color: t.primary, fontWeight: 600 }}>
+                  {tr("forge.resume_cart.continue_link")}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {resume.couponCode && (
+        <p role="status" style={notice(t.secondary, t.cornerRadius)}>
+          {tr("forge.resume_cart.coupon_notice", { code: resume.couponCode })}
+        </p>
+      )}
+
+      <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
+        {resume.restoredLines.length > 0 && (
+          <Button onClick={() => go(checkoutPath)}>{tr("forge.resume_cart.go_to_checkout")}</Button>
+        )}
+        <Button variant="secondary" onClick={() => go(storePath)}>
+          {tr("forge.resume_cart.browse_store")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function LineBody({
+  line,
+  fmt,
+  muted,
+  text,
+}: {
+  line: ResumeLine;
+  fmt: (amount: number) => string;
+  muted: string;
+  text: string;
+}) {
+  const options = (line.options ?? []).map((option) => `${option.axis}: ${option.value}`).join(" · ");
+  return (
+    <div style={{ display: "flex", gap: 12, alignItems: "center", minWidth: 0 }}>
+      {line.coverImage && (
+        <img
+          src={line.coverImage}
+          alt=""
+          width={48}
+          height={48}
+          style={{ width: 48, height: 48, objectFit: "cover", borderRadius: 6, flexShrink: 0 }}
+        />
+      )}
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontWeight: 600, color: text, overflowWrap: "anywhere" }}>{line.title}</div>
+        <div style={{ color: muted, fontSize: 13 }}>
+          {options && <span>{options} · </span>}
+          <span>× {line.quantity}</span>
+          {line.available && line.type !== "course" && line.type !== "coaching" && (
+            <span> · {fmt(effectiveUnitCents(line) / 100)}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Three reasons, three sentences. Written out rather than built from the enum
+ * so the keys are greppable, and kept distinct because the buyer's next move
+ * differs: a sold-out tier may free up, a withdrawn product will not.
+ */
+const REASON_KEYS = {
+  removed: "forge.resume_cart.reason_removed",
+  unavailable: "forge.resume_cart.reason_unavailable",
+  sold_out: "forge.resume_cart.reason_sold_out",
+} as const;
+
+const list: React.CSSProperties = { listStyle: "none", padding: 0, margin: "16px 0 0" };
+
+const row = (border: string): React.CSSProperties => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 16,
+  padding: "12px 0",
+  borderBottom: `1px solid ${border}`,
+});
+
+const notice = (accent: string, radius: number): React.CSSProperties => ({
+  marginTop: 16,
+  padding: "10px 12px",
+  borderRadius: radius,
+  border: `1px solid ${accent}`,
+  fontSize: 14,
+});
+
+function go(path: string) {
+  if (typeof window !== "undefined") window.location.href = path;
+}
+
+export type { UseCartResumeResult };

package/src/ui/styled/ReviewForm.tsx

@@ -5,6 +5,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { StarRow } from "./ReviewsSection";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
+import { useForgeT } from "../../i18n";
 
 const a = (hex: string, al: number) => hex + Math.round(al * 255).toString(16).padStart(2, "0");
 
@@ -24,7 +25,8 @@ export interface ReviewFormProps {
  * "held for moderation" outcome.
  */
 export function ReviewForm({ token, className, style }: ReviewFormProps) {
-  const t = useThemeTokens();
+  const t = useForgeT();
+  const tokens = useThemeTokens();
   const {
     status,
     request,
@@ -50,8 +52,8 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
     maxWidth: 560,
     margin: "0 auto",
     padding: "24px 16px",
-    color: t.text,
-    fontFamily: t.fontFamily,
+    color: tokens.text,
+    fontFamily: tokens.fontFamily,
     ...style,
   };
 
@@ -61,11 +63,8 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
     return (
       <div className={className} style={rootStyle}>
         <Panel>
-          <h1 style={h1Style(t)}>This review link isn't valid</h1>
-          <p style={{ opacity: 0.75, lineHeight: 1.6 }}>
-            The link may have been mistyped or is no longer active. If you received it by email, try opening it again
-            from the original message.
-          </p>
+          <h1 style={h1Style(tokens)}>{t("forge.review_form.invalid_title")}</h1>
+          <p style={{ opacity: 0.75, lineHeight: 1.6 }}>{t("forge.review_form.invalid_body")}</p>
         </Panel>
       </div>
     );
@@ -75,11 +74,12 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
     return (
       <div className={className} style={rootStyle}>
         <Panel>
-          <Clock size={32} color={t.primary} />
-          <h1 style={h1Style(t)}>This review link has expired</h1>
+          <Clock size={32} color={tokens.primary} />
+          <h1 style={h1Style(tokens)}>{t("forge.review_form.expired_title")}</h1>
           <p style={{ opacity: 0.75, lineHeight: 1.6 }}>
-            Review links are only valid for a limited time after your purchase
-            {request.entityTitle ? ` of “${request.entityTitle}”` : ""}. Thanks anyway for your support!
+            {request.entityTitle
+              ? t("forge.review_form.expired_body_entity", { title: request.entityTitle })
+              : t("forge.review_form.expired_body")}
           </p>
         </Panel>
       </div>
@@ -92,16 +92,16 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
     return (
       <div className={className} style={rootStyle}>
         <Panel>
-          <CheckCircle2 size={36} color={t.primary} />
-          <h1 style={h1Style(t)}>Thank you for your review!</h1>
+          <CheckCircle2 size={36} color={tokens.primary} />
+          <h1 style={h1Style(tokens)}>{t("forge.review_form.thanks_title")}</h1>
           <StarRow rating={afterSubmit.rating} size={20} />
           {held ? (
-            <p style={{ opacity: 0.75, lineHeight: 1.6 }}>
-              Your review has been received and is awaiting approval. It will appear once it's been checked.
-            </p>
+            <p style={{ opacity: 0.75, lineHeight: 1.6 }}>{t("forge.review_form.held_body")}</p>
           ) : (
             <p style={{ opacity: 0.75, lineHeight: 1.6 }}>
-              Your review is now live{request.entityTitle ? ` on “${request.entityTitle}”` : ""}.
+              {request.entityTitle
+                ? t("forge.review_form.live_body_entity", { title: request.entityTitle })
+                : t("forge.review_form.live_body")}
             </p>
           )}
         </Panel>
@@ -113,15 +113,13 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
     return (
       <div className={className} style={rootStyle}>
         <Panel>
-          <CheckCircle2 size={32} color={t.primary} />
-          <h1 style={h1Style(t)}>You've already reviewed this</h1>
+          <CheckCircle2 size={32} color={tokens.primary} />
+          <h1 style={h1Style(tokens)}>{t("forge.review_form.locked_title")}</h1>
           {request.entityTitle && <p style={{ fontWeight: 600 }}>{request.entityTitle}</p>}
           <StarRow rating={existing.rating} size={20} />
           {existing.title && <p style={{ fontWeight: 700, margin: 0 }}>{existing.title}</p>}
           {existing.body && <p style={{ opacity: 0.85, lineHeight: 1.6, margin: 0 }}>{existing.body}</p>}
-          <p style={{ opacity: 0.6, fontSize: 13 }}>
-            Reviews can be edited for 30 days after they're written. This one can no longer be changed.
-          </p>
+          <p style={{ opacity: 0.6, fontSize: 13 }}>{t("forge.review_form.locked_body")}</p>
         </Panel>
       </div>
     );
@@ -138,11 +136,11 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
     width: "100%",
     padding: "10px 12px",
     fontSize: 15,
-    fontFamily: t.fontFamily,
-    color: t.text,
-    background: t.surface,
-    border: `1px solid ${t.border}`,
-    borderRadius: t.cornerRadius,
+    fontFamily: tokens.fontFamily,
+    color: tokens.text,
+    background: tokens.surface,
+    border: `1px solid ${tokens.border}`,
+    borderRadius: tokens.cornerRadius,
     outline: "none",
     boxSizing: "border-box",
   };
@@ -156,34 +154,30 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
           flexDirection: "column",
           gap: 18,
           padding: 24,
-          border: `1px solid ${t.border}`,
-          borderRadius: t.cornerRadius,
-          background: t.surface,
+          border: `1px solid ${tokens.border}`,
+          borderRadius: tokens.cornerRadius,
+          background: tokens.surface,
         }}
       >
         <div>
-          <h1 style={{ ...h1Style(t), marginBottom: 4 }}>
-            {existing ? "Edit your review" : "Leave a review"}
+          <h1 style={{ ...h1Style(tokens), marginBottom: 4 }}>
+            {existing ? t("forge.review_form.edit_title") : t("forge.review_form.create_title")}
           </h1>
           {request.entityTitle && (
             <p style={{ opacity: 0.75, margin: 0 }}>
-              How was <span style={{ fontWeight: 700 }}>{request.entityTitle}</span>?
-            </p>
-          )}
-          {existing && (
-            <p style={{ fontSize: 13, opacity: 0.6, marginTop: 6 }}>
-              You can edit your review within 30 days of writing it. Edits are re-checked before publishing.
+              {t("forge.review_form.how_was")} <span style={{ fontWeight: 700 }}>{request.entityTitle}</span>?
             </p>
           )}
+          {existing && <p style={{ fontSize: 13, opacity: 0.6, marginTop: 6 }}>{t("forge.review_form.edit_window_note")}</p>}
         </div>
 
         {/* Star picker */}
         <div>
-          <label style={labelStyle}>Your rating *</label>
+          <label style={labelStyle}>{t("forge.review_form.rating_label")}</label>
           <div
             style={{ display: "flex", gap: 6 }}
             role="radiogroup"
-            aria-label="Rating"
+            aria-label={t("forge.review_form.aria_rating")}
             onMouseLeave={() => setHoverRating(0)}
           >
             {[1, 2, 3, 4, 5].map((star) => (
@@ -192,15 +186,15 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
                 type="button"
                 role="radio"
                 aria-checked={rating === star}
-                aria-label={`${star} star${star === 1 ? "" : "s"}`}
+                aria-label={star === 1 ? t("forge.review_form.aria_star_one") : t("forge.review_form.aria_star_other", { count: star })}
                 onClick={() => setRating(star)}
                 onMouseEnter={() => setHoverRating(star)}
                 style={{ background: "transparent", border: "none", padding: 2, cursor: "pointer", lineHeight: 0 }}
               >
                 <Star
                   size={30}
-                  fill={star <= displayStars ? t.primary : "transparent"}
-                  color={star <= displayStars ? t.primary : a(t.text, 0.3)}
+                  fill={star <= displayStars ? tokens.primary : "transparent"}
+                  color={star <= displayStars ? tokens.primary : a(tokens.text, 0.3)}
                 />
               </button>
             ))}
@@ -209,7 +203,7 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
 
         <div>
           <label htmlFor="review-title" style={labelStyle}>
-            Title <span style={{ opacity: 0.5, fontWeight: 400 }}>(optional)</span>
+            {t("forge.review_form.title_label")} <span style={{ opacity: 0.5, fontWeight: 400 }}>{t("forge.review_form.optional")}</span>
           </label>
           <input
             id="review-title"
@@ -217,14 +211,14 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
             maxLength={200}
             value={title}
             onChange={(e) => setTitle(e.target.value)}
-            placeholder="Sum it up in a few words"
+            placeholder={t("forge.review_form.title_placeholder")}
             style={inputStyle}
           />
         </div>
 
         <div>
           <label htmlFor="review-body" style={labelStyle}>
-            Your review <span style={{ opacity: 0.5, fontWeight: 400 }}>(optional)</span>
+            {t("forge.review_form.body_label")} <span style={{ opacity: 0.5, fontWeight: 400 }}>{t("forge.review_form.optional")}</span>
           </label>
           <textarea
             id="review-body"
@@ -232,13 +226,13 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
             maxLength={5000}
             value={body}
             onChange={(e) => setBody(e.target.value)}
-            placeholder="What did you like or dislike?"
+            placeholder={t("forge.review_form.body_placeholder")}
             style={{ ...inputStyle, resize: "vertical" }}
           />
         </div>
 
         <div>
-          <label htmlFor="review-name" style={labelStyle}>Display name</label>
+          <label htmlFor="review-name" style={labelStyle}>{t("forge.review_form.name_label")}</label>
           <input
             id="review-name"
             type="text"
@@ -247,17 +241,17 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
             onChange={(e) => setReviewerName(e.target.value)}
             style={inputStyle}
           />
-          <p style={{ fontSize: 12, opacity: 0.55, marginTop: 4 }}>Shown publicly next to your review.</p>
+          <p style={{ fontSize: 12, opacity: 0.55, marginTop: 4 }}>{t("forge.review_form.name_hint")}</p>
         </div>
 
         {errorMessage && (
-          <p style={{ fontSize: 14, color: "#b91c1c", background: "#b91c1c14", padding: "8px 12px", borderRadius: t.cornerRadius, margin: 0 }}>
+          <p style={{ fontSize: 14, color: "#b91c1c", background: "#b91c1c14", padding: "8px 12px", borderRadius: tokens.cornerRadius, margin: 0 }}>
             {errorMessage}
           </p>
         )}
 
         <Button type="submit" disabled={!canSubmit} loading={isSubmitting} fullWidth>
-          {existing ? "Update review" : "Submit review"}
+          {existing ? t("forge.review_form.update_submit") : t("forge.review_form.submit")}
         </Button>
       </form>
     </div>
@@ -266,12 +260,12 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
 
 const labelStyle: React.CSSProperties = { display: "block", fontSize: 14, fontWeight: 600, marginBottom: 6 };
 
-function h1Style(t: { headingFontFamily?: string }): React.CSSProperties {
-  return { fontSize: 24, fontWeight: 800, fontFamily: t.headingFontFamily, margin: 0 };
+function h1Style(tokens: { headingFontFamily?: string }): React.CSSProperties {
+  return { fontSize: 24, fontWeight: 800, fontFamily: tokens.headingFontFamily, margin: 0 };
 }
 
 function Panel({ children }: { children: React.ReactNode }) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
   return (
     <div
       style={{
@@ -281,9 +275,9 @@ function Panel({ children }: { children: React.ReactNode }) {
         textAlign: "center",
         gap: 12,
         padding: 32,
-        border: `1px solid ${t.border}`,
-        borderRadius: t.cornerRadius,
-        background: t.surface,
+        border: `1px solid ${tokens.border}`,
+        borderRadius: tokens.cornerRadius,
+        background: tokens.surface,
       }}
     >
       {children}