From 24808a0a8bd36d74952ee51b2333b22127514ba7 Mon Sep 17 00:00:00 2001 From: Vlad Olaru Date: Wed, 24 Apr 2024 21:41:40 +0300 Subject: [PATCH] Upgrade the WooPayments surfaces to the new designs (#46873) * Import colors.native scss variables * Add changelog * Refactor WCPay banner and cleanup We introduce a new WCPayConnectCard onboarding component and remove/cleanup all other WCPay surface components. This component uses the new design, updated payment methods icons and WCPay logo. * Add changelog * Upgrade the WCPay payments settings banner * test: Fix WCPay payments settings banner tests * Update the WCPay welcome page to use the WCPayConnectCard component * Update the Payments task page to use the WCPayConnectCard component * Fix copy for payments settings methods CTA buttons label * Add changelog * Further cleanup of no-longer-used WCPay surfaces * Consolidate onboarding component icons for single sources * Minor cleanup * test: Fix WCPay payments settings banner test * test: Fix payments tasks page tests --- .../abstracts/_colors.scss | 1 + .../import-colors-native-scss-variables | 4 + ...46869-new-designs-for-woopayments-surfaces | 4 + .../src/components/WCPayAcceptedMethods.tsx | 41 - .../src/components/WCPayBanner/Icons/amex.js | 32 - .../components/WCPayBanner/Icons/applepay.js | 32 - .../src/components/WCPayBanner/Icons/cb.js | 24 - .../components/WCPayBanner/Icons/discover.js | 52 - .../components/WCPayBanner/Icons/giropay.js | 52 - .../src/components/WCPayBanner/Icons/gpay.js | 68 - .../src/components/WCPayBanner/Icons/jcb.js | 44 - .../components/WCPayBanner/Icons/maestro.js | 72 - .../WCPayBanner/Icons/mastercard.js | 44 - .../components/WCPayBanner/Icons/unionpay.js | 116 - .../src/components/WCPayBanner/Icons/visa.js | 46 - .../components/WCPayBanner/Icons/woopay.js | 48 - .../components/WCPayBanner/WCPayBanner.scss | 71 - .../components/WCPayBanner/WCPayBanner.tsx | 108 - .../WCPayBanner/WCPayBannerImage.tsx | 142 - .../WCPayBanner/WCPayBannerImageCut.tsx | 163 - .../src/components/WCPayBanner/index.ts | 5 - .../WCPayBenefits/WCPayBenefits.scss | 32 - .../WCPayBenefits/WCPayBenefits.tsx | 72 - .../icons/International-market.js | 34 - .../WCPayBenefits/icons/earn-manage.js | 34 - .../components/WCPayBenefits/icons/index.ts | 4 - .../WCPayBenefits/icons/payment-card.js | 34 - .../components/WCPayBenefits/icons/woopay.js | 34 - .../src/components/WCPayBenefits/index.ts | 1 - .../src/components/WCPayCard/WCPayCard.scss | 43 - .../src/components/WCPayCard/WCPayCard.tsx | 74 - .../src/components/WCPayCard/index.ts | 1 - .../PaymentMethodsIcons.tsx | 36 +- .../components/WCPayConnectCard/TipBox.tsx | 32 + .../WCPayConnectCard/WCPayConnectCard.scss | 303 ++ .../WCPayConnectCard/WCPayConnectCard.tsx | 81 + .../src/components/WCPayConnectCard/index.ts | 2 + .../js/onboarding/src/images/cards/amex.js | 19 +- .../onboarding/src/images/cards/applepay.js | 23 +- packages/js/onboarding/src/images/cards/cb.js | 48 +- .../js/onboarding/src/images/cards/diners.js | 4 +- .../onboarding/src/images/cards/discover.js | 2742 +++++++++-------- .../js/onboarding/src/images/cards/giropay.js | 27 + .../onboarding/src/images/cards/googlepay.js | 59 +- .../Icons => images/cards}/index.js | 4 +- .../js/onboarding/src/images/cards/jcb.js | 69 +- .../js/onboarding/src/images/cards/maestro.js | 6 +- .../onboarding/src/images/cards/mastercard.js | 32 +- .../onboarding/src/images/cards/unionpay.js | 131 +- .../js/onboarding/src/images/cards/visa.js | 40 +- .../js/onboarding/src/images/icons/index.js | 1 + .../onboarding/src/images/icons/lightbulb.tsx | 21 + .../src/images/payment-methods/affirm.js | 68 +- .../src/images/payment-methods/afterpay.js | 25 +- .../src/images/payment-methods/clearpay.js | 17 +- .../src/images/payment-methods/ideal.js | 33 +- .../src/images/payment-methods/index.js | 6 + .../src/images/payment-methods/klarna.js | 23 +- .../src/images/payment-methods/woo.js | 37 - .../src/images/payment-methods/woopay.js | 26 + .../js/onboarding/src/images/wcpay-logo.tsx | 59 +- packages/js/onboarding/src/index.ts | 21 +- packages/js/onboarding/src/style.scss | 4 +- .../client/payments-welcome/banner.tsx | 92 +- .../payments-welcome/payment-methods.tsx | 51 - .../client/payments-welcome/strings.tsx | 44 +- .../client/payments-welcome/style.scss | 56 +- .../payments/payment-settings-banner.tsx | 24 +- .../test/payment-settings-banner.test.tsx | 6 +- .../components/WCPay/Suggestion.js | 65 +- .../PaymentGatewaySuggestions/test/index.js | 8 +- ...46869-new-designs-for-woopayments-surfaces | 4 + .../class-wc-settings-payment-gateways.php | 2 +- 73 files changed, 2236 insertions(+), 3647 deletions(-) create mode 100644 packages/js/internal-style-build/changelog/import-colors-native-scss-variables create mode 100644 packages/js/onboarding/changelog/update-46869-new-designs-for-woopayments-surfaces delete mode 100644 packages/js/onboarding/src/components/WCPayAcceptedMethods.tsx delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/amex.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/applepay.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/cb.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/discover.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/giropay.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/gpay.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/jcb.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/maestro.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/mastercard.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/unionpay.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/visa.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/Icons/woopay.js delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.tsx delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImage.tsx delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImageCut.tsx delete mode 100644 packages/js/onboarding/src/components/WCPayBanner/index.ts delete mode 100644 packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss delete mode 100644 packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.tsx delete mode 100644 packages/js/onboarding/src/components/WCPayBenefits/icons/International-market.js delete mode 100644 packages/js/onboarding/src/components/WCPayBenefits/icons/earn-manage.js delete mode 100644 packages/js/onboarding/src/components/WCPayBenefits/icons/index.ts delete mode 100644 packages/js/onboarding/src/components/WCPayBenefits/icons/payment-card.js delete mode 100644 packages/js/onboarding/src/components/WCPayBenefits/icons/woopay.js delete mode 100644 packages/js/onboarding/src/components/WCPayBenefits/index.ts delete mode 100644 packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss delete mode 100644 packages/js/onboarding/src/components/WCPayCard/WCPayCard.tsx delete mode 100644 packages/js/onboarding/src/components/WCPayCard/index.ts rename packages/js/onboarding/src/components/{WCPayBanner => WCPayConnectCard}/PaymentMethodsIcons.tsx (51%) create mode 100644 packages/js/onboarding/src/components/WCPayConnectCard/TipBox.tsx create mode 100644 packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.scss create mode 100644 packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.tsx create mode 100644 packages/js/onboarding/src/components/WCPayConnectCard/index.ts create mode 100644 packages/js/onboarding/src/images/cards/giropay.js rename packages/js/onboarding/src/{components/WCPayBanner/Icons => images/cards}/index.js (82%) create mode 100644 packages/js/onboarding/src/images/icons/index.js create mode 100644 packages/js/onboarding/src/images/icons/lightbulb.tsx create mode 100644 packages/js/onboarding/src/images/payment-methods/index.js delete mode 100644 packages/js/onboarding/src/images/payment-methods/woo.js create mode 100644 packages/js/onboarding/src/images/payment-methods/woopay.js delete mode 100644 plugins/woocommerce-admin/client/payments-welcome/payment-methods.tsx create mode 100644 plugins/woocommerce/changelog/update-46869-new-designs-for-woopayments-surfaces diff --git a/packages/js/internal-style-build/abstracts/_colors.scss b/packages/js/internal-style-build/abstracts/_colors.scss index f9e6989e6e4..618a6cb6e57 100644 --- a/packages/js/internal-style-build/abstracts/_colors.scss +++ b/packages/js/internal-style-build/abstracts/_colors.scss @@ -1,4 +1,5 @@ @import '@automattic/color-studio/dist/color-variables.scss'; +@import '@wordpress/base-styles/colors.native.scss'; @import '@wordpress/base-styles/colors.scss'; $transparent: rgba(255, 255, 255, 0); diff --git a/packages/js/internal-style-build/changelog/import-colors-native-scss-variables b/packages/js/internal-style-build/changelog/import-colors-native-scss-variables new file mode 100644 index 00000000000..f97bce3dc87 --- /dev/null +++ b/packages/js/internal-style-build/changelog/import-colors-native-scss-variables @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Import the new colors native scss variables. diff --git a/packages/js/onboarding/changelog/update-46869-new-designs-for-woopayments-surfaces b/packages/js/onboarding/changelog/update-46869-new-designs-for-woopayments-surfaces new file mode 100644 index 00000000000..acfb2bfa249 --- /dev/null +++ b/packages/js/onboarding/changelog/update-46869-new-designs-for-woopayments-surfaces @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Added a new WCPayConnectCard component and removed previous WCPay banners and cards diff --git a/packages/js/onboarding/src/components/WCPayAcceptedMethods.tsx b/packages/js/onboarding/src/components/WCPayAcceptedMethods.tsx deleted file mode 100644 index a6e75c5c5c0..00000000000 --- a/packages/js/onboarding/src/components/WCPayAcceptedMethods.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/** - * External dependencies - */ -import { createElement, Fragment } from '@wordpress/element'; -import { Text } from '@woocommerce/experimental'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import Visa from '../images/cards/visa.js'; -import MasterCard from '../images/cards/mastercard.js'; -import Maestro from '../images/cards/maestro.js'; -import Amex from '../images/cards/amex.js'; -import ApplePay from '../images/cards/applepay.js'; -import CB from '../images/cards/cb.js'; -import DinersClub from '../images/cards/diners.js'; -import Discover from '../images/cards/discover.js'; -import JCB from '../images/cards/jcb.js'; -import UnionPay from '../images/cards/unionpay.js'; - -export const WCPayAcceptedMethods: React.VFC = () => ( - <> - - { __( 'Accepted payment methods', 'woocommerce' ) } - - -
- - - - - - - - - - -
- -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/amex.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/amex.js deleted file mode 100644 index 564be6610f2..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/amex.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const Amex = () => ( - /* eslint-disable */ - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/applepay.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/applepay.js deleted file mode 100644 index 198c6ea46c9..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/applepay.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const ApplePay = () => ( - /* eslint-disable */ - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/cb.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/cb.js deleted file mode 100644 index db7c1e35859..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/cb.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const CB = () => ( - /* eslint-disable */ - - - - - - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/discover.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/discover.js deleted file mode 100644 index 91775302c43..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/discover.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const Discover = () => ( - /* eslint-disable */ - - - - - - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/giropay.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/giropay.js deleted file mode 100644 index 63dfef83e0a..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/giropay.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const Giropay = () => ( - /* eslint-disable */ - - - - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/gpay.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/gpay.js deleted file mode 100644 index 353c10e1e5e..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/gpay.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const GooglePay = () => ( - /* eslint-disable */ - - - - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/jcb.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/jcb.js deleted file mode 100644 index e817776d17f..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/jcb.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const JCB = () => ( - /* eslint-disable */ - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/maestro.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/maestro.js deleted file mode 100644 index b877a289687..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/maestro.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const Maestro = () => ( - /* eslint-disable */ - - - - - - - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/mastercard.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/mastercard.js deleted file mode 100644 index 8a4d0f42b6f..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/mastercard.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const MasterCard = () => ( - /* eslint-disable */ - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/unionpay.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/unionpay.js deleted file mode 100644 index 39c3933fafc..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/unionpay.js +++ /dev/null @@ -1,116 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const UnionPay = () => ( - /* eslint-disable */ - - - - - - - - - - - - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/visa.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/visa.js deleted file mode 100644 index 42370709f94..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/visa.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const Visa = () => ( - /* eslint-disable */ - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/woopay.js b/packages/js/onboarding/src/components/WCPayBanner/Icons/woopay.js deleted file mode 100644 index 665e104c93e..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/woopay.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const WooPay = () => ( - /* eslint-disable */ - - - - - - - - - - - - - - - /* eslint-enable */ -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss b/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss deleted file mode 100644 index e0d3a5d0cbf..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss +++ /dev/null @@ -1,71 +0,0 @@ -.woocommerce-recommended-payments-banner { - margin: 0 15px 10px 0; - animation: isLoaded; - min-width: 550px; // for smaller screens - animation-duration: 250ms; - - &.components-card { - box-shadow: none; - border: 1px solid $table-border; - border-radius: 2px; - } - - .woocommerce-recommended-payments-banner__body { - display: flex; - align-items: center; - justify-content: center; - padding-bottom: 0; - padding: 30px 0 0 0; - } - - .woocommerce-recommended-payments__header-title { - color: $studio-gray-90; - line-height: 32px; - } - - .woocommerce-recommended-payments__header-heading { - color: #757575; - } - - .woocommerce-recommended-payments-banner__image_container { - display: flex; - padding-left: 15px; - min-width: 200px; // for smaller screens - } - - .woocommerce-recommended-payments-banner__text_container { - margin-inline: 24px; - - a { - margin-top: 0; - } - - * { - margin-block: 1rem; - } - } - - .woocommerce-recommended-payments-banner__footer { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - padding: 20px 15px 30px; - - p { - color: #757575; - font-style: normal; - font-weight: 400; - } - } - - .woocommerce-recommended-payments-banner__footer_icon_container { - display: flex; - align-items: center; - } - - .woocommerce-recommended-payments-banner__footer_icon_container > svg { - height: 28px; - width: 51px; - } -} diff --git a/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.tsx b/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.tsx deleted file mode 100644 index 5bbb0cd7c71..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.tsx +++ /dev/null @@ -1,108 +0,0 @@ -/** - * External dependencies - */ -import { - createElement, - createInterpolateElement, - Fragment, -} from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { Card, CardFooter, CardBody } from '@wordpress/components'; -import { Text } from '@woocommerce/experimental'; - -/** - * Internal dependencies - */ -import { PaymentMethodsIcons } from './PaymentMethodsIcons'; -import { WCPayBannerImage } from './WCPayBannerImage'; - -export const WCPayBannerFooter: React.VFC< { - isWooPayEligible: boolean; -} > = ( { isWooPayEligible } ) => ( - -
- - { __( - 'WooPayments is pre-integrated with popular payment options:', - 'woocommerce' - ) } - -
- - -); - -export const WCPayBannerText: React.VFC< { - actionButton: React.ReactNode; - isWooPayEligible: boolean; -} > = ( { actionButton } ) => { - return ( -
- - { createInterpolateElement( - __( - 'Payments made simple, designed exclusively
for WooCommerce stores.', - 'woocommerce' - ), - { - br:
, - } - ) } - - { actionButton } -
- ); -}; - -export const WCPayBannerBody: React.VFC< { - textPosition: 'left' | 'right'; - actionButton: React.ReactNode; - bannerImage?: React.ReactNode; - isWooPayEligible: boolean; -} > = ( { - actionButton, - textPosition, - bannerImage = , - isWooPayEligible, -} ) => { - return ( - - { textPosition === 'left' ? ( - <> - -
- { bannerImage } -
- - ) : ( - <> -
- { bannerImage } -
- - - ) } - - ); -}; - -export const WCPayBanner: React.FC = ( { children } ) => { - return ( - - { children } - - ); -}; diff --git a/packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImage.tsx b/packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImage.tsx deleted file mode 100644 index a066ba86a30..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImage.tsx +++ /dev/null @@ -1,142 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const WCPayBannerImage = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImageCut.tsx b/packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImageCut.tsx deleted file mode 100644 index e2d3e29f1c6..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImageCut.tsx +++ /dev/null @@ -1,163 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const WCPayBannerImageCut = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/packages/js/onboarding/src/components/WCPayBanner/index.ts b/packages/js/onboarding/src/components/WCPayBanner/index.ts deleted file mode 100644 index 452a1115322..00000000000 --- a/packages/js/onboarding/src/components/WCPayBanner/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './Icons'; -export * from './WCPayBannerImage'; -export * from './WCPayBannerImageCut'; -export * from './PaymentMethodsIcons'; -export * from './WCPayBanner'; diff --git a/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss b/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss deleted file mode 100644 index 33fcb51ab31..00000000000 --- a/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss +++ /dev/null @@ -1,32 +0,0 @@ -.woocommerce-wcpay-benefits { - background-color: #fff; - border-radius: 2px; - padding: 36px 24px; - width: 680px; - min-height: 200px; - - .woocommerce-wcpay-benefits-benefit { - flex-direction: column; - justify-content: start; - margin-left: 0; - width: 186px; - align-items: start; - gap: $gap; - - .woocommerce-wcpay-benefits-benefit-icon-container { - width: 48px; - height: 48px; - background-color: #F2EDFF; - border-radius: 12px; - justify-content: center; - } - } - - p { - font-style: normal; - font-weight: 400; - font-size: 13px; - line-height: 16px; - color: $studio-gray-90; - } -} diff --git a/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.tsx b/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.tsx deleted file mode 100644 index 6673414be94..00000000000 --- a/packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { Text } from '@woocommerce/experimental'; -import { Flex } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { - PaymentCardIcon, - InternationalMarketIcon, - EarnManageIcon, - WooPayIcon, -} from './icons'; - -export const WCPayBenefits: React.VFC< { - isWooPayEligible: boolean; -} > = ( { isWooPayEligible = false } ) => { - return ( - - - - - - - { __( - 'Offer your customers card payments, iDeal, and the ability to sell in-person with Woo mobile app.', - 'woocommerce' - ) } - - - - - - - - { __( - 'Sell to international markets and accept more than 135 currencies with local payment methods.', - 'woocommerce' - ) } - - - - - - - - { __( - 'Earn and manage recurring revenue and get automatic deposits into your nominated bank account.', - 'woocommerce' - ) } - - - { isWooPayEligible && ( - - - - - - { __( - 'Boost conversions with WooPay, a new express checkout feature included in WooPayments.', - 'woocommerce' - ) } - - - ) } - - ); -}; diff --git a/packages/js/onboarding/src/components/WCPayBenefits/icons/International-market.js b/packages/js/onboarding/src/components/WCPayBenefits/icons/International-market.js deleted file mode 100644 index 17be30d3bd3..00000000000 --- a/packages/js/onboarding/src/components/WCPayBenefits/icons/International-market.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const InternationalMarketIcon = () => ( - - - - - - - - -); diff --git a/packages/js/onboarding/src/components/WCPayBenefits/icons/earn-manage.js b/packages/js/onboarding/src/components/WCPayBenefits/icons/earn-manage.js deleted file mode 100644 index 7543fa30235..00000000000 --- a/packages/js/onboarding/src/components/WCPayBenefits/icons/earn-manage.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const EarnManageIcon = () => ( - - - - - - - - -); diff --git a/packages/js/onboarding/src/components/WCPayBenefits/icons/index.ts b/packages/js/onboarding/src/components/WCPayBenefits/icons/index.ts deleted file mode 100644 index 234d5e42370..00000000000 --- a/packages/js/onboarding/src/components/WCPayBenefits/icons/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './payment-card'; -export * from './International-market'; -export * from './earn-manage'; -export * from './woopay'; diff --git a/packages/js/onboarding/src/components/WCPayBenefits/icons/payment-card.js b/packages/js/onboarding/src/components/WCPayBenefits/icons/payment-card.js deleted file mode 100644 index 24ea3c3bbc8..00000000000 --- a/packages/js/onboarding/src/components/WCPayBenefits/icons/payment-card.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const PaymentCardIcon = () => ( - - - - - - - - -); diff --git a/packages/js/onboarding/src/components/WCPayBenefits/icons/woopay.js b/packages/js/onboarding/src/components/WCPayBenefits/icons/woopay.js deleted file mode 100644 index 5bc2cfad103..00000000000 --- a/packages/js/onboarding/src/components/WCPayBenefits/icons/woopay.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export const WooPayIcon = () => ( - - - - - - - - -); diff --git a/packages/js/onboarding/src/components/WCPayBenefits/index.ts b/packages/js/onboarding/src/components/WCPayBenefits/index.ts deleted file mode 100644 index 2cfe85e6569..00000000000 --- a/packages/js/onboarding/src/components/WCPayBenefits/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './WCPayBenefits'; diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss deleted file mode 100644 index c21e835ff68..00000000000 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ /dev/null @@ -1,43 +0,0 @@ -.woocommerce-task-payments .woocommerce-task-payment-wcpay { - .woocommerce-task-payment-wcpay__description { - font-size: 16px; - margin-bottom: $gap-large; - } - - .components-card__header { - margin-bottom: $gap-small; - justify-content: flex-start; - padding: 25px; - - .woocommerce-pill { - margin-left: $gap-small; - } - } - - .components-card__footer { - flex-direction: column; - align-items: flex-start; - - .components-button { - margin-top: $gap; - margin-left: 0; - } - } - - .components-card__body { - h2 { - margin: 0 0 20px 0; - } - } - - .woocommerce-task-payment-wcpay__accepted { - display: flex; - margin-top: $gap-small; - flex-wrap: wrap; - gap: $gap-small; - - h3 { - color: #40464d; - } - } -} diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.tsx b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.tsx deleted file mode 100644 index 3a289810600..00000000000 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.tsx +++ /dev/null @@ -1,74 +0,0 @@ -/** - * External dependencies - */ -import { Card, CardBody, CardHeader, CardFooter } from '@wordpress/components'; -import { Text } from '@woocommerce/experimental'; -import { createElement } from '@wordpress/element'; -import { Link } from '@woocommerce/components'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods'; -import WCPayLogo from '../../images/wcpay-logo'; - -type WCPayCardHeaderProps = { - logoWidth?: number; - logoHeight?: number; -}; - -export const WCPayCardHeader: React.FC< WCPayCardHeaderProps > = ( { - logoWidth = 196, - logoHeight = 41, - children, -} ) => ( - - - { children } - -); - -type WCPayCardBodyProps = { - description: string; - heading: string; - onLinkClick?: () => void; -}; - -export const WCPayCardBody: React.VFC< WCPayCardBodyProps > = ( { - description, - heading, - onLinkClick = () => {}, -} ) => ( - - { heading && { heading } } - - - { description } -
- - { __( 'Learn more', 'woocommerce' ) } - - - - - -); - -export const WCPayCardFooter: React.FC = ( { children } ) => ( - { children } -); - -export const WCPayCard: React.FC = ( { children } ) => { - return { children }; -}; diff --git a/packages/js/onboarding/src/components/WCPayCard/index.ts b/packages/js/onboarding/src/components/WCPayCard/index.ts deleted file mode 100644 index 3c22a1c0647..00000000000 --- a/packages/js/onboarding/src/components/WCPayCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './WCPayCard'; diff --git a/packages/js/onboarding/src/components/WCPayBanner/PaymentMethodsIcons.tsx b/packages/js/onboarding/src/components/WCPayConnectCard/PaymentMethodsIcons.tsx similarity index 51% rename from packages/js/onboarding/src/components/WCPayBanner/PaymentMethodsIcons.tsx rename to packages/js/onboarding/src/components/WCPayConnectCard/PaymentMethodsIcons.tsx index 3a7e2db8173..dd05228b4bf 100644 --- a/packages/js/onboarding/src/components/WCPayBanner/PaymentMethodsIcons.tsx +++ b/packages/js/onboarding/src/components/WCPayConnectCard/PaymentMethodsIcons.tsx @@ -12,33 +12,39 @@ import { Visa, MasterCard, Amex, - WooPay, ApplePay, - Giropay, GooglePay, CB, Discover, - UnionPay, - JCB, -} from './Icons'; +} from '../../images/cards'; +import { + WooPay, + Ideal, + Klarna, + Affirm, + Clearpay, + Afterpay, +} from '../../images/payment-methods'; export const PaymentMethodsIcons: React.VFC< { + businessCountry?: string; isWooPayEligible: boolean; -} > = ( { isWooPayEligible = false } ) => ( -
+} > = ( { businessCountry = '', isWooPayEligible = false } ) => ( +
- { isWooPayEligible && } + + + - - - - - - - { __( '& more.', 'woocommerce' ) } + { isWooPayEligible && } + + + { businessCountry === 'GB' ? : } + + { __( '& more', 'woocommerce' ) }
); diff --git a/packages/js/onboarding/src/components/WCPayConnectCard/TipBox.tsx b/packages/js/onboarding/src/components/WCPayConnectCard/TipBox.tsx new file mode 100644 index 00000000000..bf985979a6c --- /dev/null +++ b/packages/js/onboarding/src/components/WCPayConnectCard/TipBox.tsx @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import React from 'react'; +import classNames from 'classnames'; +import { createElement } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { Lightbulb } from '../../images/icons'; + +interface Props { + color: 'purple' | 'blue' | 'gray' | 'yellow'; + className?: string; +} +const TipBox: React.FC< Props > = ( { color, className, children } ) => { + return ( +
+ +
{ children }
+
+ ); +}; + +export default TipBox; diff --git a/packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.scss b/packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.scss new file mode 100644 index 00000000000..4335baca845 --- /dev/null +++ b/packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.scss @@ -0,0 +1,303 @@ +// WooCommerce/Body Large +@mixin wc-body-large { + font-size: 16px; + line-height: 24px; +} + +// WooCommerce/Body Small +@mixin wc-body-small { + font-size: 14px; + line-height: 18px; +} + +// WooCommerce/Others/Caption +@mixin wc-others-caption { + font-size: 12px; + line-height: 16px; + font-weight: 400; +} + +// WordPress/Title Large +@mixin wp-title-large { + font-size: 32px; + line-height: 40px; + font-weight: 400; +} + +// WordPress/Title Medium +@mixin wp-title-medium { + font-size: 24px; + line-height: 32px; + font-weight: 400; +} + +// WordPress/Title Small +@mixin wp-title-small { + font-size: 20px; + line-height: 28px; + font-weight: 400; +} + +// WordPress/Label +@mixin wp-label { + font-size: 13px; + line-height: 16px; + font-weight: 400; +} + +// WordPress/Subtitle +@mixin wp-subtitle { + @include wc-body-large; + font-weight: 600; +} + +// WordPress/Subtitle Small +@mixin wp-subtitle-small { + font-size: 14px; + line-height: 20px; + font-weight: 600; +} + +// WordPress/Small Button +@mixin wp-small-button { + font-size: 11px; + line-height: 16px; +} + +.wcpay-connect-card { + margin-bottom: $gap-large; + animation: isLoaded; + animation-duration: 250ms; + + h2 { + @include wp-title-small; + color: $gray-90; + margin: 0; + } + + svg { + width: auto; + height: auto; + } + + &__heading { + padding: $gap-large $gap-large; + + svg { + height: 22px; + margin-bottom: $gap-large; + } + + @media screen and (min-width: $break-small) { + h2 { + margin-right: 7%; + @include wp-title-large; + } + } + } + + &__content { + max-width: 680px; + padding: 0 $gap-large $gap-large; + } + + &__payment-methods { + max-width: 680px; + padding: 0 $gap-large; + + p { + @include wp-small-button; + color: $gray-700; + margin-top: 0; + } + + &__icons-container { + border: 1px solid $gray-300; + border-bottom: none; + padding: $gap-small; + display: grid; + column-gap: $gap-smaller; + row-gap: $gap; + grid-template-columns: repeat( auto-fill, minmax(39px, 1fr) ); + + svg { + height: 24px; + + outline: 1px solid rgba( 0, 0, 0, 0.25 ); + outline-offset: -1px; + border-radius: 3px; + display: block; + + &.no-outline { + outline: none; + border-radius: 0; + } + } + + span { + @include wc-others-caption; + color: $gray-700; + display: none; + + @media screen and (min-width: $break-small) { + display: initial; + white-space: nowrap; + align-self: end; + } + } + } + + &__description { + padding: $gap-small; + display: flex; + flex-direction: column; + gap: 10px; + border: 1px solid $gray-300; + + p { + font-size: 11px; + line-height: 16px; + color: $gray-900; + font-weight: 600; + text-transform: uppercase; + margin-bottom: 0; + } + + span { + @include wc-others-caption; + color: $gray-700; + } + + &__divider { + border-top: 1px solid $gray-200; + @media screen and (min-width: $break-small) { + border-right: 1px solid $gray-200; + } + } + + @media screen and (min-width: $break-small) { + flex-direction: row; + } + } + } + + &__buttons { + padding: $gap-large; + + button { + width: 100%; + justify-content: center; + @media screen and (min-width: $break-small) { + width: auto; + justify-content: left; + } + } + } + + &__incentive { + background: #faf8ff; + border: 1px solid #ae7dd0; + border-radius: 2px; + padding: $gap-large; + margin-bottom: $gap-large; + + &-pill { + display: inline-block; + padding: 0 $gap-small; + border: 1px solid #1d2327; // Gray 90 + border-radius: 16px; + text-transform: uppercase; + font-size: 12px; + line-height: 22px; + font-weight: 600; + color: $gray-900; + margin-bottom: $gap-small; + } + + p { + @include wc-others-caption; + color: #50575e; + + &:last-child { + margin-bottom: 0; + } + } + + @media screen and (min-width: $break-small) { + h2 { + margin-right: 10%; + } + + p { + margin-right: 15%; + } + } + } + + // Specific usages + .wcpay-payments-settings-banner & { + margin-top: $gap-large; + + @media screen and (min-width: $break-small) { + margin-right: 15px; + } + } + + .wcpay-component-tip-box { + display: grid; + grid-template-columns: 24px 1fr; + column-gap: $gap-smaller; + padding: $gap $gap-small; + margin: $gap 0; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + + &.purple { + fill: $studio-woocommerce-purple-50; + background-color: $studio-woocommerce-purple-0; + } + + &.blue { + fill: #007cba; // Gutenberg/Blue - Missing from dependencies + background-color: #f0f6fc; // $wp-blue-0 + } + + &.gray { + fill: $gray-50; + background-color: $gray-0; + color: $gray-900; + + .components-button.is-link { + color: #0063a1; // Gutenberg/Blue -10% + } + } + &.yellow { + fill: $gray-50; + background-color: #fef8ee; + color: $gray-900; + .components-button.is-link { + color: #0063a1; // Gutenberg/Blue -10% + } + } + + &__content { + align-self: center; + } + + a { + font-weight: 700; + color: $studio-woocommerce-purple-70; + } + + .components-button.is-link { + font-size: inherit; + color: $studio-woocommerce-purple-50; + } + } +} diff --git a/packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.tsx b/packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.tsx new file mode 100644 index 00000000000..39a1d53f34e --- /dev/null +++ b/packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.tsx @@ -0,0 +1,81 @@ +/** + * External dependencies + */ +import { Card } from '@wordpress/components'; +import { createElement } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import classNames from 'classnames'; + +/** + * Internal dependencies + */ +import WCPayLogo from '../../images/wcpay-logo'; +import { PaymentMethodsIcons } from './PaymentMethodsIcons'; +import TipBox from './TipBox'; + +export const WCPayConnectCard: React.VFC< { + className?: string; + actionButton: React.ReactNode; + firstName?: string; + businessCountry?: string; + isWooPayEligible: boolean; + showNotice?: boolean; +} > = ( { + className = '', + actionButton, + firstName = '', + businessCountry = '', + isWooPayEligible, + showNotice = false, +} ) => { + return ( + +
+ +

+ { sprintf( + /* translators: %1$s: first name of the merchant, if it exists, %2$s: WooPayments. */ + __( 'Hi%1$s, Welcome to %2$s!', 'woocommerce' ), + firstName ? ` ${ firstName }` : '', + 'WooPayments' + ) } +

+
+ { showNotice && ( +
+ + { __( + 'Payments made simple, with no monthly fees – designed exclusively for WooCommerce stores.', + 'woocommerce' + ) } + +
+ ) } +
+ +
+
+

{ __( 'Deposits', 'woocommerce' ) }

+ + { __( 'Automatic - Daily', 'woocommerce' ) } + +
+
+
+

{ __( 'Payments capture', 'woocommerce' ) }

+ { __( 'Capture on order', 'woocommerce' ) } +
+
+
+

{ __( 'Recurring payments', 'woocommerce' ) }

+ { __( 'Supported', 'woocommerce' ) } +
+
+
+
{ actionButton }
+ + ); +}; diff --git a/packages/js/onboarding/src/components/WCPayConnectCard/index.ts b/packages/js/onboarding/src/components/WCPayConnectCard/index.ts new file mode 100644 index 00000000000..852bfb4852e --- /dev/null +++ b/packages/js/onboarding/src/components/WCPayConnectCard/index.ts @@ -0,0 +1,2 @@ +export * from './WCPayConnectCard'; +export * from './PaymentMethodsIcons'; diff --git a/packages/js/onboarding/src/images/cards/amex.js b/packages/js/onboarding/src/images/cards/amex.js index 2115ff5735f..a531d4b7d36 100644 --- a/packages/js/onboarding/src/images/cards/amex.js +++ b/packages/js/onboarding/src/images/cards/amex.js @@ -3,25 +3,20 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - +export const Amex = () => ( + /* eslint-disable */ + - + + fill="#006FCF"/> - + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/applepay.js b/packages/js/onboarding/src/images/cards/applepay.js index 544c762fca8..9015d9d78c0 100644 --- a/packages/js/onboarding/src/images/cards/applepay.js +++ b/packages/js/onboarding/src/images/cards/applepay.js @@ -3,20 +3,13 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - - +export const ApplePay = () => ( + /* eslint-disable */ + + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/cb.js b/packages/js/onboarding/src/images/cards/cb.js index da48c9a5b13..f08c31ed37d 100644 --- a/packages/js/onboarding/src/images/cards/cb.js +++ b/packages/js/onboarding/src/images/cards/cb.js @@ -3,42 +3,22 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - - +export const CB = () => ( + /* eslint-disable */ + + + + - - - - + + + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/diners.js b/packages/js/onboarding/src/images/cards/diners.js index 18feb6212c3..27a93a63177 100644 --- a/packages/js/onboarding/src/images/cards/diners.js +++ b/packages/js/onboarding/src/images/cards/diners.js @@ -3,7 +3,8 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( +export const Diners = () => ( + /* eslint-disable */ ( fill="white" /> + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/discover.js b/packages/js/onboarding/src/images/cards/discover.js index 4c768e8b9ea..4ae30ba7d5b 100644 --- a/packages/js/onboarding/src/images/cards/discover.js +++ b/packages/js/onboarding/src/images/cards/discover.js @@ -3,1396 +3,1428 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( +export const Discover = () => ( + /* eslint-disable */ - + - + - - + + - - - - - - + + + + + + - - - - - - - - + + + + + + + + - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/giropay.js b/packages/js/onboarding/src/images/cards/giropay.js new file mode 100644 index 00000000000..916c0f89841 --- /dev/null +++ b/packages/js/onboarding/src/images/cards/giropay.js @@ -0,0 +1,27 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export const Giropay = () => ( + /* eslint-disable */ + + + + + + + + + /* eslint-enable */ +); diff --git a/packages/js/onboarding/src/images/cards/googlepay.js b/packages/js/onboarding/src/images/cards/googlepay.js index 5a5aba8d11d..4abdab02cfe 100644 --- a/packages/js/onboarding/src/images/cards/googlepay.js +++ b/packages/js/onboarding/src/images/cards/googlepay.js @@ -3,44 +3,25 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - - - - - - +export const GooglePay = () => ( + /* eslint-disable */ + + + + + + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/components/WCPayBanner/Icons/index.js b/packages/js/onboarding/src/images/cards/index.js similarity index 82% rename from packages/js/onboarding/src/components/WCPayBanner/Icons/index.js rename to packages/js/onboarding/src/images/cards/index.js index b8be1a2aa5c..06a1bf299dd 100644 --- a/packages/js/onboarding/src/components/WCPayBanner/Icons/index.js +++ b/packages/js/onboarding/src/images/cards/index.js @@ -1,12 +1,12 @@ export * from './amex'; export * from './applepay'; export * from './cb'; +export * from './diners'; export * from './discover'; export * from './giropay'; -export * from './gpay'; +export * from './googlepay'; export * from './jcb'; export * from './maestro'; export * from './mastercard'; export * from './unionpay'; export * from './visa'; -export * from './woopay'; diff --git a/packages/js/onboarding/src/images/cards/jcb.js b/packages/js/onboarding/src/images/cards/jcb.js index ee332408bba..ec244a67328 100644 --- a/packages/js/onboarding/src/images/cards/jcb.js +++ b/packages/js/onboarding/src/images/cards/jcb.js @@ -3,40 +3,39 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - - - - +export const JCB = () => ( + /* eslint-disable */ + + + + + + + + + + + + + + + + + + + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/maestro.js b/packages/js/onboarding/src/images/cards/maestro.js index 410b1f065da..d6db50e27f9 100644 --- a/packages/js/onboarding/src/images/cards/maestro.js +++ b/packages/js/onboarding/src/images/cards/maestro.js @@ -3,10 +3,9 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( +export const Maestro = () => ( + /* eslint-disable */ ( fill="#231F20" /> + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/mastercard.js b/packages/js/onboarding/src/images/cards/mastercard.js index ab96b66399e..974c789f429 100644 --- a/packages/js/onboarding/src/images/cards/mastercard.js +++ b/packages/js/onboarding/src/images/cards/mastercard.js @@ -3,38 +3,24 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - +export const MasterCard = () => ( + /* eslint-disable */ + + - + + fill="#EB001B"/> + fill="#F79E1B"/> - + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/unionpay.js b/packages/js/onboarding/src/images/cards/unionpay.js index 0be12014c7b..2c97e57a477 100644 --- a/packages/js/onboarding/src/images/cards/unionpay.js +++ b/packages/js/onboarding/src/images/cards/unionpay.js @@ -3,112 +3,29 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - - - - - - - - - - - - - - - - +export const UnionPay = () => ( + /* eslint-disable */ + + + + + + + + + + + + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/cards/visa.js b/packages/js/onboarding/src/images/cards/visa.js index 9d6f3f7375d..89f93c54bde 100644 --- a/packages/js/onboarding/src/images/cards/visa.js +++ b/packages/js/onboarding/src/images/cards/visa.js @@ -3,34 +3,20 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - - +export const Visa = () => ( + /* eslint-disable */ + + + - - + fill="#1C34C3"/> + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/icons/index.js b/packages/js/onboarding/src/images/icons/index.js new file mode 100644 index 00000000000..ea71641a844 --- /dev/null +++ b/packages/js/onboarding/src/images/icons/index.js @@ -0,0 +1 @@ +export * from './lightbulb'; diff --git a/packages/js/onboarding/src/images/icons/lightbulb.tsx b/packages/js/onboarding/src/images/icons/lightbulb.tsx new file mode 100644 index 00000000000..a9d047c5042 --- /dev/null +++ b/packages/js/onboarding/src/images/icons/lightbulb.tsx @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export const Lightbulb = (): JSX.Element => ( + /* eslint-disable */ + + + + /* eslint-enable */ +); diff --git a/packages/js/onboarding/src/images/payment-methods/affirm.js b/packages/js/onboarding/src/images/payment-methods/affirm.js index f75d6a43eeb..ce93812216f 100644 --- a/packages/js/onboarding/src/images/payment-methods/affirm.js +++ b/packages/js/onboarding/src/images/payment-methods/affirm.js @@ -3,49 +3,37 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( +export const Affirm = () => ( + /* eslint-disable */ - - - - - - - - + + + + + + + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/payment-methods/afterpay.js b/packages/js/onboarding/src/images/payment-methods/afterpay.js index 798f2665199..cfc53c737ee 100644 --- a/packages/js/onboarding/src/images/payment-methods/afterpay.js +++ b/packages/js/onboarding/src/images/payment-methods/afterpay.js @@ -3,26 +3,21 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( +export const Afterpay = () => ( + /* eslint-disable */ - - - - - - - - + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/payment-methods/clearpay.js b/packages/js/onboarding/src/images/payment-methods/clearpay.js index b5bc0c1c5d2..b34916e0da9 100644 --- a/packages/js/onboarding/src/images/payment-methods/clearpay.js +++ b/packages/js/onboarding/src/images/payment-methods/clearpay.js @@ -3,18 +3,13 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - +export const Clearpay = () => ( + /* eslint-disable */ + + + fill="#000"/> + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/payment-methods/ideal.js b/packages/js/onboarding/src/images/payment-methods/ideal.js index 788bc569897..8a6d6e4b55f 100644 --- a/packages/js/onboarding/src/images/payment-methods/ideal.js +++ b/packages/js/onboarding/src/images/payment-methods/ideal.js @@ -3,34 +3,37 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( +export const Ideal = () => ( + /* eslint-disable */ - + - + - + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/payment-methods/index.js b/packages/js/onboarding/src/images/payment-methods/index.js new file mode 100644 index 00000000000..05a0ebb301d --- /dev/null +++ b/packages/js/onboarding/src/images/payment-methods/index.js @@ -0,0 +1,6 @@ +export * from './affirm'; +export * from './afterpay'; +export * from './clearpay'; +export * from './ideal'; +export * from './klarna'; +export * from './woopay'; diff --git a/packages/js/onboarding/src/images/payment-methods/klarna.js b/packages/js/onboarding/src/images/payment-methods/klarna.js index 280765cc4eb..3afa43df577 100644 --- a/packages/js/onboarding/src/images/payment-methods/klarna.js +++ b/packages/js/onboarding/src/images/payment-methods/klarna.js @@ -3,20 +3,13 @@ */ import { createElement } from '@wordpress/element'; -export default () => ( - - - +export const Klarna = () => ( + /* eslint-disable */ + + + + /* eslint-enable */ ); diff --git a/packages/js/onboarding/src/images/payment-methods/woo.js b/packages/js/onboarding/src/images/payment-methods/woo.js deleted file mode 100644 index 89c098b812c..00000000000 --- a/packages/js/onboarding/src/images/payment-methods/woo.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export default () => ( - - - - - - - -); diff --git a/packages/js/onboarding/src/images/payment-methods/woopay.js b/packages/js/onboarding/src/images/payment-methods/woopay.js new file mode 100644 index 00000000000..5b9275503d1 --- /dev/null +++ b/packages/js/onboarding/src/images/payment-methods/woopay.js @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export const WooPay = () => ( + /* eslint-disable */ + + + + + + + + /* eslint-enable */ +); diff --git a/packages/js/onboarding/src/images/wcpay-logo.tsx b/packages/js/onboarding/src/images/wcpay-logo.tsx index 15e42a1e409..5687514e492 100644 --- a/packages/js/onboarding/src/images/wcpay-logo.tsx +++ b/packages/js/onboarding/src/images/wcpay-logo.tsx @@ -3,62 +3,21 @@ */ import { createElement } from '@wordpress/element'; -export default ( { width = 196, height = 41 } ) => ( - - WooPayments +export default () => ( + + - - - - - - - - - ); diff --git a/packages/js/onboarding/src/index.ts b/packages/js/onboarding/src/index.ts index 7aae615f27b..855101894bb 100644 --- a/packages/js/onboarding/src/index.ts +++ b/packages/js/onboarding/src/index.ts @@ -1,22 +1,9 @@ -export * from './components/WCPayCard'; -export * from './components/WCPayBanner'; -export * from './components/WCPayBenefits'; +export * from './components/WCPayConnectCard'; export * from './components/RecommendedRibbon'; export * from './components/SetupRequired'; -export * from './components/WCPayAcceptedMethods'; -export { default as Visa } from './images/cards/visa'; -export { default as MasterCard } from './images/cards/mastercard'; -export { default as Amex } from './images/cards/amex'; -export { default as ApplePay } from './images/cards/applepay'; -export { default as GooglePay } from './images/cards/googlepay'; -export { default as Discover } from './images/cards/discover'; -export { default as Diners } from './images/cards/diners'; -export { default as Klarna } from './images/payment-methods/klarna'; -export { default as Affirm } from './images/payment-methods/affirm'; -export { default as AfterPay } from './images/payment-methods/afterpay'; -export { default as ClearPay } from './images/payment-methods/clearpay'; -export { default as Ideal } from './images/payment-methods/ideal'; -export { default as Woo } from './images/payment-methods/woo'; +export * from './images/cards'; +export * from './images/payment-methods'; +export { WooPay as Woo } from './images/payment-methods/woopay'; export { default as WCPayLogo } from './images/wcpay-logo'; export { WooPaymentGatewaySetup } from './components/WooPaymentGatewaySetup'; export { WooPaymentGatewayConfigure } from './components/WooPaymentGatewayConfigure'; diff --git a/packages/js/onboarding/src/style.scss b/packages/js/onboarding/src/style.scss index 567ef9d1c2a..b610088986f 100644 --- a/packages/js/onboarding/src/style.scss +++ b/packages/js/onboarding/src/style.scss @@ -1,5 +1,3 @@ -@import 'components/WCPayCard/WCPayCard.scss'; -@import 'components/WCPayBanner/WCPayBanner.scss'; -@import 'components/WCPayBenefits/WCPayBenefits.scss'; +@import 'components/WCPayConnectCard/WCPayConnectCard.scss'; @import 'components/RecommendedRibbon/RecommendedRibbon.scss'; @import 'components/Loader/Loader.scss'; diff --git a/plugins/woocommerce-admin/client/payments-welcome/banner.tsx b/plugins/woocommerce-admin/client/payments-welcome/banner.tsx index e4b00250c5b..99dfba8d3f2 100644 --- a/plugins/woocommerce-admin/client/payments-welcome/banner.tsx +++ b/plugins/woocommerce-admin/client/payments-welcome/banner.tsx @@ -1,17 +1,16 @@ /** * External dependencies */ -import { Card, CardBody, Button, CardDivider } from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { useState } from '@wordpress/element'; +import { WCPayConnectCard } from '@woocommerce/onboarding'; /** * Internal dependencies */ import { getAdminSetting } from '~/utils/admin-settings'; import sanitizeHTML from '~/lib/sanitize-html'; -import WooPaymentsLogo from './woopayments.svg'; import ExitSurveyModal from './exit-survey-modal'; -import PaymentMethods from './payment-methods'; import strings from './strings'; interface Props { @@ -29,6 +28,7 @@ const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => { const [ isExitSurveyModalOpen, setExitSurveyModalOpen ] = useState( false ); const isWooPayEligible = getAdminSetting( 'isWooPayEligible' ); + const wccomSettings = getAdminSetting( 'wccomHelper', {} ); const handleNoThanks = () => { setNoThanksClicked( true ); @@ -36,54 +36,54 @@ const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => { }; return ( - - - WooPayments logo -

{ strings.heading( first_name ) }

- - -
- { strings.limitedTimeOffer } -
-

*' - ) } - /> - - -

- { isWooPayEligible - ? strings.TosAndPpWooPay - : strings.TosAndPp } -

-

{ strings.termsAndConditions( tc_url ) }

- - - -

{ strings.paymentOptions }

- - + <> + +
+ { strings.limitedTimeOffer } +
+

*' + ) } + /> + + +

{ strings.TosAndPp }

+

{ strings.termsAndConditions( tc_url ) }

+

+ } + firstName={ first_name } + businessCountry={ wccomSettings?.storeCountry ?? '' } + isWooPayEligible={ isWooPayEligible } + showNotice={ true } + /> { isExitSurveyModalOpen && ( ) } - + ); }; diff --git a/plugins/woocommerce-admin/client/payments-welcome/payment-methods.tsx b/plugins/woocommerce-admin/client/payments-welcome/payment-methods.tsx deleted file mode 100644 index 848ac49fcd5..00000000000 --- a/plugins/woocommerce-admin/client/payments-welcome/payment-methods.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/** - * External dependencies - */ -import { - Visa, - MasterCard, - Amex, - ApplePay, - GooglePay, - CB, - Discover, - Ideal, - Klarna, - Affirm, - AfterPay, - ClearPay, - Woo, -} from '@woocommerce/onboarding'; - -/** - * Internal dependencies - */ -import strings from './strings'; -import { getAdminSetting } from '~/utils/admin-settings'; - -const PaymentMethods: React.FC = () => { - const wccomSettings = getAdminSetting( 'wccomHelper', false ); - return ( -
- - - - - - - - - - - - { wccomSettings && wccomSettings.storeCountry === 'GB' ? ( - - ) : ( - - ) } - { strings.andMore } -
- ); -}; - -export default PaymentMethods; diff --git a/plugins/woocommerce-admin/client/payments-welcome/strings.tsx b/plugins/woocommerce-admin/client/payments-welcome/strings.tsx index 85bf820ad50..74f23e326c9 100644 --- a/plugins/woocommerce-admin/client/payments-welcome/strings.tsx +++ b/plugins/woocommerce-admin/client/payments-welcome/strings.tsx @@ -7,19 +7,10 @@ import { createInterpolateElement } from '@wordpress/element'; export default { noThanks: __( 'No thanks', 'woocommerce' ), - heading: ( firstName?: string ) => - sprintf( - /* translators: %s: first name of the merchant, if it exists. */ - __( - 'Hi%s, run your business and manage your payments all in one place, with no setup costs or monthly fees.', - 'woocommerce' - ), - firstName ? ` ${ firstName }` : '' - ), limitedTimeOffer: __( 'Limited time offer', 'woocommerce' ), TosAndPp: createInterpolateElement( __( - 'By using WooPayments you agree to our Terms of Service and acknowledge that you have read our Privacy Policy. Discount will be applied to payments processed via WooPayments upon completion of installation, setup, and connection. ', + 'The discount will be applied to payments processed via WooPayments upon completion of installation, setup, and connection. ', 'woocommerce' ), { @@ -41,38 +32,6 @@ export default { ), } ), - TosAndPpWooPay: createInterpolateElement( - __( - 'By using WooPayments you agree to our Terms of Service (including WooPay merchant terms) and acknowledge that you have read our Privacy Policy. Discount will be applied to payments processed via WooPayments upon completion of installation, setup, and connection. ', - 'woocommerce' - ), - { - a1: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - ), - a2: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - ), - a3: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - ), - } - ), termsAndConditions: ( url: string ) => createInterpolateElement( __( @@ -90,7 +49,6 @@ export default { 'WooPayments is pre-integrated with all popular payment options', 'woocommerce' ), - andMore: __( '& more', 'woocommerce' ), learnMore: __( 'Learn more', 'woocommerce' ), survey: { title: __( 'No thanks, I don’t want WooPayments', 'woocommerce' ), diff --git a/plugins/woocommerce-admin/client/payments-welcome/style.scss b/plugins/woocommerce-admin/client/payments-welcome/style.scss index d4e2711c99d..f9b143cb4fd 100644 --- a/plugins/woocommerce-admin/client/payments-welcome/style.scss +++ b/plugins/woocommerce-admin/client/payments-welcome/style.scss @@ -10,34 +10,10 @@ margin: 0 0 $gap-large 0; } - h1, - h2 { - font-size: 20px; - font-weight: 400; - line-height: 28px; - color: $gray-900; - } - - &__header { - padding: $gap-larger; - - img { - width: 143px; - } - - @media (min-width: #{ ($break-small) }) { - padding-right: $gap-larger + 217px; - background: url(./incentive.svg) no-repeat; - background-position: right $gap-larger center; - } - } - &__offer { - margin: $gap-large; margin-top: $gap-smallest; padding: $gap-large; border: 1px solid #ae7dd0; - border-radius: 8px; background-color: #faf8ff; &-pill { @@ -57,7 +33,9 @@ } .components-button.is-tertiary { - margin-left: $gap-large; + @media screen and (min-width: $break-small) { + margin-left: $gap-large; + } } p { @@ -67,34 +45,6 @@ } } - &__payments { - padding: $gap-large; - } - - &__payment-methods { - display: grid; - column-gap: $gap-smaller; - row-gap: $gap; - grid-template-columns: repeat(auto-fill, minmax(39px, 1fr)); - - svg { - height: 24px; - width: auto; - outline: 1px solid rgba(0, 0, 0, 0.25); - outline-offset: -1px; - border-radius: 3px; - display: block; - margin: 0 $gap-smaller $gap-smaller 0; - } - span { - color: $gray-700; - font-size: 12px; - line-height: 16px; - white-space: nowrap; - align-self: center; - } - } - &__apms { .components-card__header { padding: $gap-small $gap-large; diff --git a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx index 9aad6161b0c..e7a8421ef9c 100644 --- a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx @@ -4,12 +4,8 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { getAdminLink } from '@woocommerce/settings'; -import { - WCPayBanner, - WCPayBannerBody, - WCPayBannerFooter, -} from '@woocommerce/onboarding'; import { recordEvent } from '@woocommerce/tracks'; +import { WCPayConnectCard } from '@woocommerce/onboarding'; /** * Internal dependencies @@ -29,23 +25,27 @@ const WCPaySettingBanner = () => { ); const isWooPayEligible = getAdminSetting( 'isWooPayEligible' ); + const wccomSettings = getAdminSetting( 'wccomHelper', {} ); + + const firstName = getAdminSetting( 'currentUserData' )?.first_name; + return ( - - + - { __( 'Get started', 'woocommerce' ) } + { __( 'Finish setup', 'woocommerce' ) } } + firstName={ firstName } + businessCountry={ wccomSettings?.storeCountry ?? '' } isWooPayEligible={ isWooPayEligible } /> - - + ); }; diff --git a/plugins/woocommerce-admin/client/payments/test/payment-settings-banner.test.tsx b/plugins/woocommerce-admin/client/payments/test/payment-settings-banner.test.tsx index 2791204fa44..1e59567ab61 100644 --- a/plugins/woocommerce-admin/client/payments/test/payment-settings-banner.test.tsx +++ b/plugins/woocommerce-admin/client/payments/test/payment-settings-banner.test.tsx @@ -21,11 +21,11 @@ const paymentsBannerShouldBe = async ( status: 'hidden' | 'visible' ) => { const { container } = render( ); await waitFor( () => { - container.querySelector( '.woocommerce-recommended-payments-banner' ); + container.querySelector( '.wcpay-payments-settings-banner' ); } ); const banner = expect( - container.querySelector( '.woocommerce-recommended-payments-banner' ) + container.querySelector( '.wcpay-payments-settings-banner' ) ); return status === 'visible' @@ -82,7 +82,7 @@ describe( 'Payment Settings Banner', () => { whenWcPay( { supported: true, activated: false, installed: true } ); const { getByText } = render( ); - fireEvent.click( getByText( 'Get started' ) ); + fireEvent.click( getByText( 'Finish setup' ) ); expect( recordEvent ).toHaveBeenCalledWith( 'settings_payments_banner_connect_click' diff --git a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js index 42c22ae871c..a8550c265e1 100644 --- a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js +++ b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js @@ -1,14 +1,7 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; -import { - WCPayBanner, - WCPayBannerFooter, - WCPayBannerBody, - WCPayBenefits, - WCPayBannerImageCut, -} from '@woocommerce/onboarding'; +import { WCPayConnectCard } from '@woocommerce/onboarding'; import { useDispatch } from '@wordpress/data'; /** @@ -24,51 +17,47 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => { const { id, needsSetup, - installed, enabled: isEnabled, installed: isInstalled, } = paymentGateway; const isWooPayEligible = getAdminSetting( 'isWooPayEligible' ); const { createNotice } = useDispatch( 'core/notices' ); - // When the WC Pay is installed and onSetupCallback is null + // When WCPay is installed and onSetupCallback is null // Overwrite onSetupCallback to redirect to the setup page // when the user clicks on the "Finish setup" button. - // WC Pay doesn't need to be configured in WCA. + // WCPay doesn't need to be configured in WCA. // It should be configured in its onboarding flow. - if ( installed && onSetupCallback === null ) { + if ( isInstalled && onSetupCallback === null ) { onSetupCallback = () => { connectWcpay( createNotice ); }; } + const wccomSettings = getAdminSetting( 'wccomHelper', false ); + + const firstName = getAdminSetting( 'currentUserData' )?.first_name; + return ( -
- - - } - bannerImage={ } - isWooPayEligible={ isWooPayEligible } - /> - - - +
+ + } + firstName={ firstName } + businessCountry={ wccomSettings?.storeCountry ?? '' } + isWooPayEligible={ isWooPayEligible } + showNotice={ true } + />
); }; diff --git a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/test/index.js b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/test/index.js index c5ce5bf8e37..cd445b2a7b8 100644 --- a/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/test/index.js +++ b/plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/test/index.js @@ -125,12 +125,8 @@ describe( 'PaymentGatewaySuggestions', () => { ] ); expect( - container - .querySelector( - '.woocommerce-recommended-payments-banner__footer' - ) - .textContent.includes( 'WooPayments' ) - ).toBe( true ); + container.querySelector( '.woocommerce-task-payment-wcpay' ) + ).toBeInTheDocument(); } ); test( 'should render all payment gateways except WCPay', () => { diff --git a/plugins/woocommerce/changelog/update-46869-new-designs-for-woopayments-surfaces b/plugins/woocommerce/changelog/update-46869-new-designs-for-woopayments-surfaces new file mode 100644 index 00000000000..a4bedcbe184 --- /dev/null +++ b/plugins/woocommerce/changelog/update-46869-new-designs-for-woopayments-surfaces @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Update the WooPayments surfaces to up-to-date designs. diff --git a/plugins/woocommerce/includes/admin/settings/class-wc-settings-payment-gateways.php b/plugins/woocommerce/includes/admin/settings/class-wc-settings-payment-gateways.php index 736db6d7e54..b2275adefd7 100644 --- a/plugins/woocommerce/includes/admin/settings/class-wc-settings-payment-gateways.php +++ b/plugins/woocommerce/includes/admin/settings/class-wc-settings-payment-gateways.php @@ -202,7 +202,7 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { $setup_url = admin_url( 'admin.php?page=wc-settings&tab=checkout§ion=' . strtolower( $gateway->id ) ); } /* Translators: %s Payment gateway name. */ - echo '' . esc_html__( 'Finish set up', 'woocommerce' ) . ''; + echo '' . esc_html__( 'Finish setup', 'woocommerce' ) . ''; } break; case 'status':