Merge pull request #1605 from blockchain/fix/power-pax-tier1

fix(PAX): show first time owner if user is not tier 2 and not power pax
blockchain · May 8, 2019 · b3844fe · b3844fe
2 parents b34c857 + 78da4be
commit b3844fe
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 49 deletions.
diff --git a/packages/blockchain-info-components/src/Toasts/Toast.js b/packages/blockchain-info-components/src/Toasts/Toast.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { propOr } from 'ramda'
 import styled from 'styled-components'
 import { darken } from 'polished'
 import { Icon } from '../Icons'
 
 const Wrapper = styled.div`
-  height: 65px;
   width: 100%;
   background-color: ${props => props.theme['white']};
   @media (min-width: 768px) {
@@ -20,8 +20,8 @@ const Container = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 100%;
-  padding: 15px 10px 15px 25px;
+  min-height: 65px;
+  padding: 15px 10px;
   box-sizing: border-box;
   background: ${props => props.theme['white']};
   border-left: 6px solid ${props => props.theme[props.color]};
@@ -30,21 +30,25 @@ const Container = styled.div`
 `
 const Content = styled.div`
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
   flex: 100%;
   margin-right: 10px;
   box-sizing: border-box;
 `
+const CustomIcon = styled(Icon)`
+  font-size: 24px;
+  margin-right: 10px;
+`
 const CloseIcon = styled(Icon)`
   margin-right: 8px;
   &:hover {
     color: ${props => darken(0.5, props.theme['gray-4'])}!important;
   }
 `
 
-const selectColor = type => {
+const selectColor = (type, coin) => {
   switch (type) {
     case 'success':
       return 'success'
@@ -53,18 +57,23 @@ const selectColor = type => {
     case 'warn':
       return 'orange'
     default:
-      return 'brand-secondary'
+      return propOr('brand-secondary', 'colorCode', coin)
   }
 }
 
 const Toast = props => {
-  const { children, nature, onClose } = props
-  const color = selectColor(nature)
+  const { children, nature, coin, onClose } = props
+  const color = selectColor(nature, coin)
 
   return (
     <Wrapper>
       <Container color={color} data-e2e='toastMessage'>
-        <Content>{children}</Content>
+        <Content>
+          {coin && (
+            <CustomIcon name={coin.icons.circleFilled} color={coin.colorCode} />
+          )}
+          {children}
+        </Content>
         <CloseIcon
           data-e2e='toastMessageClose'
           name='close'

diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/defaultMessages.json b/packages/blockchain-wallet-v4-frontend/src/assets/locales/defaultMessages.json
@@ -57,10 +57,6 @@
         "defaultMessage": "Failed to create Coinify account.",
         "id": "components.alerts.coinify_signup_error"
       },
-      {
-        "defaultMessage": "Creating wallet...",
-        "id": "components.alerts.create_wallet_info"
-      },
       {
         "defaultMessage": "Failed to update currency",
         "id": "components.alerts.currency_update_error"

diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json
@@ -140,7 +140,6 @@
   "components.alerts.btc_address_incorrect": "Invalid Bitcoin Address.",
   "components.alerts.captcha_code_incorrect": "The captcha you provided was incorrect, please try again",
   "components.alerts.coinify_signup_error": "Failed to create Coinify account.",
-  "components.alerts.create_wallet_info": "Creating wallet...",
   "components.alerts.currency_update_error": "Failed to update currency",
   "components.alerts.currency_update_success": "Currency has been successfully updated",
   "components.alerts.deauthorize_browser_error": "Failed to deauthorize this browser.",

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.js b/packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.js
@@ -149,13 +149,6 @@ export const getAlertContent = (message, data = undefined) => {
           defaultMessage='Failed to create Coinify account.'
         />
       )
-    case C.CREATE_WALLET_INFO:
-      return buildMessageTemplate(
-        <FormattedMessage
-          id='components.alerts.create_wallet_info'
-          defaultMessage='Creating wallet...'
-        />
-      )
     case C.CURRENCY_UPDATE_ERROR:
       return buildMessageTemplate(
         <FormattedMessage
@@ -261,6 +254,38 @@ export const getAlertContent = (message, data = undefined) => {
           defaultMessage='Failed to retrieve used addresses.'
         />
       )
+    case C.FIRST_PAX_TRADE_INFO:
+      return buildMessageTemplate(
+        <React.Fragment>
+          <Text>
+            <FormattedMessage
+              id='components.alerts.first_pax_trade_info_dyk'
+              defaultMessage='Did you know?'
+            />
+          </Text>
+          <TextGroup inline>
+            <Text size='12px' weight={400}>
+              <FormattedMessage
+                id='components.alerts.first_pax_trade_info'
+                defaultMessage='Now that you own USD Pax, you need to own ETH to Send or Swap.'
+              />
+            </Text>
+            <Link
+              href={
+                'https://support.blockchain.com/hc/en-us/articles/360027492092-Why-do-I-need-ETH-to-send-my-PAX-'
+              }
+              target='_blank'
+              weight={500}
+              size='12px'
+            >
+              <FormattedMessage
+                id='components.alerts.first_pax_trade_info_learn_more'
+                defaultMessage='Learn More'
+              />
+            </Link>
+          </TextGroup>
+        </React.Fragment>
+      )
     case C.FETCH_UNUSED_ADDRESSES_ERROR:
       return buildMessageTemplate(
         <FormattedMessage

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Alerts/template.js b/packages/blockchain-wallet-v4-frontend/src/components/Alerts/template.js
@@ -33,9 +33,14 @@ const Alerts = props => {
   return (
     <Wrapper>
       {alerts.map((alert, index) => {
-        const { id, nature, message, data } = alert
+        const { id, nature, message, data, coin } = alert
         return (
-          <Toast key={index} nature={nature} onClose={() => handleClose(id)}>
+          <Toast
+            key={index}
+            nature={nature}
+            coin={coin}
+            onClose={() => handleClose(id)}
+          >
             {getAlertContent(message, data)}
           </Toast>
         )

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/alerts/actions.js b/packages/blockchain-wallet-v4-frontend/src/data/alerts/actions.js
@@ -5,9 +5,9 @@ const generateId = () =>
     .toString(36)
     .substr(2, 10)
 
-const display = (nature, message, data, persist) => ({
+const display = (nature, message, data, persist, coin) => ({
   type: ALERTS_SHOW,
-  payload: { id: generateId(), nature, message, data, persist }
+  payload: { id: generateId(), nature, message, data, persist, coin }
 })
 export const displayWarning = (message, data, persist) =>
   display('warn', message, data, persist)
@@ -21,6 +21,9 @@ export const displaySuccess = (message, data, persist) =>
 export const displayError = (message, data, persist) =>
   display('error', message, data, persist)
 
+export const displayCoin = (message, coin, persist) =>
+  display(null, message, null, persist, coin)
+
 export const clearAlerts = () => ({ type: ALERTS_CLEAR })
 
 export const dismissAlert = id => ({ type: ALERTS_DISMISS, payload: { id } })
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/alerts/reducers.js b/packages/blockchain-wallet-v4-frontend/src/data/alerts/reducers.js
@@ -15,8 +15,8 @@ export default (state = INITIAL_STATE, action) => {
       return filter(a => a.id !== id, state)
     }
     case ALERTS_SHOW: {
-      const { id, nature, message, data } = action.payload
-      return prepend({ id, nature, message, data }, state)
+      const { id, nature, message, data, coin } = action.payload
+      return prepend({ id, nature, message, data, coin }, state)
     }
     default: {
       return state

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.js
@@ -332,7 +332,6 @@ export default ({ api, coreSagas }) => {
   const register = function * (action) {
     try {
       yield put(actions.auth.registerLoading())
-      yield put(actions.alerts.displayInfo(C.CREATE_WALLET_INFO))
       yield call(coreSagas.wallet.createWalletSaga, action.payload)
       yield put(actions.alerts.displaySuccess(C.REGISTER_SUCCESS))
       yield call(loginRoutineSaga, false, true)

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.spec.js b/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.spec.js
@@ -542,10 +542,6 @@ describe('authSagas', () => {
       saga.next().put(actions.auth.registerLoading())
     })
 
-    it('should display restore wallet information alert', () => {
-      saga.next().put(actions.alerts.displayInfo(C.CREATE_WALLET_INFO))
-    })
-
     it('should pass payload to restoreWallet core saga', () => {
       saga.next().call(coreSagas.wallet.createWalletSaga, payload)
     })

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/exchange/exchange.sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/components/exchange/exchange.sagas.js
@@ -44,6 +44,7 @@ import {
 import utils from './sagas.utils'
 import * as A from './actions'
 import * as AT from './actionTypes'
+import * as C from 'services/AlertService'
 import * as S from './selectors'
 import * as Lockbox from 'services/LockboxService'
 import { promptForSecondPassword, promptForLockbox } from 'services/SagaService'
@@ -800,8 +801,8 @@ export default ({ api, coreSagas, networks }) => {
     const target = prop('target', form)
     const pair = getCurrentPair(form)
     const fees = yield select(S.getMempoolFees)
-    const hasReceivedEthAirdrop = (yield select(
-      selectors.modules.profile.hasReceivedEthAirdrop
+    const isPowerPaxTagged = (yield select(
+      selectors.modules.profile.getPowerPaxTag
     )).getOrElse(true)
     const userTier = (yield select(
       selectors.modules.profile.getUserTiers
@@ -813,25 +814,34 @@ export default ({ api, coreSagas, networks }) => {
       yield put(actions.form.stopSubmit(CONFIRM_FORM))
       yield put(actions.router.push('/swap/history'))
       yield take(actionTypes.modals.CLOSE_ALL_MODALS)
-      // check for eth airdrop eligibility
-      if (
-        !hasReceivedEthAirdrop &&
-        equals('PAX', target.coin) &&
-        equals(2, userTier.current)
-      ) {
-        yield put(
-          actions.modals.showModal(ETH_AIRDROP_MODAL, {
-            tradeData: formatExchangeTrade(trade)
-          })
-        )
-        yield put(actions.modules.profile.fetchUser())
+      // Check for eth airdrop eligibility
+      if (!isPowerPaxTagged && equals('PAX', target.coin)) {
+        if (equals(2, userTier.current)) {
+          yield put(
+            actions.modals.showModal(ETH_AIRDROP_MODAL, {
+              tradeData: formatExchangeTrade(trade)
+            })
+          )
+        } else {
+          const supportedCoins = (yield select(
+            selectors.core.walletOptions.getSupportedCoins
+          )).getOrElse({})
+          const coin = supportedCoins['ETH']
+          yield put(
+            actions.alerts.displayCoin(C.FIRST_PAX_TRADE_INFO, coin, true)
+          )
+          yield put(
+            actions.modals.showModal(RESULTS_MODAL, formatExchangeTrade(trade))
+          )
+        }
       } else {
         yield put(
           actions.modals.showModal(RESULTS_MODAL, formatExchangeTrade(trade))
         )
       }
       yield put(actions.analytics.logEvent(SWAP_EVENTS.ORDER_CONFIRM))
       yield put(actions.components.refresh.refreshClicked())
+      yield put(actions.modules.profile.fetchUser())
     } catch (err) {
       yield put(actions.analytics.logEvent(SWAP_EVENTS.ORDER_CONFIRM_ERROR))
       return yield call(showConfirmationError, err)

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/profile/selectors.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/profile/selectors.js
@@ -29,7 +29,7 @@ export const getSunRiverTag = compose(
   lift(path(['tags', 'SUNRIVER'])),
   getUserData
 )
-export const hasReceivedEthAirdrop = compose(
+export const getPowerPaxTag = compose(
   lift(hasPath(['tags', 'POWER_PAX'])),
   getUserData
 )

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/AlertService/index.js b/packages/blockchain-wallet-v4-frontend/src/services/AlertService/index.js
@@ -28,6 +28,7 @@ export const EXCHANGE_REFRESH_TRADE_ERROR = 'exchange_refresh_trade_error'
 export const EXCHANGE_TRANSACTION_ERROR = 'exchange_transaction_error'
 export const FETCH_UNUSED_ADDRESSES_ERROR = 'fetch_unused_addresses_error'
 export const FETCH_USED_ADDRESSES_ERROR = 'fetch_used_addresses_error'
+export const FIRST_PAX_TRADE_INFO = 'first_pax_trade_info'
 export const GET_GOOGLEAUTH_SECRET_ERROR = 'get_googleauth_secret_error'
 export const GOOGLE_AUTH_VERIFY_ERROR = 'google_auth_verify_error'
 export const GOOGLE_AUTH_VERIFY_SUCCESS = 'google_auth_verify_success'