feat(simple buy): handle card payments when pending_depo

blockchain · Apr 29, 2020 · 0d00134 · 0d00134
1 parent 8bc8000
commit 0d00134
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 35 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/types.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/types.ts
@@ -1416,6 +1416,7 @@ type MessagesType = {
   'scenes.home.banner.coinifyToSB.revamped': "We've revamped the Buy Crypto experience"
   'scenes.home.banner.finishsigningup': 'Finish Signing Up'
   'scenes.home.banner.pendingbuy': 'Pending Buy'
+  'scenes.home.banner.receive_cc_order': 'Once you finalize your credit card information, your buy order will complete.'
   'scenes.home.banner.receivetransfer': 'Once we receive your bank transfer, your buy order will complete.'
   'scenes.home.banner.sborder.details': 'View Details'
   'scenes.home.banner.signupapprove': 'Once you finish and get approved, start buying crypto.'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts
@@ -538,6 +538,7 @@ export default ({
       yield delay(3000)
     }
 
+    yield put(A.fetchSBOrders())
     yield put(A.setStep({ step: 'ORDER_SUMMARY', order }))
   }
 

diff --git a/...es/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/ThreeDSHandler/template.success.tsx b/...es/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/ThreeDSHandler/template.success.tsx
@@ -21,28 +21,37 @@ const Success: React.FC<Props> = props => {
   ) : (
     <CustomFlyoutWrapper>
       <>
-        <Icon
-          cursor
-          name='arrow-left'
-          size='20px'
-          color='grey600'
-          role='button'
-          onClick={() => {
-            switch (props.type) {
-              case 'CARD':
-                props.simpleBuyActions.setStep({
-                  step: 'ADD_CARD',
-                  cardId: props.card.id
-                })
-                break
-              case 'ORDER':
-                props.simpleBuyActions.setStep({
-                  step: 'CHECKOUT_CONFIRM',
-                  order: props.order
-                })
-            }
-          }}
-        />
+        {props.type === 'CARD' && (
+          <Icon
+            cursor
+            name='arrow-left'
+            size='20px'
+            color='grey600'
+            role='button'
+            onClick={() => {
+              props.simpleBuyActions.setStep({
+                step: 'ADD_CARD',
+                cardId: props.card.id
+              })
+            }}
+          />
+        )}
+        {props.type === 'ORDER' && (
+          <Icon
+            cursor
+            name='arrow-right'
+            size='20px'
+            color='grey600'
+            role='button'
+            style={{ justifyContent: 'flex-end' }}
+            onClick={() => {
+              props.simpleBuyActions.setStep({
+                step: 'ORDER_SUMMARY',
+                order: props.order
+              })
+            }}
+          />
+        )}
         <Iframe
           src={
             props.domains.walletHelper +

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/SBOrderBanner/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/SBOrderBanner/index.tsx
@@ -68,14 +68,7 @@ const BannerButton = styled(Button)`
 `
 
 class SBOrderBanner extends PureComponent<Props> {
-  showModal = () => {
-    const latestPendingOrder = this.props.orders.find(order => {
-      return (
-        order.state === 'PENDING_CONFIRMATION' ||
-        order.state === 'PENDING_DEPOSIT'
-      )
-    })
-
+  showModal = (latestPendingOrder: SBOrderType) => {
     if (!latestPendingOrder) return
     this.props.simpleBuyActions.showModal('pendingOrder')
     this.props.simpleBuyActions.setStep({
@@ -88,6 +81,15 @@ class SBOrderBanner extends PureComponent<Props> {
   }
 
   render () {
+    const latestPendingOrder = this.props.orders.find(order => {
+      return (
+        order.state === 'PENDING_CONFIRMATION' ||
+        order.state === 'PENDING_DEPOSIT'
+      )
+    })
+
+    if (!latestPendingOrder) return null
+
     return (
       <Wrapper>
         <Row>
@@ -102,15 +104,22 @@ class SBOrderBanner extends PureComponent<Props> {
               />
             </Text>
             <Copy size='16px' color='grey600' weight={500}>
-              <FormattedMessage
-                id='scenes.home.banner.receivetransfer'
-                defaultMessage='Once we receive your bank transfer, your buy order will complete.'
-              />
+              {latestPendingOrder.paymentMethodId ? (
+                <FormattedMessage
+                  id='scenes.home.banner.receive_cc_order'
+                  defaultMessage='Once you finalize your credit card information, your buy order will complete.'
+                />
+              ) : (
+                <FormattedMessage
+                  id='scenes.home.banner.receivetransfer'
+                  defaultMessage='Once we receive your bank transfer, your buy order will complete.'
+                />
+              )}
             </Copy>
           </Column>
         </Row>
         <BannerButton
-          onClick={() => this.showModal()}
+          onClick={() => this.showModal(latestPendingOrder)}
           jumbo
           data-e2e='openPendingSBOrder'
           nature='primary'