OAuthForm.tsx

import React, { useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'

import { FluidType } from 'enum/fluid.enum'
import { Konnector } from 'models'
import ConfigService from 'services/fluidConfig.service'
import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'

import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
import iconGrdfLogo from 'assets/icons/visu/grdf-logo.svg'
import iconEglLogo from 'assets/icons/visu/egl-logo.svg'
import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'

interface OAuthFormProps {
  konnector: Konnector
  onSuccess: Function
  loginFailed: boolean
}

const OAuthForm: React.FC<OAuthFormProps> = ({
  konnector,
  onSuccess,
}: OAuthFormProps) => {
  const IDLE = 'idle'
  const WAITING = 'waiting'

  const { t } = useI18n()
  const client = useClient()
  const [status, setStatus] = useState<string>(IDLE)

  function endOAuth() {
    setStatus(IDLE)
  }
  function startOAuth() {
    setStatus(WAITING)
  }
  function handleAccountId(accountId: string) {
    endOAuth()
    onSuccess(accountId)
  }
  function handleSubmit() {
    startOAuth()
  }
  function handleOAuthCancel() {
    endOAuth()
  }

  const fluidconfig = new ConfigService().getFluidConfig()
  const icon =
    konnector.slug === fluidconfig[FluidType.ELECTRICITY].konnectorConfig.slug
      ? iconEnedisLogo
      : konnector.slug === fluidconfig[FluidType.GAS].konnectorConfig.slug
      ? iconGrdfLogo
      : konnector.slug === fluidconfig[FluidType.WATER].konnectorConfig.slug
      ? iconEglLogo
      : ''
  const isWaiting = status === WAITING
  return !konnector ? null : (
    <>
      <StyledAuthButton
        type="button"
        color="primary"
        onClick={handleSubmit}
        disabled={isWaiting}
      >
        <div className="authform-button-content">
          <div className="authform-button-content-icon">
            {isWaiting ? (
              <StyledBlackSpinner size={48} />
            ) : (
              <StyledIcon icon={icon} size={48} />
            )}
          </div>
          <div className="authform-button-text text-18-bold">
            <div>{t('auth.' + konnector.slug + '.connect.label1')}</div>
            <div>{t('auth.' + konnector.slug + '.connect.label2')}</div>
          </div>
        </div>
      </StyledAuthButton>
      {isWaiting && (
        <OAuthWindow
          client={client}
          konnector={konnector}
          redirectSlug={client.appMetadata.slug}
          onSuccess={handleAccountId}
          onCancel={handleOAuthCancel}
          t={t}
        />
      )}
    </>
  )
}

export default OAuthForm