feat(simple buy): added different labels fro PIS flow when linking bank

blockchain · Jul 21, 2021 · 2322f8f · 2322f8f
1 parent 28d0ddb
commit 2322f8f
Show file tree

Hide file tree

Showing 19 changed files with 103 additions and 100 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
@@ -708,8 +708,10 @@ type MessagesType = {
   'modals.brokerage.remove_bank.description': "You're about to remove your {bankAccount}"
   'modals.brokerage.link_bank': 'Blockchain.com uses Yodlee to verify your bank credentials & securely link your accounts.'
   'modals.brokerage.link_bank_yodlee_terms': "By hitting Continue, you Agree to Yodlee's"
+  'modals.brokerage.pay_via_desktop': 'Pay via desktop'
   'modals.brokerage.link_via_desktop': 'Link via desktop'
   'modals.brokerage.link_via_mobile': 'Link via mobile'
+  'modals.brokerage.pay_via_mobile': 'Pay via mobile'
   'modals.brokerage.updating_your_wallet': 'Updating Your Wallet...'
   '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.'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/model.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/model.ts
@@ -6,6 +6,6 @@ export const DEFAULT_METHODS = {
 }
 
 export const POLLING = {
-  SECONDS: 10,
-  RETRY_AMOUNT: 30
+  RETRY_AMOUNT: 30,
+  SECONDS: 10
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagaRegister.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagaRegister.ts
@@ -1,17 +1,17 @@
 import { takeLatest } from 'redux-saga/effects'
 
+import sagas from './sagas'
 import {
   createFiatDeposit,
-  handleDepositFiatClick,
   deleteSavedBank,
-  handleWithdrawClick,
-  fetchBankTransferUpdate,
-  fetchBankTransferAccounts,
   fetchBankLinkCredentials,
+  fetchBankTransferAccounts,
+  fetchBankTransferUpdate,
   fetchRBMethods,
+  handleDepositFiatClick,
+  handleWithdrawClick,
   showModal
 } from './slice'
-import sagas from './sagas'
 
 export default ({ api, coreSagas, networks }) => {
   const brokerageSagas = sagas({ api, coreSagas, networks })

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
@@ -21,9 +21,9 @@ import {
 } from 'data/types'
 
 import profileSagas from '../../modules/profile/sagas'
-import {actions as A} from './slice'
 import { DEFAULT_METHODS, POLLING } from './model'
 import * as S from './selectors'
+import { actions as A } from './slice'
 import { OBType } from './types'
 
 export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; networks: any }) => {
@@ -147,6 +147,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
             yield put(
               actions.components.simpleBuy.handleSBMethodChange({
                 ...bankData,
+                isFlow: false,
                 limits: bankTransferMethod.limits,
                 type: SBPaymentTypes.BANK_TRANSFER
               })
@@ -204,22 +205,17 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
   }: ReturnType<typeof A.handleDepositFiatClick>) {
     yield put(
       actions.components.brokerage.showModal({
-        origin: BrokerageModalOriginType.DEPOSIT_BUTTON,
-        modalType: 'BANK_DEPOSIT_MODAL'
-      }
-      )
+        modalType: 'BANK_DEPOSIT_MODAL',
+        origin: BrokerageModalOriginType.DEPOSIT_BUTTON
+      })
     )
     yield put(
       actions.components.brokerage.setDWStep({
         dwStep: BankDWStepType.LOADING
       })
     )
 
-    const paymentMethods: SBPaymentMethodType[] = yield call(
-      api.getSBPaymentMethods,
-      payload,
-      true
-    )
+    const paymentMethods: SBPaymentMethodType[] = yield call(api.getSBPaymentMethods, payload, true)
 
     const eligibleMethods = paymentMethods.filter(
       (method) =>

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/selectors.ts
@@ -1,27 +1,23 @@
 import { RootState } from 'data/rootReducer'
 
-export const getBankCredentials = (state: RootState) =>
-  state.components.brokerage.bankCredentials
+export const getBankCredentials = (state: RootState) => state.components.brokerage.bankCredentials
 
 export const getBankTransferAccounts = (state: RootState) =>
   state.components.brokerage.bankTransferAccounts
 
-export const getFastLink = (state: RootState) =>
-  state.components.brokerage.fastLink
+export const getFastLink = (state: RootState) => state.components.brokerage.fastLink
 
-export const getAddBankStep = (state: RootState) =>
-  state.components.brokerage.addBankStep
+export const getAddBankStep = (state: RootState) => state.components.brokerage.addBankStep
 
 export const getDWStep = (state: RootState) => state.components.brokerage.dwStep
 
-export const getAccount = (state: RootState) =>
-  state.components.brokerage.account
+export const getAccount = (state: RootState) => state.components.brokerage.account
 
 export const getRedirectBackToStep = (state: RootState) =>
   state.components.brokerage.redirectBackToStep
 
-export const getAddBankStatus = (state: RootState) =>
-  state.components.brokerage.bankStatus
+export const getAddBankStatus = (state: RootState) => state.components.brokerage.bankStatus
 
-export const getFiatCurrency = (state: RootState) =>
-  state.components.brokerage.fiatCurrency
+export const getFiatCurrency = (state: RootState) => state.components.brokerage.fiatCurrency
+
+export const getIsFlow = (state: RootState) => state.components.brokerage.isFlow
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/slice.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/slice.ts
@@ -22,13 +22,15 @@ import {
 const INITIAL_STATE: BrokerageState = {
   account: undefined,
   addBankStep: AddBankStepType.ADD_BANK,
-  addNew: false, // TODO: Put this stuff in redux-form
+  addNew: false,
+  // TODO: Put this stuff in redux-form
   bankCredentials: Remote.NotAsked,
   bankStatus: Remote.NotAsked,
   bankTransferAccounts: Remote.NotAsked,
   dwStep: BankDWStepType.DEPOSIT_METHODS,
   fastLink: Remote.NotAsked,
   fiatCurrency: undefined,
+  isFlow: false,
   redirectBackToStep: false
 }
 
@@ -89,8 +91,14 @@ const brokerageSlice = createSlice({
     },
     showModal: (
       state,
-      action: PayloadAction<{ modalType: ModalNamesType; origin: BrokerageModalOriginType }>
-    ) => {}
+      action: PayloadAction<{
+        isFlow?: boolean
+        modalType: ModalNamesType
+        origin: BrokerageModalOriginType
+      }>
+    ) => {
+      state.isFlow = action.payload.isFlow || false
+    }
   }
 })
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/types.ts
@@ -195,5 +195,6 @@ export type BrokerageState = {
   dwStep: BankDWStepType
   fastLink: RemoteDataType<string, FastLinkType>
   fiatCurrency: WalletFiatType | undefined
+  isFlow: boolean
   redirectBackToStep: boolean
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts
@@ -165,7 +165,8 @@ export const destroyCheckout = () => ({
   type: AT.DESTROY_CHECKOUT
 })
 
-export const handleSBMethodChange = (method: SBPaymentMethodType) => ({
+export const handleSBMethodChange = (method: SBPaymentMethodType, isFlow?: boolean) => ({
+  isFlow,
   method,
   type: AT.HANDLE_SB_METHOD_CHANGE
 })

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
@@ -929,7 +929,7 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
       selectors.form.getFormValues('simpleBuyCheckout')
     )
 
-    const { method } = action
+    const { isFlow, method } = action
     const cryptoCurrency = S.getCryptoCurrency(yield select()) || 'BTC'
     const originalFiatCurrency = S.getFiatCurrency(yield select())
     const fiatCurrency = method.currency || S.getFiatCurrency(yield select())
@@ -979,8 +979,9 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas: any; ne
       case SBPaymentTypes.LINK_BANK:
         yield put(
           actions.components.brokerage.showModal({
-            origin: BrokerageModalOriginType.ADD_BANK_BUY,
-            modalType: fiatCurrency === 'USD' ? 'ADD_BANK_YODLEE_MODAL' : 'ADD_BANK_YAPILY_MODAL'
+            isFlow,
+            modalType: fiatCurrency === 'USD' ? 'ADD_BANK_YODLEE_MODAL' : 'ADD_BANK_YAPILY_MODAL',
+            origin: BrokerageModalOriginType.ADD_BANK_BUY
           })
         )
         return yield put(

diff --git a/.../blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/AddBankYapily/Connect/index.tsx b/.../blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/AddBankYapily/Connect/index.tsx
@@ -9,15 +9,13 @@ import { actions, selectors } from 'data'
 import { RootState } from 'data/rootReducer'
 
 import { Loading, LoadingTextEnum } from '../../../../components'
-import { getData } from './selectors'
+import getData from './selectors'
 import Success from './template.success'
 
 const Connect = (props: Props) => {
   const fetchBank = () => {
     if (props.walletCurrency && !Remote.Success.is(props.data)) {
-      props.brokerageActions.fetchBankLinkCredentials(
-        props.walletCurrency as WalletFiatType
-      )
+      props.brokerageActions.fetchBankLinkCredentials(props.walletCurrency as WalletFiatType)
     }
     props.brokerageActions.fetchBankTransferUpdate(props.yapilyBankId)
   }
@@ -29,17 +27,17 @@ const Connect = (props: Props) => {
   }, [props.walletCurrency])
 
   return props.data.cata({
-    Success: val => <Success {...props} {...val} />,
     Failure: () => <DataError onClick={fetchBank} />,
     Loading: () => <Loading text={LoadingTextEnum.LOADING} />,
-    NotAsked: () => <Loading text={LoadingTextEnum.LOADING} />
+    NotAsked: () => <Loading text={LoadingTextEnum.LOADING} />,
+    Success: (val) => <Success {...props} {...val} />
   })
 }
 
 const mapStateToProps = (state: RootState) => ({
+  account: selectors.components.brokerage.getAccount(state),
   data: getData(state),
-  walletCurrency: selectors.core.settings.getCurrency(state).getOrElse('USD'),
-  account: selectors.components.brokerage.getAccount(state)
+  walletCurrency: selectors.core.settings.getCurrency(state).getOrElse('USD')
 })
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   analyticsActions: bindActionCreators(actions.analytics, dispatch),

diff --git a/...ockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/AddBankYapily/Connect/selectors.ts b/...ockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/AddBankYapily/Connect/selectors.ts
@@ -4,12 +4,14 @@ import { ExtractSuccess } from 'blockchain-wallet-v4/src/types'
 import { selectors } from 'data'
 import { RootState } from 'data/rootReducer'
 
-export const getData = (state: RootState) => {
-  const bankCredentialsR = selectors.components.brokerage.getBankCredentials(
-    state
-  )
+const getData = (state: RootState) => {
+  const bankCredentialsR = selectors.components.brokerage.getBankCredentials(state)
+  const isFlow = selectors.components.brokerage.getIsFlow(state)
 
   return lift((bankCredentials: ExtractSuccess<typeof bankCredentialsR>) => ({
-    bankCredentials
+    bankCredentials,
+    isFlow
   }))(bankCredentialsR)
 }
+
+export default getData
diff --git a/...-wallet-v4-frontend/src/modals/Brokerage/Banks/AddBankYapily/Connect/template.success.tsx b/...-wallet-v4-frontend/src/modals/Brokerage/Banks/AddBankYapily/Connect/template.success.tsx
@@ -32,10 +32,17 @@ const Success = (props: Props) => {
           logo={logo as string}
           qrCode={props.account?.attributes?.qrcodeUrl as string}
         >
-          <FormattedMessage
-            id='modals.brokerage.link_via_mobile'
-            defaultMessage='Link via mobile'
-          />
+          {props.isFlow ? (
+            <FormattedMessage
+              id='modals.brokerage.pay_via_mobile'
+              defaultMessage='Pay via mobile'
+            />
+          ) : (
+            <FormattedMessage
+              id='modals.brokerage.link_via_mobile'
+              defaultMessage='Link via mobile'
+            />
+          )}
         </ScanWithPhone>
         <Hr />
         <Section>
@@ -45,10 +52,17 @@ const Success = (props: Props) => {
               props.analyticsActions.logEvent(YAPILY_CONT_IN_BROWSER)
             }}
           >
-            <FormattedMessage
-              id='modals.brokerage.link_via_desktop'
-              defaultMessage='Link via desktop'
-            />
+            {props.isFlow ? (
+              <FormattedMessage
+                id='modals.brokerage.pay_via_desktop'
+                defaultMessage='Pay via desktop'
+              />
+            ) : (
+              <FormattedMessage
+                id='modals.brokerage.link_via_desktop'
+                defaultMessage='Link via desktop'
+              />
+            )}
           </LinkViaDesktop>
           <BankWaitIndicator qrCode={props.account?.attributes?.qrcodeUrl as string} />
         </Section>

diff --git a/...kchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/OpenBankingConnect/index.tsx b/...kchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/OpenBankingConnect/index.tsx
@@ -15,29 +15,27 @@ import Success from './template.success'
 const Connect = (props: Props) => {
   const fetchBank = () => {
     if (props.walletCurrency && !Remote.Success.is(props.data)) {
-      props.brokerageActions.fetchBankLinkCredentials(
-        props.walletCurrency as WalletFiatType
-      )
+      props.brokerageActions.fetchBankLinkCredentials(props.walletCurrency as WalletFiatType)
     }
   }
 
   useEffect(fetchBank, [props.walletCurrency])
 
   return props.data.cata({
-    Success: val => <Success {...props} {...val} />,
     Failure: () => <DataError onClick={fetchBank} />,
     Loading: () => <Loading text={LoadingTextEnum.LOADING} />,
-    NotAsked: () => <Loading text={LoadingTextEnum.LOADING} />
+    NotAsked: () => <Loading text={LoadingTextEnum.LOADING} />,
+    Success: (val) => <Success {...props} {...val} />
   })
 }
 
 const mapStateToProps = (state: RootState) => ({
-  data: getData(state),
-  walletCurrency: selectors.core.settings.getCurrency(state).getOrElse('USD'),
   account: selectors.components.brokerage.getAccount(state),
+  data: getData(state),
   formValues: selectors.form.getFormValues('brokerageTx')(state) as {
     order: SBTransactionType
-  }
+  },
+  walletCurrency: selectors.core.settings.getCurrency(state).getOrElse('USD')
 })
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   analyticsActions: bindActionCreators(actions.analytics, dispatch),