\r\n );\r\n \r\n \r\n};\r\n\r\nexport default ExamCell;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useEffect} from 'react';\r\nimport DOMPurify from 'dompurify';\r\n\r\nimport { ImgQuad } from '../hooks/ImageAssets';\r\n\r\n\r\n/*\r\n * This TmplInsModal component is a wrapper template for instructional modals (the blue ones). It creates the generic\r\n * header & footer content & dislays the body content passed through to it via transclusion.\r\n */\r\nconst TmplInsModal = ({children, txtTitleA, txtFooter}) => {\r\n \r\n \r\n // Component state.\r\n //...\r\n \r\n \r\n /*\r\n * Component methods.\r\n */\r\n \r\n //...\r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n \r\n //...\r\n \r\n // eslint-disable-next-line \r\n }, []);\r\n\r\n \r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n <>\r\n \r\n {/* Quad graphic */}\r\n
\r\n
\r\n {ImgQuad()}\r\n Compass\r\n
\r\n
\r\n \r\n {/* Modal headers */}\r\n \r\n \r\n {/* Modal body */}\r\n {children}\r\n \r\n {/* Modal footer */}\r\n { typeof txtFooter !== 'undefined' \r\n && \r\n \r\n }\r\n \r\n \r\n );\r\n \r\n \r\n};\r\n\r\nexport default TmplInsModal;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext, useEffect} from 'react';\r\nimport DOMPurify from 'dompurify';\r\n\r\nimport AuthenticationContext from '../../context/authentication/AuthenticationContext';\r\nimport AppContext from '../../context/app/AppContext';\r\n\r\n\r\n/*\r\n * This TmplSysModal component is a wrapper template for system modals (the white ones). It creates the generic\r\n * header & footer content & dislays the body content passed through to it via transclusion.\r\n */\r\nconst TmplSysModal = ({children, txtTitleA, txtTitleB, txtFooter, showLoginLnk}) => {\r\n \r\n \r\n // Reference Context api's.\r\n const authenticationContext = useContext(AuthenticationContext);\r\n const appContext = useContext(AppContext);\r\n \r\n // Destructure Context api's.\r\n const { signInUser } = authenticationContext;\r\n const { staticsData } = appContext;\r\n \r\n // Component state.\r\n //...\r\n \r\n \r\n /*\r\n * Component methods.\r\n */\r\n \r\n //...\r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n \r\n //...\r\n \r\n // eslint-disable-next-line \r\n }, [staticsData]);\r\n\r\n \r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n <>\r\n \r\n {/* Modal headers */}\r\n \r\n \r\n \r\n {/* Modal body */}\r\n {children}\r\n \r\n {/* Modal footer - Text */}\r\n { txtFooter !== '' ? \r\n \r\n : null }\r\n \r\n {/* Modal footer - Login link shown on modals when user is not logged in. */}\r\n { ( typeof showLoginLnk !== 'undefined' && showLoginLnk ) &&\r\n
\r\n \r\n
\r\n }\r\n \r\n \r\n );\r\n \r\n \r\n};\r\n\r\nexport default TmplSysModal;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext, useEffect} from 'react';\r\n\r\nimport AuthenticationContext from '../../context/authentication/AuthenticationContext';\r\nimport ModalContext from '../../context/modal/ModalContext';\r\nimport { openExtLink } from '../hooks/utilityFunctions';\r\nimport useWindowDimensions from '../hooks/getWindowDimensions';\r\n\r\n\r\n/*\r\n * This ModalContentLogin component displays the HTML for the Tag Exam modal.\r\n */\r\nconst ModalContentLogin = ({ cusAction }) => {\r\n \r\n \r\n // Reference Context api's\r\n const authenticationContext = useContext(AuthenticationContext);\r\n const modalContext = useContext(ModalContext);\r\n \r\n // Destructure Context api's.\r\n const { signInUser } = authenticationContext;\r\n const { hideModal } = modalContext;\r\n \r\n // Get window dimensions.\r\n const { winWidth } = useWindowDimensions();\r\n \r\n // Component state.\r\n //...\r\n \r\n \r\n /*\r\n * Component methods.\r\n */\r\n \r\n const onClickContinue = () => {\r\n \r\n // \r\n if ( typeof cusAction !== 'undefined' && \r\n cusAction !== null ) cusAction();\r\n \r\n // Else if there is no custom action just hide the modal.\r\n else hideModal();\r\n \r\n };\r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n \r\n //...\r\n \r\n // eslint-disable-next-line \r\n }, []);\r\n\r\n \r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n <>\r\n { winWidth > 360 &&\r\n
Plan for exam success in the year ahead:
\r\n }\r\n \r\n
Schedule and book your exams
\r\n \r\n { winWidth < 360 ?\r\n
Create day-to-day study plans
\r\n :\r\n
Add targets and tasks to detailed day-to-day study plans
\r\n }\r\n \r\n { winWidth < 360 ?\r\n
Check off tasks and reflect!
\r\n :\r\n
Check off completed tasks and reflect on your progress
\r\n } \r\n \r\n
\r\n We use cookies to personalise your experience, and by using this tool you are consenting to this. openExtLink('https://www.accaglobal.com/gb/en/footertoolbar/privacy/cookies-notice.html', true)}>Find out more about ACCA's use of cookies\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Only logged in users can save their Exam Plans \r\n and use the day-to-day Study Planning toolkit.\r\n
\r\n \r\n );\r\n \r\n \r\n};\r\n\r\nexport default ModalContentLogin;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext, useState, useEffect} from 'react';\r\n\r\nimport AuthenticationContext from '../../context/authentication/AuthenticationContext';\r\nimport AppContext from '../../context/app/AppContext';\r\nimport { IconTick } from '../hooks/ImageAssets';\r\n\r\n\r\n/*\r\n * This ModalContentTagExam component displays the HTML for the Tag Exam modal.\r\n * The user can set the exam status to one of Exempt, Passed, Taking or Retaking.\r\n */\r\nconst ModalContentTagExam = ({ exmStatusArr, examData, onClickAddExamStatusDone }) => {\r\n \r\n \r\n // Reference Context api's.\r\n const authenticationContext = useContext(AuthenticationContext);\r\n const appContext = useContext(AppContext);\r\n \r\n // Destructure Context api's.\r\n const { userExamData, \r\n curFetching } = authenticationContext;\r\n const { staticsData } = appContext;\r\n \r\n // Component state.\r\n const [curStatusID, setCurStatusID] = useState(0);\r\n const [btnDisabled, setBtnDisabled] = useState(true);\r\n \r\n // Local variables.\r\n const btnStatusArr = ['1', '2', '3', '4'];\r\n \r\n \r\n /*\r\n * Component methods.\r\n */\r\n \r\n // Actions to toggle button & selected Status for current exam state.\r\n const onClickSelect = (statusID) => {\r\n \r\n // Toggle status off.\r\n if ( statusID === curStatusID ) setCurStatusID(0);\r\n \r\n // Toggle status on.\r\n else setCurStatusID(statusID);\r\n\r\n };\r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n \r\n // Check whether this exam is currently selected by the user.\r\n const userExam = userExamData.find(item => item.examUNID === examData.UNID);\r\n \r\n // Set the initial selected Status if we have one.\r\n if ( typeof userExam !== 'undefined' ) setCurStatusID(userExam.statusType);\r\n \r\n // eslint-disable-next-line \r\n }, []);\r\n \r\n useEffect(() => {\r\n \r\n setBtnDisabled(curFetching === '' ? false : true);\r\n \r\n // eslint-disable-next-line \r\n }, [curFetching]);\r\n\r\n \r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n <>\r\n { examData.shortName === 'EPSM' ?
\r\n );\r\n };\r\n const txtFooterPrv = `NOTE Reducing your study period or cancelling the plan may result in some of your existing tasks being hidden from view. Nothing is deleted, you can recover your planning by restoring previous settings.`;\r\n const txtFooterPub = `NOTE Only logged in users can save their Exam Plans and add day-to-day tasks, milestones and reflections using the Study Planning toolkit.`;\r\n \r\n // System - initialize modal.\r\n const props = {\r\n status : true,\r\n props : {\r\n type : 0,\r\n size : 'small',\r\n closeOnClickModal : false,\r\n content : {htmlBody()}\r\n }\r\n };\r\n \r\n // System - show modal.\r\n showModal(props);\r\n \r\n };\r\n \r\n const showModalExamPeriod = (sessionUNID, isAmend) => {\r\n \r\n // System - define modal content.\r\n const txtTitleA = getSectionTitle();\r\n const txtTitleB = examData.name + ' ' + getSessionDate(sessionUNID, examsSessionData, 'long') + ' Exam';\r\n const htmlBody = () => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n };\r\n const txtFooterPrv = `NOTE Reducing your study period or cancelling the plan may result in some of your existing tasks being hidden from view. Nothing is deleted, you can recover your planning by restoring previous settings.`;\r\n const txtFooterPub = `NOTE Only logged in users can save their Exam Plans and add day-to-day tasks, milestones and reflections using the Study Planning toolkit.`;\r\n \r\n // System - initialize modal.\r\n const props = {\r\n status : true,\r\n props : {\r\n type : 0,\r\n size : 'small',\r\n closeOnClickModal : false,\r\n content : {htmlBody()}\r\n }\r\n };\r\n \r\n // System - show modal.\r\n if ( isAmend ) showModal(props);\r\n else updateModal(props);\r\n \r\n };\r\n \r\n const showModalExamSummary = studyPeriodLength => {\r\n \r\n // Get study period weeks.\r\n const planningPeriod = getStudyPeriods('planning', studyPeriodLength);\r\n const learningPeriod = getStudyPeriods('learning', studyPeriodLength);\r\n const revisionPeriod = getStudyPeriods('revision', studyPeriodLength);\r\n \r\n // Instructional - define modal content.\r\n const txtTitleA = 'Your ACCA Study planner';\r\n const htmlBody = () => {\r\n return (\r\n
\r\n \r\n
Your selected study period suggests the ACCA recommended approach to this exam:
\r\n );\r\n };\r\n \r\n // Instructional - initialize modal.\r\n const props = {\r\n status : true,\r\n props : {\r\n type : 1,\r\n size : 'small',\r\n closeOnClickModal : false,\r\n content : {htmlBody()}\r\n }\r\n };\r\n \r\n // Instructional - show modal.\r\n showModal(props);\r\n \r\n };\r\n\r\n const gotoStudyPlannerModal = () => {\r\n \r\n // Show the Plan modal if this is the first time the Plan Btn has been clicked.\r\n if ( showPlanBtnModal ) {\r\n \r\n // Instructional - define modal content.\r\n const txtTitleA = 'Your ACCA Study planner';\r\n const htmlBody = () => {\r\n return (\r\n
\r\n \r\n { winWidth < 360 ?\r\n
Add day-to-day tasks and milestones
\r\n :\r\n
Add day-to-day tasks and target milestones
\r\n }\r\n \r\n
(Check out the exam curriculum for suggested topics)
\r\n \r\n { winWidth < 360 ?\r\n
Configure Final Steps and Exam Date*
\r\n :\r\n
Configure your Final Steps and Exam Date*
\r\n }\r\n \r\n
*Exact dates for scheduled exam sessions are usually released 6 months prior to the session window
\r\n \r\n { winWidth < 360 ?\r\n
Check off tasks as you go and reflect!
\r\n :\r\n
Check off tasks as you go and reflect on your progress
\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n const cusFtrTxt = 'In future releases we\\'ll add the facility to auto-fill tasks and get reminders on your device';\r\n \r\n // Instructional - initialize modal.\r\n const props = {\r\n status : true,\r\n props : {\r\n type : 1,\r\n size : 'small',\r\n closeOnClickModal : false,\r\n content : {htmlBody()}\r\n }\r\n };\r\n \r\n // Instructional - show modal.\r\n showModal(props);\r\n \r\n }\r\n \r\n // Else just go straight to the Study Planner page.\r\n else gotoStudyPlanner();\r\n \r\n };\r\n \r\n const defineExamStatusClass = statusID => {\r\n \r\n const statusObj = staticsData.examStatusType.find(item => item.ID === statusID); \r\n const newClass = typeof statusObj !== 'undefined' ? ` ${statusObj.label.toLowerCase()}` : '';\r\n \r\n setExamStatusClass(newClass);\r\n\r\n };\r\n \r\n const hasSessionSelected = () => {\r\n \r\n if ( examData === null ) return false;\r\n \r\n const userExam = userExamData.find(item => item.examUNID === examData.UNID);\r\n \r\n if ( typeof userExam !== 'undefined' &&\r\n userExam.statusType !== 0 ) {\r\n \r\n if ( userExam.examSessionUNID !== null ) return true;\r\n else return false;\r\n \r\n }\r\n else return false;\r\n \r\n };\r\n \r\n const noStudyTime = sessionUNID => {\r\n \r\n // Get the Current day number & Session day number (should be first day of the month).\r\n const curDayNum = getSince1970('dy');\r\n const sessionDayNum = getSessionWeek(sessionUNID, examsSessionData, 'dy');\r\n \r\n // Set the number of days until the exam session, then convert that into weeks.\r\n const weeksUntil = Math.round((sessionDayNum - curDayNum) / 7);\r\n \r\n // Get the Study Period data that matches this userExam (Exam type: 1/ondemandExam, 2/exam & exam StatusType: 3/taking, 4/retaking).\r\n const examUser = userExamData.find(item => item.examUNID === examUNID);\r\n const statusKey = examUser.statusType === 3 ? 'take' : 'retake';\r\n const studyPeriods = staticsData.sessionStudyPeriods.find(item => item.ID === examData.type);\r\n const studyPeriod = studyPeriods[statusKey];\r\n \r\n // Check if the number of weeks until the event is less than the number of min study weeks for the event & return.\r\n return ( weeksUntil - studyPeriod.minWeeks ) < 0;\r\n \r\n };\r\n \r\n const getStudyPeriods = (activity, studyPeriodLength) => {\r\n \r\n const userExam = userExamData.find(item => item.examUNID === examData.UNID);\r\n const studyData = staticsData.sessionStudyPeriods.find(item => item.ID === examData.type);\r\n const studyType = studyData[userExam.statusType === 3 ? 'take' : 'retake'];\r\n const studyPeriod = studyType.studyPeriod.find(item => item.weeksUntil === studyPeriodLength);\r\n const lastStudyPeriod = studyType.studyPeriod[studyType.studyPeriod.length - 1];\r\n const revisionWeeks = typeof studyPeriod === 'undefined' && studyType.exceedMax ? lastStudyPeriod.revisionWeeks : studyPeriod.revisionWeeks;\r\n const planningWeeks = ( userExam.studyPeriodLength - revisionWeeks ) > 1 ? 1 : 0;\r\n \r\n if ( activity === 'planning' ) return planningWeeks;\r\n else if ( activity === 'learning' ) return studyPeriodLength - ( revisionWeeks + planningWeeks );\r\n else return revisionWeeks;\r\n \r\n };\r\n \r\n const updateExamStatus = statusID => {\r\n \r\n hideModal();\r\n \r\n // If an event is selected then dim other buttons, but don't disable them.\r\n const userExam = userExamData.find(item => item.examUNID === examData.UNID);\r\n \r\n if ( typeof userExam !== 'undefined' ) {\r\n \r\n if ( userExam.examSessionUNID === null ) setDimBtns(false);\r\n else setDimBtns(true);\r\n \r\n }\r\n \r\n // Make sure any 'completed' state is removed.\r\n const tmpArr = examsCompleted.filter(item => item.UNID !== examUNID);\r\n \r\n updateCompletedArr(tmpArr);\r\n \r\n // Remove the 'still' class from the stick, this enables setting of maxHeight on\r\n // 'exam-header', 'exam-body' & 'exam-footer', required on mobile when stick closes.\r\n if ( statusID === exemptID || statusID === passedID ) setIsStill(false);\r\n \r\n // Add 'still' class back to 'exam-stick', else sticks won't resize when required.\r\n if ( statusID === takingID || statusID === retakingID || ( statusID === '' && completed === false ) ) setTimeout(() => setIsStill(true), 500);\r\n \r\n const matchingStatus = staticsData.examStatusType.find(item => item.ID === statusID);\r\n const statusLabel = statusID === 0 ? '' : matchingStatus.label;\r\n const statusColor = statusID === 0 ? 'transparent' : 'rgb(' + matchingStatus.color + ')';\r\n \r\n setExamStatus(statusID);\r\n defineExamStatusClass(statusID);\r\n setStatusLabel(statusLabel);\r\n setStatusColor(statusColor);\r\n \r\n //const exSeUNID = typeof userExam !== 'undefined' ? userExam.examSessionUNID : null;\r\n //const stPeLn = typeof userExam !== 'undefined' ? userExam.studyPeriodLength : 0;\r\n \r\n // If 'userExam' is undefined then this is a new exam, certain values don't yet exist.\r\n // Or if 'statusID' is 0 then reset 'examSessionUNID' && 'studyPeriodLength'\r\n const exSeUNID = typeof userExam === 'undefined' || statusID === 0 ? null : userExam.examSessionUNID;\r\n const stPeLn = typeof userExam === 'undefined' || statusID === 0 ? 0 : userExam.studyPeriodLength;\r\n \r\n // Add exam to 'userExamData' array, Context method will check array for duplicates.\r\n updateUserExam({\r\n UNID : new Date().getTime(),\r\n examUNID : examUNID,\r\n examSessionUNID : exSeUNID,\r\n studyPeriodLength : stPeLn,\r\n statusType : statusID\r\n });\r\n \r\n // Show the instructional modal if status is taking/retaking & Section is not 'Ethics Module'.\r\n if ( sectionType !== 3 && \r\n ( statusID === takingID || statusID === retakingID ) ) updateTagExamModalStep2();\r\n \r\n };\r\n \r\n const updateExamSession = (sessionUNID, studyPeriodLength) => {\r\n \r\n hideModal();\r\n \r\n // If an event is selected then dim other buttons, but don't disable them.\r\n if ( sessionUNID === null ) setDimBtns(false);\r\n else setDimBtns(true);\r\n\r\n // Enable the screenshot button, \r\n setScreenshotEnable(true);\r\n \r\n // Get matching userExam which will be updated.\r\n const userExam = userExamData.find(item => item.examUNID === examUNID);\r\n \r\n // Update exam in 'userExamData' array, adding selected Session UNID.\r\n if ( typeof userExam !== 'undefined' &&\r\n userExam.statusType !== 0 ) {\r\n \r\n userExam.examSessionUNID = sessionUNID;\r\n userExam.studyPeriodLength = studyPeriodLength;\r\n \r\n updateUserExam(userExam);\r\n \r\n }\r\n \r\n // Open Instructional modal showing a summary of study periods (only if study periods are set).\r\n if ( studyPeriodLength !== 0 ) showModalExamSummary(studyPeriodLength);\r\n \r\n };\r\n \r\n const gotoStudyPlanner = () => {\r\n \r\n history.push('/study-planner');\r\n \r\n };\r\n \r\n \r\n \r\n \r\n \r\n /*\r\n * Component event handlers.\r\n */\r\n \r\n const onClickAddExamStatusDone = statusID => {\r\n \r\n // If new 'statusID' matches old 'statusID' just close the modal & bail.\r\n const userExam = userExamData.find(item => item.examUNID === examData.UNID);\r\n \r\n if ( typeof userExam !== 'undefined' && \r\n userExam.statusType === statusID ) {\r\n \r\n hideModal();\r\n return;\r\n \r\n }\r\n\r\n // If 'authenticated' update server.\r\n // If 'statusID' is 0 then the exam is marked as no status.\r\n if ( userAuthenticated ) {\r\n \r\n // If 'userExam' is undefined then this is a new exam, certain values don't yet exist.\r\n // Or if 'statusID' is 0 then reset 'examSessionUNID' && 'studyPeriodLength'\r\n const exSeUNID = typeof userExam === 'undefined' || statusID === 0 ? null : userExam.examSessionUNID;\r\n const stPeLn = typeof userExam === 'undefined' || statusID === 0 ? 0 : userExam.studyPeriodLength;\r\n \r\n postDataNoPayload('userexam', { examUNID, statusID }, { userExam: { examUNID, examSessionUNID: exSeUNID, studyPeriodLength: stPeLn, statusType: statusID } });\r\n \r\n }\r\n \r\n // Else only update local data.\r\n else updateExamStatus(statusID);\r\n\r\n };\r\n \r\n const onClickSessionSelectEPSM = sessionUNID => {\r\n \r\n onClickNoPeriod(sessionUNID);\r\n \r\n };\r\n \r\n const onClickSessionSelect = sessionUNID => {\r\n \r\n // If there is not enough time to select a study period\r\n // before the event starts then just highlight the event.\r\n if ( noStudyTime(sessionUNID) ) onClickNoPeriod(sessionUNID);\r\n \r\n // Else allow the user to select a study period.\r\n else showModalExamPeriod(sessionUNID);\r\n \r\n };\r\n \r\n // Close the modal and unselect all sessions,\r\n // if authenticated submit exam data to the server.\r\n const onClickSessionUnselect = () => {\r\n\r\n // If 'authenticated' update server, passing a null sessionUNID.\r\n if ( userAuthenticated ) onClickNoPeriod(null);\r\n \r\n // Else only update local data.\r\n else updateExamSession(null, 0);\r\n\r\n };\r\n\r\n const onClickNoPeriod = sessionUNID => {\r\n \r\n // If 'authenticated' update server.\r\n if ( userAuthenticated ) {\r\n \r\n const requestObj = {\r\n userExamSession: {\r\n examUNID: examUNID,\r\n examSessionUNID: sessionUNID,\r\n studyPeriodLength: 0,\r\n studyPlanningLength: 0,\r\n studyExamLength: 0,\r\n studyTypes: [],\r\n starterTasks : [\r\n staticsData.copy.starterTask1,\r\n staticsData.copy.starterTask2,\r\n staticsData.copy.starterTask3,\r\n staticsData.copy.starterTask4,\r\n staticsData.copy.starterTask5,\r\n staticsData.copy.starterTask6,\r\n staticsData.copy.starterTask7\r\n ]\r\n }\r\n };\r\n \r\n postDataNoPayload('userexam/session', { examUNID, sessionUNID, studyPeriodLength: 0 }, requestObj);\r\n \r\n }\r\n \r\n // Else only update local data.\r\n else updateExamSession(sessionUNID, 0);\r\n \r\n }\r\n \r\n const onClickAddPeriod = (sessionUNID, studyPeriodLength, studyTypesArr) => {\r\n \r\n // If 'authenticated' update server.\r\n if ( userAuthenticated ) {\r\n \r\n const exam = examsData.find(item => item.UNID === examUNID);\r\n const requestObj = {\r\n userExamSession: {\r\n examUNID : examUNID,\r\n examSessionUNID : sessionUNID,\r\n studyPeriodLength : studyPeriodLength,\r\n studyPlanningLength : 0,\r\n studyExamLength : exam.type === 1 ? 4 : 2,\r\n studyTypes : studyTypesArr,\r\n starterTasks : [\r\n staticsData.copy.starterTask1,\r\n staticsData.copy.starterTask2,\r\n staticsData.copy.starterTask3,\r\n staticsData.copy.starterTask4,\r\n staticsData.copy.starterTask5,\r\n staticsData.copy.starterTask6,\r\n staticsData.copy.starterTask7\r\n ]\r\n }\r\n };\r\n \r\n postDataNoPayload('userexam/session', { examUNID, sessionUNID, studyPeriodLength }, requestObj);\r\n \r\n }\r\n \r\n // Else only update local data.\r\n else updateExamSession(sessionUNID, studyPeriodLength);\r\n \r\n }\r\n\r\n // Open a modal & set the status of the current exam (Exempt, Passed, Taking...etc)\r\n const onClickAddExamStatusModal = () => {\r\n \r\n // Open the modal & show content for step 1.\r\n updateAddExamStatusModalStep1();\r\n \r\n };\r\n \r\n // Open a modal & select an event date for the current exam.\r\n // This begins the process to select a study period.\r\n const onClickExamEventModal = sessionUNID => {\r\n \r\n // Open the modal & show content for step 1.\r\n // EM/EPSM has a different modal to all others.\r\n if ( sectionType === 3 ) showModalExamSelectEPSM(sessionUNID);\r\n else {\r\n \r\n const userExam = userExamData.find(item => item.examUNID === examData.UNID);\r\n const noTime = noStudyTime(sessionUNID);\r\n \r\n // If the exam already has a 'examSessionUNID' then we can go straight to 'showModalExamPeriod' skipping the first modal.\r\n if ( noTime ||\r\n userExam.examSessionUNID === null || \r\n userExam.examSessionUNID !== sessionUNID ) showModalExamSelect(sessionUNID);\r\n else showModalExamPeriod(sessionUNID, true);\r\n \r\n }\r\n\r\n };\r\n \r\n // If the 'Plan' button or 'Timeline' bars are clicked & the user is authenticated show the planner intro modal\r\n // else open a modal to ask the user to login before accessing the Study Planner.\r\n const onClickGotoStudyPlanner = () => {\r\n \r\n // Go to Study Planner.\r\n if ( userAuthenticated ) {\r\n \r\n // Fetch the study planner data before showing the info modal.\r\n const userExam = userExamData.find(item => item.examUNID === examData.UNID);\r\n \r\n getStudyDayData('userexam/session', examUNID, userExam.examSessionUNID);\r\n \r\n }\r\n \r\n // Else show login prompt modal.\r\n else {\r\n \r\n // Instructional - define modal content.\r\n const txtTitleA = 'Your ACCA Study planner';\r\n const htmlBody = () => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n };\r\n \r\n // Instructional - initialize modal.\r\n const props = {\r\n status : true,\r\n props : {\r\n type : 1,\r\n size : 'small',\r\n closeOnClickModal : false,\r\n content : {htmlBody()}\r\n }\r\n };\r\n \r\n // Instructional - show modal.\r\n showModal(props);\r\n \r\n }\r\n \r\n };\r\n \r\n // On clicking the exam timeline if the user is logged in go to the Study Planner page,\r\n // else if the user is not logged in open the select Study Periods modal.\r\n const onClickExamTimeline = () => {\r\n \r\n const userExam = userExamData.find(item => item.examUNID === examUNID);\r\n \r\n // Go to Study Planner.\r\n if ( userAuthenticated ) {\r\n \r\n getStudyDayData('userexam/session', examUNID, userExam.examSessionUNID);\r\n \r\n }\r\n \r\n // Open Study Periods modal, skipping the first 2 screens.\r\n else showModalExamPeriod(userExam.examSessionUNID, true);\r\n \r\n };\r\n \r\n // Close the Study Planner intro modal & navigate to the planner page.\r\n const onClickGotoPlan = () => {\r\n \r\n // Instructional - hide modal.\r\n hideModal();\r\n \r\n // Disable modal so it doesn't appear next time the Plan Btn is clicked.\r\n disablePlanBtnModal();\r\n \r\n // Go to Study Planner page.\r\n gotoStudyPlanner();\r\n \r\n };\r\n \r\n \r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n \r\n // On mobile when exam stick shrinks it's content gets squeezed together since\r\n // their heights are set as percentages to allow for different size devices.\r\n // To fix this set a min-height after each stick has been drawn.\r\n setMinHeights();\r\n \r\n // Define the current set of 12 months & years.\r\n setMonthsArr(defineMonthsYears());\r\n \r\n // Get this exams events.\r\n getEvents(examUNID);\r\n\r\n // Make a local copy of this exams data.\r\n setExamData(examsData.find(item => item.UNID === examUNID ));\r\n\r\n // After a delay to let the page load, enable exam stick transitions.\r\n setHasTransition(false);\r\n \r\n setTimeout(() => {\r\n \r\n setHasTransition(true);\r\n \r\n }, 1000);\r\n\r\n // eslint-disable-next-line \r\n }, []);\r\n \r\n useEffect(() => {\r\n \r\n // When local 'examData' & global 'userExamData' are populated check the status of this exam.\r\n if ( examData !== null && userExamData !== null ) {\r\n \r\n // Check whether this exam has been selected by the user.\r\n const userExam = userExamData.find(item => item.examUNID === examUNID);\r\n \r\n if ( typeof userExam !== 'undefined' && \r\n userExam.statusType !== 0 ) {\r\n \r\n const matchingStatus = staticsData.examStatusType.find(item => item.ID === userExam.statusType);\r\n const matchingSession = examsSessionData.find(item => item.UNID === userExam.examSessionUNID);\r\n \r\n if ( typeof matchingSession !== 'undefined' ) setDimBtns(true);\r\n \r\n setExamStatus(userExam.statusType);\r\n defineExamStatusClass(userExam.statusType);\r\n setStatusLabel(matchingStatus.label);\r\n setStatusColor('rgb(' + matchingStatus.color + ')');\r\n \r\n }\r\n \r\n }\r\n\r\n // eslint-disable-next-line \r\n }, [examData, userExamData]);\r\n \r\n useEffect(() => {\r\n \r\n // Update minHeights if browser dimensions change.\r\n setMinHeights();\r\n \r\n // eslint-disable-next-line \r\n }, [winWidth, winHeight]);\r\n \r\n // Exams completed set by checkboxes in modal.\r\n useEffect(() => {\r\n \r\n const exam = examsCompleted.find(item => item.UNID === examUNID);\r\n \r\n if ( typeof exam !== 'undefined' ) {\r\n \r\n setMinHeights();\r\n setIsStill(false);\r\n setCompleted(true);\r\n setDimBtns(false);\r\n setExamStatus(0);\r\n defineExamStatusClass(0);\r\n setStatusLabel('');\r\n setStatusColor('transparent');\r\n \r\n }\r\n else setCompleted(false);\r\n \r\n // eslint-disable-next-line \r\n }, [examsCompleted]);\r\n \r\n // Listen for 'userExamData' changes and reset.\r\n useEffect(() => {\r\n \r\n const userExam = userExamData.find(item => item.examUNID === examUNID);\r\n \r\n if ( typeof userExam === 'undefined' && !completed ) {\r\n \r\n // Reset all local exam props.\r\n setExamStatus(0);\r\n defineExamStatusClass(0);\r\n setStatusLabel('');\r\n setStatusColor('transparent');\r\n setDimBtns(false);\r\n \r\n }\r\n \r\n // eslint-disable-next-line \r\n }, [userExamData]);\r\n \r\n // Listen for 'examStudyDaysData' changes, if data has been added go to the\r\n // next step in showing the Study Planner page.\r\n useEffect(() => {\r\n \r\n if ( examStudyDaysData !== null && \r\n examStudyDaysData.examUNID === examUNID ) {\r\n \r\n gotoStudyPlannerModal();\r\n \r\n }\r\n \r\n // eslint-disable-next-line \r\n }, [examStudyDaysData]);\r\n \r\n // Listen for 'responseStatus' changes and if they are TRUE \r\n // continue updating local model.\r\n useEffect(() => {\r\n \r\n if ( responseStatus !== null && \r\n responseStatus.status === true && \r\n responseStatus.props.examUNID === examUNID ) {\r\n \r\n if ( responseStatus.endPoint === 'userexam' ) updateExamStatus(responseStatus.props.statusID);\r\n if ( responseStatus.endPoint === 'userexam/session' ) updateExamSession(responseStatus.props.sessionUNID, responseStatus.props.studyPeriodLength);\r\n \r\n resetResponseStatus();\r\n \r\n }\r\n \r\n // eslint-disable-next-line \r\n }, [responseStatus]);\r\n \r\n useEffect(() => {\r\n \r\n // If we have a modal open then no need to disable the btns below it.\r\n if ( isVisible ) return;\r\n \r\n setBtnDisabled(curFetching === '' ? false : true);\r\n\r\n // eslint-disable-next-line \r\n }, [curFetching]);\r\n \r\n \r\n\r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n
\r\n );\r\n \r\n \r\n};\r\n\r\nexport default AppBody;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext, useEffect} from 'react';\r\nimport { useHistory, useLocation } from 'react-router-dom';\r\n\r\nimport AuthenticationContext from '../../context/authentication/AuthenticationContext';\r\nimport AppContext from '../../context/app/AppContext';\r\nimport ModalContext from '../../context/modal/ModalContext';\r\nimport TmplInsModal from '../modals/TmplInsModal';\r\nimport ModalContentLogin from '../modals/ModalContentLogin';\r\nimport { ImgLogoTxt,\r\n IconStudyPlanning,\r\n IconExamPlanning } from '../hooks/ImageAssets';\r\nimport useWindowDimensions from '../hooks/getWindowDimensions';\r\n\r\nimport ChevronMidA from '../../assets/img/chevron-mid-a.png';\r\n\r\n\r\n/*\r\n * This AppHeader component only shows on desktop & contains \r\n * the ACCA logo & snapshot button.\r\n */\r\nconst AppHeader = () => {\r\n \r\n \r\n // Reference Context api's.\r\n const authenticationContext = useContext(AuthenticationContext);\r\n const appContext = useContext(AppContext);\r\n const modalContext = useContext(ModalContext);\r\n \r\n // Reference hooks.\r\n const history = useHistory();\r\n const location = useLocation();\r\n \r\n // Get window dimensions.\r\n const { winWidth } = useWindowDimensions();\r\n \r\n // Destructure Context api's.\r\n const { userAuthenticated,\r\n userName,\r\n signInUser,\r\n signOutUser,\r\n clearStudyDaysData } = authenticationContext;\r\n const { isIntro,\r\n screenshotEnable,\r\n modalFtrTxt } = appContext;\r\n const { showModal,\r\n hideModal } = modalContext;\r\n \r\n \r\n // Component state.\r\n //...\r\n \r\n \r\n /*\r\n * Component methods.\r\n */\r\n \r\n const onClickShowInfoModal = () => {\r\n \r\n console.log('location', location);\r\n \r\n // Instructional - define modal content.\r\n const txtTitleA = 'Your ACCA Study planner';\r\n \r\n let htmlBody = null;\r\n let cusFtrTxt = '';\r\n \r\n if ( location.pathname === '/study-planner' ) {\r\n \r\n htmlBody = () => {\r\n return (\r\n
\r\n \r\n { winWidth < 360 ?\r\n
Add day-to-day tasks and milestones
\r\n :\r\n
Add day-to-day tasks and target milestones
\r\n }\r\n \r\n
(Check out the exam curriculum for suggested topics)
\r\n \r\n { winWidth < 360 ?\r\n
Configure Final Steps and Exam Date*
\r\n :\r\n
Configure your Final Steps and Exam Date*
\r\n }\r\n \r\n
*Exact dates for scheduled exam sessions are usually released 6 months prior to the session window
\r\n \r\n { winWidth < 360 ?\r\n
Check off tasks as you go and reflect!
\r\n :\r\n
Check off tasks as you go and reflect on your progress
\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n cusFtrTxt = 'In future releases we\\'ll add the facility to auto-fill tasks and get reminders on your device';\r\n \r\n }\r\n else {\r\n \r\n htmlBody = () => {\r\n return (\r\n
\r\n \r\n
Tap an exam and set it as exempt, passed, taking or retaking
\r\n
Plan out the exams you want to take in the next 12 months
\r\n
Then review the calendar for booking links and preferred exam sessions
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n cusFtrTxt = modalFtrTxt;\r\n \r\n }\r\n\r\n // Instructional - initialize modal.\r\n const props = {\r\n status : true,\r\n props : {\r\n type : 1,\r\n size : 'small',\r\n closeOnClickModal : false,\r\n content : {htmlBody()}\r\n }\r\n };\r\n \r\n // Instructional - show modal.\r\n showModal(props);\r\n \r\n };\r\n \r\n \r\n \r\n \r\n /*\r\n * Component event handlers.\r\n */\r\n \r\n const onClickGoToHome = () => {\r\n \r\n // Clear 'examStudyDaysData' so we fetch new data when returning.\r\n clearStudyDaysData();\r\n \r\n // Navigate to the home page.\r\n history.push('/');\r\n \r\n };\r\n \r\n // When a user click the Study Planning button open a modal notifying them they\r\n // need to login or a modal prompting them to click one of the exam 'Plan' buttons.\r\n const onClickStudyPlanning = () => {\r\n \r\n const txtTitleA = 'Your ACCA Study planner'; \r\n let htmlBody = null;\r\n \r\n // Notify user they need to click a 'Plan' button.\r\n if ( userAuthenticated ) {\r\n \r\n // Instructional - define modal content.\r\n htmlBody = () => {\r\n return (\r\n
\r\n \r\n
To start planning for an exam:
\r\n \r\n
First, select your exam session and add your study period.
\r\n
Then tap that \"Plan!\" tab, or the exam's study period to access your day-to-day Study Planner.
\r\n
And plan for exam success!
\r\n \r\n
\r\n \r\n
\r\n\r\n
\r\n );\r\n };\r\n \r\n }\r\n \r\n // Else prompt user to login then click a 'Plan' button.\r\n else {\r\n \r\n // Instructional - define modal content.\r\n htmlBody = () => {\r\n return (\r\n
\r\n );\r\n \r\n \r\n};\r\n\r\nexport default AppFooter;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext, useEffect} from 'react';\r\n\r\nimport AuthenticationContext from '../../context/authentication/AuthenticationContext';\r\nimport AppContext from '../../context/app/AppContext';\r\nimport ModalContext from '../../context/modal/ModalContext';\r\n\r\n\r\n/*\r\n * This ModalContentPromptLogin component displays the HTML for the prompt user login modal.\r\n * This modal will appear if a user has been logged out but is attempting to call the server.\r\n */\r\nconst ModalContentPromptLogin = ({ statusCodeVal }) => {\r\n \r\n \r\n // Reference Context api's\r\n const authenticationContext = useContext(AuthenticationContext);\r\n const appContext = useContext(AppContext);\r\n const modalContext = useContext(ModalContext);\r\n \r\n // Destructure Context api's.\r\n const { signInUser } = authenticationContext;\r\n const { setIsIntro } = appContext;\r\n const { hideModal } = modalContext;\r\n \r\n // Component state.\r\n //...\r\n \r\n \r\n /*\r\n * Component methods.\r\n */\r\n \r\n const onClickContinue = () => {\r\n \r\n hideModal();\r\n setIsIntro(false);\r\n \r\n };\r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n \r\n //...\r\n \r\n // eslint-disable-next-line \r\n }, []);\r\n\r\n \r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n <> \r\n
\r\n \r\n { statusCodeVal === '403' ? \r\n <>\r\n
You do not have access to the day-to-day Study Planning toolkit
\r\n \r\n :\r\n <>\r\n
You have been logged out
\r\n
To continue planning log in again
\r\n \r\n } \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n This tool is designed for general planning purposes, for detailed information on progression rules and exam availability please refer to the ACCA website.\r\n
\r\n \r\n );\r\n \r\n \r\n};\r\n\r\nexport default ModalContentPromptLogin;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext, useRef, useState, useEffect} from 'react';\r\nimport html2canvas from 'html2canvas';\r\n\r\nimport AuthenticationContext from '../../context/authentication/AuthenticationContext';\r\nimport AppContext from '../../context/app/AppContext';\r\nimport ModalContext from '../../context/modal/ModalContext';\r\nimport AppBody from '../layout/AppBody';\r\nimport AppHeader from '../layout/AppHeader';\r\nimport AppFooter from '../layout/AppFooter';\r\nimport TmplInsModal from '../modals/TmplInsModal';\r\nimport ModalContentLogin from '../modals/ModalContentLogin';\r\nimport ModalContentPromptLogin from '../modals/ModalContentPromptLogin';\r\nimport { IconTick } from '../hooks/ImageAssets';\r\n\r\n\r\n/*\r\n * This Home component contains AppHeader, AppBody & AppFooter layout components.\r\n */\r\nconst Home = () => {\r\n \r\n \r\n // Local non-state variables.\r\n let selectedExams = [];\r\n \r\n // Reference Context api's.\r\n const authenticationContext = useContext(AuthenticationContext);\r\n const appContext = useContext(AppContext);\r\n const modalContext = useContext(ModalContext);\r\n \r\n // Destructure Context api's.\r\n const { userAuthenticated,\r\n examsData,\r\n examsCompleted,\r\n updateCompletedArr } = authenticationContext;\r\n const { isRedirect,\r\n displayType,\r\n isIntro,\r\n isInitialLoad,\r\n setIsIntro,\r\n screenshotStatus,\r\n setScreenshotTgt,\r\n setScreenshotStatus,\r\n modalFtrTxt,\r\n showChkboxModal,\r\n toggleCheckboxModal } = appContext;\r\n const { showModal,\r\n hideModal } = modalContext;\r\n \r\n // Define some DOM reference hooks.\r\n const tgtRef = useRef(null); \r\n \r\n // Component state.\r\n const [isHide, setIsHide] = useState(true);\r\n \r\n // Check sessionStorage to see whether we have been forcibly logged out & should show\r\n // a login prompt when the site reloads.\r\n const showLoginVal = sessionStorage.getItem(\"show_login\") ? true : false;\r\n const statusCodeVal = sessionStorage.getItem(\"status_code\");\r\n \r\n \r\n\r\n /*\r\n * Component methods.\r\n */\r\n \r\n const updateSelectedExams = (event, examsArr) => {\r\n \r\n // If status is checked ADD exams to local 'selectedExams' array.\r\n if ( event.target.checked ) selectedExams = [...selectedExams, ...examsArr];\r\n \r\n // Else REMOVE exams from local 'selectedExams' array\r\n else selectedExams = [...selectedExams.filter(itemA => !examsArr.find(itemB => itemB.UNID === itemA.UNID))]\r\n \r\n };\r\n \r\n const checkExamsCompleted = examsArr => {\r\n \r\n for ( let i = 0; i < examsArr.length; i++ ) {\r\n \r\n const matchingArr = examsCompleted.filter(itemA => examsArr.find(itemB => itemB.UNID === itemA.UNID));\r\n\r\n if ( typeof matchingArr === 'undefined' ) return false;\r\n \r\n if ( matchingArr.length > 0 ) return true;\r\n else return false;\r\n \r\n }\r\n \r\n };\r\n \r\n // Return a line break if device is desktop.\r\n const addBreakOnDskTop = () => {\r\n \r\n if ( displayType === 'dsk' ) return ;\r\n else return '';\r\n \r\n };\r\n \r\n const showModalStep1 = () => {\r\n \r\n // Instructional - define modal content.\r\n const txtTitleA = 'Your ACCA Study planner';\r\n const htmlBody = () => {\r\n return (\r\n
\r\n ));\r\n \r\n };\r\n \r\n \r\n \r\n /*\r\n * Component event handlers.\r\n */\r\n \r\n const onClickDone = () => {\r\n \r\n // Update any changes to the Study Type, locally & async on the server.\r\n if ( curTaskType.ID !== itemData.studyType ) {\r\n \r\n // Update 'studyType' locally.\r\n itemData.studyType = curTaskType.ID;\r\n \r\n // Update 'studyType' on the server.\r\n // This will be ASYNC so post & forget, but if an error does come back handle that.\r\n putDataNoPayload('userexam/session/day/type', { itemUNID: itemData.UNID }, { userExamSessionDay: { UNID: itemData.UNID, studyType: curTaskType.ID } });\r\n \r\n }\r\n \r\n // Update any changes to the Milestone status, locally & async on the server.\r\n if ( hasMilestone !== itemData.milestoneType ) {\r\n \r\n // Update 'milestoneType' locally.\r\n itemData.milestoneType = hasMilestone;\r\n \r\n // Update 'milestoneType' on the server.\r\n // This will be ASYNC so post & forget, but if an error does come back handle that.\r\n putDataNoPayload('userexam/session/day/milestone', { itemUNID: itemData.UNID }, { userExamSessionDay: { UNID: itemData.UNID, milestoneType: hasMilestone } });\r\n \r\n }\r\n \r\n // Close modal.\r\n hideModal();\r\n \r\n };\r\n \r\n const onClickSelectorOption = val => {\r\n \r\n // Update type object.\r\n let selType = taskTypesArr.find(item => item.ID === val.ID);\r\n \r\n setCurTaskType(selType);\r\n setShowSelector(false);\r\n \r\n };\r\n \r\n const onClickAddTask = () => {\r\n \r\n // Bail if max number of tasks is exceeded.\r\n if ( taskListArr.length >= maxNumTasks ) return;\r\n \r\n // Note that this is an add task so we can jump scroller to end.\r\n setIsAddTask(true);\r\n \r\n const tmpUNID = new Date().getTime();\r\n \r\n // Create a new task object.\r\n const newTask = {\r\n UNID : tmpUNID,\r\n userExamStudyDayUNID : itemData.UNID,\r\n title : newTaskText,\r\n completed : 0\r\n };\r\n\r\n // Add new task to local array.\r\n addStudyDayTask(newTask);\r\n \r\n // Add new task to the server.\r\n addServerTask({\r\n endPoint : 'userexam/session/task',\r\n requestObj : {\r\n userExamSessionTask: {\r\n userExamStudyDayUNID : itemData.UNID,\r\n title : newTaskText\r\n }\r\n },\r\n taskUNID : tmpUNID\r\n });\r\n\r\n // Clear current task in the new text textarea.\r\n setNewTaskText('');\r\n \r\n // Set focus on the new text textarea, if it exists.\r\n if ( newTextRef !== null ) newTextRef.current.focus();\r\n \r\n };\r\n \r\n const onChangeTaskText = (event, taskUNID, text) => {\r\n \r\n const task = taskListArr.find(item => item.UNID === taskUNID);\r\n \r\n task.title = text;\r\n \r\n // Update local task state.\r\n updateStudyDayTask(task);\r\n \r\n // Also update height of text area to match content.\r\n event.currentTarget.style.height = event.currentTarget.scrollHeight + 'px';\r\n \r\n };\r\n \r\n const onFocusTaskText = (event, taskUNID, text) => {\r\n \r\n // Store text value of currently focused task, when user finished\r\n // editing only post to the server if it has changed.\r\n setDirtyText(text);\r\n \r\n };\r\n \r\n const onBlurTaskText = (event, taskUNID, text) => {\r\n \r\n // If text was not changed bail.\r\n if ( dirtyText === text ) return;\r\n \r\n // Update task on the server.\r\n updateServerTask({\r\n endPoint : 'userexam/session/task/title',\r\n requestObj : {\r\n userExamSessionTask: {\r\n UNID : taskUNID,\r\n title : text\r\n }\r\n },\r\n taskUNID : taskUNID\r\n });\r\n \r\n };\r\n \r\n const onKeyDownTaskText = (event, taskUNID, text) => {\r\n \r\n if ( event.key === 'Enter' ) {\r\n \r\n event.preventDefault();\r\n \r\n // If text was not changed bail.\r\n if ( dirtyText === text ) return;\r\n \r\n // Update task on the server.\r\n updateServerTask({\r\n endPoint : 'userexam/session/task/title',\r\n requestObj : {\r\n userExamSessionTask: {\r\n UNID : taskUNID,\r\n title : text\r\n }\r\n },\r\n taskUNID : taskUNID\r\n });\r\n \r\n // Blur current textarea.\r\n event.currentTarget.blur();\r\n \r\n }\r\n \r\n };\r\n \r\n const onKeyDownTaskSubmit = (event) => {\r\n \r\n if ( event.key === 'Enter' ) {\r\n \r\n event.preventDefault();\r\n \r\n // If textarea is empty, bail.\r\n if ( newTaskText === '' ) return;\r\n \r\n // Update task on the server.\r\n onClickAddTask();\r\n \r\n }\r\n \r\n };\r\n \r\n const onClickDeleteTask = (taskUNID, idx) => {\r\n \r\n // Hide the red delete confirm buttons.\r\n setConfirmBtnIdx(null);\r\n \r\n // Delete the task.\r\n if ( taskUNID !== null ) {\r\n \r\n // Remove task from local array.\r\n deleteStudyDayTask(taskUNID);\r\n \r\n // Update task on the server.\r\n // Status 0 means make the task inactive, akin to deleting it.\r\n updateServerTask({\r\n endPoint : 'userexam/session/task/status',\r\n requestObj : {\r\n userExamSessionTask: {\r\n UNID : taskUNID,\r\n status : 0\r\n }\r\n },\r\n taskUNID : taskUNID\r\n });\r\n \r\n }\r\n\r\n };\r\n \r\n const onClickTaskCompleted = taskUNID => {\r\n \r\n const matchingTask = taskListArr.find(item => item.UNID === taskUNID);\r\n const clonedTask = {...matchingTask};\r\n const newState = clonedTask.completed === 0 ? 1 : 0;\r\n \r\n clonedTask.completed = newState;\r\n \r\n // Update local task state.\r\n updateStudyDayTask(clonedTask);\r\n \r\n // Update task on the server.\r\n updateServerTask({\r\n endPoint : 'userexam/session/task/completed',\r\n requestObj : {\r\n userExamSessionTask: {\r\n UNID : taskUNID,\r\n completed : newState\r\n }\r\n },\r\n taskUNID : taskUNID\r\n });\r\n\r\n };\r\n \r\n\r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n\r\n // Define the task types array.\r\n setTaskTypesArr(staticsData.studyActivityType);\r\n\r\n // Set local hasMilestone to match items milestone state.\r\n setHasMilestone(itemData.milestoneType);\r\n \r\n // Set height's of task textarea's to match content.\r\n // Manipulate DOM in a timeout, otherwise the refs aren't ready.\r\n setTimeout(setTaskHeights, 50);\r\n \r\n // Auto scroll the tasks window to the bottom, so the new task area is visible.\r\n setTimeout(() => {\r\n \r\n scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;\r\n \r\n }, 100);\r\n \r\n \r\n // eslint-disable-next-line \r\n }, []);\r\n \r\n useEffect(() => {\r\n \r\n // Set the current task type.\r\n if ( taskTypesArr.length > 0 ) {\r\n \r\n const curType = taskTypesArr.find(item => item.ID === itemData.studyType);\r\n \r\n setCurTaskType(curType);\r\n \r\n }\r\n \r\n // eslint-disable-next-line \r\n }, [taskTypesArr]);\r\n \r\n useEffect(() => {\r\n \r\n // Toggle document clicks to close a selector drop down \r\n // when the selector has opened.\r\n if ( showSelector ) toggleDocClicks(true);\r\n \r\n // eslint-disable-next-line \r\n }, [showSelector]);\r\n \r\n useEffect(() => {\r\n \r\n // If document was clicked & we are not on the toggle button then close this popover.\r\n if ( docClicked && docClickedTgt !== toggleBtnRef.current ) {\r\n \r\n setShowSelector(false);\r\n \r\n }\r\n\r\n // eslint-disable-next-line \r\n }, [docClicked, docClickedTgt]);\r\n \r\n useEffect(() => {\r\n\r\n // Update the task list array for this day.\r\n filterDaysTasks();\r\n\r\n // eslint-disable-next-line \r\n }, [studyTasksData]);\r\n \r\n useEffect(() => {\r\n\r\n //Set height's of task textarea's to match content.\r\n setTaskHeights();\r\n \r\n if ( isAddTask ) {\r\n \r\n // Reset isAddTask so that scroller doesn't jump when editing or ticking tasks.\r\n setIsAddTask(false);\r\n \r\n // Auto scroll the tasks window to the bottom, so the new task area is visible.\r\n scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;\r\n \r\n }\r\n\r\n // eslint-disable-next-line \r\n }, [taskListArr]);\r\n\r\n\r\n \r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n
\r\n );\r\n \r\n \r\n};\r\n\r\nexport default StudyPlanner;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext } from 'react';\r\nimport { Dialog } from 'element-react';\r\n\r\nimport ModalContext from '../../context/modal/ModalContext';\r\n\r\n\r\n/*\r\n * This Modal component displays both the Instructional & System dialog modals.\r\n */\r\nconst Modal = () => {\r\n \r\n \r\n // Reference Context API's. \r\n const modalContext = useContext(ModalContext);\r\n \r\n // Destructure Context API's. \r\n const { isVisible,\r\n props,\r\n hideModal } = modalContext;\r\n \r\n \r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n \r\n );\r\n \r\n \r\n};\r\n\r\nexport default Modal;\r\n\r\n/*** Scripts end... */","import React from 'react';\r\n\r\n\r\n/*\r\n * This AppSpinner component displays a spinning white circle,\r\n * used when the app is loading initial authentication & data.\r\n */\r\nconst AppSpinner = () => {\r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n \r\n \r\n};\r\n\r\nexport default AppSpinner;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React from 'react';\r\n\r\nimport { ImgQuadx3 } from '../hooks/ImageAssets';\r\n\r\n\r\n/*\r\n * This Intro component appears when the site first loads in the browser &\r\n * shows the ACCA brand animation, then redirects to the Home page.\r\n */\r\nconst Intro = () => {\r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n
\r\n \r\n {/* Intro animation: START */}\r\n
\r\n
\r\n
\r\n Compass\r\n {ImgQuadx3()}\r\n
\r\n
\r\n Your ACCA Study planner\r\n
\r\n
\r\n
\r\n {/* Intro animation: STOP */}\r\n \r\n
\r\n );\r\n \r\n \r\n};\r\n\r\nexport default Intro;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';\r\n\r\nimport AuthenticationContext from '../../context/authentication/AuthenticationContext';\r\nimport AppContext from '../../context/app/AppContext';\r\nimport ProtectedRoute from '../hooks/ProtectedRoute';\r\nimport Home from '../pages/Home';\r\nimport ErrorPage from '../pages/ErrorPage';\r\nimport StudyPlanner from '../pages/StudyPlanner';\r\nimport Modal from '../modals/Modal';\r\nimport AppSpinner from './AppSpinner';\r\nimport Intro from './Intro';\r\n\r\n\r\n/*\r\n * This AppWrapper component wraps the routing component & \r\n * allows the app to load data & the authentication module using the Context API.\r\n */\r\nconst AppWrapper = () => {\r\n \r\n \r\n // Reference Context API's. \r\n const authenticationContext = useContext(AuthenticationContext);\r\n const appContext = useContext(AppContext);\r\n \r\n // Destructure Context API's. \r\n const { publicClientApplication,\r\n examsData } = authenticationContext;\r\n const { setIsRedirect } = appContext;\r\n \r\n // Component state.\r\n const [introEnd, setIntroEnd] = useState(false);\r\n \r\n // Check session storage to see if we have been redirected from login/logout.\r\n const redirectVal = sessionStorage.getItem(\"is_redirect\") ? true : false;\r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n \r\n setIsRedirect(redirectVal);\r\n \r\n // If redirect is true then clear 'is_redirect' key from session storage.\r\n // As we won't be showing the animation update 'setIntroEnd' to true.\r\n if ( redirectVal ) {\r\n \r\n sessionStorage.removeItem(\"is_redirect\");\r\n setIntroEnd(true);\r\n \r\n }\r\n \r\n // Else delay page render until intro animation has played.\r\n else {\r\n \r\n setTimeout(() => {\r\n \r\n setIntroEnd(true)\r\n \r\n }, 3500);\r\n \r\n }\r\n\r\n // eslint-disable-next-line\r\n }, []);\r\n\r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n <>\r\n { publicClientApplication !== null && examsData !== null ? \r\n <>\r\n { redirectVal ?\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n :\r\n <>\r\n { introEnd ?\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n :\r\n \r\n }\r\n \r\n }\r\n \r\n :\r\n \r\n }\r\n \r\n );\r\n \r\n \r\n};\r\n\r\nexport default AppWrapper;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport { useHistory, useLocation } from 'react-router-dom';\r\n\r\nimport AuthenticationContext from '../../context/authentication/AuthenticationContext';\r\nimport ModalContext from '../../context/modal/ModalContext';\r\nimport TmplInsModal from '../modals/TmplInsModal';\r\nimport ModalContentPromptLogin from '../modals/ModalContentPromptLogin';\r\n\r\n\r\n/*\r\n * This ErrorBox component dispalys any error messages returned by the server.\r\n */\r\nconst ErrorBox = () => {\r\n \r\n \r\n // Reference Context api's.\r\n const authenticationContext = useContext(AuthenticationContext);\r\n const modalContext = useContext(ModalContext);\r\n \r\n // Destructure Context api's.\r\n const { fetchError,\r\n clearFetchError,\r\n signOutUser } = authenticationContext;\r\n const { isVisible,\r\n showModal,\r\n hideModal } = modalContext;\r\n \r\n // Reference hooks.\r\n const history = useHistory();\r\n \r\n // Component state.\r\n const [errorMsg, setErrorMsg] = useState('');\r\n \r\n \r\n /*\r\n * Component methods.\r\n */\r\n \r\n const setErrorServer = () => {\r\n \r\n console.log('errorCode:', fetchError.code);\r\n console.log('errorDescription:', fetchError.description);\r\n \r\n setErrorMsg(fetchError.description);\r\n \r\n // Hide the error msg after a set period of time.\r\n setTimeout(clearError, 5000);\r\n \r\n };\r\n \r\n const setErrorHTTP = () => {\r\n \r\n let description = '';\r\n \r\n switch (fetchError.code) {\r\n case 400:\r\n description = 'Unable to complete your request.'; \r\n break;\r\n case 401:\r\n signOutUser(401);\r\n break;\r\n case 403:\r\n signOutUser(403);\r\n break;\r\n case 404:\r\n history.push('/error');\r\n break;\r\n case 415:\r\n description = 'Invalid request format.'; \r\n break;\r\n case 429:\r\n description = 'Too many requests, try again later.'; \r\n break;\r\n case 500:\r\n description = 'There was an internal server error. Try again later.'; \r\n break;\r\n default:\r\n description = 'Server error, please try again later.';\r\n }\r\n \r\n if ( fetchError.code !== 404 ) {\r\n\r\n // Set error message & hide it after a short delay.\r\n setErrorMsg(description);\r\n setTimeout(clearError, 5000);\r\n \r\n }\r\n \r\n \r\n };\r\n \r\n const clearError = () => {\r\n \r\n setErrorMsg('');\r\n clearFetchError();\r\n \r\n };\r\n \r\n const promptToLogin = () => {\r\n \r\n // Instructional - define modal content.\r\n const txtTitleA = 'Your ACCA Study planner';\r\n const htmlBody = () => ;\r\n \r\n // Instructional - initialize modal.\r\n const props = {\r\n status : true,\r\n props : {\r\n type : 1,\r\n size : 'small',\r\n closeOnClickModal : false,\r\n content : {htmlBody()}\r\n }\r\n };\r\n \r\n // Instructional - show modal.\r\n showModal(props);\r\n \r\n };\r\n \r\n \r\n \r\n /*\r\n * Component hooks.\r\n */\r\n \r\n useEffect(() => {\r\n \r\n if ( fetchError !== null ) {\r\n \r\n // If we have an open modal then hide it following API call response.\r\n if ( typeof fetchError.req !== 'undefined' && \r\n isVisible ) {\r\n \r\n if ( fetchError.req.endPoint === 'userexam' ||\r\n fetchError.req.endPoint === 'userexam/session' ) hideModal();\r\n \r\n }\r\n \r\n // Handle error type.\r\n if ( fetchError.type === 'server' ) setErrorServer();\r\n else if ( fetchError.type === 'http' ) setErrorHTTP();\r\n else if ( fetchError.type === 'loggedout' ) promptToLogin();\r\n \r\n }\r\n else setErrorMsg('');\r\n \r\n // eslint-disable-next-line \r\n }, [fetchError]);\r\n\r\n\r\n \r\n \r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n
\r\n
\r\n {errorMsg}\r\n
\r\n
\r\n );\r\n \r\n \r\n};\r\n\r\nexport default ErrorBox;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React from 'react';\r\n\r\nimport AllContexts from './context/AllContexts';\r\nimport PreRender from './components/layout/PreRender';\r\nimport AppWrapper from './components/layout/AppWrapper';\r\nimport ErrorBox from './components/layout/ErrorBox';\r\n\r\nimport 'element-theme-default';\r\nimport './App.css';\r\n\r\n\r\nconst App = () => {\r\n\r\n \r\n /*\r\n * Component view.\r\n */\r\n \r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n \r\n \r\n};\r\n\r\nexport default App;\r\n\r\n\r\n/*** Scripts end... */\r\n","const reportWebVitals = onPerfEntry => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n\r\n\r\n/*** Scripts end... */\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from './App';\r\nimport reportWebVitals from './reportWebVitals';\r\n\r\n \r\nReactDOM.render(\r\n ,\r\n document.getElementById('app-root')\r\n);\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n\r\n\r\n/*** Scripts end... */\r\n"],"sourceRoot":""}