fix: single use survey not working with email verification (#1935)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

.devcontainer/devcontainer.json

@@ -12,8 +12,8 @@
     // Configure properties specific to VS Code.
     "vscode": {
       // Add the IDs of extensions you want installed when the container is created.
-      "extensions": ["dbaeumer.vscode-eslint"],
-    },
+      "extensions": ["dbaeumer.vscode-eslint"]
+    }
   },
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
@@ -25,5 +25,5 @@
   "postAttachCommand": "pnpm dev --filter=web... --filter=demo...",
 
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "node",
+  "remoteUser": "node"
 }

apps/formbricks-com/pages/api/oss-friends/index.ts

@@ -12,7 +12,8 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
         },
         {
           name: "Aptabase",
-          description: "Analytics for Apps, open source, simple and privacy-friendly. SDKs for Swift, React Native, Electron, Flutter and many others.",
+          description:
+            "Analytics for Apps, open source, simple and privacy-friendly. SDKs for Swift, React Native, Electron, Flutter and many others.",
           href: "https://aptabase.com",
         },
         {

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

@@ -48,6 +48,7 @@ export default function LinkSurvey({
   const searchParams = useSearchParams();
   const isPreview = searchParams?.get("preview") === "true";
   const sourceParam = searchParams?.get("source");
+  const suId = searchParams?.get("suId");
 
   // pass in the responseId if the survey is a single use survey, ensures survey state is updated with the responseId
   const [surveyState, setSurveyState] = useState(new SurveyState(survey.id, singleUseId, responseId, userId));
@@ -129,7 +130,7 @@ export default function LinkSurvey({
       return <VerifyEmail survey={survey} isErrorComponent={true} />;
     }
     //emailVerificationStatus === "not-verified"
-    return <VerifyEmail survey={survey} />;
+    return <VerifyEmail singleUseId={suId ?? ""} survey={survey} />;
   }
 
   return (

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

@@ -22,9 +22,11 @@ const StackedCardsContainer = ({ children }) => (
 export default function VerifyEmail({
   survey,
   isErrorComponent,
+  singleUseId,
 }: {
   survey: TSurvey;
   isErrorComponent?: boolean;
+  singleUseId?: string;
 }) {
   const [showPreviewQuestions, setShowPreviewQuestions] = useState(false);
   const [email, setEmail] = useState<string | null>(null);
@@ -44,6 +46,7 @@ export default function VerifyEmail({
       surveyId: survey.id,
       email: email,
       surveyData: survey.verifyEmail,
+      suId: singleUseId ?? "",
     };
     try {
       await sendLinkSurveyEmailAction(data);

packages/lib/emails/emails.ts

@@ -40,6 +40,7 @@ interface TEmailUserWithName extends TEmailUser {
 export interface LinkSurveyEmailData {
   surveyId: string;
   email: string;
+  suId: string;
   surveyData?: {
     name?: string;
     subheading?: string;
@@ -249,16 +250,22 @@ export const sendLinkSurveyToVerifiedEmail = async (data: LinkSurveyEmailData) =
   const surveyId = data.surveyId;
   const email = data.email;
   const surveyData = data.surveyData;
+  const singleUseId = data.suId ?? null;
   const token = createTokenForLinkSurvey(surveyId, email);
-  const surveyLink = `${WEBAPP_URL}/s/${surveyId}?verify=${encodeURIComponent(token)}`;
+  const getSurveyLink = () => {
+    if (singleUseId) {
+      return `${WEBAPP_URL}/s/${surveyId}?verify=${encodeURIComponent(token)}&suId=${singleUseId}`;
+    }
+    return `${WEBAPP_URL}/s/${surveyId}?verify=${encodeURIComponent(token)}`;
+  };
   await sendEmail({
     to: data.email,
     subject: "Your Formbricks Survey",
     html: withEmailTemplate(`<h1>Hey 👋</h1>
     Thanks for validating your email. Here is your Survey.<br/><br/>
     <strong>${surveyData?.name}</strong>
     <p>${surveyData?.subheading}</p>
-    <a class="button" href="${surveyLink}">Take survey</a><br/>
+    <a class="button" href="${getSurveyLink()}">Take survey</a><br/>
     <br/>
     All the best,<br/>
     Your Formbricks Team 🤍`),

packages/lib/response/service.ts

@@ -256,6 +256,7 @@ export const createResponse = async (responseInput: TResponseInput): Promise<TRe
       id: response.id,
       personId: response.person?.id,
       surveyId: response.surveyId,
+      singleUseId: singleUseId ? singleUseId : undefined,
     });
 
     responseNoteCache.revalidate({

packages/lib/tsconfig.json

@@ -3,6 +3,6 @@
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
-    "downlevelIteration": true,
-  },
+    "downlevelIteration": true
+  }
 }

packages/ui/tsconfig.json

@@ -3,6 +3,6 @@
   "include": ["."],
   "exclude": ["build", "node_modules"],
   "compilerOptions": {
-    "lib": ["ES2021.String"],
-  },
+    "lib": ["ES2021.String"]
+  }
 }