diff --git a/app/(app)/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx index 9e46c6b..33ce2ab 100644 --- a/app/(app)/create/CreateFlowLayoutClient.tsx +++ b/app/(app)/create/CreateFlowLayoutClient.tsx @@ -62,6 +62,10 @@ import { } from "../../../lib/create/publishedDocumentToCreateFlowState"; import { METHOD_FACET_API_SECTION_IDS } from "../../../lib/create/customRuleFacets"; import { readLastPublishedRule } from "../../../lib/create/lastPublishedRule"; +import { + CREATE_FLOW_COPIED_QUERY, + CREATE_FLOW_COPIED_VALUE, +} from "../../../lib/create/invitePaths"; import { clearPendingKeepRuleLogin, hasPendingKeepRuleLogin, @@ -220,6 +224,7 @@ function CreateFlowLayoutContent({ const [leaveConfirmOpen, setLeaveConfirmOpen] = useState(false); const [completedHasPublishedRule, setCompletedHasPublishedRule] = useState(false); + const [completedCopiedReady, setCompletedCopiedReady] = useState(false); type LeaveConfirmChoice = "leave" | "save" | "cancel"; const leaveConfirmResolverRef = useRef< ((choice: LeaveConfirmChoice) => void) | null @@ -548,9 +553,12 @@ function CreateFlowLayoutContent({ if (currentStep !== "completed") { setCompletedFlowBanner(null); setCompletedHasPublishedRule(false); + setCompletedCopiedReady(false); return; } - setCompletedHasPublishedRule(Boolean(readLastPublishedRule())); + const last = readLastPublishedRule(); + setCompletedHasPublishedRule(Boolean(last)); + setCompletedCopiedReady(Boolean(last?.copiedFromTitle)); }, [currentStep]); useEffect(() => { @@ -913,7 +921,13 @@ function CreateFlowLayoutContent({ onExit={(opts) => void handleExit(opts)} buttonPalette={isCompletedStep ? "inverse" : undefined} className={`relative z-[210] shrink-0 ${ - isCompletedStep ? "!bg-[var(--color-teal-teal50,#c9fef9)]" : "" + isCompletedStep + ? completedCopiedReady || + searchParams.get(CREATE_FLOW_COPIED_QUERY) === + CREATE_FLOW_COPIED_VALUE + ? "!bg-[var(--color-lavender-lavender150,#d1bdf3)]" + : "!bg-[var(--color-teal-teal50,#c9fef9)]" + : "" }`.trim()} /> {currentStep === "community-save" ? ( diff --git a/app/(app)/create/screens/completed/CompletedScreen.tsx b/app/(app)/create/screens/completed/CompletedScreen.tsx index f85dd25..9e86423 100644 --- a/app/(app)/create/screens/completed/CompletedScreen.tsx +++ b/app/(app)/create/screens/completed/CompletedScreen.tsx @@ -26,6 +26,11 @@ import { CREATE_FLOW_COMPLETED_CELEBRATE_QUERY, CREATE_FLOW_COMPLETED_CELEBRATE_VALUE, } from "../../utils/flowSteps"; +import { + CREATE_FLOW_COPIED_QUERY, + CREATE_FLOW_COPIED_VALUE, +} from "../../../../../lib/create/invitePaths"; +import { communityPossessive } from "../../../../../lib/create/ruleInviteCardMeta"; function emptyCompletedDocumentState(): { headerTitle: string; @@ -80,6 +85,11 @@ export function CompletedScreen() { const celebrateInUrl = searchParams.get(CREATE_FLOW_COMPLETED_CELEBRATE_QUERY) === CREATE_FLOW_COMPLETED_CELEBRATE_VALUE; + const copiedInUrl = + searchParams.get(CREATE_FLOW_COPIED_QUERY) === CREATE_FLOW_COPIED_VALUE; + const storedForCopy = ruleIdParam ? null : readLastPublishedRule(); + const copiedFromTitle = storedForCopy?.copiedFromTitle; + const copiedNameHit = storedForCopy?.copiedNameHit ?? null; const mdUp = useCreateFlowMdUp(); const m = useMessages(); const completed = m.create.reviewAndComplete.completed; @@ -88,6 +98,7 @@ export function CompletedScreen() { const [toastDismissed, setToastDismissed] = useState(false); /** Latch: toast copy should survive `router.replace` after we strip `?celebrate=1`. */ const [showCelebrateToast] = useState(celebrateInUrl); + const [showCopiedReady] = useState(copiedInUrl); const [askOrganizerOpen, setAskOrganizerOpen] = useState(false); const [headerTitle, setHeaderTitle] = useState(initial.headerTitle); const [headerDescription, setHeaderDescription] = useState< @@ -141,11 +152,17 @@ export function CompletedScreen() { }, [ruleIdParam, router]); useEffect(() => { - if (!celebrateInUrl) return; + if (!celebrateInUrl && !copiedInUrl) return; router.replace("/create/completed"); - }, [celebrateInUrl, router]); + }, [celebrateInUrl, copiedInUrl, router]); - const toast = showCelebrateToast && !toastDismissed ? ( + const surfaceCopied = showCopiedReady || Boolean(copiedFromTitle); + const surfaceClass = surfaceCopied + ? "bg-[var(--color-lavender-lavender150,#d1bdf3)]" + : "bg-[var(--color-teal-teal50,#c9fef9)]"; + + const toast = + !toastDismissed && (showCopiedReady || showCelebrateToast) ? (
setToastDismissed(true)} @@ -166,7 +194,7 @@ export function CompletedScreen() { return ( <> -
+
@@ -180,7 +208,7 @@ export function CompletedScreen() { size="L" palette="inverse" /> - {headerTitle ? ( + {headerTitle && !surfaceCopied ? (

{completed.askOrganizerLead}{" "}