@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -0,0 +1,302 @@
+import type { CSSProperties, MouseEvent } from "react";
+import { BookOpen, CheckCircle2, GraduationCap, Lock } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import {
+  classroomCourseHref,
+  classroomCourseState,
+  classroomProgressPercent,
+  classroomUnlockParts,
+  useCommunityClassroom,
+} from "../../headless/communities/useCommunityClassroom";
+import type { CommunityClassroomCourse } from "../../../data/queries/useCommunityClassroom";
+import { Loading } from "../Loading";
+import { useCommunityStyles } from "./shared";
+
+export interface CommunityClassroomProps {
+  /**
+   * Where an open course leads. Defaults to the course player, addressed by
+   * the member's access id. Null renders the card without a link.
+   */
+  getCourseHref?: (course: CommunityClassroomCourse) => string | null;
+  /** SPA navigation adapter. Defaults to a plain link. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The Classroom tab of a community's member home: the courses the community's
+ * tiers include, as cards. A course the member holds shows their progress and
+ * opens in the course player; one they do not shows what opens it (a level, the tiers that include
+ * it, or both) and, when a tier does, the community's upgrade. Members only:
+ * anyone else is told so. Must sit inside `<CommunityProvider>`. Built on
+ * `useCommunityClassroom`.
+ */
+export function CommunityClassroom({ getCourseHref, navigate, className, style }: CommunityClassroomProps) {
+  const tr = useForgeT();
+  const { t, card } = useCommunityStyles();
+  const classroom = useCommunityClassroom();
+
+  if (classroom.isLoading) return <Loading />;
+  if (classroom.forbidden || classroom.notFound) {
+    return (
+      <div data-testid="community-classroom-forbidden" className={className} style={{ ...card, textAlign: "center", ...style }}>
+        {tr("forge.community_classroom.forbidden")}
+      </div>
+    );
+  }
+  if (classroom.isError) {
+    return (
+      <p role="alert" className={className} style={{ color: t.text, ...style }}>
+        {tr("forge.community_classroom.error")}
+      </p>
+    );
+  }
+  if (classroom.courses.length === 0) {
+    return (
+      <div
+        data-testid="community-classroom-empty"
+        className={className}
+        style={{ ...card, textAlign: "center", color: t.muted, ...style }}
+      >
+        <GraduationCap size={26} style={{ opacity: 0.5 }} aria-hidden />
+        <p style={{ margin: "8px 0 0" }}>{tr("forge.community_classroom.empty")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <section
+      data-testid="community-classroom"
+      aria-label={tr("forge.community_classroom.title")}
+      className={className}
+      style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <ul
+        className="fg:grid fg:grid-cols-1 fg:gap-4 fg:sm:grid-cols-2 fg:lg:grid-cols-3"
+        style={{ listStyle: "none", margin: 0, padding: 0 }}
+      >
+        {classroom.courses.map((course) => (
+          <li key={course.courseId}>
+            <ClassroomCard
+              course={course}
+              href={course.open ? (getCourseHref ?? classroomCourseHref)(course) : null}
+              navigate={navigate}
+              classroom={classroom}
+            />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function ClassroomCard({
+  course,
+  href,
+  navigate,
+  classroom,
+}: {
+  course: CommunityClassroomCourse;
+  href: string | null;
+  navigate?: (href: string) => void;
+  classroom: ReturnType<typeof useCommunityClassroom>;
+}) {
+  const tr = useForgeT();
+  const { t, button } = useCommunityStyles();
+  const state = classroomCourseState(course);
+  const percent = classroomProgressPercent(course.progress);
+
+  const open = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (!navigate || !href) return;
+    e.preventDefault();
+    navigate(href);
+  };
+
+  const cover = (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        aspectRatio: "16 / 9",
+        background: t.background,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {course.coverUrl ? (
+        <img
+          src={course.coverUrl}
+          alt=""
+          loading="lazy"
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            opacity: state === "locked" ? 0.55 : 1,
+          }}
+        />
+      ) : (
+        <BookOpen size={28} style={{ color: t.muted }} aria-hidden />
+      )}
+      {state === "locked" && (
+        <span
+          style={{
+            position: "absolute",
+            top: 10,
+            right: 10,
+            width: 30,
+            height: 30,
+            borderRadius: 999,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: t.surface,
+            color: t.text,
+          }}
+        >
+          <Lock size={15} aria-label={tr("forge.community_classroom.locked_label")} />
+        </span>
+      )}
+    </div>
+  );
+
+  const body = (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: 14 }}>
+      <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, fontFamily: t.headingFontFamily, color: t.text }}>
+        {course.title}
+      </h3>
+      {course.description && (
+        <p
+          style={{
+            margin: 0,
+            fontSize: 13,
+            color: t.muted,
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+          }}
+        >
+          {course.description}
+        </p>
+      )}
+      {state === "locked" ? (
+        <LockedFooter course={course} classroom={classroom} buttonStyle={button} />
+      ) : (
+        <ProgressFooter course={course} percent={percent} completed={state === "completed"} />
+      )}
+    </div>
+  );
+
+  const frame: CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    background: t.surface,
+    overflow: "hidden",
+    textDecoration: "none",
+    color: t.text,
+  };
+
+  return href ? (
+    <a data-testid="community-classroom-course" data-state={state} href={href} onClick={open} style={frame}>
+      {cover}
+      {body}
+    </a>
+  ) : (
+    <div data-testid="community-classroom-course" data-state={state} style={frame}>
+      {cover}
+      {body}
+    </div>
+  );
+}
+
+function ProgressFooter({
+  course,
+  percent,
+  completed,
+}: {
+  course: CommunityClassroomCourse;
+  percent: number;
+  completed: boolean;
+}) {
+  const tr = useForgeT();
+  const { t } = useCommunityStyles();
+  const total = course.progress?.total ?? 0;
+  const done = course.progress?.completed ?? 0;
+  const label = completed
+    ? tr("forge.community_classroom.completed")
+    : total > 0
+      ? tr("forge.community_classroom.progress", { completed: done, total })
+      : tr("forge.community_classroom.start");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: "auto" }}>
+      <div
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={percent}
+        aria-label={tr("forge.community_classroom.progress_label", { title: course.title })}
+        style={{ height: 6, borderRadius: 999, background: `${t.text}14`, overflow: "hidden" }}
+      >
+        <div style={{ width: `${percent}%`, height: "100%", background: t.primary }} />
+      </div>
+      <span
+        data-testid="community-classroom-progress"
+        style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, color: completed ? t.primary : t.muted }}
+      >
+        {completed && <CheckCircle2 size={14} aria-hidden />}
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function LockedFooter({
+  course,
+  classroom,
+  buttonStyle,
+}: {
+  course: CommunityClassroomCourse;
+  classroom: ReturnType<typeof useCommunityClassroom>;
+  buttonStyle: CSSProperties;
+}) {
+  const tr = useForgeT();
+  const { t } = useCommunityStyles();
+  const { level, tiers } = classroomUnlockParts(course);
+  const lines: string[] = [];
+  if (level !== null) lines.push(tr("forge.community_classroom.unlocks_at_level", { level }));
+  if (tiers) lines.push(tr("forge.community_classroom.included_in", { tiers }));
+  if (!lines.length) lines.push(tr("forge.community_classroom.locked_no_tier"));
+  const href = classroom.unlockHref(course);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 8, marginTop: "auto" }}>
+      {lines.map((line) => (
+        <span key={line} data-testid="community-classroom-unlock" style={{ fontSize: 13, color: t.muted }}>
+          {line}
+        </span>
+      ))}
+      {classroom.canUpgrade(course) &&
+        (classroom.unlock ? (
+          <button
+            type="button"
+            data-testid="community-classroom-upgrade"
+            style={buttonStyle}
+            onClick={() => classroom.unlock?.(course)}
+          >
+            {tr("forge.community_classroom.upgrade")}
+          </button>
+        ) : href ? (
+          <a data-testid="community-classroom-upgrade" href={href} style={{ ...buttonStyle, textDecoration: "none" }}>
+            {tr("forge.community_classroom.upgrade")}
+          </a>
+        ) : null)}
+    </div>
+  );
+}

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

@@ -0,0 +1,298 @@
+import type { CSSProperties, ReactNode } from "react";
+import { ChevronDown } from "lucide-react";
+import { CommunityUpgradeOpenerProvider } from "../../../contexts/CommunityContext";
+import { useCommunityHome, type UseCommunityHomeOptions } from "../../headless/communities/useCommunityHome";
+import type { MemberHomeNavKey } from "../../headless/memberHome/useMemberHomeNav";
+import { internalPath } from "../../../runtime/pages";
+import { AppHomeMark } from "../app/AppHomeMark";
+import { useForgeT } from "../../../i18n";
+import { MemberHomeLayout } from "../members/MemberHomeLayout";
+import { MemberPostsFeed } from "../members/MemberPostsFeed";
+import { PostCollectionsGrid } from "../members/PostCollectionsGrid";
+import { CommunitySpaces } from "../community/CommunitySpaces";
+import { CommunityLeaderboard } from "../community/CommunityLeaderboard";
+import { CommunityNotificationsInbox } from "../community/CommunityNotifications";
+import { CommunityModeration } from "../community/CommunityModeration";
+import { CommunityMembers } from "../community/CommunityMembers";
+import { ChatRoom } from "../ChatRoom";
+import { Loading } from "../Loading";
+import { CommunityMembershipMenu } from "./CommunityMembershipMenu";
+import { CommunityWiki } from "./CommunityWiki";
+import { CommunityClassroom } from "./CommunityClassroom";
+import { CommunityCalendar } from "./CommunityCalendar";
+import { CommunityUpgradeSheet } from "./CommunityUpgradeSheet";
+import { Pill, useCommunityStyles } from "./shared";
+
+/**
+ * The member home tabs. `profile` is a member's profile page, which sits under
+ * Spaces in the nav. `moderation` is shown to the community's moderators only.
+ */
+export type CommunityHomeTab =
+  | "posts"
+  | "collections"
+  | "spaces"
+  | "leaderboard"
+  | "notifications"
+  | "profile"
+  | "calendar"
+  | "classroom"
+  | "chat"
+  | "members"
+  | "wiki"
+  | "moderation";
+
+export interface CommunityHomeProps extends UseCommunityHomeOptions {
+  /** The active tab. Drives the nav; with no `children`, also which default body renders. */
+  tab?: CommunityHomeTab;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Current pathname, used for the active tab when `tab` is not given. */
+  currentPath?: string;
+  /**
+   * The tab's body. Omitted, the default Forge block for `tab` renders (the
+   * posts feed, collections, spaces, calendar, classroom, chat, members, wiki, leaderboard,
+   * notifications or moderation), so `<CommunityHome />` alone is a working
+   * member home.
+   */
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const NAV_KEY: Record<CommunityHomeTab, MemberHomeNavKey> = {
+  posts: "posts",
+  collections: "collections",
+  spaces: "spaces",
+  profile: "spaces",
+  leaderboard: "leaderboard",
+  notifications: "notifications",
+  calendar: "calendar",
+  classroom: "classroom",
+  chat: "chat",
+  members: "members",
+  wiki: "wiki",
+  moderation: "moderation",
+};
+
+/**
+ * Inside a community: a header with the community's name, the member's tier
+ * badge, an Upgrade button whenever a higher tier exists, and the Membership
+ * menu; then the member home tabs (`MemberHomeLayout`). Every locked item
+ * inside opens the ONE upgrade sheet this provides. A Stripe return
+ * (`confirmSubscription`) is reconciled here. Must sit inside
+ * `<CommunityProvider>`. Built on `useCommunityHome`.
+ */
+export function CommunityHome({
+  tab,
+  navigate,
+  currentPath,
+  children,
+  welcome,
+  confirmSubscription,
+  className,
+  style,
+}: CommunityHomeProps) {
+  const tr = useForgeT();
+  const { t, button, ghostButton, card } = useCommunityStyles();
+  const home = useCommunityHome({ welcome, confirmSubscription });
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  if (home.isLoading && !home.community) return <Loading fullPage />;
+  if (home.notFound || !home.community) return <p style={{ color: t.text }}>{tr("forge.community_home.not_found")}</p>;
+  const community = home.community;
+
+  return (
+    <CommunityUpgradeOpenerProvider value={home.opener}>
+      <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
+        {/*
+         * Below lg: one slim row, so the page starts near the top of a phone.
+         * The tier pill opens "Your membership"; Upgrade is a chip, and only
+         * when a higher tier exists.
+         */}
+        <header
+          data-testid="community-home-header-compact"
+          className="fg:flex fg:min-w-0 fg:flex-col fg:gap-2 fg:lg:hidden"
+          style={{ marginBottom: 14 }}
+        >
+          <div className="fg:flex fg:min-w-0 fg:items-center fg:gap-2">
+            <AppHomeMark go={go} size={32} testId="community-home-app-home-compact" />
+            {community.logoUrl && (
+              <img src={community.logoUrl} alt="" style={{ width: 32, height: 32, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
+            )}
+            <h1
+              className="fg:min-w-0 fg:flex-1"
+              style={{
+                fontSize: 20,
+                lineHeight: 1.2,
+                fontWeight: 800,
+                margin: 0,
+                fontFamily: t.headingFontFamily,
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+              }}
+            >
+              {community.name}
+            </h1>
+            {home.showJoin && home.joinPath && (
+              <button
+                type="button"
+                data-testid="community-home-join-compact"
+                style={{ ...button, padding: "6px 14px", flexShrink: 0 }}
+                onClick={() => go(home.joinPath)}
+              >
+                {tr("forge.community_home.join")}
+              </button>
+            )}
+          </div>
+          {(home.membership || home.showUpgrade) && (
+            <div className="fg:flex fg:min-w-0 fg:items-center fg:gap-2">
+              {home.membership && (
+                <button
+                  type="button"
+                  data-testid="community-home-tier-button"
+                  aria-label={tr("forge.community_home.open_membership", { tier_name: home.membership.tierName })}
+                  aria-haspopup="dialog"
+                  onClick={() => home.setMembershipOpen(true)}
+                  className="fg:flex fg:min-w-0 fg:items-center fg:gap-1"
+                  style={{
+                    padding: "4px 8px 4px 12px",
+                    borderRadius: 999,
+                    border: `1px solid ${t.primary}`,
+                    background: "transparent",
+                    color: t.primary,
+                    fontFamily: t.fontFamily,
+                    fontSize: 13,
+                    fontWeight: 700,
+                    cursor: "pointer",
+                  }}
+                >
+                  <span className="fg:truncate">{home.membership.tierName}</span>
+                  <ChevronDown size={14} aria-hidden style={{ flexShrink: 0 }} />
+                </button>
+              )}
+              <span className="fg:min-w-1 fg:flex-1" />
+              {home.showUpgrade && (
+                <button
+                  type="button"
+                  data-testid="community-home-upgrade-chip"
+                  onClick={() => home.openUpgrade(null)}
+                  style={{ ...button, padding: "5px 14px", fontSize: 13, borderRadius: 999, flexShrink: 0 }}
+                >
+                  {tr("forge.community_home.upgrade")}
+                </button>
+              )}
+            </div>
+          )}
+        </header>
+
+        <header
+          data-testid="community-home-header"
+          className="fg:hidden fg:flex-col fg:gap-3 fg:sm:flex-row fg:sm:items-center fg:sm:justify-between fg:lg:flex"
+          style={{ marginBottom: 20 }}
+        >
+          <div className="fg:flex fg:min-w-0 fg:items-center fg:gap-3">
+            <AppHomeMark go={go} size={36} testId="community-home-app-home" />
+            {community.logoUrl && (
+              <img src={community.logoUrl} alt="" style={{ width: 44, height: 44, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
+            )}
+            <h1 className="fg:truncate" style={{ fontSize: 24, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>
+              {community.name}
+            </h1>
+            {home.membership && <Pill testId="community-home-tier-badge">{home.membership.tierName}</Pill>}
+          </div>
+          <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+            {home.showUpgrade && (
+              <button type="button" data-testid="community-home-upgrade" style={button} onClick={() => home.openUpgrade(null)}>
+                {tr("forge.community_home.upgrade")}
+              </button>
+            )}
+            {home.membership && (
+              <button type="button" data-testid="community-home-membership" style={ghostButton} onClick={() => home.setMembershipOpen(true)}>
+                {tr("forge.community_home.membership")}
+              </button>
+            )}
+            {home.showJoin && home.joinPath && (
+              <button type="button" data-testid="community-home-join" style={button} onClick={() => go(home.joinPath)}>
+                {tr("forge.community_home.join")}
+              </button>
+            )}
+          </div>
+        </header>
+
+        {home.confirming && (
+          <p role="status" style={{ ...card, marginBottom: 16 }}>
+            {tr("forge.community_home.confirming")}
+          </p>
+        )}
+        {home.welcomeVisible && (
+          <div role="status" data-testid="community-home-welcome" className="fg:flex fg:items-center fg:justify-between fg:gap-3" style={{ ...card, marginBottom: 16 }}>
+            <p style={{ fontWeight: 600 }}>{tr("forge.community_home.welcome", { community_name: community.name })}</p>
+            <button type="button" style={ghostButton} onClick={home.dismissWelcome}>
+              {tr("forge.community_home.dismiss")}
+            </button>
+          </div>
+        )}
+
+        <MemberHomeLayout
+          currentPath={currentPath}
+          activeKey={tab ? NAV_KEY[tab] : undefined}
+          navigate={go}
+          onOpenMembership={home.membership ? () => home.setMembershipOpen(true) : undefined}
+        >
+          {children ?? <DefaultTabBody tab={tab ?? "posts"} slug={community.slug} go={go} />}
+        </MemberHomeLayout>
+
+        <CommunityUpgradeSheet
+          open={home.upgradeOpen}
+          onOpenChange={home.setUpgradeOpen}
+          initialTierId={home.upgradeTierId}
+          navigate={navigate}
+        />
+        <CommunityMembershipMenu open={home.membershipOpen} onOpenChange={home.setMembershipOpen} />
+      </div>
+    </CommunityUpgradeOpenerProvider>
+  );
+}
+
+/** The default body for a tab, when the host renders none of its own. */
+function DefaultTabBody({ tab, slug, go }: { tab: CommunityHomeTab; slug: string; go: (href: string) => void }) {
+  const thread = (postId: string) => internalPath("communities/$slug/home/spaces/posts/$postId", { slug, postId });
+  const profile = (accountId: string) => internalPath("communities/$slug/home/profile/$accountId", { slug, accountId });
+  switch (tab) {
+    case "posts":
+      return <MemberPostsFeed navigate={go} signupPath={internalPath("signup")} loginPath={internalPath("login")} />;
+    case "collections":
+      return <PostCollectionsGrid navigate={go} signupPath={internalPath("signup")} />;
+    case "spaces":
+      return (
+        <CommunitySpaces
+          onOpenSpace={(space) => go(internalPath("communities/$slug/home/spaces/$spaceId", { slug, spaceId: space.slug ?? space.id }))}
+        />
+      );
+    case "leaderboard":
+      return <CommunityLeaderboard onOpenProfile={(accountId) => go(profile(accountId))} />;
+    case "notifications":
+      return <CommunityNotificationsInbox onOpenPost={(postId) => go(thread(postId))} />;
+    case "calendar":
+      return <CommunityCalendar navigate={go} />;
+    case "classroom":
+      return <CommunityClassroom navigate={go} />;
+    case "chat":
+      return <ChatRoom />;
+    case "members":
+      return <CommunityMembers navigate={go} getProfileHref={profile} />;
+    case "wiki":
+      return (
+        <CommunityWiki
+          navigate={go}
+          getPageHref={(page) => internalPath("communities/$slug/home/wiki/$page", { slug, page })}
+        />
+      );
+    case "moderation":
+      return <CommunityModeration onOpenPost={(postId) => go(thread(postId))} />;
+    default:
+      return null;
+  }
+}