diff --git a/assets/images/payment-method-icons/affirm.svg b/assets/images/payment-method-icons/affirm.svg new file mode 100644 index 00000000000..142ddff5361 --- /dev/null +++ b/assets/images/payment-method-icons/affirm.svg @@ -0,0 +1 @@ + diff --git a/assets/images/payment-method-icons/afterpay.svg b/assets/images/payment-method-icons/afterpay.svg new file mode 100644 index 00000000000..d61125e3b66 --- /dev/null +++ b/assets/images/payment-method-icons/afterpay.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + diff --git a/assets/images/payment-method-icons/amex.svg b/assets/images/payment-method-icons/amex.svg new file mode 100644 index 00000000000..f476392e52a --- /dev/null +++ b/assets/images/payment-method-icons/amex.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + diff --git a/assets/images/payment-method-icons/applepay.svg b/assets/images/payment-method-icons/applepay.svg new file mode 100644 index 00000000000..c0d1dc61af3 --- /dev/null +++ b/assets/images/payment-method-icons/applepay.svg @@ -0,0 +1 @@ + diff --git a/assets/images/payment-method-icons/discover.svg b/assets/images/payment-method-icons/discover.svg new file mode 100644 index 00000000000..7f7a66af36f --- /dev/null +++ b/assets/images/payment-method-icons/discover.svg @@ -0,0 +1 @@ + diff --git a/assets/images/payment-method-icons/gpay.svg b/assets/images/payment-method-icons/gpay.svg new file mode 100644 index 00000000000..e70aae5d46c --- /dev/null +++ b/assets/images/payment-method-icons/gpay.svg @@ -0,0 +1 @@ + diff --git a/assets/images/payment-method-icons/jcb.svg b/assets/images/payment-method-icons/jcb.svg new file mode 100644 index 00000000000..697c616c071 --- /dev/null +++ b/assets/images/payment-method-icons/jcb.svg @@ -0,0 +1 @@ + diff --git a/assets/images/payment-method-icons/klarna.svg b/assets/images/payment-method-icons/klarna.svg new file mode 100644 index 00000000000..27151a76668 --- /dev/null +++ b/assets/images/payment-method-icons/klarna.svg @@ -0,0 +1,15 @@ + + + + diff --git a/assets/images/payment-method-icons/mastercard.svg b/assets/images/payment-method-icons/mastercard.svg new file mode 100644 index 00000000000..c8c61efb07f --- /dev/null +++ b/assets/images/payment-method-icons/mastercard.svg @@ -0,0 +1 @@ + diff --git a/assets/images/payment-method-icons/visa.svg b/assets/images/payment-method-icons/visa.svg new file mode 100644 index 00000000000..ffcf787ed7c --- /dev/null +++ b/assets/images/payment-method-icons/visa.svg @@ -0,0 +1 @@ + diff --git a/assets/images/payment-method-icons/woopay.svg b/assets/images/payment-method-icons/woopay.svg new file mode 100644 index 00000000000..3617507266d --- /dev/null +++ b/assets/images/payment-method-icons/woopay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/changelog/add-8808-woo-payment-method-logo b/changelog/add-8808-woo-payment-method-logo new file mode 100644 index 00000000000..30c7a1d340f --- /dev/null +++ b/changelog/add-8808-woo-payment-method-logo @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add the new payment method logos to the connect page. diff --git a/client/components/payment-method-logos/index.tsx b/client/components/payment-method-logos/index.tsx new file mode 100644 index 00000000000..06c5b35d9f4 --- /dev/null +++ b/client/components/payment-method-logos/index.tsx @@ -0,0 +1,113 @@ +/** + * External dependencies + */ +import React, { useState, useEffect } from 'react'; + +/** + * Internal dependencies + */ +import Visa from 'assets/images/payment-method-icons/visa.svg?asset'; +import Mastercard from 'assets/images/payment-method-icons/mastercard.svg?asset'; +import Amex from 'assets/images/payment-method-icons/amex.svg?asset'; +import Discover from 'assets/images/payment-method-icons/discover.svg?asset'; +import WooPay from 'assets/images/payment-method-icons/woopay.svg?asset'; +import ApplePay from 'assets/images/payment-method-icons/applepay.svg?asset'; +import AfterPay from 'assets/images/payment-method-icons/afterpay.svg?asset'; +import Affirm from 'assets/images/payment-method-icons/affirm.svg?asset'; +import Klarna from 'assets/images/payment-method-icons/klarna.svg?asset'; +import Jcb from 'assets/images/payment-method-icons/jcb.svg?asset'; +import GooglePay from 'assets/images/payment-method-icons/gpay.svg?asset'; + +import './style.scss'; + +const PaymentMethods = [ + { + name: 'visa', + component: Visa, + }, + { + name: 'mastercard', + component: Mastercard, + }, + { + name: 'amex', + component: Amex, + }, + { + name: 'discover', + component: Discover, + }, + { + name: 'woopay', + component: WooPay, + }, + { + name: 'applepay', + component: ApplePay, + }, + { + name: 'googlepay', + component: GooglePay, + }, + { + name: 'afterpay', + component: AfterPay, + }, + { + name: 'affirm', + component: Affirm, + }, + { + name: 'klarna', + component: Klarna, + }, + { + name: 'jcb', + component: Jcb, + }, +]; + +export const WooPaymentMethodsLogos: React.VFC< { + maxElements: number; +} > = ( { maxElements = 10 } ) => { + const totalPaymentMethods = 20; + const [ maxShownElements, setMaxShownElements ] = useState( maxElements ); + + useEffect( () => { + const updateMaxElements = () => { + if ( window.innerWidth <= 480 ) { + setMaxShownElements( 5 ); + } else if ( window.innerWidth <= 768 ) { + setMaxShownElements( 7 ); + } else { + setMaxShownElements( maxElements ); + } + }; + + updateMaxElements(); + window.addEventListener( 'resize', updateMaxElements ); + }, [ maxElements ] ); + + return ( + <> +
+ { PaymentMethods.slice( 0, maxShownElements ).map( ( pm ) => { + return ( + { + ); + } ) } + { maxShownElements < totalPaymentMethods && ( +
+ + { totalPaymentMethods - maxShownElements } +
+ ) } +
+ + ); +}; diff --git a/client/components/payment-method-logos/style.scss b/client/components/payment-method-logos/style.scss new file mode 100644 index 00000000000..ea36db24ecc --- /dev/null +++ b/client/components/payment-method-logos/style.scss @@ -0,0 +1,26 @@ +.connect-account-page__payment-methods--logos { + display: flex; + align-items: center; + border: 1px solid $gray-300; + border-bottom: none; + padding: 12px; + img { + width: 37px; + height: 24px; + margin-right: 8px; + border: 1px solid $gray-300; + border-radius: 3px; + } + + &-count { + width: 38px; + height: 24px; + background-color: rgba( $gray-700, 0.1 ); + color: $gray-900; + text-align: center; + line-height: 24px; + border-radius: 3px; + font-size: 11px; + font-weight: 600; + } +} diff --git a/client/connect-account-page/index.tsx b/client/connect-account-page/index.tsx index 1dc81e0a497..834dcddb596 100644 --- a/client/connect-account-page/index.tsx +++ b/client/connect-account-page/index.tsx @@ -22,7 +22,6 @@ import { addQueryArgs } from '@wordpress/url'; import { recordEvent } from 'tracks'; import Page from 'components/page'; import BannerNotice from 'components/banner-notice'; -import PaymentMethods from './payment-methods'; import Incentive from './incentive'; import InfoNotice from './info-notice-modal'; import OnboardingLocationCheckModal from './modal'; @@ -30,6 +29,7 @@ import LogoImg from 'assets/images/woopayments.svg?asset'; import strings from './strings'; import './style.scss'; import InlineNotice from 'components/inline-notice'; +import { WooPaymentMethodsLogos } from 'components/payment-method-logos'; const SandboxModeNotice = () => ( @@ -202,7 +202,7 @@ const ConnectAccountPage: React.FC = () => {
- +

Deposits

diff --git a/client/connect-account-page/payment-methods.tsx b/client/connect-account-page/payment-methods.tsx deleted file mode 100644 index f82adcff7a3..00000000000 --- a/client/connect-account-page/payment-methods.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/** - * External dependencies - */ -import React from 'react'; - -/** - * Internal dependencies - */ - -import './style.scss'; -import { - AffirmIcon, - AfterpayIcon, - ClearpayIcon, - AmericanExpressIcon, - ApplePayIcon, - CBIcon, - IdealIcon, - DiscoverIcon, - GooglePayIcon, - MastercardIcon, - VisaIcon, - WooIcon, - KlarnaIcon, -} from 'wcpay/payment-methods-icons'; - -const PaymentMethods: React.FC = () => { - return ( - <> -
- - - - - - - - - - - - { 'GB' === wcpaySettings?.connect?.country ? ( - - ) : ( - - ) } - & more -
- - ); -}; - -export default PaymentMethods; diff --git a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap index 4a76f5396d4..256570bcc8c 100644 --- a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap +++ b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap @@ -59,71 +59,74 @@ exports[`ConnectAccountPage should render correctly 1`] = ` class="connect-account-page__payment-methods" >