@tribe-nest/forge 3.58.0 → 3.60.0

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

@@ -0,0 +1,444 @@
+import type { CSSProperties } from "react";
+import { useCommunityJoin, type UseCommunityJoinOptions } from "../../headless/communities/useCommunityJoin";
+import type { PublicTier } from "../../../data/queries/useCommunities";
+import type { CommunityInviteProblem } from "../../headless/communities/useCommunityInvite";
+import { useSiteConfig } from "../../../data/queries/useWebsite";
+import { useForgeLocale, useForgeT, type ForgeT } from "../../../i18n";
+import { usePaymentRenderer } from "../../payment/ForgePaymentProvider";
+import { formatCurrency } from "../../format/useFormatCurrency";
+import { cycleFloor, cycleIsFree, type BillingCycle } from "../../format/membershipPwyw";
+import { membershipPriceLabel } from "../../format/membershipPriceLabel";
+import { formatTrialDate } from "../../headless/membership/membershipTrial";
+import { CallHelpHint } from "../../media/CallHelpHint";
+import { Loading } from "../Loading";
+import { PaystackPayButton } from "../PaystackPayButton";
+import { CommunitySheet, useCommunityStyles } from "./shared";
+
+export interface CommunityJoinSheetProps extends Omit<UseCommunityJoinOptions, "tierId"> {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The tier the sheet opens on (`?tier=`, or a tier card's own Join). An invite's tier wins. */
+  tierId?: string | null;
+}
+
+/**
+ * The join sheet: the About page's Join, in place. Every step is
+ * `useCommunityJoin` plus markup; the step order, what is skipped, invites and
+ * provider differences all live in the hook.
+ */
+export function CommunityJoinSheet({ open, onOpenChange, ...options }: CommunityJoinSheetProps) {
+  const tr = useForgeT();
+  // The flow lives HERE, outside the dialog content, so a Paystack stand-down
+  // that remounts the content does not reset it.
+  const join = useCommunityJoin(options);
+  return (
+    <CommunitySheet
+      open={open}
+      onOpenChange={onOpenChange}
+      testId="community-join-sheet"
+      title={join.community ? tr("forge.community_join_sheet.title", { community_name: join.community.name }) : tr("forge.community_join_sheet.title_plain")}
+      closeLabel={tr("forge.community_join_sheet.aria_close")}
+    >
+      <JoinBody join={join} />
+    </CommunitySheet>
+  );
+}
+
+type Join = ReturnType<typeof useCommunityJoin>;
+
+/** Why an invite link cannot be used, said plainly. The normal Join still works underneath. */
+const INVITE_PROBLEM_KEYS: Record<CommunityInviteProblem, string> = {
+  expired: "forge.community_join_sheet.invite_expired",
+  revoked: "forge.community_join_sheet.invite_revoked",
+  used: "forge.community_join_sheet.invite_used",
+  used_up: "forge.community_join_sheet.invite_used_up",
+  not_found: "forge.community_join_sheet.invite_not_found",
+};
+
+function JoinBody({ join }: { join: Join }) {
+  const tr = useForgeT();
+  const { t, button, ghostButton, input, muted, errorText } = useCommunityStyles();
+  const locale = useForgeLocale();
+  const renderPayment = usePaymentRenderer();
+  const currency = useSiteConfig().data?.currency;
+  const money = (amount: number) => formatCurrency(amount, currency);
+  const field: CSSProperties = { display: "flex", flexDirection: "column", gap: 6, fontSize: 14 };
+
+  if (join.isLoading) return <Loading />;
+
+  const problem = join.inviteProblem && (
+    <p role="alert" data-testid="community-join-invite-problem" style={{ ...muted, fontWeight: 600, marginBottom: 12 }}>
+      {tr(INVITE_PROBLEM_KEYS[join.inviteProblem])}
+    </p>
+  );
+
+  switch (join.step) {
+    case "email": {
+      if (join.emailMismatch) {
+        return (
+          <div data-testid="community-join-email-mismatch" className="fg:flex fg:flex-col fg:gap-3">
+            <p role="alert" style={{ fontWeight: 600 }}>
+              {tr("forge.community_join_sheet.email_mismatch", {
+                email: join.emailMismatch.invitedEmail,
+                signed_in_email: join.emailMismatch.signedInEmail,
+              })}
+            </p>
+            <button type="button" style={button} onClick={() => void join.signInAsInvited()}>
+              {tr("forge.community_join_sheet.sign_in_as", { email: join.emailMismatch.invitedEmail })}
+            </button>
+          </div>
+        );
+      }
+      const signup = join.mode === "signup";
+      return (
+        <form
+          className="fg:flex fg:flex-col fg:gap-3"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void join.next();
+          }}
+        >
+          {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 }}>
+                {tr("forge.community_join_sheet.first_name")}
+                <input style={input} value={join.signup.firstName} onChange={(e) => join.signup.setFirstName(e.target.value)} autoComplete="given-name" />
+              </label>
+              <label style={{ ...field, flex: 1 }}>
+                {tr("forge.community_join_sheet.last_name")}
+                <input style={input} value={join.signup.lastName} onChange={(e) => join.signup.setLastName(e.target.value)} autoComplete="family-name" />
+              </label>
+            </div>
+          )}
+          <label style={field}>
+            {tr("forge.community_join_sheet.email")}
+            <input
+              style={{ ...input, opacity: join.emailLocked ? 0.75 : 1 }}
+              type="email"
+              value={signup ? join.signup.email : join.login.email}
+              readOnly={join.emailLocked}
+              aria-readonly={join.emailLocked}
+              onChange={(e) => (signup ? join.signup.setEmail(e.target.value) : join.login.setEmail(e.target.value))}
+              autoComplete="email"
+            />
+          </label>
+          <label style={field}>
+            {tr("forge.community_join_sheet.password")}
+            <input
+              style={input}
+              type="password"
+              value={signup ? join.signup.password : join.login.password}
+              onChange={(e) => (signup ? join.signup.setPassword(e.target.value) : join.login.setPassword(e.target.value))}
+              autoComplete={signup ? "new-password" : "current-password"}
+            />
+          </label>
+          {signup && (
+            <label className="fg:flex fg:items-center fg:gap-2" style={{ fontSize: 13 }}>
+              <input
+                type="checkbox"
+                checked={join.signup.acceptedTerms}
+                onChange={(e) => join.signup.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>
+        </form>
+      );
+    }
+
+    case "code":
+      return (
+        <form
+          className="fg:flex fg:flex-col fg:gap-3"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void join.next();
+          }}
+        >
+          <p>{tr("forge.community_join_sheet.code_sent", { email: join.mode === "signup" ? join.signup.email : join.login.email })}</p>
+          <label style={field}>
+            {tr("forge.community_join_sheet.code")}
+            <input
+              style={{ ...input, letterSpacing: 4 }}
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              maxLength={6}
+              value={join.code}
+              onChange={(e) => join.setCode(e.target.value.replace(/\D/g, ""))}
+            />
+          </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.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")}
+            </button>
+            <button type="button" style={ghostButton} onClick={() => void join.resendCode()}>
+              {tr("forge.community_join_sheet.resend")}
+            </button>
+          </div>
+        </form>
+      );
+
+    case "tier":
+      return (
+        <div className="fg:flex fg:flex-col fg:gap-4" data-testid="community-join-tier">
+          {problem}
+          {join.hasTierChoice && (
+            <div className="fg:flex fg:flex-col fg:gap-2" role="radiogroup" aria-label={tr("forge.community_join_sheet.choose_tier")}>
+              {join.tiers.map((tier) => (
+                <TierOption key={tier.id} tier={tier} selected={join.selectedTier?.id === tier.id} onSelect={() => join.selectTier(tier)} t={tr} money={money} />
+              ))}
+            </div>
+          )}
+          {join.selectedTier && (
+            <div className="fg:flex fg:flex-col fg:gap-3">
+              {!join.hasTierChoice && (
+                <div>
+                  <p style={{ fontWeight: 700 }}>{join.selectedTier.name}</p>
+                  <p style={muted}>{membershipPriceLabel(join.selectedTier, tr, money)}</p>
+                </div>
+              )}
+              {join.cycles.month && join.cycles.year && (
+                <div className="fg:flex fg:flex-wrap fg:gap-4" role="radiogroup" aria-label={tr("forge.community_join_sheet.billing_cycle")}>
+                  {(["month", "year"] as const).map((cycle) => (
+                    <label key={cycle} className="fg:flex fg:items-center fg:gap-2" style={{ cursor: "pointer", fontSize: 14 }}>
+                      <input
+                        type="radio"
+                        checked={join.billingCycle === cycle}
+                        onChange={() => join.setBillingCycle(cycle)}
+                        style={{ accentColor: t.primary }}
+                      />
+                      {cycleLabel(join.selectedTier!, cycle, tr, money)}
+                    </label>
+                  ))}
+                </div>
+              )}
+              {join.selectedTier.payWhatYouWant && (
+                <label style={field}>
+                  {tr("forge.community_join_sheet.amount_label", { minimum: money(join.minimumAmount) })}
+                  <input
+                    style={{ ...input, borderColor: join.amountRefusal ? "#ef4444" : undefined }}
+                    type="number"
+                    min={join.minimumAmount}
+                    step="any"
+                    value={join.customAmount || ""}
+                    aria-invalid={!!join.amountRefusal}
+                    onChange={(e) => join.setCustomAmount(Number(e.target.value))}
+                  />
+                </label>
+              )}
+              {join.amountRefusal && (
+                <p role="alert" style={errorText}>
+                  {join.amountRefusal.reason === "below_minimum"
+                    ? tr("forge.community_join_sheet.amount_below_minimum", { minimum: money(join.amountRefusal.minimum) })
+                    : tr("forge.community_join_sheet.amount_not_positive")}
+                </p>
+              )}
+              {join.trialDays > 0 && join.trialEndsAt && (
+                <p data-testid="community-join-trial" style={{ fontSize: 14, fontWeight: 600 }}>
+                  {tr("forge.community_join_sheet.trial_line", { days: join.trialDays, date: formatTrialDate(join.trialEndsAt, locale) })}
+                </p>
+              )}
+            </div>
+          )}
+          {join.error && <p role="alert" style={errorText}>{join.error}</p>}
+          <button type="button" disabled={!join.selectedTier || join.isSubmitting} style={button} onClick={() => void join.next()}>
+            {submitLabel(join, tr, money)}
+          </button>
+        </div>
+      );
+
+    case "questions":
+      return (
+        <form
+          className="fg:flex fg:flex-col fg:gap-3"
+          data-testid="community-join-questions"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void join.next();
+          }}
+        >
+          {join.questionnaire.map((q) => {
+            const value = join.questionnaireAnswers[q.id] ?? "";
+            const missing = !!join.questionnaireRefusal && !q.optional && !value.trim();
+            const style = { ...input, borderColor: missing ? "#ef4444" : undefined };
+            return (
+              <label key={q.id} style={field}>
+                <span>
+                  {q.question}
+                  {!q.optional && <span aria-hidden="true" style={{ color: "#ef4444" }}> *</span>}
+                </span>
+                {q.type === "select" && q.options?.length ? (
+                  <select style={style} value={value} aria-invalid={missing} onChange={(e) => join.setQuestionnaireAnswer(q.id, e.target.value)}>
+                    <option value="">{tr("forge.community_join_sheet.select_placeholder")}</option>
+                    {q.options.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                ) : q.type === "textarea" ? (
+                  <textarea
+                    style={{ ...style, height: "auto", resize: "vertical" }}
+                    rows={3}
+                    value={value}
+                    aria-invalid={missing}
+                    onChange={(e) => join.setQuestionnaireAnswer(q.id, e.target.value)}
+                  />
+                ) : (
+                  <input style={style} value={value} aria-invalid={missing} onChange={(e) => join.setQuestionnaireAnswer(q.id, e.target.value)} />
+                )}
+              </label>
+            );
+          })}
+          {join.questionnaireRefusal && (
+            <p role="alert" style={errorText}>
+              {tr("forge.community_join_sheet.answer_required", { question: join.questionnaireRefusal.question })}
+            </p>
+          )}
+          {join.error && <p role="alert" style={errorText}>{join.error}</p>}
+          <div className="fg:flex fg:gap-2">
+            <button type="button" style={ghostButton} onClick={join.back}>
+              {tr("forge.community_join_sheet.back")}
+            </button>
+            <button type="submit" disabled={join.isSubmitting} style={{ ...button, flex: 1 }}>
+              {submitLabel(join, tr, money)}
+            </button>
+          </div>
+        </form>
+      );
+
+    case "payment":
+      return (
+        <div className="fg:flex fg:flex-col fg:gap-3" data-testid="community-join-payment">
+          <p style={{ fontWeight: 700 }}>
+            {join.setupPurpose === "application"
+              ? tr("forge.community_join_sheet.card_application")
+              : join.setupPurpose === "trial"
+                ? tr("forge.community_join_sheet.card_trial")
+                : tr("forge.community_join_sheet.card_payment", { amount: money(join.amount) })}
+            {join.setupPurpose === "application" && (
+              <CallHelpHint label={tr("forge.community_join_sheet.card_application_help_label")}>
+                {tr("forge.community_join_sheet.card_application_help")}
+              </CallHelpHint>
+            )}
+          </p>
+          {join.isPaystack ? (
+            <PaystackPayButton onPay={join.openPaystackCheckout} label={tr("forge.community_join_sheet.pay", { amount: money(join.amount) })} />
+          ) : (
+            join.clientSecret &&
+            renderPayment({
+              clientSecret: join.clientSecret,
+              returnUrl: join.returnUrl,
+              amount: join.amount,
+              currency,
+              mode: "manual",
+              trial: join.trial,
+              onSucceeded: () => void join.onPaymentSucceeded(),
+              onFailed: () => {},
+            })
+          )}
+          {join.error && <p role="alert" style={errorText}>{join.error}</p>}
+          <button type="button" style={ghostButton} onClick={join.back}>
+            {tr("forge.community_join_sheet.back")}
+          </button>
+        </div>
+      );
+
+    case "submitting":
+      return (
+        <div className="fg:flex fg:flex-col fg:items-center fg:gap-3" style={{ padding: 16 }}>
+          <Loading />
+          <p style={muted}>{tr("forge.community_join_sheet.joining")}</p>
+        </div>
+      );
+
+    case "pending":
+      return (
+        <div data-testid="community-join-pending" className="fg:flex fg:flex-col fg:gap-2">
+          <p style={{ fontWeight: 700 }}>{tr("forge.community_join_sheet.pending_title")}</p>
+          <p style={muted}>{tr("forge.community_join_sheet.pending_body")}</p>
+        </div>
+      );
+
+    case "joined":
+      return (
+        <div data-testid="community-join-joined" className="fg:flex fg:flex-col fg:gap-2">
+          <p style={{ fontWeight: 700 }}>
+            {join.alreadyMember ? tr("forge.community_join_sheet.already_member") : tr("forge.community_join_sheet.joined_title")}
+          </p>
+          <p style={muted}>{tr("forge.community_join_sheet.taking_you_inside")}</p>
+        </div>
+      );
+  }
+}
+
+function TierOption({
+  tier,
+  selected,
+  onSelect,
+  t,
+  money,
+}: {
+  tier: PublicTier;
+  selected: boolean;
+  onSelect: () => void;
+  t: ForgeT;
+  money: (amount: number) => string;
+}) {
+  const { t: tokens, card } = useCommunityStyles();
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={selected}
+      onClick={onSelect}
+      className="fg:flex fg:flex-col fg:gap-1 fg:text-left"
+      style={{ ...card, padding: 14, cursor: "pointer", font: "inherit", borderColor: selected ? tokens.primary : tokens.border }}
+    >
+      <span style={{ fontWeight: 700 }}>{tier.name}</span>
+      <span style={{ fontSize: 13, color: tokens.muted }}>{membershipPriceLabel(tier, t, money)}</span>
+      {!!tier.benefits?.length && (
+        <span style={{ fontSize: 13 }}>{tier.benefits.slice(0, 3).map((benefit) => benefit.title).join(", ")}</span>
+      )}
+    </button>
+  );
+}
+
+function cycleLabel(tier: PublicTier, cycle: BillingCycle, t: ForgeT, money: (amount: number) => string): string {
+  const amount = money(cycleFloor(tier, cycle));
+  if (cycleIsFree(tier, cycle)) return t(cycle === "month" ? "forge.community_join_sheet.monthly" : "forge.community_join_sheet.yearly");
+  return t(cycle === "month" ? "forge.community_join_sheet.monthly_price" : "forge.community_join_sheet.yearly_price", { amount });
+}
+
+function submitLabel(join: Join, t: ForgeT, money: (amount: number) => string): string {
+  if (join.isSubmitting) return t("forge.community_join_sheet.working");
+  if (join.isApplication) return t("forge.community_join_sheet.apply");
+  if (join.isChange) return t("forge.community_join_sheet.change_tier");
+  if (join.isFreeCycle) return t("forge.community_join_sheet.join_free");
+  if (join.trialDays > 0) return t("forge.community_join_sheet.start_trial");
+  return t("forge.community_join_sheet.join_for", { amount: money(join.amount) });
+}

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

@@ -0,0 +1,133 @@
+import { useState, type CSSProperties } from "react";
+import { useCommunityMembership } from "../../headless/communities/useCommunityMembership";
+import { useCommunityUpgradeOpener } from "../../../contexts/CommunityContext";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+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;
+  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`.
+ */
+export function CommunityMembershipMenu({ open: openProp, onOpenChange, className, style }: CommunityMembershipMenuProps) {
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const { t, button, ghostButton, muted, errorText, card } = useCommunityStyles();
+  const membership = useCommunityMembership();
+  const opener = useCommunityUpgradeOpener();
+  const [ownOpen, setOwnOpen] = useState(false);
+  const open = openProp ?? ownOpen;
+  const setOpen = onOpenChange ?? setOwnOpen;
+
+  if (!membership.hasMembership) return null;
+  const periodEnd = shortDate(membership.periodEnd, locale);
+
+  return (
+    <>
+      {openProp === undefined && (
+        <button type="button" data-testid="community-membership-menu-trigger" className={className} style={{ ...ghostButton, ...style }} onClick={() => setOpen(true)}>
+          {tr("forge.community_membership_menu.trigger")}
+        </button>
+      )}
+      <CommunitySheet
+        open={open}
+        onOpenChange={(next) => {
+          if (!next) membership.abortCancel();
+          setOpen(next);
+        }}
+        testId="community-membership-menu"
+        title={tr("forge.community_membership_menu.title")}
+        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>
+          {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>
+          )}
+
+          {membership.pendingDowngradeTier && (
+            <div role="status" data-testid="community-membership-pending-downgrade" style={card}>
+              <p style={{ fontSize: 14 }}>
+                {tr("forge.community_membership_menu.pending_downgrade", {
+                  tier_name: membership.pendingDowngradeTier.name,
+                  date: periodEnd,
+                })}
+              </p>
+              <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>
+
+          {/* 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={{ fontSize: 14, marginTop: 6 }}>
+                {periodEnd
+                  ? tr("forge.community_membership_menu.cancel_confirm_until", { date: periodEnd })
+                  : tr("forge.community_membership_menu.cancel_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")}
+                </button>
+                <button type="button" style={button} disabled={membership.isWorking} onClick={() => void membership.confirmCancel()}>
+                  {tr("forge.community_membership_menu.cancel_confirm")}
+                </button>
+              </div>
+            </div>
+          )}
+          {membership.error && <p role="alert" style={errorText}>{membership.error}</p>}
+        </div>
+      </CommunitySheet>
+    </>
+  );
+}

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

@@ -0,0 +1,49 @@
+import type { CSSProperties } from "react";
+import { Clock } from "lucide-react";
+import { useCommunity } from "../../headless/communities/useCommunity";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+import { Loading } from "../Loading";
+import { shortDate, useCommunityStyles } from "./shared";
+
+export interface CommunityPendingProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The community home for a fan whose application is being reviewed: what the
+ * community is, and that the application is waiting. No member content.
+ * Approval turns the same URL into the full home without a new link. Must sit
+ * inside `<CommunityProvider>`. Built on `useCommunity` (`isPending`,
+ * `pendingSince`).
+ */
+export function CommunityPending({ className, style }: CommunityPendingProps) {
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const { t, card, muted } = useCommunityStyles();
+  const community = useCommunity();
+
+  if (community.isLoading && !community.community) return <Loading fullPage />;
+
+  return (
+    <div className={className} data-testid="community-pending" style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
+      {community.community && (
+        <div className="fg:flex fg:flex-col fg:gap-2" style={{ marginBottom: 24 }}>
+          <h1 style={{ fontSize: 28, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>{community.community.name}</h1>
+          {community.community.description && <p style={{ whiteSpace: "pre-line", opacity: 0.85 }}>{community.community.description}</p>}
+        </div>
+      )}
+      <div role="status" className="fg:flex fg:items-start fg:gap-3" style={card}>
+        <Clock size={22} style={{ color: t.primary, flexShrink: 0, marginTop: 2 }} />
+        <div>
+          <p style={{ fontWeight: 700 }}>{tr("forge.community_pending.title")}</p>
+          <p style={muted}>
+            {community.pendingSince
+              ? tr("forge.community_pending.body_since", { date: shortDate(community.pendingSince, locale) })
+              : tr("forge.community_pending.body")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}