fix(open banking): add a loading step between approve and the qrcode …

…screen and change order confirm button to next for yapily orders
blockchain · Apr 16, 2021 · 57dc91e · 57dc91e
1 parent ee4bb50
commit 57dc91e
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 1 deletion.
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
@@ -404,6 +404,7 @@ export function simpleBuyReducer(
             step: action.payload.step,
             sellOrder: action.payload.sellOrder
           }
+        case 'LOADING':
         default: {
           return {
             ...state,

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
@@ -488,6 +488,7 @@ export default ({
       if (account?.partner === 'YAPILY') {
         // for OB the authorisationUrl isn't in the initial response to confirm
         // order. We need to poll the order for it.
+        yield put(A.setStep({ step: 'LOADING' }))
         const order = yield retry(
           RETRY_AMOUNT,
           SECONDS * 1000,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts
@@ -74,6 +74,7 @@ export enum SimpleBuyStepType {
   'ENTER_AMOUNT',
   'KYC_REQUIRED',
   'LINKED_PAYMENT_ACCOUNTS',
+  'LOADING',
   'OPEN_BANKING_CONNECT',
   'PAYMENT_METHODS',
   'PREVIEW_SELL',
@@ -435,6 +436,7 @@ export type StepActionsPayload =
         | 'CC_BILLING_ADDRESS'
         | 'KYC_REQUIRED'
         | 'UPGRADE_TO_GOLD'
+        | 'LOADING'
     }
 
 interface SetStepAction {

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
@@ -255,7 +255,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
           {props.submitting ? (
             <HeartbeatLoader height='16px' width='16px' color='white' />
           ) : paymentPartner === 'YAPILY' ? (
-            <FormattedMessage id='copy.approve' defaultMessage='Approve' />
+            <FormattedMessage id='copy.next' defaultMessage='Next' />
           ) : (
             `${
               orderType === 'BUY' ? 'Buy' : 'Sell'

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx
@@ -19,6 +19,7 @@ import { RootState } from 'data/rootReducer'
 import { BankStatusType, FastLinkType } from 'data/types'
 import ModalEnhancer from 'providers/ModalEnhancer'
 
+import { Loading as StdLoading, LoadingTextEnum } from '../components'
 import { ModalPropsType } from '../types'
 // step templates
 import AddCard from './AddCard'
@@ -228,6 +229,11 @@ class SimpleBuy extends PureComponent<Props, State> {
                 <UpgradeToGold {...this.props} handleClose={this.handleClose} />
               </FlyoutChild>
             )}
+            {this.props.step === 'LOADING' && (
+              <FlyoutChild>
+                <StdLoading text={LoadingTextEnum.GETTING_READY} />
+              </FlyoutChild>
+            )}
           </Flyout>
         )
       },
@@ -304,6 +310,7 @@ type LinkStatePropsType =
         | 'CC_BILLING_ADDRESS'
         | 'KYC_REQUIRED'
         | 'UPGRADE_TO_GOLD'
+        | 'LOADING'
     }
   | {
       orderType: SBOrderActionType