odaptos_design_system 2.0.13 → 2.0.14

package/src/Molecules/Interviews/SelfProtocolManager.tsx

@@ -1,227 +1,227 @@
-import React, { useRef, useEffect, HTMLAttributes } from 'react';
-import styles from './SelfProtocolManager.modules.scss';
-import {
-  Text,
-  WelcomeMessage,
-  EndRecording,
-  SusExplanation,
-  TvIcon,
-  SendIcon,
-} from '../..';
-import Grid from '@mui/material/Grid';
-import SelfProtocolTaskContainer from './SelfPrortocolTaskContainer';
-
-interface Texts {
-  generalTitle: string;
-  welcomeMessageTitle: string;
-  welcomeMessageDescription: string;
-  screenShareTitle: string;
-  screenShareDescription: string;
-  screenShareCTA: string;
-  startNowCTA: string;
-  sendScenarioCTA: string;
-  nextTaskCTA: string;
-  endOfScenarioTitle: string;
-  endOfScenarioDescription: string;
-  endOfScenarioCTA: string;
-  stopRecTitle: string;
-  stopRecDescription: string;
-  stopRecCTA: string;
-  SusExplanationTitle: string;
-  SusExplanationDescription: string;
-}
-
-export interface SelfProtocolManagerProps
-  extends HTMLAttributes<HTMLDivElement> {
-  texts: Texts;
-  className?: string;
-  customScrollingClassname?: string;
-  customContentClassname?: string;
-  tasks: any[];
-  idsTasksAlreadySent: string[];
-  currentTask?: any;
-  disableAllTasks?: boolean;
-  areAllTasksSend?: boolean;
-  isLastScenario?: boolean;
-  isRecordingFinished?: boolean;
-  isSus: boolean;
-  isUserSharingScreen: boolean;
-  isScreenShareMessageDisplayed?: boolean;
-  startScreenSharing: () => void;
-  startInterview: (task: any) => void;
-  sendTask: (task: any) => void;
-  stopRecording: () => void;
-  onClickFinishScenario: () => void;
-}
-
-export const SelfProtocolManager = ({
-  texts,
-  className,
-  customScrollingClassname,
-  customContentClassname,
-  tasks,
-  idsTasksAlreadySent,
-  currentTask,
-  disableAllTasks,
-  areAllTasksSend,
-  isLastScenario,
-  isRecordingFinished,
-  isSus,
-  isUserSharingScreen,
-  isScreenShareMessageDisplayed = true,
-  startScreenSharing,
-  startInterview,
-  sendTask,
-  stopRecording,
-  onClickFinishScenario,
-  ...props
-}: SelfProtocolManagerProps) => {
-  const getTaskTitle = (task: { type: string; index: number }): string => {
-    let taskType = '';
-    if (task.type === 'task') {
-      taskType = 'Task';
-    } else if (task.type === 'question') {
-      taskType = 'Question';
-    } else {
-      taskType = 'Scenario';
-    }
-    return `${taskType} #${task.index}`; //Task #1, Question #2, Scenario #3
-  };
-
-  const getIsTaskDisabled = (task: { _id: string }): boolean => {
-    if (
-      idsTasksAlreadySent.includes(task._id) &&
-      currentTask && currentTask._id !== task._id
-    ) {
-      return true;
-    } else if (disableAllTasks) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  const refTask = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (tasks.length) {
-      if (refTask && refTask.current)
-        refTask.current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-        });
-    }
-  }, [tasks.length]);
-
-  return (
-    <Grid
-      container
-      item
-      xs={3}
-      direction="column"
-      className={`${className ?? ''} ${styles.chatContainer}`}
-      {...props}
-    >
-      <div
-        className={`${styles.scrolling_content} ${styles.no_scrollbar} ${customContentClassname}`}
-      >
-        {/* Title of the Right Section */}
-
-        <Text text={texts.generalTitle} weight="bold" size="lg" />
-
-        <div
-          className={`${styles.tasks_container}
-          ${customScrollingClassname} ${styles.no_scrollbar}`}
-        >
-          {/* Welcome Message */}
-          {texts.welcomeMessageTitle && texts.welcomeMessageDescription && (
-            <WelcomeMessage
-              title={texts.welcomeMessageTitle}
-              description={texts.welcomeMessageDescription}
-            />
-          )}
-
-          {/* Always show the Share your screen message first */}
-          {isScreenShareMessageDisplayed && (
-            <SelfProtocolTaskContainer
-              mainTitle={texts.screenShareTitle}
-              description={texts.screenShareDescription}
-              ctaText={texts.screenShareCTA}
-              buttonIcon={<TvIcon />}
-              buttonId="start_screen_share"
-              onClick={() => startScreenSharing()}
-              isDisabled={isUserSharingScreen}
-            />
-          )}
-
-          {/* Scenarios, Tasks and Questions render */}
-          {tasks.map((task) => {
-            if (task.type === 'question' || task.type === 'task') {
-              return (
-                <SelfProtocolTaskContainer
-                  key={task._id}
-                  smallTitle={getTaskTitle(task)}
-                  mainTitle={task.description}
-                  description={task.notes}
-                  ctaText={texts.nextTaskCTA}
-                  buttonIcon={<SendIcon />}
-                  onClick={() => sendTask(task)}
-                  isDisabled={getIsTaskDisabled(task)}
-                />
-              );
-            } else if (task.type === 'scenario') {
-              return (
-                <SelfProtocolTaskContainer
-                  key={task._id}
-                  smallTitle={getTaskTitle(task)}
-                  mainTitle={task.name}
-                  description={task.description}
-                  ctaText={
-                    task.index === 1 ? texts.startNowCTA : texts.sendScenarioCTA
-                  }
-                  buttonIcon={<SendIcon />}
-                  buttonId={task.index === 1 ? 'start_scenario' : ''}
-                  onClick={
-                    task.index === 1
-                      ? () => startInterview(task)
-                      : () => sendTask(task)
-                  }
-                  isDisabled={getIsTaskDisabled(task)}
-                />
-              );
-            } else return <></>;
-          })}
-
-          {/* End of the scenario */}
-          {areAllTasksSend && !isLastScenario && (
-            <SelfProtocolTaskContainer
-              mainTitle={texts.endOfScenarioTitle}
-              description={texts.endOfScenarioDescription}
-              ctaText={texts.endOfScenarioCTA}
-              buttonIcon={<SendIcon />}
-              onClick={() => onClickFinishScenario()}
-              isDisabled={false}
-            />
-          )}
-
-          {/* End of the interview */}
-          {areAllTasksSend && !isRecordingFinished && isLastScenario && (
-            <EndRecording
-              stopRecTitle={texts.stopRecTitle}
-              stopRecDescription={texts.stopRecDescription}
-              stopRecCTA={texts.stopRecCTA}
-              stopRecording={stopRecording}
-            />
-          )}
-          {isRecordingFinished && isSus && areAllTasksSend && (
-            <SusExplanation
-              title={texts.SusExplanationTitle}
-              description={texts.SusExplanationDescription}
-            />
-          )}
-          <div ref={refTask} />
-        </div>
-      </div>
-    </Grid>
-  );
-};
+import React, { useRef, useEffect, HTMLAttributes } from 'react';
+import styles from './SelfProtocolManager.modules.scss';
+import {
+  Text,
+  WelcomeMessage,
+  EndRecording,
+  SusExplanation,
+  TvIcon,
+  SendIcon,
+} from '../..';
+import Grid from '@mui/material/Grid';
+import SelfProtocolTaskContainer from './SelfPrortocolTaskContainer';
+
+interface Texts {
+  generalTitle: string;
+  welcomeMessageTitle: string;
+  welcomeMessageDescription: string;
+  screenShareTitle: string;
+  screenShareDescription: string;
+  screenShareCTA: string;
+  startNowCTA: string;
+  sendScenarioCTA: string;
+  nextTaskCTA: string;
+  endOfScenarioTitle: string;
+  endOfScenarioDescription: string;
+  endOfScenarioCTA: string;
+  stopRecTitle: string;
+  stopRecDescription: string;
+  stopRecCTA: string;
+  SusExplanationTitle: string;
+  SusExplanationDescription: string;
+}
+
+export interface SelfProtocolManagerProps
+  extends HTMLAttributes<HTMLDivElement> {
+  texts: Texts;
+  className?: string;
+  customScrollingClassname?: string;
+  customContentClassname?: string;
+  tasks: any[];
+  idsTasksAlreadySent: string[];
+  currentTask?: any;
+  disableAllTasks?: boolean;
+  areAllTasksSend?: boolean;
+  isLastScenario?: boolean;
+  isRecordingFinished?: boolean;
+  isSus: boolean;
+  isUserSharingScreen: boolean;
+  isScreenShareMessageDisplayed?: boolean;
+  startScreenSharing: () => void;
+  startInterview: (task: any) => void;
+  sendTask: (task: any) => void;
+  stopRecording: () => void;
+  onClickFinishScenario: () => void;
+}
+
+export const SelfProtocolManager = ({
+  texts,
+  className,
+  customScrollingClassname,
+  customContentClassname,
+  tasks,
+  idsTasksAlreadySent,
+  currentTask,
+  disableAllTasks,
+  areAllTasksSend,
+  isLastScenario,
+  isRecordingFinished,
+  isSus,
+  isUserSharingScreen,
+  isScreenShareMessageDisplayed = true,
+  startScreenSharing,
+  startInterview,
+  sendTask,
+  stopRecording,
+  onClickFinishScenario,
+  ...props
+}: SelfProtocolManagerProps) => {
+  const getTaskTitle = (task: { type: string; index: number }): string => {
+    let taskType = '';
+    if (task.type === 'task') {
+      taskType = 'Task';
+    } else if (task.type === 'question') {
+      taskType = 'Question';
+    } else {
+      taskType = 'Scenario';
+    }
+    return `${taskType} #${task.index}`; //Task #1, Question #2, Scenario #3
+  };
+
+  const getIsTaskDisabled = (task: { _id: string }): boolean => {
+    if (
+      idsTasksAlreadySent.includes(task._id) &&
+      currentTask && currentTask._id !== task._id
+    ) {
+      return true;
+    } else if (disableAllTasks) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const refTask = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (tasks.length) {
+      if (refTask && refTask.current)
+        refTask.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'end',
+        });
+    }
+  }, [tasks.length]);
+
+  return (
+    <Grid
+      container
+      item
+      xs={3}
+      direction="column"
+      className={`${className ?? ''} ${styles.chatContainer}`}
+      {...props}
+    >
+      <div
+        className={`${styles.scrolling_content} ${styles.no_scrollbar} ${customContentClassname}`}
+      >
+        {/* Title of the Right Section */}
+
+        <Text text={texts.generalTitle} weight="bold" size="lg" />
+
+        <div
+          className={`${styles.tasks_container}
+          ${customScrollingClassname} ${styles.no_scrollbar}`}
+        >
+          {/* Welcome Message */}
+          {texts.welcomeMessageTitle && texts.welcomeMessageDescription && (
+            <WelcomeMessage
+              title={texts.welcomeMessageTitle}
+              description={texts.welcomeMessageDescription}
+            />
+          )}
+
+          {/* Always show the Share your screen message first */}
+          {isScreenShareMessageDisplayed && (
+            <SelfProtocolTaskContainer
+              mainTitle={texts.screenShareTitle}
+              description={texts.screenShareDescription}
+              ctaText={texts.screenShareCTA}
+              buttonIcon={<TvIcon />}
+              buttonId="start_screen_share"
+              onClick={() => startScreenSharing()}
+              isDisabled={isUserSharingScreen}
+            />
+          )}
+
+          {/* Scenarios, Tasks and Questions render */}
+          {tasks.map((task) => {
+            if (task.type === 'question' || task.type === 'task') {
+              return (
+                <SelfProtocolTaskContainer
+                  key={task._id}
+                  smallTitle={getTaskTitle(task)}
+                  mainTitle={task.description}
+                  description={task.notes}
+                  ctaText={texts.nextTaskCTA}
+                  buttonIcon={<SendIcon />}
+                  onClick={() => sendTask(task)}
+                  isDisabled={getIsTaskDisabled(task)}
+                />
+              );
+            } else if (task.type === 'scenario') {
+              return (
+                <SelfProtocolTaskContainer
+                  key={task._id}
+                  smallTitle={getTaskTitle(task)}
+                  mainTitle={task.name}
+                  description={task.description}
+                  ctaText={
+                    task.index === 1 ? texts.startNowCTA : texts.sendScenarioCTA
+                  }
+                  buttonIcon={<SendIcon />}
+                  buttonId={task.index === 1 ? 'start_scenario' : ''}
+                  onClick={
+                    task.index === 1
+                      ? () => startInterview(task)
+                      : () => sendTask(task)
+                  }
+                  isDisabled={getIsTaskDisabled(task)}
+                />
+              );
+            } else return <></>;
+          })}
+
+          {/* End of the scenario */}
+          {areAllTasksSend && !isLastScenario && (
+            <SelfProtocolTaskContainer
+              mainTitle={texts.endOfScenarioTitle}
+              description={texts.endOfScenarioDescription}
+              ctaText={texts.endOfScenarioCTA}
+              buttonIcon={<SendIcon />}
+              onClick={() => onClickFinishScenario()}
+              isDisabled={false}
+            />
+          )}
+
+          {/* End of the interview */}
+          {areAllTasksSend && !isRecordingFinished && isLastScenario && (
+            <EndRecording
+              stopRecTitle={texts.stopRecTitle}
+              stopRecDescription={texts.stopRecDescription}
+              stopRecCTA={texts.stopRecCTA}
+              stopRecording={stopRecording}
+            />
+          )}
+          {isRecordingFinished && isSus && areAllTasksSend && (
+            <SusExplanation
+              title={texts.SusExplanationTitle}
+              description={texts.SusExplanationDescription}
+            />
+          )}
+          <div ref={refTask} />
+        </div>
+      </div>
+    </Grid>
+  );
+};

package/src/Molecules/Interviews/SusExplanation.module.scss

@@ -1,11 +1,11 @@
-.sus_explanation {
-  display: flex;
-  max-width: 100%;
-  padding: 0.75rem;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--Color-Extended-Green-200, #d5edd8);
-  background: var(--Color-Extended-Green-50, #f7fcf7);
-}
+.sus_explanation {
+  display: flex;
+  max-width: 100%;
+  padding: 0.75rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--Color-Extended-Green-200, #d5edd8);
+  background: var(--Color-Extended-Green-50, #f7fcf7);
+}

package/src/Molecules/Interviews/SusExplanation.tsx

@@ -1,17 +1,17 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './SusExplanation.module.scss';
-import { Title, Text } from '../../';
-
-export interface SusExplanationProps extends HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description: string;
-}
-
-export const SusExplanation = ({ title, description }: SusExplanationProps) => {
-  return (
-    <div className={styles.sus_explanation}>
-      <Title text={title ?? ''} weight="bold" />
-      <Text text={description ?? ''} size="sm" />
-    </div>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './SusExplanation.module.scss';
+import { Title, Text } from '../../';
+
+export interface SusExplanationProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description: string;
+}
+
+export const SusExplanation = ({ title, description }: SusExplanationProps) => {
+  return (
+    <div className={styles.sus_explanation}>
+      <Title text={title ?? ''} weight="bold" />
+      <Text text={description ?? ''} size="sm" />
+    </div>
+  );
+};