fix: new survey button visible to viewers (#3065)

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/templates/page.tsx

@@ -1,6 +1,9 @@
 import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
 import { authOptions } from "@formbricks/lib/authOptions";
 import { getEnvironment } from "@formbricks/lib/environment/service";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { getUser } from "@formbricks/lib/user/service";
 import { TProductConfigChannel, TProductConfigIndustry } from "@formbricks/types/product";
@@ -43,6 +46,15 @@ const Page = async ({ params, searchParams }: SurveyTemplateProps) => {
   if (!environment) {
     throw new Error("Environment not found");
   }
+  const currentUserMembership = await getMembershipByUserIdOrganizationId(
+    session?.user.id,
+    product.organizationId
+  );
+  const { isViewer } = getAccessFlags(currentUserMembership?.role);
+
+  if (isViewer) {
+    return redirect(`/environments/${environment.id}/surveys`);
+  }
 
   const prefilledFilters = [product.config.channel, product.config.industry, searchParams.role ?? null];
 

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx

@@ -102,6 +102,7 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
             environment={environment}
             environments={environments}
             currentProductChannel={currentProductChannel}
+            membershipRole={currentUserMembership?.role}
           />
           <div className="mt-14">{children}</div>
         </div>

apps/web/app/(app)/environments/[environmentId]/components/TopControlBar.tsx

@@ -2,15 +2,22 @@ import { TopControlButtons } from "@/app/(app)/environments/[environmentId]/comp
 import { WidgetStatusIndicator } from "@/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator";
 import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 import { TEnvironment } from "@formbricks/types/environment";
+import { TMembershipRole } from "@formbricks/types/memberships";
 import { TProductConfigChannel } from "@formbricks/types/product";
 
 interface SideBarProps {
   environment: TEnvironment;
   environments: TEnvironment[];
   currentProductChannel: TProductConfigChannel;
+  membershipRole?: TMembershipRole;
 }
 
-export const TopControlBar = ({ environment, environments, currentProductChannel }: SideBarProps) => {
+export const TopControlBar = ({
+  environment,
+  environments,
+  currentProductChannel,
+  membershipRole,
+}: SideBarProps) => {
   return (
     <div className="fixed inset-0 top-0 z-30 flex h-14 w-full items-center justify-end bg-slate-50 px-6">
       <div className="shadow-xs z-10">
@@ -28,6 +35,7 @@ export const TopControlBar = ({ environment, environments, currentProductChannel
             environment={environment}
             environments={environments}
             isFormbricksCloud={IS_FORMBRICKS_CLOUD}
+            membershipRole={membershipRole}
           />
         </div>
       </div>

apps/web/app/(app)/environments/[environmentId]/components/TopControlButtons.tsx

@@ -5,18 +5,21 @@ import { CircleUserIcon, MessageCircleQuestionIcon, PlusIcon } from "lucide-reac
 import { useRouter } from "next/navigation";
 import formbricks from "@formbricks/js/app";
 import { TEnvironment } from "@formbricks/types/environment";
+import { TMembershipRole } from "@formbricks/types/memberships";
 import { Button } from "@formbricks/ui/Button";
 
 interface TopControlButtonsProps {
   environment: TEnvironment;
   environments: TEnvironment[];
   isFormbricksCloud: boolean;
+  membershipRole?: TMembershipRole;
 }
 
 export const TopControlButtons = ({
   environment,
   environments,
   isFormbricksCloud,
+  membershipRole,
 }: TopControlButtonsProps) => {
   const router = useRouter();
   return (
@@ -44,16 +47,18 @@ export const TopControlButtons = ({
         }}>
         <CircleUserIcon strokeWidth={1.5} className="h-5 w-5" />
       </Button>
-      <Button
-        variant="secondary"
-        size="icon"
-        tooltip="New survey"
-        className="h-fit w-fit p-1"
-        onClick={() => {
-          router.push(`/environments/${environment.id}/surveys/templates`);
-        }}>
-        <PlusIcon strokeWidth={1.5} className="h-5 w-5" />
-      </Button>
+      {membershipRole && membershipRole !== "viewer" ? (
+        <Button
+          variant="secondary"
+          size="icon"
+          tooltip="New survey"
+          className="h-fit w-fit p-1"
+          onClick={() => {
+            router.push(`/environments/${environment.id}/surveys/templates`);
+          }}>
+          <PlusIcon strokeWidth={1.5} className="h-5 w-5" />
+        </Button>
+      ) : null}
     </div>
   );
 };

apps/web/app/(app)/environments/[environmentId]/surveys/page.tsx

@@ -90,6 +90,15 @@ const Page = async ({ params, searchParams }: SurveyTemplateProps) => {
             currentProductChannel={currentProductChannel}
           />
         </>
+      ) : isViewer ? (
+        <>
+          <h1 className="px-6 text-3xl font-extrabold text-slate-700">No surveys created yet.</h1>
+
+          <h2 className="px-6 text-lg font-medium text-slate-500">
+            As a Viewer you are not allowed to create surveys. Please ask an Editor to create a survey or an
+            Admin to upgrade your role.
+          </h2>
+        </>
       ) : (
         <>
           <h1 className="px-6 text-3xl font-extrabold text-slate-700">