From 255e4787f24e5844eccdbc47b9bcc2aa09e3c368 Mon Sep 17 00:00:00 2001
From: Thibaut Boustany <thibaut@ledger.fr>
Date: Mon, 30 Apr 2018 14:48:15 +0200
Subject: [PATCH] Last step (confirmation) for sending modal

---
 .../modals/Send/04-step-confirmation.js       | 57 ++++++++++++++++++-
 src/components/modals/Send/index.js           | 23 ++++++--
 static/i18n/en/send.yml                       | 11 +++-
 3 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/src/components/modals/Send/04-step-confirmation.js b/src/components/modals/Send/04-step-confirmation.js
index 95d4bc2b..7636ab7d 100644
--- a/src/components/modals/Send/04-step-confirmation.js
+++ b/src/components/modals/Send/04-step-confirmation.js
@@ -1,7 +1,60 @@
+// @flow
 import React from 'react'
+import styled from 'styled-components'
 
-function StepConfirmation() {
-  return <div>step confirmation</div>
+import IconCheckCircle from 'icons/CheckCircle'
+import IconExclamationCircleThin from 'icons/ExclamationCircleThin'
+import Box from 'components/base/Box'
+import { multiline } from 'styles/helpers'
+import { colors } from 'styles/theme'
+
+import type { T } from 'types/common'
+
+const Container = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+  grow: true,
+  color: 'dark',
+})`
+  height: 220px;
+`
+
+const Title = styled(Box).attrs({
+  ff: 'Museo Sans',
+  fontSize: 5,
+  mt: 4,
+})`
+  text-align: center;
+`
+
+const Text = styled(Box).attrs({
+  ff: 'Open Sans',
+  fontSize: 4,
+  mt: 2,
+})`
+  text-align: center;
+`
+
+type Props = {
+  txValidated: boolean,
+  t: T,
+}
+
+function StepConfirmation(props: Props) {
+  const { t, txValidated } = props
+  const Icon = txValidated ? IconCheckCircle : IconExclamationCircleThin
+  const iconColor = txValidated ? colors.positiveGreen : colors.alertRed
+  const tPrefix = txValidated ? 'send:steps.confirmation.success' : 'send:steps.confirmation.error'
+
+  return (
+    <Container>
+      <span style={{ color: iconColor }}>
+        <Icon size={43} />
+      </span>
+      <Title>{t(`${tPrefix}.title`)}</Title>
+      <Text>{multiline(t(`${tPrefix}.text`))}</Text>
+    </Container>
+  )
 }
 
 export default StepConfirmation
diff --git a/src/components/modals/Send/index.js b/src/components/modals/Send/index.js
index f7fa32ae..0347b22b 100644
--- a/src/components/modals/Send/index.js
+++ b/src/components/modals/Send/index.js
@@ -139,13 +139,12 @@ class SendModal extends PureComponent<Props, State> {
   }
 
   handleValidate = isValidated => {
+    const { stepIndex } = this.state
+
     this.setState({
       txValidated: isValidated,
+      stepIndex: stepIndex + 1,
     })
-
-    if (isValidated === true) {
-      this.handleNextStep()
-    }
   }
 
   createChangeHandler = key => value => {
@@ -193,6 +192,9 @@ class SendModal extends PureComponent<Props, State> {
         device: deviceSelected,
         onValidate: this.handleValidate,
       }),
+      ...props(stepIndex === 3, {
+        txValidated,
+      }),
     }
 
     return <Comp onChange={this.createChangeHandler} {...stepProps} />
@@ -200,7 +202,7 @@ class SendModal extends PureComponent<Props, State> {
 
   render() {
     const { accounts, t } = this.props
-    const { stepIndex, amount, account, fees } = this.state
+    const { stepIndex, amount, account, fees, txValidated } = this.state
 
     const canNext = this.canNext()
     const canPrev = this.canPrev()
@@ -239,7 +241,16 @@ class SendModal extends PureComponent<Props, State> {
               {stepIndex === 3 && (
                 <ModalFooter horizontal alignItems="center" justifyContent="flex-end" flow={2}>
                   <Button onClick={onClose}>{t('common:close')}</Button>
-                  <Button primary>{t('send:steps.confirmation.cta')}</Button>
+                  {txValidated ? (
+                    // TODO: actually go to operations details
+                    <Button onClick={onClose} primary>
+                      {t('send:steps.confirmation.success.cta')}
+                    </Button>
+                  ) : (
+                    <Button onClick={() => this.setState({ stepIndex: 0 })} primary>
+                      {t('send:steps.confirmation.error.cta')}
+                    </Button>
+                  )}
                 </ModalFooter>
               )}
             </ModalBody>
diff --git a/static/i18n/en/send.yml b/static/i18n/en/send.yml
index f0555ff7..4d2ee7c8 100644
--- a/static/i18n/en/send.yml
+++ b/static/i18n/en/send.yml
@@ -21,4 +21,13 @@ steps:
     body: Once you have checked everything is ok, you can validate securely the transaction on your device.
   confirmation:
     title: Confirmation
-    cta: View operation details
+    success:
+      title: Transaction successfully completed
+      text: You may have to wait few confirmations unitl the transaction appear  
+      cta: View operation details
+    error:
+      title: Transaction aborted
+      text: |
+        The transaction have been aborted on your device.
+        You can try again the operation.
+      cta: Retry operation