mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-03-10 11:24:37 -05:00
Code Issues Packages Projects Releases 137 Wiki Activity

fix: adds loader in the thankyou card while response submission (#2520)

Browse Source 
Co-authored-by: Johannes <johannes@formbricks.com>
This commit is contained in:
Piyush Gupta
2024-04-24 18:58:38 +05:30
committed by GitHub
parent 87f2f8d870
commit a9bf8fcdaa
4 changed files with 58 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx
View File

@@ -109,6 +109,7 @@ export default function EditThankYouCard({
<form>
<QuestionFormInput
id="headline"
label="Headline"
value={localSurvey?.thankYouCard?.headline}
localSurvey={localSurvey}
questionIdx={localSurvey.questions.length}

2
apps/web/playwright/survey.spec.ts
View File

@@ -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();

2
apps/web/playwright/utils/helper.ts
View File

@@ -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);
};

100
packages/surveys/src/components/general/ThankYouCard.tsx
View File

@@ -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>
);
};