chore(refactor): refactor payment methods

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

@@ -1,10 +1,7 @@
 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 { addWeeks, format, isToday } from 'date-fns'
+import { getCardLogoOrDefault } from 'modals/BuySell/PaymentMethods/model'
 import styled, { css } from 'styled-components'
 
 import { fiatToString } from '@core/exchange/utils'
@@ -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/helpers.tsx

@@ -5,7 +5,7 @@ import { BSPaymentMethodType, BSPaymentTypes, WalletCurrencyType } from '@core/t
 import { Icon, Image } from 'blockchain-info-components'
 import { getBankLogoImageName } from 'services/images'
 
-import { CARD_TYPES, DEFAULT_CARD_SVG_LOGO } from '../../PaymentMethods/model'
+import { getCardLogoOrDefault } from '../../PaymentMethods/model'
 import { IconContainer } from './AccountsStyles'
 
 export const getType = (value: BSPaymentMethodType) => {
@@ -66,16 +66,14 @@ export const getIcon = (value: BSPaymentMethodType): ReactElement => {
       )
     case BSPaymentTypes.USER_CARD: {
       const { card } = value
-      if (!card) {
-        return <></>
-      }
-      const cardType = CARD_TYPES.find((cc) => cc.type === card.type)
+      if (!card) return <></>
+
       return (
         <img
           alt='Credit Card Type'
           height='18px'
           width='auto'
-          src={cardType?.logo ?? DEFAULT_CARD_SVG_LOGO}
+          src={getCardLogoOrDefault(card.type)}
         />
       )
     }

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/PaymentMethods/Methods/BankWireCard/BankWireCard.stories.tsx

@@ -4,15 +4,15 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 
 import { BSPaymentTypes } from '@core/types'
 
-import { BankWireCard, BankWireCardComponent } from '.'
+import { BankWireCard, BankWireCardProps } from '.'
 
 export default {
   component: BankWireCard,
   decorators: [(Story) => <IntlProvider locale='en'>{Story()}</IntlProvider>],
   title: 'modals/BuySell/PaymentMethods/BankWireCard'
-} as ComponentMeta<BankWireCardComponent>
+} as ComponentMeta<React.FC<BankWireCardProps>>
 
-const Template: ComponentStory<BankWireCardComponent> = (args) => <BankWireCard {...args} />
+const Template: ComponentStory<React.FC<BankWireCardProps>> = (args) => <BankWireCard {...args} />
 
 export const Default = Template.bind({})
 Default.args = {

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

@@ -1,2 +1,40 @@
-export { BankWireCard } from './BankWireCard'
-export type { BankWireCardComponent, BankWireCardProps } from './BankWireCard.types'
+import React, { ReactElement } from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { BSPaymentMethodType } from '@core/types'
+import { Icon, Text } from 'blockchain-info-components'
+import { Flex } from 'components/Flex'
+import { Padding } from 'components/Padding'
+
+import { Container } from './BankWireCard.styles'
+
+export type BankWireCardProps = {
+  onClick: (string) => void
+  text: ReactElement | string
+  value: BSPaymentMethodType
+}
+
+export const BankWireCard = ({ onClick, text, value }: BankWireCardProps) => {
+  return (
+    <Container data-e2e={`sb${value.type.toLowerCase()}BankWire`} onClick={onClick}>
+      <Padding horizontal={24} vertical={28}>
+        <Flex gap={16} flexDirection='column'>
+          <Flex gap={8} justifyContent='space-between' alignItems='center'>
+            <Text weight={600} size='16px' lineHeight='24px' color='grey800'>
+              {text}
+            </Text>
+
+            <Icon name='chevron-right' size='24px' color='grey400' />
+          </Flex>
+
+          <Text weight={500} size='12px' lineHeight='16px'>
+            <FormattedMessage
+              id='paymentMethods.bankWire.message'
+              defaultMessage="If you'd prefer to deposit funds directly from your bank account first, follow the instructions on the next screen. Once your deposit arrives in your Blockchain.com account you can come back here to buy crypto."
+            />
+          </Text>
+        </Flex>
+      </Padding>
+    </Container>
+  )
+}

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