From bdbd57c2fc1c90f9c8ea04ae56a1b86ec740d6a2 Mon Sep 17 00:00:00 2001
From: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>
Date: Fri, 18 Jul 2025 10:44:32 +0530
Subject: [PATCH] fix: adds read only survey url (#6252)

---
 .../anonymous-links-tab.test.tsx              | 52 +++++++++++++++++++
 .../shareEmbedModal/anonymous-links-tab.tsx   | 43 ++++++++++-----
 2 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab.test.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab.test.tsx
index d1f7414071..b052a2364e 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab.test.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab.test.tsx
@@ -378,4 +378,56 @@ describe("AnonymousLinksTab", () => {
       screen.getByText("environments.surveys.share.anonymous_links.data_prefilling")
     ).toBeInTheDocument();
   });
+
+  test("shows read-only input with copy button when encryption is disabled", async () => {
+    // surveyWithSingleUse has encryption disabled
+    render(<AnonymousLinksTab {...defaultProps} survey={surveyWithSingleUse} />);
+
+    // Check if single-use link is enabled
+    expect(screen.getByTestId("toggle-single-use-link-switch")).toHaveAttribute("data-checked", "true");
+
+    // Check if encryption is disabled
+    expect(screen.getByTestId("toggle-single-use-encryption-switch")).toHaveAttribute(
+      "data-checked",
+      "false"
+    );
+
+    // Check for the custom URL display
+    const surveyUrlWithCustomSuid = `${defaultProps.surveyUrl}?suId=CUSTOM-ID`;
+    expect(screen.getByText(surveyUrlWithCustomSuid)).toBeInTheDocument();
+
+    // Check for the copy button and try to click it
+    const copyButton = screen.getByText("common.copy");
+    expect(copyButton).toBeInTheDocument();
+    await userEvent.click(copyButton);
+
+    // check if toast is called
+    expect(toast.success).toHaveBeenCalledWith("common.copied_to_clipboard");
+
+    // Check for the alert
+    expect(
+      screen.getByText("environments.surveys.share.anonymous_links.custom_single_use_id_title")
+    ).toBeInTheDocument();
+
+    // Ensure the number of links input is not visible
+    expect(
+      screen.queryByText("environments.surveys.share.anonymous_links.number_of_links_label")
+    ).not.toBeInTheDocument();
+  });
+
+  test("hides read-only input with copy button when encryption is enabled", async () => {
+    // surveyWithEncryption has encryption enabled
+    render(<AnonymousLinksTab {...defaultProps} survey={surveyWithEncryption} />);
+
+    // Check if single-use link is enabled
+    expect(screen.getByTestId("toggle-single-use-link-switch")).toHaveAttribute("data-checked", "true");
+
+    // Check if encryption is enabled
+    expect(screen.getByTestId("toggle-single-use-encryption-switch")).toHaveAttribute("data-checked", "true");
+
+    // Ensure the number of links input is visible
+    expect(
+      screen.getByText("environments.surveys.share.anonymous_links.number_of_links_label")
+    ).toBeInTheDocument();
+  });
 });
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab.tsx
index f50ceeb7d9..f313d1baaa 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab.tsx
@@ -4,14 +4,13 @@ import { updateSingleUseLinksAction } from "@/app/(app)/environments/[environmen
 import { DisableLinkModal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/disable-link-modal";
 import { DocumentationLinks } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/documentation-links";
 import { ShareSurveyLink } from "@/modules/analysis/components/ShareSurveyLink";
-import { getSurveyUrl } from "@/modules/analysis/utils";
 import { generateSingleUseIdsAction } from "@/modules/survey/list/actions";
 import { AdvancedOptionToggle } from "@/modules/ui/components/advanced-option-toggle";
 import { Alert, AlertDescription, AlertTitle } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
 import { Input } from "@/modules/ui/components/input";
 import { useTranslate } from "@tolgee/react";
-import { CirclePlayIcon } from "lucide-react";
+import { CirclePlayIcon, CopyIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -33,6 +32,7 @@ export const AnonymousLinksTab = ({
   setSurveyUrl,
   locale,
 }: AnonymousLinksTabProps) => {
+  const surveyUrlWithCustomSuid = `${surveyUrl}?suId=CUSTOM-ID`;
   const router = useRouter();
   const { t } = useTranslate();
 
@@ -173,11 +173,9 @@ export const AnonymousLinksTab = ({
         count,
       });
 
-      const baseSurveyUrl = getSurveyUrl(survey, publicDomain, "default");
-
       if (!!response?.data?.length) {
         const singleUseIds = response.data;
-        const surveyLinks = singleUseIds.map((singleUseId) => `${baseSurveyUrl}?suId=${singleUseId}`);
+        const surveyLinks = singleUseIds.map((singleUseId) => `${surveyUrl}?suId=${singleUseId}`);
 
         // Create content with just the links
         const csvContent = surveyLinks.join("\n");
@@ -258,14 +256,33 @@ export const AnonymousLinksTab = ({
               />
 
               {!singleUseEncryption ? (
-                <Alert variant="info" size="default">
-                  <AlertTitle>
-                    {t("environments.surveys.share.anonymous_links.custom_single_use_id_title")}
-                  </AlertTitle>
-                  <AlertDescription>
-                    {t("environments.surveys.share.anonymous_links.custom_single_use_id_description")}
-                  </AlertDescription>
-                </Alert>
+                <div className="flex w-full flex-col gap-4">
+                  <Alert variant="info" size="default">
+                    <AlertTitle>
+                      {t("environments.surveys.share.anonymous_links.custom_single_use_id_title")}
+                    </AlertTitle>
+                    <AlertDescription>
+                      {t("environments.surveys.share.anonymous_links.custom_single_use_id_description")}
+                    </AlertDescription>
+                  </Alert>
+
+                  <div className="grid w-full grid-cols-6 items-center gap-2">
+                    <div className="col-span-5 truncate rounded-md border border-slate-200 px-2 py-1">
+                      <span className="truncate text-sm text-slate-900">{surveyUrlWithCustomSuid}</span>
+                    </div>
+
+                    <Button
+                      variant="secondary"
+                      onClick={() => {
+                        navigator.clipboard.writeText(surveyUrlWithCustomSuid);
+                        toast.success(t("common.copied_to_clipboard"));
+                      }}
+                      className="col-span-1 gap-1 text-sm">
+                      {t("common.copy")}
+                      <CopyIcon />
+                    </Button>
+                  </div>
+                </div>
               ) : null}
 
               {singleUseEncryption && (