@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -0,0 +1,249 @@
+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.
+ *
+ * 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,
+  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);
+  const open = openProp ?? ownOpen;
+  const setOpen = onOpenChange ?? setOwnOpen;
+
+  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)}
+        >
+          {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 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>
+
+          {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 && (
+            <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 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 }}>
+                {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 })
+                  : 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}>
+                  {isPaid ? tr("forge.community_membership_menu.cancel_keep") : tr("forge.community_membership_menu.leave_keep")}
+                </button>
+                <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>
+          )}
+        </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>
+  );
+}

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>
+  );
+}

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

@@ -0,0 +1,137 @@
+import { useEffect } from "react";
+import { useCommunityUpgrade, type UseCommunityUpgradeOptions } from "../../headless/communities/useCommunityUpgrade";
+import { useSiteConfig } from "../../../data/queries/useWebsite";
+import { useForgeT } from "../../../i18n";
+import { usePaymentRenderer } from "../../payment/ForgePaymentProvider";
+import { formatCurrency } from "../../format/useFormatCurrency";
+import { Loading } from "../Loading";
+import { PaystackPayButton } from "../PaystackPayButton";
+import { CommunitySheet, useCommunityStyles } from "./shared";
+
+export interface CommunityUpgradeSheetProps extends UseCommunityUpgradeOptions {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * The upgrade sheet: only the tiers above the member's current one. On Stripe
+ * one tap moves the saved subscription with a prorated charge; on Paystack the
+ * sheet says the card is collected again BEFORE the fan confirms. Every locked
+ * item's "Unlock with {tier}" opens this with that tier chosen. Built on
+ * `useCommunityUpgrade`.
+ */
+export function CommunityUpgradeSheet({ open, onOpenChange, ...options }: CommunityUpgradeSheetProps) {
+  const tr = useForgeT();
+  const { button, ghostButton, card, muted, errorText, t } = useCommunityStyles();
+  const renderPayment = usePaymentRenderer();
+  const currency = useSiteConfig().data?.currency;
+  const upgrade = useCommunityUpgrade(options);
+  const money = (amount: number | null | undefined, code?: string) => formatCurrency(amount ?? 0, code ?? currency);
+
+  // Re-opened on a different locked item: start on that item's tier.
+  useEffect(() => {
+    if (open && options.initialTierId && upgrade.selectedTierId !== options.initialTierId) upgrade.select(options.initialTierId);
+    if (!open) upgrade.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, options.initialTierId]);
+
+  return (
+    <CommunitySheet
+      open={open}
+      onOpenChange={onOpenChange}
+      testId="community-upgrade-sheet"
+      title={tr("forge.community_upgrade_sheet.title")}
+      closeLabel={tr("forge.community_upgrade_sheet.aria_close")}
+    >
+      {upgrade.isLoading ? (
+        <Loading />
+      ) : upgrade.step === "choose" ? (
+        upgrade.options.length === 0 ? (
+          <p style={muted}>{tr("forge.community_upgrade_sheet.none")}</p>
+        ) : (
+          <div className="fg:flex fg:flex-col fg:gap-3">
+            {upgrade.currentTierName && (
+              <p style={muted}>{tr("forge.community_upgrade_sheet.current", { tier_name: upgrade.currentTierName })}</p>
+            )}
+            {upgrade.options.map((option) => (
+              <button
+                key={option.id}
+                type="button"
+                data-testid="community-upgrade-option"
+                onClick={() => upgrade.select(option.id)}
+                className="fg:flex fg:flex-col fg:gap-1 fg:text-left"
+                style={{ ...card, padding: 14, cursor: "pointer", font: "inherit" }}
+              >
+                <span style={{ fontWeight: 700 }}>{option.name}</span>
+                <span style={{ fontSize: 13, color: t.muted }}>
+                  {option.priceMonthly
+                    ? tr("forge.community_upgrade_sheet.price_monthly", { amount: money(option.priceMonthly) })
+                    : option.priceYearly
+                      ? tr("forge.community_upgrade_sheet.price_yearly", { amount: money(option.priceYearly) })
+                      : ""}
+                </span>
+                {!!option.tier?.benefits?.length && (
+                  <span style={{ fontSize: 13 }}>{option.tier.benefits.slice(0, 3).map((benefit) => benefit.title).join(", ")}</span>
+                )}
+              </button>
+            ))}
+          </div>
+        )
+      ) : upgrade.step === "confirm" ? (
+        <div className="fg:flex fg:flex-col fg:gap-3" data-testid="community-upgrade-confirm">
+          <p style={{ fontWeight: 700 }}>
+            {tr("forge.community_upgrade_sheet.unlock_with", { tier_name: upgrade.selected?.name ?? "" })}
+          </p>
+          {upgrade.previewLoading ? (
+            <Loading />
+          ) : upgrade.preview ? (
+            <p>
+              {upgrade.prorated
+                ? tr("forge.community_upgrade_sheet.charge_prorated", { amount: money(upgrade.preview.amount, upgrade.preview.currency) })
+                : tr("forge.community_upgrade_sheet.charge_now", { amount: money(upgrade.preview.amount, upgrade.preview.currency) })}
+            </p>
+          ) : null}
+          {/* What confirming will do to the card is a warning about the action, so it stays visible. */}
+          {upgrade.requiresCard && (
+            <p role="alert" data-testid="community-upgrade-requires-card" style={{ fontWeight: 600 }}>
+              {tr("forge.community_upgrade_sheet.requires_card")}
+            </p>
+          )}
+          {upgrade.error && <p role="alert" style={errorText}>{upgrade.error}</p>}
+          <div className="fg:flex fg:gap-2">
+            <button type="button" style={ghostButton} onClick={upgrade.back}>
+              {tr("forge.community_upgrade_sheet.back")}
+            </button>
+            <button type="button" style={{ ...button, flex: 1 }} disabled={upgrade.isSubmitting} onClick={() => void upgrade.upgrade()}>
+              {upgrade.requiresCard ? tr("forge.community_upgrade_sheet.continue_to_card") : tr("forge.community_upgrade_sheet.confirm")}
+            </button>
+          </div>
+        </div>
+      ) : upgrade.step === "payment" ? (
+        <div className="fg:flex fg:flex-col fg:gap-3" data-testid="community-upgrade-payment">
+          {upgrade.isPaystack ? (
+            <PaystackPayButton onPay={upgrade.openPaystackCheckout} label={tr("forge.community_upgrade_sheet.pay")} />
+          ) : (
+            upgrade.clientSecret &&
+            renderPayment({
+              clientSecret: upgrade.clientSecret,
+              returnUrl: upgrade.returnUrl,
+              amount: upgrade.preview?.amount ?? 0,
+              currency: upgrade.preview?.currency ?? currency,
+              mode: "manual",
+              onSucceeded: upgrade.onPaymentSucceeded,
+              onFailed: () => {},
+            })
+          )}
+          {upgrade.error && <p role="alert" style={errorText}>{upgrade.error}</p>}
+        </div>
+      ) : upgrade.step === "submitting" ? (
+        <Loading />
+      ) : (
+        <p data-testid="community-upgrade-done" style={{ fontWeight: 700 }}>
+          {tr("forge.community_upgrade_sheet.done")}
+        </p>
+      )}
+    </CommunitySheet>
+  );
+}