mirror of
https://github.com/formbricks/formbricks.git
synced 2026-02-22 10:08:42 -06:00
perf: Optimize link survey with server/client component architecture (#6764)
Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>
This commit is contained in:
Matti Nannt
@@ -45,11 +45,11 @@ export const selectSurvey = {
|
||||
language: {
|
||||
select: {
|
||||
id: true,
|
||||
code: true,
|
||||
alias: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
code: true,
|
||||
projectId: true,
|
||||
alias: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -72,7 +72,15 @@ export const selectSurvey = {
|
||||
},
|
||||
},
|
||||
segment: {
|
||||
include: {
|
||||
select: {
|
||||
id: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
environmentId: true,
|
||||
title: true,
|
||||
description: true,
|
||||
isPrivate: true,
|
||||
filters: true,
|
||||
surveys: {
|
||||
select: {
|
||||
id: true,
|
||||
|
||||
@@ -3,17 +3,17 @@
|
||||
import { Project, Response } from "@prisma/client";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { TSurvey } from "@formbricks/types/surveys/types";
|
||||
import { TProjectStyling } from "@formbricks/types/project";
|
||||
import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
|
||||
import { cn } from "@/lib/cn";
|
||||
import { getFormattedErrorMessage } from "@/lib/utils/helper";
|
||||
import { validateSurveyPinAction } from "@/modules/survey/link/actions";
|
||||
import { LinkSurvey } from "@/modules/survey/link/components/link-survey";
|
||||
import { SurveyClientWrapper } from "@/modules/survey/link/components/survey-client-wrapper";
|
||||
import { OTPInput } from "@/modules/ui/components/otp-input";
|
||||
|
||||
interface PinScreenProps {
|
||||
surveyId: string;
|
||||
project: Pick<Project, "styling" | "logo" | "linkSurveyBranding">;
|
||||
emailVerificationStatus?: string;
|
||||
singleUseId?: string;
|
||||
singleUseResponse?: Pick<Response, "id" | "finished">;
|
||||
publicDomain: string;
|
||||
@@ -23,11 +23,12 @@ interface PinScreenProps {
|
||||
verifiedEmail?: string;
|
||||
languageCode: string;
|
||||
isEmbed: boolean;
|
||||
locale: string;
|
||||
isPreview: boolean;
|
||||
contactId?: string;
|
||||
recaptchaSiteKey?: string;
|
||||
isSpamProtectionEnabled?: boolean;
|
||||
responseCount?: number;
|
||||
styling: TProjectStyling | TSurveyStyling;
|
||||
}
|
||||
|
||||
export const PinScreen = (props: PinScreenProps) => {
|
||||
@@ -35,7 +36,6 @@ export const PinScreen = (props: PinScreenProps) => {
|
||||
surveyId,
|
||||
project,
|
||||
publicDomain,
|
||||
emailVerificationStatus,
|
||||
singleUseId,
|
||||
singleUseResponse,
|
||||
IMPRINT_URL,
|
||||
@@ -44,11 +44,12 @@ export const PinScreen = (props: PinScreenProps) => {
|
||||
verifiedEmail,
|
||||
languageCode,
|
||||
isEmbed,
|
||||
locale,
|
||||
isPreview,
|
||||
contactId,
|
||||
recaptchaSiteKey,
|
||||
isSpamProtectionEnabled = false,
|
||||
responseCount,
|
||||
styling,
|
||||
} = props;
|
||||
|
||||
const [localPinEntry, setLocalPinEntry] = useState<string>("");
|
||||
@@ -116,24 +117,24 @@ export const PinScreen = (props: PinScreenProps) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<LinkSurvey
|
||||
<SurveyClientWrapper
|
||||
survey={survey}
|
||||
project={project}
|
||||
emailVerificationStatus={emailVerificationStatus}
|
||||
singleUseId={singleUseId}
|
||||
singleUseResponse={singleUseResponse}
|
||||
styling={styling}
|
||||
publicDomain={publicDomain}
|
||||
verifiedEmail={verifiedEmail}
|
||||
responseCount={responseCount}
|
||||
languageCode={languageCode}
|
||||
isEmbed={isEmbed}
|
||||
IMPRINT_URL={IMPRINT_URL}
|
||||
PRIVACY_URL={PRIVACY_URL}
|
||||
IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
|
||||
locale={locale}
|
||||
isPreview={isPreview}
|
||||
singleUseId={singleUseId}
|
||||
singleUseResponseId={singleUseResponse?.id}
|
||||
contactId={contactId}
|
||||
recaptchaSiteKey={recaptchaSiteKey}
|
||||
isSpamProtectionEnabled={isSpamProtectionEnabled}
|
||||
isPreview={isPreview}
|
||||
verifiedEmail={verifiedEmail}
|
||||
IMPRINT_URL={IMPRINT_URL}
|
||||
PRIVACY_URL={PRIVACY_URL}
|
||||
IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,160 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { Project, Response } from "@prisma/client";
|
||||
import { Project } from "@prisma/client";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { TResponseData, TResponseHiddenFieldValue } from "@formbricks/types/responses";
|
||||
import { TSurvey } from "@formbricks/types/surveys/types";
|
||||
import { TProjectStyling } from "@formbricks/types/project";
|
||||
import { TResponseData } from "@formbricks/types/responses";
|
||||
import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
|
||||
import { LinkSurveyWrapper } from "@/modules/survey/link/components/link-survey-wrapper";
|
||||
import { SurveyLinkUsed } from "@/modules/survey/link/components/survey-link-used";
|
||||
import { VerifyEmail } from "@/modules/survey/link/components/verify-email";
|
||||
import { getPrefillValue } from "@/modules/survey/link/lib/utils";
|
||||
import { SurveyInline } from "@/modules/ui/components/survey";
|
||||
|
||||
let setQuestionId = (_: string) => {};
|
||||
let setResponseData = (_: TResponseData) => {};
|
||||
|
||||
interface LinkSurveyProps {
|
||||
interface SurveyClientWrapperProps {
|
||||
survey: TSurvey;
|
||||
project: Pick<Project, "styling" | "logo" | "linkSurveyBranding">;
|
||||
emailVerificationStatus?: string;
|
||||
singleUseId?: string;
|
||||
singleUseResponse?: Pick<Response, "id" | "finished">;
|
||||
styling: TProjectStyling | TSurveyStyling;
|
||||
publicDomain: string;
|
||||
responseCount?: number;
|
||||
verifiedEmail?: string;
|
||||
languageCode: string;
|
||||
isEmbed: boolean;
|
||||
singleUseId?: string;
|
||||
singleUseResponseId?: string;
|
||||
contactId?: string;
|
||||
recaptchaSiteKey?: string;
|
||||
isSpamProtectionEnabled: boolean;
|
||||
isPreview: boolean;
|
||||
verifiedEmail?: string;
|
||||
IMPRINT_URL?: string;
|
||||
PRIVACY_URL?: string;
|
||||
IS_FORMBRICKS_CLOUD: boolean;
|
||||
locale: string;
|
||||
isPreview: boolean;
|
||||
contactId?: string;
|
||||
recaptchaSiteKey?: string;
|
||||
isSpamProtectionEnabled?: boolean;
|
||||
}
|
||||
|
||||
export const LinkSurvey = ({
|
||||
// Module-level functions to allow SurveyInline to control survey state
|
||||
let setQuestionId = (_: string) => {};
|
||||
let setResponseData = (_: TResponseData) => {};
|
||||
|
||||
export const SurveyClientWrapper = ({
|
||||
survey,
|
||||
project,
|
||||
emailVerificationStatus,
|
||||
singleUseId,
|
||||
singleUseResponse,
|
||||
styling,
|
||||
publicDomain,
|
||||
responseCount,
|
||||
verifiedEmail,
|
||||
languageCode,
|
||||
isEmbed,
|
||||
singleUseId,
|
||||
singleUseResponseId,
|
||||
contactId,
|
||||
recaptchaSiteKey,
|
||||
isSpamProtectionEnabled,
|
||||
isPreview,
|
||||
verifiedEmail,
|
||||
IMPRINT_URL,
|
||||
PRIVACY_URL,
|
||||
IS_FORMBRICKS_CLOUD,
|
||||
locale,
|
||||
isPreview,
|
||||
contactId,
|
||||
recaptchaSiteKey,
|
||||
isSpamProtectionEnabled = false,
|
||||
}: LinkSurveyProps) => {
|
||||
const responseId = singleUseResponse?.id;
|
||||
}: SurveyClientWrapperProps) => {
|
||||
const searchParams = useSearchParams();
|
||||
const skipPrefilled = searchParams.get("skipPrefilled") === "true";
|
||||
const suId = searchParams.get("suId");
|
||||
|
||||
const startAt = searchParams.get("startAt");
|
||||
|
||||
// Extract survey properties outside useMemo to create stable references
|
||||
const welcomeCardEnabled = survey.welcomeCard.enabled;
|
||||
const surveyQuestions = survey.questions;
|
||||
|
||||
// Validate startAt parameter against survey questions
|
||||
const isStartAtValid = useMemo(() => {
|
||||
if (!startAt) return false;
|
||||
if (survey.welcomeCard.enabled && startAt === "start") return true;
|
||||
if (welcomeCardEnabled && startAt === "start") return true;
|
||||
const isValid = surveyQuestions.some((q) => q.id === startAt);
|
||||
|
||||
const isValid = survey.questions.some((question) => question.id === startAt);
|
||||
|
||||
// To remove startAt query param from URL if it is not valid:
|
||||
if (!isValid && typeof window !== "undefined") {
|
||||
const url = new URL(window.location.href);
|
||||
// Clean up invalid startAt from URL to prevent confusion
|
||||
if (!isValid && globalThis.window !== undefined) {
|
||||
const url = new URL(globalThis.location.href);
|
||||
url.searchParams.delete("startAt");
|
||||
window.history.replaceState({}, "", url.toString());
|
||||
globalThis.history.replaceState({}, "", url.toString());
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}, [survey, startAt]);
|
||||
}, [welcomeCardEnabled, surveyQuestions, startAt]);
|
||||
|
||||
const prefillValue = getPrefillValue(survey, searchParams, languageCode);
|
||||
|
||||
const [autoFocus, setAutoFocus] = useState(false);
|
||||
const hasFinishedSingleUseResponse = useMemo(() => {
|
||||
if (singleUseResponse?.finished) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- only run once
|
||||
}, []);
|
||||
|
||||
// Not in an iframe, enable autofocus on input fields.
|
||||
// Enable autofocus only when not in iframe
|
||||
useEffect(() => {
|
||||
if (window.self === window.top) {
|
||||
if (globalThis.self === globalThis.top) {
|
||||
setAutoFocus(true);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- only run once
|
||||
}, []);
|
||||
|
||||
const hiddenFieldsRecord = useMemo<TResponseHiddenFieldValue>(() => {
|
||||
const fieldsRecord: TResponseHiddenFieldValue = {};
|
||||
|
||||
survey.hiddenFields.fieldIds?.forEach((field) => {
|
||||
// Extract hidden fields from URL parameters
|
||||
const hiddenFieldsRecord = useMemo(() => {
|
||||
const fieldsRecord: Record<string, string> = {};
|
||||
for (const field of survey.hiddenFields.fieldIds || []) {
|
||||
const answer = searchParams.get(field);
|
||||
if (answer) {
|
||||
fieldsRecord[field] = answer;
|
||||
}
|
||||
});
|
||||
|
||||
if (answer) fieldsRecord[field] = answer;
|
||||
}
|
||||
return fieldsRecord;
|
||||
}, [searchParams, survey.hiddenFields.fieldIds]);
|
||||
}, [searchParams, JSON.stringify(survey.hiddenFields.fieldIds || [])]);
|
||||
|
||||
// Include verified email in hidden fields if available
|
||||
const getVerifiedEmail = useMemo<Record<string, string> | null>(() => {
|
||||
if (survey.isVerifyEmailEnabled && verifiedEmail) {
|
||||
return { verifiedEmail: verifiedEmail };
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}, [survey.isVerifyEmailEnabled, verifiedEmail]);
|
||||
|
||||
if (hasFinishedSingleUseResponse) {
|
||||
return <SurveyLinkUsed singleUseMessage={survey.singleUse} project={project} />;
|
||||
}
|
||||
|
||||
if (survey.isVerifyEmailEnabled && emailVerificationStatus !== "verified" && !isPreview) {
|
||||
if (emailVerificationStatus === "fishy") {
|
||||
return (
|
||||
<VerifyEmail
|
||||
survey={survey}
|
||||
isErrorComponent={true}
|
||||
languageCode={languageCode}
|
||||
styling={project.styling}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
}
|
||||
//emailVerificationStatus === "not-verified"
|
||||
return (
|
||||
<VerifyEmail
|
||||
singleUseId={suId ?? ""}
|
||||
survey={survey}
|
||||
languageCode={languageCode}
|
||||
styling={project.styling}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const determineStyling = () => {
|
||||
// Check if style overwrite is disabled at the project level
|
||||
if (!project.styling.allowStyleOverwrite) {
|
||||
return project.styling;
|
||||
}
|
||||
|
||||
// Return survey styling if survey overwrites are enabled, otherwise return project styling
|
||||
return survey.styling?.overwriteThemeStyling ? survey.styling : project.styling;
|
||||
};
|
||||
|
||||
const handleResetSurvey = () => {
|
||||
setQuestionId(survey.welcomeCard.enabled ? "start" : survey.questions[0].id);
|
||||
setResponseData({});
|
||||
@@ -167,8 +117,8 @@ export const LinkSurvey = ({
|
||||
isWelcomeCardEnabled={survey.welcomeCard.enabled}
|
||||
isPreview={isPreview}
|
||||
surveyType={survey.type}
|
||||
determineStyling={() => styling}
|
||||
handleResetSurvey={handleResetSurvey}
|
||||
determineStyling={determineStyling}
|
||||
isEmbed={isEmbed}
|
||||
publicDomain={publicDomain}
|
||||
IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
|
||||
@@ -180,11 +130,10 @@ export const LinkSurvey = ({
|
||||
environmentId={survey.environmentId}
|
||||
isPreviewMode={isPreview}
|
||||
survey={survey}
|
||||
styling={determineStyling()}
|
||||
styling={styling}
|
||||
languageCode={languageCode}
|
||||
isBrandingEnabled={project.linkSurveyBranding}
|
||||
shouldResetQuestionId={false}
|
||||
// eslint-disable-next-line jsx-a11y/no-autofocus -- need it as focus behaviour is different in normal surveys and survey preview
|
||||
autoFocus={autoFocus}
|
||||
prefillResponseData={prefillValue}
|
||||
skipPrefilled={skipPrefilled}
|
||||
@@ -202,7 +151,7 @@ export const LinkSurvey = ({
|
||||
...getVerifiedEmail,
|
||||
}}
|
||||
singleUseId={singleUseId}
|
||||
singleUseResponseId={responseId}
|
||||
singleUseResponseId={singleUseResponseId}
|
||||
getSetIsResponseSendingFinished={(_f: (value: boolean) => void) => {}}
|
||||
contactId={contactId}
|
||||
recaptchaSiteKey={recaptchaSiteKey}
|
||||
@@ -1,22 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { Project } from "@prisma/client";
|
||||
import { CheckCircle2Icon } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { TSurveySingleUse } from "@formbricks/types/surveys/types";
|
||||
import { getTranslate } from "@/lingodotdev/server";
|
||||
import footerLogo from "../lib/footerlogo.svg";
|
||||
|
||||
interface SurveyLinkUsedProps {
|
||||
interface SurveyCompletedMessageProps {
|
||||
singleUseMessage: TSurveySingleUse | null;
|
||||
project?: Pick<Project, "linkSurveyBranding">;
|
||||
}
|
||||
|
||||
export const SurveyLinkUsed = ({ singleUseMessage, project }: SurveyLinkUsedProps) => {
|
||||
const { t } = useTranslation();
|
||||
export const SurveyCompletedMessage = async ({ singleUseMessage, project }: SurveyCompletedMessageProps) => {
|
||||
const t = await getTranslate();
|
||||
const defaultHeading = t("s.survey_already_answered_heading");
|
||||
const defaultSubheading = t("s.survey_already_answered_subheading");
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-between bg-gradient-to-tr from-slate-200 to-slate-50 py-8 text-center">
|
||||
<div className="my-auto flex flex-col items-center space-y-3 text-slate-300">
|
||||
@@ -1,6 +1,8 @@
|
||||
import { type Response } from "@prisma/client";
|
||||
import { notFound } from "next/navigation";
|
||||
import { TSurvey } from "@formbricks/types/surveys/types";
|
||||
import { TProjectStyling } from "@formbricks/types/project";
|
||||
import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
|
||||
import { TUserLocale } from "@formbricks/types/user";
|
||||
import {
|
||||
IMPRINT_URL,
|
||||
IS_FORMBRICKS_CLOUD,
|
||||
@@ -9,16 +11,13 @@ import {
|
||||
RECAPTCHA_SITE_KEY,
|
||||
} from "@/lib/constants";
|
||||
import { getPublicDomain } from "@/lib/getPublicUrl";
|
||||
import { findMatchingLocale } from "@/lib/utils/locale";
|
||||
import { getMultiLanguagePermission } from "@/modules/ee/license-check/lib/utils";
|
||||
import { getOrganizationIdFromEnvironmentId } from "@/modules/survey/lib/organization";
|
||||
import { getResponseCountBySurveyId } from "@/modules/survey/lib/response";
|
||||
import { getOrganizationBilling } from "@/modules/survey/lib/survey";
|
||||
import { LinkSurvey } from "@/modules/survey/link/components/link-survey";
|
||||
import { PinScreen } from "@/modules/survey/link/components/pin-screen";
|
||||
import { SurveyClientWrapper } from "@/modules/survey/link/components/survey-client-wrapper";
|
||||
import { SurveyCompletedMessage } from "@/modules/survey/link/components/survey-completed-message";
|
||||
import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive";
|
||||
import { VerifyEmail } from "@/modules/survey/link/components/verify-email";
|
||||
import { TEnvironmentContextForLinkSurvey } from "@/modules/survey/link/lib/environment";
|
||||
import { getEmailVerificationDetails } from "@/modules/survey/link/lib/helper";
|
||||
import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
|
||||
|
||||
interface SurveyRendererProps {
|
||||
survey: TSurvey;
|
||||
@@ -27,13 +26,31 @@ interface SurveyRendererProps {
|
||||
lang?: string;
|
||||
embed?: string;
|
||||
preview?: string;
|
||||
suId?: string;
|
||||
};
|
||||
singleUseId?: string;
|
||||
singleUseResponse?: Pick<Response, "id" | "finished"> | undefined;
|
||||
singleUseResponse?: Pick<Response, "id" | "finished">;
|
||||
contactId?: string;
|
||||
isPreview: boolean;
|
||||
// New props - pre-fetched in parent
|
||||
environmentContext: TEnvironmentContextForLinkSurvey;
|
||||
locale: TUserLocale;
|
||||
isMultiLanguageAllowed: boolean;
|
||||
responseCount?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders link survey with pre-fetched data from parent.
|
||||
*
|
||||
* This function receives all necessary data as props to avoid additional
|
||||
* database queries. The parent (page.tsx) fetches data in parallel stages
|
||||
* to minimize latency for users geographically distant from servers.
|
||||
*
|
||||
* @param environmentContext - Pre-fetched project and organization data
|
||||
* @param locale - User's locale from Accept-Language header
|
||||
* @param isMultiLanguageAllowed - Calculated from organization billing plan
|
||||
* @param responseCount - Conditionally fetched if showResponseCount is enabled
|
||||
*/
|
||||
export const renderSurvey = async ({
|
||||
survey,
|
||||
searchParams,
|
||||
@@ -41,8 +58,11 @@ export const renderSurvey = async ({
|
||||
singleUseResponse,
|
||||
contactId,
|
||||
isPreview,
|
||||
environmentContext,
|
||||
locale,
|
||||
isMultiLanguageAllowed,
|
||||
responseCount,
|
||||
}: SurveyRendererProps) => {
|
||||
const locale = await findMatchingLocale();
|
||||
const langParam = searchParams.lang;
|
||||
const isEmbed = searchParams.embed === "true";
|
||||
|
||||
@@ -50,27 +70,27 @@ export const renderSurvey = async ({
|
||||
notFound();
|
||||
}
|
||||
|
||||
const organizationId = await getOrganizationIdFromEnvironmentId(survey.environmentId);
|
||||
const organizationBilling = await getOrganizationBilling(organizationId);
|
||||
if (!organizationBilling) {
|
||||
throw new Error("Organization not found");
|
||||
}
|
||||
const isMultiLanguageAllowed = await getMultiLanguagePermission(organizationBilling.plan);
|
||||
// Extract project from pre-fetched context
|
||||
const { project } = environmentContext;
|
||||
|
||||
const isSpamProtectionEnabled = Boolean(IS_RECAPTCHA_CONFIGURED && survey.recaptcha?.enabled);
|
||||
|
||||
if (survey.status !== "inProgress") {
|
||||
const project = await getProjectByEnvironmentId(survey.environmentId);
|
||||
return (
|
||||
<SurveyInactive
|
||||
status={survey.status}
|
||||
surveyClosedMessage={survey.surveyClosedMessage}
|
||||
project={project || undefined}
|
||||
project={project}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// verify email: Check if the survey requires email verification
|
||||
// Check if single-use survey has already been completed
|
||||
if (singleUseResponse?.finished) {
|
||||
return <SurveyCompletedMessage singleUseMessage={survey.singleUse} project={project} />;
|
||||
}
|
||||
|
||||
// Handle email verification flow if enabled
|
||||
let emailVerificationStatus = "";
|
||||
let verifiedEmail: string | undefined = undefined;
|
||||
|
||||
@@ -84,40 +104,42 @@ export const renderSurvey = async ({
|
||||
}
|
||||
}
|
||||
|
||||
// get project
|
||||
const project = await getProjectByEnvironmentId(survey.environmentId);
|
||||
if (!project) {
|
||||
throw new Error("Project not found");
|
||||
if (survey.isVerifyEmailEnabled && emailVerificationStatus !== "verified" && !isPreview) {
|
||||
if (emailVerificationStatus === "fishy") {
|
||||
return (
|
||||
<VerifyEmail
|
||||
survey={survey}
|
||||
isErrorComponent={true}
|
||||
languageCode={getLanguageCode(langParam, isMultiLanguageAllowed, survey)}
|
||||
styling={project.styling}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<VerifyEmail
|
||||
singleUseId={searchParams.suId ?? ""}
|
||||
survey={survey}
|
||||
languageCode={getLanguageCode(langParam, isMultiLanguageAllowed, survey)}
|
||||
styling={project.styling}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const getLanguageCode = (): string => {
|
||||
if (!langParam || !isMultiLanguageAllowed) return "default";
|
||||
else {
|
||||
const selectedLanguage = survey.languages.find((surveyLanguage) => {
|
||||
return (
|
||||
surveyLanguage.language.code === langParam.toLowerCase() ||
|
||||
surveyLanguage.language.alias?.toLowerCase() === langParam.toLowerCase()
|
||||
);
|
||||
});
|
||||
if (!selectedLanguage || selectedLanguage?.default || !selectedLanguage?.enabled) {
|
||||
return "default";
|
||||
}
|
||||
return selectedLanguage.language.code;
|
||||
}
|
||||
};
|
||||
|
||||
const languageCode = getLanguageCode();
|
||||
const isSurveyPinProtected = Boolean(survey.pin);
|
||||
const responseCount = await getResponseCountBySurveyId(survey.id);
|
||||
// Compute final styling based on project and survey settings
|
||||
const styling = computeStyling(project.styling, survey.styling);
|
||||
const languageCode = getLanguageCode(langParam, isMultiLanguageAllowed, survey);
|
||||
const publicDomain = getPublicDomain();
|
||||
|
||||
if (isSurveyPinProtected) {
|
||||
// Handle PIN-protected surveys
|
||||
if (survey.pin) {
|
||||
return (
|
||||
<PinScreen
|
||||
surveyId={survey.id}
|
||||
styling={styling}
|
||||
publicDomain={publicDomain}
|
||||
project={project}
|
||||
emailVerificationStatus={emailVerificationStatus}
|
||||
singleUseId={singleUseId}
|
||||
singleUseResponse={singleUseResponse}
|
||||
IMPRINT_URL={IMPRINT_URL}
|
||||
@@ -126,35 +148,74 @@ export const renderSurvey = async ({
|
||||
verifiedEmail={verifiedEmail}
|
||||
languageCode={languageCode}
|
||||
isEmbed={isEmbed}
|
||||
locale={locale}
|
||||
isPreview={isPreview}
|
||||
contactId={contactId}
|
||||
recaptchaSiteKey={RECAPTCHA_SITE_KEY}
|
||||
isSpamProtectionEnabled={isSpamProtectionEnabled}
|
||||
responseCount={responseCount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Render interactive survey with client component for interactivity
|
||||
return (
|
||||
<LinkSurvey
|
||||
<SurveyClientWrapper
|
||||
survey={survey}
|
||||
project={project}
|
||||
styling={styling}
|
||||
publicDomain={publicDomain}
|
||||
emailVerificationStatus={emailVerificationStatus}
|
||||
singleUseId={singleUseId}
|
||||
singleUseResponse={singleUseResponse}
|
||||
responseCount={survey.welcomeCard.showResponseCount ? responseCount : undefined}
|
||||
verifiedEmail={verifiedEmail}
|
||||
responseCount={responseCount}
|
||||
languageCode={languageCode}
|
||||
isEmbed={isEmbed}
|
||||
IMPRINT_URL={IMPRINT_URL}
|
||||
PRIVACY_URL={PRIVACY_URL}
|
||||
IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
|
||||
locale={locale}
|
||||
isPreview={isPreview}
|
||||
singleUseId={singleUseId}
|
||||
singleUseResponseId={singleUseResponse?.id}
|
||||
contactId={contactId}
|
||||
recaptchaSiteKey={RECAPTCHA_SITE_KEY}
|
||||
isSpamProtectionEnabled={isSpamProtectionEnabled}
|
||||
isPreview={isPreview}
|
||||
verifiedEmail={verifiedEmail}
|
||||
IMPRINT_URL={IMPRINT_URL}
|
||||
PRIVACY_URL={PRIVACY_URL}
|
||||
IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Determines which styling to use based on project and survey settings.
|
||||
* Returns survey styling if theme overwriting is enabled, otherwise returns project styling.
|
||||
*/
|
||||
function computeStyling(
|
||||
projectStyling: TProjectStyling,
|
||||
surveyStyling?: TSurveyStyling | null
|
||||
): TProjectStyling | TSurveyStyling {
|
||||
if (!projectStyling.allowStyleOverwrite) {
|
||||
return projectStyling;
|
||||
}
|
||||
return surveyStyling?.overwriteThemeStyling ? surveyStyling : projectStyling;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines the language code to use for the survey.
|
||||
* Checks URL parameter against available survey languages and returns
|
||||
* "default" if multi-language is not allowed or language is not found.
|
||||
*/
|
||||
function getLanguageCode(
|
||||
langParam: string | undefined,
|
||||
isMultiLanguageAllowed: boolean,
|
||||
survey: TSurvey
|
||||
): string {
|
||||
if (!langParam || !isMultiLanguageAllowed) return "default";
|
||||
|
||||
const selectedLanguage = survey.languages.find((surveyLanguage) => {
|
||||
return (
|
||||
surveyLanguage.language.code === langParam.toLowerCase() ||
|
||||
surveyLanguage.language.alias?.toLowerCase() === langParam.toLowerCase()
|
||||
);
|
||||
});
|
||||
|
||||
if (!selectedLanguage || selectedLanguage?.default || !selectedLanguage?.enabled) {
|
||||
return "default";
|
||||
}
|
||||
return selectedLanguage.language.code;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import { findMatchingLocale } from "@/lib/utils/locale";
|
||||
import { getTranslate } from "@/lingodotdev/server";
|
||||
import { verifyContactSurveyToken } from "@/modules/ee/contacts/lib/contact-survey-link";
|
||||
import { getMultiLanguagePermission } from "@/modules/ee/license-check/lib/utils";
|
||||
import { getResponseCountBySurveyId } from "@/modules/survey/lib/response";
|
||||
import { getSurvey } from "@/modules/survey/lib/survey";
|
||||
import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive";
|
||||
import { renderSurvey } from "@/modules/survey/link/components/survey-renderer";
|
||||
import { getExistingContactResponse } from "@/modules/survey/link/lib/data";
|
||||
import { getEnvironmentContextForLinkSurvey } from "@/modules/survey/link/lib/environment";
|
||||
import { checkAndValidateSingleUseId } from "@/modules/survey/link/lib/helper";
|
||||
import { getBasicSurveyMetadata } from "@/modules/survey/link/lib/metadata-utils";
|
||||
import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
|
||||
@@ -93,18 +97,41 @@ export const ContactSurveyPage = async (props: ContactSurveyPageProps) => {
|
||||
if (isSingleUseSurvey) {
|
||||
const validatedSingleUseId = checkAndValidateSingleUseId(suId, isSingleUseSurveyEncrypted);
|
||||
if (!validatedSingleUseId) {
|
||||
const project = await getProjectByEnvironmentId(survey.environmentId);
|
||||
return <SurveyInactive status="link invalid" project={project ?? undefined} />;
|
||||
const environmentContext = await getEnvironmentContextForLinkSurvey(survey.environmentId);
|
||||
return <SurveyInactive status="link invalid" project={environmentContext.project} />;
|
||||
}
|
||||
|
||||
singleUseId = validatedSingleUseId;
|
||||
}
|
||||
|
||||
// Parallel fetch of environment context and locale
|
||||
const [environmentContext, locale, singleUseResponse] = await Promise.all([
|
||||
getEnvironmentContextForLinkSurvey(survey.environmentId),
|
||||
findMatchingLocale(),
|
||||
// Fetch existing response for this contact
|
||||
getExistingContactResponse(survey.id, contactId)(),
|
||||
]);
|
||||
|
||||
// Get multi-language permission
|
||||
const isMultiLanguageAllowed = await getMultiLanguagePermission(
|
||||
environmentContext.organizationBilling.plan
|
||||
);
|
||||
|
||||
// Fetch responseCount only if needed
|
||||
const responseCount = survey.welcomeCard.showResponseCount
|
||||
? await getResponseCountBySurveyId(survey.id)
|
||||
: undefined;
|
||||
|
||||
return renderSurvey({
|
||||
survey,
|
||||
searchParams,
|
||||
contactId,
|
||||
isPreview,
|
||||
singleUseId,
|
||||
singleUseResponse,
|
||||
environmentContext,
|
||||
locale,
|
||||
isMultiLanguageAllowed,
|
||||
responseCount,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -398,7 +398,7 @@ describe("data", () => {
|
||||
});
|
||||
});
|
||||
|
||||
test("should return null when contact response not found", async () => {
|
||||
test("should return undefined when contact response not found", async () => {
|
||||
const surveyId = "survey-1";
|
||||
const contactId = "nonexistent-contact";
|
||||
|
||||
@@ -406,7 +406,7 @@ describe("data", () => {
|
||||
|
||||
const result = await getExistingContactResponse(surveyId, contactId)();
|
||||
|
||||
expect(result).toBeNull();
|
||||
expect(result).toBeUndefined();
|
||||
});
|
||||
|
||||
test("should throw DatabaseError on Prisma error", async () => {
|
||||
|
||||
@@ -66,11 +66,11 @@ export const getSurveyWithMetadata = reactCache(async (surveyId: string) => {
|
||||
language: {
|
||||
select: {
|
||||
id: true,
|
||||
code: true,
|
||||
alias: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
code: true,
|
||||
projectId: true,
|
||||
alias: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -93,7 +93,15 @@ export const getSurveyWithMetadata = reactCache(async (surveyId: string) => {
|
||||
},
|
||||
},
|
||||
segment: {
|
||||
include: {
|
||||
select: {
|
||||
id: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
environmentId: true,
|
||||
title: true,
|
||||
description: true,
|
||||
isPrivate: true,
|
||||
filters: true,
|
||||
surveys: {
|
||||
select: {
|
||||
id: true,
|
||||
@@ -208,7 +216,7 @@ export const getExistingContactResponse = reactCache((surveyId: string, contactI
|
||||
},
|
||||
});
|
||||
|
||||
return response;
|
||||
return response ?? undefined;
|
||||
} catch (error) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError) {
|
||||
throw new DatabaseError(error.message);
|
||||
|
||||
221
apps/web/modules/survey/link/lib/environment.test.ts
Normal file
221
apps/web/modules/survey/link/lib/environment.test.ts
Normal file
@@ -0,0 +1,221 @@
|
||||
import { Prisma } from "@prisma/client";
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
import { beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import { prisma } from "@formbricks/database";
|
||||
import { DatabaseError, ResourceNotFoundError, ValidationError } from "@formbricks/types/errors";
|
||||
import { getEnvironmentContextForLinkSurvey } from "./environment";
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock("@formbricks/database", () => ({
|
||||
prisma: {
|
||||
environment: {
|
||||
findUnique: vi.fn(),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock React cache
|
||||
vi.mock("react", () => ({
|
||||
cache: vi.fn((fn) => fn),
|
||||
}));
|
||||
|
||||
describe("getEnvironmentContextForLinkSurvey", () => {
|
||||
beforeEach(() => {
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
test("should successfully fetch environment context with all required data", async () => {
|
||||
const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9i";
|
||||
const mockData = {
|
||||
project: {
|
||||
id: "clh1a2b3c4d5e6f7g8h9j",
|
||||
name: "Test Project",
|
||||
styling: { primaryColor: "#000000" },
|
||||
logo: { url: "https://example.com/logo.png" },
|
||||
linkSurveyBranding: true,
|
||||
organizationId: "clh1a2b3c4d5e6f7g8h9k",
|
||||
organization: {
|
||||
id: "clh1a2b3c4d5e6f7g8h9k",
|
||||
billing: {
|
||||
plan: "free",
|
||||
limits: {
|
||||
monthly: {
|
||||
responses: 100,
|
||||
miu: 1000,
|
||||
},
|
||||
},
|
||||
features: {
|
||||
inAppSurvey: {
|
||||
status: "active",
|
||||
},
|
||||
linkSurvey: {
|
||||
status: "active",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
vi.mocked(prisma.environment.findUnique).mockResolvedValue(mockData as any);
|
||||
|
||||
const result = await getEnvironmentContextForLinkSurvey(mockEnvironmentId);
|
||||
|
||||
expect(result).toEqual({
|
||||
project: {
|
||||
id: "clh1a2b3c4d5e6f7g8h9j",
|
||||
name: "Test Project",
|
||||
styling: { primaryColor: "#000000" },
|
||||
logo: { url: "https://example.com/logo.png" },
|
||||
linkSurveyBranding: true,
|
||||
},
|
||||
organizationId: "clh1a2b3c4d5e6f7g8h9k",
|
||||
organizationBilling: mockData.project.organization.billing,
|
||||
});
|
||||
|
||||
expect(prisma.environment.findUnique).toHaveBeenCalledWith({
|
||||
where: { id: mockEnvironmentId },
|
||||
select: {
|
||||
project: {
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
styling: true,
|
||||
logo: true,
|
||||
linkSurveyBranding: true,
|
||||
organizationId: true,
|
||||
organization: {
|
||||
select: {
|
||||
id: true,
|
||||
billing: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test("should throw ValidationError for invalid environment ID", async () => {
|
||||
const invalidId = "invalid-id";
|
||||
|
||||
await expect(getEnvironmentContextForLinkSurvey(invalidId)).rejects.toThrow(ValidationError);
|
||||
});
|
||||
|
||||
test("should throw ResourceNotFoundError when environment has no project", async () => {
|
||||
const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9m";
|
||||
|
||||
vi.mocked(prisma.environment.findUnique).mockResolvedValue({
|
||||
project: null,
|
||||
} as any);
|
||||
|
||||
await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(
|
||||
ResourceNotFoundError
|
||||
);
|
||||
await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow("Project");
|
||||
});
|
||||
|
||||
test("should throw ResourceNotFoundError when environment is not found", async () => {
|
||||
const mockEnvironmentId = "cuid123456789012345";
|
||||
|
||||
vi.mocked(prisma.environment.findUnique).mockResolvedValue(null);
|
||||
|
||||
await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(
|
||||
ResourceNotFoundError
|
||||
);
|
||||
});
|
||||
|
||||
test("should throw ResourceNotFoundError when project has no organization", async () => {
|
||||
const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9n";
|
||||
const mockData = {
|
||||
project: {
|
||||
id: "clh1a2b3c4d5e6f7g8h9o",
|
||||
name: "Test Project",
|
||||
styling: {},
|
||||
logo: null,
|
||||
linkSurveyBranding: true,
|
||||
organizationId: "clh1a2b3c4d5e6f7g8h9p",
|
||||
organization: null,
|
||||
},
|
||||
};
|
||||
|
||||
vi.mocked(prisma.environment.findUnique).mockResolvedValue(mockData as any);
|
||||
|
||||
await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(
|
||||
ResourceNotFoundError
|
||||
);
|
||||
await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow("Organization");
|
||||
});
|
||||
|
||||
test("should throw DatabaseError on Prisma error", async () => {
|
||||
const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9q";
|
||||
const prismaError = new Prisma.PrismaClientKnownRequestError("Database error", {
|
||||
code: "P2025",
|
||||
clientVersion: "5.0.0",
|
||||
});
|
||||
|
||||
vi.mocked(prisma.environment.findUnique).mockRejectedValue(prismaError);
|
||||
|
||||
await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(DatabaseError);
|
||||
await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow("Database error");
|
||||
});
|
||||
|
||||
test("should rethrow non-Prisma errors", async () => {
|
||||
const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9r";
|
||||
const genericError = new Error("Generic error");
|
||||
|
||||
vi.mocked(prisma.environment.findUnique).mockRejectedValue(genericError);
|
||||
|
||||
await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(genericError);
|
||||
});
|
||||
|
||||
test("should handle project with minimal data", async () => {
|
||||
const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9s";
|
||||
const mockData = {
|
||||
project: {
|
||||
id: "clh1a2b3c4d5e6f7g8h9t",
|
||||
name: "Minimal Project",
|
||||
styling: null,
|
||||
logo: null,
|
||||
linkSurveyBranding: false,
|
||||
organizationId: "clh1a2b3c4d5e6f7g8h9u",
|
||||
organization: {
|
||||
id: "clh1a2b3c4d5e6f7g8h9u",
|
||||
billing: {
|
||||
plan: "free",
|
||||
limits: {
|
||||
monthly: {
|
||||
responses: 100,
|
||||
miu: 1000,
|
||||
},
|
||||
},
|
||||
features: {
|
||||
inAppSurvey: {
|
||||
status: "inactive",
|
||||
},
|
||||
linkSurvey: {
|
||||
status: "inactive",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
vi.mocked(prisma.environment.findUnique).mockResolvedValue(mockData as any);
|
||||
|
||||
const result = await getEnvironmentContextForLinkSurvey(mockEnvironmentId);
|
||||
|
||||
expect(result).toEqual({
|
||||
project: {
|
||||
id: "clh1a2b3c4d5e6f7g8h9t",
|
||||
name: "Minimal Project",
|
||||
styling: null,
|
||||
logo: null,
|
||||
linkSurveyBranding: false,
|
||||
},
|
||||
organizationId: "clh1a2b3c4d5e6f7g8h9u",
|
||||
organizationBilling: mockData.project.organization.billing,
|
||||
});
|
||||
});
|
||||
});
|
||||
103
apps/web/modules/survey/link/lib/environment.ts
Normal file
103
apps/web/modules/survey/link/lib/environment.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
import "server-only";
|
||||
import { Prisma, Project } from "@prisma/client";
|
||||
import { cache as reactCache } from "react";
|
||||
import { prisma } from "@formbricks/database";
|
||||
import { ZId } from "@formbricks/types/common";
|
||||
import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
|
||||
import { TOrganizationBilling } from "@formbricks/types/organizations";
|
||||
import { validateInputs } from "@/lib/utils/validate";
|
||||
|
||||
/**
|
||||
* @file Data access layer for link surveys - optimized environment context fetching
|
||||
* @module modules/survey/link/lib/environment
|
||||
*
|
||||
* This module provides optimized data fetching for link survey rendering by combining
|
||||
* related queries into a single database call. Uses React cache for automatic request
|
||||
* deduplication within the same render cycle.
|
||||
*/
|
||||
|
||||
type TProjectForLinkSurvey = Pick<Project, "id" | "name" | "styling" | "logo" | "linkSurveyBranding">;
|
||||
|
||||
export interface TEnvironmentContextForLinkSurvey {
|
||||
project: TProjectForLinkSurvey;
|
||||
organizationId: string;
|
||||
organizationBilling: TOrganizationBilling;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches all environment-related data needed for link surveys in a single optimized query.
|
||||
* Combines project, organization, and billing data using Prisma relationships to minimize
|
||||
* database round trips.
|
||||
*
|
||||
* This function is specifically optimized for link survey rendering and only fetches the
|
||||
* fields required for that use case. Other parts of the application may need different
|
||||
* field combinations and should use their own specialized functions.
|
||||
*
|
||||
* @param environmentId - The environment identifier
|
||||
* @returns Object containing project styling data, organization ID, and billing information
|
||||
* @throws ResourceNotFoundError if environment, project, or organization not found
|
||||
* @throws DatabaseError if database query fails
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // In server components, function is automatically cached per request
|
||||
* const { project, organizationId, organizationBilling } =
|
||||
* await getEnvironmentContextForLinkSurvey(survey.environmentId);
|
||||
* ```
|
||||
*/
|
||||
export const getEnvironmentContextForLinkSurvey = reactCache(
|
||||
async (environmentId: string): Promise<TEnvironmentContextForLinkSurvey> => {
|
||||
validateInputs([environmentId, ZId]);
|
||||
|
||||
try {
|
||||
const environment = await prisma.environment.findUnique({
|
||||
where: { id: environmentId },
|
||||
select: {
|
||||
project: {
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
styling: true,
|
||||
logo: true,
|
||||
linkSurveyBranding: true,
|
||||
organizationId: true,
|
||||
organization: {
|
||||
select: {
|
||||
id: true,
|
||||
billing: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Fail early pattern: validate data before proceeding
|
||||
if (!environment?.project) {
|
||||
throw new ResourceNotFoundError("Project", null);
|
||||
}
|
||||
|
||||
if (!environment.project.organization) {
|
||||
throw new ResourceNotFoundError("Organization", null);
|
||||
}
|
||||
|
||||
// Return structured, typed data
|
||||
return {
|
||||
project: {
|
||||
id: environment.project.id,
|
||||
name: environment.project.name,
|
||||
styling: environment.project.styling,
|
||||
logo: environment.project.logo,
|
||||
linkSurveyBranding: environment.project.linkSurveyBranding,
|
||||
},
|
||||
organizationId: environment.project.organizationId,
|
||||
organizationBilling: environment.project.organization.billing as TOrganizationBilling,
|
||||
};
|
||||
} catch (error) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError) {
|
||||
throw new DatabaseError(error.message);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -19,16 +19,21 @@ export const getNameForURL = (value: string) => encodeURIComponent(value);
|
||||
export const getBrandColorForURL = (value: string) => encodeURIComponent(value);
|
||||
|
||||
/**
|
||||
* Get basic survey metadata (title and description) based on link metadata, welcome card or survey name
|
||||
* Get basic survey metadata (title and description) based on link metadata, welcome card or survey name.
|
||||
*
|
||||
* @param surveyId - Survey identifier
|
||||
* @param languageCode - Language code for localization (default: "default")
|
||||
* @param survey - Optional survey data if already available (e.g., from generateMetadata)
|
||||
*/
|
||||
export const getBasicSurveyMetadata = async (
|
||||
surveyId: string,
|
||||
languageCode = "default"
|
||||
languageCode = "default",
|
||||
survey?: Awaited<ReturnType<typeof getSurvey>> | null
|
||||
): Promise<TBasicSurveyMetadata> => {
|
||||
const survey = await getSurvey(surveyId);
|
||||
const surveyData = survey ?? (await getSurvey(surveyId));
|
||||
|
||||
// If survey doesn't exist, return default metadata
|
||||
if (!survey) {
|
||||
if (!surveyData) {
|
||||
return {
|
||||
title: "Survey",
|
||||
description: "Please complete this survey.",
|
||||
@@ -37,11 +42,11 @@ export const getBasicSurveyMetadata = async (
|
||||
};
|
||||
}
|
||||
|
||||
const metadata = survey.metadata;
|
||||
const welcomeCard = survey.welcomeCard;
|
||||
const metadata = surveyData.metadata;
|
||||
const welcomeCard = surveyData.welcomeCard;
|
||||
const useDefaultLanguageCode =
|
||||
languageCode === "default" ||
|
||||
survey.languages.find((lang) => lang.language.code === languageCode)?.default;
|
||||
surveyData.languages.find((lang) => lang.language.code === languageCode)?.default;
|
||||
|
||||
// Determine language code to use for metadata
|
||||
const langCode = useDefaultLanguageCode ? "default" : languageCode;
|
||||
@@ -51,10 +56,10 @@ export const getBasicSurveyMetadata = async (
|
||||
const titleFromWelcome =
|
||||
welcomeCard?.enabled && welcomeCard.headline
|
||||
? getTextContent(
|
||||
getLocalizedValue(recallToHeadline(welcomeCard.headline, survey, false, langCode), langCode)
|
||||
getLocalizedValue(recallToHeadline(welcomeCard.headline, surveyData, false, langCode), langCode)
|
||||
) || ""
|
||||
: undefined;
|
||||
let title = titleFromMetadata || titleFromWelcome || survey.name;
|
||||
let title = titleFromMetadata || titleFromWelcome || surveyData.name;
|
||||
|
||||
// Set description - priority: custom link metadata > default
|
||||
const descriptionFromMetadata = metadata?.description
|
||||
@@ -63,7 +68,7 @@ export const getBasicSurveyMetadata = async (
|
||||
let description = descriptionFromMetadata || "Please complete this survey.";
|
||||
|
||||
// Get OG image from link metadata if available
|
||||
const { ogImage } = metadata;
|
||||
const ogImage = metadata?.ogImage;
|
||||
|
||||
if (!titleFromMetadata) {
|
||||
if (IS_FORMBRICKS_CLOUD) {
|
||||
@@ -74,7 +79,7 @@ export const getBasicSurveyMetadata = async (
|
||||
return {
|
||||
title,
|
||||
description,
|
||||
survey,
|
||||
survey: surveyData,
|
||||
ogImage,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import { getSurveyMetadata } from "@/modules/survey/link/lib/data";
|
||||
import { getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
|
||||
import { getBasicSurveyMetadata, getSurveyOpenGraphMetadata } from "./lib/metadata-utils";
|
||||
import { getMetadataForLinkSurvey } from "./metadata";
|
||||
|
||||
vi.mock("@/modules/survey/link/lib/data", () => ({
|
||||
getSurveyMetadata: vi.fn(),
|
||||
getSurveyWithMetadata: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("next/navigation", () => ({
|
||||
@@ -54,12 +54,12 @@ describe("getMetadataForLinkSurvey", () => {
|
||||
status: "published",
|
||||
} as any;
|
||||
|
||||
vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
|
||||
vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
|
||||
|
||||
const result = await getMetadataForLinkSurvey(mockSurveyId);
|
||||
|
||||
expect(getSurveyMetadata).toHaveBeenCalledWith(mockSurveyId);
|
||||
expect(getBasicSurveyMetadata).toHaveBeenCalledWith(mockSurveyId, undefined);
|
||||
expect(getSurveyWithMetadata).toHaveBeenCalledWith(mockSurveyId);
|
||||
expect(getBasicSurveyMetadata).toHaveBeenCalledWith(mockSurveyId, undefined, mockSurvey);
|
||||
expect(getSurveyOpenGraphMetadata).toHaveBeenCalledWith(mockSurveyId, mockSurveyName, undefined);
|
||||
|
||||
expect(result).toEqual({
|
||||
@@ -98,7 +98,7 @@ describe("getMetadataForLinkSurvey", () => {
|
||||
status: "published",
|
||||
} as any;
|
||||
|
||||
vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
|
||||
vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
|
||||
vi.mocked(getBasicSurveyMetadata).mockResolvedValue({
|
||||
title: mockSurveyName,
|
||||
description: mockDescription,
|
||||
@@ -120,7 +120,7 @@ describe("getMetadataForLinkSurvey", () => {
|
||||
status: "published",
|
||||
};
|
||||
|
||||
vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey as any);
|
||||
vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey as any);
|
||||
|
||||
await getMetadataForLinkSurvey(mockSurveyId);
|
||||
|
||||
@@ -135,7 +135,7 @@ describe("getMetadataForLinkSurvey", () => {
|
||||
status: "draft",
|
||||
} as any;
|
||||
|
||||
vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
|
||||
vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
|
||||
|
||||
await getMetadataForLinkSurvey(mockSurveyId);
|
||||
|
||||
@@ -150,7 +150,7 @@ describe("getMetadataForLinkSurvey", () => {
|
||||
status: "published",
|
||||
} as any;
|
||||
|
||||
vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
|
||||
vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
|
||||
vi.mocked(getSurveyOpenGraphMetadata).mockReturnValue({
|
||||
twitter: {
|
||||
title: mockSurveyName,
|
||||
@@ -192,7 +192,7 @@ describe("getMetadataForLinkSurvey", () => {
|
||||
status: "published",
|
||||
} as any;
|
||||
|
||||
vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
|
||||
vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
|
||||
vi.mocked(getSurveyOpenGraphMetadata).mockReturnValue({
|
||||
openGraph: {
|
||||
title: mockSurveyName,
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
import { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import { getSurveyMetadata } from "@/modules/survey/link/lib/data";
|
||||
import { getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
|
||||
import { getBasicSurveyMetadata, getSurveyOpenGraphMetadata } from "./lib/metadata-utils";
|
||||
|
||||
export const getMetadataForLinkSurvey = async (
|
||||
surveyId: string,
|
||||
languageCode?: string
|
||||
): Promise<Metadata> => {
|
||||
const survey = await getSurveyMetadata(surveyId);
|
||||
const survey = await getSurveyWithMetadata(surveyId);
|
||||
|
||||
if (!survey || survey.type !== "link" || survey.status === "draft") {
|
||||
if (!survey || survey?.type !== "link" || survey?.status === "draft") {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Get enhanced metadata that includes custom link metadata
|
||||
const { title, description, ogImage } = await getBasicSurveyMetadata(surveyId, languageCode);
|
||||
const { title, description, ogImage } = await getBasicSurveyMetadata(surveyId, languageCode, survey);
|
||||
const surveyBrandColor = survey.styling?.brandColor?.light;
|
||||
|
||||
// Use the shared function for creating the base metadata but override with custom data
|
||||
|
||||
@@ -3,11 +3,14 @@ import { notFound } from "next/navigation";
|
||||
import { logger } from "@formbricks/logger";
|
||||
import { ZId } from "@formbricks/types/common";
|
||||
import { TSurvey } from "@formbricks/types/surveys/types";
|
||||
import { findMatchingLocale } from "@/lib/utils/locale";
|
||||
import { getMultiLanguagePermission } from "@/modules/ee/license-check/lib/utils";
|
||||
import { getResponseCountBySurveyId } from "@/modules/survey/lib/response";
|
||||
import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive";
|
||||
import { renderSurvey } from "@/modules/survey/link/components/survey-renderer";
|
||||
import { getResponseBySingleUseId, getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
|
||||
import { getEnvironmentContextForLinkSurvey } from "@/modules/survey/link/lib/environment";
|
||||
import { checkAndValidateSingleUseId } from "@/modules/survey/link/lib/helper";
|
||||
import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
|
||||
import { getMetadataForLinkSurvey } from "@/modules/survey/link/metadata";
|
||||
|
||||
interface LinkSurveyPageProps {
|
||||
@@ -47,7 +50,29 @@ export const LinkSurveyPage = async (props: LinkSurveyPageProps) => {
|
||||
|
||||
const isPreview = searchParams.preview === "true";
|
||||
|
||||
// Use optimized survey data fetcher (includes all necessary data)
|
||||
/**
|
||||
* Optimized data fetching strategy for link surveys
|
||||
*
|
||||
* PERFORMANCE OPTIMIZATION:
|
||||
* We fetch data in carefully staged parallel operations to minimize latency.
|
||||
* Each sequential database call adds ~100-300ms for users far from servers.
|
||||
*
|
||||
* Fetch stages:
|
||||
* Stage 1: Survey (required first - provides config for all other fetches)
|
||||
* Stage 2: Parallel fetch of environment context, locale, and conditional single-use response
|
||||
* Stage 3: Multi-language permission (depends on billing from Stage 2)
|
||||
*
|
||||
* This reduces waterfall from 4-5 levels to 3 levels:
|
||||
* - Before: ~400-1500ms added latency for distant users
|
||||
* - After: ~200-600ms added latency for distant users
|
||||
* - Improvement: 50-60% latency reduction
|
||||
*
|
||||
* CACHING NOTE:
|
||||
* getSurveyWithMetadata is wrapped in React's cache(), so the call from
|
||||
* generateMetadata and this page component are automatically deduplicated.
|
||||
*/
|
||||
|
||||
// Stage 1: Fetch survey first (required for all subsequent logic)
|
||||
let survey: TSurvey | null = null;
|
||||
try {
|
||||
survey = await getSurveyWithMetadata(params.surveyId);
|
||||
@@ -56,40 +81,60 @@ export const LinkSurveyPage = async (props: LinkSurveyPageProps) => {
|
||||
return notFound();
|
||||
}
|
||||
|
||||
if (!survey) {
|
||||
return notFound();
|
||||
}
|
||||
|
||||
const suId = searchParams.suId;
|
||||
|
||||
const isSingleUseSurvey = survey?.singleUse?.enabled;
|
||||
const isSingleUseSurveyEncrypted = survey?.singleUse?.isEncrypted;
|
||||
|
||||
// Validate single-use ID early (no I/O, just validation)
|
||||
const isSingleUseSurvey = survey.singleUse?.enabled;
|
||||
const isSingleUseSurveyEncrypted = survey.singleUse?.isEncrypted;
|
||||
let singleUseId: string | undefined = undefined;
|
||||
|
||||
if (isSingleUseSurvey) {
|
||||
const validatedSingleUseId = checkAndValidateSingleUseId(suId, isSingleUseSurveyEncrypted);
|
||||
if (!validatedSingleUseId) {
|
||||
const project = await getProjectByEnvironmentId(survey.environmentId);
|
||||
return <SurveyInactive status="link invalid" project={project ?? undefined} />;
|
||||
// Need to fetch project for error page - fetch environmentContext for it
|
||||
const environmentContext = await getEnvironmentContextForLinkSurvey(survey.environmentId);
|
||||
return <SurveyInactive status="link invalid" project={environmentContext.project} />;
|
||||
}
|
||||
|
||||
singleUseId = validatedSingleUseId;
|
||||
}
|
||||
|
||||
let singleUseResponse;
|
||||
if (isSingleUseSurvey && singleUseId) {
|
||||
try {
|
||||
// Use optimized response fetcher with proper caching
|
||||
const fetchResponseFn = getResponseBySingleUseId(survey.id, singleUseId);
|
||||
singleUseResponse = await fetchResponseFn();
|
||||
} catch (error) {
|
||||
logger.error("Error fetching single use response:", error);
|
||||
singleUseResponse = undefined;
|
||||
}
|
||||
}
|
||||
// Stage 2: Parallel fetch of all remaining data
|
||||
const [environmentContext, locale, singleUseResponse] = await Promise.all([
|
||||
getEnvironmentContextForLinkSurvey(survey.environmentId),
|
||||
findMatchingLocale(),
|
||||
// Only fetch single-use response if we have a validated ID
|
||||
isSingleUseSurvey && singleUseId
|
||||
? getResponseBySingleUseId(survey.id, singleUseId)()
|
||||
: Promise.resolve(undefined),
|
||||
]);
|
||||
|
||||
// Stage 3: Get multi-language permission (depends on environmentContext)
|
||||
// Future optimization: Consider caching getMultiLanguagePermission by plan tier
|
||||
// since it's a pure computation based on billing plan. Could be memoized at
|
||||
// the plan level rather than per-request.
|
||||
const isMultiLanguageAllowed = await getMultiLanguagePermission(
|
||||
environmentContext.organizationBilling.plan
|
||||
);
|
||||
|
||||
// Fetch responseCount only if needed (depends on survey config)
|
||||
const responseCount = survey.welcomeCard.showResponseCount
|
||||
? await getResponseCountBySurveyId(survey.id)
|
||||
: undefined;
|
||||
|
||||
// Pass all pre-fetched data to renderer
|
||||
return renderSurvey({
|
||||
survey,
|
||||
searchParams,
|
||||
singleUseId,
|
||||
singleUseResponse,
|
||||
singleUseResponse: singleUseResponse ?? undefined,
|
||||
isPreview,
|
||||
environmentContext,
|
||||
locale,
|
||||
isMultiLanguageAllowed,
|
||||
responseCount,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { SurveyContainerProps } from "@formbricks/types/formbricks-surveys";
|
||||
import { executeRecaptcha, loadRecaptchaScript } from "@/modules/ui/components/survey/recaptcha";
|
||||
|
||||
const createContainerId = () => `formbricks-survey-container`;
|
||||
|
||||
// Module-level flag to prevent concurrent script loads across component instances
|
||||
let isLoadingScript = false;
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
formbricksSurveys: {
|
||||
@@ -26,8 +30,11 @@ export const SurveyInline = (props: Omit<SurveyContainerProps, "containerId">) =
|
||||
[containerId, props, getRecaptchaToken]
|
||||
);
|
||||
const [isScriptLoaded, setIsScriptLoaded] = useState(false);
|
||||
const hasLoadedRef = useRef(false);
|
||||
|
||||
const loadSurveyScript: () => Promise<void> = async () => {
|
||||
// Set loading flag immediately to prevent concurrent loads
|
||||
isLoadingScript = true;
|
||||
try {
|
||||
const response = await fetch("/js/surveys.umd.cjs");
|
||||
|
||||
@@ -42,12 +49,20 @@ export const SurveyInline = (props: Omit<SurveyContainerProps, "containerId">) =
|
||||
|
||||
document.head.appendChild(scriptElement);
|
||||
setIsScriptLoaded(true);
|
||||
hasLoadedRef.current = true;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
} finally {
|
||||
isLoadingScript = false;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Prevent duplicate loads across multiple renders or component instances
|
||||
if (hasLoadedRef.current || isLoadingScript) {
|
||||
return;
|
||||
}
|
||||
|
||||
const loadScript = async () => {
|
||||
if (!window.formbricksSurveys) {
|
||||
try {
|
||||
@@ -64,7 +79,8 @@ export const SurveyInline = (props: Omit<SurveyContainerProps, "containerId">) =
|
||||
};
|
||||
|
||||
loadScript();
|
||||
}, [containerId, props, renderInline]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isScriptLoaded) {
|
||||
|
||||
@@ -110,6 +110,10 @@ export const ThemeStylingPreviewSurvey = ({
|
||||
|
||||
const isAppSurvey = previewType === "app";
|
||||
|
||||
// Create a unique key that includes both timestamp and preview type
|
||||
// This ensures the survey remounts when switching between app and link
|
||||
const surveyKey = `${previewType}-${surveyFormKey}`;
|
||||
|
||||
const scrollToEditLogoSection = () => {
|
||||
const editLogoSection = document.getElementById("edit-logo");
|
||||
if (editLogoSection) {
|
||||
@@ -160,7 +164,7 @@ export const ThemeStylingPreviewSurvey = ({
|
||||
previewMode="desktop"
|
||||
background={project.styling.cardBackgroundColor?.light}
|
||||
borderRadius={project.styling.roundness ?? 8}>
|
||||
<Fragment key={surveyFormKey}>
|
||||
<Fragment key={surveyKey}>
|
||||
<SurveyInline
|
||||
isPreviewMode={true}
|
||||
survey={{ ...survey, type: "app" }}
|
||||
@@ -185,7 +189,7 @@ export const ThemeStylingPreviewSurvey = ({
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
key={surveyFormKey}
|
||||
key={surveyKey}
|
||||
className={`${project.logo?.url && !project.styling.isLogoHidden && !isFullScreenPreview ? "mt-12" : ""} z-0 w-full max-w-md rounded-lg p-4`}>
|
||||
<SurveyInline
|
||||
isPreviewMode={true}
|
||||
|
||||
Reference in New Issue
Block a user