Feature/Hide progress bar

Co-authored-by: Ryczko <[email protected]>
Ryczko · Jan 28, 2024 · 9a888cc · 9a888cc · vercel · Jan 28, 2024
1 parent b9c147f
commit 9a888cc
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 16 deletions.
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -29,7 +29,8 @@
   "surveyOptionsModal": {
     "title": "Display options",
     "OneQuestionPerStep": "One question per step",
-    "DisplayTitle": "Display title"
+    "DisplayTitle": "Display title",
+    "HideProgressBar": "Hide progress bar"
   },
   "questionType": {
     "question": "Question",

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -73,6 +73,7 @@ model Survey {
   answers     Answer[]
   oneQuestionPerStep Boolean
   displayTitle Boolean
+  hideProgressBar Boolean?
   accentColor String?
 
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)

diff --git a/src/features/surveys/components/SurveyOptionsModal/SurveyOptionsModal.tsx b/src/features/surveys/components/SurveyOptionsModal/SurveyOptionsModal.tsx
@@ -26,6 +26,18 @@ export default function SurveyOptionsModalModal({
       title={t('surveyOptionsModal.title')}
       content={
         <div className="mb-2 mt-4">
+          <Toggle
+            isEnabled={surveyOptions.displayTitle}
+            classNames="gap-2 mb-4"
+            testId="display-title-toggle"
+            onToggle={() => {
+              updateOptions('displayTitle', !surveyOptions.displayTitle);
+            }}
+            label={t('surveyOptionsModal.DisplayTitle')}
+          />
+
+          <hr className="my-4" />
+
           <Toggle
             isEnabled={surveyOptions.oneQuestionPerStep}
             classNames="gap-2"
@@ -35,18 +47,28 @@ export default function SurveyOptionsModalModal({
                 'oneQuestionPerStep',
                 !surveyOptions.oneQuestionPerStep
               );
+
+              updateOptions('hideProgressBar', false);
             }}
             label={t('surveyOptionsModal.OneQuestionPerStep')}
           />
-          <Toggle
-            isEnabled={surveyOptions.displayTitle}
-            classNames="gap-2 mt-4"
-            testId="display-title-toggle"
-            onToggle={() => {
-              updateOptions('displayTitle', !surveyOptions.displayTitle);
-            }}
-            label={t('surveyOptionsModal.DisplayTitle')}
-          />
+
+          {surveyOptions.oneQuestionPerStep ? (
+            <Toggle
+              isEnabled={surveyOptions.hideProgressBar}
+              classNames="gap-2 mt-4"
+              testId="display-title-toggle"
+              onToggle={() => {
+                updateOptions(
+                  'hideProgressBar',
+                  !surveyOptions.hideProgressBar
+                );
+              }}
+              label={t('surveyOptionsModal.HideProgressBar')}
+            />
+          ) : (
+            <></>
+          )}
 
           <hr className="my-4" />
           <div className="flex items-center gap-3 text-sm">

diff --git a/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx b/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx
@@ -41,6 +41,7 @@ export default function PreviewPanel() {
               id: '',
               displayTitle: surveyOptions.displayTitle,
               oneQuestionPerStep: surveyOptions.oneQuestionPerStep,
+              hideProgressBar: surveyOptions.hideProgressBar,
               userId: '',
               title,
               accentColor: surveyOptions.accentColor,

diff --git a/...atures/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts b/...atures/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts
@@ -23,6 +23,7 @@ export interface Question {
 export interface SurveyOptions {
   oneQuestionPerStep: boolean;
   displayTitle: boolean;
+  hideProgressBar: boolean;
   accentColor: string;
 }
 
@@ -44,6 +45,7 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
   const [surveyOptions, setSurveyOptions] = useState<SurveyOptions>({
     oneQuestionPerStep: initialData?.oneQuestionPerStep ?? true,
     displayTitle: initialData?.displayTitle ?? true,
+    hideProgressBar: initialData?.hideProgressBar ?? false,
     accentColor: initialData?.accentColor ?? '#C7D2FE',
   });
 
@@ -245,6 +247,7 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
         title,
         oneQuestionPerStep: surveyOptions.oneQuestionPerStep,
         displayTitle: surveyOptions.displayTitle,
+        hideProgressBar: surveyOptions.hideProgressBar,
         accentColor: surveyOptions.accentColor,
         questions: questions.map((question) => ({
           title: question.title,
@@ -281,6 +284,7 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
         title,
         oneQuestionPerStep: surveyOptions.oneQuestionPerStep,
         displayTitle: surveyOptions.displayTitle,
+        hideProgressBar: surveyOptions.hideProgressBar,
         accentColor: surveyOptions.accentColor,
         questions: questions.map((question) => ({
           id: question.id,

diff --git a/src/features/surveys/features/SurveyDisplay/components/OneQuestionView/OneQuestionView.tsx b/src/features/surveys/features/SurveyDisplay/components/OneQuestionView/OneQuestionView.tsx
@@ -17,12 +17,16 @@ export default function OneQuestionView() {
       {formData.questions.length > 0 && (
         <>
           <AnswersComponentFactory questionIndex={activeQuestionIndex} />
-          <Progressbar
-            currentStep={activeQuestionIndex + 1}
-            totalSteps={formData?.questions.length}
-            isSubmitted={isAnswering}
-            accentColor={formData?.accentColor}
-          />
+          {!formData.hideProgressBar ? (
+            <Progressbar
+              currentStep={activeQuestionIndex + 1}
+              totalSteps={formData?.questions.length}
+              isSubmitted={isAnswering}
+              accentColor={formData?.accentColor}
+            />
+          ) : (
+            <></>
+          )}
         </>
       )}
     </>

diff --git a/src/pages/api/survey/[id].ts b/src/pages/api/survey/[id].ts
@@ -136,6 +136,7 @@ export default async function handler(
           oneQuestionPerStep,
           displayTitle,
           accentColor,
+          hideProgressBar,
         } = req.body as SurveyData;
         if (!isSurveyValid(req.body)) {
           return res.status(400).end();
@@ -191,6 +192,7 @@ export default async function handler(
             oneQuestionPerStep,
             displayTitle,
             accentColor,
+            hideProgressBar,
           },
         });
 

diff --git a/src/pages/api/survey/index.ts b/src/pages/api/survey/index.ts
@@ -17,6 +17,7 @@ export interface SurveyData {
   questions: Question[];
   oneQuestionPerStep: boolean;
   displayTitle: boolean;
+  hideProgressBar: boolean;
   accentColor: string;
 }
 
@@ -77,6 +78,7 @@ export default async function handler(
           questions,
           oneQuestionPerStep,
           displayTitle,
+          hideProgressBar,
           accentColor,
         } = req.body as SurveyData;
 
@@ -93,6 +95,7 @@ export default async function handler(
             isActive: true,
             oneQuestionPerStep,
             displayTitle,
+            hideProgressBar,
             questions: {
               create: questions.map((question, index) => ({
                 type: question.type,