ConnectionOAuthNoPartnerAccount.tsx

import React from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import './connectionOAuth.scss'
import { Konnector } from 'models'
import FormOAuth from 'components/Connection/FormOAuth'
import Button from '@material-ui/core/Button'

interface ConnectionOAuthNoPartnerAccountProps {
  konnectorSlug: string
  konnector: Konnector | null
  handleSuccess: (accountId: string) => Promise<void>
  togglePartnerConnectionModal: () => void
}

const ConnectionOAuthNoPartnerAccount = ({
  konnectorSlug,
  konnector,
  handleSuccess,
  togglePartnerConnectionModal,
}: ConnectionOAuthNoPartnerAccountProps) => {
  const { t } = useI18n()

  return (
    <div className="koauthform">
      <p className={`koauthform-title ${konnectorSlug} text-20-bold`}>
        {t('auth.' + `${konnectorSlug}` + '.no_account.title')}
      </p>

      <div className="koauthform-subtitle text-18-bold">
        {t('auth.' + konnectorSlug + '.no_account.subtitle1')}
      </div>
      <div className="koauthform-button">
        <Button
          aria-label={t('auth.accessibility.button_create_account')}
          onClick={togglePartnerConnectionModal}
          classes={{
            root: 'btn-highlight',
            label: 'text-16-bold',
          }}
        >
          {t('auth.' + konnectorSlug + '.no_account.button_create_account')}
        </Button>
      </div>

      <div className="koauthform-subtitle text-18-bold">
        {t('auth.' + `${konnectorSlug}` + '.no_account.subtitle2')}
      </div>
      <div className="koauthform-infotext text-16-normal">
        {t('auth.' + `${konnectorSlug}` + '.no_account.subtitle2_info')}
      </div>
      <div className="koauthform-connect-button">
        <FormOAuth
          konnector={konnector}
          onSuccess={handleSuccess}
          highlightedStyle={false}
        />
      </div>

      <div className="koauthform-infotext text-16-italic">
        {t('auth.' + `${konnectorSlug}` + '.no_account.info')}
      </div>
    </div>
  )
}

export default ConnectionOAuthNoPartnerAccount