fix: background image issue (#1829)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/web/app/s/[surveyId]/components/LegalFooter.tsx

@@ -1,12 +1,12 @@
 import Link from "next/link";
 
-import { IMPRINT_URL, PRIVACY_URL } from "@formbricks/lib/constants";
-
 interface LegalFooterProps {
   bgColor?: string | null;
+  IMPRINT_URL?: string;
+  PRIVACY_URL?: string;
 }
 
-export default function LegalFooter({ bgColor }: LegalFooterProps) {
+export default function LegalFooter({ bgColor, IMPRINT_URL, PRIVACY_URL }: LegalFooterProps) {
   if (!IMPRINT_URL && !PRIVACY_URL) return null;
 
   return (

apps/web/app/s/[surveyId]/components/PinScreen.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { validateSurveyPinAction } from "@/app/s/[surveyId]/actions";
+import LegalFooter from "@/app/s/[surveyId]/components/LegalFooter";
 import LinkSurvey from "@/app/s/[surveyId]/components/LinkSurvey";
+import { MediaBackground } from "@/app/s/[surveyId]/components/MediaBackground";
 import { TSurveyPinValidationResponseError } from "@/app/s/[surveyId]/types";
 import type { NextPage } from "next";
 import { useCallback, useEffect, useState } from "react";
@@ -21,6 +23,8 @@ interface LinkSurveyPinScreenProps {
   singleUseId?: string;
   singleUseResponse?: TResponse;
   webAppUrl: string;
+  IMPRINT_URL?: string;
+  PRIVACY_URL?: string;
 }
 
 const LinkSurveyPinScreen: NextPage<LinkSurveyPinScreenProps> = (props) => {
@@ -33,6 +37,8 @@ const LinkSurveyPinScreen: NextPage<LinkSurveyPinScreenProps> = (props) => {
     prefillAnswer,
     singleUseId,
     singleUseResponse,
+    IMPRINT_URL,
+    PRIVACY_URL,
   } = props;
 
   const [localPinEntry, setLocalPinEntry] = useState<string>("");
@@ -101,16 +107,25 @@ const LinkSurveyPinScreen: NextPage<LinkSurveyPinScreenProps> = (props) => {
   }
 
   return (
-    <LinkSurvey
-      survey={survey}
-      product={product}
-      userId={userId}
-      emailVerificationStatus={emailVerificationStatus}
-      prefillAnswer={prefillAnswer}
-      singleUseId={singleUseId}
-      singleUseResponse={singleUseResponse}
-      webAppUrl={webAppUrl}
-    />
+    <div>
+      <MediaBackground survey={survey}>
+        <LinkSurvey
+          survey={survey}
+          product={product}
+          userId={userId}
+          emailVerificationStatus={emailVerificationStatus}
+          prefillAnswer={prefillAnswer}
+          singleUseId={singleUseId}
+          singleUseResponse={singleUseResponse}
+          webAppUrl={webAppUrl}
+        />
+      </MediaBackground>
+      <LegalFooter
+        bgColor={survey.styling?.background?.bg || "#ffff"}
+        IMPRINT_URL={IMPRINT_URL}
+        PRIVACY_URL={PRIVACY_URL}
+      />
+    </div>
   );
 };
 

apps/web/app/s/[surveyId]/page.tsx

@@ -8,6 +8,7 @@ import { checkValidity } from "@/app/s/[surveyId]/lib/prefilling";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
+import { IMPRINT_URL, PRIVACY_URL } from "@formbricks/lib/constants";
 import { WEBAPP_URL } from "@formbricks/lib/constants";
 import { createPerson, getPersonByUserId } from "@formbricks/lib/person/service";
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
@@ -181,6 +182,8 @@ export default async function LinkSurveyPage({ params, searchParams }: LinkSurve
         singleUseId={isSingleUseSurvey ? singleUseId : undefined}
         singleUseResponse={singleUseResponse ? singleUseResponse : undefined}
         webAppUrl={WEBAPP_URL}
+        IMPRINT_URL={IMPRINT_URL}
+        PRIVACY_URL={PRIVACY_URL}
       />
     );
   }
@@ -200,7 +203,11 @@ export default async function LinkSurveyPage({ params, searchParams }: LinkSurve
           responseCount={survey.welcomeCard.showResponseCount ? responseCount : undefined}
         />
       </MediaBackground>
-      <LegalFooter bgColor={survey.styling?.background?.bg || "#ffff"} />
+      <LegalFooter
+        bgColor={survey.styling?.background?.bg || "#ffff"}
+        IMPRINT_URL={IMPRINT_URL}
+        PRIVACY_URL={PRIVACY_URL}
+      />
     </div>
   ) : null;
 }