mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-05 02:52:50 -05:00
Code Issues Packages Projects Releases 169 Wiki Activity

feat: character limitations to free text question (#4047)

Browse Source 
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Piyush Gupta <piyushguptaa2z123@gmail.com>
This commit is contained in:
Anne Deepa Prasanna
2024-12-09 19:44:47 +05:30
committed by GitHub
parent e38391ade0
commit 797c56585b
13 changed files with 438 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates.ts
+27
View File
@@ -51,6 +51,9 @@ const NPSSurvey = (locale: string): TXMTemplate => {
headline: { default: translate("nps_survey_question_2_headline", locale) },
required: false,
inputType: "text",
charLimit: {
enabled: false,
},
},
{
id: createId(),
@@ -58,6 +61,9 @@ const NPSSurvey = (locale: string): TXMTemplate => {
headline: { default: translate("nps_survey_question_3_headline", locale) },
required: false,
inputType: "text",
charLimit: {
enabled: false,
},
},
],
};
@@ -156,6 +162,9 @@ const StarRatingSurvey = (locale: string): TXMTemplate => {
buttonLabel: { default: "Send" },
placeholder: { default: "Type your answer here..." },
inputType: "text",
charLimit: {
enabled: false,
},
},
],
};
@@ -242,6 +251,9 @@ const CSATSurvey = (locale: string): TXMTemplate => {
required: false,
placeholder: { default: translate("csat_survey_question_2_placeholder", locale) },
inputType: "text",
charLimit: {
enabled: false,
},
},
{
id: reusableQuestionIds[2],
@@ -250,6 +262,9 @@ const CSATSurvey = (locale: string): TXMTemplate => {
required: false,
placeholder: { default: translate("csat_survey_question_3_placeholder", locale) },
inputType: "text",
charLimit: {
enabled: false,
},
},
],
};
@@ -278,6 +293,9 @@ const CESSurvey = (locale: string): TXMTemplate => {
required: true,
placeholder: { default: translate("cess_survey_question_2_placeholder", locale) },
inputType: "text",
charLimit: {
enabled: false,
},
},
],
};
@@ -376,6 +394,9 @@ const SmileysRatingSurvey = (locale: string): TXMTemplate => {
buttonLabel: { default: translate("smileys_survey_question_3_button_label", locale) },
placeholder: { default: translate("smileys_survey_question_3_placeholder", locale) },
inputType: "text",
charLimit: {
enabled: false,
},
},
],
};
@@ -403,6 +424,9 @@ const eNPSSurvey = (locale: string): TXMTemplate => {
headline: { default: translate("enps_survey_question_2_headline", locale) },
required: false,
inputType: "text",
charLimit: {
enabled: false,
},
},
{
id: createId(),
@@ -410,6 +434,9 @@ const eNPSSurvey = (locale: string): TXMTemplate => {
headline: { default: translate("enps_survey_question_3_headline", locale) },
required: false,
inputType: "text",
charLimit: {
enabled: false,
},
},
],
};
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx
+85 -1
View File
@@ -1,13 +1,15 @@
"use client";
import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInput";
import { AdvancedOptionToggle } from "@/modules/ui/components/advanced-option-toggle";
import { Button } from "@/modules/ui/components/button";
import { Input } from "@/modules/ui/components/input";
import { Label } from "@/modules/ui/components/label";
import { OptionsSwitch } from "@/modules/ui/components/options-switch";
import { useAutoAnimate } from "@formkit/auto-animate/react";
import { HashIcon, LinkIcon, MailIcon, MessageSquareTextIcon, PhoneIcon, PlusIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import type { JSX } from "react";
import { JSX, useEffect, useState } from "react";
import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
import {
@@ -52,16 +54,34 @@ export const OpenQuestionForm = ({
const t = useTranslations();
const defaultPlaceholder = getPlaceholderByInputType(question.inputType ?? "text");
const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages ?? []);
const [showCharLimits, setShowCharLimits] = useState(question.inputType === "text");
const handleInputChange = (inputType: TSurveyOpenTextQuestionInputType) => {
const updatedAttributes = {
inputType: inputType,
placeholder: createI18nString(getPlaceholderByInputType(inputType), surveyLanguageCodes),
longAnswer: inputType === "text" ? question.longAnswer : false,
charLimit: {
min: undefined,
max: undefined,
},
};
setIsCharLimitEnabled(false);
setShowCharLimits(inputType === "text");
updateQuestion(questionIdx, updatedAttributes);
};
const [parent] = useAutoAnimate();
const [isCharLimitEnabled, setIsCharLimitEnabled] = useState(false);
useEffect(() => {
if (question?.charLimit?.min !== undefined || question?.charLimit?.max !== undefined) {
setIsCharLimitEnabled(true);
} else {
setIsCharLimitEnabled(false);
}
}, []);
return (
<form>
@@ -146,6 +166,70 @@ export const OpenQuestionForm = ({
/>
</div>
</div>
<div className="mt-3">
{showCharLimits && (
<AdvancedOptionToggle
isChecked={isCharLimitEnabled}
onToggle={(checked: boolean) => {
setIsCharLimitEnabled(checked);
updateQuestion(questionIdx, {
charLimit: {
enabled: checked,
min: undefined,
max: undefined,
},
});
}}
htmlId="charLimit"
description={t("environments.surveys.edit.character_limit_toggle_description")}
childBorder
title={t("environments.surveys.edit.character_limit_toggle_title")}
customContainerClass="p-0">
<div className="flex gap-4 p-4">
<div className="flex items-center gap-2">
<Label htmlFor="minLength">{t("common.minimum")}</Label>
<Input
id="minLength"
name="minLength"
type="number"
min={0}
value={question?.charLimit?.min || ""}
aria-label={t("common.minimum")}
className="bg-white"
onChange={(e) =>
updateQuestion(questionIdx, {
charLimit: {
...question?.charLimit,
min: e.target.value ? parseInt(e.target.value) : undefined,
},
})
}
/>
</div>
<div className="flex items-center gap-2">
<Label htmlFor="maxLength">{t("common.maximum")}</Label>
<Input
id="maxLength"
name="maxLength"
type="number"
min={0}
aria-label={t("common.maximum")}
value={question?.charLimit?.max || ""}
className="bg-white"
onChange={(e) =>
updateQuestion(questionIdx, {
charLimit: {
...question?.charLimit,
max: e.target.value ? parseInt(e.target.value) : undefined,
},
})
}
/>
</div>
</div>
</AdvancedOptionToggle>
)}
</div>
</form>
);
};
apps/web/playwright/api/management/survey.spec.ts
+3
View File
@@ -55,6 +55,9 @@ test.describe("API Tests", () => {
placeholder: {
default: "Type your answer here...",
},
charLimit: {
enabled: false,
},
},
],
},
packages/js/index.html
+1 -1
View File
@@ -7,7 +7,7 @@
e.parentNode.insertBefore(t, e),
setTimeout(function () {
formbricks.init({
environmentId: "cm48e77r50006ihewbunm8vta",
environmentId: "cm4h0vim00006a9zd41e90x83",
userId: "RANDOM_USER_ID",
apiHost: "http://localhost:3000",
});
packages/lib/messages/de-DE.json
+4
View File
@@ -243,11 +243,13 @@
"look_and_feel": "Darstellung",
"manage": "Verwalten",
"marketing": "Marketing",
"maximum": "Maximal",
"member": "Mitglied",
"members": "Mitglieder",
"membership_not_found": "Mitgliedschaft nicht gefunden",
"meta": "Meta",
"metadata": "Metadaten",
"minimum": "Minimum",
"mobile_overlay_text": "Formbricks ist für Geräte mit kleineren Auflösungen nicht verfügbar.",
"move_down": "Nach unten bewegen",
"move_up": "Nach oben bewegen",
@@ -1361,6 +1363,8 @@
"change_the_question_color_of_the_survey": "Fragefarbe der Umfrage ändern.",
"change_the_shadow_color_of_the_card": "Schattenfarbe der Karte ändern.",
"changes_saved": "Änderungen gespeichert.",
"character_limit_toggle_description": "Begrenzen Sie, wie kurz oder lang eine Antwort sein kann.",
"character_limit_toggle_title": "Fügen Sie Zeichenbeschränkungen hinzu",
"checkbox_label": "Checkbox-Beschriftung",
"choose_the_actions_which_trigger_the_survey": "Aktionen auswählen, die die Umfrage auslösen.",
"choose_where_to_run_the_survey": "Wähle, wo die Umfrage durchgeführt werden soll.",
packages/lib/messages/en-US.json
+4
View File
@@ -243,11 +243,13 @@
"look_and_feel": "Look & Feel",
"manage": "Manage",
"marketing": "Marketing",
"maximum": "Maximum",
"member": "Member",
"members": "Members",
"membership_not_found": "Membership not found",
"meta": "Meta",
"metadata": "Metadata",
"minimum": "Minimum",
"mobile_overlay_text": "Formbricks is not available for devices with smaller resolutions.",
"move_down": "Move down",
"move_up": "Move up",
@@ -1361,6 +1363,8 @@
"change_the_question_color_of_the_survey": "Change the question color of the survey.",
"change_the_shadow_color_of_the_card": "Change the shadow color of the card.",
"changes_saved": "Changes saved.",
"character_limit_toggle_description": "Limit how short or long an answer can be.",
"character_limit_toggle_title": "Add character limits",
"checkbox_label": "Checkbox Label",
"choose_the_actions_which_trigger_the_survey": "Choose the actions which trigger the survey.",
"choose_where_to_run_the_survey": "Choose where to run the survey.",
packages/lib/messages/fr-FR.json
+4
View File
@@ -243,11 +243,13 @@
"look_and_feel": "Apparence et sensation",
"manage": "Gérer",
"marketing": "Marketing",
"maximum": "Max",
"member": "Membre",
"members": "Membres",
"membership_not_found": "Adhésion non trouvée",
"meta": "Meta",
"metadata": "Métadonnées",
"minimum": "Min",
"mobile_overlay_text": "Formbricks n'est pas disponible pour les appareils avec des résolutions plus petites.",
"move_down": "Déplacer vers le bas",
"move_up": "Monter",
@@ -1361,6 +1363,8 @@
"change_the_question_color_of_the_survey": "Changez la couleur des questions du sondage.",
"change_the_shadow_color_of_the_card": "Changez la couleur de l'ombre de la carte.",
"changes_saved": "Modifications enregistrées.",
"character_limit_toggle_description": "Limitez la longueur des réponses.",
"character_limit_toggle_title": "Ajouter des limites de caractères",
"checkbox_label": "Étiquette de case à cocher",
"choose_the_actions_which_trigger_the_survey": "Choisissez les actions qui déclenchent l'enquête.",
"choose_where_to_run_the_survey": "Choisissez où réaliser l'enquête.",
packages/lib/messages/pt-BR.json
+4
View File
@@ -243,11 +243,13 @@
"look_and_feel": "Aparência e Experiência",
"manage": "gerenciar",
"marketing": "marketing",
"maximum": "Máximo",
"member": "Membros",
"members": "Membros",
"membership_not_found": "Assinatura não encontrada",
"meta": "Meta",
"metadata": "metadados",
"minimum": "Mínimo",
"mobile_overlay_text": "O Formbricks não está disponível para dispositivos com resoluções menores.",
"move_down": "Descer",
"move_up": "Subir",
@@ -1361,6 +1363,8 @@
"change_the_question_color_of_the_survey": "Muda a cor da pergunta da pesquisa.",
"change_the_shadow_color_of_the_card": "Muda a cor da sombra do cartão.",
"changes_saved": "Mudanças salvas.",
"character_limit_toggle_description": "Limite o quão curta ou longa uma resposta pode ser.",
"character_limit_toggle_title": "Adicionar limites de caracteres",
"checkbox_label": "Rótulo da Caixa de Seleção",
"choose_the_actions_which_trigger_the_survey": "Escolha as ações que disparam a pesquisa.",
"choose_where_to_run_the_survey": "Escolha onde realizar a pesquisa.",
packages/lib/response/tests/__mocks__/data.mock.ts
+3
View File
@@ -400,6 +400,9 @@ export const mockSurveySummaryOutput = {
inputType: "text",
required: false,
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
},
responseCount: 0,
samples: [],
packages/lib/survey/tests/__mock__/survey.mock.ts
+15
View File
@@ -160,6 +160,9 @@ const mockQuestion: TSurveyQuestion = {
headline: { default: "Question Text", de: "Fragetext" },
required: false,
inputType: "text",
charLimit: {
enabled: false,
},
};
const mockWelcomeCard: TSurveyWelcomeCard = {
@@ -310,6 +313,9 @@ export const mockSurveyWithLogic: TSurvey = {
inputType: "text",
headline: { default: "What is your favorite color?" },
required: true,
charLimit: {
enabled: false,
},
logic: [
{
id: "cdu9vgtmmd9b24l35pp9bodk",
@@ -335,6 +341,9 @@ export const mockSurveyWithLogic: TSurvey = {
inputType: "text",
headline: { default: "What is your favorite food?" },
required: true,
charLimit: {
enabled: false,
},
logic: [
{
id: "uwlm6kazj5pbt6licpa1hw5c",
@@ -366,6 +375,9 @@ export const mockSurveyWithLogic: TSurvey = {
inputType: "text",
headline: { default: "What is your favorite movie?" },
required: true,
charLimit: {
enabled: false,
},
logic: [
{
id: "dpi3zipezuo1idplztb1abes",
@@ -427,6 +439,9 @@ export const mockSurveyWithLogic: TSurvey = {
inputType: "number",
headline: { default: "Select your age group:" },
required: true,
charLimit: {
enabled: false,
},
logic: [
{
id: "o6n73uq9rysih9mpcbzlehfs",
packages/lib/templates.ts
+243
View File
@@ -154,6 +154,9 @@ const cartAbandonmentSurvey = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: {
default: translate("card_abandonment_survey_question_3_headline", locale),
},
@@ -250,6 +253,9 @@ const cartAbandonmentSurvey = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("card_abandonment_survey_question_7_headline", locale) },
required: true,
inputType: "email",
@@ -261,6 +267,9 @@ const cartAbandonmentSurvey = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("card_abandonment_survey_question_8_headline", locale) },
required: false,
inputType: "text",
@@ -365,6 +374,9 @@ const siteAbandonmentSurvey = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: {
default: translate("site_abandonment_survey_question_4_headline", locale),
},
@@ -461,6 +473,9 @@ const siteAbandonmentSurvey = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("site_abandonment_survey_question_8_headline", locale) },
buttonLabel: { default: translate("next", locale) },
backButtonLabel: { default: translate("back", locale) },
@@ -472,6 +487,9 @@ const siteAbandonmentSurvey = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("site_abandonment_survey_question_9_headline", locale) },
buttonLabel: { default: translate("finish", locale) },
backButtonLabel: { default: translate("back", locale) },
@@ -598,6 +616,9 @@ const productMarketFitSuperhuman = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("product_market_fit_superhuman_question_4_headline", locale) },
required: true,
buttonLabel: { default: translate("next", locale) },
@@ -607,6 +628,9 @@ const productMarketFitSuperhuman = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("product_market_fit_superhuman_question_5_headline", locale) },
required: true,
buttonLabel: { default: translate("next", locale) },
@@ -616,6 +640,9 @@ const productMarketFitSuperhuman = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("product_market_fit_superhuman_question_6_headline", locale) },
subheader: { default: translate("product_market_fit_superhuman_question_6_subheader", locale) },
required: true,
@@ -931,6 +958,9 @@ const churnSurvey = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -1006,6 +1036,9 @@ const churnSurvey = (locale: string): TTemplate => {
{
id: reusableQuestionIds[3],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -1147,6 +1180,9 @@ const earnedAdvocacyScore = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -1183,6 +1219,9 @@ const earnedAdvocacyScore = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("earned_advocacy_score_question_3_headline", locale) },
required: true,
placeholder: { default: translate("earned_advocacy_score_question_3_placeholder", locale) },
@@ -1242,6 +1281,9 @@ const earnedAdvocacyScore = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("earned_advocacy_score_question_5_headline", locale) },
required: true,
placeholder: { default: translate("earned_advocacy_score_question_5_placeholder", locale) },
@@ -1453,6 +1495,9 @@ const improveTrialConversion = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -1488,6 +1533,9 @@ const improveTrialConversion = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -1565,6 +1613,9 @@ const improveTrialConversion = (locale: string): TTemplate => {
{
id: reusableQuestionIds[4],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -1601,6 +1652,9 @@ const improveTrialConversion = (locale: string): TTemplate => {
{
id: reusableQuestionIds[5],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -1760,6 +1814,9 @@ const reviewPrompt = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("review_prompt_question_3_headline", locale) },
required: true,
subheader: { default: translate("review_prompt_question_3_subheader", locale) },
@@ -1964,6 +2021,9 @@ const improveActivationRate = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -2000,6 +2060,9 @@ const improveActivationRate = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -2036,6 +2099,9 @@ const improveActivationRate = (locale: string): TTemplate => {
{
id: reusableQuestionIds[3],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -2072,6 +2138,9 @@ const improveActivationRate = (locale: string): TTemplate => {
{
id: reusableQuestionIds[4],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -2108,6 +2177,9 @@ const improveActivationRate = (locale: string): TTemplate => {
{
id: reusableQuestionIds[5],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [],
headline: { default: translate("improve_activation_rate_question_6_headline", locale) },
required: false,
@@ -2180,6 +2252,9 @@ const employeeSatisfaction = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("employee_satisfaction_question_3_headline", locale) },
required: false,
placeholder: { default: translate("employee_satisfaction_question_3_placeholder", locale) },
@@ -2234,6 +2309,9 @@ const employeeSatisfaction = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("employee_satisfaction_question_6_headline", locale) },
required: false,
placeholder: { default: translate("employee_satisfaction_question_6_placeholder", locale) },
@@ -2351,6 +2429,9 @@ const uncoverStrengthsAndWeaknesses = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("uncover_strengths_and_weaknesses_question_3_headline", locale) },
required: false,
subheader: { default: translate("uncover_strengths_and_weaknesses_question_3_subheader", locale) },
@@ -2401,6 +2482,9 @@ const productMarketFitShort = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("product_market_fit_short_question_2_headline", locale) },
subheader: { default: translate("product_market_fit_short_question_2_subheader", locale) },
required: true,
@@ -2770,6 +2854,9 @@ const feedbackBox = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -2869,6 +2956,9 @@ const feedbackBox = (locale: string): TTemplate => {
{
id: reusableQuestionIds[3],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("feedback_box_question_4_headline", locale) },
required: true,
subheader: { default: translate("feedback_box_question_4_subheader", locale) },
@@ -2941,6 +3031,9 @@ const integrationSetupSurvey = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("integration_setup_survey_question_2_headline", locale) },
required: false,
placeholder: { default: translate("integration_setup_survey_question_2_placeholder", locale) },
@@ -2951,6 +3044,9 @@ const integrationSetupSurvey = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("integration_setup_survey_question_3_headline", locale) },
required: false,
subheader: { default: translate("integration_setup_survey_question_3_subheader", locale) },
@@ -3043,6 +3139,9 @@ const docsFeedback = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("docs_feedback_question_2_headline", locale) },
required: false,
inputType: "text",
@@ -3052,6 +3151,9 @@ const docsFeedback = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("docs_feedback_question_3_headline", locale) },
required: false,
inputType: "text",
@@ -3088,6 +3190,9 @@ const NPS = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("nps_question_2_headline", locale) },
required: false,
inputType: "text",
@@ -3278,6 +3383,9 @@ const customerSatisfactionScore = (locale: string): TTemplate => {
{
id: reusableQuestionIds[9],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("csat_question_10_headline", locale) },
required: false,
placeholder: { default: translate("csat_question_10_placeholder", locale) },
@@ -3357,6 +3465,9 @@ const collectFeedback = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -3394,6 +3505,9 @@ const collectFeedback = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("collect_feedback_question_3_headline", locale) },
required: true,
longAnswer: true,
@@ -3418,6 +3532,9 @@ const collectFeedback = (locale: string): TTemplate => {
{
id: reusableQuestionIds[4],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("collect_feedback_question_5_headline", locale) },
required: false,
longAnswer: true,
@@ -3445,6 +3562,9 @@ const collectFeedback = (locale: string): TTemplate => {
{
id: reusableQuestionIds[6],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("collect_feedback_question_7_headline", locale) },
required: false,
inputType: "email",
@@ -3564,6 +3684,9 @@ const prioritizeFeatures = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("prioritize_features_question_3_headline", locale) },
required: true,
placeholder: { default: translate("prioritize_features_question_3_placeholder", locale) },
@@ -3603,6 +3726,9 @@ const gaugeFeatureSatisfaction = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("gauge_feature_satisfaction_question_2_headline", locale) },
required: false,
inputType: "text",
@@ -3653,6 +3779,9 @@ const marketSiteClarity = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("market_site_clarity_question_2_headline", locale) },
required: false,
inputType: "text",
@@ -3701,6 +3830,9 @@ const customerEffortScore = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("customer_effort_score_question_2_headline", locale) },
required: true,
placeholder: { default: translate("customer_effort_score_question_2_placeholder", locale) },
@@ -4063,6 +4195,9 @@ const rateCheckoutExperience = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -4099,6 +4234,9 @@ const rateCheckoutExperience = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("rate_checkout_experience_question_3_headline", locale) },
required: true,
placeholder: { default: translate("rate_checkout_experience_question_3_placeholder", locale) },
@@ -4170,6 +4308,9 @@ const measureSearchExperience = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -4206,6 +4347,9 @@ const measureSearchExperience = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("measure_search_experience_question_3_headline", locale) },
required: true,
placeholder: { default: translate("measure_search_experience_question_3_placeholder", locale) },
@@ -4277,6 +4421,9 @@ const evaluateContentQuality = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -4313,6 +4460,9 @@ const evaluateContentQuality = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("evaluate_content_quality_question_3_headline", locale) },
required: true,
placeholder: { default: translate("evaluate_content_quality_question_3_placeholder", locale) },
@@ -4494,6 +4644,9 @@ const measureTaskAccomplishment = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -4538,6 +4691,9 @@ const measureTaskAccomplishment = (locale: string): TTemplate => {
{
id: reusableQuestionIds[3],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -4581,6 +4737,9 @@ const measureTaskAccomplishment = (locale: string): TTemplate => {
{
id: reusableQuestionIds[4],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("measure_task_accomplishment_question_5_headline", locale) },
required: true,
buttonLabel: { default: translate("measure_task_accomplishment_question_5_button_label", locale) },
@@ -4878,6 +5037,9 @@ const identifySignUpBarriers = (locale: string): TTemplate => {
{
id: reusableQuestionIds[3],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -4914,6 +5076,9 @@ const identifySignUpBarriers = (locale: string): TTemplate => {
{
id: reusableQuestionIds[4],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -4950,6 +5115,9 @@ const identifySignUpBarriers = (locale: string): TTemplate => {
{
id: reusableQuestionIds[5],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -4986,6 +5154,9 @@ const identifySignUpBarriers = (locale: string): TTemplate => {
{
id: reusableQuestionIds[6],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -5022,6 +5193,9 @@ const identifySignUpBarriers = (locale: string): TTemplate => {
{
id: reusableQuestionIds[7],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("identify_sign_up_barriers_question_8_headline", locale) },
required: true,
placeholder: { default: translate("identify_sign_up_barriers_question_8_placeholder", locale) },
@@ -5079,6 +5253,9 @@ const buildProductRoadmap = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: {
default: translate("build_product_roadmap_question_2_headline", locale),
},
@@ -5236,6 +5413,9 @@ const understandPurchaseIntention = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -5280,6 +5460,9 @@ const understandPurchaseIntention = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("understand_purchase_intention_question_3_headline", locale) },
required: true,
placeholder: { default: translate("understand_purchase_intention_question_3_placeholder", locale) },
@@ -5379,6 +5562,9 @@ const improveNewsletterContent = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -5554,6 +5740,9 @@ const evaluateAProductIdea = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("evaluate_a_product_idea_question_3_headline", locale) },
required: true,
placeholder: { default: translate("evaluate_a_product_idea_question_3_placeholder", locale) },
@@ -5650,6 +5839,9 @@ const evaluateAProductIdea = (locale: string): TTemplate => {
{
id: reusableQuestionIds[5],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -5686,6 +5878,9 @@ const evaluateAProductIdea = (locale: string): TTemplate => {
{
id: reusableQuestionIds[6],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("evaluate_a_product_idea_question_7_headline", locale) },
required: true,
placeholder: { default: translate("evaluate_a_product_idea_question_7_placeholder", locale) },
@@ -5696,6 +5891,9 @@ const evaluateAProductIdea = (locale: string): TTemplate => {
{
id: reusableQuestionIds[7],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("evaluate_a_product_idea_question_8_headline", locale) },
required: false,
placeholder: { default: translate("evaluate_a_product_idea_question_8_placeholder", locale) },
@@ -5899,6 +6097,9 @@ const understandLowEngagement = (locale: string): TTemplate => {
{
id: reusableQuestionIds[1],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -5935,6 +6136,9 @@ const understandLowEngagement = (locale: string): TTemplate => {
{
id: reusableQuestionIds[2],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -5971,6 +6175,9 @@ const understandLowEngagement = (locale: string): TTemplate => {
{
id: reusableQuestionIds[3],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -6007,6 +6214,9 @@ const understandLowEngagement = (locale: string): TTemplate => {
{
id: reusableQuestionIds[4],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [
{
id: createId(),
@@ -6043,6 +6253,9 @@ const understandLowEngagement = (locale: string): TTemplate => {
{
id: reusableQuestionIds[5],
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
logic: [],
headline: { default: translate("understand_low_engagement_question_6_headline", locale) },
required: false,
@@ -6124,6 +6337,9 @@ const employeeWellBeing = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("employee_well_being_question_4_headline", locale) },
required: false,
placeholder: { default: translate("employee_well_being_question_4_placeholder", locale) },
@@ -6164,6 +6380,9 @@ const longTermRetentionCheckIn = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("long_term_retention_check_in_question_2_headline", locale) },
required: false,
placeholder: { default: translate("long_term_retention_check_in_question_2_placeholder", locale) },
@@ -6220,6 +6439,9 @@ const longTermRetentionCheckIn = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: {
default: translate("long_term_retention_check_in_question_5_headline", locale),
},
@@ -6274,6 +6496,9 @@ const longTermRetentionCheckIn = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("long_term_retention_check_in_question_8_headline", locale) },
required: false,
placeholder: { default: translate("long_term_retention_check_in_question_8_placeholder", locale) },
@@ -6297,6 +6522,9 @@ const longTermRetentionCheckIn = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: { default: translate("long_term_retention_check_in_question_10_headline", locale) },
required: false,
placeholder: { default: translate("long_term_retention_check_in_question_10_placeholder", locale) },
@@ -6381,6 +6609,9 @@ const professionalDevelopmentGrowth = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: {
default: translate("professional_development_growth_survey_question_4_headline", locale),
},
@@ -6469,6 +6700,9 @@ const recognitionAndReward = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: {
default: translate("recognition_and_reward_survey_question_4_headline", locale),
},
@@ -6557,6 +6791,9 @@ const alignmentAndEngagement = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: {
default: translate("alignment_and_engagement_survey_question_4_headline", locale),
},
@@ -6645,6 +6882,9 @@ const supportiveWorkCulture = (locale: string): TTemplate => {
{
id: createId(),
type: TSurveyQuestionTypeEnum.OpenText,
charLimit: {
enabled: false,
},
headline: {
default: translate("supportive_work_culture_survey_question_4_headline", locale),
},
@@ -6727,6 +6967,9 @@ export const getCustomSurveyTemplate = (locale: string): TTemplate => ({
buttonLabel: { default: translate("next", locale) },
required: true,
inputType: "text",
charLimit: {
enabled: false,
},
} as TSurveyOpenTextQuestion,
],
},
packages/surveys/src/components/questions/open-text-question.tsx
+12
View File
@@ -42,6 +42,7 @@ export function OpenTextQuestion({
currentQuestionId,
}: OpenTextQuestionProps) {
const [startTime, setStartTime] = useState(performance.now());
const [currentLength, setCurrentLength] = useState(value.length || 0);
const isMediaAvailable = question.imageUrl || question.videoUrl;
const isCurrent = question.id === currentQuestionId;
useTtc(question.id, ttc, setTtc, startTime, setStartTime, isCurrent);
@@ -55,6 +56,7 @@ export function OpenTextQuestion({
}, [isCurrent, autoFocusEnabled]);
const handleInputChange = (inputValue: string) => {
setCurrentLength(inputValue.length);
onChange({ [question.id]: inputValue });
};
@@ -111,6 +113,8 @@ export function OpenTextQuestion({
className="fb-border-border placeholder:fb-text-placeholder fb-text-subheading focus:fb-border-brand fb-bg-input-bg fb-rounded-custom fb-block fb-w-full fb-border fb-p-2 fb-shadow-sm focus:fb-outline-none focus:fb-ring-0 sm:fb-text-sm"
pattern={question.inputType === "phone" ? "[0-9+ ]+" : ".*"}
title={question.inputType === "phone" ? "Enter a valid phone number" : undefined}
minlength={question.inputType === "text" ? question.charLimit?.min : undefined}
maxlength={question.inputType === "text" ? question.charLimit?.max : undefined}
/>
) : (
<textarea
@@ -133,8 +137,16 @@ export function OpenTextQuestion({
className="fb-border-border placeholder:fb-text-placeholder fb-bg-input-bg fb-text-subheading focus:fb-border-brand fb-rounded-custom fb-block fb-w-full fb-border fb-p-2 fb-shadow-sm focus:fb-ring-0 sm:fb-text-sm"
pattern={question.inputType === "phone" ? "[+][0-9 ]+" : ".*"}
title={question.inputType === "phone" ? "Please enter a valid phone number" : undefined}
minlength={question.inputType === "text" ? question.charLimit?.min : undefined}
maxlength={question.inputType === "text" ? question.charLimit?.max : undefined}
/>
)}
{question.inputType === "text" && question.charLimit?.max !== undefined && (
<span
className={`fb-text-xs ${currentLength >= question.charLimit?.max ? "fb-text-red-500 font-semibold" : "text-neutral-400"}`}>
{currentLength}/{question.charLimit?.max}
</span>
)}
</div>
</div>
</ScrollableContainer>
packages/types/surveys/types.ts
+33
View File
@@ -481,6 +481,39 @@ export const ZSurveyOpenTextQuestion = ZSurveyQuestionBase.extend({
longAnswer: z.boolean().optional(),
inputType: ZSurveyOpenTextQuestionInputType.optional().default("text"),
insightsEnabled: z.boolean().default(false).optional(),
charLimit: z.object({
enabled: z.boolean().default(false).optional(),
min: z.number().optional(),
max: z.number().optional(),
}),
}).superRefine((data, ctx) => {
if (data.charLimit.enabled && data.charLimit.min === undefined && data.charLimit.max === undefined) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "Enter the values for either minimum or maximum field",
});
}
if (
(data.charLimit.min !== undefined && data.charLimit.min < 0) ||
(data.charLimit.max !== undefined && data.charLimit.max < 0)
) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "The character limit values should be positive",
});
}
if (
data.charLimit.min !== undefined &&
data.charLimit.max !== undefined &&
data.charLimit.min > data.charLimit.max
) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "Minimum value cannot be greater than the maximum value",
});
}
});
export type TSurveyOpenTextQuestion = z.infer<typeof ZSurveyOpenTextQuestion>;