@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -0,0 +1,484 @@
+import { useState, type CSSProperties, type MouseEvent } from "react";
+import { CalendarDays, CalendarPlus, ChevronLeft, ChevronRight, MapPin, Ticket, Video } from "lucide-react";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+import {
+  calendarDayKey,
+  calendarItemIsOver,
+  callJoinable,
+  useCommunityCalendar,
+  type CommunityCalendarDay,
+  type UseCommunityCalendarOptions,
+} from "../../headless/communities/useCommunityCalendar";
+import type {
+  CommunityCalendarCall,
+  CommunityCalendarEvent,
+  CommunityRsvpResponse,
+} from "../../../data/queries/useCommunityCalendar";
+import { internalPath } from "../../../runtime/pages";
+import { CallHelpHint } from "../../media/CallHelpHint";
+import { CallTranscriptViewer } from "../members/CallTranscriptViewer";
+import { CallDetailsModal } from "../members/MemberCallsCalendar";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  CallRecordingProcessing,
+  CallRecordingWatchLink,
+  CallTranscriptPanel,
+  callRecordingWatchable,
+} from "../members/CallRecordingActions";
+import { Loading } from "../Loading";
+import { useCommunityStyles } from "./shared";
+
+export interface CommunityCalendarProps extends UseCommunityCalendarOptions {
+  /** The call page, from the call's public id. Defaults to the built-in video call page. */
+  getCallHref?: (callPublicId: string) => string;
+  /** An event's page, from its slug. Defaults to the built-in event page. */
+  getEventHref?: (eventSlug: string) => string;
+  /** SPA navigation adapter. Defaults to a plain link. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+type Calendar = ReturnType<typeof useCommunityCalendar>;
+
+/**
+ * The Calendar tab of a community's member home: this community's calls and
+ * the events promoted into it, one month at a time, grouped by day with what
+ * is still ahead first. A call can be answered going or not going (pressing
+ * the answer again clears it), joined while its room is open, and added to a
+ * calendar app; once it is over, its recording can be watched and its
+ * transcript read, with the same pieces the members calendar uses
+ * (`CallRecordingActions`). An event opens its own page, where tickets are.
+ * Members only.
+ * Must sit inside `<CommunityProvider>`. Built on `useCommunityCalendar`.
+ */
+export function CommunityCalendar({
+  getCallHref = (callPublicId) => internalPath("video-calls/$callId", { callId: callPublicId }),
+  getEventHref = (eventSlug) => internalPath("events/$slug", { slug: eventSlug }),
+  navigate,
+  className,
+  style,
+  ...options
+}: CommunityCalendarProps) {
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const { t, card, ghostButton } = useCommunityStyles();
+  const calendar = useCommunityCalendar(options);
+  const themeTokens = useThemeTokens();
+  // The recording whose transcript is open full-screen, beside its video.
+  const [readingRecordingId, setReadingRecordingId] = useState<string | null>(null);
+  // The call whose details are open: the same dialog the members calendar uses.
+  const [openCallId, setOpenCallId] = useState<string | null>(null);
+
+  if (calendar.isLoading) return <Loading />;
+  if (calendar.forbidden) {
+    return (
+      <div data-testid="community-calendar-forbidden" className={className} style={{ ...card, textAlign: "center", ...style }}>
+        {tr("forge.community_calendar.forbidden")}
+      </div>
+    );
+  }
+
+  const navButton: CSSProperties = { ...ghostButton, display: "inline-flex", alignItems: "center", padding: "6px 10px", fontSize: 13 };
+  const monthLabel = calendar.monthStart.toLocaleDateString(locale, { month: "long", year: "numeric" });
+  const empty = !calendar.isError && calendar.upcoming.length === 0 && calendar.past.length === 0;
+  const rowProps = {
+    calendar,
+    getCallHref,
+    getEventHref,
+    navigate,
+    onReadTranscript: setReadingRecordingId,
+    onOpenCall: setOpenCallId,
+  };
+  // Re-read from the latest fetch, so a recording that finishes while the
+  // dialog is open appears in it.
+  const openCall = openCallId
+    ? [...calendar.upcoming, ...calendar.past]
+        .flatMap((day) => day.items)
+        .find((item): item is CommunityCalendarCall => item.kind === "call" && item.id === openCallId)
+    : undefined;
+  const go = (href: string) => {
+    if (navigate) navigate(href);
+    else if (typeof window !== "undefined") window.location.assign(href);
+  };
+
+  return (
+    <section
+      data-testid="community-calendar"
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 16, color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <header className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+        <h2
+          data-testid="community-calendar-month"
+          className="fg:flex fg:items-center fg:gap-2"
+          style={{ margin: 0, fontSize: 18, fontWeight: 700, flex: "1 1 auto", fontFamily: t.headingFontFamily }}
+        >
+          {monthLabel}
+          <CallHelpHint label={tr("forge.community_calendar.help_label")}>{tr("forge.community_calendar.help")}</CallHelpHint>
+        </h2>
+        <button type="button" onClick={calendar.goToPreviousMonth} aria-label={tr("forge.community_calendar.previous_month")} style={navButton}>
+          <ChevronLeft size={16} aria-hidden />
+        </button>
+        {!calendar.isCurrentMonth && (
+          <button type="button" onClick={calendar.goToToday} style={navButton}>
+            {tr("forge.community_calendar.this_month")}
+          </button>
+        )}
+        <button type="button" onClick={calendar.goToNextMonth} aria-label={tr("forge.community_calendar.next_month")} style={navButton}>
+          <ChevronRight size={16} aria-hidden />
+        </button>
+      </header>
+
+      {calendar.isError && (
+        <p role="alert" style={{ margin: 0 }}>
+          {tr("forge.community_calendar.error")}
+        </p>
+      )}
+
+      {empty && (
+        <div data-testid="community-calendar-empty" style={{ ...card, textAlign: "center", color: t.muted }}>
+          <CalendarDays size={26} style={{ opacity: 0.5 }} aria-hidden />
+          <p style={{ margin: "8px 0 0" }}>{tr("forge.community_calendar.empty")}</p>
+        </div>
+      )}
+
+      {calendar.upcoming.map((day) => (
+        <DayGroup key={day.key} day={day} {...rowProps} />
+      ))}
+
+      {calendar.past.length > 0 && (
+        <>
+          <h3 style={{ margin: "8px 0 0", fontSize: 14, fontWeight: 700, color: t.muted }}>
+            {tr("forge.community_calendar.past_heading")}
+          </h3>
+          {calendar.past.map((day) => (
+            <DayGroup key={day.key} day={day} {...rowProps} />
+          ))}
+        </>
+      )}
+
+      {openCall && (
+        <CallDetailsModal
+          call={openCall}
+          now={calendar.now}
+          tokens={themeTokens}
+          onClose={() => setOpenCallId(null)}
+          onJoin={() => openCall.callPublicId && go(getCallHref(openCall.callPublicId))}
+          onReadTranscript={(recordingId) => {
+            setOpenCallId(null);
+            setReadingRecordingId(recordingId);
+          }}
+        />
+      )}
+
+      {readingRecordingId && (
+        <CallTranscriptViewer recordingId={readingRecordingId} onClose={() => setReadingRecordingId(null)} />
+      )}
+    </section>
+  );
+}
+
+interface RowProps {
+  calendar: Calendar;
+  getCallHref: (callPublicId: string) => string;
+  getEventHref: (eventSlug: string) => string;
+  navigate?: (href: string) => void;
+  /** Open a recording's transcript full-screen beside its video. */
+  onReadTranscript: (recordingId: string) => void;
+  /** Open a call's details dialog. */
+  onOpenCall: (callId: string) => void;
+}
+
+function DayGroup({ day, ...rowProps }: { day: CommunityCalendarDay } & RowProps) {
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const { t } = useCommunityStyles();
+  const isToday = day.key === calendarDayKey(rowProps.calendar.now);
+  const label = day.date.toLocaleDateString(locale, { weekday: "long", month: "long", day: "numeric" });
+  return (
+    <div data-testid="community-calendar-day" data-day={day.key} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      <h4
+        style={{
+          margin: 0,
+          fontSize: 12,
+          fontWeight: 700,
+          textTransform: "uppercase",
+          letterSpacing: 0.4,
+          color: isToday ? t.primary : t.muted,
+        }}
+      >
+        {isToday ? tr("forge.community_calendar.today", { date: label }) : label}
+      </h4>
+      <ul className="fg:flex fg:flex-col fg:gap-2" style={{ listStyle: "none", margin: 0, padding: 0 }}>
+        {day.items.map((item) => (
+          <li key={`${item.kind}-${item.id}`}>
+            {item.kind === "call" ? <CallRow call={item} {...rowProps} /> : <EventRow event={item} {...rowProps} />}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function useTimeRange() {
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const time = (value: string) => new Date(value).toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" });
+  return (startsAt: string, endsAt: string | null) =>
+    endsAt ? tr("forge.community_calendar.time_range", { start: time(startsAt), end: time(endsAt) }) : time(startsAt);
+}
+
+function useRowStyles() {
+  const { t } = useCommunityStyles();
+  const row: CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    padding: "12px 14px",
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    background: t.surface,
+  };
+  const small: CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 12px",
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.border}`,
+    background: "transparent",
+    color: t.text,
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    fontWeight: 600,
+    cursor: "pointer",
+    textDecoration: "none",
+  };
+  const badge = (strong: boolean): CSSProperties => ({
+    fontSize: 11,
+    fontWeight: 700,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+    padding: "2px 8px",
+    borderRadius: 999,
+    background: strong ? t.primary : "transparent",
+    color: strong ? t.textPrimary : t.muted,
+    border: strong ? "none" : `1px solid ${t.border}`,
+  });
+  return { t, row, small, badge };
+}
+
+function AddToCalendar({ href }: { href: string }) {
+  const tr = useForgeT();
+  const { small } = useRowStyles();
+  return (
+    <a data-testid="community-calendar-ics" href={href} style={small}>
+      <CalendarPlus size={14} aria-hidden />
+      {tr("forge.community_calendar.add_to_calendar")}
+    </a>
+  );
+}
+
+function CallRow({ call, calendar, getCallHref, navigate, onReadTranscript, onOpenCall }: { call: CommunityCalendarCall } & RowProps) {
+  const recording = call.recording ?? null;
+  const tr = useForgeT();
+  const timeRange = useTimeRange();
+  const { t, row, small, badge } = useRowStyles();
+  const over = calendarItemIsOver(call, calendar.now);
+  const joinable = callJoinable(call);
+  const joinHref = joinable ? getCallHref(call.callPublicId!) : null;
+  const saving = calendar.pendingCallId === call.id;
+  const error = calendar.rsvpErrorFor(call.id);
+
+  const answerButton = (response: CommunityRsvpResponse, labelKey: string, count: number) => {
+    const chosen = call.rsvp.mine === response;
+    return (
+      <button
+        type="button"
+        data-testid={`community-calendar-rsvp-${response}`}
+        aria-pressed={chosen}
+        disabled={saving || over}
+        onClick={() => calendar.answer(call, response)}
+        style={{
+          ...small,
+          background: chosen ? t.primary : "transparent",
+          color: chosen ? t.textPrimary : t.text,
+          border: chosen ? `1px solid ${t.primary}` : small.border,
+          cursor: saving || over ? "default" : "pointer",
+          opacity: over ? 0.6 : 1,
+        }}
+      >
+        {tr(labelKey, { count })}
+      </button>
+    );
+  };
+
+  const join = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (!navigate || !joinHref) return;
+    e.preventDefault();
+    navigate(joinHref);
+  };
+
+  return (
+    <article data-testid="community-calendar-call" style={row}>
+      <div className="fg:flex fg:items-start fg:gap-3">
+        <Video size={18} style={{ color: t.primary, flexShrink: 0, marginTop: 2 }} aria-hidden />
+        <div className="fg:min-w-0 fg:flex-1" style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          <span className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+            <button
+              type="button"
+              data-testid="community-calendar-call-open"
+              onClick={() => onOpenCall(call.id)}
+              style={{
+                padding: 0,
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                fontFamily: "inherit",
+                fontSize: 15,
+                fontWeight: 700,
+                color: t.primary,
+                textAlign: "left",
+                textDecoration: "underline",
+                textUnderlineOffset: 3,
+              }}
+            >
+              {call.title}
+            </button>
+            {call.isOpen && <span style={badge(true)}>{tr("forge.community_calendar.live_now")}</span>}
+          </span>
+          <span style={{ fontSize: 13, color: t.muted }}>
+            {tr("forge.community_calendar.call_label", { time: timeRange(call.startsAt, call.endsAt) })}
+          </span>
+          {call.description && (
+            <span
+              style={{
+                fontSize: 13,
+                color: t.text,
+                opacity: 0.85,
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+              }}
+            >
+              {call.description}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+        {joinHref && (
+          <a
+            data-testid="community-calendar-join"
+            href={joinHref}
+            onClick={join}
+            style={{ ...small, background: t.primary, color: t.textPrimary, border: `1px solid ${t.primary}` }}
+          >
+            {tr("forge.community_calendar.join")}
+          </a>
+        )}
+        {/* Answers are for calls still ahead; once it is over, what is left
+            is the recording. */}
+        {!over && answerButton("going", "forge.community_calendar.going_count", call.rsvp.going)}
+        {!over && answerButton("not_going", "forge.community_calendar.not_going_count", call.rsvp.notGoing)}
+        {!over && <AddToCalendar href={call.icsUrl} />}
+        <button type="button" data-testid="community-calendar-call-details" onClick={() => onOpenCall(call.id)} style={small}>
+          {tr("forge.community_calendar.details")}
+          <ChevronRight size={14} aria-hidden />
+        </button>
+        {over && recording && callRecordingWatchable(recording) && <CallRecordingWatchLink recording={recording} />}
+        {over && recording?.status === "processing" && <CallRecordingProcessing />}
+      </div>
+      {over && recording?.transcript && (
+        <CallTranscriptPanel
+          recordingId={recording.id}
+          transcript={recording.transcript}
+          onRead={() => onReadTranscript(recording.id)}
+        />
+      )}
+      {error && (
+        <p role="alert" data-testid="community-calendar-rsvp-error" style={{ margin: 0, fontSize: 13, color: t.text }}>
+          {tr(
+            error === "closed"
+              ? "forge.community_calendar.rsvp_closed"
+              : error === "not_found"
+                ? "forge.community_calendar.rsvp_not_found"
+                : "forge.community_calendar.rsvp_failed",
+          )}
+        </p>
+      )}
+    </article>
+  );
+}
+
+/** "Venue, City" from an event's address, when it has one. */
+function eventPlace(event: CommunityCalendarEvent): string | null {
+  const address = event.address;
+  if (!address || typeof address !== "object") return null;
+  const parts = [address.name, address.city].map((part) => (typeof part === "string" ? part.trim() : "")).filter(Boolean);
+  return parts.length ? parts.join(", ") : null;
+}
+
+function EventRow({ event, calendar, getEventHref, navigate }: { event: CommunityCalendarEvent } & RowProps) {
+  const tr = useForgeT();
+  const timeRange = useTimeRange();
+  const { t, row, small, badge } = useRowStyles();
+  const href = getEventHref(event.slug);
+  const over = calendarItemIsOver(event, calendar.now);
+  const place = event.type === "virtual" ? tr("forge.community_calendar.online") : eventPlace(event);
+
+  const open = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (!navigate) return;
+    e.preventDefault();
+    navigate(href);
+  };
+
+  return (
+    <article data-testid="community-calendar-event" data-cancelled={event.cancelled ? "true" : undefined} style={row}>
+      <div className="fg:flex fg:items-start fg:gap-3">
+        <Ticket size={18} style={{ color: event.cancelled ? t.muted : t.primary, flexShrink: 0, marginTop: 2 }} aria-hidden />
+        <div className="fg:min-w-0 fg:flex-1" style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          <span className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+            <a
+              data-testid="community-calendar-event-link"
+              href={href}
+              onClick={open}
+              style={{
+                fontSize: 15,
+                fontWeight: 700,
+                color: event.cancelled ? t.text : t.primary,
+                textDecoration: event.cancelled ? "line-through" : "underline",
+                textUnderlineOffset: 3,
+              }}
+            >
+              {event.title}
+            </a>
+            {event.cancelled && (
+              <span data-testid="community-calendar-cancelled" style={badge(false)}>
+                {tr("forge.community_calendar.cancelled")}
+              </span>
+            )}
+          </span>
+          <span style={{ fontSize: 13, color: t.muted }}>
+            {tr("forge.community_calendar.event_label", { time: timeRange(event.startsAt, event.endsAt) })}
+          </span>
+          {place && (
+            <span className="fg:inline-flex fg:items-center fg:gap-1" style={{ fontSize: 13, color: t.muted }}>
+              <MapPin size={13} aria-hidden />
+              {place}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+        <a data-testid="community-calendar-event-view" href={href} onClick={open} style={small}>
+          {tr("forge.community_calendar.view_event")}
+          <ChevronRight size={14} aria-hidden />
+        </a>
+        {!event.cancelled && !over && <AddToCalendar href={event.icsUrl} />}
+      </div>
+    </article>
+  );
+}