catchup-library-web 1.4.15 → 1.5.2

package/dist/index.d.mts

@@ -30,6 +30,7 @@ interface IBaseImageProps {
     widthClassName?: string;
     heightClassName?: string;
     src: string;
+    hidden?: boolean;
     alt: string;
     showLoading?: boolean;
     onLoad?: () => void;

package/dist/index.d.ts

@@ -30,6 +30,7 @@ interface IBaseImageProps {
     widthClassName?: string;
     heightClassName?: string;
     src: string;
+    hidden?: boolean;
     alt: string;
     showLoading?: boolean;
     onLoad?: () => void;

package/dist/index.js

@@ -304,6 +304,7 @@ var BaseImage = (props) => {
     widthClassName,
     heightClassName,
     src,
+    hidden,
     alt,
     showLoading,
     onLoad,
@@ -362,7 +363,7 @@ var BaseImage = (props) => {
   return loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BaseLoading_default, { size: "small", primaryColor: "#57C2D3", secondaryColor: "#57C2D3" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
-      className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block`,
+      className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block ${hidden ? "hidden" : ""}`,
       onClick: handleOnClick,
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "img",
@@ -5669,9 +5670,6 @@ var OpenEndedActivityMaterialContent = ({
     const { answerMap: answerMap2 } = retrieveAnswer();
     return answerMap2;
   };
-  const checkShowContent = () => {
-    return false;
-  };
   const RenderTextContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -7368,7 +7366,7 @@ var filterUserRoleOptionList = (accountType, userProfileRole) => {
   } else {
     if (userProfileRole === "STAFF") {
       return retrieveUserRoleOptionList().filter(
-        (userRoleOption) => userRoleOption.value === "STAFF" || userRoleOption.value === "LEARNER"
+        (userRoleOption) => userRoleOption.value === "STAFF" || userRoleOption.value === "LEARNER" || userRoleOption.value === "CONTENT_CREATOR"
       );
     } else if (userProfileRole === "INDIVIDUAL") {
       return retrieveUserRoleOptionList().filter(

package/dist/index.mjs

@@ -112,6 +112,7 @@ var BaseImage = (props) => {
     widthClassName,
     heightClassName,
     src,
+    hidden,
     alt,
     showLoading,
     onLoad,
@@ -170,7 +171,7 @@ var BaseImage = (props) => {
   return loading ? /* @__PURE__ */ jsx2(BaseLoading_default, { size: "small", primaryColor: "#57C2D3", secondaryColor: "#57C2D3" }) : /* @__PURE__ */ jsx2(
     "span",
     {
-      className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block`,
+      className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block ${hidden ? "hidden" : ""}`,
       onClick: handleOnClick,
       children: /* @__PURE__ */ jsx2(
         "img",
@@ -5477,9 +5478,6 @@ var OpenEndedActivityMaterialContent = ({
     const { answerMap: answerMap2 } = retrieveAnswer();
     return answerMap2;
   };
-  const checkShowContent = () => {
-    return false;
-  };
   const RenderTextContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
     return /* @__PURE__ */ jsx33(
@@ -7176,7 +7174,7 @@ var filterUserRoleOptionList = (accountType, userProfileRole) => {
   } else {
     if (userProfileRole === "STAFF") {
       return retrieveUserRoleOptionList().filter(
-        (userRoleOption) => userRoleOption.value === "STAFF" || userRoleOption.value === "LEARNER"
+        (userRoleOption) => userRoleOption.value === "STAFF" || userRoleOption.value === "LEARNER" || userRoleOption.value === "CONTENT_CREATOR"
       );
     } else if (userProfileRole === "INDIVIDUAL") {
       return retrieveUserRoleOptionList().filter(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.4.15",
+  "version": "1.5.2",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx

@@ -1,137 +1,13 @@
-// import { useAudioRecorder } from "react-audio-voice-recorder";
 import InputGroup from "../../groups/InputGroup";
-// import { useEffect, useRef, useState } from "react";
-// import PrimaryButton from "../../buttons/PrimaryButton";
-// import SecondaryButton from "../../buttons/SecondaryButton";
-// import {
-//   createOrUpdateStorageFileFromCatchtivityApplication,
-//   createOrUpdateStorageFileFromCatchxamApplication,
-//   createOrUpdateStorageFileFromEtude,
-// } from "../../../requests/StorageRequests";
-// import connection_production from "../../../config/connection.json";
-// import connection_development from "../../../config/connection_local.json";
-// import endpoints from "../../../config/endpoints.json";
 import i18n from "../../../language/i18n";
-// import BaseImage from "../../images/BaseImage";
-// import {
-//   convertDataURLtoFile,
-//   retrieveDocumentTypeFromAcceptedFormat,
-//   retrieveDocumentTypeFromExtension,
-// } from "../../../utilization/StorageUtilization";
-// import PDF from "../../pdf/PDF";
-// import FullCard from "../../cards/FullCard";
-// import BaseModal from "../../modal/BaseModal";
-// import QRCode from "react-qr-code";
-// import BaseTitle from "../../titles/BaseTitle";
-// import { NotificationManager } from "react-notifications";
-// import Konva from "../../konva/Konva";
-// import useScreenSize from "../../../hooks/useScreenSize";
 import DividerLine from "../../dividers/DividerLine";
 import { IOpenEndedActivityMaterialProps } from "../../../properties/ActivityProperties";
 
-// const connection =
-//   process.env.REACT_APP_NODE_ENV === "development"
-//     ? connection_development
-//     : connection_production;
-
 const OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
   onChange,
 }: IOpenEndedActivityMaterialProps) => {
-  // const {
-  //   answer,
-  //   bodyMap,
-  //   contentMap,
-  //   onChange,
-  //   userId,
-  //   userProfileId,
-  //   catchtivityApplicationId,
-  //   catchxamApplicationId,
-  //   etudeId,
-  //   activityId,
-  //   activityTemplateId,
-  //   storageStompClient,
-  // } = props;
-  // const { containerSize } = useScreenSize();
-  // const [uploadFile, setUploadFile] = useState(null);
-  // const [uploadingStatus, setUploadingStatus] = useState(null);
-  // const {
-  //   startRecording,
-  //   stopRecording,
-  //   togglePauseResume,
-  //   recordingBlob,
-  //   isRecording,
-  //   isPaused,
-  //   recordingTime,
-  // } = useAudioRecorder();
-  // const [showUploadFromPhoneModal, setShowUploadFromPhoneModal] =
-  //   useState(false);
-  // const inputFileRef = useRef(null);
-  // const [subscribedId, setSubscribedId] = useState(null);
-  // const [showKonvaModal, setShowKonvaModal] = useState(false);
-
-  // useEffect(() => {
-  //   if (recordingBlob) {
-  //     let id;
-  //     if (catchtivityApplicationId) {
-  //       id = `catchtivity-${catchtivityApplicationId}`;
-  //     } else if (catchxamApplicationId) {
-  //       id = `catchxam-${catchxamApplicationId}`;
-  //     } else if (etudeId) {
-  //       id = `etude-${etudeId}`;
-  //     }
-  //     const url = URL.createObjectURL(recordingBlob);
-  //     const blob = new File(
-  //       [recordingBlob],
-  //       `${id}-${activityId}-${activityTemplateId}.mp3`,
-  //       { type: "audio/mp3" }
-  //     );
-  //     setUploadFile(blob);
-  //   }
-  // }, [recordingBlob]);
-
-  // useEffect(() => {
-  //   if (!uploadFile) return;
-  //   handleUploadLearnerFile();
-  // }, [uploadFile]);
-
-  // useEffect(() => {
-  //   if (catchtivityApplicationId && storageStompClient) {
-  //     const subscribed = storageStompClient.subscribe(
-  //       "/topic/storage-files/upload",
-  //       (message) => {
-  //         let { body } = message;
-  //         body = JSON.parse(body);
-  //         const {
-  //           userId: bodyUserId,
-  //           userProfileId: bodyUserProfileId,
-  //           documentType,
-  //           fileName,
-  //         } = body;
-  //         if (bodyUserId === userId && bodyUserProfileId === userProfileId) {
-  //           onChange(
-  //             answer,
-  //             `${connection.base.storage.url}${
-  //               endpoints.storage.learner.context
-  //             }${
-  //               endpoints.storage.learner.preview.file.context
-  //             }/${userId}/${userProfileId}/${documentType.toLowerCase()}s/${fileName}`
-  //           );
-  //           setShowUploadFromPhoneModal(false);
-  //         }
-  //       }
-  //     );
-  //     setSubscribedId(subscribed.id);
-  //   }
-  //   return () => {
-  //     if (!catchtivityApplicationId) return;
-  //     if (!storageStompClient) return;
-  //     storageStompClient.unsubscribe(subscribedId);
-  //     setSubscribedId(null);
-  //   };
-  // }, [catchtivityApplicationId]);
-
   const retrieveAnswer = () => {
     if (!answer)
       return {
@@ -149,403 +25,6 @@ const OpenEndedActivityMaterialContent = ({
     return answerMap;
   };
 
-  const checkShowContent = () => {
-    // if (
-    //   userId &&
-    //   userProfileId &&
-    //   (catchtivityApplicationId || catchxamApplicationId || etudeId)
-    // ) {
-    //   return true;
-    // }
-    return false;
-  };
-
-  // const constructQRData = () => {
-  //   let type = "";
-  //   if (catchtivityApplicationId) {
-  //     type = "CATCHTIVITY_APPLICATION";
-  //   } else if (catchxamApplicationId) {
-  //     type = "CATCHXAM_APPLICATION";
-  //   } else if (etudeId) {
-  //     type = "ETUDE_APPLICATION";
-  //   }
-  //   const base64Data = {
-  //     type,
-  //     applicationId: catchtivityApplicationId
-  //       ? catchtivityApplicationId
-  //       : catchxamApplicationId
-  //       ? catchxamApplicationId
-  //       : etudeId,
-  //     userId,
-  //     userProfileId,
-  //     activityId,
-  //     activityTemplateId,
-  //   };
-
-  //   return `${connection.app.url}/upload/file-to-application/${btoa(
-  //     encodeURI(JSON.stringify(base64Data))
-  //   )}`;
-  // };
-
-  // const handleUploadLearnerFile = async () => {
-  //   setUploadingStatus("UPLOADING");
-  //   const formData = new FormData();
-  //   formData.append("file", uploadFile);
-  //   const documentType = retrieveDocumentTypeFromAcceptedFormat(
-  //     uploadFile.type
-  //   );
-  //   formData.append(
-  //     "path",
-  //     `/${userId}/${userProfileId}/${documentType.toLowerCase()}s`
-  //   );
-
-  //   formData.append("documentType", documentType);
-  //   formData.append("userId", userId);
-  //   formData.append("userProfileId", userProfileId);
-  //   formData.append("activityId", activityId);
-  //   formData.append("activityTemplateId", activityTemplateId);
-  //   let curData;
-  //   let curErr;
-  //   if (catchtivityApplicationId) {
-  //     formData.append("catchtivityApplicationId", catchtivityApplicationId);
-  //     const { data, err } =
-  //       await createOrUpdateStorageFileFromCatchtivityApplication(formData);
-  //     curData = data;
-  //     curErr = err;
-  //   } else if (catchxamApplicationId) {
-  //     formData.append("catchxamApplicationId", catchxamApplicationId);
-  //     const { data, err } =
-  //       await createOrUpdateStorageFileFromCatchxamApplication(formData);
-  //     curData = data;
-  //     curErr = err;
-  //   } else if (etudeId) {
-  //     formData.append("etudeId", etudeId);
-  //     const { data, err } = await createOrUpdateStorageFileFromEtude(formData);
-  //     curData = data;
-  //     curErr = err;
-  //   }
-
-  //   if (curErr) {
-  //     setUploadingStatus("FAILED");
-  //     console.log(curErr);
-  //     return;
-  //   }
-  //   onChange(
-  //     answer,
-  //     `${connection.base.storage.url}${endpoints.storage.learner.context}${
-  //       endpoints.storage.learner.preview.file.context
-  //     }/${userId}/${userProfileId}/${documentType.toLowerCase()}s/${
-  //       curData.fileName
-  //     }`
-  //   );
-  //   setUploadingStatus("SUCCESS");
-  // };
-
-  // const handleAfterCompleteOnClick = (dataUri) => {
-  //   const file = convertDataURLtoFile(dataUri, `${new Date().getTime()}.jpeg`);
-  //   setUploadFile(file);
-  //   setShowKonvaModal(false);
-  // };
-
-  // const convertBodyMapToKonvaItems = () => {
-  //   const itemList = [];
-  //   Object.keys(bodyMap).forEach((key) => {
-  //     itemList.push(JSON.parse(bodyMap[key]));
-  //   });
-  //   return itemList;
-  // };
-
-  // const RenderStartRecordingContent = () => {
-  //   if (isRecording) {
-  //     return (
-  //       <div
-  //         className={`w-[320px] cursor-pointer transition-all duration-300 ${
-  //           isPaused ? "opacity-100" : "opacity-0"
-  //         }`}
-  //         onClick={() => {
-  //           if (checkShowContent()) {
-  //             togglePauseResume();
-  //           } else {
-  //             NotificationManager.info(
-  //               i18n.t("operations_not_permitted_at_preview")
-  //             );
-  //           }
-  //         }}
-  //       >
-  //         <BaseImage
-  //           src="/icons/ongoing-started-audio-element.webp"
-  //           alt="audio-element"
-  //           size="custom"
-  //           className="w-full"
-  //         />
-  //         <p>{i18n.t("continue_recording_text")}</p>
-  //       </div>
-  //     );
-  //   } else {
-  //     return (
-  //       <div
-  //         className={`w-[320px] cursor-pointer transition-all duration-300 ${
-  //           isRecording ? "opacity-0" : "opacity-100"
-  //         }`}
-  //         onClick={() => {
-  //           if (checkShowContent()) {
-  //             startRecording();
-  //           } else {
-  //             NotificationManager.info(
-  //               i18n.t("operations_not_permitted_at_preview")
-  //             );
-  //           }
-  //         }}
-  //       >
-  //         <BaseImage
-  //           src="/icons/not-started-audio-element.webp"
-  //           alt="audio-element"
-  //           size="custom"
-  //           className="w-full"
-  //         />
-  //         <p>{i18n.t("start_recording_text")}</p>
-  //       </div>
-  //     );
-  //   }
-  // };
-
-  // const RenderListenAudioTextContent = (answerMapAnswer) => {
-  //   if (!answerMapAnswer) return;
-  //   return (
-  //     <div
-  //       className={`border rounded-catchup-xlarge border-catchup-dark-blue my-2`}
-  //     >
-  //       <p className="text-2xl text-catchup-dark-blue px-4 py-2 text-center">
-  //         {i18n.t("completed_recording_text")}
-  //       </p>
-  //     </div>
-  //   );
-  // };
-
-  // const RenderRecordingTextContent = () => {
-  //   if (isPaused) {
-  //     return (
-  //       <div
-  //         className={`border rounded-catchup-xlarge border-catchup-orange my-2`}
-  //       >
-  //         <p className="text-xl text-catchup-orange px-4 py-2 text-center">
-  //           {i18n.t("paused_recording_text")}
-  //         </p>
-  //       </div>
-  //     );
-  //   } else {
-  //     if (isRecording) {
-  //       return (
-  //         <div
-  //           className={`border rounded-catchup-xlarge border-catchup-red my-2`}
-  //         >
-  //           <p className="text-xl text-catchup-red px-4 py-2 text-center">
-  //             {i18n.t("currently_recording_text")}
-  //           </p>
-  //         </div>
-  //       );
-  //     } else {
-  //       return (
-  //         <div
-  //           className={`border rounded-catchup-xlarge border-catchup-dark-blue my-2`}
-  //         >
-  //           <p className="text-xl text-catchup-dark-blue px-4 py-2 text-center">
-  //             {i18n.t("not_started_recording_text")}
-  //           </p>
-  //         </div>
-  //       );
-  //     }
-  //   }
-  // };
-
-  // const RenderStopRecordingContent = () => {
-  //   if (isRecording) {
-  //     return (
-  //       <div
-  //         className={`w-[320px] cursor-pointer transition-all duration-300 ${
-  //           isPaused ? "opacity-0" : "opacity-100"
-  //         }`}
-  //         onClick={() => {
-  //           if (checkShowContent()) {
-  //             togglePauseResume();
-  //           } else {
-  //             NotificationManager.info(
-  //               i18n.t("operations_not_permitted_at_preview")
-  //             );
-  //           }
-  //         }}
-  //       >
-  //         <BaseImage
-  //           src="/icons/started-audio-element.webp"
-  //           alt="audio-element"
-  //           size="custom"
-  //           className="w-full"
-  //         />
-  //         <p>{i18n.t("stop_recording_text")}</p>
-  //       </div>
-  //     );
-  //   }
-  // };
-
-  // const RenderRecordingContent = (answerMap) => {
-  //   return (
-  //     <div>
-  //       {answerMap["ANSWER"] ? (
-  //         <>
-  //           {RenderListenAudioTextContent(answerMap["ANSWER"])}
-  //           {RenderListenAudioContent(answerMap["ANSWER"])}
-  //           <div className="flex flex-col items-center justify-center mt-4">
-  //             <SecondaryButton
-  //               title={i18n.t("restart")}
-  //               size="small"
-  //               onClick={() => {
-  //                 if (checkShowContent()) {
-  //                   onChange(answer, "");
-  //                 } else {
-  //                   NotificationManager.info(
-  //                     i18n.t("operations_not_permitted_at_preview")
-  //                   );
-  //                 }
-  //               }}
-  //             />
-  //           </div>
-  //         </>
-  //       ) : (
-  //         <>
-  //           {RenderRecordingTextContent()}
-  //           <div className="flex flex-row gap-x-2">
-  //             {RenderStartRecordingContent()}
-  //             {RenderStopRecordingContent()}
-  //           </div>
-  //           {isRecording ? (
-  //             <div className="flex flex-col items-center justify-center mt-4">
-  //               <PrimaryButton
-  //                 title={i18n.t("complete")}
-  //                 size="small"
-  //                 onClick={() => {
-  //                   if (checkShowContent()) {
-  //                     stopRecording();
-  //                   } else {
-  //                     NotificationManager.info(
-  //                       i18n.t("operations_not_permitted_at_preview")
-  //                     );
-  //                   }
-  //                 }}
-  //               />
-  //             </div>
-  //           ) : null}
-  //         </>
-  //       )}
-  //     </div>
-  //   );
-  // };
-
-  // const RenderUploadStatusTextContent = () => {
-  //   if (uploadingStatus === "UPLOADING") {
-  //     return (
-  //       <div className="flex flex-col items-center justify-center">
-  //         <div className="flex flex-row items-center justify-center gap-x-2">
-  //           <BaseImage
-  //             src="/icons/three-dots.webp"
-  //             alt="three-dots"
-  //             size="medium"
-  //           />
-  //           <p>{i18n.t("please_wait_processing")}</p>
-  //         </div>
-  //       </div>
-  //     );
-  //   } else if (uploadingStatus === "FAILED") {
-  //     return (
-  //       <div className="flex flex-col items-center justify-center">
-  //         <div className="flex flex-row items-center justift-center gap-x-2">
-  //           <BaseImage
-  //             src="/icons/cross-red.webp"
-  //             alt="cross-red"
-  //             size="medium"
-  //           />
-  //           <p>{i18n.t("error_occurred_please_wait")}</p>
-  //         </div>
-  //         <div className="mt-4">
-  //           <PrimaryButton
-  //             title={i18n.t("retry_again")}
-  //             size="small"
-  //             onClick={handleUploadLearnerFile}
-  //           />
-  //         </div>
-  //       </div>
-  //     );
-  //   } else if (uploadingStatus === "SUCCESS") {
-  //     return (
-  //       <div className="flex flex-col items-center justify-center">
-  //         <div className="flex flex-row items-center justify-center gap-x-2">
-  //           <BaseImage src="/icons/info.webp" alt="info" size="medium" />
-  //           <p>{i18n.t("processing_completed")}</p>
-  //         </div>
-  //       </div>
-  //     );
-  //   }
-  //   return null;
-  // };
-
-  // const RenderListenAudioContent = (answerMapAnswer) => {
-  //   if (!answerMapAnswer) return;
-  //   return (
-  //     <div className="flex flex-row items-center justify-center gap-x-2">
-  //       <div className="w-[320px]">
-  //         <BaseImage
-  //           src="/icons/finished-audio-element.webp"
-  //           alt="finished-audio-element"
-  //           size="custom"
-  //           className="w-full"
-  //         />
-  //       </div>
-  //       <div className="h-16 w-[320px]">
-  //         {RenderUploadStatusTextContent()}
-  //         {uploadingStatus === "SUCCESS" ? (
-  //           <audio
-  //             className="h-full w-full rounded-catchup-xlarge"
-  //             src={`${answerMapAnswer}`}
-  //             controls
-  //             onClick={() => {}}
-  //           />
-  //         ) : null}
-  //       </div>
-  //     </div>
-  //   );
-  // };
-
-  // const RenderImageContent = (answerMap) => {
-  //   const answerMapAnswer = answerMap["ANSWER"];
-  //   let documentType;
-  //   if (
-  //     answerMapAnswer.startsWith(
-  //       `${connection.base.storage.url}${endpoints.storage.learner.context}${endpoints.storage.learner.preview.file.context}/${userId}/${userProfileId}`
-  //     )
-  //   ) {
-  //     const extension = answerMapAnswer.split(".").pop();
-  //     documentType = retrieveDocumentTypeFromExtension(extension);
-  //   }
-  //   return (
-  //     <>
-  //       {RenderUploadFileContent(answerMapAnswer)}
-  //       {documentType === "IMAGE" ? (
-  //         <div className="flex flex-col justify-center items-center my-5">
-  //           <BaseImage
-  //             src={answerMapAnswer}
-  //             alt="document"
-  //             size="custom"
-  //             className="w-[80%] rounded-catchup-xlarge"
-  //           />
-  //         </div>
-  //       ) : documentType === "PDF" ? (
-  //         <div className="flex flex-col justify-center items-center my-5">
-  //           <PDF file={answerMapAnswer} />
-  //         </div>
-  //       ) : null}
-  //     </>
-  //   );
-  // };
-
   const RenderTextContent = (answerMap: any) => {
     const answerMapAnswer = answerMap["ANSWER"];
     return (
@@ -560,237 +39,10 @@ const OpenEndedActivityMaterialContent = ({
     );
   };
 
-  // const RenderTextContent = (answerMap) => {
-  //   const answerMapAnswer = answerMap["ANSWER"];
-  //   let documentType = "TEXT";
-  //   if (
-  //     answerMapAnswer.includes(
-  //       `${endpoints.storage.learner.context}${endpoints.storage.learner.preview.file.context}/`
-  //     )
-  //   ) {
-  //     const extension = answerMapAnswer.split(".").pop();
-  //     documentType = retrieveDocumentTypeFromExtension(extension);
-  //   }
-  //   return (
-  //     <>
-  //       {RenderUploadFileContent(answerMapAnswer)}
-  //       {documentType === "IMAGE" ? (
-  //         <div className="flex flex-col justify-center items-center my-5">
-  //           <BaseImage
-  //             src={answerMapAnswer}
-  //             alt="document"
-  //             size="custom"
-  //             className="w-[80%] rounded-catchup-xlarge"
-  //           />
-  //         </div>
-  //       ) : documentType === "PDF" ? (
-  //         <div className="flex flex-col justify-center items-center my-5">
-  //           <PDF file={answerMapAnswer} />
-  //         </div>
-  //       ) : (
-  //         <InputGroup
-  //           type="textarea"
-  //           value={answerMapAnswer}
-  //           useMinHeight={true}
-  //           onChange={(e) => {
-  //             onChange(answer, e.target.value);
-  //           }}
-  //         />
-  //       )}
-  //     </>
-  //   );
-  // };
-
-  // const RenderUploadFileContent = (answerMapAnswer) => {
-  //   let show = false;
-  //   let exists = false;
-  //   if (answerMapAnswer) {
-  //     if (
-  //       answerMapAnswer.startsWith(
-  //         `${connection.base.storage.url}${endpoints.storage.learner.context}${endpoints.storage.learner.preview.file.context}/${userId}/${userProfileId}`
-  //       )
-  //     ) {
-  //       show = true;
-  //       exists = true;
-  //     }
-  //   } else {
-  //     show = true;
-  //     exists = false;
-  //   }
-  //   if (!show) return;
-
-  //   return (
-  //     <div className="flex flex-row justify-end items-center gap-x-4 flex-wrap">
-  //       <div
-  //         className="flex flex-row items-center justify-center cursor-pointer gap-x-2"
-  //         onClick={() => {
-  //           if (checkShowContent()) {
-  //             setUploadFile(null);
-  //             inputFileRef.current.click();
-  //           } else {
-  //             NotificationManager.info(
-  //               i18n.t("operations_not_permitted_at_preview")
-  //             );
-  //           }
-  //         }}
-  //       >
-  //         <BaseImage src="/icons/upload-pc.webp" alt="upload" size="small" />
-  //         <p className="">
-  //           {exists
-  //             ? i18n.t("i_want_to_reupload_from_my_computer")
-  //             : i18n.t("i_want_to_upload_from_my_computer")}
-  //         </p>
-  //         <input
-  //           className="hidden"
-  //           type="file"
-  //           id="file"
-  //           ref={inputFileRef}
-  //           accept="image/jpeg, image/png, image/jpg, application/pdf"
-  //           multiple={false}
-  //           onChange={(event) => {
-  //             setUploadFile(event.target.files[0]);
-  //           }}
-  //           onClick={(event) => {
-  //             event.target.value = null;
-  //           }}
-  //         />
-  //       </div>
-  //       <div
-  //         className="flex flex-row items-center justify-center cursor-pointer gap-x-2"
-  //         onClick={() => {
-  //           if (checkShowContent()) {
-  //             setShowUploadFromPhoneModal(true);
-  //           } else {
-  //             NotificationManager.info(
-  //               i18n.t("operations_not_permitted_at_preview")
-  //             );
-  //           }
-  //         }}
-  //       >
-  //         <BaseImage src="/icons/upload-device.webp" alt="upload" size="small" />
-  //         <p className="">
-  //           {exists
-  //             ? i18n.t("i_want_to_reupload_from_my_phone")
-  //             : i18n.t("i_want_to_upload_from_my_phone")}
-  //         </p>
-  //       </div>
-  //       <div
-  //         className="flex flex-row items-center justify-center cursor-pointer gap-x-2"
-  //         onClick={() => {
-  //           if (checkShowContent()) {
-  //             setShowKonvaModal(true);
-  //           } else {
-  //             NotificationManager.info(
-  //               i18n.t("operations_not_permitted_at_preview")
-  //             );
-  //           }
-  //         }}
-  //       >
-  //         <BaseImage src="/icons/upload-draw.webp" alt="upload" size="small" />
-  //         <p className="">
-  //           {exists
-  //             ? i18n.t("i_want_to_reupload_by_drawing")
-  //             : i18n.t("i_want_to_upload_by_drawing")}
-  //         </p>
-  //       </div>
-  //     </div>
-  //   );
-  // };
-
-  // const RenderUploadFromPhoneModal = () => {
-  //   return (
-  //     <BaseModal
-  //       isOpen={showUploadFromPhoneModal}
-  //       onAfterOpen={() => {}}
-  //       onRequestClose={() => {
-  //         setShowUploadFromPhoneModal(false);
-  //       }}
-  //     >
-  //       <div className="flex-1 flex flex-col">
-  //         <div className="ml-auto px-5 py-3">
-  //           <BaseImage
-  //             src="/icons/cross-red.webp"
-  //             alt="cross-red"
-  //             size="medium"
-  //             onClick={() => {
-  //               setShowUploadFromPhoneModal(false);
-  //             }}
-  //           />
-  //         </div>
-  //         <div className="">
-  //           <FullCard>
-  //             <div className="flex flex-row items-center justify-center flex-wrap">
-  //               <div className="w-1/2">
-  //                 <div className="my-10">
-  //                   <div className="flex flex-col items-center justify-center">
-  //                     <QRCode
-  //                       size={256}
-  //                       value={constructQRData()}
-  //                       viewBox={`0 0 256 256`}
-  //                       level="L"
-  //                     />
-  //                   </div>
-  //                 </div>
-  //               </div>
-  //               <div className="flex-1">
-  //                 <BaseTitle title={i18n.t("instructions")} />
-  //                 <div className="px-4 my-2">
-  //                   <div className="flex flex-col justify-center gap-y-1">
-  //                     <div>
-  //                       <p>1. {i18n.t("open_camera_from_your_mobile_phone")}</p>
-  //                     </div>
-  //                     <div>
-  //                       <p>2. {i18n.t("read_the_qr_code")}</p>
-  //                     </div>
-  //                     <div>
-  //                       <p>3. {i18n.t("navigate_to_web_page")}</p>
-  //                     </div>
-  //                     <div>
-  //                       <p>4. {i18n.t("upload_your_file")}</p>
-  //                     </div>
-  //                     <div>
-  //                       <p>5. {i18n.t("wait_until_the_file_is_uploaded")}</p>
-  //                     </div>
-  //                     <div>
-  //                       <p>6. {i18n.t("close_panel")}</p>
-  //                     </div>
-  //                   </div>
-  //                 </div>
-  //               </div>
-  //             </div>
-  //           </FullCard>
-  //         </div>
-  //       </div>
-  //     </BaseModal>
-  //   );
-  // };
-
-  // const RenderConvaContent = () => {
-  //   return (
-  //     <BaseModal
-  //       isOpen={showKonvaModal}
-  //       onAfterOpen={() => {}}
-  //       onRequestClose={() => {
-  //         setShowKonvaModal(false);
-  //       }}
-  //     >
-  //       <FullCard>
-  //         <Konva
-  //           initialItemList={convertBodyMapToKonvaItems()}
-  //           initialWidth={containerSize.width}
-  //           handleAfterCompleteOnClick={handleAfterCompleteOnClick}
-  //         />
-  //       </FullCard>
-  //     </BaseModal>
-  //   );
-  // };
-
   const answerMap = retrieveAnswerMap();
 
   return (
     <>
-      {/* {RenderConvaContent()} */}
-      {/* {RenderUploadFromPhoneModal()} */}
       <div className="">
         <div className="hidden md:block">
           <span className="font-semibold text-xl opacity-60">
@@ -800,15 +52,6 @@ const OpenEndedActivityMaterialContent = ({
         <div className="hidden md:contents">
           <DividerLine />
         </div>
-        {/* {contentMap.type === "TEXT" ? (
-          RenderTextContent(answerMap)
-        ) : contentMap.type === "IMAGE" ? (
-          RenderImageContent(answerMap)
-        ) : contentMap.type === "AUDIO" ? (
-          <div className="flex flex-col items-center justify-center">
-            {RenderRecordingContent(answerMap)}
-          </div>
-        ) : null} */}
         {contentMap.type === "TEXT" ? RenderTextContent(answerMap) : null}
       </div>
     </>

package/src/components/images/BaseImage.tsx

@@ -10,6 +10,7 @@ const BaseImage = (props: IBaseImageProps) => {
     widthClassName,
     heightClassName,
     src,
+    hidden,
     alt,
     showLoading,
     onLoad,
@@ -78,7 +79,7 @@ const BaseImage = (props: IBaseImageProps) => {
         currentHeightClassName ? currentHeightClassName : ""
       } ${
         currentClassName ? currentClassName : ""
-      } cursor-pointer inline-block`}
+      } cursor-pointer inline-block ${hidden ? "hidden" : ""}`}
       onClick={handleOnClick}
     >
       <img

package/src/properties/ImageProperties.ts

@@ -5,6 +5,7 @@ export interface IBaseImageProps {
   widthClassName?: string;
   heightClassName?: string;
   src: string;
+  hidden?: boolean;
   alt: string;
   showLoading?: boolean;
   onLoad?: () => void;

package/src/utilization/ManagementUtilization.ts

@@ -541,7 +541,9 @@ export const filterUserRoleOptionList = (
     if (userProfileRole === "STAFF") {
       return retrieveUserRoleOptionList().filter(
         (userRoleOption) =>
-          userRoleOption.value === "STAFF" || userRoleOption.value === "LEARNER"
+          userRoleOption.value === "STAFF" ||
+          userRoleOption.value === "LEARNER" ||
+          userRoleOption.value === "CONTENT_CREATOR"
       );
     } else if (userProfileRole === "INDIVIDUAL") {
       return retrieveUserRoleOptionList().filter(