-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* CORE-4513: update forms * add additional fields to form * temp textarea * render view by type * CORE-4513 add description textaerea * update dataset date * update small issues * CORE-4513: add dataset access * minor issues * update success message * update on forms * update core * update checkbox * add whats included
- Loading branch information
1 parent
095fb95
commit a6eb331
Showing
19 changed files
with
826 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,95 @@ | ||
| import React from 'react' | ||
| import { Modal, Form, TextField, Button } from '@oacore/design/lib' | ||
| import React, { useEffect, useState } from 'react' | ||
| import { Modal, Form, TextField, Button, Popover } from '@oacore/design/lib' | ||
| import { useRouter } from 'next/router' | ||
|
|
||
| import questionInfo from '../../../public/images/logos/questionInfo.svg' | ||
| import styles from './styles.module.scss' | ||
| import ProfileSelect from './profile-select' | ||
| import CountrySelect from './country-select' | ||
| import useSelect from '../../../hooks/use-select' | ||
| import useInput from '../hooks/use-input' | ||
| import Markdown from '../../markdown' | ||
| import findText from './helpers/findText' | ||
| import text from '../../../data/registration.yml' | ||
| import DropdownInput from './institution-select' | ||
| import CustomRadio from '../../radio-button' | ||
|
|
||
| import { useStore, observe } from 'store' | ||
|
|
||
| const ModalForm = observe(() => { | ||
| const ModalForm = observe((emailFill) => { | ||
| const router = useRouter() | ||
| const { | ||
| value: firstName, | ||
| bind: bindFirstName, | ||
| element: elemFirstName, | ||
| } = useInput('firstName') | ||
|
|
||
| const { | ||
| value: lastName, | ||
| bind: bindLastName, | ||
| element: elemLastName, | ||
| } = useInput('lastName') | ||
|
|
||
| const { | ||
| value: description, | ||
| bind: bindDescription, | ||
| element: elemLastDescription, | ||
| } = useInput('description') | ||
|
|
||
| const { | ||
| value: organisationName, | ||
| suggestions: organisationNameSuggestions, | ||
| bind: bindOrganisationName, | ||
| element: elemOrganisationName, | ||
| } = useInput('organisationName') | ||
| const { value: countryName, onChange: countryOnChange } = | ||
| useSelect('countryName') | ||
| } = useInput('organisationName', true) | ||
|
|
||
| const { | ||
| value: libraryEmail, | ||
| element: elemLibraryEmail, | ||
| bind: bindLibraryEmail, | ||
| } = useInput('libraryEmail') | ||
|
|
||
| const [email, setEmail] = useState(emailFill.emailFill) | ||
| const { registration } = useStore() | ||
|
|
||
| const [selectedOption, setSelectedOption] = useState('') | ||
| const handleRadioSelect = (id) => { | ||
| setSelectedOption(id) | ||
| } | ||
|
|
||
| const { value: countryName, onChange: countryOnChange } = | ||
| useSelect('countryName') | ||
|
|
||
| const onCloseModal = () => { | ||
| registration.reset() | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| setSelectedOption( | ||
| registration.data.accountType === 'enterprise' ? 'all' : 'few' | ||
| ) | ||
| }, [registration.data.accountType]) | ||
|
|
||
| const onHandleSubmit = (evt) => { | ||
| evt.preventDefault() | ||
|
|
||
| if (description.trim().split(/\s+/).length > 150) return | ||
|
|
||
| if (organisationName) | ||
| registration.setData({ organisation: organisationName }) | ||
|
|
||
| if (firstName && lastName && countryName.id) { | ||
| registration.setData({ firstName, lastName, country: countryName.id }) | ||
| if (libraryEmail) registration.setData({ libraryEmail }) | ||
|
|
||
| if (description) registration.setData({ description }) | ||
|
|
||
| if (firstName && lastName && countryName.id && email) { | ||
| registration.setData({ | ||
| firstName, | ||
| lastName, | ||
| country: countryName.id, | ||
| email, | ||
| paidAccess: selectedOption === 'all', | ||
| }) | ||
| registration.setIsModalFormActive(false) | ||
| registration.setIsModalConditionsActive(true) | ||
| } | ||
|
|
@@ -64,6 +110,70 @@ const ModalForm = observe(() => { | |
| <Markdown>{findText('box')}</Markdown> | ||
| </div> | ||
| <Form onSubmit={onHandleSubmit}> | ||
| {router.pathname.includes('dataset') && ( | ||
| <div className={styles.radioItemsWrapper}> | ||
| <h6 className={styles.radioItemsTitle}> | ||
| Choose the datasets you wish to get access to | ||
| </h6> | ||
| <div className={styles.radioItemsInnerWrapper}> | ||
| <div className={styles.radioItem}> | ||
| <div className={styles.radioTitleWrapper}> | ||
| <CustomRadio | ||
| id={text.options.only.id} | ||
| label={text.options.only.label} | ||
| checked={selectedOption === text.options.only.id} | ||
| onChange={() => handleRadioSelect(text.options.only.id)} | ||
| /> | ||
| <Popover | ||
| className={styles.popover} | ||
| placement="top" | ||
| content={text.options.only.info} | ||
| > | ||
| <Button> | ||
| <img src={questionInfo} alt="questionInfo" /> | ||
| </Button> | ||
| </Popover> | ||
| </div> | ||
| <Markdown className={styles.radioDescription}> | ||
| {text.options.only.description} | ||
| </Markdown> | ||
| </div> | ||
| {registration.data.accountType === 'personal' && ( | ||
| <div className={styles.none}>{text.options.none}</div> | ||
| )} | ||
| {registration.data.accountType !== 'personal' && ( | ||
| <div className={styles.radioItem}> | ||
| <div className={styles.radioTitleWrapper}> | ||
| <CustomRadio | ||
| id={text.options.all.id} | ||
| label={text.options.all.label} | ||
| checked={selectedOption === text.options.all.id} | ||
| onChange={() => handleRadioSelect(text.options.all.id)} | ||
| /> | ||
| <Popover | ||
| className={styles.popover} | ||
| placement="top" | ||
| content={ | ||
| <Markdown> | ||
| {registration.data.accountType === 'enterprise' | ||
| ? text.options.all.info | ||
| : text.options.all.susInfo} | ||
| </Markdown> | ||
| } | ||
| > | ||
| <Button> | ||
| <img src={questionInfo} alt="questionInfo" /> | ||
| </Button> | ||
| </Popover> | ||
| </div> | ||
| <Markdown className={styles.radioDescription}> | ||
| {text.options.all.description} | ||
| </Markdown> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )} | ||
| <div className={styles.inputGroup}> | ||
| <TextField | ||
| id={elemFirstName} | ||
|
|
@@ -84,24 +194,77 @@ const ModalForm = observe(() => { | |
| {...bindLastName} | ||
| /> | ||
| </div> | ||
| {registration.data.accountType !== 'personal' && ( | ||
| <> | ||
| <TextField | ||
| id={elemOrganisationName} | ||
| name={elemOrganisationName} | ||
| label={ | ||
| registration.data.accountType === 'enterprise' | ||
| ? 'Organization name' | ||
| : 'Institution name' | ||
| } | ||
| placeholder="Full name of your institution, e.g ‘The Open University’" | ||
| className={styles.modalFormInputOrg} | ||
| {...bindOrganisationName} | ||
| id={emailFill.emailFill} | ||
| name={emailFill.emailFill} | ||
| label="Email" | ||
| placeholder="[email protected]" | ||
| required | ||
| value={email} | ||
| onChange={(e) => setEmail(e.target.value)} | ||
| /> | ||
| <div className={styles.institutionSubtitle}> | ||
| {registration.data.accountType === 'enterprise' | ||
| ? 'The supplied email address must correspond to the organization that you select.' | ||
| : 'The supplied email address must correspond to the institution that you select.'} | ||
| </div> | ||
| </> | ||
| {registration.data.accountType !== 'personal' && ( | ||
| <DropdownInput | ||
| elemOrganisationName={elemOrganisationName} | ||
| bindOrganisationName={bindOrganisationName} | ||
| registration={registration} | ||
| organisationNameSuggestions={organisationNameSuggestions} | ||
| /> | ||
| )} | ||
|
|
||
| <CountrySelect onChange={countryOnChange} /> | ||
|
|
||
| {registration.data.accountType === 'institution' && ( | ||
| <div className={styles.typeMainWrapper}> | ||
| <div className={styles.typeWrapper}> | ||
| <div className={styles.titleWrapper}> | ||
| <span className={styles.title}> | ||
| {text.membershipType.title} | ||
| </span> | ||
| </div> | ||
| <Markdown className={styles.typeText}> | ||
| {router.pathname.includes('api') | ||
| ? text.membershipType.typeText | ||
| : text.membershipType.typeTextChecked} | ||
| </Markdown> | ||
| </div> | ||
| </div> | ||
| )} | ||
| {registration.data.accountType === 'institution' && ( | ||
| <TextField | ||
| id={elemLibraryEmail} | ||
| name={elemLibraryEmail} | ||
| label="Could you please provide us with the email for your library contact?" | ||
| placeholder="[email protected]" | ||
| defaultValue={emailFill.emailFill} | ||
| type="email" | ||
| {...bindLibraryEmail} | ||
| /> | ||
| )} | ||
| <div> | ||
| <TextField | ||
| className={styles.description} | ||
| id={elemLastDescription} | ||
| name={elemLastDescription} | ||
| label="Describe the use case in which you would like to use CORE data" | ||
| placeholder="Text..." | ||
| type="textarea" | ||
| value={description} | ||
| required | ||
| {...bindDescription} | ||
| /> | ||
| {description.trim().split(/\s+/).length > 150 && ( | ||
| <div style={{ color: 'red' }}> | ||
| Word count exceeds the limit (150 words) | ||
| </div> | ||
| )} | ||
| <span className={styles.wordCount}>Max 150 words.</span> | ||
| </div> | ||
| <div className={styles.buttonGroup}> | ||
| <Button variant="text" onClick={onCloseModal}> | ||
| cancel | ||
|
|
||
Oops, something went wrong.