+ {actionBanner ? (
+ setShareModalOpen(false)}
+ onCopyLink={() => void copyPageLink()}
+ onEmailShare={mailtoPageLink}
+ onSignalShare={() => void copyPageLink()}
+ onSlackShare={() => void copyPageLink()}
+ onDiscordShare={() => void copyPageLink()}
+ />
+ setShareModalOpen(true)}
+ onDuplicate={() => void handleDuplicate()}
+ onExit={() => router.push(`/use-cases/${slug}`)}
+ />
+
+
+ );
+}
diff --git a/app/(marketing-case-study)/use-cases/[slug]/rule/_components/useUseCaseCompletedRuleActions.ts b/app/(marketing-case-study)/use-cases/[slug]/rule/_components/useUseCaseCompletedRuleActions.ts
new file mode 100644
index 0000000..0a208e0
--- /dev/null
+++ b/app/(marketing-case-study)/use-cases/[slug]/rule/_components/useUseCaseCompletedRuleActions.ts
@@ -0,0 +1,122 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useAuthModal } from "../../../../../contexts/AuthModalContext";
+import { useTranslation } from "../../../../../contexts/MessagesContext";
+import {
+ duplicateUseCaseTemplate,
+ fetchAuthSession,
+} from "../../../../../../lib/create/api";
+import type { UseCaseDetailSlug } from "../../../../../../lib/useCaseSyntheticPost";
+import type { UseCaseCompletedRuleFixture } from "../../../../../../lib/useCaseCompletedRule";
+
+export type UseCaseCompletedRuleActionBanner = {
+ key: string;
+ status: "positive" | "danger";
+ title: string;
+ description?: string;
+};
+
+export function useUseCaseCompletedRuleActions({
+ slug,
+ fixture,
+ setActionBanner,
+}: {
+ slug: UseCaseDetailSlug;
+ fixture: UseCaseCompletedRuleFixture;
+ setActionBanner: (_: UseCaseCompletedRuleActionBanner | null) => void;
+}) {
+ const router = useRouter();
+ const pathname = usePathname();
+ const { openLogin } = useAuthModal();
+ const t = useTranslation("pages.useCasesCompletedRule.topNav");
+ const [duplicateBusy, setDuplicateBusy] = useState(false);
+
+ const copyPageLink = useCallback(async () => {
+ if (typeof window === "undefined") return;
+ try {
+ await navigator.clipboard.writeText(window.location.href);
+ setActionBanner({
+ key: "shareCopied",
+ status: "positive",
+ title: t("shareLinkCopiedTitle"),
+ description: t("shareLinkCopiedDescription"),
+ });
+ } catch {
+ setActionBanner({
+ key: "shareCopyFailed",
+ status: "danger",
+ title: t("shareCopyFailedTitle"),
+ description: t("shareCopyFailedDescription"),
+ });
+ }
+ }, [setActionBanner, t]);
+
+ const mailtoPageLink = useCallback(() => {
+ if (typeof window === "undefined") return;
+ const url = window.location.href;
+ const subject = encodeURIComponent(fixture.title);
+ const body = encodeURIComponent(`${fixture.summary}\n\n${url}`);
+ window.location.href = `mailto:?subject=${subject}&body=${body}`;
+ }, [fixture.summary, fixture.title]);
+
+ const handleDuplicate = useCallback(async () => {
+ if (duplicateBusy) return;
+
+ setActionBanner(null);
+ const { user } = await fetchAuthSession();
+ if (!user) {
+ openLogin({
+ nextPath:
+ pathname && pathname.length > 0
+ ? pathname
+ : `/use-cases/${slug}/rule`,
+ backdropVariant: "blurredYellow",
+ });
+ return;
+ }
+
+ setDuplicateBusy(true);
+ const res = await duplicateUseCaseTemplate(slug);
+ setDuplicateBusy(false);
+
+ if (res.ok === false) {
+ if (res.status === 401) {
+ openLogin({
+ nextPath:
+ pathname && pathname.length > 0
+ ? pathname
+ : `/use-cases/${slug}/rule`,
+ backdropVariant: "blurredYellow",
+ });
+ return;
+ }
+
+ setActionBanner({
+ key: "duplicateFailed",
+ status: "danger",
+ title: t("duplicateFailedTitle"),
+ description:
+ res.status === 404 ? t("duplicateNotFoundDescription") : res.error,
+ });
+ return;
+ }
+
+ router.push("/profile");
+ }, [
+ duplicateBusy,
+ openLogin,
+ pathname,
+ router,
+ setActionBanner,
+ slug,
+ t,
+ ]);
+
+ return {
+ copyPageLink,
+ mailtoPageLink,
+ handleDuplicate,
+ };
+}
diff --git a/app/(marketing-case-study)/use-cases/[slug]/rule/page.tsx b/app/(marketing-case-study)/use-cases/[slug]/rule/page.tsx
new file mode 100644
index 0000000..68adcf2
--- /dev/null
+++ b/app/(marketing-case-study)/use-cases/[slug]/rule/page.tsx
@@ -0,0 +1,66 @@
+/**
+ * Figma: Completed CR — use case community rule demos
+ * (21995:39476, 21995:40092, 22015:42413)
+ */
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import messages from "../../../../../messages/en/index";
+import { resolveUseCaseCompletedRule } from "../../../../../lib/useCaseCompletedRule";
+import {
+ USE_CASE_DETAIL_SLUGS,
+ useCaseContentKeyForSlug,
+} from "../../../../../lib/useCaseSyntheticPost";
+import { UseCaseCompletedRuleView } from "./_components/UseCaseCompletedRule.view";
+
+type PageProps = {
+ params: Promise<{ slug: string }>;
+};
+
+export function generateStaticParams() {
+ return USE_CASE_DETAIL_SLUGS.map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: PageProps): Promise
+
+ ) : null}
+
+ setActionBanner(null)}
+ className="w-full"
+ />
+
+
+
+
+
+
+
+
+
+
+