fix: disables tabs when single use is enabled [Backport] (#6412)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.tsx

@@ -29,7 +29,7 @@ import {
   SquareStack,
   UserIcon,
 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { TSegment } from "@formbricks/types/segment";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUser } from "@formbricks/types/user";
@@ -77,6 +77,7 @@ export const ShareSurveyModal = ({
     description: string;
     componentType: React.ComponentType<unknown>;
     componentProps: unknown;
+    disabled?: boolean;
   }[] = useMemo(
     () => [
       {
@@ -111,6 +112,7 @@ export const ShareSurveyModal = ({
           isContactsEnabled,
           isFormbricksCloud,
         },
+        disabled: survey.singleUse?.enabled,
       },
       {
         id: ShareViaType.WEBSITE_EMBED,
@@ -121,6 +123,7 @@ export const ShareSurveyModal = ({
         description: t("environments.surveys.share.embed_on_website.description"),
         componentType: WebsiteEmbedTab,
         componentProps: { surveyUrl },
+        disabled: survey.singleUse?.enabled,
       },
       {
         id: ShareViaType.EMAIL,
@@ -131,6 +134,7 @@ export const ShareSurveyModal = ({
         description: t("environments.surveys.share.send_email.description"),
         componentType: EmailTab,
         componentProps: { surveyId: survey.id, email },
+        disabled: survey.singleUse?.enabled,
       },
       {
         id: ShareViaType.SOCIAL_MEDIA,
@@ -141,6 +145,7 @@ export const ShareSurveyModal = ({
         description: t("environments.surveys.share.social_media.description"),
         componentType: SocialMediaTab,
         componentProps: { surveyUrl, surveyTitle: survey.name },
+        disabled: survey.singleUse?.enabled,
       },
       {
         id: ShareViaType.QR_CODE,
@@ -151,6 +156,7 @@ export const ShareSurveyModal = ({
         description: t("environments.surveys.summary.qr_code_description"),
         componentType: QRCodeTab,
         componentProps: { surveyUrl },
+        disabled: survey.singleUse?.enabled,
       },
       {
         id: ShareViaType.DYNAMIC_POPUP,
@@ -177,9 +183,9 @@ export const ShareSurveyModal = ({
       t,
       survey,
       publicDomain,
-      setSurveyUrl,
       user.locale,
       surveyUrl,
+      isReadOnly,
       environmentId,
       segments,
       isContactsEnabled,
@@ -188,9 +194,14 @@ export const ShareSurveyModal = ({
     ]
   );
 
-  const [activeId, setActiveId] = useState<ShareViaType | ShareSettingsType>(
-    survey.type === "link" ? ShareViaType.ANON_LINKS : ShareViaType.APP
-  );
+  const getDefaultActiveId = useCallback(() => {
+    if (survey.type !== "link") {
+      return ShareViaType.APP;
+    }
+    return ShareViaType.ANON_LINKS;
+  }, [survey.type]);
+
+  const [activeId, setActiveId] = useState<ShareViaType | ShareSettingsType>(getDefaultActiveId());
 
   useEffect(() => {
     if (open) {
@@ -198,11 +209,19 @@ export const ShareSurveyModal = ({
     }
   }, [open, modalView]);
 
+  // Ensure active tab is not disabled - if it is, switch to default
+  useEffect(() => {
+    const activeTab = linkTabs.find((tab) => tab.id === activeId);
+    if (activeTab?.disabled) {
+      setActiveId(getDefaultActiveId());
+    }
+  }, [activeId, linkTabs, getDefaultActiveId]);
+
   const handleOpenChange = (open: boolean) => {
     setOpen(open);
     if (!open) {
       setShowView("start");
-      setActiveId(ShareViaType.ANON_LINKS);
+      setActiveId(getDefaultActiveId());
     }
   };
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/share-view.tsx

@@ -34,6 +34,7 @@ interface ShareViewProps {
     componentProps: any;
     title: string;
     description?: string;
+    disabled?: boolean;
   }>;
   activeId: ShareViaType | ShareSettingsType;
   setActiveId: React.Dispatch<React.SetStateAction<ShareViaType | ShareSettingsType>>;
@@ -109,12 +110,13 @@ export const ShareView = ({ tabs, activeId, setActiveId }: ShareViewProps) => {
                             onClick={() => setActiveId(tab.id)}
                             className={cn(
                               "flex w-full justify-start rounded-md p-2 text-slate-600 hover:bg-slate-100 hover:text-slate-900",
-                              tab.id === activeId
+                              tab.id === activeId && !tab.disabled
                                 ? "bg-slate-100 font-medium text-slate-900"
                                 : "text-slate-700"
                             )}
                             tooltip={tab.label}
-                            isActive={tab.id === activeId}>
+                            isActive={tab.id === activeId}
+                            disabled={tab.disabled}>
                             <tab.icon className="h-4 w-4 text-slate-700" />
                             <span>{tab.label}</span>
                           </SidebarMenuButton>
@@ -136,9 +138,10 @@ export const ShareView = ({ tabs, activeId, setActiveId }: ShareViewProps) => {
                 <Button
                   variant="ghost"
                   onClick={() => setActiveId(tab.id)}
+                  disabled={tab.disabled}
                   className={cn(
                     "rounded-md px-4 py-2",
-                    tab.id === activeId
+                    tab.id === activeId && !tab.disabled
                       ? "bg-white text-slate-900 shadow-sm hover:bg-white"
                       : "border-transparent text-slate-700 hover:text-slate-900"
                   )}>