chore(refactor): refactor payment methods

packages/blockchain-wallet-v4-frontend/src/components/Flyout/model.tsx

@@ -1,9 +1,6 @@
 import React, { ReactElement } from 'react'
 import { FormattedMessage } from 'react-intl'
-import {
-  CARD_TYPES,
-  DEFAULT_CARD_SVG_LOGO
-} from 'blockchain-wallet-v4-frontend/src/modals/BuySell/PaymentMethods/model'
+import { getCardLogoOrDefault } from 'blockchain-wallet-v4-frontend/src/modals/BuySell/PaymentMethods/model'
 import { addWeeks, format, isToday } from 'date-fns'
 import styled, { css } from 'styled-components'
 
@@ -725,17 +722,7 @@ const getIcon = (method: BSPaymentMethodType | undefined, disabled?: boolean): R
 
   switch (method.type) {
     case BSPaymentTypes.USER_CARD:
-      const cardType = CARD_TYPES.find(
-        (card) => card.type === (method.card ? method.card.type : '')
-      )
-      return (
-        <img
-          height='18px'
-          width='auto'
-          src={cardType ? cardType.logo : DEFAULT_CARD_SVG_LOGO}
-          alt=''
-        />
-      )
+      return <img height='18px' width='auto' src={getCardLogoOrDefault(method.card?.type)} alt='' />
     case BSPaymentTypes.FUNDS:
       return <Icon size='32px' color='USD' name={method.currency as WalletCurrencyType} />
     case BSPaymentTypes.BANK_TRANSFER:

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/LinkedPaymentAccounts/Accounts/index.tsx

@@ -1,9 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
-import {
-  CARD_TYPES,
-  DEFAULT_CARD_SVG_LOGO
-} from 'blockchain-wallet-v4-frontend/src/modals/BuySell/PaymentMethods/model'
+import { getCardLogoOrDefault } from 'blockchain-wallet-v4-frontend/src/modals/BuySell/PaymentMethods/model'
 import { Form, reduxForm } from 'redux-form'
 import styled from 'styled-components'
 
@@ -176,13 +173,12 @@ const Accounts = (props: Props) => {
         if (!card) {
           return <></>
         }
-        const cardType = CARD_TYPES.find((cc) => cc.type === card.type)
         return (
           <img
             alt='Credit Card Type'
             height='18px'
             width='auto'
-            src={cardType ? cardType.logo : DEFAULT_CARD_SVG_LOGO}
+            src={getCardLogoOrDefault(card.type)}
           />
         )
       case BSPaymentTypes.FUNDS:

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/PaymentMethods/Methods/LinkBank/index.tsx

@@ -23,7 +23,6 @@ const DisplayIconBank = styled(DisplayIcon)`
 type Props = {
   icon: ReactElement
   onClick: (string) => void
-  text: ReactElement | string
   value: BSPaymentMethodType
 }
 

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/PaymentMethods/Methods/MobileMethod/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+
+import { Icon, Image } from 'blockchain-info-components'
+import {
+  Content,
+  Description,
+  DisplayContainer,
+  DisplayIcon,
+  DisplaySubTitle,
+  DisplayTitle
+} from 'components/BuySell'
+
+const MobileTitle = styled(DisplayTitle)`
+  margin-bottom: 2px;
+`
+const MobileIcon = styled(DisplayIcon)`
+  min-height: 60px;
+`
+
+type Props = {
+  onClick: (string) => void
+  type: 'apple' | 'google'
+}
+
+const MobileMethod = ({ onClick, type }: Props) => {
+  const capType = type.charAt(0).toUpperCase() + type.slice(1)
+  return (
+    <DisplayContainer role='button' onClick={onClick}>
+      <MobileIcon>
+        <Image name={`${type}-pay`} height='18px' />
+      </MobileIcon>
+      <Content>
+        <MobileTitle>
+          <FormattedMessage id={`modals.simplebuy.${type}pay`} defaultMessage={`${capType} Pay`} />
+        </MobileTitle>
+        <DisplaySubTitle>
+          <FormattedMessage id='copy.instantly_available' defaultMessage='Instantly Available' />
+        </DisplaySubTitle>
+        <Description>
+          <FormattedMessage
+            id={`modals.simplebuy.${type}pay.description`}
+            defaultMessage={`Simply tap Buy with ${capType} Pay`}
+          />
+        </Description>
+      </Content>
+      <Icon name='chevron-right' size='24px' color='grey400' />
+    </DisplayContainer>
+  )
+}
+
+export default MobileMethod