SignUpStep0.js

import React, { Fragment } from 'react'
import { reduxForm } from 'redux-form'
import countrylist from 'country-list'
import { get, isUndefined } from 'lodash'
import { required as requiredValidator } from 'xpub-validators'
import { Menu, Button, Checkbox, TextField, ValidatedField } from '@pubsweet/ui'

import {
  Row,
  Text,
  Item,
  Label,
  ActionLink,
  ItemOverrideAlert,
} from 'pubsweet-component-faraday-ui'

const countries = countrylist()

const countryList = countries
  .getNames()
  .map(c => ({ value: countries.getCode(c), label: c }))

const AgreeCheckbox = ({ value, onChange }) => (
  <Row alignItems="center" justify="flex-start" mb={4} mt={3}>
    <Checkbox checked={value} onChange={onChange} value={value} />
    <Text>
      I agree with the{' '}
      <ActionLink to="https://www.hindawi.com/terms/">
        Terms of Services
      </ActionLink>{' '}
    </Text>
  </Row>
)

const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
  !isUndefined(initialValues) ? (
    <Fragment>
      <Row mb={2} mt={3}>
        <Item mr={1} vertical>
          <Label required>First Name</Label>
          <ValidatedField
            component={TextField}
            name="firstName"
            validate={[requiredValidator]}
          />
        </Item>
        <Item ml={1} vertical>
          <Label required>Last Name</Label>
          <ValidatedField
            component={TextField}
            name="lastName"
            validate={[requiredValidator]}
          />
        </Item>
      </Row>

      <Row mb={2}>
        <Item mr={1} vertical>
          <Label required>Title</Label>
          <ValidatedField
            component={input => (
              <Menu
                {...input}
                options={get(journal, 'title', [])}
                placeholder="Please select"
              />
            )}
            name="title"
            validate={[requiredValidator]}
          />
        </Item>
        <ItemOverrideAlert ml={1} vertical>
          <Label required>Country</Label>
          <ValidatedField
            component={input => (
              <Menu
                {...input}
                options={countryList}
                placeholder="Please select"
              />
            )}
            name="country"
            validate={[requiredValidator]}
          />
        </ItemOverrideAlert>
      </Row>

      <Row>
        <Item vertical>
          <Label required>Affiliation</Label>
          <ValidatedField
            component={TextField}
            name="affiliation"
            validate={[requiredValidator]}
          />
        </Item>
      </Row>

      <ValidatedField
        component={AgreeCheckbox}
        name="agreeTC"
        validate={[requiredValidator]}
      />

      <Row>
        <Text secondary small>
          This account information will be processed by us in accordance with
          our Privacy Policy for the purpose of registering your account and
          allowing you to use the services available via the platform. Please
          read our{' '}
          <ActionLink to="https://www.hindawi.com/privacy/">
            Privacy Policy{' '}
          </ActionLink>{' '}
          for further information.
        </Text>
      </Row>

      <Button mt={4} onClick={handleSubmit}>
        PROCEED TO SET EMAIL AND PASSWORD
      </Button>

      <Row mt={3}>
        <Text display="flex">
          Already have an account?
          <ActionLink internal pl={1 / 2} to="/">
            Sign in
          </ActionLink>
        </Text>
      </Row>
    </Fragment>
  ) : (
    <div>{!isUndefined(error) && 'Loading...'}</div>
  )

export default reduxForm({
  form: 'signUpInvitation',
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,
})(Step0)