Implement share and export components

app/(app)/create/screens/completed/CompletedScreen.tsx

@@ -18,6 +18,22 @@ import {
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import {
+  CREATE_FLOW_COMPLETED_CELEBRATE_QUERY,
+  CREATE_FLOW_COMPLETED_CELEBRATE_VALUE,
+} from "../../utils/flowSteps";
+
+function emptyCompletedDocumentState(): {
+  headerTitle: string;
+  headerDescription: string | undefined;
+  documentSections: CommunityRuleSection[];
+} {
+  return {
+    headerTitle: "",
+    headerDescription: undefined,
+    documentSections: [],
+  };
+}
 
 function initialCompletedUi(
   ruleIdFromUrl: string | null,
@@ -27,26 +43,14 @@ function initialCompletedUi(
   documentSections: CommunityRuleSection[];
 } {
   if (ruleIdFromUrl) {
-    return {
-      headerTitle: "",
-      headerDescription: undefined,
-      documentSections: [],
-    };
+    return emptyCompletedDocumentState();
   }
   if (typeof sessionStorage === "undefined") {
-    return {
-      headerTitle: "",
-      headerDescription: undefined,
-      documentSections: [],
-    };
+    return emptyCompletedDocumentState();
   }
   const stored = readLastPublishedRule();
   if (!stored) {
-    return {
-      headerTitle: "",
-      headerDescription: undefined,
-      documentSections: [],
-    };
+    return emptyCompletedDocumentState();
   }
   const parsed = parsePublishedDocumentForCommunityRuleDisplay(stored.document);
   if (parsed.length === 0) {
@@ -69,12 +73,17 @@ export function CompletedScreen() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const ruleIdParam = searchParams.get("ruleId");
+  const celebrateInUrl =
+    searchParams.get(CREATE_FLOW_COMPLETED_CELEBRATE_QUERY) ===
+    CREATE_FLOW_COMPLETED_CELEBRATE_VALUE;
   const mdUp = useCreateFlowMdUp();
   const m = useMessages();
   const completed = m.create.reviewAndComplete.completed;
 
   const initial = initialCompletedUi(ruleIdParam);
   const [toastDismissed, setToastDismissed] = useState(false);
+  /** Latch: toast copy should survive `router.replace` after we strip `?celebrate=1`. */
+  const [showCelebrateToast] = useState(celebrateInUrl);
   const [headerTitle, setHeaderTitle] = useState(initial.headerTitle);
   const [headerDescription, setHeaderDescription] = useState<
     string | undefined
@@ -126,7 +135,12 @@ export function CompletedScreen() {
     };
   }, [ruleIdParam, router]);
 
-  const toast = !toastDismissed ? (
+  useEffect(() => {
+    if (!celebrateInUrl) return;
+    router.replace("/create/completed");
+  }, [celebrateInUrl, router]);
+
+  const toast = showCelebrateToast && !toastDismissed ? (
     <div
       className="fixed bottom-0 left-0 right-0 z-10 w-full"
       role="status"

app/(app)/create/screens/review/CommunityReviewScreen.tsx

@@ -16,6 +16,7 @@ import {
   getAssetPath,
   vectorMarkPath,
 } from "../../../../../lib/assetUtils";
+import { methodSectionsPinsForHydratedSelections } from "../../../../../lib/create/publishedDocumentToCreateFlowState";
 
 /**
  * Targets for a `pendingTemplateAction` redirect. Customize resumes the
@@ -58,9 +59,27 @@ export function CommunityReviewScreen() {
     const target = PENDING_TEMPLATE_REDIRECT_TARGET[pending.mode];
     if (!target) return;
     firedRedirectRef.current = true;
-    updateState({ pendingTemplateAction: undefined });
+    const pinMerge =
+      pending.mode === "customize"
+        ? {
+            methodSectionsPinCommitted: {
+              ...state.methodSectionsPinCommitted,
+              ...methodSectionsPinsForHydratedSelections(state),
+            },
+          }
+        : {};
+    updateState({ pendingTemplateAction: undefined, ...pinMerge });
     router.replace(target);
-  }, [router, state.pendingTemplateAction, updateState]);
+  }, [
+    router,
+    state.pendingTemplateAction,
+    state.methodSectionsPinCommitted,
+    state.selectedCommunicationMethodIds,
+    state.selectedMembershipMethodIds,
+    state.selectedDecisionApproachIds,
+    state.selectedConflictManagementIds,
+    updateState,
+  ]);
 
   const cardTitle =
     typeof state.title === "string" && state.title.trim().length > 0