CORE-5076: add sdg pdf checker

oacore · Dec 10, 2024 · 1690e0b · 1690e0b
1 parent 90fa98d
commit 1690e0b
Show file tree

Hide file tree

Showing 29 changed files with 1,153 additions and 189 deletions.
diff --git a/components/pdf-upload/defaultUpload.jsx b/components/pdf-upload/defaultUpload.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Button } from '@oacore/design'
 import { ProgressSpinner } from '@oacore/design/lib/elements'
+import { useRouter } from 'next/router'
 
 import text from '../../data/retention.yml'
 import uploadSvg from '../../public/images/logos/upload.svg'
@@ -12,50 +13,57 @@ const DefaultUploadView = ({
   handleFileChange,
   rrsPdfLoading,
   fileName,
-}) => (
-  <div className={styles.uploadWrapper}>
-    <h3 className={styles.uploadTitle}>{text.upload.default.title}</h3>
-    {rrsPdfLoading ? (
-      <div className={styles.innerWrapper}>
-        <div className={styles.spinnerWrapper}>
-          <ProgressSpinner className={styles.spinner} />
+}) => {
+  const router = useRouter()
+  const defaultText = router.pathname.includes('sdg')
+    ? text.upload.sdgDefault
+    : text.upload.default
+
+  return (
+    <div className={styles.uploadWrapper}>
+      <h3 className={styles.uploadTitle}>{defaultText.title}</h3>
+      {rrsPdfLoading ? (
+        <div className={styles.innerWrapper}>
+          <div className={styles.spinnerWrapper}>
+            <ProgressSpinner className={styles.spinner} />
+          </div>
+          <h6 className={styles.fileName}>{fileName}</h6>
         </div>
-        <h6 className={styles.fileName}>{fileName}</h6>
-      </div>
-    ) : (
-      /* eslint-disable-next-line max-len */
-      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
-      <div className={styles.innerWrapper} onClick={handleClick}>
-        <img
-          src={uploadSvg}
-          alt="Upload Icon"
-          style={{ width: '50px', height: '50px', marginBottom: '10px' }}
-        />
-        <p className={styles.innerTitle}>{text.upload.default.subTitle}</p>
-        <input
-          ref={uploadRef}
-          type="file"
-          id="fileInput"
-          accept="application/pdf"
-          onChange={handleFileChange}
-          className={styles.display}
-          hidden
-        />
-        <p className={styles.connector}>- OR -</p>
-        <Button
-          disabled={rrsPdfLoading}
-          onClick={handleClick}
-          variant="contained"
-        >
-          {text.upload.default.action.title}
-        </Button>
+      ) : (
+        /* eslint-disable-next-line max-len */
+        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+        <div className={styles.innerWrapper} onClick={handleClick}>
+          <img
+            src={uploadSvg}
+            alt="Upload Icon"
+            style={{ width: '50px', height: '50px', marginBottom: '10px' }}
+          />
+          <p className={styles.innerTitle}>{text.upload.default.subTitle}</p>
+          <input
+            ref={uploadRef}
+            type="file"
+            id="fileInput"
+            accept="application/pdf"
+            onChange={handleFileChange}
+            className={styles.display}
+            hidden
+          />
+          <p className={styles.connector}>- OR -</p>
+          <Button
+            disabled={rrsPdfLoading}
+            onClick={handleClick}
+            variant="contained"
+          >
+            {text.upload.default.action.title}
+          </Button>
+        </div>
+      )}
+      <div className={styles.uploadFooter}>
+        <span className={styles.footerText}>{text.upload.subInfo.format}</span>
+        <span className={styles.footerText}>{text.upload.subInfo.size}</span>
       </div>
-    )}
-    <div className={styles.uploadFooter}>
-      <span className={styles.footerText}>{text.upload.subInfo.format}</span>
-      <span className={styles.footerText}>{text.upload.subInfo.size}</span>
     </div>
-  </div>
-)
+  )
+}
 
 export default DefaultUploadView
diff --git a/components/pdf-upload/formatUpload.jsx b/components/pdf-upload/formatUpload.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Button } from '@oacore/design'
 import { ProgressSpinner } from '@oacore/design/lib/elements'
+import { useRouter } from 'next/router'
 
 import text from '../../data/retention.yml'
 import styles from './styles.module.scss'
@@ -11,51 +12,60 @@ const FormatUploadIssue = ({
   uploadRef,
   rrsPdfLoading,
   fileName,
-}) => (
-  <div className={styles.uploadWrapper}>
-    <div className={styles.titleWrapper}>
-      {!rrsPdfLoading ? (
-        <>
-          <img src={text.upload.noSupport.image} alt="issueSvg" />
-          <h3 className={styles.uploadTitle}>{text.upload.noSupport.title}</h3>
-        </>
+}) => {
+  const router = useRouter()
+  const defaultText = router.pathname.includes('sdg')
+    ? text.upload.sdgDefault
+    : text.upload.default
+
+  return (
+    <div className={styles.uploadWrapper}>
+      <div className={styles.titleWrapper}>
+        {!rrsPdfLoading ? (
+          <>
+            <img src={text.upload.noSupport.image} alt="issueSvg" />
+            <h3 className={styles.uploadTitle}>
+              {text.upload.noSupport.title}
+            </h3>
+          </>
+        ) : (
+          <h3 className={styles.uploadTitle}>{defaultText.title}</h3>
+        )}
+      </div>
+      {rrsPdfLoading ? (
+        <div className={styles.innerWrapper}>
+          <div className={styles.spinnerWrapper}>
+            <ProgressSpinner className={styles.spinner} />
+          </div>
+          <h6 className={styles.fileName}>{fileName}</h6>
+        </div>
       ) : (
-        <h3 className={styles.uploadTitle}>{text.upload.default.title}</h3>
-      )}
-    </div>
-    {rrsPdfLoading ? (
-      <div className={styles.innerWrapper}>
-        <div className={styles.spinnerWrapper}>
-          <ProgressSpinner className={styles.spinner} />
+        <div className={styles.innerIssueWrapper}>
+          <span className={styles.innerIssueTitle}>
+            {text.upload.subInfo.format}
+          </span>
+          <input
+            ref={uploadRef}
+            type="file"
+            id="fileInput"
+            accept="application/pdf"
+            onChange={handleFileChange}
+            className={styles.display}
+            hidden
+          />
         </div>
-        <h6 className={styles.fileName}>{fileName}</h6>
-      </div>
-    ) : (
-      <div className={styles.innerIssueWrapper}>
-        <span className={styles.innerIssueTitle}>
-          {text.upload.subInfo.format}
-        </span>
-        <input
-          ref={uploadRef}
-          type="file"
-          id="fileInput"
-          accept="application/pdf"
-          onChange={handleFileChange}
-          className={styles.display}
-          hidden
-        />
+      )}
+      <div className={styles.uploadIssueFooter}>
+        <Button
+          disabled={rrsPdfLoading}
+          onClick={handleClick}
+          variant="contained"
+        >
+          {text.upload.noSupport.action}
+        </Button>
       </div>
-    )}
-    <div className={styles.uploadIssueFooter}>
-      <Button
-        disabled={rrsPdfLoading}
-        onClick={handleClick}
-        variant="contained"
-      >
-        {text.upload.noSupport.action}
-      </Button>
     </div>
-  </div>
-)
+  )
+}
 
 export default FormatUploadIssue
diff --git a/components/pdf-upload/index.jsx b/components/pdf-upload/index.jsx
@@ -1,17 +1,24 @@
 import React, { useState, useRef, useEffect } from 'react'
+import { useRouter } from 'next/router'
 
 import DefaultUploadView from './defaultUpload'
 import FormatUploadIssue from './formatUpload'
 import SizeUploadIssue from './sizeUploadIssue'
 import styles from './styles.module.scss'
 import UploadSuccess from './uploadSuccess'
 import UploadFail from './uploadFail'
+import SdgUploadSuccess from './sdgUploadSuccess'
 
-const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
+const RrsCheckCard = ({
+  uploadPdf,
+  uploadResults,
+  rrsPdfLoading,
+  sdgTypes,
+}) => {
   const uploadRef = useRef(null)
   const [fileName, setFileName] = useState('')
-
   const [currentView, setCurrentView] = useState('default')
+  const router = useRouter()
 
   const handleClick = () => {
     uploadRef.current.click()
@@ -22,12 +29,16 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
   }
 
   useEffect(() => {
+    const results = Array.isArray(uploadResults) ? uploadResults : []
+    if (results.some((result) => result.predictions)) setCurrentView('success')
     if (uploadResults.rightsRetentionSentence) setCurrentView('success')
     if (
       !uploadResults.rightsRetentionSentence &&
       uploadResults.confidence === 0
     )
       setCurrentView('fail')
+    if (results.some((result) => result.predictions === null))
+      setCurrentView('fail')
   }, [uploadResults])
 
   const handleFileChange = (event) => {
@@ -40,7 +51,7 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
     if (files && files.length) {
       // eslint-disable-next-line prefer-destructuring
       file = files[0]
-      uploadPdf(file, 1)
+      uploadPdf(file)
       setFileName(file.name)
       if (file.size > 10 * 1024 * 1024) {
         setCurrentView('sizeIssue')
@@ -96,21 +107,34 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
         />
       )}
       {currentView === 'success' && (
-        <UploadSuccess
-          uploadRef={uploadRef}
-          handleClick={handleClick}
-          handleFileChange={handleFileChange}
-          uploadResults={uploadResults}
-          rrsPdfLoading={rrsPdfLoading}
-          fileName={fileName}
-        />
+        <>
+          {router.pathname.includes('sdg') ? (
+            <SdgUploadSuccess
+              uploadRef={uploadRef}
+              handleClick={handleClick}
+              handleFileChange={handleFileChange}
+              uploadResults={uploadResults}
+              rrsPdfLoading={rrsPdfLoading}
+              fileName={fileName}
+              sdgTypes={sdgTypes}
+            />
+          ) : (
+            <UploadSuccess
+              uploadRef={uploadRef}
+              handleClick={handleClick}
+              handleFileChange={handleFileChange}
+              uploadResults={uploadResults}
+              rrsPdfLoading={rrsPdfLoading}
+              fileName={fileName}
+            />
+          )}
+        </>
       )}
       {currentView === 'fail' && (
         <UploadFail
           uploadRef={uploadRef}
           handleClick={handleClick}
           handleFileChange={handleFileChange}
-          uploadResults={uploadResults}
           rrsPdfLoading={rrsPdfLoading}
           fileName={fileName}
         />

diff --git a/components/pdf-upload/sdgUploadSuccess.jsx b/components/pdf-upload/sdgUploadSuccess.jsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { Button } from '@oacore/design'
+import { ProgressSpinner } from '@oacore/design/lib/elements'
+
+import text from '../../data/retention.yml'
+import styles from './styles.module.scss'
+
+const SdgUploadSuccess = ({
+  handleClick,
+  handleFileChange,
+  uploadRef,
+  uploadResults,
+  rrsPdfLoading,
+  fileName,
+  sdgTypes,
+}) => (
+  <div className={styles.uploadWrapper}>
+    {!rrsPdfLoading ? (
+      <>
+        <div className={styles.successWrapper}>
+          <div className={styles.titleWrapper}>
+            <img src={text.upload.success.image} alt="issueSvg" />
+            <h3 className={styles.uploadTitle}>
+              {text.upload.sdgSuccess.title}
+            </h3>
+          </div>
+        </div>
+      </>
+    ) : (
+      <h3 className={styles.uploadTitle}>{text.upload.sdgDefault.title}</h3>
+    )}
+    {rrsPdfLoading ? (
+      <div className={styles.innerWrapper}>
+        <div className={styles.spinnerWrapper}>
+          <ProgressSpinner className={styles.spinner} />
+        </div>
+        <h6 className={styles.fileName}>{fileName}</h6>
+      </div>
+    ) : (
+      <div className={styles.innerIssueWrapper}>
+        <div className={styles.sdgWrapper}>
+          {text.upload.sdgSuccess.description}
+          {uploadResults.map((item) => {
+            const sdgType = sdgTypes.find(
+              (type) => type.id === item.predictions
+            )
+            return (
+              <div className={styles.sdgItem} key={item.predictions}>
+                <div className={styles.imgWrapper}>
+                  <img src={sdgType.icon} alt={sdgType.title} />
+                </div>
+                <div>{item.confidence_score}</div>
+              </div>
+            )
+          })}
+        </div>
+        <input
+          ref={uploadRef}
+          type="file"
+          id="fileInput"
+          accept="application/pdf"
+          onChange={handleFileChange}
+          className={styles.display}
+          hidden
+        />
+      </div>
+    )}
+    <div className={styles.uploadFooterButton}>
+      <Button
+        disabled={rrsPdfLoading}
+        onClick={handleClick}
+        variant="contained"
+      >
+        {text.upload.success.action.title}
+      </Button>
+    </div>
+  </div>
+)
+
+export default SdgUploadSuccess