ConnectionOAuthWithPartnerAccount.tsx

import React, { useCallback } 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 ConnectionOAuthWithPartnerAccountProps {
  konnectorSlug: string
  konnector: Konnector | null
  handleSuccess: (accountId: string) => Promise<void>
  togglePartnerConnectionModal: () => void
}

const ConnectionOAuthWithPartnerAccount = ({
  konnectorSlug,
  konnector,
  handleSuccess,
  togglePartnerConnectionModal,
}: ConnectionOAuthWithPartnerAccountProps) => {
  const { t } = useI18n()

  const goToGuide = useCallback(() => {
    window.open(
      'https://www.notion.so/Besoin-d-aide-d3afe29ba5aa42bb9d49eecfcb506c72',
      '_blank'
    )
  }, [])

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

      <div className="koauthform-subtitle text-18-bold">
        {t('auth.' + konnectorSlug + '.with_account.subtitle1')}
      </div>
      <div className="koauthform-connect-button">
        <FormOAuth
          konnector={konnector}
          onSuccess={handleSuccess}
          highlightedStyle={true}
        />
      </div>
      {konnectorSlug === 'grdfgrandlyon' && (
        <div className="koauthform-infotext text-16-normal">
          {t('auth.' + konnectorSlug + '.with_account.subtitle1_info')}
        </div>
      )}

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

      <div className="koauthform-infotext text-16-normal">
        {t('auth.' + `${konnectorSlug}` + '.with_account.subtitle2_info')}
      </div>
      <div className="koauthform-button">
        <Button
          aria-label={t('auth.accessibility.button_goto_guide')}
          onClick={goToGuide}
          classes={{
            root: 'btn-secondary-negative',
            label: 'text-16-bold',
          }}
        >
          {t('auth.' + konnectorSlug + '.with_account.button_goto_guide')}
        </Button>
      </div>
    </div>
  )
}

export default ConnectionOAuthWithPartnerAccount