From a9bf8fcdaae7262a9c73342cb5a04f23837f8914 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com>
Date: Wed, 24 Apr 2024 18:58:38 +0530
Subject: [PATCH] fix: adds loader in the thankyou card while response
 submission (#2520)

Co-authored-by: Johannes <johannes@formbricks.com>
---
 .../edit/components/EditThankYouCard.tsx      |   1 +
 apps/web/playwright/survey.spec.ts            |   2 +
 apps/web/playwright/utils/helper.ts           |   2 +-
 .../src/components/general/ThankYouCard.tsx   | 100 ++++++++++--------
 4 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx
index 555ae68dae..db20d72ef8 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx
@@ -109,6 +109,7 @@ export default function EditThankYouCard({
           <form>
             <QuestionFormInput
               id="headline"
+              label="Headline"
               value={localSurvey?.thankYouCard?.headline}
               localSurvey={localSurvey}
               questionIdx={localSurvey.questions.length}
diff --git a/apps/web/playwright/survey.spec.ts b/apps/web/playwright/survey.spec.ts
index 099e69c059..862bcf054c 100644
--- a/apps/web/playwright/survey.spec.ts
+++ b/apps/web/playwright/survey.spec.ts
@@ -187,6 +187,8 @@ test.describe("Survey Create & Submit Response", async () => {
     await page.getByPlaceholder(surveys.createAndSubmit.address.placeholder).fill("This is my Address");
     await page.getByRole("button", { name: "Finish" }).click();
 
+    await page.waitForTimeout(500);
+
     // Thank You Card
     await expect(page.getByText(surveys.createAndSubmit.thankYouCard.headline)).toBeVisible();
     await expect(page.getByText(surveys.createAndSubmit.thankYouCard.description)).toBeVisible();
diff --git a/apps/web/playwright/utils/helper.ts b/apps/web/playwright/utils/helper.ts
index fb3803a181..8f1277b7c5 100644
--- a/apps/web/playwright/utils/helper.ts
+++ b/apps/web/playwright/utils/helper.ts
@@ -275,6 +275,6 @@ export const createSurvey = async (
 
   // Thank You Card
   await page.getByText("Thank You CardShown").click();
-  await page.getByLabel("Question").fill(params.thankYouCard.headline);
+  await page.getByLabel("Headline").fill(params.thankYouCard.headline);
   await page.getByLabel("Description").fill(params.thankYouCard.description);
 };
diff --git a/packages/surveys/src/components/general/ThankYouCard.tsx b/packages/surveys/src/components/general/ThankYouCard.tsx
index 7ce43d9f56..3c24009323 100644
--- a/packages/surveys/src/components/general/ThankYouCard.tsx
+++ b/packages/surveys/src/components/general/ThankYouCard.tsx
@@ -1,5 +1,6 @@
 import Button from "@/components/buttons/SubmitButton";
 import Headline from "@/components/general/Headline";
+import { LoadingSpinner } from "@/components/general/LoadingSpinner";
 import { QuestionMedia } from "@/components/general/QuestionMedia";
 import RedirectCountDown from "@/components/general/RedirectCountdown";
 import Subheader from "@/components/general/Subheader";
@@ -36,57 +37,64 @@ export const ThankYouCard = ({
   isResponseSendingFinished,
   isInIframe,
 }: ThankYouCardProps) => {
+  const media = imageUrl || videoUrl ? <QuestionMedia imgUrl={imageUrl} videoUrl={videoUrl} /> : null;
+  const checkmark = (
+    <div className="text-brand flex flex-col items-center justify-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="h-24 w-24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+      <span className="bg-brand mb-[10px] inline-block h-1 w-16 rounded-[100%]"></span>
+    </div>
+  );
+
   return (
     <div className="text-center">
-      {imageUrl || videoUrl ? (
-        <QuestionMedia imgUrl={imageUrl} videoUrl={videoUrl} />
-      ) : (
-        <div>
-          <div className="text-brand flex items-center justify-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="h-24 w-24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      {isResponseSendingFinished ? (
+        <>
+          {media || checkmark}
+          <Headline
+            alignTextCenter={true}
+            headline={replaceRecallInfo(getLocalizedValue(headline, languageCode))}
+            questionId="thankYouCard"
+          />
+          <Subheader
+            subheader={replaceRecallInfo(getLocalizedValue(subheader, languageCode))}
+            questionId="thankYouCard"
+          />
+          <RedirectCountDown redirectUrl={redirectUrl} isRedirectDisabled={isRedirectDisabled} />
+          {buttonLabel && (
+            <div className="mt-6 flex w-full flex-col items-center justify-center space-y-4">
+              <Button
+                buttonLabel={getLocalizedValue(buttonLabel, languageCode)}
+                isLastQuestion={false}
+                focus={!isInIframe}
+                onClick={() => {
+                  if (!buttonLink) return;
+                  window.location.replace(buttonLink);
+                }}
               />
-            </svg>
+              <p className="text-subheading text-xs">Press Enter ↵</p>
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <div className="my-3">
+            <LoadingSpinner />
           </div>
-          <span className="bg-brand mb-[10px] inline-block h-1 w-16 rounded-[100%]"></span>
-        </div>
+          <h1 className="text-brand">Sending responses...</h1>
+        </>
       )}
-
-      <div>
-        <Headline
-          alignTextCenter={true}
-          headline={replaceRecallInfo(getLocalizedValue(headline, languageCode))}
-          questionId="thankYouCard"
-        />
-        <Subheader
-          subheader={replaceRecallInfo(getLocalizedValue(subheader, languageCode))}
-          questionId="thankYouCard"
-        />
-        <RedirectCountDown redirectUrl={redirectUrl} isRedirectDisabled={isRedirectDisabled} />
-        {buttonLabel && isResponseSendingFinished && (
-          <div className="mt-6 flex w-full flex-col items-center justify-center space-y-4">
-            <Button
-              buttonLabel={getLocalizedValue(buttonLabel, languageCode)}
-              isLastQuestion={false}
-              focus={!isInIframe}
-              onClick={() => {
-                if (!buttonLink) return;
-                window.location.replace(buttonLink);
-              }}
-            />
-            <p class="text-subheading text-xs">Press Enter ↵</p>
-          </div>
-        )}
-      </div>
     </div>
   );
 };