diff --git a/assets/images/payment-method-icons/affirm.svg b/assets/images/payment-method-icons/affirm.svg deleted file mode 100644 index 142ddff5361..00000000000 --- a/assets/images/payment-method-icons/affirm.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/payment-method-icons/afterpay.svg b/assets/images/payment-method-icons/afterpay.svg deleted file mode 100644 index d61125e3b66..00000000000 --- a/assets/images/payment-method-icons/afterpay.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - diff --git a/assets/images/payment-method-icons/amex.svg b/assets/images/payment-method-icons/amex.svg deleted file mode 100644 index f476392e52a..00000000000 --- a/assets/images/payment-method-icons/amex.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - diff --git a/assets/images/payment-method-icons/applepay.svg b/assets/images/payment-method-icons/applepay.svg deleted file mode 100644 index c0d1dc61af3..00000000000 --- a/assets/images/payment-method-icons/applepay.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/payment-method-icons/discover.svg b/assets/images/payment-method-icons/discover.svg deleted file mode 100644 index 7f7a66af36f..00000000000 --- a/assets/images/payment-method-icons/discover.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/payment-method-icons/gpay.svg b/assets/images/payment-method-icons/gpay.svg deleted file mode 100644 index e70aae5d46c..00000000000 --- a/assets/images/payment-method-icons/gpay.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/payment-method-icons/jcb.svg b/assets/images/payment-method-icons/jcb.svg deleted file mode 100644 index 697c616c071..00000000000 --- a/assets/images/payment-method-icons/jcb.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/payment-method-icons/klarna.svg b/assets/images/payment-method-icons/klarna.svg deleted file mode 100644 index 27151a76668..00000000000 --- a/assets/images/payment-method-icons/klarna.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - diff --git a/assets/images/payment-method-icons/mastercard.svg b/assets/images/payment-method-icons/mastercard.svg deleted file mode 100644 index c8c61efb07f..00000000000 --- a/assets/images/payment-method-icons/mastercard.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/payment-method-icons/visa.svg b/assets/images/payment-method-icons/visa.svg deleted file mode 100644 index ffcf787ed7c..00000000000 --- a/assets/images/payment-method-icons/visa.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/payment-method-icons/woopay.svg b/assets/images/payment-method-icons/woopay.svg deleted file mode 100644 index 3617507266d..00000000000 --- a/assets/images/payment-method-icons/woopay.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/changelog/update-9002-logos-component b/changelog/update-9002-logos-component new file mode 100644 index 00000000000..78334e6224e --- /dev/null +++ b/changelog/update-9002-logos-component @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Replace the payment method logos component with the shared component from @woocommerce/onboarding. diff --git a/client/components/payment-method-logos/index.tsx b/client/components/payment-method-logos/index.tsx deleted file mode 100644 index 06c5b35d9f4..00000000000 --- a/client/components/payment-method-logos/index.tsx +++ /dev/null @@ -1,113 +0,0 @@ -/** - * 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 deleted file mode 100644 index ea36db24ecc..00000000000 --- a/client/components/payment-method-logos/style.scss +++ /dev/null @@ -1,26 +0,0 @@ -.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 1c1c10bf648..b52d07e5736 100644 --- a/client/connect-account-page/index.tsx +++ b/client/connect-account-page/index.tsx @@ -3,7 +3,7 @@ /** * External dependencies */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, Suspense } from 'react'; import { render } from '@wordpress/element'; import { Button, @@ -29,7 +29,12 @@ 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 WooPaymentMethodsLogos = React.lazy( () => + import( '@woocommerce/onboarding' ).then( ( module ) => { + return { default: module.WooPaymentMethodsLogos }; + } ) +); const SandboxModeNotice = () => ( @@ -202,7 +207,12 @@ const ConnectAccountPage: React.FC = () => {
- + }> + +

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 256570bcc8c..67943973785 100644 --- a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap +++ b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap @@ -58,76 +58,6 @@ exports[`ConnectAccountPage should render correctly 1`] = `