From 170c6c4fa56296b462429f53a50c0d0ee979220a Mon Sep 17 00:00:00 2001 From: Eka Date: Wed, 29 Nov 2023 16:27:14 +0400 Subject: [PATCH] CORE-4518: steps --- data/benefits.yml | 27 ++++ design-v2/benefits/benefitsForm.jsx | 174 ++++++++++++++++++++++ design-v2/benefits/benefitsSecondStep.jsx | 47 ++++++ design-v2/benefits/index.jsx | 27 +++- design-v2/benefits/styles.module.scss | 84 ++++++++++- 5 files changed, 348 insertions(+), 11 deletions(-) create mode 100644 design-v2/benefits/benefitsForm.jsx create mode 100644 design-v2/benefits/benefitsSecondStep.jsx diff --git a/data/benefits.yml b/data/benefits.yml index ba901b08..f1f48771 100644 --- a/data/benefits.yml +++ b/data/benefits.yml @@ -183,7 +183,10 @@ HowTo: join: title: Join CORE as a data provider and contribute to the creation of a mutually beneficial ecosystem. + description: We have created a [data provider’s]() guide describing best practices of how to expose metadata to CORE. This guide serves as a reference to our data providers. picture: /images/benefits/join-core.svg + action: join + subOai: If you don’t know the OAI base URL of the data provider, insert the URL of it and we will try to find it. joinModal: title: Tell us about yourself @@ -206,3 +209,27 @@ services: action: - title: Find out more url: services/repository-dashboard + +secondStep: + title: New data provider registration + picture: /images/benefits/join-core.svg + member: + subTitle: This data provider already exist + description: | + You can find data provider’s content at [core.ac.uk/search?q=repository:id={{dataProvider.id}}](). Also here you can find [{{dataProvider.id}}]() profile page on the CORE website. + + **Please note**, that if you have submitted this repository recently it may not appear on the search results. Please wait until harvesting will be completed. [Find out more](). + newMember: + subTitle: Thank you for registering a new data provider + description: | + We will review your request to add this data provider to CORE. If this request is successful, we will index the content from this data provider and send you an email when completed. This can take up to **three weeks** depending on the size of the data provider and our workload. + + Once completed, if you are an authorised representative of this data provider, we encourage you to become a [CORE Member](/membership) and obtain access to the [CORE Dashboard](/services/repository-dashboard). + issue: + subTitle: OAI is not found + description: | + Please check that given OAI based URL is **correct.** + + Example: -https://oro.open.ac.uk/cgi/oai2- + + If you believe that your OAI is correct, [contact us](/about#contact) to add it manually. diff --git a/design-v2/benefits/benefitsForm.jsx b/design-v2/benefits/benefitsForm.jsx new file mode 100644 index 00000000..36c611cb --- /dev/null +++ b/design-v2/benefits/benefitsForm.jsx @@ -0,0 +1,174 @@ +import React, { useState, useEffect } from 'react' +import { Button, Modal, TextField } from '@oacore/design/lib' + +import styles from './styles.module.scss' +import generateFormMessage from '../../templates/data-providers/utils/generate-form-message' +import { useInput } from '../../hooks' +import fetchDataProviderAdd from '../../api/data-providers' +import BenefitsStep from './benefitsSecondStep' + +import benefitsData from 'data/benefits.yml' + +export async function checkDataProviders({ params }) { + const { uri, email, setIsDataProviderAddActive, setDataProvidersResponse } = + params + + try { + const result = await fetchDataProviderAdd({ uri, email }) + // eslint-disable-next-line no-console + console.log(`fetchDataProviderAdd + => ${JSON.stringify(result)}`) // Debug + setIsDataProviderAddActive(true) + setDataProvidersResponse(result) + } catch (errorWithDataProvider) { + setIsDataProviderAddActive(true) + setDataProvidersResponse({ + error: errorWithDataProvider, + existingDataProviders: [], + }) + return { + props: { + error: errorWithDataProvider, + }, + notFound: true, + } + } + return true +} + +const BenefitsForm = React.forwardRef(({ onSubmit, setModalActive }, ref) => { + const [isIsDataProviderAddActive, setIsDataProviderAddActive] = + useState(false) + const [dataProvidersResponse, setDataProvidersResponse] = useState([]) + const [modalContent, setModalContent] = useState(null) + const [formSubmitted, setFormSubmitted] = useState(false) + + const { + value: uri, + element: elemDataProviderUrl, + bind: bindDataProviderUrl, + } = useInput('', 'data-provider-url') + + const { + value: email, + element: elemEmail, + bind: bindEmail, + } = useInput('', 'email') + + const onCloseModal = () => { + setModalActive(false) + } + const handleSubmit = async (event) => { + event.preventDefault() + + if (onSubmit) await onSubmit(event) + } + + const message = generateFormMessage({ dataProvidersResponse }) + + useEffect(() => { + if (dataProvidersResponse?.error?.status === 500) { + setFormSubmitted(true) + setModalContent( + + ) + } else if (dataProvidersResponse?.error?.status === 409) { + setFormSubmitted(true) + setModalContent( + + ) + } else if (dataProvidersResponse?.error?.status === 200) { + setFormSubmitted(true) + setModalContent( + + ) + } + }, [dataProvidersResponse?.error?.status]) + + return ( + <> + {formSubmitted ? null : ( + +
New data provider registration
+
+ + {benefitsData.join.subOai} + +
+ + +
+ +
+ )} + {modalContent} + + ) +}) + +export default BenefitsForm diff --git a/design-v2/benefits/benefitsSecondStep.jsx b/design-v2/benefits/benefitsSecondStep.jsx new file mode 100644 index 00000000..a33447f9 --- /dev/null +++ b/design-v2/benefits/benefitsSecondStep.jsx @@ -0,0 +1,47 @@ +import React from 'react' +import { Button, Modal } from '@oacore/design/lib' + +import styles from './styles.module.scss' +import { Markdown } from '../../components' + +import benefitsData from 'data/benefits.yml' + +const BenefitsStep = ({ + subTitle, + description, + setModalContent, + setFormSubmitted, + onCloseModal, +}) => { + const test = () => { + setModalContent(false) + setFormSubmitted(false) + onCloseModal() + } + + return ( + +
{benefitsData.secondStep.title}
+
+ {benefitsData.secondStep.title} +
+ {subTitle} + {description} +
+ +
+ + ) +} + +export default BenefitsStep diff --git a/design-v2/benefits/index.jsx b/design-v2/benefits/index.jsx index dcba15fd..7f1ee1bd 100644 --- a/design-v2/benefits/index.jsx +++ b/design-v2/benefits/index.jsx @@ -9,6 +9,8 @@ import { Layout, Section } from '../components' // TODO: REPLACE OLD COMPONENT import JoinForm from './joinForm' import GratitudeModal from './GratitudeModal' +// TODO: REPLACE OLD COMPONENT +import BenefitsForm from './benefitsForm' import { Accordion, Content, Markdown } from 'components' import benefitsData from 'data/benefits.yml' @@ -57,11 +59,16 @@ const BenefitsPageTemplate = () => { const [showAll, setShowAll] = useState(false) const [showModal, setShowModal] = useState(false) const [showGratitudeModal, setGratitudeModal] = useState(false) + const [modalActive, setModalActive] = useState(false) const toggleShowAll = () => { setShowAll((prev) => !prev) } + const toggleModal = () => { + setModalActive(true) + } + const itemsToShow = showAll ? faqData.sections[0].items : faqData.sections[0].items.slice(0, 3) @@ -168,12 +175,6 @@ const BenefitsPageTemplate = () => {
-

- {benefitsData.join.title} -

- { showGratitudeModal={showGratitudeModal} setGratitudeModal={setGratitudeModal} /> +
{benefitsData.join.title}
+ + {benefitsData.join.description} + + + {/* */}
@@ -193,6 +207,7 @@ const BenefitsPageTemplate = () => { />
+ {modalActive && }
{benefitsData.services.map((service) => ( diff --git a/design-v2/benefits/styles.module.scss b/design-v2/benefits/styles.module.scss index f8f03423..1ea637cc 100644 --- a/design-v2/benefits/styles.module.scss +++ b/design-v2/benefits/styles.module.scss @@ -229,7 +229,8 @@ $spacer: 1.5rem; .join-core { display: flex; - justify-content: space-between; + //justify-content: space-between; + gap: 3rem; flex-wrap: wrap; align-items: center; .add-data-provider-text { @@ -239,6 +240,19 @@ $spacer: 1.5rem; text-align: left; font-size: 1rem; font-weight: 400; + width: 60%; + .benefits-description { + color: #666; + font-size: 16px; + font-style: normal; + font-weight: 400; + } + .benefits-join { + margin-top: 34px; + &:hover { + color: #fff; + } + } } .img-block { text-align: right; @@ -295,10 +309,6 @@ $spacer: 1.5rem; } } -.button-custom { - margin-top: 1.5rem; -} - .content { ul { margin-left: 2rem; @@ -364,3 +374,67 @@ $spacer: 1.5rem; margin-top: 24px; } } + +.modal-form { + .sub-desc { + margin: 4px 0 24px; + color: #424242; + font-size: 12px; + font-style: normal; + font-weight: 400; + } + + .text-field { + margin-top: 24px; + } + + .oai-url { + margin-bottom: 4px; + } + + .button-group { + display: flex; + justify-content: flex-end; + margin-top: 1rem; + + button:last-child { + margin-left: 1rem; + } + } +} + +.modal-step-form { + width: 480px; + .step-header { + color: #212121; + font-size: 16px; + font-style: normal; + font-weight: 500; + } + + .step-description { + margin: 16px 0 24px; + color: #212121; + font-size: 16px; + font-style: normal; + font-weight: normal; + line-height: 20px; + letter-spacing: 0.009px; + } + + .step-image { + display: flex; + justify-content: center; + align-items: center; + margin: 24px 0 36px; + img { + width: 270px; + height: 215px; + } + } + + .step-button { + display: flex; + justify-content: flex-end; + } +}