From 3ead38b665299093cdeb88e00937fdd36100da3a Mon Sep 17 00:00:00 2001 From: Dan Paun Date: Tue, 18 Jun 2024 12:23:07 +0300 Subject: [PATCH 01/17] Add the new payment method logos to the connect page --- changelog/add-8808-woo-payment-method-logo | 4 + .../payment-method-logos/Icons/affirm.js | 74 + .../payment-method-logos/Icons/afterpay.js | 80 + .../payment-method-logos/Icons/amex.js | 16 + .../payment-method-logos/Icons/applepay.js | 27 + .../payment-method-logos/Icons/cb.js | 48 + .../payment-method-logos/Icons/discover.js | 141 + .../payment-method-logos/Icons/giropay.js | 47 + .../payment-method-logos/Icons/gpay.js | 63 + .../payment-method-logos/Icons/index.js | 15 + .../payment-method-logos/Icons/jcb.js | 39 + .../payment-method-logos/Icons/klarna.js | 49 + .../payment-method-logos/Icons/maestro.js | 67 + .../payment-method-logos/Icons/mastercard.js | 39 + .../payment-method-logos/Icons/unionpay.js | 111 + .../payment-method-logos/Icons/visa.js | 41 + .../payment-method-logos/Icons/woopay.js | 43 + .../components/payment-method-logos/index.tsx | 115 + .../payment-method-logos/style.scss | 40 + client/connect-account-page/index.tsx | 5 +- .../test/__snapshots__/index.test.tsx.snap | 3565 +++++++++++++++-- 21 files changed, 4211 insertions(+), 418 deletions(-) create mode 100644 changelog/add-8808-woo-payment-method-logo create mode 100644 client/components/payment-method-logos/Icons/affirm.js create mode 100644 client/components/payment-method-logos/Icons/afterpay.js create mode 100644 client/components/payment-method-logos/Icons/amex.js create mode 100644 client/components/payment-method-logos/Icons/applepay.js create mode 100644 client/components/payment-method-logos/Icons/cb.js create mode 100644 client/components/payment-method-logos/Icons/discover.js create mode 100644 client/components/payment-method-logos/Icons/giropay.js create mode 100644 client/components/payment-method-logos/Icons/gpay.js create mode 100644 client/components/payment-method-logos/Icons/index.js create mode 100644 client/components/payment-method-logos/Icons/jcb.js create mode 100644 client/components/payment-method-logos/Icons/klarna.js create mode 100644 client/components/payment-method-logos/Icons/maestro.js create mode 100644 client/components/payment-method-logos/Icons/mastercard.js create mode 100644 client/components/payment-method-logos/Icons/unionpay.js create mode 100644 client/components/payment-method-logos/Icons/visa.js create mode 100644 client/components/payment-method-logos/Icons/woopay.js create mode 100644 client/components/payment-method-logos/index.tsx create mode 100644 client/components/payment-method-logos/style.scss 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/Icons/affirm.js b/client/components/payment-method-logos/Icons/affirm.js new file mode 100644 index 00000000000..52f29ec6535 --- /dev/null +++ b/client/components/payment-method-logos/Icons/affirm.js @@ -0,0 +1,74 @@ +export const Affirm = () => ( + /* eslint-disable */ + + + + + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/afterpay.js b/client/components/payment-method-logos/Icons/afterpay.js new file mode 100644 index 00000000000..b7a37fa12e0 --- /dev/null +++ b/client/components/payment-method-logos/Icons/afterpay.js @@ -0,0 +1,80 @@ +export const Afterpay = () => ( + /* eslint-disable */ + + + + + + + + + + + + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/amex.js b/client/components/payment-method-logos/Icons/amex.js new file mode 100644 index 00000000000..b7815437994 --- /dev/null +++ b/client/components/payment-method-logos/Icons/amex.js @@ -0,0 +1,16 @@ +export const Amex = () => ( + /* eslint-disable */ + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/applepay.js b/client/components/payment-method-logos/Icons/applepay.js new file mode 100644 index 00000000000..99a62d6cb42 --- /dev/null +++ b/client/components/payment-method-logos/Icons/applepay.js @@ -0,0 +1,27 @@ +export const ApplePay = () => ( + /* eslint-disable */ + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/cb.js b/client/components/payment-method-logos/Icons/cb.js new file mode 100644 index 00000000000..1a786a2d6f6 --- /dev/null +++ b/client/components/payment-method-logos/Icons/cb.js @@ -0,0 +1,48 @@ +export const CB = () => ( + /* eslint-disable */ + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/discover.js b/client/components/payment-method-logos/Icons/discover.js new file mode 100644 index 00000000000..2df70944d31 --- /dev/null +++ b/client/components/payment-method-logos/Icons/discover.js @@ -0,0 +1,141 @@ +export const Discover = () => ( + /* eslint-disable */ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/giropay.js b/client/components/payment-method-logos/Icons/giropay.js new file mode 100644 index 00000000000..0aee187ab4d --- /dev/null +++ b/client/components/payment-method-logos/Icons/giropay.js @@ -0,0 +1,47 @@ +export const Giropay = () => ( + /* eslint-disable */ + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/gpay.js b/client/components/payment-method-logos/Icons/gpay.js new file mode 100644 index 00000000000..7bd90317ab9 --- /dev/null +++ b/client/components/payment-method-logos/Icons/gpay.js @@ -0,0 +1,63 @@ +export const GooglePay = () => ( + /* eslint-disable */ + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/index.js b/client/components/payment-method-logos/Icons/index.js new file mode 100644 index 00000000000..3170faad78e --- /dev/null +++ b/client/components/payment-method-logos/Icons/index.js @@ -0,0 +1,15 @@ +export * from './amex'; +export * from './applepay'; +export * from './cb'; +export * from './discover'; +export * from './giropay'; +export * from './gpay'; +export * from './jcb'; +export * from './maestro'; +export * from './mastercard'; +export * from './unionpay'; +export * from './visa'; +export * from './woopay'; +export * from './afterpay'; +export * from './affirm'; +export * from './klarna'; diff --git a/client/components/payment-method-logos/Icons/jcb.js b/client/components/payment-method-logos/Icons/jcb.js new file mode 100644 index 00000000000..55495fbf00b --- /dev/null +++ b/client/components/payment-method-logos/Icons/jcb.js @@ -0,0 +1,39 @@ +export const JCB = () => ( + /* eslint-disable */ + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/klarna.js b/client/components/payment-method-logos/Icons/klarna.js new file mode 100644 index 00000000000..92658ea0d09 --- /dev/null +++ b/client/components/payment-method-logos/Icons/klarna.js @@ -0,0 +1,49 @@ +export const Klarna = () => ( + /* eslint-disable */ + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/maestro.js b/client/components/payment-method-logos/Icons/maestro.js new file mode 100644 index 00000000000..9207441f329 --- /dev/null +++ b/client/components/payment-method-logos/Icons/maestro.js @@ -0,0 +1,67 @@ +export const Maestro = () => ( + /* eslint-disable */ + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/mastercard.js b/client/components/payment-method-logos/Icons/mastercard.js new file mode 100644 index 00000000000..a97ffd1622e --- /dev/null +++ b/client/components/payment-method-logos/Icons/mastercard.js @@ -0,0 +1,39 @@ +export const MasterCard = () => ( + /* eslint-disable */ + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/unionpay.js b/client/components/payment-method-logos/Icons/unionpay.js new file mode 100644 index 00000000000..de3fbc06d5e --- /dev/null +++ b/client/components/payment-method-logos/Icons/unionpay.js @@ -0,0 +1,111 @@ +export const UnionPay = () => ( + /* eslint-disable */ + + + + + + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/visa.js b/client/components/payment-method-logos/Icons/visa.js new file mode 100644 index 00000000000..dead6a60142 --- /dev/null +++ b/client/components/payment-method-logos/Icons/visa.js @@ -0,0 +1,41 @@ +export const Visa = () => ( + /* eslint-disable */ + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/Icons/woopay.js b/client/components/payment-method-logos/Icons/woopay.js new file mode 100644 index 00000000000..eb0139a86bb --- /dev/null +++ b/client/components/payment-method-logos/Icons/woopay.js @@ -0,0 +1,43 @@ +export const WooPay = () => ( + /* eslint-disable */ + + + + + + + + + + + + + + + /* eslint-enable */ +); diff --git a/client/components/payment-method-logos/index.tsx b/client/components/payment-method-logos/index.tsx new file mode 100644 index 00000000000..9ce0b39e9e3 --- /dev/null +++ b/client/components/payment-method-logos/index.tsx @@ -0,0 +1,115 @@ +/** + * External dependencies + */ +import React from 'react'; +import { Fragment } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { + Visa, + MasterCard, + Amex, + WooPay, + ApplePay, + GooglePay, + Discover, + JCB, + Afterpay, + Affirm, + Klarna, +} from './Icons'; + +import './style.scss'; + +const Payments = [ + { + name: 'visa', + component: , + }, + { + name: 'mastercard', + component: , + }, + { + name: 'amex', + component: , + }, + { + name: 'discover', + component: , + }, + { + name: 'woopay', + component: , + }, + { + name: 'applepay', + component: , + }, + { + name: 'googlepay', + component: , + }, + { + name: 'afterpay', + component: , + }, + { + name: 'affirm', + component: , + }, + { + name: 'klarna', + component: , + }, + { + name: 'jcb', + component: , + }, +]; + +export const WooPaymentMethodLogos: React.VFC< { + maxNrElements: number; +} > = ( { maxNrElements = 10 } ) => { + let i = 0; + let j = 0; + return ( + <> +
+ { Payments.map( ( payment ) => { + if ( i >= maxNrElements ) { + i++; + return ; + } + i++; + + return payment.component; + } ) } + { i < 21 && ( +
+ + { 21 - i } +
+ ) } +
+ +
+ { Payments.map( ( payment ) => { + if ( j >= 5 ) { + j++; + return ; + } + j++; + + return payment.component; + } ) } + { j < 21 && ( +
+ + { 21 - j } +
+ ) } +
+ + ); +}; diff --git a/client/components/payment-method-logos/style.scss b/client/components/payment-method-logos/style.scss new file mode 100644 index 00000000000..95bd37bcf7d --- /dev/null +++ b/client/components/payment-method-logos/style.scss @@ -0,0 +1,40 @@ +.woocommerce-payments-method-logos_count { + width: 38px; + height: 24px; + background-color: #f2f2f2; + text-align: center; + line-height: 24px; + border-radius: 3px; +} + +.woocommerce-payments-method-logos > svg, +.woocommerce-payments-method-logos_mini > svg { + width: 38px; + height: 24px; + margin-right: 8px; +} + +.connect-account-page__payment-methods .woocommerce-payments-method-logos, +.connect-account-page__payment-methods .woocommerce-payments-method-logos_mini { + border: 1px solid #ddd; + border-bottom: none; + padding: 12px; +} + +.woocommerce-payments-method-logos, +.woocommerce-payments-method-logos_mini { + display: flex; + align-items: center; +} + +@media only screen and ( min-width: 480px ) { + .woocommerce-payments-method-logos_mini { + display: none; + } +} + +@media only screen and ( max-width: 480px ) { + .woocommerce-payments-method-logos { + display: none; + } +} diff --git a/client/connect-account-page/index.tsx b/client/connect-account-page/index.tsx index 7cb4fdf9a15..2ed486ea350 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,8 @@ import LogoImg from 'assets/images/woopayments.svg?asset'; import strings from './strings'; import './style.scss'; import InlineNotice from 'components/inline-notice'; +import { WooPaymentMethodLogos } from 'components/payment-method-logos'; +import { keys } from 'lodash'; const SandboxModeNotice = () => ( @@ -181,7 +182,7 @@ const ConnectAccountPage: React.FC = () => {
- +

Deposits

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..672fc4fb7ad 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,2155 @@ exports[`ConnectAccountPage should render correctly 1`] = ` class="connect-account-page__payment-methods" > +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + 10 +
+
+ + +
+ +
+`; + +exports[`ConnectAccountPage should render correctly when on-boarding disabled 1`] = ` +
+