@tribe-nest/forge 3.22.0 → 3.24.0

package/src/ui/styled/MusicLinkPage.tsx

@@ -0,0 +1,365 @@
+import { useEffect, useMemo } from "react";
+import type { CSSProperties } from "react";
+import type { IMusicLink } from "../../types/models";
+import { useMusicLink } from "../../data/queries/useMusicLink";
+import { newEventId, useTrackEvent } from "../../data/queries/useAnalytics";
+import { usePageMetaPixel } from "../analytics/PageMetaPixel";
+import { PageMetaPixel } from "../analytics/PageMetaPixel";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { PageActions } from "./PageActions";
+
+/**
+ * How each streaming service is presented.
+ *
+ * `color` is the service's own brand colour, used for the badge, and `label` is
+ * the name a fan recognises rather than the API key.
+ *
+ * There is deliberately no logo artwork here. Reproducing a dozen trademarked
+ * marks from memory gets some of them subtly wrong, and every one of these
+ * services publishes brand guidelines with rules about colour, clear space and
+ * permitted alterations. A wrong Spotify logo on an artist's own domain is the
+ * artist's problem, not ours to create. Drop real SVGs in behind `icon` when
+ * the assets have been taken from each service's brand kit; the layout already
+ * reserves the space.
+ */
+const SERVICES: Record<string, { label: string; color: string; action?: string }> = {
+  spotify: { label: "Spotify", color: "#1DB954", action: "Play" },
+  appleMusic: { label: "Apple Music", color: "#FA243C", action: "Play" },
+  itunes: { label: "iTunes", color: "#FA243C", action: "Buy" },
+  youtube: { label: "YouTube", color: "#FF0000", action: "Watch" },
+  youtubeMusic: { label: "YouTube Music", color: "#FF0000", action: "Play" },
+  deezer: { label: "Deezer", color: "#A238FF", action: "Play" },
+  tidal: { label: "Tidal", color: "#000000", action: "Play" },
+  amazonMusic: { label: "Amazon Music", color: "#25D1DA", action: "Play" },
+  soundcloud: { label: "SoundCloud", color: "#FF5500", action: "Play" },
+  bandcamp: { label: "Bandcamp", color: "#629AA9", action: "Buy" },
+  audiomack: { label: "Audiomack", color: "#FFA200", action: "Play" },
+  boomplay: { label: "Boomplay", color: "#E62E2D", action: "Play" },
+  anghami: { label: "Anghami", color: "#8A2BE2", action: "Play" },
+  pandora: { label: "Pandora", color: "#3668FF", action: "Play" },
+  napster: { label: "Napster", color: "#00B9F1", action: "Play" },
+  audius: { label: "Audius", color: "#CC0FE0", action: "Play" },
+  tiktok: { label: "TikTok", color: "#000000", action: "Open" },
+};
+
+const serviceMeta = (platform: string) => SERVICES[platform] ?? { label: platform, color: "#666666", action: "Open" };
+
+export interface MusicLinkPageProps {
+  /** The slug from the route. Ignored when `link` is passed directly. */
+  slug?: string;
+  /** Server-fetched link from the route loader. Renders with no client fetch. */
+  initialLink?: IMusicLink | null;
+  /** Heading above the service list. */
+  listHeading?: string;
+  /** Shown when the slug resolves to nothing. */
+  notFoundMessage?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A music smart link page: artwork, title, and one row per streaming service.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * WHY THIS RENDERS AS A FIXED FULL-VIEWPORT LAYER
+ * ─────────────────────────────────────────────────────────────────────────
+ * A landing page has to own the screen, and on a deployed site there is no other
+ * way to get it. The starter's `__root.tsx` wraps every route in `<Nav/>`, a
+ * `max-width: 1040px` `<main>`, and `<SiteFooter/>`; it is tenant-owned, it is
+ * never overwritten by an update, and a route cannot escape the root route in
+ * TanStack. So a page that merely styles itself well still renders as a column
+ * in the middle of the artist's website, under their menu.
+ *
+ * Covering the viewport from inside the block is the only mechanism that works
+ * on sites that already exist, which is all of them. It is the default rather
+ * than an option for the same reason.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * WHY EACH SERVICE IS A REAL ANCHOR
+ * ─────────────────────────────────────────────────────────────────────────
+ * `<a href>`, not a button with a JS redirect. Fans long-press to copy, open in
+ * a new tab, and share these links onward, and a click handler pretending to be
+ * a link breaks all three. The tracking hangs off the click; it does not own the
+ * navigation, and if tracking fails the fan still reaches Spotify.
+ */
+export function MusicLinkPage({
+  slug,
+  initialLink,
+  listHeading = "Listen on",
+  notFoundMessage = "This link is no longer available.",
+  className,
+  style,
+}: MusicLinkPageProps) {
+  const siteTokens = useThemeTokens();
+  const { data, isLoading } = useMusicLink(slug, { initialData: initialLink });
+  const link = data ?? initialLink ?? null;
+
+  /**
+   * Site theme, then the link's `mode` preset, then its explicit colours.
+   *
+   * Three layers rather than one because the three answer different questions.
+   * The site theme is what every link should look like by default, and a creator
+   * who restyles their site should not then restyle twenty links. `mode` is how
+   * people actually talk about a release page ("make this one dark"), and it has
+   * to move background, text, surface and border together or the result is
+   * unreadable. Explicit colours are the escape from both.
+   */
+  const t = useMemo(() => {
+    const theme = link?.theme;
+    if (!theme) return siteTokens;
+
+    const preset =
+      theme.mode === "dark"
+        ? { background: "#0b0b0d", text: "#ffffff", surface: "#17171b", border: "#2a2a30", muted: "#a1a1aa" }
+        : theme.mode === "light"
+          ? { background: "#ffffff", text: "#111113", surface: "#f5f5f7", border: "#e4e4e7", muted: "#71717a" }
+          : {};
+
+    return {
+      ...siteTokens,
+      ...preset,
+      ...(theme.background ? { background: theme.background } : {}),
+      ...(theme.text ? { text: theme.text } : {}),
+      ...(theme.surface ? { surface: theme.surface } : {}),
+      ...(theme.border ? { border: theme.border } : {}),
+      ...(theme.accent ? { primary: theme.accent } : {}),
+      cornerRadius: theme.buttonShape === "pill" ? 999 : theme.buttonShape === "square" ? 0 : siteTokens.cornerRadius,
+    };
+  }, [siteTokens, link?.theme]);
+
+  const pixelId = link?.metaPixelId ?? "";
+  const { fire } = usePageMetaPixel(pixelId);
+  const { trackBeacon } = useTrackEvent();
+
+  // Lock the page behind the overlay. Without this the tenant's own page keeps
+  // scrolling underneath on iOS, which reads as a rendering bug.
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, []);
+
+  const destinations = useMemo(() => link?.destinations ?? [], [link]);
+
+  const onDestinationClick = (platform: string, url: string) => {
+    // ONE id, shared by the browser pixel event and the server-side CAPI twin
+    // that `maybeSendPageCapi` emits for this click. Meta deduplicates on
+    // (event_id, event_name), so without a shared id the same tap is counted as
+    // two conversions and the campaign optimises against inflated numbers.
+    const eventId = newEventId();
+
+    fire("Lead", { content_name: serviceMeta(platform).label, content_category: "music_link" });
+
+    trackBeacon("click", {
+      pathname: typeof window !== "undefined" ? window.location.pathname : undefined,
+      destination: platform,
+      slug: link?.slug,
+      href: url,
+      eventId,
+    });
+  };
+
+  if (!link) {
+    return (
+      <Overlay t={t} className={className} style={style}>
+        <p style={{ color: t.muted, fontFamily: t.fontFamily }}>{isLoading ? "" : notFoundMessage}</p>
+      </Overlay>
+    );
+  }
+
+  return (
+    <Overlay
+      t={t}
+      className={className}
+      style={style}
+      artworkUrl={link.theme?.artworkBackdrop === false ? null : link.artworkUrl}
+    >
+      {pixelId ? <PageMetaPixel pixelId={pixelId} /> : null}
+
+      <div style={{ width: "100%", maxWidth: 420, display: "flex", flexDirection: "column", alignItems: "center" }}>
+        {link.artworkUrl ? (
+          <img
+            src={link.artworkUrl}
+            alt={link.title}
+            width={260}
+            height={260}
+            style={{
+              width: 260,
+              height: 260,
+              maxWidth: "70vw",
+              maxHeight: "70vw",
+              objectFit: "cover",
+              borderRadius: t.cornerRadius,
+              boxShadow: "0 18px 50px rgba(0,0,0,0.45)",
+            }}
+          />
+        ) : null}
+
+        <h1
+          style={{
+            margin: "24px 0 4px",
+            fontSize: 24,
+            lineHeight: 1.25,
+            textAlign: "center",
+            color: t.text,
+            fontFamily: t.headingFontFamily || t.fontFamily,
+          }}
+        >
+          {link.title}
+        </h1>
+
+        {link.artistName ? (
+          <p style={{ margin: 0, fontSize: 16, color: t.muted, fontFamily: t.fontFamily }}>{link.artistName}</p>
+        ) : null}
+
+        {link.description ? (
+          <p
+            style={{
+              margin: "12px 0 0",
+              fontSize: 14,
+              textAlign: "center",
+              color: t.muted,
+              fontFamily: t.fontFamily,
+            }}
+          >
+            {link.description}
+          </p>
+        ) : null}
+
+        {destinations.length > 0 ? (
+          <p
+            style={{
+              margin: "28px 0 12px",
+              fontSize: 12,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              color: t.muted,
+              fontFamily: t.fontFamily,
+            }}
+          >
+            {listHeading}
+          </p>
+        ) : null}
+
+        <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 10 }}>
+          {destinations.map((destination) => {
+            const meta = serviceMeta(destination.platform);
+            return (
+              <a
+                key={destination.platform}
+                href={destination.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                // Stands the global click listener down. It would otherwise
+                // record a second, poorer event for this same tap, and its
+                // payload would drive a duplicate CAPI Lead.
+                data-track-skip=""
+                data-track={`music-link-${destination.platform}`}
+                onClick={() => onDestinationClick(destination.platform, destination.url)}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  padding: "12px 14px",
+                  borderRadius: t.cornerRadius,
+                  background: t.surface,
+                  border: `1px solid ${t.border}`,
+                  color: t.text,
+                  textDecoration: "none",
+                  fontFamily: t.fontFamily,
+                }}
+              >
+                <span
+                  aria-hidden="true"
+                  style={{
+                    width: 34,
+                    height: 34,
+                    flex: "0 0 34px",
+                    borderRadius: 999,
+                    background: meta.color,
+                    color: "#ffffff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 15,
+                    fontWeight: 700,
+                  }}
+                >
+                  {meta.label.charAt(0)}
+                </span>
+                <span style={{ flex: 1, fontSize: 15, fontWeight: 600 }}>{meta.label}</span>
+                <span style={{ fontSize: 13, fontWeight: 700, color: t.primary }}>{meta.action}</span>
+              </a>
+            );
+          })}
+        </div>
+
+        {/*
+          The creator's own additions: a newsletter form, a vinyl pre-order, a
+          lead magnet, a donation. This route is a platform-owned chassis file
+          that is re-materialized from the starter on every build, so anything
+          added to it IN CODE would be overwritten on the next deploy. Page
+          actions are data instead, resolved per link with a per-page-type
+          default, so the shell stays ours and the contents stay theirs.
+        */}
+        <div style={{ width: "100%", marginTop: 28 }}>
+          <PageActions pageType="music_link" entityId={link.id} />
+        </div>
+      </div>
+    </Overlay>
+  );
+}
+
+function Overlay({
+  t,
+  artworkUrl,
+  className,
+  style,
+  children,
+}: {
+  t: ReturnType<typeof useThemeTokens>;
+  artworkUrl?: string | null;
+  className?: string;
+  style?: CSSProperties;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={className}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 60,
+        overflowY: "auto",
+        background: t.background,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: "48px 20px 64px",
+        ...style,
+      }}
+    >
+      {artworkUrl ? (
+        <div
+          aria-hidden="true"
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundImage: `url(${artworkUrl})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            filter: "blur(48px) saturate(1.4)",
+            transform: "scale(1.2)",
+            opacity: 0.35,
+            pointerEvents: "none",
+          }}
+        />
+      ) : null}
+      <div style={{ position: "relative", width: "100%", display: "flex", justifyContent: "center" }}>{children}</div>
+    </div>
+  );
+}

package/src/ui/styled/OfferButton.tsx

@@ -131,7 +131,7 @@ function OfferBody({
             >
               {c.variants.map((v) => (
                 <option key={v.id} value={v.id}>
-                  {v.title || [v.color, v.size].filter(Boolean).join(" / ") || "Default"} — {fmt(v.price)}
+                  {v.title || [v.color, v.size].filter(Boolean).join(" / ") || "Default"} · {fmt(v.price)}
                 </option>
               ))}
             </select>

package/src/ui/styled/PaymentLinkPayment.tsx

@@ -4,6 +4,7 @@ import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 
 export interface PaymentLinkPaymentProps {
   paymentLinkId: string;
@@ -22,9 +23,8 @@ export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }:
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
   const renderPayment = usePaymentRenderer();
-  const { link, clientSecret, returnUrl, isStarting, error, taxQuote } = usePaymentLinkPayment(paymentLinkId, {
-    returnPath,
-  });
+  const { link, clientSecret, returnUrl, isStarting, error, taxQuote, isPaystack, canOpenPaystack, openPaystackCheckout } =
+    usePaymentLinkPayment(paymentLinkId, { returnPath });
 
   if (link.isLoading) return <Loading fullPage />;
   if (link.error || !link.data) return <p style={{ color: theme.colors.text }}>Payment link not found.</p>;
@@ -68,7 +68,15 @@ export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }:
         <div>
           <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
           {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
-          {clientSecret ? (
+          {/* Paystack brings its own modal, so it is checked before the Stripe
+              renderer and needs none of it. */}
+          {isPaystack ? (
+            canOpenPaystack ? (
+              <PaystackPayButton onPay={openPaystackCheckout} label={`Pay ${money(Number(data.amount))}`} />
+            ) : (
+              <Loading label="Preparing payment…" size={22} />
+            )
+          ) : clientSecret ? (
             renderPayment?.({
               clientSecret,
               returnUrl,

package/src/ui/styled/PaystackPayButton.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useFormatCurrency } from "../format/useFormatCurrency";
+import type { PaystackCheckoutOutcome } from "../../utils/paystackCheckout";
+
+export interface PaystackPayButtonProps {
+  /** Opens the modal. Every pillar hook exposes one under this name. */
+  onPay: () => Promise<PaystackCheckoutOutcome> | void;
+  /** Charged total, MAJOR units. Rendered on the button when set. */
+  amount?: number;
+  /** ISO currency of `amount`. */
+  currency?: string;
+  /** Overrides the generated "Pay X" label. */
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * The Paystack pay button: the fan's way into the inline modal, and their way
+ * BACK into it.
+ *
+ * Two jobs, and the second is the one worth stating: a fan who closes the popup
+ * without paying has not failed, and this button is what lets them try again on
+ * the same charge. There is no other route back to a session that has already
+ * been started, so a surface that renders nothing for Paystack strands them.
+ *
+ * The button re-enables itself on every outcome except a success, because a
+ * success is already navigating away.
+ */
+export function PaystackPayButton({ onPay, amount, currency, label, disabled, className }: PaystackPayButtonProps) {
+  const theme = useForgeTheme();
+  const { formatCurrency } = useFormatCurrency();
+  const [isOpening, setIsOpening] = useState(false);
+
+  const text = label ?? (amount ? `Pay ${formatCurrency(amount, currency || undefined)}` : "Pay now");
+
+  return (
+    <button
+      type="button"
+      disabled={disabled || isOpening}
+      onClick={async () => {
+        setIsOpening(true);
+        try {
+          const outcome = await onPay();
+          // A success is mid-navigation; anything else means the fan is still
+          // here and the button has to work again.
+          if (outcome !== "succeeded") setIsOpening(false);
+        } catch {
+          setIsOpening(false);
+        }
+      }}
+      className={className ?? "w-full px-4 py-3 font-semibold"}
+      style={{
+        backgroundColor: theme.colors.primary,
+        color: readableTextOn(theme.colors.primary),
+        borderRadius: `${theme.cornerRadius}px`,
+        opacity: disabled || isOpening ? 0.7 : 1,
+        cursor: disabled || isOpening ? "not-allowed" : "pointer",
+      }}
+    >
+      {isOpening ? "Opening payment…" : text}
+    </button>
+  );
+}

package/src/ui/styled/PresaleCode.tsx

@@ -78,7 +78,7 @@ export function PresaleCodeField({
           }}
         >
           <KeyRound size={14} />
-          Presale unlocked — {presale.code}
+          Presale unlocked: {presale.code}
         </span>
         <button
           type="button"

package/src/ui/styled/ReviewForm.tsx

@@ -97,7 +97,7 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
           <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.
+              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 }}>
@@ -120,7 +120,7 @@ export function ReviewForm({ token, className, style }: ReviewFormProps) {
           {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.
+            Reviews can be edited for 30 days after they're written. This one can no longer be changed.
           </p>
         </Panel>
       </div>

package/src/ui/styled/TicketTransfer.tsx

@@ -248,7 +248,7 @@ function TicketTransferRow({
           <div>
             Sent to <strong>{pending.toEmail}</strong>
             {formatWhen(pending.expiresAt) && pending.open
-              ? ` — the link works until ${formatWhen(pending.expiresAt)}.`
+              ? `. The link works until ${formatWhen(pending.expiresAt)}.`
               : "."}
           </div>
           <div style={{ fontSize: 13, color: t.muted, marginTop: 4 }}>
@@ -370,7 +370,7 @@ export function ClaimTicketTransfer({ token, onClaimed, className, style }: Clai
         <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: t.headingFontFamily }}>The ticket is yours</h1>
         <p style={{ marginTop: 8 }}>
           Ticket <strong>{claimed.eventPassId}</strong> is now in your name. We have emailed it to{" "}
-          <strong>{claimed.toEmail}</strong> — bring that QR code to the door.
+          <strong>{claimed.toEmail}</strong>. Bring that QR code to the door.
         </p>
       </div>
     );
@@ -396,7 +396,7 @@ export function ClaimTicketTransfer({ token, onClaimed, className, style }: Clai
         Claim your ticket
       </h1>
       <p style={{ color: t.muted, marginBottom: 24 }}>
-        Someone sent you their ticket. Tell us what to put on it — you do not need an account.
+        Someone sent you their ticket. Tell us what to put on it. You do not need an account.
       </p>
       <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         <input

package/src/ui/styled/_tests/PresaleCode.spec.tsx

@@ -82,7 +82,7 @@ describe("PresaleCodeField", () => {
     // Without this, a code for a tier that was already VISIBLE (code-gated but
     // listed) appears to do nothing at all: the tier list is unchanged.
     const html = render(state({ code: "PRESALE24", status: "accepted", isUnlocked: true, message: "Code applied." }));
-    expect(html).toContain("Presale unlocked — PRESALE24");
+    expect(html).toContain("Presale unlocked: PRESALE24");
     expect(html).toContain('data-testid="presale-code-remove"');
     // The input is gone — there is nothing left to type.
     expect(html).not.toContain('data-testid="presale-code-input"');

package/src/ui/styled/community/CommunityFeed.tsx

@@ -329,7 +329,7 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
           </div>
           <div style={{ fontSize: 13, color: t.muted, maxWidth: 300 }}>
             {isForum
-              ? "Kick things off — start the first discussion in this space."
+              ? "Kick things off: start the first discussion in this space."
               : "Be the first to share something with the community."}
           </div>
           <button

package/src/ui/styled/community/CommunityPostDetail.tsx

@@ -237,7 +237,7 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
       {locked ? (
         <div style={{ border, borderRadius: t.cornerRadius, padding: 14, textAlign: "center", color: t.muted, fontSize: 14 }}>
           <Lock size={13} style={{ verticalAlign: -2, marginRight: 6 }} />
-          This post is locked — replies are closed.
+          This post is locked: replies are closed.
         </div>
       ) : (
         !replyingTo && <CommunityComposer compact placeholder="Write a reply…" submitLabel="Reply" onSubmit={submitReply} />