@tribe-nest/forge 3.60.0 → 3.63.0

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

@@ -63,6 +63,17 @@ function JoinBody({ join }: { join: Join }) {
   const currency = useSiteConfig().data?.currency;
   const money = (amount: number) => formatCurrency(amount, currency);
   const field: CSSProperties = { display: "flex", flexDirection: "column", gap: 6, fontSize: 14 };
+  const linkButton: CSSProperties = {
+    alignSelf: "center",
+    background: "transparent",
+    border: "none",
+    padding: 4,
+    color: t.primary,
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+  };
 
   if (join.isLoading) return <Loading />;
 
@@ -89,6 +100,41 @@ function JoinBody({ join }: { join: Join }) {
           </div>
         );
       }
+      if (join.mode === "email") {
+        return (
+          <form
+            data-testid="community-join-email"
+            className="fg:flex fg:flex-col fg:gap-3"
+            onSubmit={(e) => {
+              e.preventDefault();
+              void join.next();
+            }}
+          >
+            {problem}
+            <label style={field}>
+              {tr("forge.community_join_sheet.email")}
+              <input
+                style={{ ...input, opacity: join.emailLocked ? 0.75 : 1 }}
+                type="email"
+                inputMode="email"
+                value={join.emailFlow.email}
+                readOnly={join.emailLocked}
+                aria-readonly={join.emailLocked}
+                onChange={(e) => join.emailFlow.setEmail(e.target.value)}
+                autoComplete="email"
+                autoFocus={!join.emailLocked}
+              />
+            </label>
+            {join.error && <p role="alert" style={errorText}>{join.error}</p>}
+            <button type="submit" disabled={join.isSubmitting} style={button}>
+              {join.isSubmitting ? tr("forge.community_join_sheet.working") : tr("forge.community_join_sheet.continue")}
+            </button>
+            <button type="button" data-testid="community-join-use-password" style={linkButton} onClick={join.switchToPassword}>
+              {tr("forge.community_join_sheet.use_password")}
+            </button>
+          </form>
+        );
+      }
       const signup = join.mode === "signup";
       return (
         <form
@@ -99,20 +145,6 @@ function JoinBody({ join }: { join: Join }) {
           }}
         >
           {problem}
-          <div className="fg:flex fg:gap-2" role="tablist">
-            {(["signup", "signin"] as const).map((mode) => (
-              <button
-                key={mode}
-                type="button"
-                role="tab"
-                aria-selected={join.mode === mode}
-                onClick={() => join.setMode(mode)}
-                style={join.mode === mode ? { ...button, flex: 1 } : { ...ghostButton, flex: 1 }}
-              >
-                {tr(mode === "signup" ? "forge.community_join_sheet.mode_signup" : "forge.community_join_sheet.mode_signin")}
-              </button>
-            ))}
-          </div>
           {signup && (
             <div className="fg:flex fg:gap-2">
               <label style={{ ...field, flex: 1 }}>
@@ -162,6 +194,9 @@ function JoinBody({ join }: { join: Join }) {
           <button type="submit" disabled={join.isSubmitting} style={button}>
             {join.isSubmitting ? tr("forge.community_join_sheet.working") : tr("forge.community_join_sheet.continue")}
           </button>
+          <button type="button" data-testid="community-join-use-code" style={linkButton} onClick={join.switchToEmailCode}>
+            {tr("forge.community_join_sheet.use_code")}
+          </button>
         </form>
       );
     }
@@ -175,7 +210,7 @@ function JoinBody({ join }: { join: Join }) {
             void join.next();
           }}
         >
-          <p>{tr("forge.community_join_sheet.code_sent", { email: join.mode === "signup" ? join.signup.email : join.login.email })}</p>
+          <p>{tr("forge.community_join_sheet.code_sent", { email: join.codeEmail })}</p>
           <label style={field}>
             {tr("forge.community_join_sheet.code")}
             <input
@@ -185,23 +220,88 @@ function JoinBody({ join }: { join: Join }) {
               maxLength={6}
               value={join.code}
               onChange={(e) => join.setCode(e.target.value.replace(/\D/g, ""))}
+              autoFocus
             />
           </label>
           {join.error && <p role="alert" style={errorText}>{join.error}</p>}
+          {join.mode === "email" && join.emailFlow.resent && !join.error && (
+            <p role="status" data-testid="community-join-code-resent" style={muted}>
+              {tr("forge.community_join_sheet.code_resent")}
+            </p>
+          )}
           <button type="submit" disabled={join.isSubmitting} style={button}>
             {join.isSubmitting ? tr("forge.community_join_sheet.working") : tr("forge.community_join_sheet.verify")}
           </button>
-          <div className="fg:flex fg:justify-between fg:gap-2">
-            <button type="button" style={ghostButton} onClick={join.back}>
-              {tr("forge.community_join_sheet.back")}
+          <div className="fg:flex fg:flex-wrap fg:justify-between fg:gap-2">
+            <button type="button" data-testid="community-join-change-email" style={linkButton} onClick={join.back}>
+              {join.mode === "email" ? tr("forge.community_join_sheet.different_email") : tr("forge.community_join_sheet.back")}
             </button>
-            <button type="button" style={ghostButton} onClick={() => void join.resendCode()}>
+            <button
+              type="button"
+              data-testid="community-join-resend"
+              style={linkButton}
+              disabled={join.isSubmitting}
+              onClick={() => void join.resendCode()}
+            >
               {tr("forge.community_join_sheet.resend")}
             </button>
           </div>
         </form>
       );
 
+    case "profile":
+      return (
+        <form
+          data-testid="community-join-profile"
+          className="fg:flex fg:flex-col fg:gap-3"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void join.next();
+          }}
+        >
+          <p style={{ fontWeight: 600 }}>{tr("forge.community_join_sheet.new_here", { email: join.emailFlow.email })}</p>
+          <div className="fg:flex fg:gap-2">
+            <label style={{ ...field, flex: 1, minWidth: 0 }}>
+              {tr("forge.community_join_sheet.first_name")}
+              <input
+                style={input}
+                value={join.emailFlow.firstName}
+                maxLength={100}
+                onChange={(e) => join.emailFlow.setFirstName(e.target.value)}
+                autoComplete="given-name"
+                autoFocus
+              />
+            </label>
+            <label style={{ ...field, flex: 1, minWidth: 0 }}>
+              {tr("forge.community_join_sheet.last_name")}
+              <input
+                style={input}
+                value={join.emailFlow.lastName}
+                maxLength={100}
+                onChange={(e) => join.emailFlow.setLastName(e.target.value)}
+                autoComplete="family-name"
+              />
+            </label>
+          </div>
+          <label className="fg:flex fg:items-center fg:gap-2" style={{ fontSize: 13 }}>
+            <input
+              type="checkbox"
+              checked={join.emailFlow.acceptedTerms}
+              onChange={(e) => join.emailFlow.setAcceptedTerms(e.target.checked)}
+              style={{ accentColor: t.primary }}
+            />
+            {tr("forge.community_join_sheet.accept_terms")}
+          </label>
+          {join.error && <p role="alert" style={errorText}>{join.error}</p>}
+          <button type="submit" disabled={join.isSubmitting} style={button}>
+            {join.isSubmitting ? tr("forge.community_join_sheet.working") : tr("forge.community_join_sheet.continue")}
+          </button>
+          <button type="button" data-testid="community-join-start-again" style={linkButton} onClick={join.back}>
+            {tr("forge.community_join_sheet.start_again")}
+          </button>
+        </form>
+      );
+
     case "tier":
       return (
         <div className="fg:flex fg:flex-col fg:gap-4" data-testid="community-join-tier">

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

@@ -1,27 +1,43 @@
-import { useState, type CSSProperties } from "react";
+import { useState, type CSSProperties, type ReactNode } from "react";
+import { ArrowDownCircle, ChevronRight, CreditCard, LogOut } from "lucide-react";
 import { useCommunityMembership } from "../../headless/communities/useCommunityMembership";
 import { useCommunityUpgradeOpener } from "../../../contexts/CommunityContext";
 import { useForgeLocale, useForgeT } from "../../../i18n";
+import { useAmountFormatter } from "../../format/useFormatCurrency";
 import { CommunitySheet, Pill, shortDate, useCommunityStyles } from "./shared";
 
 export interface CommunityMembershipMenuProps {
   /** Controlled open state. Omitted, the menu renders its own trigger button. */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** Format an amount in a currency. Defaults to the runtime currency formatter. */
+  formatAmount?: (amount: number, currencyCode?: string) => string;
   className?: string;
   style?: CSSProperties;
 }
 
 /**
- * The Membership menu inside a community: the current tier, when it renews,
- * a pending downgrade (visible and cancellable), and billing, downgrade and
- * cancel. Cancel keeps the paid period and asks first; a downgrade takes effect
- * at period end. Built on `useCommunityMembership`.
+ * The Membership menu inside a community.
+ *
+ * At the top, a summary card: the tier, what it costs per period (or Free),
+ * when it renews or ends, and any state to act on (Ending, Payment failed).
+ * Under it, Upgrade when a higher tier exists. Then the other actions as rows:
+ * update the card (paid memberships only: a free one has no card), switch to
+ * a lower tier, and last, in the destructive style, Cancel (paid) or Leave
+ * (free), which asks first. Cancel keeps the paid period; a downgrade takes
+ * effect at period end. Built on `useCommunityMembership`.
  */
-export function CommunityMembershipMenu({ open: openProp, onOpenChange, className, style }: CommunityMembershipMenuProps) {
+export function CommunityMembershipMenu({
+  open: openProp,
+  onOpenChange,
+  formatAmount,
+  className,
+  style,
+}: CommunityMembershipMenuProps) {
   const tr = useForgeT();
   const locale = useForgeLocale();
   const { t, button, ghostButton, muted, errorText, card } = useCommunityStyles();
+  const fmt = useAmountFormatter(formatAmount);
   const membership = useCommunityMembership();
   const opener = useCommunityUpgradeOpener();
   const [ownOpen, setOwnOpen] = useState(false);
@@ -30,11 +46,68 @@ export function CommunityMembershipMenu({ open: openProp, onOpenChange, classNam
 
   if (!membership.hasMembership) return null;
   const periodEnd = shortDate(membership.periodEnd, locale);
+  const { billing, isPaid } = membership;
+  const danger = errorText.color as string;
+
+  const price =
+    billing.amount !== null
+      ? tr(billing.cycle === "year" ? "forge.community_membership_menu.price_year" : "forge.community_membership_menu.price_month", {
+          amount: fmt(billing.amount, billing.currency ?? undefined),
+        })
+      : isPaid
+        ? null
+        : tr("forge.community_membership_menu.free");
+
+  const row = (opts: {
+    key: string;
+    icon: ReactNode;
+    label: string;
+    onPress: () => void;
+    destructive?: boolean;
+    disabled?: boolean;
+  }) => (
+    <button
+      key={opts.key}
+      type="button"
+      data-testid={`community-membership-row-${opts.key}`}
+      disabled={opts.disabled}
+      onClick={opts.onPress}
+      className="fg:flex fg:w-full fg:items-center fg:gap-3"
+      style={{
+        padding: "14px 4px",
+        background: "transparent",
+        border: "none",
+        borderBottom: `1px solid ${t.border}`,
+        color: opts.destructive ? danger : t.text,
+        fontFamily: t.fontFamily,
+        fontSize: 15,
+        fontWeight: 500,
+        textAlign: "left",
+        cursor: opts.disabled ? "default" : "pointer",
+        opacity: opts.disabled ? 0.6 : 1,
+      }}
+    >
+      <span aria-hidden className="fg:flex fg:shrink-0" style={{ color: opts.destructive ? danger : t.muted }}>
+        {opts.icon}
+      </span>
+      <span style={{ flex: 1 }}>{opts.label}</span>
+      {!opts.destructive && <ChevronRight size={16} aria-hidden style={{ color: t.muted }} />}
+    </button>
+  );
+
+  const canDowngrade = !membership.pendingDowngradeTier && !membership.isCancelling;
+  const canCancel = !membership.isCancelling && !membership.cancelRequested;
 
   return (
     <>
       {openProp === undefined && (
-        <button type="button" data-testid="community-membership-menu-trigger" className={className} style={{ ...ghostButton, ...style }} onClick={() => setOpen(true)}>
+        <button
+          type="button"
+          data-testid="community-membership-menu-trigger"
+          className={className}
+          style={{ ...ghostButton, ...style }}
+          onClick={() => setOpen(true)}
+        >
           {tr("forge.community_membership_menu.trigger")}
         </button>
       )}
@@ -49,17 +122,38 @@ export function CommunityMembershipMenu({ open: openProp, onOpenChange, classNam
         closeLabel={tr("forge.community_membership_menu.aria_close")}
       >
         <div className="fg:flex fg:flex-col fg:gap-4">
-          <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
-            <span style={{ fontWeight: 700 }}>{membership.membership?.tierName}</span>
-            {membership.isCancelling && <Pill>{tr("forge.community_membership_menu.ending")}</Pill>}
-            {membership.isPastDue && <Pill>{tr("forge.community_membership_menu.payment_failed")}</Pill>}
+          <div data-testid="community-membership-summary" style={{ ...card, padding: 16 }}>
+            <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+              <span style={{ fontWeight: 700, fontSize: 17 }}>{membership.membership?.tierName}</span>
+              {membership.isCancelling && <Pill>{tr("forge.community_membership_menu.ending")}</Pill>}
+              {membership.isPastDue && <Pill>{tr("forge.community_membership_menu.payment_failed")}</Pill>}
+            </div>
+            {price && (
+              <p data-testid="community-membership-price" style={{ fontSize: 15, fontWeight: 600, margin: "6px 0 0" }}>
+                {price}
+              </p>
+            )}
+            {periodEnd && (
+              <p data-testid="community-membership-period" style={{ ...muted, margin: "4px 0 0" }}>
+                {membership.isCancelling
+                  ? tr("forge.community_membership_menu.ends_on", { date: periodEnd })
+                  : tr("forge.community_membership_menu.renews_on", { date: periodEnd })}
+              </p>
+            )}
           </div>
-          {periodEnd && (
-            <p style={muted}>
-              {membership.isCancelling
-                ? tr("forge.community_membership_menu.ends_on", { date: periodEnd })
-                : tr("forge.community_membership_menu.renews_on", { date: periodEnd })}
-            </p>
+
+          {opener && membership.hasUpgrade && (
+            <button
+              type="button"
+              data-testid="community-membership-upgrade"
+              style={button}
+              onClick={() => {
+                setOpen(false);
+                opener.openUpgrade(null);
+              }}
+            >
+              {tr("forge.community_membership_menu.upgrade")}
+            </button>
           )}
 
           {membership.pendingDowngradeTier && (
@@ -70,62 +164,84 @@ export function CommunityMembershipMenu({ open: openProp, onOpenChange, classNam
                   date: periodEnd,
                 })}
               </p>
-              <button type="button" style={{ ...ghostButton, marginTop: 8 }} disabled={membership.isWorking} onClick={() => void membership.undoDowngrade()}>
+              <button
+                type="button"
+                style={{ ...ghostButton, marginTop: 8 }}
+                disabled={membership.isWorking}
+                onClick={() => void membership.undoDowngrade()}
+              >
                 {tr("forge.community_membership_menu.undo_downgrade")}
               </button>
             </div>
           )}
 
-          <div className="fg:flex fg:flex-col fg:gap-2">
-            {opener && (
-              <button
-                type="button"
-                style={button}
-                onClick={() => {
-                  setOpen(false);
-                  opener.openUpgrade(null);
-                }}
-              >
-                {tr("forge.community_membership_menu.upgrade")}
-              </button>
-            )}
-            <button type="button" style={ghostButton} disabled={membership.isWorking} onClick={() => void membership.updateCard()}>
-              {tr("forge.community_membership_menu.update_card")}
-            </button>
-            {!membership.pendingDowngradeTier &&
-              !membership.isCancelling &&
-              membership.downgradeTiers.map((tier) => (
-                <button key={tier.id} type="button" style={ghostButton} disabled={membership.isWorking} onClick={() => void membership.downgrade(tier.id)}>
-                  {tr("forge.community_membership_menu.downgrade_to", { tier_name: tier.name })}
-                </button>
-              ))}
-            {!membership.isCancelling && !membership.cancelRequested && (
-              <button type="button" style={{ ...ghostButton, color: t.text }} onClick={membership.requestCancel}>
-                {tr("forge.community_membership_menu.cancel")}
-              </button>
-            )}
+          <div style={{ borderTop: `1px solid ${t.border}` }}>
+            {isPaid &&
+              row({
+                key: "update-card",
+                icon: <CreditCard size={18} />,
+                label: tr("forge.community_membership_menu.update_card"),
+                disabled: membership.isWorking,
+                onPress: () => void membership.updateCard(),
+              })}
+            {canDowngrade &&
+              membership.downgradeTiers.map((tier) =>
+                row({
+                  key: `downgrade-${tier.id}`,
+                  icon: <ArrowDownCircle size={18} />,
+                  label: tr("forge.community_membership_menu.downgrade_to", { tier_name: tier.name }),
+                  disabled: membership.isWorking,
+                  onPress: () => void membership.downgrade(tier.id),
+                }),
+              )}
+            {canCancel &&
+              row({
+                key: "cancel",
+                icon: <LogOut size={18} />,
+                label: isPaid ? tr("forge.community_membership_menu.cancel") : tr("forge.community_membership_menu.leave"),
+                destructive: true,
+                onPress: membership.requestCancel,
+              })}
           </div>
 
           {/* A destructive confirmation is read every time, so it is content, not a hint. */}
           {membership.cancelRequested && (
             <div role="alertdialog" aria-modal="false" data-testid="community-membership-cancel-confirm" style={card}>
-              <p style={{ fontWeight: 700 }}>{tr("forge.community_membership_menu.cancel_confirm_title")}</p>
+              <p style={{ fontWeight: 700 }}>
+                {isPaid
+                  ? tr("forge.community_membership_menu.cancel_confirm_title")
+                  : tr("forge.community_membership_menu.leave_confirm_title")}
+              </p>
               <p style={{ fontSize: 14, marginTop: 6 }}>
                 {periodEnd
                   ? tr("forge.community_membership_menu.cancel_confirm_until", { date: periodEnd })
-                  : tr("forge.community_membership_menu.cancel_confirm_now")}
+                  : isPaid
+                    ? tr("forge.community_membership_menu.cancel_confirm_now")
+                    : tr("forge.community_membership_menu.leave_confirm_now")}
               </p>
               <div className="fg:flex fg:justify-end fg:gap-2" style={{ marginTop: 12 }}>
                 <button type="button" style={ghostButton} onClick={membership.abortCancel}>
-                  {tr("forge.community_membership_menu.cancel_keep")}
+                  {isPaid ? tr("forge.community_membership_menu.cancel_keep") : tr("forge.community_membership_menu.leave_keep")}
                 </button>
-                <button type="button" style={button} disabled={membership.isWorking} onClick={() => void membership.confirmCancel()}>
-                  {tr("forge.community_membership_menu.cancel_confirm")}
+                <button
+                  type="button"
+                  data-testid="community-membership-cancel-confirm-button"
+                  style={button}
+                  disabled={membership.isWorking}
+                  onClick={() => void membership.confirmCancel()}
+                >
+                  {isPaid
+                    ? tr("forge.community_membership_menu.cancel_confirm")
+                    : tr("forge.community_membership_menu.leave_confirm")}
                 </button>
               </div>
             </div>
           )}
-          {membership.error && <p role="alert" style={errorText}>{membership.error}</p>}
+          {membership.error && (
+            <p role="alert" style={errorText}>
+              {membership.error}
+            </p>
+          )}
         </div>
       </CommunitySheet>
     </>

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

@@ -0,0 +1,75 @@
+import { useState, type CSSProperties } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { useCommunityWiki } from "../../headless/communities/useCommunityWiki";
+import { CommunityWikiPageView } from "./CommunityWiki";
+import { useCommunityStyles } from "./shared";
+
+export interface CommunityPublicWikiProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The community's PUBLIC wiki pages (the guidelines, by default) on its About
+ * page, so a visitor can read them before joining. Each page is a section that
+ * opens in place and loads its content only then. Renders nothing when the
+ * community has no public pages. Must sit inside `<CommunityProvider>`. Built
+ * on `useCommunityWiki({ publicOnly: true })`.
+ */
+export function CommunityPublicWiki({ className, style }: CommunityPublicWikiProps) {
+  const tr = useForgeT();
+  const { t, card } = useCommunityStyles();
+  const wiki = useCommunityWiki({ publicOnly: true });
+  const [openSlug, setOpenSlug] = useState<string | null>(null);
+
+  if (wiki.isLoading || wiki.readablePages.length === 0) return null;
+
+  return (
+    <section
+      data-testid="community-public-wiki"
+      className={className}
+      style={{ marginTop: 32, color: t.text, ...style }}
+    >
+      <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.community_public_wiki.title")}
+      </h2>
+      <div className="fg:flex fg:flex-col fg:gap-3">
+        {wiki.readablePages.map((page) => {
+          const open = openSlug === page.slug;
+          const panelId = `community-public-wiki-${page.id}`;
+          return (
+            <div key={page.id} data-testid="community-public-wiki-item" style={{ ...card, padding: 0 }}>
+              <button
+                type="button"
+                aria-expanded={open}
+                aria-controls={panelId}
+                onClick={() => setOpenSlug(open ? null : page.slug)}
+                className="fg:flex fg:w-full fg:items-center fg:gap-2"
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  padding: "14px 18px",
+                  cursor: "pointer",
+                  color: t.text,
+                  fontSize: 16,
+                  fontWeight: 600,
+                  textAlign: "left",
+                  fontFamily: "inherit",
+                }}
+              >
+                {open ? <ChevronDown size={16} aria-hidden /> : <ChevronRight size={16} aria-hidden />}
+                {page.title}
+              </button>
+              {open && (
+                <div id={panelId} style={{ padding: "0 18px 18px" }}>
+                  <CommunityWikiPageView pageSlug={page.slug} hideTitle />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}