fix: Recall in verify email question preview and integrations (#2145)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
 import { Control, Controller, UseFormSetValue, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
+import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationAirtable,
@@ -333,7 +334,7 @@ export default function AddIntegrationModal(props: AddIntegrationModalProps) {
                 <Label htmlFor="Surveys">Questions</Label>
                 <div className="mt-1 rounded-lg border border-slate-200">
                   <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-                    {selectedSurvey?.questions.map((question) => (
+                    {checkForRecallInHeadline(selectedSurvey)?.questions.map((question) => (
                       <Controller
                         key={question.id}
                         control={control}

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/AddIntegrationModal.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 
+import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationGoogleSheets,
@@ -273,7 +274,7 @@ export default function AddIntegrationModal({
                   <Label htmlFor="Surveys">Questions</Label>
                   <div className="mt-1 rounded-lg border border-slate-200">
                     <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-                      {selectedSurvey?.questions.map((question) => (
+                      {checkForRecallInHeadline(selectedSurvey)?.questions.map((question) => (
                         <div key={question.id} className="my-1 flex items-center space-x-2">
                           <label htmlFor={question.id} className="flex cursor-pointer items-center">
                             <Checkbox

apps/web/app/(app)/environments/[environmentId]/integrations/notion/components/AddIntegrationModal.tsx

@@ -13,6 +13,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 
+import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TIntegrationInput } from "@formbricks/types/integration";
 import {
   TIntegrationNotion,
@@ -105,12 +106,13 @@ export default function AddIntegrationModal({
   }, [selectedDatabase?.id]);
 
   const questionItems = useMemo(() => {
-    const questions =
-      selectedSurvey?.questions.map((q) => ({
-        id: q.id,
-        name: q.headline,
-        type: q.type,
-      })) || [];
+    const questions = selectedSurvey
+      ? checkForRecallInHeadline(selectedSurvey)?.questions.map((q) => ({
+          id: q.id,
+          name: q.headline,
+          type: q.type,
+        }))
+      : [];
 
     const hiddenFields = selectedSurvey?.hiddenFields.enabled
       ? selectedSurvey?.hiddenFields.fieldIds?.map((fId) => ({

apps/web/app/(app)/onboarding/components/inapp/ConnectWithFormbricks.tsx

@@ -129,7 +129,7 @@ export function ConnectWithFormbricks({
       setLocalEnvironment(refetchedEnvironment);
     };
     fetchLatestEnvironmentOnFirstLoad();
-  }, []);
+  }, [environment.id]);
 
   return localEnvironment.widgetSetupCompleted ? (
     <ConnectedState

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

@@ -2,9 +2,11 @@
 
 import { sendLinkSurveyEmailAction } from "@/app/s/[surveyId]/actions";
 import { EnvelopeIcon } from "@heroicons/react/24/solid";
-import { useState } from "react";
+import { ArrowLeft } from "lucide-react";
+import { useMemo, useState } from "react";
 import { Toaster, toast } from "react-hot-toast";
 
+import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TSurvey } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
@@ -19,6 +21,10 @@ export default function VerifyEmail({
   isErrorComponent?: boolean;
   singleUseId?: string;
 }) {
+  survey = useMemo(() => {
+    return checkForRecallInHeadline(survey);
+  }, [survey]);
+
   const [showPreviewQuestions, setShowPreviewQuestions] = useState(false);
   const [email, setEmail] = useState<string | null>(null);
   const [emailSent, setEmailSent] = useState<boolean>(false);
@@ -106,7 +112,6 @@ export default function VerifyEmail({
         )}
         {!emailSent && showPreviewQuestions && (
           <div>
-            {" "}
             <p className="text-4xl font-bold">Question Preview</p>
             <div className="mt-4 flex w-full flex-col justify-center rounded-lg border border-slate-200 bg-slate-50 bg-opacity-20 p-8 text-slate-700">
               {survey.questions.map((question, index) => (
@@ -126,11 +131,8 @@ export default function VerifyEmail({
               We sent an email to <span className="font-semibold italic">{email}</span>. Please click the link
               in the email to take your survey.
             </p>
-            <Button
-              variant="secondary"
-              className="mt-6 cursor-pointer text-sm text-slate-400"
-              onClick={handleGoBackClick}>
-              Go Back
+            <Button variant="secondary" className="mt-6" onClick={handleGoBackClick} StartIcon={ArrowLeft}>
+              Back
             </Button>
           </div>
         )}