Feat/airdrop push

packages/blockchain-wallet-v4-frontend/src/components/TransactionListItem/__snapshots__/index.spec.js.snap

@@ -59,6 +59,7 @@ exports[`ListItemContainer renders correctly 1`] = `
         "hideKycGetStarted": [Function],
         "hideSwapBanner": [Function],
         "hideSwapUpgradeModal": [Function],
+        "hideUpgradeForAirdropModal": [Function],
         "setCulture": [Function],
         "setLanguage": [Function],
         "setTheme": [Function],

packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.js

@@ -79,6 +79,7 @@ export default ({ api, coreSagas }) => {
   const saveGoals = function*(firstLogin) {
     yield put(actions.goals.saveGoal('welcome', { firstLogin }))
     yield put(actions.goals.saveGoal('airdropReminder'))
+    yield put(actions.goals.saveGoal('upgradeForAirdrop'))
     yield put(actions.goals.saveGoal('swapUpgrade'))
     yield put(actions.goals.saveGoal('swapGetStarted'))
     yield put(actions.goals.saveGoal('kycDocResubmit'))

packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/actionTypes.js

@@ -3,3 +3,6 @@ export const SWAP_GET_STARTED_SUBMIT_CLICK =
 
 export const AIRDROP_REMINDER_SUBMIT_CLICK =
   '@EVENT.AIRDROP_REMINDER_SUBMIT_CLICK'
+
+export const UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED =
+  '@EVENT.UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED'

packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/actions.js

@@ -8,3 +8,8 @@ export const airdropReminderSubmitClicked = campaign => ({
   type: AT.AIRDROP_REMINDER_SUBMIT_CLICK,
   payload: { campaign }
 })
+
+export const upgradeForAirdropSubmitClicked = campaign => ({
+  type: AT.UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED,
+  payload: { campaign }
+})

packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/sagaRegister.js

@@ -14,5 +14,9 @@ export default () => {
       AT.AIRDROP_REMINDER_SUBMIT_CLICK,
       onboardingSagas.airdropReminderSubmitClicked
     )
+    yield takeLatest(
+      AT.UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED,
+      onboardingSagas.upgradeForAirdropSubmitClicked
+    )
   }
 }

packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/sagas.js

@@ -41,8 +41,29 @@ export default () => {
     }
   }
 
+  const upgradeForAirdropSubmitClicked = function*({ payload }) {
+    const { campaign } = payload
+    try {
+      yield put(actions.preferences.hideUpgradeForAirdropModal())
+      yield put(actions.modals.closeModal())
+      yield put(actions.modules.profile.setCampaign({ name: campaign }))
+      yield put(
+        actions.components.identityVerification.createRegisterUserCampaign()
+      )
+    } catch (e) {
+      yield put(
+        actions.logs.logErrorMessage(
+          logLocation,
+          'upgradeForAirdropSubmitClicked',
+          e
+        )
+      )
+    }
+  }
+
   return {
     airdropReminderSubmitClicked,
-    swapGetStartedSubmitClicked
+    swapGetStartedSubmitClicked,
+    upgradeForAirdropSubmitClicked
   }
 }

packages/blockchain-wallet-v4-frontend/src/data/goals/sagas.js

@@ -102,6 +102,10 @@ export default ({ api }) => {
     yield take(actionTypes.modules.profile.FETCH_USER_DATA_SUCCESS)
   }
 
+  const waitForUserTiers = function*() {
+    yield take(actionTypes.modules.profile.FETCH_TIERS_SUCCESS)
+  }
+
   const runSendBtcGoal = function*(goal) {
     const { id, data } = goal
     yield put(actions.goals.deleteGoal(id))
@@ -167,10 +171,10 @@ export default ({ api }) => {
       selectors.preferences.getShowAirdropReminderModal
     )
     if (!showAirdropReminderModal) return
-    yield call(waitForUserData)
+    yield call(waitForUserTiers)
     const tiersR = yield select(selectors.modules.profile.getTiers)
     const tiers = tiersR.getOrElse([])
-    if (propEq('state', TIERS_STATES.NONE, tiers[2])) {
+    if (propEq('state', TIERS_STATES.NONE, tiers[1])) {
       return yield put(
         actions.goals.addInitialModal('airdropReminder', 'AirdropReminder', {
           campaign: 'sunriver'
@@ -179,6 +183,33 @@ export default ({ api }) => {
     }
   }
 
+  const runUpgradeForAirdropGoal = function*(goal) {
+    const { id } = goal
+    yield put(actions.goals.deleteGoal(id))
+
+    const showUpgradeForAirdropModal = yield select(
+      selectors.preferences.getShowUpgradeForAirdropModal
+    )
+    if (!showUpgradeForAirdropModal) return
+    yield call(waitForUserTiers)
+    const tiersR = yield select(selectors.modules.profile.getTiers)
+    const tiers = tiersR.getOrElse([])
+    if (
+      propEq('state', TIERS_STATES.NONE, tiers[1]) &&
+      propEq('state', TIERS_STATES.VERIFIED, tiers[0])
+    ) {
+      return yield put(
+        actions.goals.addInitialModal(
+          'upgradeForAirdrop',
+          'UpgradeForAirdrop',
+          {
+            campaign: 'sunriver'
+          }
+        )
+      )
+    }
+  }
+
   const runSwapUpgradeGoal = function*(goal) {
     const { id } = goal
     yield put(actions.goals.deleteGoal(id))
@@ -294,13 +325,14 @@ export default ({ api }) => {
   const showInitialModal = function*() {
     const initialModals = yield select(selectors.goals.getInitialModals)
     const {
-      airdropReminder,
-      bsv,
       kycDocResubmit,
-      payment,
       sunriver,
+      payment,
+      upgradeForAirdrop,
+      airdropReminder,
       swapGetStarted,
       swapUpgrade,
+      bsv,
       welcome
     } = initialModals
     if (kycDocResubmit)
@@ -309,6 +341,11 @@ export default ({ api }) => {
       return yield put(actions.modals.showModal(sunriver.name, sunriver.data))
     if (payment)
       return yield put(actions.modals.showModal(payment.name, payment.data))
+    if (upgradeForAirdrop) {
+      return yield put(
+        actions.modals.showModal(upgradeForAirdrop.name, upgradeForAirdrop.data)
+      )
+    }
     if (airdropReminder) {
       return yield put(
         actions.modals.showModal(airdropReminder.name, airdropReminder.data)
@@ -332,27 +369,30 @@ export default ({ api }) => {
   const runGoal = function*(goal) {
     try {
       switch (goal.name) {
+        case 'kycDocResubmit':
+          yield call(runKycDocResubmitGoal, goal)
+          break
         case 'referral':
           yield call(runReferralGoal, goal)
           break
         case 'payment':
           yield call(runSendBtcGoal, goal)
           break
-        case 'kyc':
-          yield call(runKycGoal, goal)
-          break
-        case 'kycDocResubmit':
-          yield call(runKycDocResubmitGoal, goal)
-          break
-        case 'swapUpgrade':
-          yield call(runSwapUpgradeGoal, goal)
+        case 'upgradeForAirdrop':
+          yield call(runUpgradeForAirdropGoal, goal)
           break
         case 'airdropReminder':
           yield call(runAirdropReminderGoal, goal)
           break
+        case 'kyc':
+          yield call(runKycGoal, goal)
+          break
         case 'swapGetStarted':
           yield call(runSwapGetStartedGoal, goal)
           break
+        case 'swapUpgrade':
+          yield call(runSwapUpgradeGoal, goal)
+          break
         case 'bsv':
           yield call(runBsvGoal, goal)
           break
@@ -388,6 +428,7 @@ export default ({ api }) => {
     runWelcomeGoal,
     runReferralGoal,
     runSendBtcGoal,
+    runUpgradeForAirdropGoal,
     showInitialModal,
     waitForUserData
   }

packages/blockchain-wallet-v4-frontend/src/data/preferences/actionTypes.js

@@ -12,3 +12,5 @@ export const HIDE_SWAP_UPGRADE_MODAL =
   '@DATA.PREFERENCES.HIDE_SWAP_UPGRADE_MODAL'
 export const HIDE_AIRDROP_REMINDER_MODAL =
   '@DATA.PREFERENCES.HIDE_AIRDROP_REMINDER_MODAL'
+export const HIDE_UPGRADE_FOR_AIRDROP_MODAL =
+  '@DATA.PREFERENCES.HIDE_UPGRADE_FOR_AIRDROP_MODAL'

packages/blockchain-wallet-v4-frontend/src/data/preferences/actions.js

@@ -22,3 +22,6 @@ export const hideSwapUpgradeModal = () => ({ type: AT.HIDE_SWAP_UPGRADE_MODAL })
 export const hideAirdropReminderModal = () => ({
   type: AT.HIDE_AIRDROP_REMINDER_MODAL
 })
+export const hideUpgradeForAirdropModal = () => ({
+  type: AT.HIDE_UPGRADE_FOR_AIRDROP_MODAL
+})

packages/blockchain-wallet-v4-frontend/src/data/preferences/reducers.js

@@ -13,6 +13,7 @@ const INITIAL_STATE = {
   showKycGetStarted: true,
   showSwapBanner: true,
   showSwapUpgradeModal: true,
+  showUpgradeForAirdropModal: true,
   totalBalancesDropdown: {
     wallet: true,
     lockbox: false,
@@ -57,6 +58,9 @@ const preferences = (state = INITIAL_STATE, action) => {
     case AT.HIDE_AIRDROP_REMINDER_MODAL: {
       return assoc('showAirdropReminderModal', false, state)
     }
+    case AT.HIDE_UPGRADE_FOR_AIRDROP_MODAL: {
+      return assoc('showUpgradeForAirdropModal', false, state)
+    }
     case AT.HIDE_KYC_GET_STARTED: {
       return assoc('showKycGetStarted', false, state)
     }

packages/blockchain-wallet-v4-frontend/src/data/preferences/selectors.js

@@ -17,3 +17,7 @@ export const getShowAirdropReminderModal = path([
   'preferences',
   'showAirdropReminderModal'
 ])
+export const getShowUpgradeForAirdropModal = path([
+  'preferences',
+  'showUpgradeForAirdropModal'
+])

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/AirdropReminder/index.js

@@ -78,7 +78,7 @@ class AirdropReminder extends React.PureComponent {
         <Body>
           <Text size='24px' weight={300}>
             <FormattedMessage
-              id='modals.airdropreminder.AirdropReminder'
+              id='modals.airdropreminder.getfreecrypto'
               defaultMessage='Get Free Crypto'
             />
           </Text>

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/UpgradeForAirdrop/index.js

@@ -0,0 +1,136 @@
+import React from 'react'
+import styled from 'styled-components'
+import { prop } from 'ramda'
+import { compose, bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
+
+import { actions, model } from 'data'
+import modalEnhancer from 'providers/ModalEnhancer'
+import {
+  Button,
+  Image,
+  Modal,
+  ModalHeader,
+  Text
+} from 'blockchain-info-components'
+
+const { CAMPAIGNS } = model.components.identityVerification
+
+const UpgradeForAirdropModalHeader = styled(ModalHeader)`
+  position: absolute;
+  border: 0;
+  > span {
+    color: ${props => props.theme['gray-1']};
+  }
+`
+const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  text-align: center;
+`
+const Copy = styled(Text)`
+  margin-top: 16px;
+`
+const Footer = styled.div`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  padding: 0 24px 32px 24px;
+  box-sizing: border-box;
+`
+const FooterButton = styled(Button)`
+  height: auto;
+  font-weight: 300;
+  padding: 15px 0;
+`
+const LaterButton = styled(FooterButton)`
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  top: calc(100% + 9px);
+  width: calc(100% - 48px);
+  &:hover {
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+  }
+`
+
+class UpgradeForAirdrop extends React.PureComponent {
+  render () {
+    const { campaign, position, total, close, actions } = this.props
+    return (
+      <Modal size='small' position={position} total={total}>
+        <UpgradeForAirdropModalHeader onClose={close} />
+        <Image
+          width='100%'
+          name='get-free-crypto'
+          srcset={{
+            'get-free-crypto2': '2x',
+            'get-free-crypto3': '3x'
+          }}
+        />
+        <Body>
+          <Text size='24px' weight={300}>
+            <FormattedMessage
+              id='modals.upgradeforairdrop.getfreecrypto'
+              defaultMessage='Get Free Crypto'
+            />
+          </Text>
+          <Copy weight={300}>
+            <FormattedMessage
+              id='modals.upgradeforairdrop.completeprofile'
+              defaultMessage='Upgrade your profile from Silver to Gold, raise your trading limits and get free {coinName} ({coinCode}).'
+              values={{
+                coinName: prop('coinName', CAMPAIGNS[campaign]),
+                coinCode: prop('coinCode', CAMPAIGNS[campaign])
+              }}
+            />
+          </Copy>
+        </Body>
+        <Footer>
+          <FooterButton
+            nature='primary'
+            size='18px'
+            fullwidth
+            onClick={() => actions.upgradeForAirdropSubmitClicked(campaign)}
+          >
+            <FormattedMessage
+              defaultMessage='Upgrade Now'
+              id='modals.upgradeforairdrop.upgradenow'
+            />
+          </FooterButton>
+          <LaterButton nature='primary' size='18px' fullwidth onClick={close}>
+            <FormattedMessage
+              defaultMessage='Remind Me Later'
+              id='modals.upgradeforairdrop.later'
+            />
+          </LaterButton>
+        </Footer>
+      </Modal>
+    )
+  }
+}
+
+UpgradeForAirdrop.defaultProps = {
+  campaign: 'sunriver'
+}
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(actions.components.onboarding, dispatch)
+})
+
+const enhance = compose(
+  connect(
+    undefined,
+    mapDispatchToProps
+  ),
+  modalEnhancer('UpgradeForAirdrop')
+)
+
+export default enhance(UpgradeForAirdrop)