COM-3877 - display qrcode and questionnaireForm at every courseTimeline

sophiemoustard · Jan 10, 2025 · 69a3d5d · 69a3d5d
1 parent dde65f1
commit 69a3d5d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/src/api/questionnaires.ts b/src/api/questionnaires.ts
@@ -26,7 +26,7 @@ export default {
 
     return response.data.data.questionnaires;
   },
-  getQRCode: async (params: { course: string }): Promise<string> => {
+  getQRCode: async (params: { course: string, courseTimeline: string }): Promise<string> => {
     const baseURL = await Environment.getBaseUrl();
     const response: AxiosResponse<any> = await axiosLogged.get(`${baseURL}/questionnaires/qrcode`, { params });
 

diff --git a/src/components/QuestionnaireQRCodeCell/index.tsx b/src/components/QuestionnaireQRCodeCell/index.tsx
@@ -9,9 +9,10 @@ interface QuestionnaireQRCodeCellProps {
   img: string,
   types: string[],
   courseId: string,
+  courseTimeline: string,
 }
 
-const QuestionnaireQRCodeCell = ({ img, types, courseId }: QuestionnaireQRCodeCellProps) => {
+const QuestionnaireQRCodeCell = ({ img, types, courseId, courseTimeline }: QuestionnaireQRCodeCellProps) => {
   const [questionnaireTypeTitle, setQuestionnaireTypeTitle] = useState('');
   const [qrCodePlaceHolder, setQrCodePlaceHolder] = useState('');
   const [url, setUrl] = useState<string>('');
@@ -20,11 +21,11 @@ const QuestionnaireQRCodeCell = ({ img, types, courseId }: QuestionnaireQRCodeCe
     const defineURL = async () => {
       const webappURL = await Environment.getWebappUrl();
 
-      setUrl(`${webappURL}/ni/questionnaires?courseId=${courseId}`);
+      setUrl(`${webappURL}/ni/questionnaires?courseId=${courseId}&courseTimeline=${courseTimeline}`);
     };
 
     defineURL();
-  }, [courseId]);
+  }, [courseId, courseTimeline]);
 
   useEffect(() => {
     const title = getQuestionnaireTitle(types);

diff --git a/src/core/data/constants.ts b/src/core/data/constants.ts
@@ -64,6 +64,8 @@ export const PUBLISHED = 'published';
 export const EXPECTATIONS = 'expectations';
 export const END_OF_COURSE = 'end_of_course';
 export const SELF_POSITIONNING = 'self_positionning';
+export const START_COURSE = 'start_course';
+export const END_COURSE = 'end_course';
 
 // ROLE
 export const VENDOR_ADMIN = 'vendor_admin';

diff --git a/src/screens/courses/profile/AdminCourseProfile/index.tsx b/src/screens/courses/profile/AdminCourseProfile/index.tsx
@@ -40,6 +40,10 @@ import {
   PDF,
   SHORT_FIRSTNAME_LONG_LASTNAME,
   SINGLE_COURSES_SUBPROGRAM_IDS,
+  EXPECTATIONS,
+  END_OF_COURSE,
+  START_COURSE,
+  END_COURSE,
 } from '../../../../core/data/constants';
 import CompaniDate from '../../../../core/helpers/dates/companiDates';
 import PersonCell from '../../../../components/PersonCell';
@@ -73,6 +77,8 @@ interface imagePreviewProps {
   type: string,
 }
 
+type QRCodeType = { img: string, courseTimeline: string };
+
 const AdminCourseProfile = ({ route, navigation }: AdminCourseProfileProps) => {
   const course = useGetCourse();
   const setCourse = useSetCourse();
@@ -139,7 +145,7 @@ const AdminCourseProfile = ({ route, navigation }: AdminCourseProfileProps) => {
 
   const [imagePreview, setImagePreview] =
     useState<imagePreviewProps>({ visible: false, id: '', link: '', type: '' });
-  const [questionnaireQRCode, setQuestionnaireQRCode] = useState<string>('');
+  const [questionnaireQRCodes, setQuestionnaireQRCodes] = useState<QRCodeType[]>([]);
   const [questionnairesType, setQuestionnairesType] = useState<string[]>([]);
 
   const refreshAttendanceSheets = async (courseId: string) => {
@@ -151,15 +157,25 @@ const AdminCourseProfile = ({ route, navigation }: AdminCourseProfileProps) => {
   const getQuestionnaireQRCode = async (courseId: string) => {
     try {
       const publishedQuestionnaires = await Questionnaires.list({ course: courseId });
-      setQuestionnairesType(publishedQuestionnaires.map(q => q.type).sort((a, b) => sortStrings(a, b)));
+      const questionnairesTypeList = publishedQuestionnaires.map(q => q.type).sort((a, b) => sortStrings(a, b));
+      setQuestionnairesType(questionnairesTypeList);
 
+      const qrCodes = [];
       if (publishedQuestionnaires.length) {
-        const qrCode = await Questionnaires.getQRCode({ course: courseId });
-        setQuestionnaireQRCode(qrCode);
+        if (questionnairesTypeList.includes(EXPECTATIONS)) {
+          const img = await Questionnaires.getQRCode({ course: courseId, courseTimeline: START_COURSE });
+          qrCodes.push({ img, courseTimeline: START_COURSE });
+        }
+        if (questionnairesTypeList.includes(END_OF_COURSE)) {
+          const img = await Questionnaires.getQRCode({ course: courseId, courseTimeline: END_COURSE });
+          qrCodes.push({ img, courseTimeline: END_COURSE });
+        }
+
+        setQuestionnaireQRCodes(qrCodes);
       }
     } catch (e: any) {
       console.error(e);
-      setQuestionnaireQRCode('');
+      setQuestionnaireQRCodes([]);
     }
   };
 
@@ -278,6 +294,14 @@ const AdminCourseProfile = ({ route, navigation }: AdminCourseProfileProps) => {
 
   const goToAttendanceSheetUpload = () => navigation.navigate('CreateAttendanceSheet', { isSingle });
 
+  const renderQuestionnaireCell = (item: QRCodeType) => {
+    const type = questionnairesType
+      .filter(qType => (item.courseTimeline === START_COURSE ? qType !== END_OF_COURSE : qType !== EXPECTATIONS));
+
+    return <QuestionnaireQRCodeCell img={item.img} types={type} courseId={course!._id}
+      courseTimeline={item.courseTimeline}/>;
+  };
+
   return course && has(course, 'subProgram.program') ? (
     <SafeAreaView style={commonStyles.container} edges={['top']}>
       <ScrollView showsVerticalScrollIndicator={false}>
@@ -328,11 +352,12 @@ const AdminCourseProfile = ({ route, navigation }: AdminCourseProfileProps) => {
           }
           {!!course.trainees && course.trainees.map(item => <View key={item._id}>{renderTrainee(item)}</View>)}
         </View>
-        {!!questionnaireQRCode && <View style={styles.sectionContainer}>
+        {!!questionnaireQRCodes.length && <View style={styles.sectionContainer}>
           <View style={commonStyles.sectionDelimiter} />
           <Text style={styles.sectionTitle}>Questionnaires</Text>
-          <QuestionnaireQRCodeCell img={questionnaireQRCode} types={questionnairesType}
-            courseId={course._id} />
+          <FlatList data={questionnaireQRCodes} keyExtractor={(item, idx) => `qrcode_${idx}`}
+            renderItem={({ item }) => renderQuestionnaireCell(item)}
+            showsHorizontalScrollIndicator={false} />
         </View>}
         {course.type !== INTER_B2B && <View style={styles.sectionContainer}>
           <View style={commonStyles.sectionDelimiter} />