chore(refactor): linked payments refactor (#6309)

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+
+import { Text } from 'blockchain-info-components'
+import { FlyoutWrapper } from 'components/Flyout'
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100vh;
+`
+export const TopText = styled(Text)`
+  display: flex;
+  align-items: center;
+  margin-bottom: 7px;
+`
+export const PaymentsWrapper = styled.div`
+  border-top: 1px solid ${(props) => props.theme.grey000};
+  flex-grow: 1;
+  overflow-y: scroll;
+`
+export const NoMethods = styled(FlyoutWrapper)`
+  text-align: center;
+`
+export const IconContainer = styled.div`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: ${(props) => props.theme.blue000};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

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

@@ -67,9 +67,7 @@ const Bank = ({ icon, onClick, text, value }: Props) => {
               <FormattedMessage
                 id='modals.simplebuy.band_item_with_limits'
                 defaultMessage='{limitAmount} Limit'
-                values={{
-                  limitAmount
-                }}
+                values={{ limitAmount }}
               />
             )}
           </StyledTitle>

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/LinkedPaymentAccounts/Accounts/Card/Card.styles.ts

@@ -4,6 +4,7 @@ import {
   DisplayContainer as BSDisplayContainer,
   DisplayIcon as BSDisplayIcon
 } from 'components/BuySell'
+import { Title, Value } from 'components/Flyout'
 
 export const DisplayContainer = styled(BSDisplayContainer)`
   flex-direction: row;
@@ -15,3 +16,13 @@ export const DisplayIcon = styled(BSDisplayIcon)`
   align-items: center;
   flex-direction: row;
 `
+
+export const StyledValue = styled(Value)`
+  text-transform: capitalize;
+`
+
+export const StyledTitle = styled(Title)`
+  color: ${(p) => p.theme.grey600};
+  font-size: 14px;
+  font-weight: 500;
+`

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

@@ -6,31 +6,19 @@ import React, {
   useMemo
 } from 'react'
 import { FormattedMessage } from 'react-intl'
-import styled from 'styled-components'
 
 import { fiatToString } from '@core/exchange/utils'
 import { BSPaymentMethodType } from '@core/types'
 import { Coin } from '@core/utils'
 import { Icon } from 'blockchain-info-components'
 import { MultiRowContainer } from 'components/BuySell'
 import { Flex } from 'components/Flex'
-import { Title, Value } from 'components/Flyout'
 import { Padding } from 'components/Padding'
 import { Tag } from 'components/Tag'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { NabuError } from 'services/errors'
 
-import { DisplayContainer, DisplayIcon } from './Card.styles'
-
-const StyledValue = styled(Value)`
-  text-transform: capitalize;
-`
-
-const StyledTitle = styled(Title)`
-  color: ${(p) => p.theme.grey600};
-  font-size: 14px;
-  font-weight: 500;
-`
+import { DisplayContainer, DisplayIcon, StyledTitle, StyledValue } from './Card.styles'
 
 type Props = {
   icon: ReactElement
@@ -66,19 +54,7 @@ const Card: React.FC<Props> = ({
     })
   }, [currency, limits])
 
-  const handleOnClickNabuErrorInfoIcon: MouseEventHandler<HTMLDivElement> = useCallback(
-    (event) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (!nabuError || !onClickNabuErrorInfo) return
-
-      onClickNabuErrorInfo(nabuError)
-    },
-    [nabuError, onClickNabuErrorInfo]
-  )
-
-  const handleOnKeyPressNabuErrorInfoIcon: KeyboardEventHandler<HTMLDivElement> = useCallback(
+  const handleNabuError = useCallback(
     (event) => {
       event.preventDefault()
       event.stopPropagation()
@@ -130,9 +106,7 @@ const Card: React.FC<Props> = ({
               <FormattedMessage
                 id='modals.simplebuy.card_with_limits'
                 defaultMessage='{limitAmount} Limit'
-                values={{
-                  limitAmount
-                }}
+                values={{ limitAmount }}
               />
             )}
           </StyledTitle>
@@ -150,8 +124,8 @@ const Card: React.FC<Props> = ({
               <div
                 role='button'
                 tabIndex={-1}
-                onClick={handleOnClickNabuErrorInfoIcon}
-                onKeyPress={handleOnKeyPressNabuErrorInfoIcon}
+                onClick={handleNabuError}
+                onKeyPress={handleNabuError}
               >
                 <Icon name='info' size='12px' color='grey600' />
               </div>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+
+import { Image } from 'blockchain-info-components'
+import { Content, DisplayContainer, DisplayIcon, DisplayTitle } from 'components/BuySell'
+
+const MobileDiplayContainer = styled(DisplayContainer)`
+  height: 74px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const MobilePayment = ({ onClick, type }: { onClick: () => void; type: 'google' | 'apple' }) => {
+  const capType = type.charAt(0).toUpperCase() + type.slice(1)
+  return (
+    <MobileDiplayContainer role='button' onClick={onClick}>
+      <DisplayIcon>
+        <Image name={`${type}-pay`} height='18px' />
+      </DisplayIcon>
+      <Content>
+        <DisplayTitle>
+          <FormattedMessage id={`modals.simplebuy.${type}pay`} defaultMessage={`${capType} Pay`} />
+        </DisplayTitle>
+      </Content>
+    </MobileDiplayContainer>
+  )
+}
+
+export default MobilePayment

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

@@ -0,0 +1,103 @@
+import React, { ReactElement } from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { BSPaymentMethodType, BSPaymentTypes, WalletCurrencyType } from '@core/types'
+import { Icon, Image } from 'blockchain-info-components'
+import { getBankLogoImageName } from 'services/images'
+
+import { CARD_TYPES, DEFAULT_CARD_SVG_LOGO } from '../../PaymentMethods/model'
+import { IconContainer } from './AccountsStyles'
+
+export const getType = (value: BSPaymentMethodType) => {
+  switch (value.type) {
+    case BSPaymentTypes.BANK_TRANSFER:
+    case BSPaymentTypes.LINK_BANK:
+      return (
+        <FormattedMessage
+          id='modals.simplebuy.easybanktransfer'
+          defaultMessage='Easy Bank Transfer'
+        />
+      )
+    case BSPaymentTypes.BANK_ACCOUNT:
+      return value.currency === 'USD' ? (
+        <FormattedMessage id='modals.simplebuy.bankwire' defaultMessage='Wire Transfer' />
+      ) : (
+        <FormattedMessage
+          id='modals.simplebuy.deposit.regular_bank_transfer'
+          defaultMessage='Regular Bank Transfer'
+        />
+      )
+    case BSPaymentTypes.PAYMENT_CARD:
+      return (
+        <FormattedMessage id='modals.simplebuy.paymentcard' defaultMessage='Credit or Debit Card' />
+      )
+    case BSPaymentTypes.USER_CARD:
+      if (!value?.card)
+        return (
+          <FormattedMessage
+            id='modals.simplebuy.paymentcard'
+            defaultMessage='Credit or Debit Card'
+          />
+        )
+
+      return value.card?.label ?? value.card.type
+    case BSPaymentTypes.FUNDS:
+    default:
+      return ''
+  }
+}
+
+export const getIcon = (value: BSPaymentMethodType): ReactElement => {
+  switch (value.type) {
+    case BSPaymentTypes.BANK_TRANSFER:
+    case BSPaymentTypes.LINK_BANK:
+      return <Image name='bank' height='48px' />
+    case BSPaymentTypes.BANK_ACCOUNT:
+      return (
+        <IconContainer>
+          <Icon size='18px' color='blue600' name='arrow-down' />
+        </IconContainer>
+      )
+    case BSPaymentTypes.PAYMENT_CARD:
+      return (
+        <IconContainer>
+          <Icon size='18px' color='blue600' name='credit-card-sb' />
+        </IconContainer>
+      )
+    case BSPaymentTypes.USER_CARD: {
+      const { card } = value
+      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?.logo ?? DEFAULT_CARD_SVG_LOGO}
+        />
+      )
+    }
+    case BSPaymentTypes.FUNDS:
+      return <Icon size='32px' color='USD' name={value.currency as WalletCurrencyType} />
+    default:
+      return <Image name='blank-card' />
+  }
+}
+
+export const getLinkedBankIcon = (bankName: string): ReactElement => (
+  <Image name={getBankLogoImageName(bankName)} height='48px' />
+)
+
+export const renderBankText = (value: BSPaymentMethodType): string | ReactElement => {
+  if (value.details) {
+    return value.details.bankName ?? value.details.accountNumber
+  }
+  return <FormattedMessage id='copy.bank_account' defaultMessage='Bank Account' />
+}
+
+export const renderCardText = ({ card }: BSPaymentMethodType): string => {
+  if (!card) return 'Credit or Debit Card'
+  return card.label ?? card.type
+}