feat(Jumio): add expected delivery to Order Review

blockchain · Jul 22, 2018 · 193d9d4 · 193d9d4
1 parent 867020a
commit 193d9d4
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 17 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxTradeDetails/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxTradeDetails/index.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import moment from 'moment'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { bindActionCreators, compose } from 'redux'
@@ -178,7 +179,7 @@ class SfoxTradeDetails extends React.PureComponent {
                   />
                 </Text>
                 <Text size='13px' weight={300}>
-                  {new Date(expectedDelivery).toDateString()}
+                  {moment(expectedDelivery).format('dddd, MMMM Do')}
                 </Text>
               </OrderDetailsRow>
             )}

diff --git a/...allet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/JumioStatus/template.success.js b/...allet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/JumioStatus/template.success.js
@@ -15,16 +15,32 @@ const Body = styled(Text)`
   font-size: 14px;
   font-weight: 300;
 `
+const Link = styled(Text)`
+  font-size: 14px;
+  font-weight: 300;
+  cursor: pointer;
+  text-decoration: underline;
+  color: ${props => props.theme['brand-secondary']};
+`
 const ButtonWrapper = styled.div`
   display: flex;
   justify-content: center;
-  margin-top: 10px;
+  > button {
+    margin-top: 10px;
+  }
 `
 
 export const Success = ({ value, onClick }) => {
-  const { status } = value
-  const statusTitleHelper = status => {
+  const { status, completed } = value
+  const statusTitleHelper = () => {
     switch (status) {
+      case 'DONE':
+        return (
+          <FormattedMessage
+            id='scenes.buysell.sfoxcheckout.content.jumio.title.completed'
+            defaultMessage='Identity Verification Completed'
+          />
+        )
       case 'PENDING':
         return (
           <FormattedMessage
@@ -41,10 +57,22 @@ export const Success = ({ value, onClick }) => {
         )
     }
   }
-  const statusBodyHelper = status => {
+  const statusBodyHelper = () => {
     switch (status) {
-      case 'PENDING':
+      case 'DONE':
         return (
+          <FormattedMessage
+            id='scenes.buysell.sfoxcheckout.content.jumio.body.completed'
+            defaultMessage='Thank you for verifying your identity.'
+          />
+        )
+      case 'PENDING':
+        return completed ? (
+          <FormattedMessage
+            id='scenes.buysell.sfoxcheckout.content.jumio.body.pending.awaitingjumio'
+            defaultMessage='Thank you for completing your identity verification. It may take our partner a few minutes to finish the verification.'
+          />
+        ) : (
           <FormattedMessage
             id='scenes.buysell.sfoxcheckout.content.jumio.body.pending'
             defaultMessage='It looks like you tried to verify your identity but never finished.'
@@ -54,26 +82,49 @@ export const Success = ({ value, onClick }) => {
         return (
           <FormattedMessage
             id='scenes.buysell.sfoxcheckout.content.jumio.body.failed'
-            defaultMessage='There was a problem with your identity verification documents. Please try again.'
+            defaultMessage='There was a problem verifying your identity. Please try again.'
           />
         )
     }
   }
 
-  return (
-    status !== 'DONE' && (
-      <Container>
-        <Title>{statusTitleHelper(status)}</Title>
-        <Body>{statusBodyHelper(status)}</Body>
-        <ButtonWrapper>
+  const statusButtonHelper = () => {
+    switch (status) {
+      case 'DONE':
+        return null
+      case 'PENDING':
+        return completed ? (
+          <Link>
+            <FormattedMessage
+              id='scenes.buysell.sfoxcheckout.content.jumio.button.refresh'
+              defaultMessage='Refresh Status'
+            />
+          </Link>
+        ) : (
           <Button onClick={onClick} nature='light' uppercase>
             <FormattedMessage
               id='scenes.buysell.sfoxcheckout.content.jumio.button.tryagain'
               defaultMessage='Try Again'
             />
           </Button>
-        </ButtonWrapper>
-      </Container>
-    )
+        )
+      case 'FAILED':
+        return (
+          <Button onClick={onClick} nature='light' uppercase>
+            <FormattedMessage
+              id='scenes.buysell.sfoxcheckout.content.jumio.button.tryagain'
+              defaultMessage='Try Again'
+            />
+          </Button>
+        )
+    }
+  }
+
+  return (
+    <Container>
+      <Title>{statusTitleHelper()}</Title>
+      <Body>{statusBodyHelper()}</Body>
+      <ButtonWrapper>{statusButtonHelper()}</ButtonWrapper>
+    </Container>
   )
 }
diff --git a/...ages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/OrderReview.js b/...ages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/OrderReview.js
@@ -79,7 +79,13 @@ const faqList = [
 const faqListHelper = () =>
   faqList.map(el => <Helper question={el.question} answer={el.answer} />)
 
-export const OrderDetails = ({ quoteR, account, onRefreshQuote, type }) => (
+export const OrderDetails = ({
+  quoteR,
+  account,
+  onRefreshQuote,
+  profile,
+  type
+}) => (
   <ExchangeCheckoutWrapper>
     <PartnerHeader size='32px' weight={600} style={spacing('mb-10')}>
       <FormattedMessage
@@ -201,6 +207,17 @@ export const OrderDetails = ({ quoteR, account, onRefreshQuote, type }) => (
             .getOrElse('~')}
         </Text>
       </OrderDetailsRow>
+      <OrderDetailsRow>
+        <Text size='13px' weight={300}>
+          <FormattedMessage
+            id='orderdetails.fundsdelivery'
+            defaultMessage='Estimated Delivery of Funds'
+          />
+        </Text>
+        <Text size='13px' weight={300}>
+          {reviewOrder.renderDate(profile, type)}
+        </Text>
+      </OrderDetailsRow>
     </OrderDetailsTable>
     {quoteR
       .map(quote => (

diff --git a/...blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js b/...blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js
@@ -128,6 +128,7 @@ const Success = props => {
 
   const accounts = Remote.of(props.value.accounts).getOrElse([])
   const profile = Remote.of(props.value.profile).getOrElse({
+    processingTimes: { usd: { buy: 40320, sell: 7200 } },
     account: { verification_status: {} },
     limits: { buy: 0, sell: 0 }
   })
@@ -185,6 +186,7 @@ const Success = props => {
                 quoteR={buyQuoteR}
                 account={accounts[0]}
                 onRefreshQuote={refreshBuyQuote}
+                profile={profile}
                 type={'buy'}
               />
             </CheckoutWrapper>
@@ -228,6 +230,7 @@ const Success = props => {
                 quoteR={sellQuoteR}
                 account={accounts[0]}
                 onRefreshQuote={refreshSellQuote}
+                profile={profile}
                 type={'sell'}
               />
             </CheckoutWrapper>

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/SfoxService/index.js b/packages/blockchain-wallet-v4-frontend/src/services/SfoxService/index.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import moment from 'moment'
 import { FormattedMessage } from 'react-intl'
 
 export const isVerified = verificationStatus => {
@@ -220,5 +221,12 @@ export const reviewOrder = {
         return `$${(+q.quoteAmount - +q.feeAmount).toFixed(2)}`
       } else return `$${(+q.baseAmount - +q.feeAmount).toFixed(2)}`
     }
+  },
+  renderDate (p, type) {
+    let minutesInADay = 1440
+    let waitingDays = p.processingTimes.usd[type] / minutesInADay
+    return moment()
+      .add(waitingDays, 'days')
+      .format('dddd, MMMM Do')
   }
 }