feat: hide progress bar toggle (#1883)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx

@@ -21,7 +21,7 @@ interface StylingCardProps {
 
 export default function StylingCard({ localSurvey, setLocalSurvey, colours }: StylingCardProps) {
   const [open, setOpen] = useState(false);
-
+  const progressBarHidden = localSurvey.styling?.hideProgressBar ?? false;
   const { type, productOverwrites, styling } = localSurvey;
   const { brandColor, clickOutsideClose, darkOverlay, placement, highlightBorderColor } =
     productOverwrites ?? {};
@@ -175,6 +175,16 @@ export default function StylingCard({ localSurvey, setLocalSurvey, colours }: St
     });
   };
 
+  const toggleProgressBarVisibility = () => {
+    setLocalSurvey({
+      ...localSurvey,
+      styling: {
+        ...localSurvey.styling,
+        hideProgressBar: !progressBarHidden,
+      },
+    });
+  };
+
   return (
     <Collapsible.Root
       open={open}
@@ -342,6 +352,23 @@ export default function StylingCard({ localSurvey, setLocalSurvey, colours }: St
               )}
             </div>
           )}
+          <div className="p-3">
+            <div className="ml-2 flex items-center space-x-1">
+              <Switch
+                id="hideProgressBar"
+                checked={progressBarHidden}
+                onCheckedChange={toggleProgressBarVisibility}
+              />
+              <Label htmlFor="hideProgressBar" className="cursor-pointer">
+                <div className="ml-2">
+                  <h3 className="text-sm font-semibold text-slate-700">Hide Progress Bar</h3>
+                  <p className="text-xs font-normal text-slate-500">
+                    Disable the visibility of survey progress
+                  </p>
+                </div>
+              </Label>
+            </div>
+          </div>
         </div>
       </Collapsible.CollapsibleContent>
     </Collapsible.Root>

packages/surveys/src/components/general/Survey.tsx

@@ -35,6 +35,7 @@ export function Survey({
   const currentQuestionIndex = survey.questions.findIndex((q) => q.id === questionId);
   const currentQuestion = survey.questions[currentQuestionIndex];
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const showProgressBar = !survey.styling?.hideProgressBar;
   const [ttc, setTtc] = useState<TResponseTtc>({});
   useEffect(() => {
     if (activeQuestionId === "hidden") return;
@@ -187,7 +188,7 @@ export function Survey({
           </div>
           <div className="mt-8">
             {isBrandingEnabled && <FormbricksBranding />}
-            <ProgressBar survey={survey} questionId={questionId} />
+            {showProgressBar && <ProgressBar survey={survey} questionId={questionId} />}
           </div>
         </div>
       </AutoCloseWrapper>

packages/types/surveys.ts

@@ -62,6 +62,7 @@ export type TSurveyStylingBackground = z.infer<typeof ZSurveyStylingBackground>;
 
 export const ZSurveyStyling = z.object({
   background: ZSurveyStylingBackground.nullish(),
+  hideProgressBar: z.boolean().nullish(),
 });
 
 export type TSurveyStyling = z.infer<typeof ZSurveyStyling>;