From ab3a015850dc5371e4cbebfe68f59a4880e53241 Mon Sep 17 00:00:00 2001 From: RJChow Date: Mon, 4 Apr 2022 15:40:08 +0800 Subject: [PATCH 01/16] add slotfill mount point --- .../admin/settings/class-wc-settings-payment-gateways.php | 7 +++++++ 1 file changed, 7 insertions(+) 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 f3a798954f6..19c2d45bea4 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 @@ -25,6 +25,7 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { $this->id = 'checkout'; // @todo In future versions this may make more sense as 'payment' however to avoid breakage lets leave this alone until we refactor settings APIs in general. $this->label = _x( 'Payments', 'Settings tab label', 'woocommerce' ); + add_action( 'woocommerce_admin_field_payment_gateways_banner', array( $this, 'payment_gateways_banner' ) ); add_action( 'woocommerce_admin_field_payment_gateways', array( $this, 'payment_gateways_setting' ) ); parent::__construct(); } @@ -54,6 +55,7 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { 'type' => 'title', 'id' => 'payment_gateways_options', ), + array('type' => 'payment_gateways_banner'), array( 'type' => 'payment_gateways', ), @@ -105,6 +107,11 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { protected function run_gateway_admin_options( $gateway ) { $gateway->admin_options(); } + public function payment_gateways_banner() { + ?> +
+ Date: Mon, 4 Apr 2022 15:46:21 +0800 Subject: [PATCH 02/16] insert react --- plugins/woocommerce-admin/client/index.js | 5 +++++ .../admin/settings/class-wc-settings-payment-gateways.php | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js index 0e58be01f9f..4a6d514d3eb 100644 --- a/plugins/woocommerce-admin/client/index.js +++ b/plugins/woocommerce-admin/client/index.js @@ -64,12 +64,17 @@ if ( appRoot ) { // Render notices just above the WP content div. const wpBody = document.getElementById( 'wpbody-content' ); + console.log( 'mainform', mainform ); const wrap = wpBody.querySelector( '.wrap.woocommerce' ) || wpBody.querySelector( '.wrap' ); const noticeContainer = document.createElement( 'div' ); + render( +
HOOKED
, + mainform + ) render(
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 19c2d45bea4..e690d453bb3 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 @@ -109,7 +109,7 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { } public function payment_gateways_banner() { ?> -
+
Date: Tue, 5 Apr 2022 12:34:24 +0800 Subject: [PATCH 03/16] design banner --- plugins/woocommerce-admin/client/index.js | 40 ++++++++++++-- .../payments-recommendations-banner.tsx | 54 +++++++++++++++++++ .../payments/payment-recommendations.scss | 2 +- .../class-wc-settings-payment-gateways.php | 13 ++--- 4 files changed, 97 insertions(+), 12 deletions(-) create mode 100644 plugins/woocommerce-admin/client/payments-recommendations-banner.tsx diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js index 4a6d514d3eb..92f88f654e6 100644 --- a/plugins/woocommerce-admin/client/index.js +++ b/plugins/woocommerce-admin/client/index.js @@ -16,6 +16,7 @@ import { getAdminSetting } from '~/utils/admin-settings'; import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout'; import { CustomerEffortScoreTracksContainer } from './customer-effort-score-tracks'; import { EmbeddedBodyLayout } from './embedded-body-layout'; +import { PaymentsRecommendationsBanner } from './payments-recommendations-banner'; // Modify webpack pubilcPath at runtime based on location of WordPress Plugin. // eslint-disable-next-line no-undef,camelcase @@ -26,6 +27,34 @@ const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' ); const settingsGroup = 'wc_admin'; const hydrateUser = getAdminSetting( 'currentUserData' ); +// TODO: move this to another module +const Banner = () => { + // if feature flag is enabled + // show banned + // else show existing h2 description and stuff + const featureFlag = true; + + if ( featureFlag ) { + return (<> + + + ) + } else { + return ( + <> +

Payment Methods

+
+

+ Installed payment methods are listed below and can be + sorted to control their display order on the frontend. +

+
+ + ); + } +}; + + if ( appRoot ) { let HydratedPageLayout = withSettingsHydration( settingsGroup, @@ -64,17 +93,17 @@ if ( appRoot ) { // Render notices just above the WP content div. const wpBody = document.getElementById( 'wpbody-content' ); - console.log( 'mainform', mainform ); + const mainform = document.getElementById( 'wc_payment_gateways_banner_slotfill' ); const wrap = wpBody.querySelector( '.wrap.woocommerce' ) || wpBody.querySelector( '.wrap' ); const noticeContainer = document.createElement( 'div' ); + // always insert the slotfill -> problem because mainform element does not always exist + // note this slotfill is not part of the form + // how do we know which page we are on? + render( Banner(), mainform ); - render( -
HOOKED
, - mainform - ) render(
@@ -104,3 +133,4 @@ if ( ); } )(); } + diff --git a/plugins/woocommerce-admin/client/payments-recommendations-banner.tsx b/plugins/woocommerce-admin/client/payments-recommendations-banner.tsx new file mode 100644 index 00000000000..962e1aafee0 --- /dev/null +++ b/plugins/woocommerce-admin/client/payments-recommendations-banner.tsx @@ -0,0 +1,54 @@ +import { Card, CardHeader, CardFooter, Button } from '@wordpress/components'; +import { Text } from '@woocommerce/experimental'; +import { EllipsisMenu, List, Pill } from '@woocommerce/components'; +import { __ } from '@wordpress/i18n'; + + +export const PaymentsRecommendationsBanner = () => { + return ( + + +
+ + { __( 'Additional ways to get paid', 'woocommerce' ) } + + + { __( + 'We recommend adding one of the following payment extensions to your store. The extension will be installed and activated for you when you click "Get started".', + 'woocommerce' + ) } + +
+
+ ( +
+ +
+ ) } + /> +
+ + + {/* TODO fix font colour and add icons */} + { __( 'Accepted payment methods include:', 'woocommerce' ) } + + + ); +}; diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations.scss b/plugins/woocommerce-admin/client/payments/payment-recommendations.scss index 8a7ce28c9ed..3244c2c9ecd 100644 --- a/plugins/woocommerce-admin/client/payments/payment-recommendations.scss +++ b/plugins/woocommerce-admin/client/payments/payment-recommendations.scss @@ -1,5 +1,5 @@ .woocommerce-recommended-payments-card { - margin: 0 15px 10px 0; + margin: 0 0 10px 0; animation: isLoaded; animation-duration: 250ms; 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 e690d453bb3..09dd7e22723 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 @@ -49,12 +49,13 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { protected function get_settings_for_default_section() { $settings = array( - array( - 'title' => __( 'Payment methods', 'woocommerce' ), - 'desc' => __( 'Installed payment methods are listed below and can be sorted to control their display order on the frontend.', 'woocommerce' ), - 'type' => 'title', - 'id' => 'payment_gateways_options', - ), + // array( + // 'title' => __( 'Payment methods', 'woocommerce' ), + // 'desc' => __( 'Installed payment methods are listed below and can be sorted to control their display order on the frontend.', 'woocommerce' ), + // 'type' => 'title', + // 'id' => 'payment_gateways_options', + // ), + // TODO: write unit test to assert that mount point has been inserted array('type' => 'payment_gateways_banner'), array( 'type' => 'payment_gateways', From 9a95dc028fd8d51af6b6c2d3774cb77fb9de2719 Mon Sep 17 00:00:00 2001 From: RJChow Date: Thu, 7 Apr 2022 00:38:38 +0800 Subject: [PATCH 04/16] implement slotfill --- plugins/woocommerce-admin/client/index.js | 77 +++++---- .../payments-recommendations-banner.tsx | 54 ------ .../client/payments-welcome/index.tsx | 2 +- .../client/payments/banner.js | 156 ++++++++++++++++++ .../payment-recommendations-banner.tsx | 73 ++++++++ .../payments/payment-recommendations.scss | 38 ++++- .../class-wc-settings-payment-gateways.php | 12 +- 7 files changed, 320 insertions(+), 92 deletions(-) delete mode 100644 plugins/woocommerce-admin/client/payments-recommendations-banner.tsx create mode 100644 plugins/woocommerce-admin/client/payments/banner.js create mode 100644 plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js index 92f88f654e6..6b34a981b37 100644 --- a/plugins/woocommerce-admin/client/index.js +++ b/plugins/woocommerce-admin/client/index.js @@ -16,7 +16,10 @@ import { getAdminSetting } from '~/utils/admin-settings'; import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout'; import { CustomerEffortScoreTracksContainer } from './customer-effort-score-tracks'; import { EmbeddedBodyLayout } from './embedded-body-layout'; -import { PaymentsRecommendationsBanner } from './payments-recommendations-banner'; +import { PaymentsRecommendationsBanner } from './payments/payment-recommendations-banner'; + +import { createSlotFill, SlotFillProvider } from '@wordpress/components'; +import { registerPlugin, PluginArea } from '@wordpress/plugins'; // Modify webpack pubilcPath at runtime based on location of WordPress Plugin. // eslint-disable-next-line no-undef,camelcase @@ -27,33 +30,47 @@ const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' ); const settingsGroup = 'wc_admin'; const hydrateUser = getAdminSetting( 'currentUserData' ); -// TODO: move this to another module -const Banner = () => { - // if feature flag is enabled - // show banned - // else show existing h2 description and stuff - const featureFlag = true; +const { Fill, Slot } = createSlotFill( 'banner' ); +// Fill.slot = Slot; - if ( featureFlag ) { - return (<> - - - ) - } else { - return ( - <> -

Payment Methods

-
-

- Installed payment methods are listed below and can be - sorted to control their display order on the frontend. -

-
- - ); - } +const PaymentsBannerFill = () => { + return ( + + + + ); }; +const PaymentsGatewaysOptionsDescroption = () => { + return ( + +

Payment Methods

+
+

+ Installed payment methods are listed below and can be sorted + to control their display order on the frontend. +

+
+ + ); +}; + +registerPlugin( 'banner', { scope: 'my-scope', render: PaymentsBannerFill } ); +registerPlugin( 'banner2', { scope: 'my-scope', render: PaymentsGatewaysOptionsDescroption } ); + +// TODO: move this to another module +const Banner = () => { + return ( + <> + +
+ +
+ + + + ); +}; if ( appRoot ) { let HydratedPageLayout = withSettingsHydration( @@ -94,14 +111,15 @@ if ( appRoot ) { // Render notices just above the WP content div. const wpBody = document.getElementById( 'wpbody-content' ); - const mainform = document.getElementById( 'wc_payment_gateways_banner_slotfill' ); + const mainform = document.getElementById( + 'wc_payment_gateways_banner_slotfill' + ); const wrap = wpBody.querySelector( '.wrap.woocommerce' ) || wpBody.querySelector( '.wrap' ); const noticeContainer = document.createElement( 'div' ); - // always insert the slotfill -> problem because mainform element does not always exist - // note this slotfill is not part of the form - // how do we know which page we are on? + + // TODO: note this slotfill is not part of the form render( Banner(), mainform ); render( @@ -133,4 +151,3 @@ if ( ); } )(); } - diff --git a/plugins/woocommerce-admin/client/payments-recommendations-banner.tsx b/plugins/woocommerce-admin/client/payments-recommendations-banner.tsx deleted file mode 100644 index 962e1aafee0..00000000000 --- a/plugins/woocommerce-admin/client/payments-recommendations-banner.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Card, CardHeader, CardFooter, Button } from '@wordpress/components'; -import { Text } from '@woocommerce/experimental'; -import { EllipsisMenu, List, Pill } from '@woocommerce/components'; -import { __ } from '@wordpress/i18n'; - - -export const PaymentsRecommendationsBanner = () => { - return ( - - -
- - { __( 'Additional ways to get paid', 'woocommerce' ) } - - - { __( - 'We recommend adding one of the following payment extensions to your store. The extension will be installed and activated for you when you click "Get started".', - 'woocommerce' - ) } - -
-
- ( -
- -
- ) } - /> -
- - - {/* TODO fix font colour and add icons */} - { __( 'Accepted payment methods include:', 'woocommerce' ) } - - - ); -}; diff --git a/plugins/woocommerce-admin/client/payments-welcome/index.tsx b/plugins/woocommerce-admin/client/payments-welcome/index.tsx index df9877dc57b..7470896a035 100644 --- a/plugins/woocommerce-admin/client/payments-welcome/index.tsx +++ b/plugins/woocommerce-admin/client/payments-welcome/index.tsx @@ -72,7 +72,7 @@ const LearnMore = () => { ); }; -const PaymentMethods = () => ( +export const PaymentMethods = () => (
diff --git a/plugins/woocommerce-admin/client/payments/banner.js b/plugins/woocommerce-admin/client/payments/banner.js new file mode 100644 index 00000000000..d22078ddd9d --- /dev/null +++ b/plugins/woocommerce-admin/client/payments/banner.js @@ -0,0 +1,156 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx new file mode 100644 index 00000000000..1be58e17761 --- /dev/null +++ b/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx @@ -0,0 +1,73 @@ +import { Card, CardHeader, CardFooter, Button } from '@wordpress/components'; +import { Text } from '@woocommerce/experimental'; +import { EllipsisMenu, List, Pill } from '@woocommerce/components'; +import { __ } from '@wordpress/i18n'; +import Banner from './banner'; +import { PaymentMethods } from '../payments-welcome'; + +/** + * Internal dependencies + */ +import './payment-recommendations.scss'; +import { CardBody } from '@wordpress/components'; + +export const PaymentsRecommendationsBanner = () => { + return ( + + +
+ +
+
+ + { __( + 'Accept Payments and manage your business.', + 'woocommerce' + ) } + + + { __( + 'By using WooCommerce Payments you agree to be bound by our Terms of Service and acknowledge that you have read our Privacy Policy', + 'woocommerce' + ) } + + +
+ + +
+ + { __( + 'Accepted payment methods include:', + 'woocommerce' + ) } + +
+
+ +
+
+ + { __( '& more.', 'woocommerce' ) } + +
+ + + ); +}; diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations.scss b/plugins/woocommerce-admin/client/payments/payment-recommendations.scss index 3244c2c9ecd..43c7363d0b8 100644 --- a/plugins/woocommerce-admin/client/payments/payment-recommendations.scss +++ b/plugins/woocommerce-admin/client/payments/payment-recommendations.scss @@ -1,5 +1,41 @@ +.woocommerce-recommended-payments-banner { + margin: 0 15px 10px 0; + animation: isLoaded; + animation-duration: 250ms; + + .woocommerce-recommended-payments-banner__body { + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 0px; + } + + .woocommerce-recommended-payments-banner__text_container { + width: 40%; + margin-inline: 24px; + + * { + margin-block: 1rem + } + } + + .woocommerce-recommended-payments-banner__image_container { + + } + + .woocommerce-recommended-payments-banner__footer { + display: flex; + align-items: center; + justify-content: center; + } + + .wcpay-connect-account-page-payment-methods > svg { + height: 28px + } +} + .woocommerce-recommended-payments-card { - margin: 0 0 10px 0; + margin: 0 15px 10px 0; animation: isLoaded; animation-duration: 250ms; 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 09dd7e22723..572c030636f 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 @@ -49,12 +49,12 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { protected function get_settings_for_default_section() { $settings = array( - // array( - // 'title' => __( 'Payment methods', 'woocommerce' ), - // 'desc' => __( 'Installed payment methods are listed below and can be sorted to control their display order on the frontend.', 'woocommerce' ), - // 'type' => 'title', - // 'id' => 'payment_gateways_options', - // ), + array( + // 'title' => __( 'Payment methods', 'woocommerce' ), + // 'desc' => __( 'Installed payment methods are listed below and can be sorted to control their display order on the frontend.', 'woocommerce' ), + 'type' => 'title', // this is needed as tag is generated by this element, even if it has no other content + // 'id' => 'payment_gateways_options', + ), // TODO: write unit test to assert that mount point has been inserted array('type' => 'payment_gateways_banner'), array( From aaf5c9ff5aaed71f6ce1eed83f05e765f797d2d3 Mon Sep 17 00:00:00 2001 From: RJChow Date: Tue, 19 Apr 2022 16:02:23 +0800 Subject: [PATCH 05/16] Refactored and added new payment icons --- .../client/payments-welcome/cards/amex.js | 2 +- .../client/payments-welcome/cards/applepay.js | 2 +- .../client/payments-welcome/cards/cb.js | 2 +- .../client/payments-welcome/cards/diners.js | 2 +- .../client/payments-welcome/cards/discover.js | 2 +- .../client/payments-welcome/cards/giropay.js | 47 +++++++++++++++++++ .../client/payments-welcome/cards/gpay.js | 2 +- .../client/payments-welcome/cards/index.js | 13 +++++ .../client/payments-welcome/cards/jcb.js | 2 +- .../client/payments-welcome/cards/maestro.js | 2 +- .../payments-welcome/cards/mastercard.js | 2 +- .../client/payments-welcome/cards/sofort.js | 30 ++++++++++++ .../client/payments-welcome/cards/unionpay.js | 2 +- .../client/payments-welcome/cards/visa.js | 2 +- .../client/payments-welcome/index.tsx | 22 +++++---- .../client/payments/banner.js | 16 +++---- 16 files changed, 121 insertions(+), 29 deletions(-) create mode 100644 plugins/woocommerce-admin/client/payments-welcome/cards/giropay.js create mode 100644 plugins/woocommerce-admin/client/payments-welcome/cards/index.js create mode 100644 plugins/woocommerce-admin/client/payments-welcome/cards/sofort.js diff --git a/plugins/woocommerce-admin/client/payments-welcome/cards/amex.js b/plugins/woocommerce-admin/client/payments-welcome/cards/amex.js index 1ebef0bdda9..82f0b26434d 100644 --- a/plugins/woocommerce-admin/client/payments-welcome/cards/amex.js +++ b/plugins/woocommerce-admin/client/payments-welcome/cards/amex.js @@ -1,4 +1,4 @@ -export default () => ( +export const Amex = () => ( /* eslint-disable */ ( +export const ApplePay = () => ( /* eslint-disable */ ( +export const CB = () => ( /* eslint-disable */ ( +export const DinersClub = () => ( /* eslint-disable */ ( +export const Discover = () => ( /* eslint-disable */ ( + /* eslint-disable */ + + + + + + + + + + + /* eslint-enable */ +); diff --git a/plugins/woocommerce-admin/client/payments-welcome/cards/gpay.js b/plugins/woocommerce-admin/client/payments-welcome/cards/gpay.js index 3497bd0f691..7bd90317ab9 100644 --- a/plugins/woocommerce-admin/client/payments-welcome/cards/gpay.js +++ b/plugins/woocommerce-admin/client/payments-welcome/cards/gpay.js @@ -1,4 +1,4 @@ -export default () => ( +export const GooglePay = () => ( /* eslint-disable */ ( +export const JCB = () => ( /* eslint-disable */ ( +export const Maestro = () => ( /* eslint-disable */ ( +export const MasterCard = () => ( /* eslint-disable */ ( + + + + + + + +); diff --git a/plugins/woocommerce-admin/client/payments-welcome/cards/unionpay.js b/plugins/woocommerce-admin/client/payments-welcome/cards/unionpay.js index 3f364be6948..de3fbc06d5e 100644 --- a/plugins/woocommerce-admin/client/payments-welcome/cards/unionpay.js +++ b/plugins/woocommerce-admin/client/payments-welcome/cards/unionpay.js @@ -1,4 +1,4 @@ -export default () => ( +export const UnionPay = () => ( /* eslint-disable */ ( +export const Visa = () => ( /* eslint-disable */ ( fill="none" xmlns="http://www.w3.org/2000/svg" > - + ( d="M145.879 223.856C146.143 223.856 146.403 223.847 146.658 223.829C146.913 223.806 147.13 223.774 147.308 223.733V222.072C147.139 222.104 146.927 222.129 146.672 222.147C146.417 222.161 146.177 222.168 145.954 222.168C145.444 222.168 144.983 222.106 144.573 221.983C144.168 221.856 143.819 221.664 143.527 221.409C143.24 221.149 143.019 220.826 142.864 220.438C142.709 220.051 142.632 219.595 142.632 219.071V219.064C142.632 218.545 142.707 218.091 142.857 217.704C143.012 217.317 143.233 216.995 143.521 216.74C143.812 216.48 144.159 216.287 144.56 216.159C144.961 216.027 145.41 215.961 145.906 215.961C146.148 215.961 146.392 215.972 146.638 215.995C146.884 216.018 147.098 216.048 147.28 216.084V214.437C147.103 214.386 146.879 214.348 146.61 214.32C146.341 214.293 146.082 214.279 145.831 214.279C145.065 214.279 144.364 214.38 143.726 214.58C143.092 214.781 142.543 215.081 142.078 215.482C141.613 215.883 141.253 216.382 140.998 216.979C140.747 217.576 140.622 218.269 140.622 219.058V219.064C140.622 219.857 140.747 220.555 140.998 221.156C141.253 221.753 141.613 222.252 142.078 222.653C142.548 223.05 143.104 223.351 143.746 223.556C144.389 223.756 145.1 223.856 145.879 223.856ZM139.46 220.425H146.542V219.639H139.46V220.425ZM139.46 218.531H146.542V217.745H139.46V218.531Z" fill="#C3C4C7" /> - + @@ -125,8 +125,8 @@ export default () => ( fill="white" /> From 07a20ce378fca5be22d02510362fc53913feb0c6 Mon Sep 17 00:00:00 2001 From: RJChow Date: Tue, 19 Apr 2022 16:07:07 +0800 Subject: [PATCH 06/16] added conditions for rendering --- plugins/woocommerce-admin/client/index.js | 10 +- .../payment-recommendations-banner.tsx | 119 ++++++++++++++++-- 2 files changed, 116 insertions(+), 13 deletions(-) diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js index 6b34a981b37..eecff1bcb1c 100644 --- a/plugins/woocommerce-admin/client/index.js +++ b/plugins/woocommerce-admin/client/index.js @@ -56,9 +56,6 @@ const PaymentsGatewaysOptionsDescroption = () => { }; registerPlugin( 'banner', { scope: 'my-scope', render: PaymentsBannerFill } ); -registerPlugin( 'banner2', { scope: 'my-scope', render: PaymentsGatewaysOptionsDescroption } ); - -// TODO: move this to another module const Banner = () => { return ( <> @@ -111,16 +108,17 @@ if ( appRoot ) { // Render notices just above the WP content div. const wpBody = document.getElementById( 'wpbody-content' ); - const mainform = document.getElementById( + const isWcAdminSettingsPaymentPage = document.getElementById( 'wc_payment_gateways_banner_slotfill' ); + + isWcAdminSettingsPaymentPage ? render( Banner(), isWcAdminSettingsPaymentPage ) : null; + const wrap = wpBody.querySelector( '.wrap.woocommerce' ) || wpBody.querySelector( '.wrap' ); const noticeContainer = document.createElement( 'div' ); - // TODO: note this slotfill is not part of the form - render( Banner(), mainform ); render(
diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx index 1be58e17761..6b28b5a7df4 100644 --- a/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx @@ -1,17 +1,53 @@ -import { Card, CardHeader, CardFooter, Button } from '@wordpress/components'; +import { Card, CardFooter, Button } from '@wordpress/components'; import { Text } from '@woocommerce/experimental'; -import { EllipsisMenu, List, Pill } from '@woocommerce/components'; import { __ } from '@wordpress/i18n'; import Banner from './banner'; -import { PaymentMethods } from '../payments-welcome'; +import { + Visa, + MasterCard, + Amex, + ApplePay, + Giropay, + GooglePay, + CB, + DinersClub, + Discover, + UnionPay, + JCB, + Sofort, +} from '../payments-welcome/cards'; +import { CardBody } from '@wordpress/components'; +import { + ONBOARDING_STORE_NAME, + PAYMENT_GATEWAYS_STORE_NAME, +} from '@woocommerce/data'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import './payment-recommendations.scss'; -import { CardBody } from '@wordpress/components'; -export const PaymentsRecommendationsBanner = () => { +export const PaymentMethods = () => ( +
+ + + + + + + + + + + + +
+); + +const WcPayBanner = () => { + const WC_PAY_SETUP_URL = + './admin.php?page=wc-settings&tab=checkout§ion=woocommerce_payments'; return ( @@ -45,7 +81,7 @@ export const PaymentsRecommendationsBanner = () => { 'woocommerce' ) } -
@@ -60,7 +96,7 @@ export const PaymentsRecommendationsBanner = () => {
- +
@@ -71,3 +107,72 @@ export const PaymentsRecommendationsBanner = () => { ); }; + +export const PaymentsRecommendationsBanner = () => { + const boop = useSelect( ( select ) => { + return { + installedPaymentGateways: select( + PAYMENT_GATEWAYS_STORE_NAME + ).getPaymentGateways(), + isResolving: select( ONBOARDING_STORE_NAME ).isResolving( + 'getPaymentGatewaySuggestions' + ), + paymentGatewaySuggestions: select( + ONBOARDING_STORE_NAME + ).getPaymentGatewaySuggestions(), + }; + } ); + + const { + installedPaymentGateways, + paymentGatewaySuggestions, + isResolving, + } = boop; + + const supportsWCPayments = + paymentGatewaySuggestions && + paymentGatewaySuggestions.filter( ( paymentGatewaySuggestion ) => { + return ( + paymentGatewaySuggestion.id.indexOf( + 'woocommerce_payments' + ) === 0 + ); + } ).length === 1; + + console.log( boop ); + console.log( 'supports', supportsWCPayments ); + const isWcPayInstalled = installedPaymentGateways.some( ( gateway ) => { + return gateway.id === 'woocommerce_payments'; + } ); + + const isWcPayEnabled = installedPaymentGateways.find( ( gateway ) => { + gateway.id === 'woocommerce_payments' && gateway.enabled === true; + } ); + + const isWcPayBannerExplat = true; + if ( ! isResolving ) { + if ( + supportsWCPayments && + isWcPayInstalled && + ! isWcPayEnabled && + isWcPayBannerExplat + ) { + return ; + } else { + return ( + <> +

Payment Methods

+
+

+ Installed payment methods are listed below and can + be sorted to control their display order on the + frontend. +

+
+ + ); + } + } else { + return null; + } +}; From 60885707f1b3673646ffd54efad3ac2fa9ffd10c Mon Sep 17 00:00:00 2001 From: RJChow Date: Wed, 20 Apr 2022 12:28:31 +0800 Subject: [PATCH 07/16] types and lint --- packages/js/data/src/index.ts | 1 + .../payment-recommendations-banner.tsx | 96 +++++++++---------- 2 files changed, 48 insertions(+), 49 deletions(-) diff --git a/packages/js/data/src/index.ts b/packages/js/data/src/index.ts index d58bf7e7300..2f1844575c8 100644 --- a/packages/js/data/src/index.ts +++ b/packages/js/data/src/index.ts @@ -65,6 +65,7 @@ export { NAVIGATION_STORE_NAME } from './navigation'; export { withNavigationHydration } from './navigation/with-navigation-hydration'; export { PAYMENT_GATEWAYS_STORE_NAME } from './payment-gateways'; +export { PaymentGateway } from './payment-gateways/types'; export { getFilterQuery, diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx index 6b28b5a7df4..ab705c1f630 100644 --- a/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx @@ -1,7 +1,21 @@ -import { Card, CardFooter, Button } from '@wordpress/components'; +/** + * External dependencies + */ +import { Card, CardFooter, CardBody, Button } from '@wordpress/components'; import { Text } from '@woocommerce/experimental'; import { __ } from '@wordpress/i18n'; -import Banner from './banner'; +import { + ONBOARDING_STORE_NAME, + PAYMENT_GATEWAYS_STORE_NAME, + Plugin, + PaymentGateway, + WCDataSelector, +} from '@woocommerce/data'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ import { Visa, MasterCard, @@ -16,16 +30,7 @@ import { JCB, Sofort, } from '../payments-welcome/cards'; -import { CardBody } from '@wordpress/components'; -import { - ONBOARDING_STORE_NAME, - PAYMENT_GATEWAYS_STORE_NAME, -} from '@woocommerce/data'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ +import Banner from './banner'; import './payment-recommendations.scss'; export const PaymentMethods = () => ( @@ -109,7 +114,11 @@ const WcPayBanner = () => { }; export const PaymentsRecommendationsBanner = () => { - const boop = useSelect( ( select ) => { + const { + installedPaymentGateways, + paymentGatewaySuggestions, + isResolving, + } = useSelect( ( select: WCDataSelector ) => { return { installedPaymentGateways: select( PAYMENT_GATEWAYS_STORE_NAME @@ -123,31 +132,32 @@ export const PaymentsRecommendationsBanner = () => { }; } ); - const { - installedPaymentGateways, - paymentGatewaySuggestions, - isResolving, - } = boop; - const supportsWCPayments = paymentGatewaySuggestions && - paymentGatewaySuggestions.filter( ( paymentGatewaySuggestion ) => { + paymentGatewaySuggestions.filter( + ( paymentGatewaySuggestion: Plugin ) => { + return ( + paymentGatewaySuggestion.id.indexOf( + 'woocommerce_payments' + ) === 0 + ); + } + ).length === 1; + + const isWcPayInstalled = installedPaymentGateways.some( + ( gateway: PaymentGateway ) => { + return gateway.id === 'woocommerce_payments'; + } + ); + + const isWcPayEnabled = installedPaymentGateways.find( + ( gateway: PaymentGateway ) => { return ( - paymentGatewaySuggestion.id.indexOf( - 'woocommerce_payments' - ) === 0 + gateway.id === 'woocommerce_payments' && + gateway.enabled === true ); - } ).length === 1; - - console.log( boop ); - console.log( 'supports', supportsWCPayments ); - const isWcPayInstalled = installedPaymentGateways.some( ( gateway ) => { - return gateway.id === 'woocommerce_payments'; - } ); - - const isWcPayEnabled = installedPaymentGateways.find( ( gateway ) => { - gateway.id === 'woocommerce_payments' && gateway.enabled === true; - } ); + } + ); const isWcPayBannerExplat = true; if ( ! isResolving ) { @@ -157,22 +167,10 @@ export const PaymentsRecommendationsBanner = () => { ! isWcPayEnabled && isWcPayBannerExplat ) { + // add tracks event here return ; - } else { - return ( - <> -

Payment Methods

-
-

- Installed payment methods are listed below and can - be sorted to control their display order on the - frontend. -

-
- - ); } - } else { - return null; + // add tracks event here because we want to know when the control is shown } + return null; }; From 73634d63d8076fda6bfe724e767f47773ec6ce19 Mon Sep 17 00:00:00 2001 From: RJChow Date: Wed, 20 Apr 2022 15:29:29 +0800 Subject: [PATCH 08/16] cleanup --- plugins/woocommerce-admin/client/index.js | 54 ++--------- .../client/payments-welcome/cards/giropay.js | 12 +-- .../payments/payment-recommendations.scss | 18 ++-- ...banner.tsx => payment-settings-banner.tsx} | 27 +++--- .../payments-settings-banner-slotfill.js | 37 ++++++++ .../test/payment-settings-banner.test.tsx | 91 +++++++++++++++++++ .../{banner.js => wcpay-banner-image.js} | 0 .../class-wc-settings-payment-gateways.php | 12 +-- 8 files changed, 172 insertions(+), 79 deletions(-) rename plugins/woocommerce-admin/client/payments/{payment-recommendations-banner.tsx => payment-settings-banner.tsx} (86%) create mode 100644 plugins/woocommerce-admin/client/payments/payments-settings-banner-slotfill.js create mode 100644 plugins/woocommerce-admin/client/payments/test/payment-settings-banner.test.tsx rename plugins/woocommerce-admin/client/payments/{banner.js => wcpay-banner-image.js} (100%) diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js index eecff1bcb1c..65401097cb0 100644 --- a/plugins/woocommerce-admin/client/index.js +++ b/plugins/woocommerce-admin/client/index.js @@ -16,10 +16,7 @@ import { getAdminSetting } from '~/utils/admin-settings'; import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout'; import { CustomerEffortScoreTracksContainer } from './customer-effort-score-tracks'; import { EmbeddedBodyLayout } from './embedded-body-layout'; -import { PaymentsRecommendationsBanner } from './payments/payment-recommendations-banner'; - -import { createSlotFill, SlotFillProvider } from '@wordpress/components'; -import { registerPlugin, PluginArea } from '@wordpress/plugins'; +import { WcAdminPaymentsGatewaysBannerSlot } from './payments/payments-settings-banner-slotfill'; // Modify webpack pubilcPath at runtime based on location of WordPress Plugin. // eslint-disable-next-line no-undef,camelcase @@ -30,45 +27,6 @@ const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' ); const settingsGroup = 'wc_admin'; const hydrateUser = getAdminSetting( 'currentUserData' ); -const { Fill, Slot } = createSlotFill( 'banner' ); -// Fill.slot = Slot; - -const PaymentsBannerFill = () => { - return ( - - - - ); -}; - -const PaymentsGatewaysOptionsDescroption = () => { - return ( - -

Payment Methods

-
-

- Installed payment methods are listed below and can be sorted - to control their display order on the frontend. -

-
- - ); -}; - -registerPlugin( 'banner', { scope: 'my-scope', render: PaymentsBannerFill } ); -const Banner = () => { - return ( - <> - -
- -
- - - - ); -}; - if ( appRoot ) { let HydratedPageLayout = withSettingsHydration( settingsGroup, @@ -112,14 +70,18 @@ if ( appRoot ) { 'wc_payment_gateways_banner_slotfill' ); - isWcAdminSettingsPaymentPage ? render( Banner(), isWcAdminSettingsPaymentPage ) : null; - + if ( isWcAdminSettingsPaymentPage ) { + render( + WcAdminPaymentsGatewaysBannerSlot(), + isWcAdminSettingsPaymentPage + ); + } + const wrap = wpBody.querySelector( '.wrap.woocommerce' ) || wpBody.querySelector( '.wrap' ); const noticeContainer = document.createElement( 'div' ); - render(
diff --git a/plugins/woocommerce-admin/client/payments-welcome/cards/giropay.js b/plugins/woocommerce-admin/client/payments-welcome/cards/giropay.js index 355f6af4c40..0aee187ab4d 100644 --- a/plugins/woocommerce-admin/client/payments-welcome/cards/giropay.js +++ b/plugins/woocommerce-admin/client/payments-welcome/cards/giropay.js @@ -16,8 +16,8 @@ export const Giropay = () => ( fill="white" /> @@ -26,14 +26,14 @@ export const Giropay = () => ( fill="#0F3365" /> diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations.scss b/plugins/woocommerce-admin/client/payments/payment-recommendations.scss index 43c7363d0b8..c79033d9f5c 100644 --- a/plugins/woocommerce-admin/client/payments/payment-recommendations.scss +++ b/plugins/woocommerce-admin/client/payments/payment-recommendations.scss @@ -1,5 +1,6 @@ .woocommerce-recommended-payments-banner { margin: 0 15px 10px 0; + min-width: 750px; animation: isLoaded; animation-duration: 250ms; @@ -7,7 +8,7 @@ display: flex; align-items: center; justify-content: center; - padding-bottom: 0px; + padding-bottom: 0; } .woocommerce-recommended-payments-banner__text_container { @@ -15,22 +16,23 @@ margin-inline: 24px; * { - margin-block: 1rem + margin-block: 1rem; } } - .woocommerce-recommended-payments-banner__image_container { - - } - .woocommerce-recommended-payments-banner__footer { display: flex; align-items: center; justify-content: center; } - .wcpay-connect-account-page-payment-methods > svg { - height: 28px + .woocommerce-recommended-payments-banner__footer_icon_container { + display: flex; + align-items: center; + } + + .woocommerce-recommended-payments-banner__footer_icon_container > svg { + height: 28px; } } diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx similarity index 86% rename from plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx rename to plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx index ab705c1f630..0904f5cf6bd 100644 --- a/plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx @@ -12,6 +12,7 @@ import { WCDataSelector, } from '@woocommerce/data'; import { useSelect } from '@wordpress/data'; +import { useExperiment } from '@woocommerce/explat'; /** * Internal dependencies @@ -30,10 +31,10 @@ import { JCB, Sofort, } from '../payments-welcome/cards'; -import Banner from './banner'; +import WCPayBannerImage from './wcpay-banner-image'; import './payment-recommendations.scss'; -export const PaymentMethods = () => ( +export const PaymentMethodsIcons = () => (
@@ -57,7 +58,7 @@ const WcPayBanner = () => {
- +
{
- +
@@ -113,7 +114,7 @@ const WcPayBanner = () => { ); }; -export const PaymentsRecommendationsBanner = () => { +export const PaymentsBannerWrapper = () => { const { installedPaymentGateways, paymentGatewaySuggestions, @@ -150,27 +151,27 @@ export const PaymentsRecommendationsBanner = () => { } ); - const isWcPayEnabled = installedPaymentGateways.find( + const isWcPayDisabled = installedPaymentGateways.find( ( gateway: PaymentGateway ) => { return ( gateway.id === 'woocommerce_payments' && - gateway.enabled === true + gateway.enabled === false ); } ); - const isWcPayBannerExplat = true; - if ( ! isResolving ) { + const [ isLoadingExperiment, experimentAssignment ] = useExperiment( + 'woocommerce_payments_settings_banner_2022_04' + ); + if ( ! isResolving && ! isLoadingExperiment ) { if ( supportsWCPayments && isWcPayInstalled && - ! isWcPayEnabled && - isWcPayBannerExplat + isWcPayDisabled && + experimentAssignment?.variationName === 'treatment' ) { - // add tracks event here return ; } - // add tracks event here because we want to know when the control is shown } return null; }; diff --git a/plugins/woocommerce-admin/client/payments/payments-settings-banner-slotfill.js b/plugins/woocommerce-admin/client/payments/payments-settings-banner-slotfill.js new file mode 100644 index 00000000000..e2cf1ee5c30 --- /dev/null +++ b/plugins/woocommerce-admin/client/payments/payments-settings-banner-slotfill.js @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +import { createSlotFill, SlotFillProvider } from '@wordpress/components'; +import { registerPlugin, PluginArea } from '@wordpress/plugins'; + +/** + * Internal dependencies + */ +import { PaymentsBannerWrapper } from './payment-settings-banner'; + +const { Fill, Slot } = createSlotFill( + '__EXPERIMENTAL__WcAdminPaymentsGatewaysSettingsBanner' +); +const PaymentsBannerFill = () => { + return ( + + + + ); +}; + +export const WcAdminPaymentsGatewaysBannerSlot = () => { + return ( + <> + + + + + + ); +}; + +registerPlugin( 'woocommerce-admin-paymentsgateways-settings-banner', { + scope: 'woocommerce-settings', + render: PaymentsBannerFill, +} ); 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 new file mode 100644 index 00000000000..c8ed7294ebe --- /dev/null +++ b/plugins/woocommerce-admin/client/payments/test/payment-settings-banner.test.tsx @@ -0,0 +1,91 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; +import { useSelect } from '@wordpress/data'; +import { useExperiment } from '@woocommerce/explat'; + +/** + * Internal dependencies + */ +import { PaymentsBannerWrapper } from '../payment-settings-banner'; + +jest.mock( '@wordpress/data', () => ( { + ...jest.requireActual( '@wordpress/data' ), + useSelect: jest.fn(), +} ) ); +jest.mock( '@woocommerce/explat' ); + +describe( 'Payment Settings Banner', () => { + it( 'should render the banner if woocommerce payments is supported but setup not completed', () => { + ( useSelect as jest.Mock ).mockReturnValue( { + installedPaymentGateways: [ + { id: 'woocommerce_payments', enabled: false }, + ], + paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ], + } ); + + ( useExperiment as jest.Mock ).mockImplementation( () => [ + false, + { variationName: 'treatment' }, + ] ); + + const { container } = render( ); + expect( + container.querySelector( + '.woocommerce-recommended-payments-banner' + ) + ).toBeInTheDocument(); + } ); + + it( 'should not render the banner if treatment is control', () => { + ( useSelect as jest.Mock ).mockReturnValue( { + installedPaymentGateways: [ + { id: 'woocommerce_payments', enabled: false }, + ], + paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ], + } ); + + ( useExperiment as jest.Mock ).mockImplementation( () => [ + false, + { variationName: 'control' }, + ] ); + + const { container } = render( ); + expect( + container.querySelector( + '.woocommerce-recommended-payments-banner' + ) + ).not.toBeInTheDocument(); + } ); + + it( 'should not render anything if woocommerce payments is not supported', () => { + ( useSelect as jest.Mock ).mockReturnValue( { + installedPaymentGateways: [], + paymentGatewaySuggestions: [], + } ); + + const { container } = render( ); + expect( + container.querySelector( + '.woocommerce-recommended-payments-banner' + ) + ).not.toBeInTheDocument(); + } ); + + it( 'should not render anything if woocommerce payments is setup', () => { + ( useSelect as jest.Mock ).mockReturnValue( { + installedPaymentGateways: [ + { id: 'woocommerce_payments', enabled: true }, + ], + paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ], + } ); + + const { container } = render( ); + expect( + container.querySelector( + '.woocommerce-recommended-payments-banner' + ) + ).not.toBeInTheDocument(); + } ); +} ); diff --git a/plugins/woocommerce-admin/client/payments/banner.js b/plugins/woocommerce-admin/client/payments/wcpay-banner-image.js similarity index 100% rename from plugins/woocommerce-admin/client/payments/banner.js rename to plugins/woocommerce-admin/client/payments/wcpay-banner-image.js 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 572c030636f..25afc5be84b 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 @@ -50,13 +50,9 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { $settings = array( array( - // 'title' => __( 'Payment methods', 'woocommerce' ), - // 'desc' => __( 'Installed payment methods are listed below and can be sorted to control their display order on the frontend.', 'woocommerce' ), - 'type' => 'title', // this is needed as
tag is generated by this element, even if it has no other content - // 'id' => 'payment_gateways_options', + 'type' => 'title', // this is needed as
tag is generated by this element, even if it has no other content. ), - // TODO: write unit test to assert that mount point has been inserted - array('type' => 'payment_gateways_banner'), + array( 'type' => 'payment_gateways_banner' ), // React mount point for embedded banner slotfill. array( 'type' => 'payment_gateways', ), @@ -108,6 +104,10 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page { protected function run_gateway_admin_options( $gateway ) { $gateway->admin_options(); } + + /** + * Creates the React mount point for the embedded banner. + */ public function payment_gateways_banner() { ?>
From bbb1af478bdd6b20b3f9596820c9b2491b8d0f7f Mon Sep 17 00:00:00 2001 From: RJChow Date: Wed, 20 Apr 2022 15:41:41 +0800 Subject: [PATCH 09/16] changelogs --- packages/js/data/CHANGELOG.md | 1 + .../changelogs/feature-32697_wc_payment_gateways_banner | 6 ++++++ .../woocommerce/changelog/add-wc-payment-gateways-banner | 4 ++++ 3 files changed, 11 insertions(+) create mode 100644 plugins/woocommerce-admin/changelogs/feature-32697_wc_payment_gateways_banner create mode 100644 plugins/woocommerce/changelog/add-wc-payment-gateways-banner diff --git a/packages/js/data/CHANGELOG.md b/packages/js/data/CHANGELOG.md index 1dc2a2798ec..c350fcd32fa 100644 --- a/packages/js/data/CHANGELOG.md +++ b/packages/js/data/CHANGELOG.md @@ -10,6 +10,7 @@ - Add `getTaskListsByIds` selector type - Update `TaskType` & `TaskListType` types - Convert `use-user-preferences.js` to TS. #32695 +- Added PaymentGateway type to exports #32697 ## Breaking change diff --git a/plugins/woocommerce-admin/changelogs/feature-32697_wc_payment_gateways_banner b/plugins/woocommerce-admin/changelogs/feature-32697_wc_payment_gateways_banner new file mode 100644 index 00000000000..7ad0b8cf34d --- /dev/null +++ b/plugins/woocommerce-admin/changelogs/feature-32697_wc_payment_gateways_banner @@ -0,0 +1,6 @@ +Significance: minor +Type: feature + +Added slotfill for payment gateway banner in settings page +Refactored payment methods icons in payments-welcome +Added experiment for showing payment banner in payment settings page #32697 \ No newline at end of file diff --git a/plugins/woocommerce/changelog/add-wc-payment-gateways-banner b/plugins/woocommerce/changelog/add-wc-payment-gateways-banner new file mode 100644 index 00000000000..b80464619b9 --- /dev/null +++ b/plugins/woocommerce/changelog/add-wc-payment-gateways-banner @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Added react mount point in payment settings page for banner slotfill #32697 From 1a7c40316e18a77da0bf76e2d136693e8118bdc1 Mon Sep 17 00:00:00 2001 From: RJChow Date: Thu, 21 Apr 2022 13:14:28 +0800 Subject: [PATCH 10/16] Changed e2e payment settings page detection --- packages/js/admin-e2e-tests/CHANGELOG.md | 2 ++ packages/js/admin-e2e-tests/src/pages/WcSettings.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/js/admin-e2e-tests/CHANGELOG.md b/packages/js/admin-e2e-tests/CHANGELOG.md index 5836c843674..a28e2e3be2e 100644 --- a/packages/js/admin-e2e-tests/CHANGELOG.md +++ b/packages/js/admin-e2e-tests/CHANGELOG.md @@ -6,6 +6,8 @@ - Increase timeout threshold for payment task. #32605 +- Changed page detection to use table header instead of h2 header for payment settings page #32697 + # 1.0.0 - Add returned type annotations and remove unused vars. #8020 diff --git a/packages/js/admin-e2e-tests/src/pages/WcSettings.ts b/packages/js/admin-e2e-tests/src/pages/WcSettings.ts index 0b5f78cf0a7..302e2445862 100644 --- a/packages/js/admin-e2e-tests/src/pages/WcSettings.ts +++ b/packages/js/admin-e2e-tests/src/pages/WcSettings.ts @@ -44,7 +44,7 @@ export class WcSettings extends BasePage { async paymentMethodIsEnabled( method = '' ): Promise< boolean > { await this.navigate( 'checkout' ); - await waitForElementByText( 'h2', 'Payment methods' ); + await waitForElementByText( 'th', 'Method' ); const className = await getAttribute( `tr[data-gateway_id=${ method }] .woocommerce-input-toggle`, 'className' From c796406a40822e8edf1e32d9dd0619b28192c5ef Mon Sep 17 00:00:00 2001 From: RJChow Date: Thu, 21 Apr 2022 13:51:29 +0800 Subject: [PATCH 11/16] fixed phpunit tests --- .../settings/class-wc-settings-payment-gateways-test.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce/tests/php/includes/settings/class-wc-settings-payment-gateways-test.php b/plugins/woocommerce/tests/php/includes/settings/class-wc-settings-payment-gateways-test.php index aceca0bdec6..24bfd6a754e 100644 --- a/plugins/woocommerce/tests/php/includes/settings/class-wc-settings-payment-gateways-test.php +++ b/plugins/woocommerce/tests/php/includes/settings/class-wc-settings-payment-gateways-test.php @@ -71,8 +71,8 @@ class WC_Settings_Payment_Gateways_Test extends WC_Settings_Unit_Test_Case { $settings_ids_and_types = $this->get_ids_and_types( $settings ); $expected = array( - 'payment_gateways_options' => array( 'title', 'sectionend' ), - '' => 'payment_gateways', + 'payment_gateways_options' => 'sectionend', + '' => array( 'title', 'payment_gateways_banner', 'payment_gateways' ), ); $this->assertEquals( $expected, $settings_ids_and_types ); From 6151f4021c7b0beb9b2effcb41fdb6b18350655b Mon Sep 17 00:00:00 2001 From: RJChow Date: Thu, 21 Apr 2022 13:14:28 +0800 Subject: [PATCH 12/16] Revert "Changed e2e payment settings page detection" This reverts commit 1a7c40316e18a77da0bf76e2d136693e8118bdc1. --- packages/js/admin-e2e-tests/CHANGELOG.md | 2 -- .../js/admin-e2e-tests/src/pages/WcSettings.ts | 2 +- .../client/payments/payment-settings-banner.tsx | 15 ++++++++++++++- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/js/admin-e2e-tests/CHANGELOG.md b/packages/js/admin-e2e-tests/CHANGELOG.md index a28e2e3be2e..5836c843674 100644 --- a/packages/js/admin-e2e-tests/CHANGELOG.md +++ b/packages/js/admin-e2e-tests/CHANGELOG.md @@ -6,8 +6,6 @@ - Increase timeout threshold for payment task. #32605 -- Changed page detection to use table header instead of h2 header for payment settings page #32697 - # 1.0.0 - Add returned type annotations and remove unused vars. #8020 diff --git a/packages/js/admin-e2e-tests/src/pages/WcSettings.ts b/packages/js/admin-e2e-tests/src/pages/WcSettings.ts index 302e2445862..0b5f78cf0a7 100644 --- a/packages/js/admin-e2e-tests/src/pages/WcSettings.ts +++ b/packages/js/admin-e2e-tests/src/pages/WcSettings.ts @@ -44,7 +44,7 @@ export class WcSettings extends BasePage { async paymentMethodIsEnabled( method = '' ): Promise< boolean > { await this.navigate( 'checkout' ); - await waitForElementByText( 'th', 'Method' ); + await waitForElementByText( 'h2', 'Payment methods' ); const className = await getAttribute( `tr[data-gateway_id=${ method }] .woocommerce-input-toggle`, 'className' diff --git a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx index 0904f5cf6bd..32b5e2e535b 100644 --- a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx @@ -114,6 +114,18 @@ const WcPayBanner = () => { ); }; +const DefaultPaymentMethodsHeaderText = () => ( + <> +

Payment Methods

+
+

+ Installed payment methods are listed below and can be sorted to + control their display order on the frontend. +

+
+ +); + export const PaymentsBannerWrapper = () => { const { installedPaymentGateways, @@ -172,6 +184,7 @@ export const PaymentsBannerWrapper = () => { ) { return ; } + return ; } - return null; + return ; }; From 2398fdf772956a98d30317d000a9d7250a9b01be Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 26 Apr 2022 10:47:01 +0800 Subject: [PATCH 13/16] Change experiment name to dynamic --- .../client/payments/payment-settings-banner.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx index 32b5e2e535b..1567d8325fe 100644 --- a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx @@ -13,6 +13,7 @@ import { } from '@woocommerce/data'; import { useSelect } from '@wordpress/data'; import { useExperiment } from '@woocommerce/explat'; +import moment from 'moment'; /** * Internal dependencies @@ -172,8 +173,11 @@ export const PaymentsBannerWrapper = () => { } ); + const momentDate = moment().utc(); + const year = momentDate.format( 'YYYY' ); + const month = momentDate.format( 'MM' ); const [ isLoadingExperiment, experimentAssignment ] = useExperiment( - 'woocommerce_payments_settings_banner_2022_04' + `woocommerce_payments_settings_banner_${ year }_${ month }` ); if ( ! isResolving && ! isLoadingExperiment ) { if ( From 3ee2fcaeac2a62e92a40ebe0c17f37b90d0fe422 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 26 Apr 2022 10:55:44 +0800 Subject: [PATCH 14/16] Use getAdminLink to format WC_PAY_SETUP_URL --- .../client/payments/payment-settings-banner.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx index 1567d8325fe..a3fccf2b578 100644 --- a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx @@ -13,6 +13,7 @@ import { } from '@woocommerce/data'; import { useSelect } from '@wordpress/data'; import { useExperiment } from '@woocommerce/explat'; +import { getAdminLink } from '@woocommerce/settings'; import moment from 'moment'; /** @@ -53,8 +54,9 @@ export const PaymentMethodsIcons = () => ( ); const WcPayBanner = () => { - const WC_PAY_SETUP_URL = - './admin.php?page=wc-settings&tab=checkout§ion=woocommerce_payments'; + const WC_PAY_SETUP_URL = getAdminLink( + 'admin.php?page=wc-settings&tab=checkout§ion=woocommerce_payments' + ); return ( From 11f321a334220dd296e999426010702221aaba73 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 26 Apr 2022 11:14:05 +0800 Subject: [PATCH 15/16] Add isWcPaySupported util function for payments --- .../client/payments/payment-recommendations.tsx | 14 ++------------ .../client/payments/payment-settings-banner.tsx | 16 ++-------------- .../woocommerce-admin/client/payments/utils.ts | 12 ++++++++++++ 3 files changed, 16 insertions(+), 26 deletions(-) create mode 100644 plugins/woocommerce-admin/client/payments/utils.ts diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations.tsx b/plugins/woocommerce-admin/client/payments/payment-recommendations.tsx index a80b0ae4e6e..c2e04b04e7c 100644 --- a/plugins/woocommerce-admin/client/payments/payment-recommendations.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-recommendations.tsx @@ -24,6 +24,7 @@ import ExternalIcon from 'gridicons/dist/external'; import './payment-recommendations.scss'; import { createNoticesFromResponse } from '../lib/notices'; import { getPluginSlug } from '~/utils'; +import { isWcPaySupported } from './utils'; const SEE_MORE_LINK = 'https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/?utm_source=payments_recommendations'; @@ -81,23 +82,12 @@ const PaymentRecommendations: React.FC = () => { }, [ isInstalled ] ); - const supportsWCPayments = - paymentGatewaySuggestions && - paymentGatewaySuggestions.filter( - ( paymentGatewaySuggestion: Plugin ) => { - return ( - paymentGatewaySuggestion.id.indexOf( - 'woocommerce_payments' - ) === 0 - ); - } - ).length === 1; const triggeredPageViewRef = useRef( false ); const shouldShowRecommendations = paymentGatewaySuggestions && paymentGatewaySuggestions.length > 0 && - ! supportsWCPayments && + ! isWcPaySupported( paymentGatewaySuggestions ) && ! isDismissed; useEffect( () => { diff --git a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx index a3fccf2b578..442c609ce3d 100644 --- a/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx +++ b/plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx @@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n'; import { ONBOARDING_STORE_NAME, PAYMENT_GATEWAYS_STORE_NAME, - Plugin, PaymentGateway, WCDataSelector, } from '@woocommerce/data'; @@ -35,6 +34,7 @@ import { } from '../payments-welcome/cards'; import WCPayBannerImage from './wcpay-banner-image'; import './payment-recommendations.scss'; +import { isWcPaySupported } from './utils'; export const PaymentMethodsIcons = () => (
@@ -148,18 +148,6 @@ export const PaymentsBannerWrapper = () => { }; } ); - const supportsWCPayments = - paymentGatewaySuggestions && - paymentGatewaySuggestions.filter( - ( paymentGatewaySuggestion: Plugin ) => { - return ( - paymentGatewaySuggestion.id.indexOf( - 'woocommerce_payments' - ) === 0 - ); - } - ).length === 1; - const isWcPayInstalled = installedPaymentGateways.some( ( gateway: PaymentGateway ) => { return gateway.id === 'woocommerce_payments'; @@ -183,7 +171,7 @@ export const PaymentsBannerWrapper = () => { ); if ( ! isResolving && ! isLoadingExperiment ) { if ( - supportsWCPayments && + isWcPaySupported( paymentGatewaySuggestions ) && isWcPayInstalled && isWcPayDisabled && experimentAssignment?.variationName === 'treatment' diff --git a/plugins/woocommerce-admin/client/payments/utils.ts b/plugins/woocommerce-admin/client/payments/utils.ts new file mode 100644 index 00000000000..204015f9efb --- /dev/null +++ b/plugins/woocommerce-admin/client/payments/utils.ts @@ -0,0 +1,12 @@ +/** + * External dependencies + */ +import { Plugin } from '@woocommerce/data'; + +export const isWcPaySupported = ( paymentGatewaySuggestions: Plugin[] ) => + paymentGatewaySuggestions && + paymentGatewaySuggestions.filter( ( paymentGatewaySuggestion: Plugin ) => { + return ( + paymentGatewaySuggestion.id.indexOf( 'woocommerce_payments' ) === 0 + ); + } ).length === 1; From d94769982b8a571197018ba4e5a4d34ca8f700af Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Fri, 29 Apr 2022 09:09:06 +0800 Subject: [PATCH 16/16] Update e2e to use table instead --- packages/js/admin-e2e-tests/src/pages/WcSettings.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/js/admin-e2e-tests/src/pages/WcSettings.ts b/packages/js/admin-e2e-tests/src/pages/WcSettings.ts index 0b5f78cf0a7..c534dc077bd 100644 --- a/packages/js/admin-e2e-tests/src/pages/WcSettings.ts +++ b/packages/js/admin-e2e-tests/src/pages/WcSettings.ts @@ -44,7 +44,7 @@ export class WcSettings extends BasePage { async paymentMethodIsEnabled( method = '' ): Promise< boolean > { await this.navigate( 'checkout' ); - await waitForElementByText( 'h2', 'Payment methods' ); + await waitForElementByText( 'th', 'Method' ); const className = await getAttribute( `tr[data-gateway_id=${ method }] .woocommerce-input-toggle`, 'className' @@ -58,7 +58,7 @@ export class WcSettings extends BasePage { async cleanPaymentMethods(): Promise< void > { await this.navigate( 'checkout' ); - await waitForElementByText( 'h2', 'Payment methods' ); + await waitForElementByText( 'th', 'Method' ); const paymentMethods = await page.$$( 'span.woocommerce-input-toggle' ); for ( const method of paymentMethods ) { if (