From c4fdc6ed02f97976d65a1c6870be01088387b556 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 10 Nov 2020 10:59:07 +0100
Subject: [PATCH] feat: Use Dialog for transfer state modal

---
 src/ducks/transfers/TransferPage.jsx        | 17 ++++---
 src/ducks/transfers/TransferPage.spec.jsx   |  6 +--
 src/ducks/transfers/steps/TransferState.jsx | 55 ++++++++++++---------
 src/ducks/transfers/styles.styl             |  6 ---
 4 files changed, 46 insertions(+), 38 deletions(-)
 delete mode 100644 src/ducks/transfers/styles.styl

diff --git a/src/ducks/transfers/TransferPage.jsx b/src/ducks/transfers/TransferPage.jsx
index b2a550d9ad..7ce605c4d9 100644
--- a/src/ducks/transfers/TransferPage.jsx
+++ b/src/ducks/transfers/TransferPage.jsx
@@ -5,7 +5,7 @@ import { withRouter } from 'react-router'
 
 import withBreakpoints from 'cozy-ui/transpiled/react/helpers/withBreakpoints'
 import Stack from 'cozy-ui/transpiled/react/Stack'
-import { translate, Text, Modal, useI18n } from 'cozy-ui/transpiled/react'
+import { translate, Text, useI18n } from 'cozy-ui/transpiled/react'
 import {
   withClient,
   queryConnect,
@@ -30,8 +30,8 @@ import * as recipientUtils from 'ducks/transfers/recipients'
 import * as transfers from 'ducks/transfers/transfers'
 
 import {
-  TransferSuccess,
-  TransferError
+  TransferSuccessDialog,
+  TransferErrorDialog
 } from 'ducks/transfers/steps/TransferState'
 import ChooseRecipientCategory from 'ducks/transfers/steps/Category'
 import ChooseBeneficiary from 'ducks/transfers/steps/Beneficiary'
@@ -467,15 +467,18 @@ class TransferPage extends React.Component {
     return (
       <>
         {transferState ? (
-          <Modal mobileFullscreen dismissAction={this.handleModalDismiss}>
+          <>
             {transferState === 'sending' && <Loading />}
             {transferState === 'success' && (
-              <TransferSuccess onExit={this.handleExit} />
+              <TransferSuccessDialog onExit={this.handleExit} />
             )}
             {transferState instanceof Error && (
-              <TransferError error={transferState} onExit={this.handleExit} />
+              <TransferErrorDialog
+                error={transferState}
+                onExit={this.handleExit}
+              />
             )}
-          </Modal>
+          </>
         ) : null}
         {showingPersonalInfo ? (
           <PersonalInfoComponent
diff --git a/src/ducks/transfers/TransferPage.spec.jsx b/src/ducks/transfers/TransferPage.spec.jsx
index 16c5399b9c..863a30a14c 100644
--- a/src/ducks/transfers/TransferPage.spec.jsx
+++ b/src/ducks/transfers/TransferPage.spec.jsx
@@ -8,7 +8,7 @@ import AppLike from 'test/AppLike'
 import fixtures from 'test/fixtures'
 
 import { accountsConn, recipientsConn, myselfConn } from 'doctypes'
-import { TransferError } from 'ducks/transfers/steps/TransferState'
+import { TransferErrorDialog } from 'ducks/transfers/steps/TransferState'
 import TransferPage, { TransferPage as DumbTransferPage } from './TransferPage'
 
 import * as transfers from './transfers'
@@ -60,7 +60,7 @@ describe('transfer page', () => {
     jest.restoreAllMocks()
   })
 
-  it('should pass error to TransferError', async () => {
+  it('should pass error to TransferErrorDialog', async () => {
     root.instance().setState({
       senderAccount: accounts[0],
       beneficiary: {
@@ -77,7 +77,7 @@ describe('transfer page', () => {
     } catch (e) {
       // eslint-disable-line no-empty
     }
-    const errorView = root.find(TransferError)
+    const errorView = root.find(TransferErrorDialog)
     expect(errorView.length).toBe(1)
     expect(errorView.props().error).toBe(err)
   })
diff --git a/src/ducks/transfers/steps/TransferState.jsx b/src/ducks/transfers/steps/TransferState.jsx
index 8ce6c80507..ca68365380 100644
--- a/src/ducks/transfers/steps/TransferState.jsx
+++ b/src/ducks/transfers/steps/TransferState.jsx
@@ -1,38 +1,47 @@
 import React from 'react'
-import Padded from 'components/Spacing/Padded'
-import { Text, Button, useI18n } from 'cozy-ui/transpiled/react'
+import Button from 'cozy-ui/transpiled/react/Button'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { IllustrationDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Stack from 'cozy-ui/transpiled/react/Stack'
 
-import styles from 'ducks/transfers/styles.styl'
-import Title from 'ducks/transfers/steps/Title'
 import TransferDoneImg from 'ducks/transfers/steps/TransferDoneImg'
 import TransferErrorImg from 'ducks/transfers/steps/TransferErrorImg'
 import { useTrackPage } from 'ducks/tracking/browser'
 
-const TransferState = ({
+const TransferStateDialog = ({
   title,
   description,
   onClickPrimaryButton,
   primaryLabel,
   Img
 }) => (
-  <Padded className={styles.TransferState}>
-    <Title className="u-mb-1-half">{title}</Title>
-    {Img}
-    <Text className="u-mb-1-half u-ta-center">{description}</Text>
-    <Button
-      extension="full"
-      className="u-mb-half"
-      onClick={onClickPrimaryButton}
-      label={primaryLabel}
-    />
-  </Padded>
+  <IllustrationDialog
+    open
+    onClose={onClickPrimaryButton}
+    title={
+      <Stack spacing="m" className="u-ta-center">
+        {Img}
+        <Typography variant="h4">{title}</Typography>
+      </Stack>
+    }
+    content={description}
+    actions={
+      <Button
+        extension="full"
+        className="u-flex-grow-1"
+        onClick={onClickPrimaryButton}
+        label={primaryLabel}
+      />
+    }
+  />
 )
 
-export const TransferSuccess = React.memo(function TransferSuccess({ onExit }) {
+export const DumbTransferSuccessDialog = ({ onExit }) => {
   const { t } = useI18n()
   useTrackPage('virements.succes')
   return (
-    <TransferState
+    <TransferStateDialog
       title={t('Transfer.success.title')}
       Img={<TransferDoneImg />}
       description={t('Transfer.success.description')}
@@ -40,7 +49,9 @@ export const TransferSuccess = React.memo(function TransferSuccess({ onExit }) {
       primaryLabel={t('Transfer.exit')}
     />
   )
-})
+}
+
+export const TransferSuccessDialog = React.memo(DumbTransferSuccessDialog)
 
 const defaultErrorPageName = 'impossible'
 const konnectorErrorToPageName = {
@@ -51,14 +62,14 @@ const konnectorErrorToPageName = {
 const isLoginFailed = error =>
   error.message && error.message.includes('LOGIN_FAILED')
 
-export const DumbTransferError = ({ onExit, error }) => {
+export const DumbTransferErrorDialog = ({ onExit, error }) => {
   const { t } = useI18n()
   const loginFailed = isLoginFailed(error)
   const pageName =
     konnectorErrorToPageName[error.message] || defaultErrorPageName
   useTrackPage(`virements.${pageName}`)
   return (
-    <TransferState
+    <TransferStateDialog
       title={t('Transfer.error.title')}
       Img={<TransferErrorImg />}
       description={
@@ -72,4 +83,4 @@ export const DumbTransferError = ({ onExit, error }) => {
   )
 }
 
-export const TransferError = React.memo(DumbTransferError)
+export const TransferErrorDialog = React.memo(DumbTransferErrorDialog)
diff --git a/src/ducks/transfers/styles.styl b/src/ducks/transfers/styles.styl
deleted file mode 100644
index 434360cdb1..0000000000
--- a/src/ducks/transfers/styles.styl
+++ /dev/null
@@ -1,6 +0,0 @@
-.TransferState
-  justify-content center
-  display flex
-  align-items center
-  flex-direction column
-  flex-basis 100%