@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -0,0 +1,544 @@
+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 };
+  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 />;
+
+  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>
+        );
+      }
+      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
+          className="fg:flex fg:flex-col fg:gap-3"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void join.next();
+          }}
+        >
+          {problem}
+          {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>
+          <button type="button" data-testid="community-join-use-code" style={linkButton} onClick={join.switchToEmailCode}>
+            {tr("forge.community_join_sheet.use_code")}
+          </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.codeEmail })}</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, ""))}
+              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: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"
+              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">
+          {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) });
+}