From 7d94861db91dbd5ecef90a860ffe0ef8da9e4470 Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Mon, 13 Jan 2025 14:22:49 +0530
Subject: [PATCH] fix: progress bar (#4589)

---
 .../surveys/src/components/general/progress-bar.tsx | 11 ++++++-----
 .../surveys/src/components/general/welcome-card.tsx |  4 +++-
 packages/surveys/src/lib/utils.ts                   | 13 ++++++++-----
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/surveys/src/components/general/progress-bar.tsx b/packages/surveys/src/components/general/progress-bar.tsx
index 29c9cdef98..703897507b 100644
--- a/packages/surveys/src/components/general/progress-bar.tsx
+++ b/packages/surveys/src/components/general/progress-bar.tsx
@@ -17,20 +17,21 @@ export function ProgressBar({ survey, questionId }: ProgressBarProps) {
   const endingCardIds = useMemo(() => survey.endings.map((ending) => ending.id), [survey.endings]);
 
   const calculateProgress = useCallback(
-    (index: number, questionsLength: number) => {
+    (index: number) => {
+      let totalCards = survey.questions.length;
+      if (endingCardIds.length > 0) totalCards += 1;
       let idx = index;
 
-      if (questionsLength === 0) return 0;
       if (index === -1) idx = 0;
 
-      const elementIdx = calculateElementIdx(survey, idx);
-      return elementIdx / questionsLength;
+      const elementIdx = calculateElementIdx(survey, idx, totalCards);
+      return elementIdx / totalCards;
     },
     [survey]
   );
 
   const progressArray = useMemo(() => {
-    return survey.questions.map((_, index) => calculateProgress(index, survey.questions.length));
+    return survey.questions.map((_, index) => calculateProgress(index));
   }, [calculateProgress, survey]);
 
   const progressValue = useMemo(() => {
diff --git a/packages/surveys/src/components/general/welcome-card.tsx b/packages/surveys/src/components/general/welcome-card.tsx
index 2e21e7996b..72989c375b 100644
--- a/packages/surveys/src/components/general/welcome-card.tsx
+++ b/packages/surveys/src/components/general/welcome-card.tsx
@@ -77,7 +77,9 @@ export function WelcomeCard({
   variablesData,
 }: WelcomeCardProps) {
   const calculateTimeToComplete = () => {
-    let idx = calculateElementIdx(survey, 0);
+    let totalCards = survey.questions.length;
+    if (survey.endings.length > 0) totalCards += 1;
+    let idx = calculateElementIdx(survey, 0, totalCards);
     if (idx === 0.5) {
       idx = 1;
     }
diff --git a/packages/surveys/src/lib/utils.ts b/packages/surveys/src/lib/utils.ts
index d8a66b515e..92f6a0f11b 100644
--- a/packages/surveys/src/lib/utils.ts
+++ b/packages/surveys/src/lib/utils.ts
@@ -61,12 +61,15 @@ export const getShuffledChoicesIds = (
   return shuffledChoices.map((choice) => choice.id);
 };
 
-export const calculateElementIdx = (survey: TJsEnvironmentStateSurvey, currentQustionIdx: number): number => {
+export const calculateElementIdx = (
+  survey: TJsEnvironmentStateSurvey,
+  currentQustionIdx: number,
+  totalCards: number
+): number => {
   const currentQuestion = survey.questions[currentQustionIdx];
-  const surveyLength = survey.questions.length;
-  const middleIdx = Math.floor(surveyLength / 2);
+  const middleIdx = Math.floor(totalCards / 2);
   const possibleNextQuestions = getPossibleNextQuestions(currentQuestion);
-
+  const endingCardIds = survey.endings.map((ending) => ending.id);
   const getLastQuestionIndex = () => {
     const lastQuestion = survey.questions
       .filter((q) => possibleNextQuestions.includes(q.id))
@@ -79,7 +82,7 @@ export const calculateElementIdx = (survey: TJsEnvironmentStateSurvey, currentQu
   const lastprevQuestionIdx = getLastQuestionIndex();
 
   if (lastprevQuestionIdx > 0) elementIdx = Math.min(middleIdx, lastprevQuestionIdx - 1);
-  if (possibleNextQuestions.includes("end")) elementIdx = middleIdx;
+  if (possibleNextQuestions.some((id) => endingCardIds.includes(id))) elementIdx = middleIdx;
   return elementIdx;
 };