feat(support trade refunded modal)

blockchain · May 4, 2018 · 5fbf165 · 5fbf165
1 parent bdeb094
commit 5fbf165
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/Step3/index.js b/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/Step3/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 
-import { Icon, Text } from 'blockchain-info-components'
+import { Color, Icon, Text } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
   display: flex;
@@ -24,21 +24,41 @@ const Circle = styled.div`
   width: 80px;
   height: 80px;
   border-radius: 40px;
-  border: 1px solid ${props => props.status === 'disabled' ? props.theme['gray-2'] : props.theme['brand-primary']};
+  border: 1px solid ${props => getColor(props.status)};
   box-sizing: border-box;
   overflow: hidden;
 `
 
-const Step3 = props => (
-  <Wrapper>
-    <Circle status={props.status}>
-      <Icon name='checkmark' size='40px' color={props.status === 'disabled' ? 'gray-2' : 'brand-primary'} />
-    </Circle>
-    <Text size='13px' weight={500} capitalize>
-      <FormattedMessage id='components.exchangetimeline.trade' defaultMessage='Trade complete' />
-    </Text>
-  </Wrapper>
-)
+const getColor = (status) => {
+  switch (status) {
+    case 'disabled': return Color('gray-2')
+    case 'refunded': return Color('error')
+    default: return Color('brand-primary')
+  }
+}
+
+const Step3 = props => {
+  const { status } = props
+
+  return (
+    <Wrapper>
+      <Circle status={status}>
+        {
+          status === 'refunded'
+            ? <Icon name='alert' size='40px' color='error' />
+            : <Icon name='checkmark' size='40px' color={status === 'disabled' ? 'gray-2' : 'brand-primary'} />
+        }
+      </Circle>
+      <Text size='13px' weight={500} capitalize>
+        {
+          status === 'refunded'
+            ? <FormattedMessage id='components.exchangetimeline.refunded' defaultMessage='Trade refunded' />
+            : <FormattedMessage id='components.exchangetimeline.trade' defaultMessage='Trade complete' />
+        }
+      </Text>
+    </Wrapper>
+  )
+}
 
 Step3.propTypes = {
   status: PropTypes.oneOf(['disabled', 'active'])

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/index.js b/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/index.js
@@ -62,7 +62,7 @@ const ExchangeTimeline = props => {
 }
 
 ExchangeTimeline.propTypes = {
-  status: PropTypes.oneOf(['no_deposits', 'received', 'success', 'failed'])
+  status: PropTypes.oneOf(['no_deposits', 'received', 'resolved', 'success', 'failed'])
 }
 
 ExchangeTimeline.defaultProps = {

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/services.js b/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/services.js
@@ -4,7 +4,8 @@ export const calculateAnimation = status => {
     case 'no_deposits': return { step1: 'active', line1: 'active', step2: 'disabled', line2: 'disabled', step3: 'disabled' }
     case 'received': return { step1: 'inactive', line1: 'inactive', step2: 'active', line2: 'active', step3: 'disabled' }
     case 'complete': return { step1: 'inactive', line1: 'inactive', step2: 'inactive', line2: 'inactive', step3: 'active' }
-    case 'failed': return { step1: 'inactive', line1: 'inactive', step2: 'inactive', line2: 'inactive', step3: 'disabled ' }
+    case 'failed': return { step1: 'inactive', line1: 'inactive', step2: 'inactive', line2: 'inactive', step3: 'disabled' }
+    case 'resolved': return { step1: 'inactive', line1: 'inactive', step2: 'inactive', line2: 'inactive', step3: 'refunded' }
     default: return { step1: 'active', line1: 'active', step2: 'disabled', line2: 'disabled', step3: 'disabled ' }
   }
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/ExchangeDetails/template.success.js b/packages/blockchain-wallet-v4-frontend/src/modals/ExchangeDetails/template.success.js
@@ -38,17 +38,25 @@ const TableCell = styled.div`
   & > :first-child { margin-right: 5px; }
 `
 
+const getModalHeader = (status) => {
+  switch (status) {
+    case 'complete':
+      return <FormattedMessage id='modals.exchangedetails.title_success' defaultMessage='Success! Your exchange is complete' />
+    case 'resolved':
+      return <FormattedMessage id='modals.exchangedetails.title_refunded' defaultMessage='Trade refunded' />
+    default:
+      return <FormattedMessage id='modals.exchangedetails.title_inprogress' defaultMessage='Your exchange is in progress' />
+  }
+}
+
 const ExchangeDetails = (props) => {
   const { position, total, close, ...rest } = props
   const { status, sourceCoin, targetCoin, quotedRate, minerFee, orderId, depositAmount, withdrawalAmount } = rest
 
   return (
     <Modal size='large' position={position} total={total}>
       <ModalHeader closeButton={false}>
-        {status === 'complete'
-          ? <FormattedMessage id='modals.exchangedetails.title_success' defaultMessage='Success! Your exchange is complete' />
-          : <FormattedMessage id='modals.exchangedetails.title_inprogress' defaultMessage='Your exchange is in progress' />
-        }
+        {getModalHeader(status)}
       </ModalHeader>
       <ModalBody>
         <ExchangeTimeline status={status} />