feat(simple buy): handle adding card

blockchain · Apr 24, 2020 · 7de9a14 · 7de9a14
1 parent 52ef4b8
commit 7de9a14
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 74 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts
@@ -54,7 +54,6 @@ export function simpleBuyReducer (
         ...state,
         step: 'CURRENCY_SELECTION',
         account: Remote.NotAsked,
-        order: undefined,
         pairs: Remote.NotAsked,
         quote: Remote.NotAsked,
         suggestedAmounts: Remote.NotAsked
@@ -242,7 +241,8 @@ export function simpleBuyReducer (
             ...state,
             cryptoCurrency: action.payload.cryptoCurrency,
             fiatCurrency: action.payload.fiatCurrency,
-            step: action.payload.step
+            step: action.payload.step,
+            order: undefined
           }
         case '3DS_HANDLER':
         case 'CHECKOUT_CONFIRM':

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
@@ -130,6 +130,18 @@ export default ({
       yield put(A.setStep({ step: 'CHECKOUT_CONFIRM', order }))
       yield put(A.fetchSBOrders())
     } catch (e) {
+      // After CC has been activated we try to create an order
+      // If order creation fails go back to ENTER_AMOUNT step
+      // Wait for the form to be INITIALIZED and display err
+      const step = S.getStep(yield select())
+      if (step !== 'ENTER_AMOUNT') {
+        const fiatCurrency = S.getFiatCurrency(yield select()) || 'EUR'
+        yield put(A.setStep({ step: 'ENTER_AMOUNT', fiatCurrency }))
+        yield take(AT.INITIALIZE_CHECKOUT)
+        yield delay(3000)
+        yield put(actions.form.startSubmit('simpleBuyCheckout'))
+      }
+
       const error = errorHandler(e)
       yield put(actions.form.stopSubmit('simpleBuyCheckout', { _error: error }))
     }

diff --git a/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CheckoutConfirm/template.success.tsx b/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CheckoutConfirm/template.success.tsx
@@ -9,7 +9,6 @@ import { FormattedMessage } from 'react-intl'
 import { getOutputAmount } from 'data/components/simpleBuy/model'
 import { InjectedFormProps, reduxForm } from 'redux-form'
 import { Props as OwnProps, SuccessStateType } from '.'
-import BigNumber from 'bignumber.js'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -129,12 +128,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
           />
         </Title>
         <Value>
-          {displayFiat(
-            new BigNumber(props.order.inputQuantity)
-              .plus(props.order.fee || '0')
-              .toString()
-          )}{' '}
-          {props.order.inputCurrency}
+          {displayFiat(props.order.inputQuantity)} {props.order.inputCurrency}
         </Value>
       </Row>
       <Bottom>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderSummary/template.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderSummary/template.tsx
@@ -137,29 +137,30 @@ const Success: React.FC<Props> = props => {
           </Value>
         </Row>
       </div>
-      {(props.order.state === 'PENDING_CONFIRMATION' ||
-        props.order.state === 'PENDING_DEPOSIT') && (
-        <Bottom>
-          <Button
-            data-e2e='sbCancelPending'
-            size='16px'
-            height='48px'
-            nature='light-red'
-            onClick={() =>
-              props.simpleBuyActions.setStep({
-                step: 'CANCEL_ORDER',
-                order: props.order
-              })
-            }
-          >
-            {/* TODO: Simple Buy - order types */}
-            <FormattedMessage
-              id='modals.simplebuy.summary.cancelbuy'
-              defaultMessage='Cancel Buy'
-            />
-          </Button>
-        </Bottom>
-      )}
+      {props.order.state === 'PENDING_CONFIRMATION' ||
+        (props.order.state === 'PENDING_DEPOSIT' &&
+          !props.order.paymentMethodId && (
+            <Bottom>
+              <Button
+                data-e2e='sbCancelPending'
+                size='16px'
+                height='48px'
+                nature='light-red'
+                onClick={() =>
+                  props.simpleBuyActions.setStep({
+                    step: 'CANCEL_ORDER',
+                    order: props.order
+                  })
+                }
+              >
+                {/* TODO: Simple Buy - order types */}
+                <FormattedMessage
+                  id='modals.simplebuy.summary.cancelbuy'
+                  defaultMessage='Cancel Buy'
+                />
+              </Button>
+            </Bottom>
+          ))}
     </Wrapper>
   )
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/ThreeDSHandler/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/ThreeDSHandler/index.tsx
@@ -45,7 +45,6 @@ class ThreeDSHandler extends PureComponent<Props, State> {
         this.props.simpleBuyActions.pollSBCard(card.id)
         break
       default:
-        this.props.simpleBuyActions.setStep({ step: 'ADD_CARD' })
     }
   }
 

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
@@ -16,49 +16,47 @@ const Iframe = styled.iframe`
 `
 
 const Success: React.FC<Props> = props => {
-  return (
+  return props.threeDSCallbackReceived ? (
+    <Loading polling order={props.type === 'ORDER'} />
+  ) : (
     <CustomFlyoutWrapper>
-      {props.threeDSCallbackReceived ? (
-        <Loading polling order={props.type === 'ORDER'} />
-      ) : (
-        <>
-          <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
-                  })
-              }
-            }}
-          />
-          <Iframe
-            src={
-              props.domains.walletHelper +
-              '/wallet-helper/everypay/#/paymentLink/' +
-              encodeURIComponent(
-                props.type === 'CARD'
-                  ? props.providerDetails.everypay.paymentLink
-                  : props.order.attributes
-                  ? props.order.attributes.everypay.paymentLink
-                  : ''
-              )
+      <>
+        <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
+                })
             }
-          />
-        </>
-      )}
+          }}
+        />
+        <Iframe
+          src={
+            props.domains.walletHelper +
+            '/wallet-helper/everypay/#/paymentLink/' +
+            encodeURIComponent(
+              props.type === 'CARD'
+                ? props.providerDetails.everypay.paymentLink
+                : props.order.attributes
+                ? props.order.attributes.everypay.paymentLink
+                : ''
+            )
+          }
+        />
+      </>
     </CustomFlyoutWrapper>
   )
 }