@tribe-nest/forge 3.60.0 → 3.61.0

package/src/ui/styled/communities/CommunityWiki.tsx

@@ -0,0 +1,289 @@
+import type { CSSProperties, MouseEvent } from "react";
+import { BookOpen, FileText, Lock } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import {
+  useCommunityWiki,
+  useCommunityWikiPage,
+  useWikiMediaImage,
+  wikiUnlockParts,
+} from "../../headless/communities/useCommunityWiki";
+import type { CommunityWikiPageSummary } from "../../../data/queries/useCommunityWiki";
+import { CommunityRichText, type CommunityRichTextPrivateImage } from "../community/CommunityRichText";
+import { Loading } from "../Loading";
+import { useCommunityStyles } from "./shared";
+
+/** The line that says what opens a locked page: a level, tiers, or both. */
+function useUnlockCopy() {
+  const tr = useForgeT();
+  return (page: CommunityWikiPageSummary): string => {
+    const { level, tiers } = wikiUnlockParts(page);
+    if (level !== null && tiers) return tr("forge.community_wiki.unlocks_at_level_with", { level, tiers });
+    if (level !== null) return tr("forge.community_wiki.unlocks_at_level", { level });
+    return tiers ? tr("forge.community_wiki.unlocks_with", { tiers }) : tr("forge.community_wiki.locked_no_tier");
+  };
+}
+
+export interface CommunityWikiProps {
+  /** The page in the address (`/home/wiki/<page>`). Omitted, the first page this viewer can read opens. */
+  pageSlug?: string;
+  /** The address of a page, for the list's links. */
+  getPageHref: (pageSlug: string) => string;
+  /** SPA navigation adapter. Defaults to a plain link. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The Wiki tab of a community's member home: the page list beside the open
+ * page. Pages a member's tier does not open are listed with a lock, the tiers
+ * that open them and an upgrade button (the community's upgrade sheet when a
+ * community home provides one, else the About page with the tier chosen).
+ * Must sit inside `<CommunityProvider>`. Built on `useCommunityWiki`.
+ */
+export function CommunityWiki({ pageSlug, getPageHref, navigate, className, style }: CommunityWikiProps) {
+  const tr = useForgeT();
+  const { t, card, muted } = useCommunityStyles();
+  const wiki = useCommunityWiki();
+  const unlockCopy = useUnlockCopy();
+
+  if (wiki.isLoading) return <Loading />;
+  if (wiki.isError) {
+    return (
+      <p role="alert" className={className} style={{ color: t.text, ...style }}>
+        {tr("forge.community_wiki.error")}
+      </p>
+    );
+  }
+  if (wiki.pages.length === 0) {
+    return (
+      <div className={className} style={{ ...card, textAlign: "center", color: t.muted, ...style }}>
+        {tr("forge.community_wiki.empty")}
+      </div>
+    );
+  }
+
+  const activeSlug = pageSlug ?? wiki.defaultSlug;
+  const activeLocked = wiki.lockedPages.find((page) => page.slug === activeSlug) ?? null;
+
+  const open = (e: MouseEvent<HTMLAnchorElement>, href: string) => {
+    if (!navigate) return;
+    e.preventDefault();
+    navigate(href);
+  };
+
+  return (
+    <div
+      data-testid="community-wiki"
+      className={className}
+      style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <div className="fg:flex fg:flex-col fg:gap-5 fg:md:flex-row fg:md:items-start">
+        <nav aria-label={tr("forge.community_wiki.nav_label")} className="fg:w-full fg:md:w-[240px] fg:md:shrink-0">
+          <h2
+            className="fg:flex fg:items-center fg:gap-2"
+            style={{ margin: "0 0 10px", fontSize: 16, fontFamily: t.headingFontFamily }}
+          >
+            <BookOpen size={16} style={{ color: t.primary }} aria-hidden /> {tr("forge.community_wiki.title")}
+          </h2>
+          <ul className="fg:flex fg:flex-col fg:gap-1" style={{ listStyle: "none", margin: 0, padding: 0 }}>
+            {wiki.pages.map((page) => {
+              const active = page.slug === activeSlug;
+              const href = getPageHref(page.slug);
+              return (
+                <li key={page.id} data-testid="community-wiki-item">
+                  <a
+                    href={href}
+                    onClick={(e) => open(e, href)}
+                    aria-current={active ? "page" : undefined}
+                    className="fg:flex fg:items-center fg:gap-2"
+                    style={{
+                      padding: "7px 10px",
+                      borderRadius: t.cornerRadius,
+                      textDecoration: "none",
+                      fontSize: 14,
+                      fontWeight: active ? 700 : 500,
+                      color: page.locked ? t.muted : active ? t.primary : t.text,
+                      background: active ? `${t.primary}14` : "transparent",
+                    }}
+                  >
+                    {page.locked ? <Lock size={13} aria-hidden /> : <FileText size={13} aria-hidden />}
+                    <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {page.title}
+                    </span>
+                    {page.locked && <span className="fg:sr-only">{tr("forge.community_wiki.locked_label")}</span>}
+                  </a>
+                  {page.locked && wikiUnlockParts(page).level !== null && (
+                    <span
+                      data-testid="community-wiki-item-level"
+                      style={{ display: "block", padding: "0 10px 4px 31px", fontSize: 11, color: t.muted }}
+                    >
+                      {unlockCopy(page)}
+                    </span>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+
+        <div className="fg:min-w-0 fg:flex-1">
+          {activeLocked ? (
+            <LockedWikiPage page={activeLocked} wiki={wiki} />
+          ) : activeSlug ? (
+            <CommunityWikiPageView pageSlug={activeSlug} />
+          ) : (
+            <p style={muted}>{tr("forge.community_wiki.all_locked")}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** What a member sees in place of a page their tier does not open. */
+function LockedWikiPage({ page, wiki }: { page: CommunityWikiPageSummary; wiki: ReturnType<typeof useCommunityWiki> }) {
+  const tr = useForgeT();
+  const { t, card, button } = useCommunityStyles();
+  const unlockCopy = useUnlockCopy();
+  const { level, tiers } = wikiUnlockParts(page);
+  // A page only the member's level holds back has nothing to buy: no upgrade.
+  const offerUpgrade = level === null || !!tiers;
+  const href = wiki.unlockHref(page);
+  return (
+    <div data-testid="community-wiki-locked" className="fg:flex fg:flex-col fg:items-start fg:gap-3" style={card}>
+      <h1
+        className="fg:flex fg:items-center fg:gap-2"
+        style={{ margin: 0, fontSize: 22, fontFamily: t.headingFontFamily }}
+      >
+        <Lock size={18} style={{ color: t.muted }} aria-hidden /> {page.title}
+      </h1>
+      <p data-testid="community-wiki-unlock" style={{ margin: 0 }}>
+        {unlockCopy(page)}
+      </p>
+      {!offerUpgrade ? null : wiki.unlock ? (
+        <button type="button" data-testid="community-wiki-upgrade" style={button} onClick={() => wiki.unlock?.(page)}>
+          {tr("forge.community_wiki.upgrade")}
+        </button>
+      ) : href ? (
+        <a data-testid="community-wiki-upgrade" href={href} style={{ ...button, textDecoration: "none" }}>
+          {tr("forge.community_wiki.upgrade")}
+        </a>
+      ) : null}
+    </div>
+  );
+}
+
+export interface CommunityWikiPageViewProps {
+  pageSlug: string;
+  /** Hide the page title (when a surrounding section already shows it). */
+  hideTitle?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * One wiki page: its title, a table of contents once it has two or more
+ * headings, and its content. A page this viewer may not read shows a notice.
+ * Built on `useCommunityWikiPage`.
+ */
+export function CommunityWikiPageView({ pageSlug, hideTitle, className, style }: CommunityWikiPageViewProps) {
+  const tr = useForgeT();
+  const { t, card, muted } = useCommunityStyles();
+  const view = useCommunityWikiPage(pageSlug);
+
+  if (view.isLoading) return <Loading />;
+  if (view.notFound || !view.page) {
+    return (
+      <div className={className} style={{ ...card, color: t.muted, ...style }}>
+        {tr(view.isError ? "forge.community_wiki.error" : "forge.community_wiki.page_unavailable")}
+      </div>
+    );
+  }
+
+  return (
+    <article data-testid="community-wiki-page" className={className} style={{ color: t.text, ...style }}>
+      {!hideTitle && (
+        <h1 style={{ margin: "0 0 12px", fontSize: 26, fontWeight: 800, fontFamily: t.headingFontFamily }}>
+          {view.page.title}
+        </h1>
+      )}
+      {view.showToc && (
+        <nav
+          aria-label={tr("forge.community_wiki.toc_label")}
+          data-testid="community-wiki-toc"
+          style={{ ...card, padding: "12px 16px", marginBottom: 16 }}
+        >
+          <p style={{ ...muted, margin: "0 0 6px", fontWeight: 700 }}>{tr("forge.community_wiki.toc_title")}</p>
+          <ol
+            className="fg:flex fg:flex-col fg:gap-1"
+            style={{ listStyle: "none", margin: 0, padding: 0, fontSize: 14 }}
+          >
+            {view.toc.map((entry) => (
+              <li key={entry.id} style={{ paddingLeft: Math.max(0, entry.level - 1) * 12 }}>
+                <a href={`#${entry.id}`} style={{ color: t.primary, textDecoration: "none" }}>
+                  {entry.text}
+                </a>
+              </li>
+            ))}
+          </ol>
+        </nav>
+      )}
+      <CommunityRichText
+        body={view.content}
+        headingIds={view.headingIds}
+        renderPrivateImage={(image) => <WikiMediaImage pageSlug={pageSlug} {...image} />}
+      />
+    </article>
+  );
+}
+
+/**
+ * A PRIVATE wiki image: a placeholder while its signed address is fetched, the
+ * image once it is, and a quiet "image unavailable" when this viewer may not
+ * see it or it cannot be loaded. An expired address is replaced once.
+ */
+function WikiMediaImage({ pageSlug, mediaId, alt, inline }: { pageSlug: string } & CommunityRichTextPrivateImage) {
+  const tr = useForgeT();
+  const { t } = useCommunityStyles();
+  const image = useWikiMediaImage(pageSlug, mediaId);
+  const block: CSSProperties = inline
+    ? { display: "inline-block", verticalAlign: "middle" }
+    : { display: "block", margin: "0.6em 0" };
+
+  if (image.status === "ready" && image.url) {
+    return (
+      <img
+        data-testid="community-wiki-private-image"
+        src={image.url}
+        alt={alt}
+        loading="lazy"
+        onError={image.onImageError}
+        style={{ ...block, maxWidth: "100%", height: "auto", borderRadius: t.cornerRadius }}
+      />
+    );
+  }
+  if (image.status === "loading") {
+    return (
+      <span
+        data-testid="community-wiki-image-placeholder"
+        role="img"
+        aria-label={alt || tr("forge.community_wiki.image_loading")}
+        aria-busy="true"
+        style={{
+          ...block,
+          width: inline ? 120 : "100%",
+          maxWidth: 480,
+          height: inline ? 80 : 200,
+          borderRadius: t.cornerRadius,
+          background: `${t.text}0d`,
+        }}
+      />
+    );
+  }
+  return (
+    <span data-testid="community-wiki-image-unavailable" style={{ ...block, fontSize: 13, color: t.muted }}>
+      {tr("forge.community_wiki.image_unavailable")}
+    </span>
+  );
+}

package/src/ui/styled/communities/MyMembershipsList.tsx

@@ -11,6 +11,11 @@ export interface MyMembershipsListProps {
   navigate?: (href: string) => void;
   /** Format an amount in a currency. Defaults to the runtime currency formatter. */
   formatAmount?: (amount: number, currencyCode?: string) => string;
+  /**
+   * `cards` (the default) boxes each membership. `rows` divides them with
+   * hairlines instead, the client portal's list style.
+   */
+  layout?: "cards" | "rows";
   className?: string;
   style?: CSSProperties;
 }
@@ -20,18 +25,30 @@ export interface MyMembershipsListProps {
  * for the account page. Managing one (billing, cancel, downgrade) happens
  * inside its community, so each card links there. Built on `useMyMemberships`.
  */
-export function MyMembershipsList({ navigate, formatAmount, className, style }: MyMembershipsListProps) {
+export function MyMembershipsList({ navigate, formatAmount, layout = "cards", className, style }: MyMembershipsListProps) {
   const tr = useForgeT();
   const locale = useForgeLocale();
   const { t, card, ghostButton, muted } = useCommunityStyles();
   const fmt = useAmountFormatter(formatAmount);
   const { memberships, isLoading } = useMyMemberships();
   const go = navigate ?? ((href: string) => window.location.assign(href));
+  const rows = layout === "rows";
+  const itemStyle: CSSProperties = rows ? { padding: "20px 0", borderBottom: `1px solid ${t.border}` } : card;
 
   if (isLoading) return <Loading />;
   if (memberships.length === 0) {
     return (
-      <p className={className} data-testid="my-memberships-empty" style={{ ...muted, ...style }}>
+      <p
+        className={className}
+        data-testid="my-memberships-empty"
+        style={{
+          ...muted,
+          ...(rows
+            ? { padding: "36px 24px", border: `1px dashed ${t.border}`, borderRadius: t.cornerRadius, textAlign: "center" }
+            : {}),
+          ...style,
+        }}
+      >
         {tr("forge.my_memberships_list.empty")}
       </p>
     );
@@ -41,15 +58,24 @@ export function MyMembershipsList({ navigate, formatAmount, className, style }:
     <ul
       className={className}
       data-testid="my-memberships"
-      style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, ...style }}
+      style={{
+        listStyle: "none",
+        padding: 0,
+        margin: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: rows ? 0 : 12,
+        ...(rows ? { borderTop: `1px solid ${t.border}` } : {}),
+        ...style,
+      }}
     >
       {memberships.map((membership) => {
         const message = getMembershipStatusMessage(membership.access);
         const periodEnd = shortDate(membership.periodEnd, locale);
         return (
-          <li key={membership.id} data-testid="my-membership" className="fg:flex fg:flex-col fg:gap-2 fg:sm:flex-row fg:sm:items-center fg:sm:justify-between" style={card}>
+          <li key={membership.id} data-testid="my-membership" className="fg:flex fg:flex-col fg:gap-2 fg:sm:flex-row fg:sm:items-center fg:sm:justify-between" style={itemStyle}>
             <div className="fg:min-w-0">
-              <p style={{ fontWeight: 700 }}>{membership.community.name}</p>
+              <p style={{ fontWeight: rows ? 600 : 700, fontSize: rows ? 16 : undefined, margin: 0 }}>{membership.community.name}</p>
               <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2" style={{ marginTop: 4 }}>
                 {membership.tierName && <Pill>{membership.tierName}</Pill>}
                 <span style={{ fontSize: 13, fontWeight: message.tone === "warning" ? 700 : 400, color: message.tone === "warning" ? t.primary : t.muted }}>

package/src/ui/styled/communities/_tests/CommunityAppHome.spec.tsx

@@ -0,0 +1,92 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { CommunityHome } from "../CommunityHome";
+import {
+  account,
+  detailRoute,
+  get,
+  installAdapter,
+  meRoute,
+  restoreAdapter,
+  viewer,
+  wrapper,
+} from "../../../headless/_tests/communityHarness";
+import { siteApp } from "../../../headless/_tests/siteAppHarness";
+
+/**
+ * The Home rule inside a community: the site's mark at the start of both the
+ * phone and the desktop header leads to the app's Home, which is the
+ * creator's start page when they chose one and `/i/app` otherwise.
+ */
+
+afterEach(restoreAdapter);
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function mount(node: ReactNode) {
+  const Wrapper = wrapper({ user: account() });
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const member = viewer({
+  state: "member",
+  membership: {
+    id: "m-1",
+    tierId: "tier-free",
+    tierName: "Free",
+    status: "active",
+    cancelAtPeriodEnd: false,
+    currentPeriodEnd: null,
+    pendingDowngradeTierId: null,
+  },
+});
+
+const routes = (app: () => unknown) => [
+  get("/public/websites/app", app),
+  meRoute(() => member),
+  detailRoute(() => ({ viewer: member })),
+  get("/public/memberships/mine", () => []),
+];
+
+describe("CommunityHome and the app's Home", () => {
+  it("leads both headers' site mark to the creator's own start page", async () => {
+    installAdapter(routes(() => siteApp({ startUrl: "/members", iconUrl: "https://cdn.example/icon.png" })));
+    const navigate = vi.fn();
+    mount(
+      <CommunityHome tab="posts" navigate={navigate}>
+        <p>feed</p>
+      </CommunityHome>,
+    );
+    const compact = await screen.findByTestId("community-home-app-home-compact");
+    const full = screen.getByTestId("community-home-app-home");
+    await waitFor(() => expect(compact.getAttribute("href")).toBe("/members"));
+    expect(full.getAttribute("href")).toBe("/members");
+    expect(compact.querySelector("img")?.getAttribute("src")).toBe("https://cdn.example/icon.png");
+    expect(compact.getAttribute("aria-label")).toBe("Home");
+
+    fireEvent.click(full, { button: 0 });
+    expect(navigate).toHaveBeenCalledWith("/members");
+  });
+
+  it("falls back to /i/app when the site has no app settings", async () => {
+    installAdapter(
+      routes(() => {
+        throw { status: 404 };
+      }),
+    );
+    mount(
+      <CommunityHome tab="posts">
+        <p>feed</p>
+      </CommunityHome>,
+    );
+    expect((await screen.findByTestId("community-home-app-home-compact")).getAttribute("href")).toBe("/i/app");
+    expect(screen.getByTestId("community-home-app-home").getAttribute("href")).toBe("/i/app");
+  });
+});