feat(open banking): show error screen when a user cancels a deposit f…

…rom their bank app, as well as when the retry times out
blockchain · Apr 13, 2021 · 558be44 · 558be44
1 parent c0fb6b9
commit 558be44
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 11 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -663,7 +663,9 @@ type MessagesType = {
   'modals.brokerage.link_via_desktop': 'Link via desktop'
   'modals.brokerage.link_via_mobile': 'Link via mobile'
   'modals.brokerage.updating_your_wallet': 'Updating Your Wallet...'
-  'modals.brokerage.this_could_take': 'This could take up to 30 secconds. Please do not go back or close the app.'
+  'modals.brokerage.this_could_take': 'This could take up to 30 seconds. Please do not go back or close the app.'
+  'modals.brokerage.timed_out_title': 'We timed out waiting to hear from your bank.'
+  'modals.brokerage.timed_out_sub': 'This happens from time to time. Wait a few minutes and then check the status of your deposit in the transaction list.'
   'modals.brokerage.use_phone_camera': 'Use your phone’s camera to scan the QR code.'
   'modals.brokerage.waiting_to_hear': 'Waiting to hear from your bank'
   'modals.brokerage.this_can_take_a_while': 'This can take a while, hold tight!'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagas.ts
@@ -74,7 +74,6 @@ export default ({
     return data
   }
 
-  // TODO move OB stuff to separate saga
   const fetchBankTransferUpdate = function * (
     action: ReturnType<typeof A.fetchBankTransferUpdate>
   ) {
@@ -284,7 +283,11 @@ export default ({
   const ClearedStatusCheck = function * (orderId) {
     let order: SBTransactionType = yield call(api.getPaymentById, orderId)
 
-    if (order.state === 'CLEARED' || order.state === 'COMPLETE') {
+    if (
+      order.state === 'CLEARED' ||
+      order.state === 'COMPLETE' ||
+      order.state === 'FAILED'
+    ) {
       return order
     } else {
       throw new Error('retrying to fetch for cleared status')
@@ -313,7 +316,7 @@ export default ({
     try {
       const data = yield call(api.createFiatDeposit, amount, id, currency)
       if (partner === 'YAPILY') {
-        const order = yield retry(100, 10000, AuthUrlCheck, data.paymentId)
+        const order = yield retry(30, 10000, AuthUrlCheck, data.paymentId)
         if (
           order.extraAttributes &&
           'authorisationUrl' in order.extraAttributes &&
@@ -325,7 +328,17 @@ export default ({
               dwStep: BankDWStepType.DEPOSIT_CONNECT
             })
           )
-          yield retry(100, 10000, ClearedStatusCheck, data.paymentId)
+          try {
+            const updatedOrder: SBTransactionType = yield retry(
+              30,
+              10000,
+              ClearedStatusCheck,
+              data.paymentId
+            )
+            yield put(actions.form.change('brokerageTx', 'order', updatedOrder))
+          } catch (error) {
+            yield put(actions.form.change('brokerageTx', 'retryTimeout', true))
+          }
         }
       }
       yield put(

diff --git a/.../blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/DepositStatus/index.tsx b/.../blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/DepositStatus/index.tsx
@@ -12,6 +12,7 @@ import { Loading, LoadingTextEnum } from '../../../../components'
 import Failure from '../template.failure'
 import { getData } from './selectors'
 import Success from './template.success'
+import TimedOut from './template.timedOut'
 
 const DepositStatus = props => {
   useEffect(() => {
@@ -24,7 +25,15 @@ const DepositStatus = props => {
   }, [])
 
   return props.data.cata({
-    Success: val => <Success {...val} {...props} />,
+    Success: val =>
+      props.formValues?.order?.state === 'CLEARED' ||
+      props.formValues?.order?.state === 'COMPLETED' ? (
+        <Success {...val} {...props} />
+      ) : props.formValues?.retryTimeout ? (
+        <TimedOut {...props} />
+      ) : (
+        <Failure {...props} />
+      ),
     Failure: () => <Failure {...props} />,
     Loading: () => <Loading text={LoadingTextEnum.LOADING} />,
     NotAsked: () => <Loading text={LoadingTextEnum.LOADING} />

diff --git a/...wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/DepositStatus/template.timedOut.tsx b/...wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/DepositStatus/template.timedOut.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+
+import { Button, Image, Text } from 'blockchain-info-components'
+
+const Wrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 56px;
+  box-sizing: border-box;
+`
+const Title = styled(Text)`
+  margin: 40px 0 10px;
+`
+
+const SubTitle = styled(Text)`
+  margin: 0 0 24px;
+`
+
+const TimedOut = props => {
+  return (
+    <Wrapper>
+      <div>
+        <Image
+          width='48px'
+          height='48px'
+          name='world-alert'
+          srcset={{ 'world-alert2': '2x', 'world-alert3': '3x' }}
+        />
+        <Title weight={600} size='20px' lineHeight='150%'>
+          <FormattedMessage
+            id='modals.brokerage.timed_out_title'
+            defaultMessage='We timed out waiting to hear from your bank.'
+          />
+        </Title>
+        <SubTitle weight={400} size='14px' lineHeight='150%'>
+          <FormattedMessage
+            id='modals.brokerage.timed_out_sub'
+            defaultMessage='This happens from time to time. Wait a few minutes and then check the status of your deposit in the transaction list.'
+          />
+        </SubTitle>
+        <Button
+          fullwidth
+          height='48px'
+          data-e2e='addBankClose'
+          nature='primary'
+          size='16px'
+          onClick={props.handleClose}
+        >
+          <FormattedMessage id='buttons.close' defaultMessage='Close' />
+        </Button>
+      </div>
+    </Wrapper>
+  )
+}
+
+export default TimedOut
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/components/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/components/index.tsx
@@ -252,7 +252,7 @@ const LoadingUpdating = () => {
       </HeadingText>
       <BodyText color='grey600'>
         <FormattedMessage
-          defaultMessage='This could take up to 30 secconds. Please do not go back or close the app.'
+          defaultMessage='This could take up to 30 seconds. Please do not go back or close the app.'
           id='modals.brokerage.this_could_take'
         />
       </BodyText>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/index.tsx
@@ -37,7 +37,7 @@ class TransactionList extends PureComponent<Props> {
     return data.cata({
       Success: (transactions: SuccessStateType) => (
         <TransactionsWrapper>
-          {transactions.map(tx => {
+          {transactions.map((tx, i) => {
             return 'hash' in tx ? (
               <NonCustodialTxListItem
                 key={tx.hash}
@@ -47,11 +47,12 @@ class TransactionList extends PureComponent<Props> {
                 currency={currency}
               />
             ) : 'priceFunnel' in tx ? (
-              <SwapOrderTx order={tx} coin={coin as CoinType} />
+              <SwapOrderTx key={i} order={tx} coin={coin as CoinType} />
             ) : 'pair' in tx ? (
-              <SimpleBuyListItem order={tx} />
+              <SimpleBuyListItem key={i} order={tx} />
             ) : (
               <CustodialTxListItem
+                key={i}
                 tx={tx as FiatSBAndSwapTransactionType}
                 {...this.props}
               />

diff --git a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts
@@ -248,7 +248,7 @@ export type SBTransactionType = {
         hash: string
         id: string
         qrcodeUrl?: string
-        status: 'UNCONFIRMED' | 'CONFIRMED' | 'COMPLETED' | 'CLEARED'
+        status: 'UNCONFIRMED' | 'CONFIRMED' | 'COMPLETED' | 'CLEARED' | 'FAILED'
         txHash: string
       }
       type: 'DEPOSIT' | 'REFUNDED' | 'SELL'