fix: webapp_url env var not reflected client side

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

@@ -14,7 +14,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/shared/DropdownMenu";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { SURVEY_BASE_URL } from "@formbricks/lib/constants";
 import type { TEnvironment } from "@formbricks/types/v1/environment";
 import type { TSurveyWithAnalytics } from "@formbricks/types/v1/surveys";
 import {
@@ -36,19 +35,21 @@ interface SurveyDropDownMenuProps {
   survey: TSurveyWithAnalytics;
   environment: TEnvironment;
   otherEnvironment: TEnvironment;
+  surveyBaseUrl: string;
 }
 
 export default function SurveyDropDownMenu({
   environmentId,
   survey,
   environment,
   otherEnvironment,
+  surveyBaseUrl,
 }: SurveyDropDownMenuProps) {
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
-  const surveyUrl = useMemo(() => SURVEY_BASE_URL + survey.id, [survey]);
+  const surveyUrl = useMemo(() => surveyBaseUrl + survey.id, [survey]);
 
   const handleDeleteSurvey = async (survey) => {
     setLoading(true);

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

@@ -10,6 +10,7 @@ import type { TSurveyWithAnalytics } from "@formbricks/types/v1/surveys";
 import { Badge } from "@formbricks/ui";
 import { ComputerDesktopIcon, LinkIcon, PlusIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
+import { SURVEY_BASE_URL } from "@formbricks/lib/constants";
 
 export default async function SurveysList({ environmentId }: { environmentId: string }) {
   const product = await getProductByEnvironmentId(environmentId);
@@ -89,6 +90,7 @@ export default async function SurveysList({ environmentId }: { environmentId: st
                       environmentId={environmentId}
                       environment={environment}
                       otherEnvironment={otherEnvironment!}
+                      surveyBaseUrl={SURVEY_BASE_URL}
                     />
                   </div>
                 </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/ResponsePage.tsx

@@ -16,9 +16,10 @@ interface ResponsePageProps {
   survey: TSurvey;
   surveyId: string;
   responses: TResponse[];
+  surveyBaseUrl: string;
 }
 
-const ResponsePage = ({ environmentId, survey, surveyId, responses }: ResponsePageProps) => {
+const ResponsePage = ({ environmentId, survey, surveyId, responses, surveyBaseUrl }: ResponsePageProps) => {
   const { selectedFilter, dateRange, resetState } = useResponseFilter();
 
   const searchParams = useSearchParams();
@@ -35,7 +36,12 @@ const ResponsePage = ({ environmentId, survey, surveyId, responses }: ResponsePa
   }, [selectedFilter, responses, survey, dateRange]);
   return (
     <ContentWrapper>
-      <SummaryHeader environmentId={environmentId} survey={survey} surveyId={surveyId} />
+      <SummaryHeader
+        environmentId={environmentId}
+        survey={survey}
+        surveyId={surveyId}
+        surveyBaseUrl={surveyBaseUrl}
+      />
       <CustomFilter
         environmentId={environmentId}
         responses={filterResponses}

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

@@ -6,8 +6,10 @@ import { getAnalysisData } from "@/app/(app)/environments/[environmentId]/survey
 import { getServerSession } from "next-auth";
 import ResponsesLimitReachedBanner from "../ResponsesLimitReachedBanner";
 import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
+import { SURVEY_BASE_URL } from "@formbricks/lib/constants";
 
 export default async function Page({ params }) {
+  const surveyBaseUrl = SURVEY_BASE_URL;
   const session = await getServerSession(authOptions);
   if (!session) {
     throw new Error("Unauthorized");
@@ -21,6 +23,7 @@ export default async function Page({ params }) {
         responses={responses}
         survey={survey}
         surveyId={params.surveyId}
+        surveyBaseUrl={surveyBaseUrl}
       />
     </>
   );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/LinkModalButton.tsx

@@ -10,9 +10,14 @@ import clsx from "clsx";
 interface LinkSurveyShareButtonProps {
   survey: TSurvey;
   className?: string;
+  surveyBaseUrl: string;
 }
 
-export default function LinkSurveyShareButton({ survey, className }: LinkSurveyShareButtonProps) {
+export default function LinkSurveyShareButton({
+  survey,
+  className,
+  surveyBaseUrl,
+}: LinkSurveyShareButtonProps) {
   const [showLinkModal, setShowLinkModal] = useState(false);
 
   return (
@@ -26,7 +31,14 @@ export default function LinkSurveyShareButton({ survey, className }: LinkSurveyS
         onClick={() => setShowLinkModal(true)}>
         <ShareIcon className="h-5 w-5" />
       </Button>
-      {showLinkModal && <LinkSurveyModal survey={survey} open={showLinkModal} setOpen={setShowLinkModal} />}
+      {showLinkModal && (
+        <LinkSurveyModal
+          survey={survey}
+          open={showLinkModal}
+          setOpen={setShowLinkModal}
+          surveyBaseUrl={surveyBaseUrl}
+        />
+      )}
     </>
   );
 }

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/LinkSurveyModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import CodeBlock from "@/components/shared/CodeBlock";
-import { SURVEY_BASE_URL } from "@formbricks/lib/constants";
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import { Button, Dialog, DialogContent } from "@formbricks/ui";
 import { CheckIcon } from "@heroicons/react/24/outline";
@@ -13,13 +12,14 @@ interface LinkSurveyModalProps {
   survey: TSurvey;
   open: boolean;
   setOpen: (open: boolean) => void;
+  surveyBaseUrl: string;
 }
 
-export default function LinkSurveyModal({ survey, open, setOpen }: LinkSurveyModalProps) {
+export default function LinkSurveyModal({ survey, open, setOpen, surveyBaseUrl }: LinkSurveyModalProps) {
   const linkTextRef = useRef(null);
   const [showEmbed, setShowEmbed] = useState(false);
 
-  const surveyUrl = useMemo(() => SURVEY_BASE_URL + survey.id, [survey]);
+  const surveyUrl = useMemo(() => surveyBaseUrl + survey.id, [survey]);
 
   const iframeCode = `<div style="position: relative; height:100vh; max-height:100vh; 
 overflow:auto;"> 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/SuccessMessage.tsx

@@ -11,9 +11,10 @@ import LinkSurveyModal from "./LinkSurveyModal";
 interface SummaryMetadataProps {
   environmentId: string;
   survey: TSurvey;
+  surveyBaseUrl: string;
 }
 
-export default function SuccessMessage({ environmentId, survey }: SummaryMetadataProps) {
+export default function SuccessMessage({ environmentId, survey, surveyBaseUrl }: SummaryMetadataProps) {
   const { environment } = useEnvironment(environmentId);
   const searchParams = useSearchParams();
   const [showLinkModal, setShowLinkModal] = useState(false);
@@ -46,7 +47,14 @@ export default function SuccessMessage({ environmentId, survey }: SummaryMetadat
 
   return (
     <>
-      {showLinkModal && <LinkSurveyModal survey={survey} open={showLinkModal} setOpen={setShowLinkModal} />}
+      {showLinkModal && (
+        <LinkSurveyModal
+          survey={survey}
+          open={showLinkModal}
+          setOpen={setShowLinkModal}
+          surveyBaseUrl={surveyBaseUrl}
+        />
+      )}
       {confetti && <Confetti />}
     </>
   );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/SummaryPage.tsx

@@ -18,9 +18,10 @@ interface SummaryPageProps {
   survey: TSurveyWithAnalytics;
   surveyId: string;
   responses: TResponse[];
+  surveyBaseUrl: string;
 }
 
-const SummaryPage = ({ environmentId, survey, surveyId, responses }: SummaryPageProps) => {
+const SummaryPage = ({ environmentId, survey, surveyId, responses, surveyBaseUrl }: SummaryPageProps) => {
   const { selectedFilter, dateRange, resetState } = useResponseFilter();
   const searchParams = useSearchParams();
 
@@ -36,7 +37,12 @@ const SummaryPage = ({ environmentId, survey, surveyId, responses }: SummaryPage
 
   return (
     <ContentWrapper>
-      <SummaryHeader environmentId={environmentId} survey={survey} surveyId={surveyId} />
+      <SummaryHeader
+        environmentId={environmentId}
+        survey={survey}
+        surveyId={surveyId}
+        surveyBaseUrl={surveyBaseUrl}
+      />
       <CustomFilter
         environmentId={environmentId}
         responses={filterResponses}

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

@@ -5,7 +5,7 @@ import { getAnalysisData } from "@/app/(app)/environments/[environmentId]/survey
 import { getServerSession } from "next-auth";
 import ResponsesLimitReachedBanner from "../ResponsesLimitReachedBanner";
 import SummaryPage from "./SummaryPage";
-import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
+import { REVALIDATION_INTERVAL, SURVEY_BASE_URL } from "@formbricks/lib/constants";
 
 export default async function Page({ params }) {
   const session = await getServerSession(authOptions);
@@ -22,6 +22,7 @@ export default async function Page({ params }) {
         responses={responses}
         survey={survey}
         surveyId={params.surveyId}
+        surveyBaseUrl={SURVEY_BASE_URL}
       />
     </>
   );

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

@@ -31,8 +31,9 @@ interface SummaryHeaderProps {
   surveyId: string;
   environmentId: string;
   survey: TSurvey;
+  surveyBaseUrl: string;
 }
-const SummaryHeader = ({ surveyId, environmentId, survey }: SummaryHeaderProps) => {
+const SummaryHeader = ({ surveyId, environmentId, survey, surveyBaseUrl }: SummaryHeaderProps) => {
   const router = useRouter();
   const { product, isLoadingProduct, isErrorProduct } = useProduct(environmentId);
   const { environment, isLoadingEnvironment, isErrorEnvironment } = useEnvironment(environmentId);
@@ -56,7 +57,7 @@ const SummaryHeader = ({ surveyId, environmentId, survey }: SummaryHeaderProps)
         <span className="text-base font-extralight text-slate-600">{product.name}</span>
       </div>
       <div className="hidden justify-end gap-x-1.5 sm:flex">
-        {survey.type === "link" && <LinkSurveyShareButton survey={survey} />}
+        {survey.type === "link" && <LinkSurveyShareButton survey={survey} surveyBaseUrl={surveyBaseUrl} />}
         {(environment?.widgetSetupCompleted || survey.type === "link") && survey?.status !== "draft" ? (
           <SurveyStatusDropdown environmentId={environmentId} surveyId={surveyId} />
         ) : null}
@@ -78,7 +79,11 @@ const SummaryHeader = ({ surveyId, environmentId, survey }: SummaryHeaderProps)
           <DropdownMenuContent align="end" className="p-2">
             {survey.type === "link" && (
               <>
-                <LinkSurveyShareButton className="flex w-full justify-center p-1" survey={survey} />
+                <LinkSurveyShareButton
+                  className="flex w-full justify-center p-1"
+                  survey={survey}
+                  surveyBaseUrl={surveyBaseUrl}
+                />
                 <DropdownMenuSeparator />
               </>
             )}
@@ -155,7 +160,7 @@ const SummaryHeader = ({ surveyId, environmentId, survey }: SummaryHeaderProps)
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <SuccessMessage environmentId={environmentId} survey={survey} />
+      <SuccessMessage environmentId={environmentId} survey={survey} surveyBaseUrl={surveyBaseUrl} />
     </div>
   );
 };

apps/web/env.mjs

@@ -7,6 +7,7 @@ export const env = createEnv({
    * Will throw if you access these variables on the client.
    */
   server: {
+    WEBAPP_URL: z.string().url(),
     DATABASE_URL: z.string().url(),
     PRISMA_GENERATE_DATAPROXY: z.enum(["true", ""]).optional(),
     NEXTAUTH_SECRET: z.string().min(1),
@@ -73,6 +74,7 @@ export const env = createEnv({
    * 💡 You'll get type errors if not all variables from `server` & `client` are included here.
    */
   runtimeEnv: {
+    WEBAPP_URL: process.env.WEBAPP_URL,
     DATABASE_URL: process.env.DATABASE_URL,
     PRISMA_GENERATE_DATAPROXY: process.env.PRISMA_GENERATE_DATAPROXY,
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,