Show invited people the Rule, let them copy its cards for their community, and replace an expired invitation link.
This commit is contained in:
adilallo committed
1 parent
727a92a9ac
commit
3c984e00c5
37 files changed
+1962
-19
No files matched your search
@@ -0,0 +1,276 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Logo from "../../../components/asset/Logo";
|
||||
import Button from "../../../components/buttons/Button";
|
||||
import Alert from "../../../components/modals/Alert";
|
||||
import CommunityRule from "../../../components/type/CommunityRule";
|
||||
import { useTranslation } from "../../../contexts/MessagesContext";
|
||||
import { makeCopyPublishedRule } from "../../../../lib/create/api";
|
||||
import { communityPossessive } from "../../../../lib/create/ruleInviteCardMeta";
|
||||
import { CREATE_FLOW_COPIED_QUERY, CREATE_FLOW_COPIED_VALUE } from "../../../../lib/create/invitePaths";
|
||||
import { formatInviteLastChanged } from "../../../../lib/create/inviteLastChanged";
|
||||
import { writeLastPublishedRule } from "../../../../lib/create/lastPublishedRule";
|
||||
import { downloadStoredRuleAsPdf } from "../../../../lib/create/ruleExport";
|
||||
import { createCompletedPath } from "../../create/utils/createFlowPaths";
|
||||
import { CreateFlowHeaderLockup } from "../../create/components/CreateFlowHeaderLockup";
|
||||
import { useCreateFlowMdUp } from "../../create/hooks/useCreateFlowMdUp";
|
||||
import {
|
||||
CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
|
||||
CREATE_FLOW_PAGE_GUTTER_CLASS,
|
||||
CREATE_FLOW_SCROLL_REGION_CLASS,
|
||||
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
|
||||
CREATE_FLOW_VIEWPORT_FRAME_CLASS,
|
||||
} from "../../create/components/createFlowLayoutTokens";
|
||||
import { parsePublishedDocumentForCommunityRuleDisplay } from "../../../../lib/create/publishedDocumentToDisplaySections";
|
||||
import { MakeACopyDialog } from "./MakeACopyDialog";
|
||||
import type { CommunityRuleSection } from "../../../components/type/CommunityRule/CommunityRule.types";
|
||||
|
||||
const outlineButtonClass =
|
||||
"md:!text-x-small-label !text-xx-small-label !px-[var(--space-150)] md:!px-[var(--space-200)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]";
|
||||
|
||||
const SURFACE = "bg-[var(--color-teal-teal50,#c9fef9)]";
|
||||
|
||||
export type InvitedRuleViewProps = {
|
||||
ruleId: string;
|
||||
title: string;
|
||||
summary: string | null;
|
||||
document: Record<string, unknown>;
|
||||
updatedAt: string;
|
||||
inviterEmail: string | null;
|
||||
viewerEmail: string;
|
||||
countsSpoken: string;
|
||||
openCopyDialog?: boolean;
|
||||
};
|
||||
|
||||
export function InvitedRuleView({
|
||||
ruleId,
|
||||
title,
|
||||
summary,
|
||||
document,
|
||||
updatedAt,
|
||||
inviterEmail,
|
||||
viewerEmail,
|
||||
countsSpoken,
|
||||
openCopyDialog = false,
|
||||
}: InvitedRuleViewProps) {
|
||||
const t = useTranslation("pages.invite");
|
||||
const router = useRouter();
|
||||
const mdUp = useCreateFlowMdUp();
|
||||
const [copyOpen, setCopyOpen] = useState(openCopyDialog);
|
||||
const [copyBusy, setCopyBusy] = useState(false);
|
||||
const [copyError, setCopyError] = useState<string | null>(null);
|
||||
const [exportError, setExportError] = useState(false);
|
||||
|
||||
const sections: CommunityRuleSection[] =
|
||||
parsePublishedDocumentForCommunityRuleDisplay(document);
|
||||
const possessive = communityPossessive(title);
|
||||
const lastChanged = formatInviteLastChanged(updatedAt);
|
||||
const bannerTitle = inviterEmail
|
||||
? t("bannerTitle").replace("{email}", inviterEmail)
|
||||
: t("bannerTitleNoEmail");
|
||||
const whoCanEdit = inviterEmail ?? t("whoCanEditUnknown");
|
||||
|
||||
useEffect(() => {
|
||||
if (!openCopyDialog) return;
|
||||
router.replace(`/invite/${encodeURIComponent(ruleId)}`);
|
||||
}, [openCopyDialog, ruleId, router]);
|
||||
|
||||
const handlePdf = useCallback(() => {
|
||||
try {
|
||||
downloadStoredRuleAsPdf({
|
||||
id: ruleId,
|
||||
title,
|
||||
summary,
|
||||
document,
|
||||
});
|
||||
setExportError(false);
|
||||
} catch {
|
||||
setExportError(true);
|
||||
}
|
||||
}, [document, ruleId, summary, title]);
|
||||
|
||||
const handleCopy = useCallback(
|
||||
async (communityName: string) => {
|
||||
setCopyBusy(true);
|
||||
setCopyError(null);
|
||||
const result = await makeCopyPublishedRule(ruleId, communityName);
|
||||
setCopyBusy(false);
|
||||
if (result.ok === false) {
|
||||
setCopyError(t("copyFailed"));
|
||||
return;
|
||||
}
|
||||
writeLastPublishedRule({
|
||||
id: result.id,
|
||||
title: result.title,
|
||||
summary: result.summary,
|
||||
document: result.document,
|
||||
copiedFromTitle: result.copiedFromTitle,
|
||||
copiedNameHit: result.copiedNameHit,
|
||||
});
|
||||
router.push(
|
||||
createCompletedPath({
|
||||
[CREATE_FLOW_COPIED_QUERY]: CREATE_FLOW_COPIED_VALUE,
|
||||
}),
|
||||
);
|
||||
},
|
||||
[ruleId, router, t],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`${CREATE_FLOW_VIEWPORT_FRAME_CLASS} ${SURFACE}`}>
|
||||
<header
|
||||
className={`${SURFACE} w-full print:hidden`}
|
||||
role="banner"
|
||||
>
|
||||
<nav
|
||||
className={`mx-auto flex w-full max-w-[1920px] items-center justify-between ${CREATE_FLOW_PAGE_GUTTER_CLASS} py-[var(--space-300)] md:py-[var(--space-400)]`}
|
||||
aria-label={t("navAria")}
|
||||
>
|
||||
<Logo size="createFlow" wordmark palette="inverse" />
|
||||
<Button
|
||||
buttonType="outline"
|
||||
palette="inverse"
|
||||
size="xsmall"
|
||||
type="button"
|
||||
ariaLabel={t("makeACopyAria")}
|
||||
className={outlineButtonClass}
|
||||
onClick={() => {
|
||||
setCopyError(null);
|
||||
setCopyOpen(true);
|
||||
}}
|
||||
>
|
||||
{t("makeACopy")}
|
||||
</Button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden">
|
||||
<div
|
||||
className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 ${CREATE_FLOW_PAGE_GUTTER_CLASS} max-md:h-full max-md:grid-rows-[auto_minmax(0,1fr)] max-md:overflow-hidden max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--space-1200)] md:overflow-hidden md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
|
||||
>
|
||||
<div
|
||||
className={`flex shrink-0 flex-col justify-start min-h-0 overflow-hidden md:justify-center md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
|
||||
>
|
||||
<CreateFlowHeaderLockup
|
||||
title={title}
|
||||
description={summary ?? undefined}
|
||||
justification="left"
|
||||
size="L"
|
||||
palette="inverse"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`relative flex min-h-0 flex-col overflow-x-hidden overflow-y-auto md:max-h-full md:self-stretch ${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
|
||||
>
|
||||
<div className="flex w-full min-w-0 flex-col gap-[var(--space-600)] py-0 md:pb-8">
|
||||
<div className="print:hidden">
|
||||
<Alert
|
||||
type="banner"
|
||||
status="default"
|
||||
title={bannerTitle}
|
||||
description={t("bannerDescription")}
|
||||
hasLeadingIcon
|
||||
hasBodyText
|
||||
hasTrailingIcon={false}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-[var(--space-300)] print:hidden">
|
||||
<Button
|
||||
buttonType="outline"
|
||||
palette="inverse"
|
||||
size="xsmall"
|
||||
type="button"
|
||||
className={outlineButtonClass}
|
||||
onClick={handlePdf}
|
||||
>
|
||||
{t("downloadPdf")}
|
||||
</Button>
|
||||
<Button
|
||||
buttonType="outline"
|
||||
palette="inverse"
|
||||
size="xsmall"
|
||||
type="button"
|
||||
className={outlineButtonClass}
|
||||
onClick={() => window.print()}
|
||||
>
|
||||
{t("print")}
|
||||
</Button>
|
||||
</div>
|
||||
{exportError ? (
|
||||
<p role="alert" className="text-small-paragraph print:hidden">
|
||||
{t("exportFailedDescription")}
|
||||
</p>
|
||||
) : null}
|
||||
<CommunityRule
|
||||
sections={sections}
|
||||
useCardStyle={!mdUp}
|
||||
className={mdUp ? "min-w-0" : "w-full min-w-0 p-4"}
|
||||
/>
|
||||
<div className="flex w-full flex-col border-t border-[var(--color-content-invert-secondary)] print:hidden">
|
||||
<h2 className="sr-only">{t("factsHeading")}</h2>
|
||||
<FactRow label={t("whoCanEdit")} value={whoCanEdit} />
|
||||
<FactRow label={t("whoCanSee")} value={t("whoCanSeeValue")} />
|
||||
<FactRow label={t("lastChanged")} value={lastChanged} />
|
||||
</div>
|
||||
<div className="flex w-full min-w-0 flex-col gap-[var(--space-400)] rounded-[var(--radius-400)] bg-[var(--color-surface-invert-brand-primary)] p-[var(--space-600)] text-[var(--color-content-invert-primary)] print:hidden">
|
||||
<p className="font-bricolage text-x-small-heading">
|
||||
{t("copyCardTitle")}
|
||||
</p>
|
||||
<p className="text-small-paragraph">
|
||||
{t("copyCardBody").replace("{counts}", countsSpoken)}
|
||||
</p>
|
||||
<Button
|
||||
buttonType="outline"
|
||||
palette="inverse"
|
||||
size="small"
|
||||
type="button"
|
||||
className="self-start"
|
||||
onClick={() => {
|
||||
setCopyError(null);
|
||||
setCopyOpen(true);
|
||||
}}
|
||||
>
|
||||
{t("makeACopy")}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-small-paragraph text-[var(--color-content-invert-secondary)] print:hidden">
|
||||
{t("privacy")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MakeACopyDialog
|
||||
isOpen={copyOpen}
|
||||
onClose={() => {
|
||||
if (!copyBusy) setCopyOpen(false);
|
||||
}}
|
||||
possessive={possessive}
|
||||
countsSpoken={countsSpoken}
|
||||
viewerEmail={viewerEmail}
|
||||
busy={copyBusy}
|
||||
error={copyError}
|
||||
onConfirm={(communityName) => {
|
||||
void handleCopy(communityName);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FactRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-baseline justify-between gap-[var(--space-400)] border-b border-[var(--color-content-invert-secondary)] py-[var(--space-300)]">
|
||||
<p className="text-small-label text-[var(--color-content-invert-secondary)]">
|
||||
{label}
|
||||
</p>
|
||||
<p className="text-right text-small-paragraph text-[var(--color-content-invert-primary)]">
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user