feat(Jumio): expected delivery dates for jumio

packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/Jumio/index.js

@@ -33,7 +33,7 @@ class JumioContainer extends React.PureComponent {
     const { data } = this.props
     const { accounts } = data.getOrElse({})
     accounts.length
-      ? this.props.modalActions.closeModal()
+      ? this.props.sfoxActions.handleModalClose()
       : this.props.sfoxActions.nextStep('funding')
   }
 

packages/blockchain-wallet-v4-frontend/src/modals/SfoxTradeDetails/index.js

@@ -67,12 +67,10 @@ const renderTotal = trade => {
 
 class SfoxTradeDetails extends React.PureComponent {
   render () {
-    const headerStatus = statusHelper(this.props.trade.state)
-    const bodyStatus = bodyStatusHelper(
-      this.props.trade.state,
-      this.props.trade.isBuy
-    )
     const { account, trade } = this.props
+    const { expectedDelivery, feeAmount, id, isBuy, state } = trade
+    const headerStatus = statusHelper(state)
+    const bodyStatus = bodyStatusHelper(state, isBuy, expectedDelivery)
 
     return (
       <Modal
@@ -82,7 +80,7 @@ class SfoxTradeDetails extends React.PureComponent {
       >
         <ModalHeader onClose={this.props.close}>
           <Text color={headerStatus.color}>
-            {trade.isBuy ? `Buy Order` : 'Sell Order'} {headerStatus.text}
+            {isBuy ? `Buy Order` : 'Sell Order'} {headerStatus.text}
           </Text>
         </ModalHeader>
         <ModalBody>
@@ -93,11 +91,11 @@ class SfoxTradeDetails extends React.PureComponent {
             <FormattedMessage
               id='sfoxtradedetails.orderdetails.tradeid'
               defaultMessage='Your order ID is: SFX-{id}'
-              values={{ id: trade.id }}
+              values={{ id }}
             />
           </Text>
           <Text style={spacing('mt-20')} size='14px' weight={400}>
-            {trade.isBuy ? (
+            {isBuy ? (
               <FormattedMessage
                 id='sfoxtradedetails.orderdetails.method'
                 defaultMessage='Payment Method'
@@ -115,7 +113,7 @@ class SfoxTradeDetails extends React.PureComponent {
           </MethodContainer>
           <OrderDetailsTable style={spacing('mt-10')}>
             <OrderDetailsRow>
-              {trade.isBuy ? (
+              {isBuy ? (
                 <Text size='13px' weight={300}>
                   <FormattedMessage
                     id='orderdetails.amounttopurchase'
@@ -149,12 +147,10 @@ class SfoxTradeDetails extends React.PureComponent {
                   />
                 </Tooltip>
               </ToolTipWrapper>
-              <Text size='13px' weight={300}>{`$${trade.feeAmount.toFixed(
-                2
-              )}`}</Text>
+              <Text size='13px' weight={300}>{`$${feeAmount.toFixed(2)}`}</Text>
             </OrderDetailsRow>
             <OrderDetailsRow>
-              {trade.isBuy ? (
+              {isBuy ? (
                 <Text size='13px' weight={300}>
                   <FormattedMessage
                     id='orderdetails.totalcost'
@@ -173,6 +169,19 @@ class SfoxTradeDetails extends React.PureComponent {
                 {renderTotal(trade)}
               </Text>
             </OrderDetailsRow>
+            {expectedDelivery && (
+              <OrderDetailsRow>
+                <Text size='13px' weight={300}>
+                  <FormattedMessage
+                    id='orderdetails.fundsdelivery'
+                    defaultMessage='Estimated Delivery of Funds'
+                  />
+                </Text>
+                <Text size='13px' weight={300}>
+                  {new Date(expectedDelivery).toDateString()}
+                </Text>
+              </OrderDetailsRow>
+            )}
           </OrderDetailsTable>
           <ButtonRow>
             <Button width='100px' onClick={this.props.close} nature='primary'>

packages/blockchain-wallet-v4-frontend/src/services/SfoxService/index.js

@@ -50,8 +50,8 @@ export const statusHelper = status => {
         color: 'transferred',
         text: (
           <FormattedMessage
-            id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.processing'
-            defaultMessage='Processing'
+            id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.processing"
+            defaultMessage="Processing"
           />
         )
       }
@@ -60,8 +60,8 @@ export const statusHelper = status => {
         color: 'success',
         text: (
           <FormattedMessage
-            id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.completed'
-            defaultMessage='Completed'
+            id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.completed"
+            defaultMessage="Completed"
           />
         )
       }
@@ -70,8 +70,8 @@ export const statusHelper = status => {
         color: 'error',
         text: (
           <FormattedMessage
-            id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.rejected'
-            defaultMessage='Rejected'
+            id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.rejected"
+            defaultMessage="Rejected"
           />
         )
       }
@@ -80,8 +80,8 @@ export const statusHelper = status => {
         color: 'error',
         text: (
           <FormattedMessage
-            id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.failed'
-            defaultMessage='Failed'
+            id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.failed"
+            defaultMessage="Failed"
           />
         )
       }
@@ -90,50 +90,51 @@ export const statusHelper = status => {
         color: '',
         text: (
           <FormattedMessage
-            id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.unknown'
-            defaultMessage='Unknown'
+            id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatus.unknown"
+            defaultMessage="Unknown"
           />
         )
       }
   }
 }
 
-export const bodyStatusHelper = (status, isBuy) => {
+export const bodyStatusHelper = (status, isBuy, date) => {
   if (isBuy) {
     switch (status) {
       case 'processing':
         return {
           text: (
             <FormattedMessage
-              id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.buy.processing'
-              defaultMessage='Your buy trade has been initiated. You will receive your bitcoin in 3-5 business days.'
+              id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.buy.processing"
+              defaultMessage="Your buy trade has been initiated. You will receive your on {date}."
+              values={{ date: new Date(date).toDateString() }}
             />
           )
         }
       case 'completed':
         return {
           text: (
             <FormattedMessage
-              id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.buy.completed'
-              defaultMessage='Your buy trade is complete!'
+              id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.buy.completed"
+              defaultMessage="Your buy trade is complete!"
             />
           )
         }
       case 'rejected':
         return {
           text: (
             <FormattedMessage
-              id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.buy.rejected'
-              defaultMessage='Your buy trade has been rejected. Please contact support.'
+              id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.buy.rejected"
+              defaultMessage="Your buy trade has been rejected. Please contact support."
             />
           )
         }
       case 'failed':
         return {
           text: (
             <FormattedMessage
-              id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.buy.failed'
-              defaultMessage='Your buy trade failed. Please contact support.'
+              id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.buy.failed"
+              defaultMessage="Your buy trade failed. Please contact support."
             />
           )
         }
@@ -144,35 +145,36 @@ export const bodyStatusHelper = (status, isBuy) => {
         return {
           text: (
             <FormattedMessage
-              id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.sell.processing'
-              defaultMessage='Your sell trade has been initiated. You will receive your funds in 3-5 business days.'
+              id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.sell.processing"
+              defaultMessage="Your sell trade has been initiated. You will receive your funds on {date}."
+              values={{ date: new Date(date).toDateString() }}
             />
           )
         }
       case 'completed':
         return {
           text: (
             <FormattedMessage
-              id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.sell.completed'
-              defaultMessage='Your sell trade is complete!'
+              id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.sell.completed"
+              defaultMessage="Your sell trade is complete!"
             />
           )
         }
       case 'rejected':
         return {
           text: (
             <FormattedMessage
-              id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.sell.rejected'
-              defaultMessage='Your sell trade has been rejected. Please contact support.'
+              id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.sell.rejected"
+              defaultMessage="Your sell trade has been rejected. Please contact support."
             />
           )
         }
       case 'failed':
         return {
           text: (
             <FormattedMessage
-              id='scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.sell.failed'
-              defaultMessage='Your sell trade failed. Please contact support.'
+              id="scenes.services.sfoxservice.buysellorderhistory.list.orderstatusbody.sell.failed"
+              defaultMessage="Your sell trade failed. Please contact support."
             />
           )
         }
@@ -181,16 +183,16 @@ export const bodyStatusHelper = (status, isBuy) => {
   return {
     text: (
       <FormattedMessage
-        id='scenes.buysellorderhistory.list.orderstatusbody.unknown'
-        defaultMessage='There are issues with this trade. Please contact support.'
+        id="scenes.buysellorderhistory.list.orderstatusbody.unknown"
+        defaultMessage="There are issues with this trade. Please contact support."
       />
     )
   }
 }
 
 export const reviewOrder = {
   baseBtc: q => q.baseCurrency === 'BTC',
-  renderFirstRow (q, type) {
+  renderFirstRow(q, type) {
     if (type === 'buy') {
       if (this.baseBtc(q)) {
         return `${q.baseAmount / 1e8} BTC ($${(
@@ -209,7 +211,7 @@ export const reviewOrder = {
       }
     }
   },
-  renderTotal (q, type) {
+  renderTotal(q, type) {
     if (type === 'buy') {
       if (this.baseBtc(q)) return `$${q.quoteAmount}`
       else return `$${q.baseAmount}`