Fixed Source of Question type & icon

This commit is contained in:
Aditya @ArchLinux
2023-10-02 10:40:58 +05:30
parent 0892bbd898
commit dab6b86717
6 changed files with 31 additions and 23 deletions

View File

@@ -3,7 +3,7 @@ import { TSurveyCTAQuestion } from "@formbricks/types/v1/surveys";
import { ProgressBar } from "@formbricks/ui";
import { InboxStackIcon } from "@heroicons/react/24/solid";
import { useMemo } from "react";
import { CursorArrowRippleIcon } from "@heroicons/react/24/solid";
import { questionTypes } from "@/lib/questions";
interface CTASummaryProps {
questionSummary: QuestionSummary<TSurveyCTAQuestion>;
@@ -15,6 +15,8 @@ interface ChoiceResult {
}
export default function CTASummary({ questionSummary }: CTASummaryProps) {
const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
const ctr: ChoiceResult = useMemo(() => {
const clickedAbs = questionSummary.responses.filter((response) => response.value === "clicked").length;
const count = questionSummary.responses.length;
@@ -35,8 +37,8 @@ export default function CTASummary({ questionSummary }: CTASummaryProps) {
</div>
<div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
<div className=" flex items-center rounded-lg bg-slate-100 p-2 ">
<CursorArrowRippleIcon className="mr-2 h-4 w-4 " />
Call-to-Action
{questionTypeInfo && <questionTypeInfo.icon className="mr-2 h-4 w-4 " />}
{questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"}
</div>
<div className=" flex items-center rounded-lg bg-slate-100 p-2">
<InboxStackIcon className="mr-2 h-4 w-4 " />

View File

@@ -3,7 +3,7 @@ import { ProgressBar } from "@formbricks/ui";
import { InboxStackIcon } from "@heroicons/react/24/solid";
import { useMemo } from "react";
import { TSurveyConsentQuestion } from "@formbricks/types/v1/surveys";
import { CheckIcon } from "@heroicons/react/24/solid";
import { questionTypes } from "@/lib/questions";
interface ConsentSummaryProps {
questionSummary: QuestionSummary<TSurveyConsentQuestion>;
@@ -18,6 +18,8 @@ interface ChoiceResult {
}
export default function ConsentSummary({ questionSummary }: ConsentSummaryProps) {
const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
const ctr: ChoiceResult = useMemo(() => {
const total = questionSummary.responses.length;
const clickedAbs = questionSummary.responses.filter((response) => response.value !== "dismissed").length;
@@ -43,8 +45,8 @@ export default function ConsentSummary({ questionSummary }: ConsentSummaryProps)
</div>
<div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
<div className=" flex items-center rounded-lg bg-slate-100 p-2">
<CheckIcon className="mr-2 h-4 w-4 " />
Consent
{questionTypeInfo && <questionTypeInfo.icon className="mr-2 h-4 w-4 " />}
{questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"}
</div>
<div className=" flex items-center rounded-lg bg-slate-100 p-2">
<InboxStackIcon className="mr-2 h-4 w-4 " />

View File

@@ -1,7 +1,7 @@
import { QuestionType } from "@formbricks/types/questions";
import type { QuestionSummary } from "@formbricks/types/responses";
import { PersonAvatar, ProgressBar } from "@formbricks/ui";
import { InboxStackIcon, QueueListIcon, ListBulletIcon } from "@heroicons/react/24/solid";
import { InboxStackIcon } from "@heroicons/react/24/solid";
import { useMemo } from "react";
import Link from "next/link";
import { truncate } from "@/lib/utils";
@@ -9,6 +9,7 @@ import {
TSurveyMultipleChoiceMultiQuestion,
TSurveyMultipleChoiceSingleQuestion,
} from "@formbricks/types/v1/surveys";
import { questionTypes } from "@/lib/questions";
interface MultipleChoiceSummaryProps {
questionSummary: QuestionSummary<TSurveyMultipleChoiceMultiQuestion | TSurveyMultipleChoiceSingleQuestion>;
@@ -38,6 +39,8 @@ export default function MultipleChoiceSummary({
}: MultipleChoiceSummaryProps) {
const isSingleChoice = questionSummary.question.type === QuestionType.MultipleChoiceSingle;
const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
const results: ChoiceResult[] = useMemo(() => {
if (!("choices" in questionSummary.question)) return [];
@@ -132,14 +135,8 @@ export default function MultipleChoiceSummary({
</div>
<div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
<div className="flex items-center rounded-lg bg-slate-100 p-2">
{isSingleChoice ? (
<QueueListIcon className="mr-2 h-4 w-4" />
) : (
<ListBulletIcon className="mr-2 h-4 w-4" />
)}
{isSingleChoice
? "Multiple-Choice Single Select Question"
: "Multiple-Choice Multi Select Question"}
{questionTypeInfo && <questionTypeInfo.icon className="mr-2 h-4 w-4 " />}
Multiple-Choice {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
</div>
<div className="flex items-center rounded-lg bg-slate-100 p-2">
<InboxStackIcon className="mr-2 h-4 w-4 " />

View File

@@ -3,7 +3,7 @@ import { TSurveyNPSQuestion } from "@formbricks/types/v1/surveys";
import { HalfCircle, ProgressBar } from "@formbricks/ui";
import { InboxStackIcon } from "@heroicons/react/24/solid";
import { useMemo } from "react";
import { PresentationChartBarIcon } from "@heroicons/react/24/solid";
import { questionTypes } from "@/lib/questions";
interface NPSSummaryProps {
questionSummary: QuestionSummary<TSurveyNPSQuestion>;
@@ -29,6 +29,8 @@ export default function NPSSummary({ questionSummary }: NPSSummaryProps) {
return result || 0;
};
const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
const result: Result = useMemo(() => {
let data = {
promoters: 0,
@@ -83,7 +85,8 @@ export default function NPSSummary({ questionSummary }: NPSSummaryProps) {
</div>
<div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
<div className="flex items-center rounded-lg bg-slate-100 p-2">
<PresentationChartBarIcon className="mr-2 h-4 w-4 " /> Net Promoter Score (NPS)
{questionTypeInfo && <questionTypeInfo.icon className="mr-2 h-4 w-4 " />}
{questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"}
</div>
<div className=" flex items-center rounded-lg bg-slate-100 p-2">
<InboxStackIcon className="mr-2 h-4 w-4 " />

View File

@@ -5,7 +5,7 @@ import { TSurveyOpenTextQuestion } from "@formbricks/types/v1/surveys";
import { PersonAvatar } from "@formbricks/ui";
import { InboxStackIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/solid";
import { questionTypes } from "@/lib/questions";
interface OpenTextSummaryProps {
questionSummary: QuestionSummary<TSurveyOpenTextQuestion>;
@@ -17,6 +17,8 @@ function findEmail(person) {
}
export default function OpenTextSummary({ questionSummary, environmentId }: OpenTextSummaryProps) {
const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
return (
<div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
<div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
@@ -27,8 +29,8 @@ export default function OpenTextSummary({ questionSummary, environmentId }: Open
</div>
<div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
<div className="flex items-center rounded-lg bg-slate-100 p-2 ">
<ChatBubbleBottomCenterTextIcon className="mr-2 h-4 w-4" />
Open Text Question
{questionTypeInfo && <questionTypeInfo.icon className="mr-2 h-4 w-4 " />}
{questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
</div>
<div className=" flex items-center rounded-lg bg-slate-100 p-2">
<InboxStackIcon className="mr-2 h-4 w-4" />

View File

@@ -5,7 +5,7 @@ import { useMemo } from "react";
import { QuestionType } from "@formbricks/types/questions";
import { TSurveyRatingQuestion } from "@formbricks/types/v1/surveys";
import { RatingResponse } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/RatingResponse";
import { StarIcon } from "@heroicons/react/24/solid";
import { questionTypes } from "@/lib/questions";
interface RatingSummaryProps {
questionSummary: QuestionSummary<TSurveyRatingQuestion>;
@@ -18,6 +18,8 @@ interface ChoiceResult {
}
export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
const results: ChoiceResult[] = useMemo(() => {
if (questionSummary.question.type !== QuestionType.Rating) return [];
// build a dictionary of choices
@@ -85,8 +87,8 @@ export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
</div>
<div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
<div className="flex items-center rounded-lg bg-slate-100 p-2">
<StarIcon className="mr-2 h-4 w-4 " />
Rating Question
{questionTypeInfo && <questionTypeInfo.icon className="mr-2 h-4 w-4 " />}
{questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
</div>
<div className="flex items-center rounded-lg bg-slate-100 p-2">
<InboxStackIcon className="mr-2 h-4 w-4 " />