WelcomeModalContainer.tsx

import React from 'react'
import { withClient, Client } from 'cozy-client'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import { translate } from 'cozy-ui/react/I18n'
import userInstanceSettings from 'components/Hooks/userInstanceSettings'

interface WelcomeModalContainerProps {
  handleClose: () => void
  t: Function
  client: Client
}

const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
  handleClose,
  t,
  client,
}: WelcomeModalContainerProps) => {
  const { data: instanceSettings } = userInstanceSettings(client)

  return (
    <React.Fragment>
      <Modal
        open={true}
        handleCloseClick={handleClose}
        yellowBorder="yellow-border"
      >
        <div className="wm-header text-24-bold">
          {t('COMMON.WELCOME_MODAL_TITLE')}
        </div>
        <div className="wm-name text-24-bold">
          {instanceSettings.public_name
            ? `${instanceSettings.public_name} !`
            : null}
        </div>

        <div className="wm-perso text-18-bold">
          {t('COMMON.WELCOME_MODAL_PERSO')}
        </div>
        <div className="wm-connect text-18-bold">
          {t('COMMON.WELCOME_MODAL_CONNECT')}
        </div>
        <StyledButton className="button-ok" onClick={handleClose}>
          {t('COMMON.WELCOME_MODAL_OK')}
        </StyledButton>
      </Modal>
    </React.Fragment>
  )
}

export default translate()(withClient(WelcomeModalContainer))