onfido-sdk-ui/src/components/ProofOfAddress/PoAIntro/index.js

JavaScript SDK view layer for Onfido identity verification

import { h } from 'preact'
import { Button } from '@onfido/castor-react'
import classNames from 'classnames'
import PageTitle from '../../PageTitle'
import { trackComponent } from '../../../Tracker'
import { localised } from '../../../locales'
import { POA_INTRO_LOCALES_MAPPING } from '~utils/localesMapping'
import theme from '../../Theme/style.scss'
import style from './style.scss'

const PoAIntro = ({
  country,
  translate,
  parseTranslatedTags,
  nextStep,
  steps,
  autoFocusOnInitialScreenTitle,
}) => {
  const isFirstScreen = steps[0].type === 'poa'
  return (
    <div className={theme.fullHeightContainer}>
      <PageTitle
        title={translate('poa_intro.title', {
          country: !country || country === 'GBR' ? 'UK' : '',
        })}
        shouldAutoFocus={isFirstScreen && autoFocusOnInitialScreenTitle}
      />
      <div className={style.content}>
        <p className={style.requirements}>{translate('poa_intro.subtitle')}</p>
        {['shows_address', 'matches_signup', 'most_recent'].map((key) => (
          <div key={key} className={style.requirement}>
            <span>
              {parseTranslatedTags(
                POA_INTRO_LOCALES_MAPPING[key],
                ({ text }) => (
                  <span className={style.bolder}>{text}</span>
                )
              )}
            </span>
          </div>
        ))}
      </div>
      <div className={theme.contentMargin}>
        <Button
          type="button"
          variant="primary"
          className={classNames(theme['button-centered'], theme['button-lg'])}
          onClick={nextStep}
          data-onfido-qa="poa-start-btn"
        >
          {translate('poa_intro.button_primary')}
        </Button>
      </div>
    </div>
  )
}

export default trackComponent(localised(PoAIntro))