fix(sb-transfer-copy): changed sb transfer flyout copy for gbp and eur

blockchain · May 4, 2020 · 1f70290 · 1f70290
1 parent 4786784
commit 1f70290
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 4 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
@@ -1082,9 +1082,15 @@ type MessagesType = {
   'modals.simplebuy.transferdetails.amount': 'Amount to Send'
   'modals.simplebuy.transferdetails.bankcountry': 'Bank Country'
   'modals.simplebuy.transferdetails.bankname': 'Bank Name'
+  'modals.simplebuy.transferdetails.banktransferinfo': 'Bank Transfer Information'
   'modals.simplebuy.transferdetails.depositagreement': 'By depositing funds to this account, you agree to {ToS}, our banking partner.'
   'modals.simplebuy.transferdetails.estonia': 'Estonia'
-  'modals.simplebuy.transferdetails.info': 'Securely transfer {fiatCurrency} from your bank account to Blockchain.com. Depending on the transfer method and availability of funds, this may take up to 1 business day.'
+  'modals.simplebuy.transferdetails.info.eur': 'You’ll need to log in to your bank account online to transfer funds.'
+  'modals.simplebuy.transferdetails.info.gbp': 'You’ll need to open your bank application in a different tab to transfer the funds.'
+  'modals.simplebuy.transferdetails.info_1': 'Securely transfer {fiatCurrency} from your bank account to Blockchain.com. Depending on the transfer method and availability of funds, this may take up to one business day.'
+  'modals.simplebuy.transferdetails.questionsbanktransfers': 'Questions on how to make bank transfers?'
+  'modals.simplebuy.transferdetails.questionsbanktransfersdesc': 'We’ve got you covered with a step by step article.'
+  'modals.simplebuy.transferdetails.readnow': 'Read it now.'
   'modals.simplebuy.transferdetails.recipient': 'Recipient'
   'modals.simplebuy.transferdetails.routingnumber': 'Routing Number'
   'modals.simplebuy.transferdetails.sendfundsfrom': 'Only send funds from a bank account in your name. If not, your deposit could be delayed or rejected.'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js b/packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js
@@ -111,3 +111,7 @@ export const PRICE_CHART_EVENTS = {
   CLICK_BUY_BITCOIN: ['price_chart', 'footer_button', 'buy_bitcoin'],
   CLICK_SWAP_COIN: ['price_chart', 'footer_button', 'swap_coin']
 }
+
+export const SB_EVENTS = {
+  CLICK_SUPPORT_ARTICLE: ['simple_buy', 'transfer_flyout', 'read_it_now']
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/index.tsx
@@ -38,6 +38,7 @@ const mapStateToProps = (state: RootState): LinkStatePropsType => ({
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
+  analyticsActions: bindActionCreators(actions.analytics, dispatch),
   simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch)
 })
 

diff --git a/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx b/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx
@@ -4,6 +4,7 @@ import { fiatToString } from 'blockchain-wallet-v4/src/exchange/currency'
 import { FiatType } from 'core/types'
 import { FlyoutWrapper, Row, Title, Value } from 'components/Flyout'
 import { FormattedMessage } from 'react-intl'
+import { model } from 'data'
 import { Props as OwnProps, SuccessStateType } from '.'
 import React from 'react'
 import styled from 'styled-components'
@@ -37,6 +38,21 @@ const LegalWrapper = styled(TextGroup)`
   margin-top: 20px;
 `
 
+const RowTitle = styled(Row)`
+  border-top: 0;
+  padding-top: 0;
+`
+
+const BottomInfoContainer = styled.div`
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.grey000};
+  border-radius: 8px;
+  margin-top: 60px;
+`
+
 const Success: React.FC<Props> = props => {
   return (
     <Wrapper>
@@ -63,17 +79,49 @@ const Success: React.FC<Props> = props => {
             />
           </TopText>
           <InfoContainer>
-            <Text color='grey600' weight={500} size='14px'>
+            <Text
+              color='grey600'
+              weight={500}
+              size='14px'
+              style={{ marginBottom: '24px' }}
+            >
               <FormattedMessage
-                id='modals.simplebuy.transferdetails.info'
-                defaultMessage='Securely transfer {fiatCurrency} from your bank account to Blockchain.com. Depending on the transfer method and availability of funds, this may take up to 1 business day.'
+                id='modals.simplebuy.transferdetails.info_1'
+                defaultMessage='Securely transfer {fiatCurrency} from your bank account to Blockchain.com. Depending on the transfer method and availability of funds, this may take up to one business day.'
                 values={{
                   fiatCurrency: props.order.inputCurrency
                 }}
               />
             </Text>
+            {props.account.currency === 'GBP' && (
+              <Text color='grey600' weight={500} size='14px'>
+                <FormattedMessage
+                  id='modals.simplebuy.transferdetails.info.gbp'
+                  defaultMessage='You’ll need to open your bank application in a different tab to transfer the funds.'
+                />
+              </Text>
+            )}
+            {props.account.currency === 'EUR' && (
+              <Text color='grey600' weight={500} size='14px'>
+                <FormattedMessage
+                  id='modals.simplebuy.transferdetails.info.eur'
+                  defaultMessage='You’ll need to log in to your bank account online to transfer funds.'
+                />
+              </Text>
+            )}
           </InfoContainer>
         </FlyoutWrapper>
+        {(props.account.currency === 'GBP' ||
+          props.account.currency === 'EUR') && (
+          <RowTitle>
+            <Text color='grey800' weight={700} size='14px'>
+              <FormattedMessage
+                id='modals.simplebuy.transferdetails.banktransferinfo'
+                defaultMessage='Bank Transfer Information'
+              />
+            </Text>
+          </RowTitle>
+        )}
         {(props.account.currency === 'USD' ||
           props.account.currency === 'EUR') && (
           <Row>
@@ -236,6 +284,41 @@ const Success: React.FC<Props> = props => {
             defaultMessage='OK'
           />
         </OkButton>
+        {(props.account.currency === 'GBP' ||
+          props.account.currency === 'EUR') && (
+          <BottomInfoContainer>
+            <Text size='14px' weight={600} style={{ marginBottom: '8px' }}>
+              <FormattedMessage
+                id='modals.simplebuy.transferdetails.questionsbanktransfers'
+                defaultMessage='Questions on how to make bank transfers?'
+              />
+            </Text>
+            <Text size='14px' weight={500}>
+              <FormattedMessage
+                id='modals.simplebuy.transferdetails.questionsbanktransfersdesc'
+                defaultMessage='We’ve got you covered with a step by step article.'
+              />
+            </Text>
+            <Link
+              href='https://support.blockchain.com/hc/en-us/articles/360042141932'
+              rel='noopener noreferrer'
+              data-e2e='openExchange'
+              target='_blank'
+              onClick={() =>
+                props.analyticsActions.logEvent(
+                  model.analytics.SB_EVENTS.CLICK_SUPPORT_ARTICLE
+                )
+              }
+            >
+              <Text color='blue600' size='14px' weight={500}>
+                <FormattedMessage
+                  id='modals.simplebuy.transferdetails.readnow'
+                  defaultMessage='Read it now.'
+                />
+              </Text>
+            </Link>
+          </BottomInfoContainer>
+        )}
       </Bottom>
     </Wrapper>
   )