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

filter logic moved out side return

Browse Source
This commit is contained in:
Meet Patel
2023-07-29 11:21:56 +05:30
parent 6335565bf9
commit 09c37d78a2
1 changed files with 55 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
apps/web/app/(app)/environments/[environmentId]/surveys/templates/TemplateList.tsx
View File

@@ -138,81 +138,63 @@ export default function TemplateList({ environmentId, onTemplateClick, product,
</div>
)}
</button>
{templates
.filter(
(template) => {
const matchesCategory =
selectedFilter === ALL_CATEGORY_NAME ||
template.category === selectedFilter ||
(selectedFilter === RECOMMENDED_CATEGORY_NAME && template.objectives?.includes(profile.objective));
const templateName = template.name?.toLowerCase();
const templateDescription = template.description?.toLowerCase();
const searchQuery = templateSearch?.toLowerCase();
const matchesSearch =
templateName?.includes(searchQuery) || templateDescription?.includes(searchQuery);
return matchesCategory && matchesSearch;
}
)
.map((template: Template) => (
<div
onClick={() => {
const newTemplate = replacePresetPlaceholders(template, product);
onTemplateClick(newTemplate);
setActiveTemplate(newTemplate);
}}
key={template.name}
className={cn(
activeTemplate?.name === template.name && "ring-2 ring-slate-400",
"duration-120 group relative cursor-pointer rounded-lg bg-white p-6 shadow transition-all duration-150 hover:scale-105"
)}>
<div className="flex">
<div
className={`rounded border px-1.5 py-0.5 text-xs ${template.category === "Product Experience"
? "border-blue-300 bg-blue-50 text-blue-500"
: template.category === "Exploration"
? "border-pink-300 bg-pink-50 text-pink-500"
: template.category === "Growth"
? "border-orange-300 bg-orange-50 text-orange-500"
: template.category === "Increase Revenue"
? "border-emerald-300 bg-emerald-50 text-emerald-500"
: template.category === "Customer Success"
? "border-violet-300 bg-violet-50 text-violet-500"
: "border-slate-300 bg-slate-50 text-slate-500" // default color
}`}>
{template.category}
</div>
{template.preset.questions.some(
(question) => question.logic && question.logic.length > 0
) && (
<TooltipProvider delayDuration={80}>
<Tooltip>
<TooltipTrigger>
<div>
<SplitIcon className="ml-1.5 h-5 w-5 rounded border border-slate-300 bg-slate-50 p-0.5 text-slate-400" />
</div>
</TooltipTrigger>
<TooltipContent>This survey uses branching logic.</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{filteredTemplates.map((template: Template) => (
<div
onClick={() => {
const newTemplate = replacePresetPlaceholders(template, product);
onTemplateClick(newTemplate);
setActiveTemplate(newTemplate);
}}
key={template.name}
className={cn(
activeTemplate?.name === template.name && "ring-2 ring-slate-400",
"duration-120 group relative cursor-pointer rounded-lg bg-white p-6 shadow transition-all duration-150 hover:scale-105"
)}>
<div className="flex">
<div
className={`rounded border px-1.5 py-0.5 text-xs ${template.category === "Product Experience"
? "border-blue-300 bg-blue-50 text-blue-500"
: template.category === "Exploration"
? "border-pink-300 bg-pink-50 text-pink-500"
: template.category === "Growth"
? "border-orange-300 bg-orange-50 text-orange-500"
: template.category === "Increase Revenue"
? "border-emerald-300 bg-emerald-50 text-emerald-500"
: template.category === "Customer Success"
? "border-violet-300 bg-violet-50 text-violet-500"
: "border-slate-300 bg-slate-50 text-slate-500" // default color
}`}>
{template.category}
</div>
<h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700">{template.name}</h3>
<p className="text-left text-xs text-slate-600">{template.description}</p>
{activeTemplate?.name === template.name && (
<Button
variant="darkCTA"
className="mt-6 px-6 py-3"
disabled={activeTemplate === null}
loading={loading}
onClick={() => addSurvey(activeTemplate)}>
Use this template
</Button>
)}
{template.preset.questions.some(
(question) => question.logic && question.logic.length > 0
) && (
<TooltipProvider delayDuration={80}>
<Tooltip>
<TooltipTrigger>
<div>
<SplitIcon className="ml-1.5 h-5 w-5 rounded border border-slate-300 bg-slate-50 p-0.5 text-slate-400" />
</div>
</TooltipTrigger>
<TooltipContent>This survey uses branching logic.</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
))}
<h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700">{template.name}</h3>
<p className="text-left text-xs text-slate-600">{template.description}</p>
{activeTemplate?.name === template.name && (
<Button
variant="darkCTA"
className="mt-6 px-6 py-3"
disabled={activeTemplate === null}
loading={loading}
onClick={() => addSurvey(activeTemplate)}>
Use this template
</Button>
)}
</div>
))}
</div>
</main>
);