@tribe-nest/forge 3.42.1 → 3.50.0

package/src/ui/styled/members/MemberCallsCalendar.tsx

@@ -0,0 +1,589 @@
+import { useState, type CSSProperties, type ReactNode } from "react";
+import {
+  CalendarDays,
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  Loader2,
+  MessageSquare,
+  Mic,
+  MicOff,
+  PlayCircle,
+  Users,
+  X,
+} from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useMemberCalls, type UseMemberCallsOptions } from "../../headless/memberHome/useMemberCalls";
+import type { MyMembershipCall } from "../../../data/queries/useMembershipCalls";
+import { Loading } from "../Loading";
+
+export interface MemberCallsCalendarProps extends UseMemberCallsOptions {
+  /**
+   * Builds the href of the call itself. Receives the call's public id, which
+   * addresses the GENERIC call page - the server decides what the call is
+   * attached to and what seat the viewer holds in it.
+   */
+  getCallHref?: (publicId: string) => string;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /**
+   * Where a viewer with nothing at all is sent to see what a membership
+   * includes. Shown only in the empty state.
+   *
+   * OPTIONAL, and omitting it is how a non-membership surface drops the upsell.
+   * A course-only buyer standing in their own classroom with no session this
+   * month must not be sold a membership they did not come for, so
+   * `CourseCallsSection` passes nothing here. The members calendar passes its
+   * path and is unchanged.
+   */
+  membershipHref?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** The creator's zone when they set one, else the viewer's. See `useMemberCalls`. */
+const formatTime = (iso: string, timeZone: string | null): string =>
+  new Date(iso).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timeZone || undefined,
+    timeZoneName: "short",
+  });
+
+const formatMinutes = (startsAt: string, endsAt: string): string => {
+  const minutes = Math.round((new Date(endsAt).getTime() - new Date(startsAt).getTime()) / 60_000);
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest === 0 ? `${hours} hr` : `${hours} hr ${rest} min`;
+};
+
+/**
+ * "Opens in 3 hours" - what a member is actually waiting for.
+ *
+ * Counts to `opensAt`, NOT `startsAt`: the room opens fifteen minutes early, and
+ * counting to the start would tell somebody to come back at a moment when they
+ * could already have been inside.
+ */
+const opensIn = (opensAt: string, now: Date): string => {
+  const ms = new Date(opensAt).getTime() - now.getTime();
+  if (ms <= 0) return "Opening";
+  const minutes = Math.round(ms / 60_000);
+  if (minutes < 60) return `Opens in ${minutes} min`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `Opens in ${hours} ${hours === 1 ? "hour" : "hours"}`;
+  const days = Math.round(hours / 24);
+  return `Opens in ${days} ${days === 1 ? "day" : "days"}`;
+};
+
+const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+/**
+ * The member's call calendar: a month you can page through, with upcoming calls
+ * and past recordings in the same grid.
+ *
+ * Every call shown is one this viewer may act on - the server filters by the
+ * membership it reads for them, so there is no locked state to render and no
+ * client-side access check to get wrong. That is a deliberate difference from
+ * `PostCollectionsGrid`, which DOES show locked rows: a members-only collection
+ * is an offer worth announcing to a non-member, whereas listing a call somebody
+ * cannot enter is an invitation to a door that will not open.
+ *
+ * Nothing here decides whether Join appears: `isOpen` comes from the server,
+ * computed from the same window the join enforces. A client re-deriving it from
+ * the clock would give two answers to one question, and the wrong one is the one
+ * the member acts on.
+ *
+ * ## It is not a MEMBERSHIP calendar, only a member-area one
+ *
+ * The rows come from `listForAttendee`, which resolves every audience kind, so
+ * this same grid renders a course's office hours and a cohort's week-3 session
+ * without knowing what either is. `courseId` / `cohortId` (through
+ * `UseMemberCallsOptions`) narrow it to one of them, which is what lets the
+ * classroom and the cohort page reuse this component instead of growing a
+ * second month grid. See `CourseCallsSection`.
+ */
+export function MemberCallsCalendar({
+  getCallHref = (publicId) => `/i/video-calls/${publicId}`,
+  navigate,
+  membershipHref,
+  className,
+  style,
+  ...options
+}: MemberCallsCalendarProps) {
+  const t = useThemeTokens();
+  const calendar = useMemberCalls(options);
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+  const now = options.now ?? new Date();
+  // The call whose details modal is open. Clicking an event opens it, the way
+  // Google Calendar opens an event rather than jumping straight into it.
+  const [selected, setSelected] = useState<MyMembershipCall | null>(null);
+
+  if (calendar.isLoading) return <Loading />;
+
+  if (calendar.error) {
+    return (
+      <p style={{ color: t.muted, fontFamily: t.fontFamily, fontSize: 14 }}>
+        We could not load your calls just now. Refresh to try again.
+      </p>
+    );
+  }
+
+  const navButton: CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    padding: "6px 10px",
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.border}`,
+    background: "transparent",
+    color: t.text,
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    cursor: "pointer",
+  };
+
+  return (
+    <div
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 16, color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <header style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, flex: "1 1 auto" }}>{calendar.monthLabel}</h2>
+        <button type="button" onClick={calendar.goToPreviousMonth} aria-label="Previous month" style={navButton}>
+          <ChevronLeft size={16} />
+        </button>
+        {/* Only offered when it would do something. A "Today" that is already
+            today is a control that does nothing when pressed. */}
+        {!calendar.isCurrentMonth && (
+          <button type="button" onClick={calendar.goToToday} style={navButton}>
+            Today
+          </button>
+        )}
+        <button type="button" onClick={calendar.goToNextMonth} aria-label="Next month" style={navButton}>
+          <ChevronRight size={16} />
+        </button>
+      </header>
+
+      {/* A seven-column month is unreadable on a phone and overflows it
+          sideways, so the grid is the DESKTOP face and a phone gets an agenda
+          (below). Both open the same details modal on tap. `minmax(0, 1fr)`
+          rather than `1fr` so a long title in a cell cannot force the grid
+          wider than its container. */}
+      <div className="hidden sm:block">
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: 4 }}>
+          {WEEKDAYS.map((day) => (
+            <div key={day} style={{ fontSize: 11, fontWeight: 700, color: t.muted, padding: "4px 6px" }}>
+              {day}
+            </div>
+          ))}
+          {calendar.days.map((day) => (
+            <div
+              key={day.key}
+              aria-current={day.isToday ? "date" : undefined}
+              style={{
+                minHeight: 72,
+                padding: 6,
+                borderRadius: t.cornerRadius,
+                border: `1px solid ${day.isToday ? t.primary : t.border}`,
+                background: day.inMonth ? t.surface : "transparent",
+                // Days outside the month are context, not content.
+                opacity: day.inMonth ? 1 : 0.45,
+                display: "flex",
+                flexDirection: "column",
+                gap: 3,
+              }}
+            >
+              <span style={{ fontSize: 11, fontWeight: day.isToday ? 700 : 500, color: t.muted }}>
+                {day.date.getDate()}
+              </span>
+              {day.calls.map((call) => (
+                <button
+                  key={call.id}
+                  type="button"
+                  onClick={() => setSelected(call)}
+                  title={call.title}
+                  style={{
+                    textAlign: "left",
+                    padding: "2px 4px",
+                    borderRadius: 4,
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: 11,
+                    lineHeight: 1.3,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    // Open now is the one thing worth shouting about in a cell
+                    // this small.
+                    background: call.isOpen ? t.primary : "transparent",
+                    color: call.isOpen ? t.textPrimary : t.text,
+                  }}
+                >
+                  {call.title}
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* The phone face: an agenda, not a grid. A vertical list cannot overflow
+          a narrow screen sideways, and every row is a comfortable tap target
+          that opens the same details modal. Only days WITH a call appear. */}
+      <div className="sm:hidden">
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          {calendar.days
+            .filter((day) => day.inMonth && day.calls.length > 0)
+            .map((day) => (
+            <div key={day.key} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              <div
+                style={{
+                  fontSize: 12,
+                  fontWeight: 700,
+                  color: day.isToday ? t.primary : t.muted,
+                  textTransform: "uppercase",
+                  letterSpacing: 0.4,
+                }}
+              >
+                {day.date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })}
+              </div>
+              {day.calls.map((call) => (
+                <button
+                  key={call.id}
+                  type="button"
+                  onClick={() => setSelected(call)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    width: "100%",
+                    textAlign: "left",
+                    padding: "10px 12px",
+                    borderRadius: t.cornerRadius,
+                    border: `1px solid ${call.isOpen ? t.primary : t.border}`,
+                    background: t.surface,
+                    color: t.text,
+                    fontFamily: t.fontFamily,
+                    cursor: "pointer",
+                  }}
+                >
+                  <span
+                    aria-hidden="true"
+                    style={{
+                      flexShrink: 0,
+                      width: 8,
+                      height: 8,
+                      borderRadius: 999,
+                      background: call.isOpen ? t.primary : t.muted,
+                    }}
+                  />
+                  <span style={{ minWidth: 0, display: "flex", flexDirection: "column", gap: 2 }}>
+                    <span style={{ fontSize: 14, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {call.title}
+                    </span>
+                    <span style={{ fontSize: 12, color: t.muted }}>
+                      {formatTime(call.startsAt, call.timezone)}
+                      {call.isOpen ? " · Open now" : ""}
+                    </span>
+                  </span>
+                </button>
+              ))}
+            </div>
+            ))}
+        </div>
+      </div>
+
+      {/* No list any more: the calendar IS the surface, and an event opens its
+          own details. Only a wholly empty month gets a word, so the grid does
+          not sit above a silent gap. */}
+      {calendar.calls.length === 0 && <EmptyMonth tokens={t} membershipHref={membershipHref} onNavigate={go} />}
+
+      {selected && (
+        <CallDetailsModal
+          call={selected}
+          now={now}
+          tokens={t}
+          onClose={() => setSelected(null)}
+          onJoin={() => selected.callPublicId && go(getCallHref(selected.callPublicId))}
+        />
+      )}
+    </div>
+  );
+}
+
+function EmptyMonth({
+  tokens: t,
+  membershipHref,
+  onNavigate,
+}: {
+  tokens: ReturnType<typeof useThemeTokens>;
+  membershipHref?: string;
+  onNavigate: (href: string) => void;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 8,
+        padding: "32px 24px",
+        textAlign: "center",
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+      }}
+    >
+      <CalendarDays size={26} style={{ opacity: 0.5 }} />
+      <p style={{ fontSize: 15, fontWeight: 600, margin: 0 }}>Nothing this month</p>
+      <p style={{ fontSize: 14, color: t.muted, margin: 0, maxWidth: 380 }}>
+        Use the arrows to look at another month. Calls you can join show up here, and so do recordings of
+        ones that have already happened.
+      </p>
+      {membershipHref && (
+        <button
+          type="button"
+          onClick={() => onNavigate(membershipHref)}
+          style={{
+            marginTop: 4,
+            padding: "8px 16px",
+            borderRadius: t.cornerRadius,
+            border: `1px solid ${t.border}`,
+            background: "transparent",
+            color: t.text,
+            fontFamily: t.fontFamily,
+            fontSize: 14,
+            cursor: "pointer",
+          }}
+        >
+          My membership
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The event details, the way Google Calendar shows one: tap an event, get its
+ * particulars and everything you can DO with it, without leaving the month.
+ *
+ * This is where the actions moved when the chronological list was removed:
+ * Join while the room is open, Watch once the recording is ready. It is also
+ * the home for the two things still to come - a transcript and the chat
+ * history of the call - which are shown as clearly-labelled placeholders
+ * rather than hidden, so the shape a member will grow into is already visible.
+ */
+function CallDetailsModal({
+  call,
+  now,
+  tokens: t,
+  onClose,
+  onJoin,
+}: {
+  call: MyMembershipCall;
+  now: Date;
+  tokens: ReturnType<typeof useThemeTokens>;
+  onClose: () => void;
+  onJoin: () => void;
+}) {
+  const canJoin = call.isOpen && !!call.callPublicId;
+  const hasEnded = new Date(call.closesAt).getTime() < now.getTime();
+  const watchable = call.recording?.status === "ready" && !!call.recording.watchUrl;
+  const processing = call.recording?.status === "processing";
+
+  const row: CSSProperties = { display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: t.muted };
+
+  /** A future capability, present but plainly not ready. Named so a member
+   * knows it is coming, greyed so nobody mistakes it for a dead control. */
+  const comingSoon = (icon: ReactNode, label: string, detail: string) => (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 10,
+        padding: "10px 12px",
+        borderRadius: t.cornerRadius,
+        border: `1px dashed ${t.border}`,
+        opacity: 0.7,
+      }}
+    >
+      <span style={{ marginTop: 1 }}>{icon}</span>
+      <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
+        <span style={{ fontSize: 14, fontWeight: 600, display: "flex", alignItems: "center", gap: 8 }}>
+          {label}
+          <span
+            style={{
+              fontSize: 10,
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: 0.5,
+              color: t.muted,
+              border: `1px solid ${t.border}`,
+              borderRadius: 999,
+              padding: "1px 6px",
+            }}
+          >
+            Coming soon
+          </span>
+        </span>
+        <span style={{ fontSize: 13, color: t.muted }}>{detail}</span>
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={call.title}
+      onClick={onClose}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 1000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 16,
+        background: "rgba(0,0,0,0.5)",
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: "100%",
+          maxWidth: 460,
+          maxHeight: "85vh",
+          overflowY: "auto",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          padding: 20,
+          borderRadius: t.cornerRadius,
+          background: t.surface,
+          color: t.text,
+          fontFamily: t.fontFamily,
+          border: `1px solid ${t.border}`,
+        }}
+      >
+        <header style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
+          <div style={{ minWidth: 0, flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
+            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700 }}>{call.title}</h2>
+            {call.role === "host" && (
+              <span style={{ fontSize: 11, fontWeight: 700, color: t.muted, textTransform: "uppercase" }}>
+                You are hosting
+              </span>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            style={{ background: "transparent", border: "none", cursor: "pointer", color: t.muted, padding: 2 }}
+          >
+            <X size={18} />
+          </button>
+        </header>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          <div style={row}>
+            <CalendarDays size={15} />
+            <span style={{ color: t.text }}>
+              {new Date(call.startsAt).toLocaleDateString("en-US", {
+                weekday: "long",
+                month: "long",
+                day: "numeric",
+                timeZone: call.timezone || undefined,
+              })}
+              {" · "}
+              {formatTime(call.startsAt, call.timezone)} · {formatMinutes(call.startsAt, call.endsAt)}
+            </span>
+          </div>
+          {!hasEnded && (
+            <div style={row}>
+              {call.participation === "open" ? <Mic size={15} /> : <MicOff size={15} />}
+              {call.participation === "open" ? "Everyone can speak" : "Listen and chat"}
+            </div>
+          )}
+          {call.audiences.length > 0 && (
+            <div style={row}>
+              <Users size={15} />
+              {call.audiences.map((audience) => audience.label).join(", ")}
+            </div>
+          )}
+          {call.description && (
+            <p style={{ margin: "4px 0 0", fontSize: 14, color: t.text, opacity: 0.85 }}>{call.description}</p>
+          )}
+        </div>
+
+        {/* What a member can do RIGHT NOW. */}
+        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+          {canJoin && (
+            <button
+              type="button"
+              onClick={onJoin}
+              style={{
+                padding: "10px 20px",
+                borderRadius: t.cornerRadius,
+                border: "none",
+                background: t.primary,
+                color: t.textPrimary,
+                fontFamily: t.fontFamily,
+                fontSize: 14,
+                fontWeight: 700,
+                cursor: "pointer",
+              }}
+            >
+              Join call
+            </button>
+          )}
+          {watchable && (
+            <a
+              href={call.recording!.watchUrl!}
+              target="_blank"
+              rel="noreferrer"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "10px 20px",
+                borderRadius: t.cornerRadius,
+                background: canJoin ? "transparent" : t.primary,
+                border: canJoin ? `1px solid ${t.border}` : "none",
+                color: canJoin ? t.text : t.textPrimary,
+                fontSize: 14,
+                fontWeight: 700,
+                textDecoration: "none",
+              }}
+            >
+              <PlayCircle size={16} />
+              Watch recording
+              {call.recording!.durationSeconds ? ` · ${Math.round(call.recording!.durationSeconds / 60)} min` : ""}
+            </a>
+          )}
+          {!canJoin && !watchable && processing && (
+            <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 14, color: t.muted, fontWeight: 600 }}>
+              <Loader2 size={15} />
+              Recording is processing
+            </span>
+          )}
+          {!canJoin && !watchable && !processing && (
+            <span style={{ fontSize: 14, color: t.muted, fontWeight: 600 }}>
+              {hasEnded ? "This call has ended" : opensIn(call.opensAt, now)}
+            </span>
+          )}
+        </div>
+
+        {/* What is coming: the transcript and the chat history of the call. Shown
+            so a member knows the modal is where they will live, not hidden until
+            the day they ship. */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          {comingSoon(<FileText size={16} />, "Transcript", "A searchable transcript of what was said.")}
+          {comingSoon(<MessageSquare size={16} />, "Chat history", "The messages sent during the call.")}
+        </div>
+      </div>
+    </div>
+  );
+}