[web] interviews/study-list: improve study list experience

apps/web/src/components/common/ConfirmationDialog.tsx

@@ -8,6 +8,7 @@ import Dialog from '~/components/ui/Dialog';
 import { textVariants } from '../ui/Text';
 
 type Props = Readonly<{
+  cancelButtonLabel?: string;
   children?: ReactNode;
   confirmButtonLabel?: string;
   confirmButtonVariant?: ButtonVariant;
@@ -22,6 +23,7 @@ type Props = Readonly<{
 }>;
 
 export default function ConfirmationDialog({
+  cancelButtonLabel,
   children,
   confirmButtonLabel,
   confirmButtonVariant = 'primary',
@@ -60,11 +62,14 @@ export default function ConfirmationDialog({
         showCancelButton ? (
           <Button
             isDisabled={isLoading}
-            label={intl.formatMessage({
-              defaultMessage: 'Cancel',
-              description: 'Cancel button label in confirmation dialog',
-              id: 'ldxi7D',
-            })}
+            label={
+              cancelButtonLabel ??
+              intl.formatMessage({
+                defaultMessage: 'Cancel',
+                description: 'Cancel button label in confirmation dialog',
+                id: 'ldxi7D',
+              })
+            }
             size="md"
             variant="secondary"
             onClick={() => onCancel?.()}

apps/web/src/components/interviews/questions/listings/learning/QuestionsStudyList.tsx

@@ -202,6 +202,17 @@ export default function QuestionsStudyList({
         />
       </Section>
       <ConfirmationDialog
+        cancelButtonLabel={intl.formatMessage({
+          defaultMessage: 'Proceed without tracking',
+          description: 'Cancel button label for session progress tracking',
+          id: '29rLgw',
+        })}
+        confirmButtonLabel={intl.formatMessage({
+          defaultMessage: 'Start tracking',
+          description:
+            'Confirmation button label for session progress tracking',
+          id: 'OV17LW',
+        })}
         isDisabled={startSessionMutation.isLoading}
         isLoading={startSessionMutation.isLoading}
         isShown={startSessionDialog.show}
@@ -235,9 +246,9 @@ export default function QuestionsStudyList({
           );
         }}>
         <FormattedMessage
-          defaultMessage="Start tracking your progress on this question list?"
+          defaultMessage="You have to start the session before your progress for this list can be tracked. Start tracking your progress on this question list?"
           description="Confirmation text for start progress tracking"
-          id="fvvmHT"
+          id="XCg8lD"
         />
       </ConfirmationDialog>
     </div>

apps/web/src/components/interviews/questions/listings/learning/QuestionsStudyListSlideOut.tsx

@@ -695,18 +695,34 @@ export default function QuestionsStudyListSlideOut({
           icon={RiFilterLine}
           isDisabled={isDisabled}
           isLabelHidden={isMobile}
-          label={studyList != null ? studyList.name : 'Question list'}
+          label={
+            studyList != null
+              ? studyList.name
+              : intl.formatMessage({
+                  defaultMessage: 'Question list',
+                  description: 'Questions list',
+                  id: '5lRIfw',
+                })
+          }
           size="xs"
           variant="secondary"
           onClick={() => setIsShown(true)}>
-          <div className="flex items-center gap-3">
-            <span>{studyList != null ? studyList.name : 'Question list'}</span>
-            <Badge
-              label={`${currentQuestionPosition}/${processedQuestions.length}`}
-              size="xs"
-              variant="neutral"
-            />
-          </div>
+          {studyList == null ? (
+            intl.formatMessage({
+              defaultMessage: 'Question list',
+              description: 'Questions list',
+              id: '5lRIfw',
+            })
+          ) : (
+            <div className="flex items-center gap-3">
+              <span>{studyList.name}</span>
+              <Badge
+                label={`${currentQuestionPosition}/${processedQuestions.length}`}
+                size="xs"
+                variant="neutral"
+              />
+            </div>
+          )}
         </Button>
       }
       onClose={onClose}>

apps/web/src/locales/en-US.json

@@ -583,6 +583,10 @@
     "defaultMessage": "Next challenge:",
     "description": "Label for next challenge for skill plan on project submission success page"
   },
+  "29rLgw": {
+    "defaultMessage": "Proceed without tracking",
+    "description": "Cancel button label for session progress tracking"
+  },
   "2BOlBd": {
     "defaultMessage": "Your motivations",
     "description": "Title of projects onboarding motivations page"
@@ -3823,6 +3827,10 @@
     "defaultMessage": "Resubscribe to access",
     "description": "Title for a premium project paywall"
   },
+  "OV17LW": {
+    "defaultMessage": "Start tracking",
+    "description": "Confirmation button label for session progress tracking"
+  },
   "OWKf+S": {
     "defaultMessage": "Overview",
     "description": "Overview of behavioral interview"
@@ -5231,6 +5239,10 @@
     "defaultMessage": "Search Vue interview questions",
     "description": "Placeholder for search input of Vue question list"
   },
+  "XCg8lD": {
+    "defaultMessage": "You have to start the session before your progress for this list can be tracked. Start tracking your progress on this question list?",
+    "description": "Confirmation text for start progress tracking"
+  },
   "XD52zM": {
     "defaultMessage": "More",
     "description": "Label for \"More\" button in pagination"
@@ -6575,10 +6587,6 @@
     "defaultMessage": "Back to study plans",
     "description": "Link text to navigate to study plans page"
   },
-  "fvvmHT": {
-    "defaultMessage": "Start tracking your progress on this question list?",
-    "description": "Confirmation text for start progress tracking"
-  },
   "fxfae3": {
     "defaultMessage": "If you're stuck, clarify any doubts within the discussion forums in Step 3's. If you need answers urgently for a critical issue, email as at <link>support@greatfrontend.com</link>.",
     "description": "FAQ answer for projects platform"