diff --git a/components/pdf-upload/defaultUpload.jsx b/components/pdf-upload/defaultUpload.jsx index 3e1d6151..1264914a 100644 --- 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, -}) => ( -
-

{text.upload.default.title}

- {rrsPdfLoading ? ( -
-
- +}) => { + const router = useRouter() + const defaultText = router.pathname.includes('sdg') + ? text.upload.sdgDefault + : text.upload.default + + return ( +
+

{defaultText.title}

+ {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
-
{fileName}
-
- ) : ( - /* eslint-disable-next-line max-len */ - /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */ -
- Upload Icon -

{text.upload.default.subTitle}

- -

- OR -

- + ) : ( + /* eslint-disable-next-line max-len */ + /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */ +
+ Upload Icon +

{text.upload.default.subTitle}

+ +

- OR -

+ +
+ )} +
+ {text.upload.subInfo.format} + {text.upload.subInfo.size}
- )} -
- {text.upload.subInfo.format} - {text.upload.subInfo.size}
-
-) + ) +} export default DefaultUploadView diff --git a/components/pdf-upload/formatUpload.jsx b/components/pdf-upload/formatUpload.jsx index 8d11ac0b..2accff98 100644 --- 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, -}) => ( -
-
- {!rrsPdfLoading ? ( - <> - issueSvg -

{text.upload.noSupport.title}

- +}) => { + const router = useRouter() + const defaultText = router.pathname.includes('sdg') + ? text.upload.sdgDefault + : text.upload.default + + return ( +
+
+ {!rrsPdfLoading ? ( + <> + issueSvg +

+ {text.upload.noSupport.title} +

+ + ) : ( +

{defaultText.title}

+ )} +
+ {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
+
) : ( -

{text.upload.default.title}

- )} -
- {rrsPdfLoading ? ( -
-
- +
+ + {text.upload.subInfo.format} + +
-
{fileName}
-
- ) : ( -
- - {text.upload.subInfo.format} - - + )} +
+
- )} -
-
-
-) + ) +} export default FormatUploadIssue diff --git a/components/pdf-upload/index.jsx b/components/pdf-upload/index.jsx index e7be632c..a1b0042e 100644 --- a/components/pdf-upload/index.jsx +++ b/components/pdf-upload/index.jsx @@ -1,4 +1,5 @@ import React, { useState, useRef, useEffect } from 'react' +import { useRouter } from 'next/router' import DefaultUploadView from './defaultUpload' import FormatUploadIssue from './formatUpload' @@ -6,12 +7,18 @@ 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' && ( - + <> + {router.pathname.includes('sdg') ? ( + + ) : ( + + )} + )} {currentView === 'fail' && ( diff --git a/components/pdf-upload/sdgUploadSuccess.jsx b/components/pdf-upload/sdgUploadSuccess.jsx new file mode 100644 index 00000000..9ddefd5a --- /dev/null +++ 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, +}) => ( +
+ {!rrsPdfLoading ? ( + <> +
+
+ issueSvg +

+ {text.upload.sdgSuccess.title} +

+
+
+ + ) : ( +

{text.upload.sdgDefault.title}

+ )} + {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
+
+ ) : ( +
+
+ {text.upload.sdgSuccess.description} + {uploadResults.map((item) => { + const sdgType = sdgTypes.find( + (type) => type.id === item.predictions + ) + return ( +
+
+ {sdgType.title} +
+
{item.confidence_score}
+
+ ) + })} +
+ +
+ )} +
+ +
+
+) + +export default SdgUploadSuccess diff --git a/components/pdf-upload/sizeUploadIssue.jsx b/components/pdf-upload/sizeUploadIssue.jsx index dc53cad5..a320bf28 100644 --- a/components/pdf-upload/sizeUploadIssue.jsx +++ b/components/pdf-upload/sizeUploadIssue.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,53 +12,59 @@ const SizeUploadIssue = ({ uploadRef, rrsPdfLoading, fileName, -}) => ( -
-
- {!rrsPdfLoading ? ( - <> - issueSvg -

- {text.upload.noSupport.sizeTitle} -

- +}) => { + const router = useRouter() + const defaultText = router.pathname.includes('sdg') + ? text.upload.sdgDefault + : text.upload.default + return ( +
+
+ {!rrsPdfLoading ? ( + <> + issueSvg +

+ {text.upload.noSupport.sizeTitle} +

+ + ) : ( +

{defaultText.title}

+ )} +
+ {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
+
) : ( -

{text.upload.default.title}

- )} -
- {rrsPdfLoading ? ( -
-
- +
+ + {text.upload.subInfo.size} + +
-
{fileName}
-
- ) : ( -
- - {text.upload.subInfo.size} - - + )} +
+
- )} -
-
-
-) + ) +} export default SizeUploadIssue diff --git a/components/pdf-upload/styles.module.scss b/components/pdf-upload/styles.module.scss index cd928a2c..636ecae0 100644 --- a/components/pdf-upload/styles.module.scss +++ b/components/pdf-upload/styles.module.scss @@ -128,3 +128,23 @@ } } } + +.sdg-wrapper { + display: flex; + gap: 16px; + align-items: center; + .sdg-item { + display: flex; + align-items: center; + gap: 16px; + } +} + +.img-wrapper { + width: 32px; + height: 32px; + img { + width: 100%; + height: 100%; + } +} diff --git a/components/pdf-upload/uploadFail.jsx b/components/pdf-upload/uploadFail.jsx index d532eca8..b155dc7c 100644 --- a/components/pdf-upload/uploadFail.jsx +++ b/components/pdf-upload/uploadFail.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,53 +12,65 @@ const UploadFail = ({ uploadRef, rrsPdfLoading, fileName, -}) => ( -
-
-
- {!rrsPdfLoading ? ( - <> - issueSvg -

{text.upload.fail.title}

- - ) : ( -

{text.upload.default.title}

- )} -
-
- {rrsPdfLoading ? ( -
-
- +}) => { + const router = useRouter() + + const uploadText = router.pathname.includes('sdg') + ? text.upload.sdgFail + : text.upload.fail + + const defaultText = router.pathname.includes('sdg') + ? text.upload.sdgDefault + : text.upload.default + + return ( +
+
+
+ {!rrsPdfLoading ? ( + <> + issueSvg +

{uploadText.title}

+ + ) : ( +

{defaultText.title}

+ )}
-
{fileName}
- ) : ( -
- - {text.upload.fail.description} - - + {rrsPdfLoading ? ( +
+
+ +
+
{fileName}
+
+ ) : ( +
+ + {uploadText.description} + + +
+ )} +
+
- )} -
-
-
-) + ) +} export default UploadFail diff --git a/data/retention.yml b/data/retention.yml index 7be70e49..b410a6f2 100644 --- a/data/retention.yml +++ b/data/retention.yml @@ -33,6 +33,23 @@ upload: Maximum size: 10MB + sdgSuccess: + title: SDG labels found + description: "Found SDG labels:" + image: /images/success.svg + action: + title: Upload new file + sdgFail: + title: SDG labels not found + description: SDG labels not found in this paper. + image: /images/fail.svg + action: + title: Upload new file + sdgDefault: + title: Identify SDG in your paper + subTitle: Drag and drop your file here + action: + title: Browse files purpose: title: Why it’s important image: /images/services/work.svg diff --git a/env.config.js b/env.config.js index eeaea989..ba39ddbc 100644 --- a/env.config.js +++ b/env.config.js @@ -5,7 +5,7 @@ const local = { } const development = { - API_URL: 'https://api-dev.core.ac.uk/internal', + API_URL: 'https://api.core.ac.uk/internal', } const production = { diff --git a/public/images/icons/allSdg.svg b/public/images/icons/allSdg.svg new file mode 100644 index 00000000..eea128fe --- /dev/null +++ b/public/images/icons/allSdg.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/belowWater.svg b/public/images/icons/belowWater.svg new file mode 100644 index 00000000..a1d7fc7d --- /dev/null +++ b/public/images/icons/belowWater.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/climate.svg b/public/images/icons/climate.svg new file mode 100644 index 00000000..d31a7443 --- /dev/null +++ b/public/images/icons/climate.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/communities.svg b/public/images/icons/communities.svg new file mode 100644 index 00000000..09f24aa2 --- /dev/null +++ b/public/images/icons/communities.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/economic.svg b/public/images/icons/economic.svg new file mode 100644 index 00000000..6d92793a --- /dev/null +++ b/public/images/icons/economic.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/education.svg b/public/images/icons/education.svg new file mode 100644 index 00000000..fa007d3a --- /dev/null +++ b/public/images/icons/education.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/energy.svg b/public/images/icons/energy.svg new file mode 100644 index 00000000..19fb1179 --- /dev/null +++ b/public/images/icons/energy.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/genderEquality.svg b/public/images/icons/genderEquality.svg new file mode 100644 index 00000000..9e324b34 --- /dev/null +++ b/public/images/icons/genderEquality.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/goal.svg b/public/images/icons/goal.svg new file mode 100644 index 00000000..816e9034 --- /dev/null +++ b/public/images/icons/goal.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/health.svg b/public/images/icons/health.svg new file mode 100644 index 00000000..dfd32516 --- /dev/null +++ b/public/images/icons/health.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/hunger.svg b/public/images/icons/hunger.svg new file mode 100644 index 00000000..3debd8d3 --- /dev/null +++ b/public/images/icons/hunger.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/inequalitie.svg b/public/images/icons/inequalitie.svg new file mode 100644 index 00000000..197adf5c --- /dev/null +++ b/public/images/icons/inequalitie.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/infrastructure.svg b/public/images/icons/infrastructure.svg new file mode 100644 index 00000000..8f7ce285 --- /dev/null +++ b/public/images/icons/infrastructure.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/land.svg b/public/images/icons/land.svg new file mode 100644 index 00000000..74f014cb --- /dev/null +++ b/public/images/icons/land.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/peace.svg b/public/images/icons/peace.svg new file mode 100644 index 00000000..1a0b3e9b --- /dev/null +++ b/public/images/icons/peace.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/poverty.svg b/public/images/icons/poverty.svg new file mode 100644 index 00000000..4c470cc6 --- /dev/null +++ b/public/images/icons/poverty.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/production.svg b/public/images/icons/production.svg new file mode 100644 index 00000000..661cf3a8 --- /dev/null +++ b/public/images/icons/production.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/water.svg b/public/images/icons/water.svg new file mode 100644 index 00000000..3664b501 --- /dev/null +++ b/public/images/icons/water.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/templates/rights-retention/index.jsx b/templates/rights-retention/index.jsx index 5a43ae4e..5c306a1a 100644 --- a/templates/rights-retention/index.jsx +++ b/templates/rights-retention/index.jsx @@ -9,7 +9,7 @@ import FileUpload from '../../components/pdf-upload' const RightsRetentionPageTemplate = ({ data }) => { const [uloadResult, setUploadResult] = useState('') const [rrsPdfLoading, setRrsPdfLoading] = useState(false) - const uploadPdf = async (file, dataProviderId) => { + const uploadPdf = async (file) => { setRrsPdfLoading(true) try { const url = new URL( @@ -18,7 +18,6 @@ const RightsRetentionPageTemplate = ({ data }) => { ) const fd = new FormData() fd.set('file', file) - fd.set('dataProviderId', dataProviderId) const response = await fetch(url, { method: 'POST', diff --git a/templates/sdg/index.jsx b/templates/sdg/index.jsx index b1f13b55..5e76cc51 100644 --- a/templates/sdg/index.jsx +++ b/templates/sdg/index.jsx @@ -4,17 +4,145 @@ import { Layout, Section } from '../../design-v2/components' import styles from './styles.module.scss' import { Markdown, Video } from '../../components' import FileUpload from '../../components/pdf-upload' +import all from '../../public/images/icons/allSdg.svg' +import poverty from '../../public/images/icons/poverty.svg' +import hunger from '../../public/images/icons/hunger.svg' +import health from '../../public/images/icons/health.svg' +import education from '../../public/images/icons/education.svg' +import water from '../../public/images/icons/water.svg' +import energy from '../../public/images/icons/energy.svg' +import economy from '../../public/images/icons/economic.svg' +import infrastructure from '../../public/images/icons/infrastructure.svg' +import inequality from '../../public/images/icons/inequalitie.svg' +import communities from '../../public/images/icons/communities.svg' +import climate from '../../public/images/icons/climate.svg' +import underWater from '../../public/images/icons/belowWater.svg' +import peace from '../../public/images/icons/peace.svg' +import goal from '../../public/images/icons/goal.svg' +import equal from '../../public/images/icons/genderEquality.svg' +import land from '../../public/images/icons/land.svg' +import production from '../../public/images/icons/production.svg' + +const sdgTypes = [ + { + id: 'all', + title: 'All', + icon: all, + color: '#B75400', + }, + { + id: 'SDG01', + title: 'No Poverty', + icon: poverty, + color: '#E5243B', + }, + { + id: 'SDG02', + title: 'Zero Hunger', + icon: hunger, + color: '#DDA63A', + }, + { + id: 'SDG03', + title: 'Good Health and Well-being', + icon: health, + color: '#4C9F38', + }, + { + id: 'SDG04', + title: 'Quality Education', + icon: education, + color: '#C5192D', + }, + { + id: 'SDG05', + title: 'Gender Equality', + icon: equal, + color: '#FF3A21', + }, + { + id: 'SDG06', + title: 'Clean Water and Sanitation', + icon: water, + color: '#26BDE2', + }, + { + id: 'SDG07', + title: 'Affordable and Clean Energy', + icon: energy, + color: '#FCC30B', + }, + { + id: 'SDG08', + title: 'Decent Work and Economic Growth', + icon: economy, + color: '#A21942', + }, + { + id: 'SDG09', + title: 'Industry, Innovation and Infrastructure', + icon: infrastructure, + color: '#FD6925', + }, + { + id: 'SDG10', + title: 'Reduced Inequality', + icon: inequality, + color: '#DD1367', + }, + { + id: 'SDG11', + title: 'Sustainable Cities and Communities', + icon: communities, + color: '#FD9D24', + }, + { + id: 'SDG12', + title: 'Responsible Consumption and Production', + icon: production, + color: '#BF8B2E', + }, + { + id: 'SDG13', + title: 'Climate Action', + icon: climate, + color: '#3F7E44', + }, + { + id: 'SDG14', + title: 'Life Below Water', + icon: underWater, + color: '#0A97D9', + }, + { + id: 'SDG15', + title: 'Life on Land', + icon: land, + color: '#56C02B', + }, + { + id: 'SDG16', + title: 'Peace, Justice and Strong Institutions', + icon: peace, + color: '#00689D', + }, + { + id: 'SDG17', + title: 'Partnerships for the Goals', + icon: goal, + color: '#19486A', + }, +] const SdgPageTemplate = ({ data }) => { const [uloadResult, setUploadResult] = useState('') const [rrsPdfLoading, setRrsPdfLoading] = useState(false) - const uploadPdf = async (file, dataProviderId) => { + const uploadPdf = async (file) => { setRrsPdfLoading(true) try { const url = new URL('/internal/sdg-upload-file', process.env.API_URL) const fd = new FormData() fd.set('file', file) - fd.set('dataProviderId', dataProviderId) const response = await fetch(url, { method: 'POST', @@ -51,6 +179,7 @@ const SdgPageTemplate = ({ data }) => { rrsPdfLoading={rrsPdfLoading} uploadPdf={uploadPdf} uploadResults={uloadResult} + sdgTypes={sdgTypes} />