mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-06 11:20:56 -05:00
chore: added symbol for welcome card (#1702)
This commit is contained in:
Dhruwang Jariwala
committed by
GitHub
GitHub
parent
31853411f3
commit
7c09b66d53
@@ -1,18 +1,41 @@
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../Tooltip";
|
||||
import { ChevronDoubleDownIcon, XCircleIcon } from "@heroicons/react/20/solid";
|
||||
import { ChevronDoubleDownIcon, XCircleIcon, CheckCircleIcon } from "@heroicons/react/20/solid";
|
||||
import { TSurveyQuestion } from "@formbricks/types/surveys";
|
||||
|
||||
interface QuestionSkipProps {
|
||||
skippedQuestions: string[] | undefined;
|
||||
status: string;
|
||||
questions: TSurveyQuestion[];
|
||||
isFirstQuestionAnswered?: boolean;
|
||||
}
|
||||
|
||||
export default function QuestionSkip({ skippedQuestions, status, questions }: QuestionSkipProps) {
|
||||
export default function QuestionSkip({
|
||||
skippedQuestions,
|
||||
status,
|
||||
questions,
|
||||
isFirstQuestionAnswered,
|
||||
}: QuestionSkipProps) {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{skippedQuestions && (
|
||||
<div className="flex w-full p-2 text-sm text-slate-400">
|
||||
<div className="my-2 flex w-full px-2 text-sm text-slate-400">
|
||||
{status === "welcomeCard" && (
|
||||
<div className="mb-2 flex">
|
||||
{
|
||||
<div
|
||||
className={`relative flex ${
|
||||
isFirstQuestionAnswered ? "h-[100%]" : "h-[200%]"
|
||||
} w-0.5 items-center justify-center`}
|
||||
style={{
|
||||
background:
|
||||
"repeating-linear-gradient(rgb(148, 163, 184), rgb(148, 163, 184) 5px, transparent 5px, transparent 8px)", // adjust the values to fit your design
|
||||
}}>
|
||||
<CheckCircleIcon className="p-0.25 absolute top-0 w-[1.5rem] min-w-[1.5rem] rounded-full bg-white text-slate-400" />
|
||||
</div>
|
||||
}
|
||||
<div className=" ml-6 flex flex-col text-slate-700">Welcome Card</div>
|
||||
</div>
|
||||
)}
|
||||
{status === "skipped" && (
|
||||
<div className="flex">
|
||||
<div
|
||||
@@ -73,6 +96,6 @@ export default function QuestionSkip({ skippedQuestions, status, questions }: Qu
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -80,6 +80,7 @@ export default function SingleResponseCard({
|
||||
let temp: string[] = [];
|
||||
const { membershipRole, isLoading, error } = useMembershipRole(environmentId);
|
||||
const { isViewer } = getAccessFlags(membershipRole);
|
||||
const isFirstQuestionAnswered = response.data[survey.questions[0].id] ? true : false;
|
||||
|
||||
function isValidValue(value: any) {
|
||||
return (
|
||||
@@ -274,63 +275,73 @@ export default function SingleResponseCard({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6 rounded-b-lg bg-white p-6">
|
||||
{survey.questions.map((question) => {
|
||||
const skipped = skippedQuestions.find((skippedQuestionElement) =>
|
||||
skippedQuestionElement.includes(question.id)
|
||||
);
|
||||
<div className="rounded-b-lg bg-white p-6">
|
||||
{survey.welcomeCard.enabled && (
|
||||
<QuestionSkip
|
||||
skippedQuestions={[]}
|
||||
questions={survey.questions}
|
||||
status={"welcomeCard"}
|
||||
isFirstQuestionAnswered={isFirstQuestionAnswered}
|
||||
/>
|
||||
)}
|
||||
<div className="space-y-6">
|
||||
{survey.questions.map((question) => {
|
||||
const skipped = skippedQuestions.find((skippedQuestionElement) =>
|
||||
skippedQuestionElement.includes(question.id)
|
||||
);
|
||||
|
||||
// If found, remove it from the list
|
||||
if (skipped) {
|
||||
skippedQuestions = skippedQuestions.filter((item) => item !== skipped);
|
||||
}
|
||||
// If found, remove it from the list
|
||||
if (skipped) {
|
||||
skippedQuestions = skippedQuestions.filter((item) => item !== skipped);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={`${question.id}`}>
|
||||
{isValidValue(response.data[question.id]) ? (
|
||||
<p className="text-sm text-slate-500">{question.headline}</p>
|
||||
) : (
|
||||
<QuestionSkip
|
||||
skippedQuestions={skipped}
|
||||
questions={survey.questions}
|
||||
status={
|
||||
response.finished ||
|
||||
(skippedQuestions.length > 0 &&
|
||||
!skippedQuestions[skippedQuestions.length - 1].includes(question.id))
|
||||
? "skipped"
|
||||
: "aborted"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{typeof response.data[question.id] !== "object" ? (
|
||||
question.type === TSurveyQuestionType.Rating ? (
|
||||
<div>
|
||||
<RatingResponse
|
||||
scale={question.scale}
|
||||
answer={response.data[question.id]}
|
||||
range={question.range}
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<div key={`${question.id}`}>
|
||||
{isValidValue(response.data[question.id]) ? (
|
||||
<p className="text-sm text-slate-500">{question.headline}</p>
|
||||
) : (
|
||||
<QuestionSkip
|
||||
skippedQuestions={skipped}
|
||||
questions={survey.questions}
|
||||
status={
|
||||
response.finished ||
|
||||
(skippedQuestions.length > 0 &&
|
||||
!skippedQuestions[skippedQuestions.length - 1].includes(question.id))
|
||||
? "skipped"
|
||||
: "aborted"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{typeof response.data[question.id] !== "object" ? (
|
||||
question.type === TSurveyQuestionType.Rating ? (
|
||||
<div>
|
||||
<RatingResponse
|
||||
scale={question.scale}
|
||||
answer={response.data[question.id]}
|
||||
range={question.range}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p className="ph-no-capture my-1 font-semibold text-slate-700">
|
||||
{response.data[question.id]}
|
||||
</p>
|
||||
)
|
||||
) : question.type === TSurveyQuestionType.PictureSelection ? (
|
||||
<PictureSelectionResponse
|
||||
choices={question.choices}
|
||||
selected={response.data[question.id]}
|
||||
/>
|
||||
) : question.type === TSurveyQuestionType.FileUpload ? (
|
||||
<FileUploadResponse selected={response.data[question.id]} />
|
||||
) : (
|
||||
<p className="ph-no-capture my-1 font-semibold text-slate-700">
|
||||
{response.data[question.id]}
|
||||
{handleArray(response.data[question.id])}
|
||||
</p>
|
||||
)
|
||||
) : question.type === TSurveyQuestionType.PictureSelection ? (
|
||||
<PictureSelectionResponse
|
||||
choices={question.choices}
|
||||
selected={response.data[question.id]}
|
||||
/>
|
||||
) : question.type === TSurveyQuestionType.FileUpload ? (
|
||||
<FileUploadResponse selected={response.data[question.id]} />
|
||||
) : (
|
||||
<p className="ph-no-capture my-1 font-semibold text-slate-700">
|
||||
{handleArray(response.data[question.id])}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{hasHiddenFieldsEnabled && hasFieldIds && (
|
||||
<div className="mt-6 flex flex-col gap-6">
|
||||
{fieldIds.map((field) => {
|
||||
@@ -344,7 +355,7 @@ export default function SingleResponseCard({
|
||||
</div>
|
||||
)}
|
||||
{response.finished && (
|
||||
<div className="flex">
|
||||
<div className="mt-4 flex">
|
||||
<CheckCircleIcon className="h-6 w-6 text-slate-400" />
|
||||
<p className="mx-2 rounded-lg bg-slate-100 px-2 text-slate-700">Completed</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user