mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-03 20:31:23 -05:00
Code Issues Packages Projects Releases 100 Wiki Activity

feat: Validation for Number, URL, Email and Phone Number in Open Text Question

Browse Source 
feat: Validation for Number, URL, Email and Phone Number in Open Text Question
This commit is contained in:
Johannes
2023-10-08 15:02:38 +05:30
committed by GitHub
parent f181950cc0 611fa814d4
commit 59acb761e2
8 changed files with 456 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/OpenQuestionForm.tsx
+53 -4
View File
@@ -1,8 +1,20 @@
import { TSurveyOpenTextQuestion, TSurveyWithAnalytics } from "@formbricks/types/v1/surveys";
import { Button, Input, Label } from "@formbricks/ui";
import { TrashIcon, PlusIcon } from "@heroicons/react/24/solid";
import {
TSurveyOpenTextQuestion,
TSurveyOpenTextQuestionInputType,
TSurveyWithAnalytics,
} from "@formbricks/types/v1/surveys";
import { Button, Input, Label, QuestionTypeSelector } from "@formbricks/ui";
import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
import { useState } from "react";
const questionTypes = [
{ value: "text", label: "Text" },
{ value: "email", label: "Email" },
{ value: "url", label: "URL" },
{ value: "number", label: "Number" },
{ value: "phone", label: "Phone" },
];
interface OpenQuestionFormProps {
localSurvey: TSurveyWithAnalytics;
question: TSurveyOpenTextQuestion;
@@ -19,6 +31,16 @@ export default function OpenQuestionForm({
isInValid,
}: OpenQuestionFormProps): JSX.Element {
const [showSubheader, setShowSubheader] = useState(!!question.subheader);
const defaultPlaceholder = getPlaceholderByInputType(question.inputType ?? "text");
const handleInputChange = (inputType: TSurveyOpenTextQuestionInputType) => {
const updatedAttributes = {
inputType: inputType,
placeholder: getPlaceholderByInputType(inputType),
longAnswer: inputType === "text" ? question.longAnswer : false,
};
updateQuestion(questionIdx, updatedAttributes);
};
return (
<form>
@@ -71,11 +93,38 @@ export default function OpenQuestionForm({
<Input
id="placeholder"
name="placeholder"
value={question.placeholder}
value={question.placeholder ?? defaultPlaceholder}
onChange={(e) => updateQuestion(questionIdx, { placeholder: e.target.value })}
/>
</div>
</div>
{/* Add a dropdown to select the question type */}
<div className="mt-3">
<Label htmlFor="questionType">Input Type</Label>
<div className="mt-2 flex items-center">
<QuestionTypeSelector
questionTypes={questionTypes}
currentType={question.inputType}
handleTypeChange={handleInputChange} // Use the merged function
/>
</div>
</div>
</form>
);
}
function getPlaceholderByInputType(inputType: TSurveyOpenTextQuestionInputType) {
switch (inputType) {
case "email":
return "example@email.com";
case "url":
return "http://...";
case "number":
return "42";
case "phone":
return "+1 123 456 789";
default:
return "Type your answer here...";
}
}
apps/web/app/(app)/environments/[environmentId]/surveys/templates/templates.ts
+61
View File
@@ -86,12 +86,14 @@ export const templates: TTemplate[] = [
type: QuestionType.OpenText,
headline: "What type of people do you think would most benefit from {{productName}}?",
required: true,
inputType: "text",
},
{
id: createId(),
type: QuestionType.OpenText,
headline: "What is the main benefit your receive from {{productName}}?",
required: true,
inputType: "text",
},
{
id: createId(),
@@ -99,6 +101,7 @@ export const templates: TTemplate[] = [
headline: "How can we improve {{productName}} for you?",
subheader: "Please be as specific as possible.",
required: true,
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -253,6 +256,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
buttonLabel: "Send",
inputType: "text",
},
{
id: "mao94214zoo6c1at5rpuz7io",
@@ -274,6 +278,7 @@ export const templates: TTemplate[] = [
headline: "What features are you missing?",
required: true,
subheader: "",
inputType: "text",
},
{
id: "hdftsos1odzjllr7flj4m3j9",
@@ -320,6 +325,7 @@ export const templates: TTemplate[] = [
headline: "Great to hear! Why did you recommend us?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "duz2qp8eftix9wty1l221x1h",
@@ -327,6 +333,7 @@ export const templates: TTemplate[] = [
headline: "So sad. Why not?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "yhfew1j3ng6luy7t7qynwj79",
@@ -347,6 +354,7 @@ export const templates: TTemplate[] = [
headline: "What made you discourage them?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -405,6 +413,7 @@ export const templates: TTemplate[] = [
headline: "Sorry to hear. What was the biggest problem using {{productName}}?",
required: true,
buttonLabel: "Next",
inputType: "text",
},
{
id: "rnrfydttavtsf2t2nfx1df7m",
@@ -413,6 +422,7 @@ export const templates: TTemplate[] = [
headline: "What did you expect {{productName}} would do for you?",
required: true,
buttonLabel: "Next",
inputType: "text",
},
{
id: "x760wga1fhtr1i80cpssr7af",
@@ -434,6 +444,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "What would you like to achieve?",
buttonLabel: "Next",
inputType: "text",
},
{
id: "bqiyml1ym74ggx6htwdo7rlu",
@@ -445,6 +456,7 @@ export const templates: TTemplate[] = [
headline: "How are you solving your problem now?",
required: false,
subheader: "Please name alternative solutions:",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -490,6 +502,7 @@ export const templates: TTemplate[] = [
subheader: "Help us improve your experience.",
buttonLabel: "Send",
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -567,6 +580,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "r0zvi3vburf4hm7qewimzjux",
@@ -576,6 +590,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "rbwz3y6y9avzqcfj30nu0qj4",
@@ -585,6 +600,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "gn6298zogd2ipdz7js17qy5i",
@@ -594,6 +610,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "c0exdyri3erugrv0ezkyseh6",
@@ -603,6 +620,7 @@ export const templates: TTemplate[] = [
required: false,
subheader: "We're eager to fix it asap.",
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -651,6 +669,7 @@ export const templates: TTemplate[] = [
headline: "Would you like to add something?",
required: false,
subheader: "Feel free to speak your mind, we do too.",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -691,6 +710,7 @@ export const templates: TTemplate[] = [
headline: "How can we improve {{productName}} for you?",
subheader: "Please be as specific as possible.",
required: true,
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -959,6 +979,7 @@ export const templates: TTemplate[] = [
headline: "What's broken?",
required: true,
subheader: "The more detail, the better :)",
inputType: "text",
},
{
id: "a6c76m5oocw6xp9agf3d2tam",
@@ -982,6 +1003,7 @@ export const templates: TTemplate[] = [
subheader: "What problem do you want us to solve?",
buttonLabel: "Request feature",
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1014,6 +1036,7 @@ export const templates: TTemplate[] = [
headline: "Why was it hard?",
required: false,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "ef0qo3l8iisd517ikp078u1p",
@@ -1021,6 +1044,7 @@ export const templates: TTemplate[] = [
headline: "What other tools would you like to use with {{productName}}?",
required: false,
subheader: "We keep building integrations, yours can be next:",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1096,12 +1120,14 @@ export const templates: TTemplate[] = [
type: QuestionType.OpenText,
headline: "Please elaborate:",
required: false,
inputType: "text",
},
{
id: createId(),
type: QuestionType.OpenText,
headline: "Page URL",
required: false,
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1129,6 +1155,7 @@ export const templates: TTemplate[] = [
type: QuestionType.OpenText,
headline: "What made you give that rating?",
required: false,
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1162,6 +1189,7 @@ export const templates: TTemplate[] = [
headline: "Lovely! Is there anything we can do to improve your experience?",
required: false,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "vyo4mkw4ln95ts4ya7qp2tth",
@@ -1169,6 +1197,7 @@ export const templates: TTemplate[] = [
headline: "Ugh, sorry! Is there anything we can do to improve your experience?",
required: false,
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1257,6 +1286,7 @@ export const templates: TTemplate[] = [
headline: "How else could we improve you experience with {{productName}}?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1286,6 +1316,7 @@ export const templates: TTemplate[] = [
type: QuestionType.OpenText,
headline: "What is one thing we could do better?",
required: false,
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1326,6 +1357,7 @@ export const templates: TTemplate[] = [
type: QuestionType.OpenText,
headline: "What’s missing or unclear to you about {{productName}}?",
required: false,
inputType: "text",
},
{
id: createId(),
@@ -1366,6 +1398,7 @@ export const templates: TTemplate[] = [
headline: "Thanks! How could we make it easier for you to [ADD GOAL]?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1400,6 +1433,7 @@ export const templates: TTemplate[] = [
headline: "Sorry about that! What would have made it easier for you?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "lpof3d9t9hmnqvyjlpksmxd7",
@@ -1407,6 +1441,7 @@ export const templates: TTemplate[] = [
headline: "Lovely! Is there anything we can do to improve your experience?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1440,6 +1475,7 @@ export const templates: TTemplate[] = [
headline: "Ugh! What makes the results irrelevant for you?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "adcs3d9t9hmnqvyjlpksmxd7",
@@ -1447,6 +1483,7 @@ export const templates: TTemplate[] = [
headline: "Lovely! Is there anything we can do to improve your experience?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1480,6 +1517,7 @@ export const templates: TTemplate[] = [
headline: "Hmpft! What were you hoping for?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "adcs3d9t9hmnqvyjlpkswi38",
@@ -1487,6 +1525,7 @@ export const templates: TTemplate[] = [
headline: "Lovely! Is there anything else you would like us to cover?",
required: true,
placeholder: "Topics, trends, tutorials...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1539,6 +1578,7 @@ export const templates: TTemplate[] = [
headline: "What made it hard?",
required: false,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "nq88udm0jjtylr16ax87xlyc",
@@ -1550,6 +1590,7 @@ export const templates: TTemplate[] = [
headline: "Great! What did you come here to do today?",
required: false,
buttonLabel: "Send",
inputType: "text",
},
{
id: "u83zhr66knyfozccoqojx7bc",
@@ -1558,6 +1599,7 @@ export const templates: TTemplate[] = [
required: true,
buttonLabel: "Send",
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1632,6 +1674,7 @@ export const templates: TTemplate[] = [
headline: "What do you need but {{productName}} does not offer?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "j7jkpolm5xl7u0zt3g0e4z7d",
@@ -1640,6 +1683,7 @@ export const templates: TTemplate[] = [
headline: "What options are you looking at?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "t5gvag2d7kq311szz5iyiy79",
@@ -1648,6 +1692,7 @@ export const templates: TTemplate[] = [
headline: "What seems complicated to you?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "or0yhhrof753sq9ug4mdavgz",
@@ -1656,6 +1701,7 @@ export const templates: TTemplate[] = [
headline: "What are you concerned about regarding pricing?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "v0pq1qcnm6ohiry5ywcd91qq",
@@ -1663,6 +1709,7 @@ export const templates: TTemplate[] = [
headline: "Please explain:",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "k3q0vt1ko0bzbsq076p7lnys",
@@ -1706,6 +1753,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1747,6 +1795,7 @@ export const templates: TTemplate[] = [
headline: "Got it. What's your primary reason for visiting today?",
required: false,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "zm1hs8qkeuidh3qm0hx8pnw7",
@@ -1754,6 +1803,7 @@ export const templates: TTemplate[] = [
headline: "What, if anything, is holding you back from making a purchase today?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1793,6 +1843,7 @@ export const templates: TTemplate[] = [
headline: "What would have made this weeks newsletter more helpful?",
required: false,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "l2q1chqssong8n0xwaagyl8g",
@@ -1851,6 +1902,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "jmzgbo73cfjswlvhoynn7o0q",
@@ -1884,6 +1936,7 @@ export const templates: TTemplate[] = [
headline: "Got it. Why wouldn't this feature be valuable to you?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "gvzevzw4hkqd6dmlkcly6kd1",
@@ -1891,6 +1944,7 @@ export const templates: TTemplate[] = [
headline: "Got it. What would be most valuable to you in this feature?",
required: true,
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "bqmnpyku9etsgbtb322luzb2",
@@ -1898,6 +1952,7 @@ export const templates: TTemplate[] = [
headline: "Anything else we should keep in mind?",
required: false,
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -1954,6 +2009,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "g92s5wetp51ps6afmc6y7609",
@@ -1963,6 +2019,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "gn6298zogd2ipdz7js17qy5i",
@@ -1972,6 +2029,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "rbwz3y6y9avzqcfj30nu0qj4",
@@ -1981,6 +2039,7 @@ export const templates: TTemplate[] = [
required: true,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
{
id: "c0exdyri3erugrv0ezkyseh6",
@@ -1990,6 +2049,7 @@ export const templates: TTemplate[] = [
required: false,
subheader: "",
placeholder: "Type your answer here...",
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,
@@ -2032,6 +2092,7 @@ export const customSurvey: TTemplate = {
subheader: "This is an example survey.",
placeholder: "Type your answer here...",
required: true,
inputType: "text",
},
],
thankYouCard: thankYouCardDefault,