Merge branch 'feat/sell-p1' of github.com:blockchain/blockchain-walle…

…t-v4-frontend into feat/sell-p1
blockchain · Jul 20, 2020 · cf6780b · cf6780b
2 parents 0788f34 + 55b2f93
commit cf6780b
Show file tree

Hide file tree

Showing 37 changed files with 1,299 additions and 392 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json
@@ -1112,6 +1112,8 @@
   "modals.simplebuy.save_my_card": "Save My Card",
   "modals.simplebuy.selectcurrency": "Select Your Currency",
   "modals.simplebuy.cryptoselect": "Buy with Cash or Card",
+  "modals.simplebuy.paymentmethods": "Payment Methods",
+  "modals.simplebuy.depositcash_description": "Send funds directly from your bank to your Blockchain.com Wallet. Once we receive the manual transfer, use that cash to buy crypto.",
   "modals.simplebuy.selectcrypto": "Select the crypto you want to buy.",
   "modals.simplebuy.setupaccount": "Next, we'll set up your account.",
   "modals.simplebuy.success": "Trade Complete",

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
@@ -1116,6 +1116,7 @@ type MessagesType = {
   'modals.simplebuy.confirm.activity': 'Your final amount may change due to market activity.'
   'modals.simplebuy.confirm.buynow': 'Buy Now'
   'modals.simplebuy.confirm.fee': 'Fees'
+  'modals.simplebuy.confirm.jump_to_payment': 'Select Cash or Card'
   'modals.simplebuy.confirm.payment': 'Payment Method'
   'modals.simplebuy.confirm.rate': 'Exchange Rate'
   'modals.simplebuy.confirm.total': 'Total'
@@ -1138,6 +1139,12 @@ type MessagesType = {
   'modals.simplebuy.save_my_card': 'Save My Card'
   'modals.simplebuy.selectcurrency': 'Select Your Currency'
   'modals.simplebuy.cryptoselect': 'Buy with Cash or Card'
+  'modals.simplebuy.paymentmethods': 'Payment Methods'
+  'modals.simplebuy.depositcash_description': 'Send funds directly from your bank to your Blockchain.com Wallet. Once we receive the manual transfer, use that cash to buy crypto.'
+  'modals.simplebuy.card_limit': '{card} Limit'
+  'modals.simplebuy.card_expire': 'Exp: {month}/{year}'
+  'modals.simplebuy.instantly_buy': 'Instantly buy crypto with any Visa or Mastercard.'
+  'modals.simplebuy.most_popular': 'Most Popular'
   'modals.simplebuy.selectcrypto': 'Select the crypto you want to buy.'
   'modals.simplebuy.setupaccount': "Next, we'll set up your account."
   'modals.simplebuy.success': 'Trade Complete'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardBox/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardBox/index.tsx
@@ -64,7 +64,13 @@ export const validateCreditCard = (value, allValues, props: AddCardProps) => {
     )
   }
 
-  if (!cardMethod?.subTypes.find(subType => subType === cardType.type)) {
+  if (
+    !(
+      cardMethod &&
+      cardMethod.subTypes &&
+      cardMethod.subTypes.find(subType => subType === cardType.type)
+    )
+  ) {
     return (
       <FormattedMessage
         id='formhelper.card_type_unsupported'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/Content.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/Content.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+const Content = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: ${props => props.theme.grey800};
+  margin-left: 16px;
+  min-width: 336px;
+`
+
+export default Content
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayContainer.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayContainer.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+const DisplayContainer = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 16px 40px;
+  flex-direction: row;
+  cursor: pointer;
+  border-bottom: 1px solid ${props => props.theme.grey000};
+  &hover {
+    background-color: ${props => props.theme.grey100};
+  }
+`
+
+export default DisplayContainer
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayIcon.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayIcon.tsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+const DisplayIcon = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: 500;
+  max-width: 32px;
+  color: ${props => props.theme.grey800};
+`
+
+export default DisplayIcon
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayTitle.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayTitle.tsx
@@ -0,0 +1,14 @@
+import { Title } from 'components/Flyout'
+import styled from 'styled-components'
+
+const DisplayTitle = styled(Title)`
+  align-items: left;
+  font-weight: 600;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  color: ${props => props.theme.textBlack};
+  width: 100%;
+`
+
+export default DisplayTitle
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/index.tsx
@@ -0,0 +1,6 @@
+import Content from './Content'
+import DisplayContainer from './DisplayContainer'
+import DisplayIcon from './DisplayIcon'
+import DisplayTitle from './DisplayTitle'
+
+export { DisplayIcon, DisplayContainer, Content, DisplayTitle }
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
@@ -373,14 +373,8 @@ export const initializeBillingAddress = () => ({
   type: AT.INITIALIZE_BILLING_ADDRESS
 })
 
-export const initializeCheckout = (
-  paymentMethods: SBPaymentMethodsType,
-  cards: Array<SBCardType>,
-  orderType: 'BUY' | 'SELL'
-) => ({
+export const initializeCheckout = (orderType: 'BUY' | 'SELL') => ({
   type: AT.INITIALIZE_CHECKOUT,
-  paymentMethods,
-  cards,
   orderType
 })
 
@@ -415,6 +409,7 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => {
         cryptoCurrency: payload.cryptoCurrency,
         defaultMethod: payload.defaultMethod,
         fiatCurrency: payload.fiatCurrency,
+        order: payload.order,
         pair: payload.pair
       }
     case 'ENTER_AMOUNT':
@@ -423,6 +418,7 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => {
         cryptoCurrency: payload.cryptoCurrency,
         defaultMethod: payload.defaultMethod,
         fiatCurrency: payload.fiatCurrency,
+        method: payload.method,
         pair: payload.pair
       }
     case 'CRYPTO_SELECTION':

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
@@ -13,6 +13,7 @@ const INITIAL_STATE: SimpleBuyState = {
   everypay3DS: Remote.NotAsked,
   fiatCurrency: undefined,
   fiatEligible: Remote.NotAsked,
+  method: undefined,
   methods: Remote.NotAsked,
   order: undefined,
   orders: Remote.NotAsked,
@@ -244,6 +245,7 @@ export function simpleBuyReducer (
             fiatCurrency: action.payload.fiatCurrency,
             step: action.payload.step,
             pair: action.payload.pair,
+            method: action.payload.method,
             order: undefined
           }
         case 'CRYPTO_SELECTION':
@@ -261,7 +263,7 @@ export function simpleBuyReducer (
             defaultMethod: action.payload.defaultMethod,
             fiatCurrency: action.payload.fiatCurrency,
             step: action.payload.step,
-            order: undefined
+            order: action.payload.order
           }
         case '3DS_HANDLER':
         case 'CHECKOUT_CONFIRM':

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
@@ -34,8 +34,7 @@ import {
   SBAddCardErrorType,
   SBAddCardFormValuesType,
   SBBillingAddressFormValuesType,
-  SBCheckoutFormValuesType,
-  SBFormPaymentMethod
+  SBCheckoutFormValuesType
 } from './types'
 import { UserDataType } from 'data/modules/types'
 import moment from 'moment'
@@ -159,12 +158,14 @@ export default ({
       yield put(A.fetchSBOrders())
       if (state === 'PENDING_CONFIRMATION' && fiatCurrency) {
         const pair = S.getSBPair(yield select())
+        const method = S.getSBPaymentMethod(yield select())
         if (pair) {
           yield put(
             A.setStep({
               step: 'ENTER_AMOUNT',
               fiatCurrency,
-              pair
+              pair,
+              method
             })
           )
         } else {
@@ -218,9 +219,12 @@ export default ({
       const step = S.getStep(yield select())
       if (step !== 'ENTER_AMOUNT') {
         const pair = S.getSBPair(yield select())
+        const method = S.getSBPaymentMethod(yield select())
         const fiatCurrency = S.getFiatCurrency(yield select()) || 'EUR'
         if (pair) {
-          yield put(A.setStep({ step: 'ENTER_AMOUNT', fiatCurrency, pair }))
+          yield put(
+            A.setStep({ step: 'ENTER_AMOUNT', fiatCurrency, pair, method })
+          )
           yield take(AT.INITIALIZE_CHECKOUT)
           yield delay(3000)
           yield put(actions.form.startSubmit('simpleBuyCheckout'))
@@ -531,45 +535,19 @@ export default ({
   }
 
   const initializeCheckout = function * ({
-    paymentMethods,
-    cards,
     orderType
   }: ReturnType<typeof A.initializeCheckout>) {
     try {
       yield call(createUser)
       yield call(waitForUserData)
 
-      const defaultMethod = S.getDefaultMethod(yield select())
       const fiatCurrency = S.getFiatCurrency(yield select())
       if (!fiatCurrency) throw new Error(NO_FIAT_CURRENCY)
 
       yield put(A.fetchSBSuggestedAmounts(fiatCurrency))
 
-      const isSimpleBuyCCInvited = true
-      const cardMethod = paymentMethods.methods.find(
-        method => method.type === 'PAYMENT_CARD'
-      )
-      const activeCard = cards.find(card => card.state === 'ACTIVE')
-
-      const method: SBFormPaymentMethod =
-        defaultMethod ||
-        (activeCard
-          ? cardMethod
-            ? {
-                ...activeCard,
-                limits: cardMethod.limits,
-                type: 'USER_CARD'
-              }
-            : paymentMethods.methods[0]
-          : paymentMethods.methods[0])
-
       yield put(
         actions.form.initialize('simpleBuyCheckout', {
-          method: isSimpleBuyCCInvited
-            ? method
-            : paymentMethods.methods.find(
-                method => method.type === 'BANK_ACCOUNT'
-              ),
           orderType
         } as SBCheckoutFormValuesType)
       )

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts
@@ -34,6 +34,9 @@ export const getSBPairs = (state: RootState) => state.components.simpleBuy.pairs
 
 export const getSBPair = (state: RootState) => state.components.simpleBuy.pair
 
+export const getSBPaymentMethod = (state: RootState) =>
+  state.components.simpleBuy.method
+
 export const getSBPaymentMethods = (state: RootState) =>
   state.components.simpleBuy.methods
 

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
@@ -34,18 +34,11 @@ export type SBAddCardErrorType =
 export type SBBillingAddressFormValuesType = NabuAddressType
 export type SBCheckoutFormValuesType = {
   amount: string
-  method?: SBFormPaymentMethod
   orderType: 'BUY' | 'SELL'
 }
 export type SBCurrencySelectFormType = {
   search: string
 }
-export type SBFormPaymentMethod =
-  | SBPaymentMethodType
-  | (SBCardType & {
-      limits: SBPaymentMethodType['limits']
-      type: 'USER_CARD'
-    })
 export enum SimpleBuyStepType {
   'CURRENCY_SELECTION',
   'CRYPTO_SELECTION',
@@ -77,10 +70,11 @@ export type SimpleBuyState = {
   cardId: undefined | string
   cards: RemoteDataType<string, Array<SBCardType>>
   cryptoCurrency: undefined | CoinType
-  defaultMethod: undefined | SBFormPaymentMethod
+  defaultMethod: undefined | SBPaymentMethodType
   everypay3DS: RemoteDataType<string, Everypay3DSResponseType>
   fiatCurrency: undefined | FiatType
   fiatEligible: RemoteDataType<string, FiatEligibleType>
+  method: undefined | SBPaymentMethodType
   methods: RemoteDataType<string, SBPaymentMethodsType>
   order: undefined | SBOrderType
   orders: RemoteDataType<string, Array<SBOrderType>>
@@ -300,8 +294,10 @@ export type StepActionsPayload =
     }
   | {
       cryptoCurrency?: CoinType
-      defaultMethod?: SBFormPaymentMethod
+      defaultMethod?: SBPaymentMethodType
       fiatCurrency: FiatType
+      method?: SBPaymentMethodType
+      order?: SBOrderType
       pair: SBPairType
       step: 'ENTER_AMOUNT'
     }
@@ -312,8 +308,9 @@ export type StepActionsPayload =
     }
   | {
       cryptoCurrency: CoinType
-      defaultMethod: SBFormPaymentMethod
+      defaultMethod?: SBPaymentMethodType
       fiatCurrency: FiatType
+      order?: SBOrderType
       pair: SBPairType
       step: 'PAYMENT_METHODS'
     }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/index.tsx
@@ -1,5 +1,6 @@
 import { actions, selectors } from 'data'
 import { bindActionCreators, Dispatch } from 'redux'
+import { CoinType, SBPairType } from 'core/types'
 import { connect, ConnectedProps } from 'react-redux'
 import { getData } from './selectors'
 import { Remote } from 'core'
@@ -49,7 +50,9 @@ const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
 type OwnProps = {
+  cryptoCurrency?: CoinType
   handleClose: () => void
+  pair: SBPairType
 }
 type LinkDispatchPropsType = {
   simpleBuyActions: typeof actions.components.simpleBuy

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/template.success.tsx
@@ -65,7 +65,10 @@ const Success: React.FC<InjectedFormProps<{}, Props, ErrorType> &
                 })
               : props.simpleBuyActions.setStep({
                   fiatCurrency: props.fiatCurrency,
-                  step: 'CRYPTO_SELECTION'
+                  step: 'PAYMENT_METHODS',
+                  pair: props.pair,
+                  cryptoCurrency: props.cryptoCurrency || 'BTC',
+                  order: props.order
                 })
           }
         />