From 7bebe192e9d9d7e9c9b7e17ed84b61d99f7d96af Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 13 Apr 2022 15:13:15 +0800 Subject: [PATCH 01/45] Update logic to show only additional category when applicable --- .../fills/PaymentGatewaySuggestions/index.js | 89 +++++++++++++++---- .../payment-gateway-suggestions.scss | 4 + 2 files changed, 77 insertions(+), 16 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index 032b85c327a..78a2c35dbac 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -7,6 +7,7 @@ import { OPTIONS_STORE_NAME, ONBOARDING_STORE_NAME, PAYMENT_GATEWAYS_STORE_NAME, + SETTINGS_STORE_NAME, } from '@woocommerce/data'; import { recordEvent } from '@woocommerce/tracks'; import { useMemo, useCallback, useEffect } from '@wordpress/element'; @@ -24,6 +25,7 @@ import { Setup, Placeholder as SetupPlaceholder } from './components/Setup'; import { Toggle } from './components/Toggle/Toggle'; import { WCPaySuggestion } from './components/WCPay'; import { getPluginSlug } from '~/utils'; +import { getCountryCode } from '~/dashboard/utils'; import './plugins/Bacs'; import './payment-gateway-suggestions.scss'; @@ -40,7 +42,10 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { paymentGatewaySuggestions, installedPaymentGateways, isResolving, + countryCode, } = useSelect( ( select ) => { + const { getSettings } = select( SETTINGS_STORE_NAME ); + const { general: settings = {} } = getSettings( 'general' ); return { getPaymentGateway: select( PAYMENT_GATEWAYS_STORE_NAME ) .getPaymentGateway, @@ -54,6 +59,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { paymentGatewaySuggestions: select( ONBOARDING_STORE_NAME ).getPaymentGatewaySuggestions(), + countryCode: getCountryCode( settings.woocommerce_default_country ), }; }, [] ); @@ -185,6 +191,37 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { return gateway; }, [ isResolving, query, paymentGateways ] ); + const isWCPayOrOtherCategory = useMemo( () => { + for ( const [ , gateway ] of paymentGateways.entries() ) { + if ( ! gateway.installed || gateway.needsSetup ) { + continue; + } + + if ( + gateway.plugins?.length === 1 && + gateway.plugins[ 0 ] === 'woocommerce-payments' + ) { + return true; + } + + if ( + gateway.category_other && + gateway.category_other.indexOf( countryCode ) !== -1 + ) { + return true; + } + } + return false; + }, [ countryCode, paymentGateways ] ); + + const isEligibleWCPay = + Array.from( paymentGateways.values() ).findIndex( ( gateway ) => { + return ( + gateway.plugins?.length === 1 && + gateway.plugins[ 0 ] === 'woocommerce-payments' + ); + } ) !== -1; + const [ wcPayGateway, offlineGateways, additionalGateways ] = useMemo( () => Array.from( paymentGateways.values() ) @@ -213,6 +250,22 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { wcPay.push( gateway ); } else if ( gateway.is_offline ) { offline.push( gateway ); + } else if ( gateway.enabled ) { + // Enabled gateways should be ignored. + } else if ( + isEligibleWCPay && + isWCPayOrOtherCategory + ) { + // If WCPay or "other" gateway is enabled in an WCPay-eligible country, only + // allow to list "additional" gateways or the ones without it defined. + if ( + gateway.category_additional && + gateway.category_additional.indexOf( + countryCode + ) !== -1 + ) { + additional.push( gateway ); + } } else { additional.push( gateway ); } @@ -221,11 +274,14 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { }, [ [], [], [] ] ), - [ paymentGateways ] + [ + countryCode, + isEligibleWCPay, + isWCPayOrOtherCategory, + paymentGateways, + ] ); - const isEligibleWCPay = !! wcPayGateway.length; - const trackSeeMore = () => { recordEvent( 'tasklist_payment_see_more', {} ); }; @@ -254,23 +310,24 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { const additionalSection = !! additionalGateways.length && ( - { __( 'See more', 'woocommerce' ) } - - + ! isWCPayOrOtherCategory && ( + + ) } > ); @@ -288,7 +345,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
{ ! paymentGateways.size && } - { isEligibleWCPay ? ( + { wcPayGateway.length ? ( <> Date: Wed, 13 Apr 2022 15:43:07 +0800 Subject: [PATCH 02/45] Add test --- .../PaymentGatewaySuggestions/test/index.js | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js index c2ca2617ff0..935c6f04c83 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js @@ -31,6 +31,8 @@ const paymentGatewaySuggestions = [ plugins: [ 'woocommerce-gateway-stripe' ], is_visible: true, recommendation_priority: 3, + category_other: [ 'US' ], + category_additional: [], }, { id: 'ppcp-gateway', @@ -41,6 +43,8 @@ const paymentGatewaySuggestions = [ 'http://localhost:8888/wp-content/plugins/woocommerce/assets/images/paypal.png', plugins: [ 'woocommerce-paypal-payments' ], is_visible: true, + category_other: [ 'US' ], + category_additional: [ 'US' ], }, { id: 'cod', @@ -212,6 +216,48 @@ describe( 'PaymentGatewaySuggestions', () => { expect( getByText( 'Finish setup' ) ).toBeInTheDocument(); } ); + + test( 'should show "category_additional" gateways only after WCPay is set up', () => { + const onComplete = jest.fn(); + const query = {}; + useSelect.mockImplementation( () => ( { + isResolving: false, + getPaymentGateway: jest.fn(), + paymentGatewaySuggestions, + installedPaymentGateways: [ + { + id: 'woocommerce_payments', + title: 'WooCommerce Payments', + plugins: [ 'woocommerce-payments' ], + is_visible: true, + needs_setup: false, + }, + ], + countryCode: 'US', + } ) ); + + const { container } = render( + + ); + + const paymentTitleElements = container.querySelectorAll( + '.woocommerce-task-payment__title' + ); + + const paymentTitles = Array.from( paymentTitleElements ).map( + ( e ) => e.textContent + ); + + expect( paymentTitles ).toEqual( [ + 'PayPal Payments', + 'Cash on delivery', + 'Direct bank transfer', + ] ); + } ); + test( 'should record event correctly when finish setup is clicked', () => { const onComplete = jest.fn(); const query = {}; From 9dcd761c2a7429ecf427aac2ba135fe85da09d21 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 13 Apr 2022 15:46:48 +0800 Subject: [PATCH 03/45] Add gateway categories for stripe, paypal, square, klarna payments, eway --- .../DefaultPaymentGateways.php | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php index 4b64d63b5ac..684a00f9fcb 100644 --- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php +++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php @@ -86,10 +86,16 @@ class DefaultPaymentGateways { 'GB', 'US', 'PR', + 'UK', + 'HU', + 'SL', + 'ID', ) ), self::get_rules_for_cbd( false ), ), + 'category_other' => array( 'US', 'CA', 'UK', 'AT', 'BE', 'BG', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AU', 'NZ', 'HK', 'JP', 'SG', 'ID', 'IN' ), + 'category_additional' => array(), 'recommendation_priority' => 3, ), array( @@ -134,10 +140,17 @@ class DefaultPaymentGateways { 'FR', 'IT', 'GB', + 'UK', + 'ES', + 'FI', + 'NO', + 'SE', ) ), self::get_rules_for_cbd( false ), ), + 'category_other' => array(), + 'category_additional' => array( 'UK', 'AT', 'BE', 'CH', 'DK', 'ES', 'FI', 'FR', 'DE', 'GB', 'IT', 'NL', 'NO', 'PL', 'SE' ), ), array( 'id' => 'mollie_wc_gateway_banktransfer', @@ -189,6 +202,8 @@ class DefaultPaymentGateways { ), self::get_rules_for_cbd( false ), ), + 'category_other' => array( 'US', 'CA', 'UK', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'ZA', 'NG', 'GH' ), + 'category_additional' => array( 'US', 'CA', 'UK', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'IN', 'ZA', 'NG', 'GH' ), ), array( 'id' => 'cod', @@ -360,6 +375,8 @@ class DefaultPaymentGateways { self::get_rules_for_countries( array( 'AU', 'NZ' ) ), self::get_rules_for_cbd( false ), ), + 'category_other' => array( 'AU', 'NZ' ), + 'category_additional' => array(), ), array( 'id' => 'square_credit_card', @@ -376,12 +393,14 @@ class DefaultPaymentGateways { self::get_rules_for_cbd( true ), ), array( - self::get_rules_for_countries( array( 'US', 'CA', 'JP', 'GB', 'AU', 'IE', 'FR', 'ES' ) ), + self::get_rules_for_countries( array( 'US', 'CA', 'JP', 'GB', 'AU', 'IE', 'FR', 'ES', 'UK', 'FI' ) ), self::get_rules_for_selling_venues( array( 'brick-mortar', 'brick-mortar-other' ) ), ), ), ), ), + 'category_other' => array( 'US', 'CA', 'JP', 'GB', 'AU', 'IE', 'FR', 'ES', 'UK', 'FI' ), + 'category_additional' => array(), ), ); } From 202f9df078d7e7da07fedbed574e843a595cebea Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 13 Apr 2022 19:12:25 +0800 Subject: [PATCH 04/45] Fix tests --- .../fills/PaymentGatewaySuggestions/index.js | 22 +++++++++++-------- .../PaymentGatewaySuggestions/test/index.js | 22 ++++++++++++------- 2 files changed, 27 insertions(+), 17 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index 78a2c35dbac..c7422657572 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -191,7 +191,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { return gateway; }, [ isResolving, query, paymentGateways ] ); - const isWCPayOrOtherCategory = useMemo( () => { + const isWCPayOrOtherCategoryDoneSetup = useMemo( () => { for ( const [ , gateway ] of paymentGateways.entries() ) { if ( ! gateway.installed || gateway.needsSetup ) { continue; @@ -252,12 +252,12 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { offline.push( gateway ); } else if ( gateway.enabled ) { // Enabled gateways should be ignored. - } else if ( - isEligibleWCPay && - isWCPayOrOtherCategory - ) { + } else if ( ! isEligibleWCPay ) { + // When WCPay-ineligible, just show all gateways. + additional.push( gateway ); + } else if ( isWCPayOrOtherCategoryDoneSetup ) { // If WCPay or "other" gateway is enabled in an WCPay-eligible country, only - // allow to list "additional" gateways or the ones without it defined. + // allow to list "additional" gateways. if ( gateway.category_additional && gateway.category_additional.indexOf( @@ -266,7 +266,11 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { ) { additional.push( gateway ); } - } else { + } else if ( + gateway.category_other && + gateway.category_other.indexOf( countryCode ) !== -1 + ) { + // When nothing is set up and eligible for WCPay, only show "other" gateways. additional.push( gateway ); } @@ -277,7 +281,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { [ countryCode, isEligibleWCPay, - isWCPayOrOtherCategory, + isWCPayOrOtherCategoryDoneSetup, paymentGateways, ] ); @@ -317,7 +321,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { paymentGateways={ additionalGateways } markConfigured={ markConfigured } footerLink={ - ! isWCPayOrOtherCategory && ( + ! isWCPayOrOtherCategoryDoneSetup && ( ); + const EnableButton = () => ( + + ); + if ( ! hasSetup ) { if ( ! isEnabled ) { - return ( - - ); + return ; } return ; diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js index aabd4e12b06..2c4ba03a8b9 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js @@ -27,6 +27,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => { requiredSettings, settingsUrl: manageUrl, is_local_partner: isLocalPartner, + external_link: externalLink, } = paymentGateway; const connectSlot = useSlot( @@ -39,7 +40,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => { Boolean( setupSlot?.fills?.length ); const hasSetup = Boolean( - plugins.length || requiredSettings.length || hasFills + plugins.length || requiredSettings.length || hasFills || externalLink ); const showRecommendedRibbon = isRecommended && needsSetup; @@ -85,6 +86,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => { isRecommended={ isRecommended } isLoading={ loading } markConfigured={ markConfigured } + externalLink={ externalLink } />
From dae3396854168ad3c5859b44b3c2b81e2408f0eb Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 13 Apr 2022 21:40:45 +0800 Subject: [PATCH 09/45] Add affirm, amazon pay, afterpay --- .../DefaultPaymentGateways.php | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php index caf5dc77833..221e0fc06a5 100644 --- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php +++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php @@ -410,6 +410,43 @@ class DefaultPaymentGateways { 'category_other' => array( 'US', 'CA', 'JP', 'GB', 'AU', 'IE', 'FR', 'ES', 'FI' ), 'category_additional' => array(), ), + array( + 'id' => 'afterpay', + 'title' => __( 'Afterpay', 'woocommerce' ), + 'content' => __( 'Afterpay allows customers to receive products immediately and pay for purchases over four installments, always interest-free.', 'woocommerce' ), + 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/afterpay.png', + 'plugins' => array( 'afterpay-gateway-for-woocommerce' ), + 'is_visible' => array( + self::get_rules_for_countries( array( 'US', 'CA' ) ), + ), + 'category_other' => array(), + 'category_additional' => array( 'US', 'CA' ), + ), + array( + 'id' => 'amazon_payments_advanced', + 'title' => __( 'Amazon Pay', 'woocommerce' ), + 'content' => __( 'Enable a familiar, fast checkout for hundreds of millions of active Amazon customers globally.', 'woocommerce' ), + 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/amazonpay.png', + 'plugins' => array( 'woocommerce-gateway-amazon-payments-advanced' ), + 'is_visible' => array( + self::get_rules_for_countries( array( 'US', 'CA' ) ), + ), + 'category_other' => array(), + 'category_additional' => array( 'US', 'CA' ), + ), + array( + 'id' => 'affirm', + 'title' => __( 'Affirm', 'woocommerce' ), + 'content' => __( 'Affirm’s tailored Buy Now Pay Later programs remove price as a barrier, turning browsers into buyers, increasing average order value, and expanding your customer base.', 'woocommerce' ), + 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/affirm.png', + 'plugins' => array(), + 'external_link' => 'https://woocommerce.com/products/woocommerce-gateway-affirm', + 'is_visible' => array( + self::get_rules_for_countries( array( 'US', 'CA' ) ), + ), + 'category_other' => array(), + 'category_additional' => array( 'US', 'CA' ), + ), ); } From bc9ce569b0b610b1e150ca133d8e27a4c6d3d30f Mon Sep 17 00:00:00 2001 From: Joel T Date: Thu, 7 Apr 2022 12:39:47 -0700 Subject: [PATCH 10/45] Adding Products screens to those that will not show tasks reminder bar --- .../client/tasks/reminder-bar/reminder-bar.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx b/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx index 6eb2e071b0b..2e5fe88efb1 100644 --- a/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx +++ b/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx @@ -27,7 +27,7 @@ type ReminderBarProps = { }; type ReminderTextProps = { - remainingCount: number; + remainingCount: number | null; }; const REMINDER_BAR_HIDDEN_OPTION = 'woocommerce_task_list_reminder_bar_hidden'; @@ -125,7 +125,14 @@ export const TasksReminderBar: React.FC< ReminderBarProps > = ( { taskListComplete || reminderBarHidden || completedTasksCount === 0 || - [ 'Home', 'Shipping', 'Tax', 'Payments' ].includes( pageTitle ); + [ + 'Home', + 'Shipping', + 'Tax', + 'Payments', + 'Edit Product', + 'Add New', + ].includes( pageTitle ); useEffect( () => { updateBodyMargin(); From 932571c839e4c090ec02a894ad1f4b817e38762e Mon Sep 17 00:00:00 2001 From: Joel T Date: Thu, 7 Apr 2022 12:43:17 -0700 Subject: [PATCH 11/45] Adding changelog --- .../changelog/fix-32428_reminder_bar_invalid_screens | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/fix-32428_reminder_bar_invalid_screens diff --git a/plugins/woocommerce/changelog/fix-32428_reminder_bar_invalid_screens b/plugins/woocommerce/changelog/fix-32428_reminder_bar_invalid_screens new file mode 100644 index 00000000000..7043ac660e4 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-32428_reminder_bar_invalid_screens @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fixing bug in which tasks reminder bar was displayed on product screens From 0ec373734f0af6388b812b3550a0c1a9d83f621d Mon Sep 17 00:00:00 2001 From: Joel T Date: Wed, 13 Apr 2022 16:24:55 -0700 Subject: [PATCH 12/45] Replacing condition depending on pageTitle due to translation issues --- .../client/tasks/reminder-bar/reminder-bar.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx b/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx index 2e5fe88efb1..ea8ccd4c771 100644 --- a/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx +++ b/plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx @@ -14,6 +14,7 @@ import { getAdminLink } from '@woocommerce/settings'; import { close as closeIcon } from '@wordpress/icons'; import interpolateComponents from '@automattic/interpolate-components'; import { useEffect } from '@wordpress/element'; +import { getQuery } from '@woocommerce/navigation'; /** * Internal dependencies @@ -66,7 +67,6 @@ const ReminderText: React.FC< ReminderTextProps > = ( { remainingCount } ) => { export const TasksReminderBar: React.FC< ReminderBarProps > = ( { taskListId = 'setup_experiment_1', - pageTitle, updateBodyMargin, } ) => { const { updateOptions } = useDispatch( OPTIONS_STORE_NAME ); @@ -119,20 +119,18 @@ export const TasksReminderBar: React.FC< ReminderBarProps > = ( { }; } ); + const isHomescreen = + getQuery().page && getQuery().page === 'wc-admin' && ! getQuery().path; + const isActiveTaskPage = Boolean( getQuery().wc_onboarding_active_task ); + const hideReminderBar = loading || taskListHidden || taskListComplete || reminderBarHidden || completedTasksCount === 0 || - [ - 'Home', - 'Shipping', - 'Tax', - 'Payments', - 'Edit Product', - 'Add New', - ].includes( pageTitle ); + isHomescreen || + isActiveTaskPage; useEffect( () => { updateBodyMargin(); From e7ce043e94feff1bee038ca68e7ad1898da847d8 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 07:58:56 +0800 Subject: [PATCH 13/45] Update gateway countries --- .../DefaultPaymentGateways.php | 82 ++----------------- 1 file changed, 5 insertions(+), 77 deletions(-) diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php index 221e0fc06a5..da84a6c4afb 100644 --- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php +++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php @@ -43,55 +43,11 @@ class DefaultPaymentGateways { 'is_visible' => array( // https://stripe.com/global. self::get_rules_for_countries( - array( - 'AU', - 'AT', - 'BE', - 'BG', - 'BR', - 'CA', - 'CY', - 'CZ', - 'DK', - 'EE', - 'FI', - 'FR', - 'DE', - 'GR', - 'HK', - 'IN', - 'IE', - 'IT', - 'JP', - 'LV', - 'LT', - 'LU', - 'MY', - 'MT', - 'MX', - 'NL', - 'NZ', - 'NO', - 'PL', - 'PT', - 'RO', - 'SG', - 'SK', - 'SI', - 'ES', - 'SE', - 'CH', - 'GB', - 'US', - 'PR', - 'HU', - 'SL', - 'ID', - ) + array( 'AU', 'AT', 'BE', 'BG', 'BR', 'CA', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HK', 'IN', 'IE', 'IT', 'JP', 'LV', 'LT', 'LU', 'MY', 'MT', 'MX', 'NL', 'NZ', 'NO', 'PL', 'PT', 'RO', 'SG', 'SK', 'SI', 'ES', 'SE', 'CH', 'GB', 'US', 'PR', 'HU', 'SL', 'ID', 'MY', 'SI', 'PR' ) ), self::get_rules_for_cbd( false ), ), - 'category_other' => array( 'US', 'CA', 'AT', 'BE', 'BG', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AU', 'NZ', 'HK', 'JP', 'SG', 'ID', 'IN' ), + 'category_other' => array( 'AU', 'AT', 'BE', 'BG', 'BR', 'CA', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HK', 'IN', 'IE', 'IT', 'JP', 'LV', 'LT', 'LU', 'MY', 'MT', 'MX', 'NL', 'NZ', 'NO', 'PL', 'PT', 'RO', 'SG', 'SK', 'SI', 'ES', 'SE', 'CH', 'GB', 'US', 'PR', 'HU', 'SL', 'ID', 'MY', 'SI', 'PR' ), 'category_additional' => array(), 'recommendation_priority' => 3, ), @@ -129,28 +85,12 @@ class DefaultPaymentGateways { 'plugins' => array( 'klarna-payments-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( - array( - 'DK', - 'DE', - 'AT', - 'NL', - 'CH', - 'BE', - 'SP', - 'PL', - 'FR', - 'IT', - 'GB', - 'ES', - 'FI', - 'NO', - 'SE', - ) + array( 'US', 'CA', 'DK', 'DE', 'AT', 'NL', 'CH', 'BE', 'SP', 'PL', 'FR', 'IT', 'GB', 'ES', 'FI', 'NO', 'SE', 'ES', 'FI', 'NO', 'SE' ) ), self::get_rules_for_cbd( false ), ), 'category_other' => array(), - 'category_additional' => array( 'AT', 'BE', 'CH', 'DK', 'ES', 'FI', 'FR', 'DE', 'GB', 'IT', 'NL', 'NO', 'PL', 'SE' ), + 'category_additional' => array( 'US', 'CA', 'DK', 'DE', 'AT', 'NL', 'CH', 'BE', 'SP', 'PL', 'FR', 'IT', 'GB', 'ES', 'FI', 'NO', 'SE', 'ES', 'FI', 'NO', 'SE' ), ), array( 'id' => 'mollie_wc_gateway_banktransfer', @@ -160,19 +100,7 @@ class DefaultPaymentGateways { 'plugins' => array( 'mollie-payments-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( - array( - 'FR', - 'DE', - 'GB', - 'AT', - 'CH', - 'ES', - 'IT', - 'PL', - 'FI', - 'NL', - 'BE', - ) + array( 'FR', 'DE', 'GB', 'AT', 'CH', 'ES', 'IT', 'PL', 'FI', 'NL', 'BE' ) ), ), 'category_other' => array( 'FR', 'DE', 'GB', 'AT', 'CH', 'ES', 'IT', 'PL', 'FI', 'NL', 'BE' ), From be1342420c154fabcd3efa09182fefbc368f5fff Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 08:09:24 +0800 Subject: [PATCH 14/45] Add more timeout threshold for e2e --- packages/js/admin-e2e-tests/src/specs/tasks/payment.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts index 27052d002fc..0434d53e171 100644 --- a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts +++ b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts @@ -63,7 +63,7 @@ const testAdminPaymentSetupTask = () => { iban: '12 3456 7890', swiftCode: 'ABBA', } ); - await waitForTimeout( 1000 ); + await waitForTimeout( 1500 ); expect( await settings.paymentMethodIsEnabled( 'bacs' ) ).toBe( true ); @@ -79,7 +79,7 @@ const testAdminPaymentSetupTask = () => { await paymentsSetup.isDisplayed(); await paymentsSetup.showOtherPaymentMethods(); await paymentsSetup.enableCashOnDelivery(); - await waitForTimeout( 1000 ); + await waitForTimeout( 1500 ); expect( await settings.paymentMethodIsEnabled( 'cod' ) ).toBe( true ); From 197c613f079bffc4322234bf7ae29e97361d7d65 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 08:12:19 +0800 Subject: [PATCH 15/45] Add changelog --- .../changelog/update-32132-payment-logic-in-task-and-settings | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/update-32132-payment-logic-in-task-and-settings diff --git a/plugins/woocommerce/changelog/update-32132-payment-logic-in-task-and-settings b/plugins/woocommerce/changelog/update-32132-payment-logic-in-task-and-settings new file mode 100644 index 00000000000..ba445758a66 --- /dev/null +++ b/plugins/woocommerce/changelog/update-32132-payment-logic-in-task-and-settings @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Update payment gateway logic in payment task From c81d74978168cd1ae1fa33b06efa1bfec7bee16e Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 08:37:53 +0800 Subject: [PATCH 16/45] Fix cases when gateway is disabled but has been set up --- .../fills/PaymentGatewaySuggestions/components/Action.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Action.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Action.js index 9a4c6b3bb31..3b3c4ec66f2 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Action.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Action.js @@ -118,6 +118,10 @@ export const Action = ( { } if ( ! needsSetup ) { + if ( ! isEnabled ) { + return ; + } + return ; } From 39c57c802f8c0fb4eb61cdae2b54d68d844852bf Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 08:38:42 +0800 Subject: [PATCH 17/45] Fix tests --- .../PaymentGatewaySuggestions/components/List/test/list.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/test/list.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/test/list.js index 6bd6e4e07e0..6c7331eec61 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/test/list.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/test/list.js @@ -138,7 +138,7 @@ describe( 'PaymentGatewaySuggestions > List', () => { expect( queryByText( 'Recommended' ) ).not.toBeInTheDocument(); } ); - it( 'should display Manage button if not enabled and does have setup', () => { + it( 'should display Manage button if enabled and does have setup', () => { const props = { ...defaultProps, paymentGateways: [ @@ -180,6 +180,7 @@ describe( 'PaymentGatewaySuggestions > List', () => { ...mockGateway, plugins: [ 'nope' ], needsSetup: false, + enabled: true, }, ], }; From adbc1013123a88dad0ad265e88b3f838908e7c4f Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 08:39:55 +0800 Subject: [PATCH 18/45] Update logic to only show additional gateways when other is installed and wcpay isnt eligible --- .../tasks/fills/PaymentGatewaySuggestions/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index c7422657572..53997144cee 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -214,7 +214,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { return false; }, [ countryCode, paymentGateways ] ); - const isEligibleWCPay = + const isWCPaySupported = Array.from( paymentGateways.values() ).findIndex( ( gateway ) => { return ( gateway.plugins?.length === 1 && @@ -252,9 +252,6 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { offline.push( gateway ); } else if ( gateway.enabled ) { // Enabled gateways should be ignored. - } else if ( ! isEligibleWCPay ) { - // When WCPay-ineligible, just show all gateways. - additional.push( gateway ); } else if ( isWCPayOrOtherCategoryDoneSetup ) { // If WCPay or "other" gateway is enabled in an WCPay-eligible country, only // allow to list "additional" gateways. @@ -266,6 +263,9 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { ) { additional.push( gateway ); } + } else if ( ! isWCPaySupported ) { + // When WCPay-ineligible, just show all gateways. + additional.push( gateway ); } else if ( gateway.category_other && gateway.category_other.indexOf( countryCode ) !== -1 @@ -280,7 +280,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { ), [ countryCode, - isEligibleWCPay, + isWCPaySupported, isWCPayOrOtherCategoryDoneSetup, paymentGateways, ] From 0fb4b5d9f5ecd3d6095cd72db7ea54e980883719 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 09:33:26 +0800 Subject: [PATCH 19/45] Update e2e --- packages/js/admin-e2e-tests/CHANGELOG.md | 2 ++ packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts | 1 + packages/js/admin-e2e-tests/src/specs/tasks/payment.ts | 6 ++++++ 3 files changed, 9 insertions(+) diff --git a/packages/js/admin-e2e-tests/CHANGELOG.md b/packages/js/admin-e2e-tests/CHANGELOG.md index db24c246ffd..463e840c3e8 100644 --- a/packages/js/admin-e2e-tests/CHANGELOG.md +++ b/packages/js/admin-e2e-tests/CHANGELOG.md @@ -2,6 +2,8 @@ - Update test for payment task. #32467 +- Increase timeout threshold for payment task. #32605 + # 1.0.0 - Add returned type annotations and remove unused vars. #8020 diff --git a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts index 1dae7adc683..f2fbe95d01b 100644 --- a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts +++ b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts @@ -32,6 +32,7 @@ export class PaymentsSetup extends BasePage { `${ selector }[aria-expanded=false]` ); await toggleButton?.click(); + await waitForElementByText( 'h2', 'Offline payment methods' ); } async goToPaymentMethodSetup( diff --git a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts index 0434d53e171..ba4b081fe91 100644 --- a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts +++ b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts @@ -54,6 +54,9 @@ const testAdminPaymentSetupTask = () => { it( 'Saving valid bank account transfer details enables the payment method', async () => { await paymentsSetup.showOtherPaymentMethods(); + await takeScreenshotFor( + 'Payment setup task show other payment methods' + ); await paymentsSetup.goToPaymentMethodSetup( 'bacs' ); await bankTransferSetup.saveAccountDetails( { accountNumber: '1234', @@ -78,6 +81,9 @@ const testAdminPaymentSetupTask = () => { await homeScreen.clickOnTaskList( 'Set up payments' ); await paymentsSetup.isDisplayed(); await paymentsSetup.showOtherPaymentMethods(); + await takeScreenshotFor( + 'Payment setup task show other payment methods' + ); await paymentsSetup.enableCashOnDelivery(); await waitForTimeout( 1500 ); expect( await settings.paymentMethodIsEnabled( 'cod' ) ).toBe( From 54ea7c9cbeb924329919076444e3c84eef8e383e Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 09:39:31 +0800 Subject: [PATCH 20/45] Revert previous image attribute to preserve old images and new icons are replace with new attribute --- .../components/List/Item.js | 4 +- .../DefaultPaymentGateways.php | 48 +++++++++++++------ 2 files changed, 36 insertions(+), 16 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js index 2c4ba03a8b9..bb327ace13e 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js @@ -15,7 +15,7 @@ import './List.scss'; export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => { const { - image, + image_72x72: image72x72, content, id, plugins = [], @@ -58,7 +58,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => { className={ classes } > - { + {
{ showRecommendedRibbon && ( diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php index da84a6c4afb..d6ce06fb493 100644 --- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php +++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php @@ -25,7 +25,8 @@ class DefaultPaymentGateways { 'id' => 'payfast', 'title' => __( 'PayFast', 'woocommerce' ), 'content' => __( 'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs. Selecting this extension will configure your store to use South African rands as the selected currency.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payfast.png', + 'image' => WC()->plugin_url() . '/assets/images/payfast.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payfast.png', 'plugins' => array( 'woocommerce-payfast-gateway' ), 'is_visible' => array( self::get_rules_for_countries( array( 'ZA', 'GH', 'NG' ) ), @@ -38,7 +39,8 @@ class DefaultPaymentGateways { 'id' => 'stripe', 'title' => __( ' Stripe', 'woocommerce' ), 'content' => __( 'Accept debit and credit cards in 135+ currencies, methods such as Alipay, and one-touch checkout with Apple Pay.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/stripe.png', + 'image' => WC()->plugin_url() . '/assets/images/stripe.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/stripe.png', 'plugins' => array( 'woocommerce-gateway-stripe' ), 'is_visible' => array( // https://stripe.com/global. @@ -55,7 +57,8 @@ class DefaultPaymentGateways { 'id' => 'paystack', 'title' => __( 'Paystack', 'woocommerce' ), 'content' => __( 'Paystack helps African merchants accept one-time and recurring payments online with a modern, safe, and secure payment gateway.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paystack.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/paystack.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paystack.png', 'plugins' => array( 'woo-paystack' ), 'is_visible' => array( self::get_rules_for_countries( array( 'ZA', 'GH', 'NG' ) ), @@ -68,7 +71,8 @@ class DefaultPaymentGateways { 'id' => 'kco', 'title' => __( 'Klarna Checkout', 'woocommerce' ), 'content' => __( 'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png', + 'image' => WC()->plugin_url() . '/assets/images/klarna-black.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png', 'plugins' => array( 'klarna-checkout-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( array( 'SE', 'FI', 'NO' ) ), @@ -81,7 +85,8 @@ class DefaultPaymentGateways { 'id' => 'klarna_payments', 'title' => __( 'Klarna Payments', 'woocommerce' ), 'content' => __( 'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png', + 'image' => WC()->plugin_url() . '/assets/images/klarna-black.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png', 'plugins' => array( 'klarna-payments-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( @@ -96,7 +101,8 @@ class DefaultPaymentGateways { 'id' => 'mollie_wc_gateway_banktransfer', 'title' => __( 'Mollie', 'woocommerce' ), 'content' => __( 'Effortless payments by Mollie: Offer global and local payment methods, get onboarded in minutes, and supported in your language.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mollie.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/mollie.svg', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mollie.png', 'plugins' => array( 'mollie-payments-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( @@ -110,7 +116,8 @@ class DefaultPaymentGateways { 'id' => 'woo-mercado-pago-custom', 'title' => __( 'Mercado Pago Checkout Pro & Custom', 'woocommerce' ), 'content' => __( 'Accept credit and debit cards, offline (cash or bank transfer) and logged-in payments with money in Mercado Pago. Safe and secure payments with the leading payment processor in LATAM.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mercadopago.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/mercadopago.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mercadopago.png', 'plugins' => array( 'woocommerce-mercadopago' ), 'is_visible' => array( self::get_rules_for_countries( array( 'AR', 'BR', 'CL', 'CO', 'MX', 'PE', 'UY' ) ), @@ -124,7 +131,8 @@ class DefaultPaymentGateways { 'id' => 'ppcp-gateway', 'title' => __( 'PayPal Payments', 'woocommerce' ), 'content' => __( "Safe and secure payments using credit cards or your customer's PayPal account.", 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paypal.png', + 'image' => WC()->plugin_url() . '/assets/images/paypal.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paypal.png', 'plugins' => array( 'woocommerce-paypal-payments' ), 'is_visible' => array( (object) array( @@ -141,7 +149,8 @@ class DefaultPaymentGateways { 'id' => 'cod', 'title' => __( 'Cash on delivery', 'woocommerce' ), 'content' => __( 'Take payments in cash upon delivery.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/cod.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/cod.svg', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/cod.png', 'is_visible' => array( self::get_rules_for_cbd( false ), ), @@ -151,7 +160,8 @@ class DefaultPaymentGateways { 'id' => 'bacs', 'title' => __( 'Direct bank transfer', 'woocommerce' ), 'content' => __( 'Take payments via bank transfer.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/bacs.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/bacs.svg', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/bacs.png', 'is_visible' => array( self::get_rules_for_cbd( false ), ), @@ -165,6 +175,7 @@ class DefaultPaymentGateways { 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', 'plugins' => array( 'woocommerce-payments' ), 'description' => 'With WooCommerce Payments, you can securely accept major cards, Apple Pay, and payments in over 100 currencies. Track cash flow and manage recurring revenue directly from your store’s dashboard - with no setup costs or monthly fees.', 'is_visible' => array( @@ -207,6 +218,7 @@ class DefaultPaymentGateways { 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', 'plugins' => array( 'woocommerce-payments' ), 'description' => 'With WooCommerce Payments, you can securely accept major cards, Apple Pay, and payments in over 100 currencies. Track cash flow and manage recurring revenue directly from your store’s dashboard - with no setup costs or monthly fees.', 'is_visible' => array( @@ -241,6 +253,7 @@ class DefaultPaymentGateways { 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', 'plugins' => array( 'woocommerce-payments' ), 'description' => 'With WooCommerce Payments, you can securely accept major cards, Apple Pay, and payments in over 100 currencies – with no setup costs or monthly fees – and you can now accept in-person payments with the Woo mobile app.', 'is_visible' => array( @@ -271,7 +284,8 @@ class DefaultPaymentGateways { 'id' => 'razorpay', 'title' => __( 'Razorpay', 'woocommerce' ), 'content' => __( 'The official Razorpay extension for WooCommerce allows you to accept credit cards, debit cards, netbanking, wallet, and UPI payments.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/razorpay.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/razorpay.svg', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/razorpay.png', 'plugins' => array( 'woo-razorpay' ), 'is_visible' => array( (object) array( @@ -288,7 +302,8 @@ class DefaultPaymentGateways { 'id' => 'payubiz', 'title' => __( 'PayU for WooCommerce', 'woocommerce' ), 'content' => __( 'Enable PayU’s exclusive plugin for WooCommerce to start accepting payments in 100+ payment methods available in India including credit cards, debit cards, UPI, & more!', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payu.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/payu.svg', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payu.png', 'plugins' => array( 'payu-india' ), 'is_visible' => array( (object) array( @@ -305,7 +320,8 @@ class DefaultPaymentGateways { 'id' => 'eway', 'title' => __( 'Eway', 'woocommerce' ), 'content' => __( 'The Eway extension for WooCommerce allows you to take credit card payments directly on your store without redirecting your customers to a third party site to make payment.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/eway.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/eway.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/eway.png', 'plugins' => array( 'woocommerce-gateway-eway' ), 'is_visible' => array( self::get_rules_for_countries( array( 'AU', 'NZ' ) ), @@ -318,7 +334,8 @@ class DefaultPaymentGateways { 'id' => 'square_credit_card', 'title' => __( 'Square', 'woocommerce' ), 'content' => __( 'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). Sell online and in store and track sales and inventory in one place.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/square.png', + 'image' => WC()->plugin_url() . '/assets/images/square-black.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/square.png', 'plugins' => array( 'woocommerce-square' ), 'is_visible' => array( (object) array( @@ -343,6 +360,7 @@ class DefaultPaymentGateways { 'title' => __( 'Afterpay', 'woocommerce' ), 'content' => __( 'Afterpay allows customers to receive products immediately and pay for purchases over four installments, always interest-free.', 'woocommerce' ), 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/afterpay.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/afterpay.png', 'plugins' => array( 'afterpay-gateway-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( array( 'US', 'CA' ) ), @@ -355,6 +373,7 @@ class DefaultPaymentGateways { 'title' => __( 'Amazon Pay', 'woocommerce' ), 'content' => __( 'Enable a familiar, fast checkout for hundreds of millions of active Amazon customers globally.', 'woocommerce' ), 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/amazonpay.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/amazonpay.png', 'plugins' => array( 'woocommerce-gateway-amazon-payments-advanced' ), 'is_visible' => array( self::get_rules_for_countries( array( 'US', 'CA' ) ), @@ -367,6 +386,7 @@ class DefaultPaymentGateways { 'title' => __( 'Affirm', 'woocommerce' ), 'content' => __( 'Affirm’s tailored Buy Now Pay Later programs remove price as a barrier, turning browsers into buyers, increasing average order value, and expanding your customer base.', 'woocommerce' ), 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/affirm.png', + 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/affirm.png', 'plugins' => array(), 'external_link' => 'https://woocommerce.com/products/woocommerce-gateway-affirm', 'is_visible' => array( From 1a129a235409e4fd1b94a53e37cccaa7e22db714 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 10:52:12 +0800 Subject: [PATCH 21/45] Change recommended ribbon to Pill --- packages/js/components/CHANGELOG.md | 1 + packages/js/components/src/pill/pill.js | 5 +++-- .../components/List/Item.js | 20 +++++++++++++------ .../components/List/List.scss | 9 +++++++++ .../PaymentGatewaySuggestions/test/index.js | 2 +- 5 files changed, 28 insertions(+), 9 deletions(-) diff --git a/packages/js/components/CHANGELOG.md b/packages/js/components/CHANGELOG.md index c0d21596f66..e7782c11e57 100644 --- a/packages/js/components/CHANGELOG.md +++ b/packages/js/components/CHANGELOG.md @@ -3,6 +3,7 @@ - Fix documentation for `TableCard` component - Update dependency `@wordpress/hooks` to ^3.5.0 - Update dependency `@wordpress/icons` to ^8.1.0 +- Add `className` prop for Pill component. #32605 # 10.0.0 - Replace deprecated wp.compose.withState with wp.element.useState. #8338 diff --git a/packages/js/components/src/pill/pill.js b/packages/js/components/src/pill/pill.js index 662bb11fa45..33f91cf9bdf 100644 --- a/packages/js/components/src/pill/pill.js +++ b/packages/js/components/src/pill/pill.js @@ -2,16 +2,17 @@ * External dependencies */ import { createElement } from '@wordpress/element'; +import classnames from 'classnames'; /** * Internal dependencies */ import { Text } from '../experimental'; -export function Pill( { children } ) { +export function Pill( { children, className } ) { return ( { const hasSetup = Boolean( plugins.length || requiredSettings.length || hasFills || externalLink ); - const showRecommendedRibbon = isRecommended && needsSetup; + const showRecommended = isRecommended && needsSetup; const classes = classnames( 'woocommerce-task-payment', @@ -61,11 +63,17 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => { {
- { showRecommendedRibbon && ( - - ) } - { title } + { title } + { showRecommended && ( + + { isLocalPartner + ? __( 'Local Partner', 'woocommerce' ) + : __( 'Recommended', 'woocommerce' ) } + + ) } { isInstalled && needsSetup && !! plugins.length && ( ) } diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss index cb524da6945..da05a93d13e 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss @@ -42,6 +42,15 @@ color: $studio-gray-80; margin-top: 0; margin-bottom: $gap-smaller; + + .woocommerce-pill { + margin-left: 8px; + + &.pill-green { + color: #008a20; + border-color: #008a20; + } + } } .woocommerce-task-payment__content { diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js index 48adc770f71..c1d710c865b 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js @@ -146,7 +146,7 @@ describe( 'PaymentGatewaySuggestions', () => { ); const paymentTitleElements = container.querySelectorAll( - '.woocommerce-task-payment__title' + '.woocommerce-task-payment__title > span:first-child' ); const paymentTitles = Array.from( paymentTitleElements ).map( From 942fa8d5de30c47044524a15665daf23b2291ff6 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 10:54:03 +0800 Subject: [PATCH 22/45] More e2e --- packages/js/admin-e2e-tests/src/specs/tasks/payment.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts index ba4b081fe91..9cbe436167b 100644 --- a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts +++ b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts @@ -57,6 +57,7 @@ const testAdminPaymentSetupTask = () => { await takeScreenshotFor( 'Payment setup task show other payment methods' ); + await waitForTimeout( 500 ); await paymentsSetup.goToPaymentMethodSetup( 'bacs' ); await bankTransferSetup.saveAccountDetails( { accountNumber: '1234', @@ -81,6 +82,7 @@ const testAdminPaymentSetupTask = () => { await homeScreen.clickOnTaskList( 'Set up payments' ); await paymentsSetup.isDisplayed(); await paymentsSetup.showOtherPaymentMethods(); + await waitForTimeout( 500 ); await takeScreenshotFor( 'Payment setup task show other payment methods' ); From bc76636f3f1400731ef2e9eb36e5dcd313e51bed Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 11:42:32 +0800 Subject: [PATCH 23/45] Try fix e2e again --- packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts | 6 ++++-- packages/js/admin-e2e-tests/src/specs/tasks/payment.ts | 9 ++------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts index f2fbe95d01b..ea711a63e85 100644 --- a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts +++ b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts @@ -21,8 +21,10 @@ export class PaymentsSetup extends BasePage { await waitForElementByText( 'h1', 'Set up payments' ); } - async closeHelpModal(): Promise< void > { - await this.clickButtonWithText( 'Got it' ); + async possiblyCloseHelpModal(): Promise< void > { + try { + await this.clickButtonWithText( 'Got it' ); + } catch ( e ) {} } async showOtherPaymentMethods(): Promise< void > { diff --git a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts index 9cbe436167b..8e769e2dec1 100644 --- a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts +++ b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts @@ -48,15 +48,12 @@ const testAdminPaymentSetupTask = () => { it( 'Can visit the payment setup task from the homescreen if the setup wizard has been skipped', async () => { await homeScreen.clickOnTaskList( 'Set up payments' ); - await paymentsSetup.closeHelpModal(); + await paymentsSetup.possiblyCloseHelpModal(); await paymentsSetup.isDisplayed(); } ); it( 'Saving valid bank account transfer details enables the payment method', async () => { await paymentsSetup.showOtherPaymentMethods(); - await takeScreenshotFor( - 'Payment setup task show other payment methods' - ); await waitForTimeout( 500 ); await paymentsSetup.goToPaymentMethodSetup( 'bacs' ); await bankTransferSetup.saveAccountDetails( { @@ -80,12 +77,10 @@ const testAdminPaymentSetupTask = () => { await homeScreen.isDisplayed(); await waitForTimeout( 1000 ); await homeScreen.clickOnTaskList( 'Set up payments' ); + await paymentsSetup.possiblyCloseHelpModal(); await paymentsSetup.isDisplayed(); await paymentsSetup.showOtherPaymentMethods(); await waitForTimeout( 500 ); - await takeScreenshotFor( - 'Payment setup task show other payment methods' - ); await paymentsSetup.enableCashOnDelivery(); await waitForTimeout( 1500 ); expect( await settings.paymentMethodIsEnabled( 'cod' ) ).toBe( From c813c3bc5f8749898df4ab8a9a00b18c776e9b2a Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 14 Apr 2022 16:40:35 +0800 Subject: [PATCH 24/45] Remove "plugin" environment from admin feature plugin --- .../docs/features/feature-flags.md | 7 +++-- .../bin/generate-feature-config.php | 5 ++-- .../client/admin/config/plugin.json | 27 ------------------- 3 files changed, 5 insertions(+), 34 deletions(-) delete mode 100644 plugins/woocommerce/client/admin/config/plugin.json diff --git a/plugins/woocommerce-admin/docs/features/feature-flags.md b/plugins/woocommerce-admin/docs/features/feature-flags.md index 5b1a98cac19..dac1f658f7d 100644 --- a/plugins/woocommerce-admin/docs/features/feature-flags.md +++ b/plugins/woocommerce-admin/docs/features/feature-flags.md @@ -1,14 +1,13 @@ # Feature Flags -Features inside the `woocommerce-admin` repository can be in various states of completeness. In addition to the development copy of `woocommerce-admin`, feature plugin versions are bundled, and code is merged to WooCommerce core. To provide a way for improved control over how these features are released in these different environments, `woocommerce-admin` has a system for feature flags. +Features inside the `woocommerce` repository can be in various states of completeness. To provide a way for improved control over how these features are released in these different environments, `woocommerce` has a system for feature flags. We currently support the following environments: | Environment | Description | |-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| development | Development - All features should be enabled in development. These flags are also used in both JS and PHP tests. Ran using `pnpm start`. | -| plugin | Plugin - A packaged release of the featured plugin, for GitHub WordPress.org. Ran using `pnpm run-script build:release`. | | -| core | Core - assets/files ready and stable enough for core merge. Ran using `pnpm pack`. (@todo update this with publish command). +| development | Development - All features should be enabled in development. These flags are also used in both JS and PHP tests. Ran using `pnpm start`. | | +| core | Core - assets/files ready and stable enough. Ran using `WC_ADMIN_PHASE=core pnpm build` & `pnpm pack`. ## Adding a new flag diff --git a/plugins/woocommerce/bin/generate-feature-config.php b/plugins/woocommerce/bin/generate-feature-config.php index 0ab6248a35c..ffe637c880b 100644 --- a/plugins/woocommerce/bin/generate-feature-config.php +++ b/plugins/woocommerce/bin/generate-feature-config.php @@ -8,14 +8,13 @@ /** * Get phase for feature flags * - development: All features should be enabled in development. - * - plugin: For the standalone feature plugin, for GitHub and WordPress.org. * - core: Stable features for WooCommerce core merge. */ $phase = getenv( 'WC_ADMIN_PHASE' ); -if ( ! in_array( $phase, array( 'development', 'plugin', 'core' ), true ) ) { - $phase = 'plugin'; // Default to plugin when running `pnpm run build`. +if ( ! in_array( $phase, array( 'development', 'core' ), true ) ) { + $phase = 'core'; // Default to core when running `pnpm run build`. } $config_json = file_get_contents( __DIR__ . '/../client/admin/config/' . $phase . '.json' ); $config = json_decode( $config_json ); diff --git a/plugins/woocommerce/client/admin/config/plugin.json b/plugins/woocommerce/client/admin/config/plugin.json deleted file mode 100644 index c531800be95..00000000000 --- a/plugins/woocommerce/client/admin/config/plugin.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "features": { - "activity-panels": true, - "analytics": true, - "coupons": true, - "customer-effort-score-tracks": true, - "homescreen": true, - "marketing": true, - "minified-js": true, - "mobile-app-banner": true, - "navigation": true, - "onboarding": true, - "onboarding-tasks": true, - "remote-inbox-notifications": true, - "remote-free-extensions": true, - "payment-gateway-suggestions": true, - "settings": false, - "shipping-label-banner": true, - "subscriptions": true, - "store-alerts": true, - "transient-notices": true, - "wc-pay-promotion": true, - "wc-pay-welcome-page": true, - "tasklist-setup-experiment-1": false, - "tasklist-setup-experiment-2": false - } -} From e6458fafe093c89574aaf393c7da24917259481c Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 17:08:13 +0800 Subject: [PATCH 25/45] Standardize image path --- .../DefaultPaymentGateways.php | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php index d6ce06fb493..31b7556793e 100644 --- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php +++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php @@ -25,8 +25,8 @@ class DefaultPaymentGateways { 'id' => 'payfast', 'title' => __( 'PayFast', 'woocommerce' ), 'content' => __( 'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs. Selecting this extension will configure your store to use South African rands as the selected currency.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payfast.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payfast.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/payfast.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/payfast.png', 'plugins' => array( 'woocommerce-payfast-gateway' ), 'is_visible' => array( self::get_rules_for_countries( array( 'ZA', 'GH', 'NG' ) ), @@ -39,8 +39,8 @@ class DefaultPaymentGateways { 'id' => 'stripe', 'title' => __( ' Stripe', 'woocommerce' ), 'content' => __( 'Accept debit and credit cards in 135+ currencies, methods such as Alipay, and one-touch checkout with Apple Pay.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/stripe.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/stripe.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/stripe.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/stripe.png', 'plugins' => array( 'woocommerce-gateway-stripe' ), 'is_visible' => array( // https://stripe.com/global. @@ -58,7 +58,7 @@ class DefaultPaymentGateways { 'title' => __( 'Paystack', 'woocommerce' ), 'content' => __( 'Paystack helps African merchants accept one-time and recurring payments online with a modern, safe, and secure payment gateway.', 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/paystack.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paystack.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/paystack.png', 'plugins' => array( 'woo-paystack' ), 'is_visible' => array( self::get_rules_for_countries( array( 'ZA', 'GH', 'NG' ) ), @@ -71,8 +71,8 @@ class DefaultPaymentGateways { 'id' => 'kco', 'title' => __( 'Klarna Checkout', 'woocommerce' ), 'content' => __( 'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/klarna-black.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/klarna-black.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/klarna.png', 'plugins' => array( 'klarna-checkout-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( array( 'SE', 'FI', 'NO' ) ), @@ -85,8 +85,8 @@ class DefaultPaymentGateways { 'id' => 'klarna_payments', 'title' => __( 'Klarna Payments', 'woocommerce' ), 'content' => __( 'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/klarna-black.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/klarna-black.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/klarna.png', 'plugins' => array( 'klarna-payments-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( @@ -102,7 +102,7 @@ class DefaultPaymentGateways { 'title' => __( 'Mollie', 'woocommerce' ), 'content' => __( 'Effortless payments by Mollie: Offer global and local payment methods, get onboarded in minutes, and supported in your language.', 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/mollie.svg', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mollie.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/mollie.png', 'plugins' => array( 'mollie-payments-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( @@ -117,7 +117,7 @@ class DefaultPaymentGateways { 'title' => __( 'Mercado Pago Checkout Pro & Custom', 'woocommerce' ), 'content' => __( 'Accept credit and debit cards, offline (cash or bank transfer) and logged-in payments with money in Mercado Pago. Safe and secure payments with the leading payment processor in LATAM.', 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/mercadopago.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mercadopago.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/mercadopago.png', 'plugins' => array( 'woocommerce-mercadopago' ), 'is_visible' => array( self::get_rules_for_countries( array( 'AR', 'BR', 'CL', 'CO', 'MX', 'PE', 'UY' ) ), @@ -131,8 +131,8 @@ class DefaultPaymentGateways { 'id' => 'ppcp-gateway', 'title' => __( 'PayPal Payments', 'woocommerce' ), 'content' => __( "Safe and secure payments using credit cards or your customer's PayPal account.", 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/paypal.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paypal.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/paypal.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/paypal.png', 'plugins' => array( 'woocommerce-paypal-payments' ), 'is_visible' => array( (object) array( @@ -150,7 +150,7 @@ class DefaultPaymentGateways { 'title' => __( 'Cash on delivery', 'woocommerce' ), 'content' => __( 'Take payments in cash upon delivery.', 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/cod.svg', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/cod.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/cod.png', 'is_visible' => array( self::get_rules_for_cbd( false ), ), @@ -161,7 +161,7 @@ class DefaultPaymentGateways { 'title' => __( 'Direct bank transfer', 'woocommerce' ), 'content' => __( 'Take payments via bank transfer.', 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/bacs.svg', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/bacs.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/bacs.png', 'is_visible' => array( self::get_rules_for_cbd( false ), ), @@ -175,7 +175,7 @@ class DefaultPaymentGateways { 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', - 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', 'plugins' => array( 'woocommerce-payments' ), 'description' => 'With WooCommerce Payments, you can securely accept major cards, Apple Pay, and payments in over 100 currencies. Track cash flow and manage recurring revenue directly from your store’s dashboard - with no setup costs or monthly fees.', 'is_visible' => array( @@ -218,7 +218,7 @@ class DefaultPaymentGateways { 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', - 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', 'plugins' => array( 'woocommerce-payments' ), 'description' => 'With WooCommerce Payments, you can securely accept major cards, Apple Pay, and payments in over 100 currencies. Track cash flow and manage recurring revenue directly from your store’s dashboard - with no setup costs or monthly fees.', 'is_visible' => array( @@ -253,7 +253,7 @@ class DefaultPaymentGateways { 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', - 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/wcpay.svg', 'plugins' => array( 'woocommerce-payments' ), 'description' => 'With WooCommerce Payments, you can securely accept major cards, Apple Pay, and payments in over 100 currencies – with no setup costs or monthly fees – and you can now accept in-person payments with the Woo mobile app.', 'is_visible' => array( @@ -285,7 +285,7 @@ class DefaultPaymentGateways { 'title' => __( 'Razorpay', 'woocommerce' ), 'content' => __( 'The official Razorpay extension for WooCommerce allows you to accept credit cards, debit cards, netbanking, wallet, and UPI payments.', 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/razorpay.svg', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/razorpay.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/razorpay.png', 'plugins' => array( 'woo-razorpay' ), 'is_visible' => array( (object) array( @@ -303,7 +303,7 @@ class DefaultPaymentGateways { 'title' => __( 'PayU for WooCommerce', 'woocommerce' ), 'content' => __( 'Enable PayU’s exclusive plugin for WooCommerce to start accepting payments in 100+ payment methods available in India including credit cards, debit cards, UPI, & more!', 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/payu.svg', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payu.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/payu.png', 'plugins' => array( 'payu-india' ), 'is_visible' => array( (object) array( @@ -321,7 +321,7 @@ class DefaultPaymentGateways { 'title' => __( 'Eway', 'woocommerce' ), 'content' => __( 'The Eway extension for WooCommerce allows you to take credit card payments directly on your store without redirecting your customers to a third party site to make payment.', 'woocommerce' ), 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/eway.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/eway.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/eway.png', 'plugins' => array( 'woocommerce-gateway-eway' ), 'is_visible' => array( self::get_rules_for_countries( array( 'AU', 'NZ' ) ), @@ -334,8 +334,8 @@ class DefaultPaymentGateways { 'id' => 'square_credit_card', 'title' => __( 'Square', 'woocommerce' ), 'content' => __( 'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). Sell online and in store and track sales and inventory in one place.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/square-black.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/square.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/square-black.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/square.png', 'plugins' => array( 'woocommerce-square' ), 'is_visible' => array( (object) array( @@ -359,8 +359,8 @@ class DefaultPaymentGateways { 'id' => 'afterpay', 'title' => __( 'Afterpay', 'woocommerce' ), 'content' => __( 'Afterpay allows customers to receive products immediately and pay for purchases over four installments, always interest-free.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/afterpay.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/afterpay.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/afterpay.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/afterpay.png', 'plugins' => array( 'afterpay-gateway-for-woocommerce' ), 'is_visible' => array( self::get_rules_for_countries( array( 'US', 'CA' ) ), @@ -372,8 +372,8 @@ class DefaultPaymentGateways { 'id' => 'amazon_payments_advanced', 'title' => __( 'Amazon Pay', 'woocommerce' ), 'content' => __( 'Enable a familiar, fast checkout for hundreds of millions of active Amazon customers globally.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/amazonpay.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/amazonpay.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/amazonpay.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/amazonpay.png', 'plugins' => array( 'woocommerce-gateway-amazon-payments-advanced' ), 'is_visible' => array( self::get_rules_for_countries( array( 'US', 'CA' ) ), @@ -385,8 +385,8 @@ class DefaultPaymentGateways { 'id' => 'affirm', 'title' => __( 'Affirm', 'woocommerce' ), 'content' => __( 'Affirm’s tailored Buy Now Pay Later programs remove price as a barrier, turning browsers into buyers, increasing average order value, and expanding your customer base.', 'woocommerce' ), - 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/affirm.png', - 'image_72x72' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/affirm.png', + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/affirm.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/affirm.png', 'plugins' => array(), 'external_link' => 'https://woocommerce.com/products/woocommerce-gateway-affirm', 'is_visible' => array( From 3668ea36c5ef73b8282bd28cbab98c8c3a83915d Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 17:09:10 +0800 Subject: [PATCH 26/45] Small refactor to consolidate logic --- .../fills/PaymentGatewaySuggestions/index.js | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index 53997144cee..fdadacde358 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -35,6 +35,18 @@ const SEE_MORE_LINK = const comparePaymentGatewaysByPriority = ( a, b ) => a.recommendation_priority - b.recommendation_priority; +const isGatewayWCPay = ( gateway ) => + gateway.plugins?.length === 1 && + gateway.plugins[ 0 ] === 'woocommerce-payments'; + +const isGatewayOtherCategory = ( gateway, countryCode ) => + gateway.category_other && + gateway.category_other.indexOf( countryCode ) !== -1; + +const isGatewayAdditionalCategory = ( gateway, countryCode ) => + gateway.category_additional && + gateway.category_additional.indexOf( countryCode ) !== -1; + export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { const { updatePaymentGateway } = useDispatch( PAYMENT_GATEWAYS_STORE_NAME ); const { @@ -197,17 +209,11 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { continue; } - if ( - gateway.plugins?.length === 1 && - gateway.plugins[ 0 ] === 'woocommerce-payments' - ) { + if ( isGatewayWCPay( gateway ) ) { return true; } - if ( - gateway.category_other && - gateway.category_other.indexOf( countryCode ) !== -1 - ) { + if ( isGatewayOtherCategory( gateway, countryCode ) ) { return true; } } @@ -215,12 +221,8 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { }, [ countryCode, paymentGateways ] ); const isWCPaySupported = - Array.from( paymentGateways.values() ).findIndex( ( gateway ) => { - return ( - gateway.plugins?.length === 1 && - gateway.plugins[ 0 ] === 'woocommerce-payments' - ); - } ) !== -1; + Array.from( paymentGateways.values() ).findIndex( isGatewayWCPay ) !== + -1; const [ wcPayGateway, offlineGateways, additionalGateways ] = useMemo( () => @@ -243,8 +245,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { // WCPay is handled separately when not installed and configured if ( - gateway.plugins?.length === 1 && - gateway.plugins[ 0 ] === 'woocommerce-payments' && + isGatewayWCPay( gateway ) && ! ( gateway.installed && ! gateway.needsSetup ) ) { wcPay.push( gateway ); @@ -256,10 +257,10 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { // If WCPay or "other" gateway is enabled in an WCPay-eligible country, only // allow to list "additional" gateways. if ( - gateway.category_additional && - gateway.category_additional.indexOf( + isGatewayAdditionalCategory( + gateway, countryCode - ) !== -1 + ) ) { additional.push( gateway ); } @@ -267,8 +268,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { // When WCPay-ineligible, just show all gateways. additional.push( gateway ); } else if ( - gateway.category_other && - gateway.category_other.indexOf( countryCode ) !== -1 + isGatewayOtherCategory( gateway, countryCode ) ) { // When nothing is set up and eligible for WCPay, only show "other" gateways. additional.push( gateway ); From 30a2fc18d611151cb4c441814473f71185ef1010 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 14 Apr 2022 17:13:23 +0800 Subject: [PATCH 27/45] Pass WC_ADMIN_PHASE=core to build commands --- plugins/woocommerce-admin/package.json | 2 +- plugins/woocommerce/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index 6be60f4ffc8..8ecb2e9cb57 100644 --- a/plugins/woocommerce-admin/package.json +++ b/plugins/woocommerce-admin/package.json @@ -11,7 +11,7 @@ "scripts": { "analyze": "cross-env NODE_ENV=production ANALYZE=true webpack", "prebuild": "pnpm run install-if-deps-outdated", - "build": "pnpm run build:feature-config && cross-env NODE_ENV=production webpack", + "build": "pnpm run build:feature-config && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack", "build-storybook": "build-storybook -c ./storybook/.storybook", "build:feature-config": "php ../woocommerce/bin/generate-feature-config.php", "build:packages": "cross-env NODE_ENV=production pnpm run:packages -- build", diff --git a/plugins/woocommerce/package.json b/plugins/woocommerce/package.json index cec666d55a8..ac076b7e508 100644 --- a/plugins/woocommerce/package.json +++ b/plugins/woocommerce/package.json @@ -15,7 +15,7 @@ "preinstall": "npx only-allow pnpm", "build": "./bin/build-zip.sh", "build:feature-config": "php bin/generate-feature-config.php", - "build:core": "pnpm run build:feature-config && pnpm nx build woocommerce-admin && pnpm nx build woocommerce-legacy-assets && pnpm run makepot", + "build:core": "WC_ADMIN_PHASE=core pnpm run build:feature-config && pnpm nx build woocommerce-admin && pnpm nx build woocommerce-legacy-assets && pnpm run makepot", "build:zip": "pnpm run build", "lint:js": "eslint assets/js --ext=js", "docker:down": "pnpx wc-e2e docker:down", From b936e3243f1297dc5acc06f05395b5b8a8874976 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 14 Apr 2022 17:15:12 +0800 Subject: [PATCH 28/45] Update feature-flags.md --- plugins/woocommerce-admin/docs/features/feature-flags.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/docs/features/feature-flags.md b/plugins/woocommerce-admin/docs/features/feature-flags.md index dac1f658f7d..199e9afc090 100644 --- a/plugins/woocommerce-admin/docs/features/feature-flags.md +++ b/plugins/woocommerce-admin/docs/features/feature-flags.md @@ -7,7 +7,7 @@ We currently support the following environments: | Environment | Description | |-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | development | Development - All features should be enabled in development. These flags are also used in both JS and PHP tests. Ran using `pnpm start`. | | -| core | Core - assets/files ready and stable enough. Ran using `WC_ADMIN_PHASE=core pnpm build` & `pnpm pack`. +| core | Core - assets/files ready and stable enough. Ran using `pnpm build` & `pnpm pack`. ## Adding a new flag From 075be718e99295c0460ce2b2b7ab1952c1740c7d Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 14 Apr 2022 17:23:50 +0800 Subject: [PATCH 29/45] Add changelog --- plugins/woocommerce/changelog/remove-admin-feature-plugin-env | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/remove-admin-feature-plugin-env diff --git a/plugins/woocommerce/changelog/remove-admin-feature-plugin-env b/plugins/woocommerce/changelog/remove-admin-feature-plugin-env new file mode 100644 index 00000000000..53ced9ee0a1 --- /dev/null +++ b/plugins/woocommerce/changelog/remove-admin-feature-plugin-env @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Pass `WC_ADMIN_PHASE=core` to build commands & remove "plugin" env From 5a74e9cba6d673ee9d4f973fde10a0b66bd0830d Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 14 Apr 2022 17:25:29 +0800 Subject: [PATCH 30/45] Add WC_ADMIN_PHASE=core to build:feature-config --- plugins/woocommerce-admin/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index 8ecb2e9cb57..0cc7f181a3d 100644 --- a/plugins/woocommerce-admin/package.json +++ b/plugins/woocommerce-admin/package.json @@ -11,7 +11,7 @@ "scripts": { "analyze": "cross-env NODE_ENV=production ANALYZE=true webpack", "prebuild": "pnpm run install-if-deps-outdated", - "build": "pnpm run build:feature-config && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack", + "build": "WC_ADMIN_PHASE=core pnpm run build:feature-config && cross-env NODE_ENV=production WC_ADMIN_PHASE=core webpack", "build-storybook": "build-storybook -c ./storybook/.storybook", "build:feature-config": "php ../woocommerce/bin/generate-feature-config.php", "build:packages": "cross-env NODE_ENV=production pnpm run:packages -- build", From 133e40bf571f97efa6431aa5c705362c9275a803 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 14 Apr 2022 18:02:03 +0800 Subject: [PATCH 31/45] Skip e2e tests to be addressed in follow-up --- packages/js/admin-e2e-tests/src/specs/tasks/payment.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts index 8e769e2dec1..1571fea5fcc 100644 --- a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts +++ b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts @@ -52,7 +52,7 @@ const testAdminPaymentSetupTask = () => { await paymentsSetup.isDisplayed(); } ); - it( 'Saving valid bank account transfer details enables the payment method', async () => { + it.skip( 'Saving valid bank account transfer details enables the payment method', async () => { await paymentsSetup.showOtherPaymentMethods(); await waitForTimeout( 500 ); await paymentsSetup.goToPaymentMethodSetup( 'bacs' ); @@ -71,7 +71,7 @@ const testAdminPaymentSetupTask = () => { await homeScreen.navigate(); } ); - it( 'Enabling cash on delivery enables the payment method', async () => { + it.skip( 'Enabling cash on delivery enables the payment method', async () => { await settings.cleanPaymentMethods(); await homeScreen.navigate(); await homeScreen.isDisplayed(); From 08466d8de175f09fff4980049311e7dfaf148117 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 14 Apr 2022 15:39:15 +0800 Subject: [PATCH 32/45] Update payment method link to the internal Extensions Marketplace --- .../client/tasks/fills/PaymentGatewaySuggestions/index.js | 6 ++---- .../admin/settings/class-wc-settings-payment-gateways.php | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index fdadacde358..4bb7b9bd83d 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -14,6 +14,7 @@ import { useMemo, useCallback, useEffect } from '@wordpress/element'; import { registerPlugin } from '@wordpress/plugins'; import { WooOnboardingTask } from '@woocommerce/onboarding'; import { getNewPath } from '@woocommerce/navigation'; +import { getAdminLink } from '@woocommerce/settings'; import { Button } from '@wordpress/components'; import ExternalIcon from 'gridicons/dist/external'; @@ -29,9 +30,6 @@ import { getCountryCode } from '~/dashboard/utils'; import './plugins/Bacs'; import './payment-gateway-suggestions.scss'; -const SEE_MORE_LINK = - 'https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/?utm_source=payments_recommendations'; - const comparePaymentGatewaysByPriority = ( a, b ) => a.recommendation_priority - b.recommendation_priority; @@ -323,7 +321,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { footerLink={ ! isWCPayOrOtherCategoryDoneSetup && (
); From 1b52d6d76dd5d7a48479d2847d12c17d19e203e6 Mon Sep 17 00:00:00 2001 From: Vedanshu Jain Date: Thu, 14 Apr 2022 18:14:35 +0530 Subject: [PATCH 36/45] Revert "Use integers for menu page priority." --- plugins/woocommerce/includes/admin/class-wc-admin-menus.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce/includes/admin/class-wc-admin-menus.php b/plugins/woocommerce/includes/admin/class-wc-admin-menus.php index 3528be7e071..1f6542918b8 100644 --- a/plugins/woocommerce/includes/admin/class-wc-admin-menus.php +++ b/plugins/woocommerce/includes/admin/class-wc-admin-menus.php @@ -61,7 +61,7 @@ class WC_Admin_Menus { $menu[] = array( '', 'read', 'separator-woocommerce', '', 'wp-menu-separator woocommerce' ); // WPCS: override ok. } - add_menu_page( __( 'WooCommerce', 'woocommerce' ), __( 'WooCommerce', 'woocommerce' ), 'edit_others_shop_orders', 'woocommerce', null, $woocommerce_icon, 55 ); + add_menu_page( __( 'WooCommerce', 'woocommerce' ), __( 'WooCommerce', 'woocommerce' ), 'edit_others_shop_orders', 'woocommerce', null, $woocommerce_icon, '55.5' ); add_submenu_page( 'edit.php?post_type=product', __( 'Attributes', 'woocommerce' ), __( 'Attributes', 'woocommerce' ), 'manage_product_terms', 'product_attributes', array( $this, 'attributes_page' ) ); } @@ -73,7 +73,7 @@ class WC_Admin_Menus { if ( self::can_view_woocommerce_menu_item() ) { add_submenu_page( 'woocommerce', __( 'Reports', 'woocommerce' ), __( 'Reports', 'woocommerce' ), 'view_woocommerce_reports', 'wc-reports', array( $this, 'reports_page' ) ); } else { - add_menu_page( __( 'Sales reports', 'woocommerce' ), __( 'Sales reports', 'woocommerce' ), 'view_woocommerce_reports', 'wc-reports', array( $this, 'reports_page' ), 'dashicons-chart-bar', 56 ); + add_menu_page( __( 'Sales reports', 'woocommerce' ), __( 'Sales reports', 'woocommerce' ), 'view_woocommerce_reports', 'wc-reports', array( $this, 'reports_page' ), 'dashicons-chart-bar', '55.6' ); } } From d59fa94d2f801d88ae52d97bec2d8ef19050bf4a Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 14 Apr 2022 09:48:53 -0300 Subject: [PATCH 37/45] Add sectioned task list loading placeholder component --- .../woocommerce-admin/client/tasks/tasks.tsx | 3 + .../sectioned-task-list-placeholder.tsx | 80 +++++++++++++++++++ .../two-column-tasks/sectioned-task-list.scss | 31 ++++++- 3 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx diff --git a/plugins/woocommerce-admin/client/tasks/tasks.tsx b/plugins/woocommerce-admin/client/tasks/tasks.tsx index 5ca3fba71fc..552693006c0 100644 --- a/plugins/woocommerce-admin/client/tasks/tasks.tsx +++ b/plugins/woocommerce-admin/client/tasks/tasks.tsx @@ -23,6 +23,7 @@ import { SectionedTaskList } from '../two-column-tasks/sectioned-task-list'; import TwoColumnTaskListPlaceholder from '../two-column-tasks/placeholder'; import '../two-column-tasks/style.scss'; import { getAdminSetting } from '~/utils/admin-settings'; +import { SectionedTaskListPlaceholder } from '~/two-column-tasks/sectioned-task-list-placeholder'; export type TasksProps = { query: { task?: string }; @@ -45,6 +46,8 @@ function getTaskListPlaceholderComponent( switch ( taskListId ) { case 'setup_experiment_1': return TwoColumnTaskListPlaceholder; + case 'setup_experiment_2': + return SectionedTaskListPlaceholder; default: return TasksPlaceholder; } diff --git a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx new file mode 100644 index 00000000000..baabeadfdcc --- /dev/null +++ b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx @@ -0,0 +1,80 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import './style.scss'; + +type TasksPlaceholderProps = { + numTasks?: number; + query: { + task?: string; + }; +}; + +const SectionedTaskListPlaceholder: React.FC< TasksPlaceholderProps > = ( + props +) => { + const { numTasks = 3 } = props; + + return ( +
+
+
+
+
+
+
+
    + { Array.from( new Array( numTasks ) ).map( ( v, i ) => ( +
  • +
    +
    +
    +
    +
    +
    +
    • + ) ) } +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; + +export { SectionedTaskListPlaceholder }; diff --git a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss index b7352b0b022..d9e379ad043 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss +++ b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss @@ -63,7 +63,9 @@ pointer-events: none; } - &:not(.is-complete) .woocommerce-task-list__item-before .woocommerce-task__icon { + &:not(.is-complete) + .woocommerce-task-list__item-before + .woocommerce-task__icon { border-color: $gray-300; } } @@ -89,4 +91,31 @@ } } } + + > .is-loading { + border: none; + margin-bottom: 8px; + + .woocommerce-task-list__item .woocommerce-task-list__item-before { + padding: 0 0 0 $gap-large; + } + + &.components-panel__body .components-panel__body-title .woocommerce-task-list__item-text { + width: 50%; + + .is-placeholder { + width: 100%; + } + } + + &.components-panel__body .woocommerce-task-list__item-after { + margin-left: $gap; + + .is-placeholder { + height: 24px; + width: 24px; + border-radius: 50%; + } + } + } } From 821ee8dc582957ff93a85b56f1252af90c2cdf80 Mon Sep 17 00:00:00 2001 From: vedanshujain Date: Thu, 14 Apr 2022 18:33:37 +0530 Subject: [PATCH 38/45] Adds changelog --- .../changelog/revert-31779-fix-31729-add-menu-page-arg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/revert-31779-fix-31729-add-menu-page-arg diff --git a/plugins/woocommerce/changelog/revert-31779-fix-31729-add-menu-page-arg b/plugins/woocommerce/changelog/revert-31779-fix-31729-add-menu-page-arg new file mode 100644 index 00000000000..5d92d0b212e --- /dev/null +++ b/plugins/woocommerce/changelog/revert-31779-fix-31729-add-menu-page-arg @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Revert back menu position to floats as string for WP compatibility. From 3c69e4f2b08be93ef504d7be09083a561ee5fa03 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 14 Apr 2022 10:47:53 -0300 Subject: [PATCH 39/45] Remove unused dependency --- .../two-column-tasks/sectioned-task-list-placeholder.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx index baabeadfdcc..70b234eaf0a 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * Internal dependencies */ From 26a27650a3555b817cf7cf429fabfc9503ed6816 Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Thu, 14 Apr 2022 10:19:27 -0400 Subject: [PATCH 40/45] Add check for tasklist layout experiment (#32593) * Add check for tasklist layout experiment * Remove task list setup feature flags * Remove errant config file * Add negative check for experiment 1 in experiment 2 --- .../woocommerce-admin/client/header/index.js | 14 ++++++-- .../woocommerce/client/admin/config/core.json | 4 +-- .../client/admin/config/development.json | 4 +-- .../Features/OnboardingTasks/TaskLists.php | 35 +++++++++++++++++-- 4 files changed, 45 insertions(+), 12 deletions(-) diff --git a/plugins/woocommerce-admin/client/header/index.js b/plugins/woocommerce-admin/client/header/index.js index 5ef3c246801..711b04fce3c 100644 --- a/plugins/woocommerce-admin/client/header/index.js +++ b/plugins/woocommerce-admin/client/header/index.js @@ -6,7 +6,9 @@ import { useEffect, useLayoutEffect, useRef } from '@wordpress/element'; import classnames from 'classnames'; import { decodeEntities } from '@wordpress/html-entities'; import { getSetting } from '@woocommerce/settings'; +import { ONBOARDING_STORE_NAME } from '@woocommerce/data'; import { Text, useSlot } from '@woocommerce/experimental'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -93,12 +95,18 @@ export const Header = ( { sections, isEmbedded = false, query } ) => { } }, [ isEmbedded, sections, siteTitle ] ); - const tasksReminderFeature = - window.wcAdminFeatures[ 'tasklist-setup-experiment-1' ]; + const { hasTasksReminderFeature } = useSelect( ( select ) => { + const taskLists = select( ONBOARDING_STORE_NAME ).getTaskLists(); + return { + hasTasksReminderFeature: taskLists.some( + ( list ) => list.id === 'setup_experiment_1' + ), + }; + } ); return (
- { tasksReminderFeature && ( + { hasTasksReminderFeature && ( setTimeZone( new \DateTimeZone( 'UTC' ) ); + + $experiment_name = sprintf( + '%s_%s_%s', + $name, + $date->format( 'Y' ), + $date->format( 'm' ) + ); + return $abtest->get_variation( $experiment_name ) === 'treatment'; + } + /** * Initialize default lists. */ @@ -93,7 +120,8 @@ class TaskLists { 'Appearance', ), 'event_prefix' => 'tasklist_', - 'visible' => ! Features::is_enabled( 'tasklist-setup-experiment-1' ) && ! Features::is_enabled( 'tasklist-setup-experiment-2' ), + 'visible' => ! self::is_experiment_treatment( 'woocommerce_tasklist_setup_experiment_1' ) + && ! self::is_experiment_treatment( 'woocommerce_tasklist_setup_experiment_2' ), ) ); @@ -117,7 +145,7 @@ class TaskLists { 'options' => array( 'use_completed_title' => true, ), - 'visible' => Features::is_enabled( 'tasklist-setup-experiment-1' ), + 'visible' => self::is_experiment_treatment( 'woocommerce_tasklist_setup_experiment_1' ), ) ); @@ -138,7 +166,8 @@ class TaskLists { 'Appearance', ), 'event_prefix' => 'tasklist_', - 'visible' => Features::is_enabled( 'tasklist-setup-experiment-2' ), + 'visible' => self::is_experiment_treatment( 'woocommerce_tasklist_setup_experiment_2' ) + && ! self::is_experiment_treatment( 'woocommerce_tasklist_setup_experiment_1' ), 'options' => array( 'use_completed_title' => true, ), From 1998203b6e7691000f717020d2c862020a909ca2 Mon Sep 17 00:00:00 2001 From: Fernando Marichal Date: Thu, 14 Apr 2022 11:36:53 -0300 Subject: [PATCH 41/45] Remove Pinterest extension from OBW --- .../src/Admin/API/OnboardingProfile.php | 1 - .../DefaultFreeExtensions.php | 28 ++----------------- 2 files changed, 2 insertions(+), 27 deletions(-) diff --git a/plugins/woocommerce/src/Admin/API/OnboardingProfile.php b/plugins/woocommerce/src/Admin/API/OnboardingProfile.php index d30956054d3..a148810ed2e 100644 --- a/plugins/woocommerce/src/Admin/API/OnboardingProfile.php +++ b/plugins/woocommerce/src/Admin/API/OnboardingProfile.php @@ -397,7 +397,6 @@ class OnboardingProfile extends \WC_REST_Data_Controller { 'creative-mail-by-constant-contact', 'facebook-for-woocommerce', 'google-listings-and-ads', - 'pinterest-for-woocommerce', 'mailpoet', ), 'type' => 'string', diff --git a/plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php b/plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php index 202dc7f5982..3cf47a240df 100644 --- a/plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php +++ b/plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php @@ -36,7 +36,6 @@ class DefaultFreeExtensions { 'plugins' => [ self::get_plugin( 'mailpoet' ), self::get_plugin( 'google-listings-and-ads' ), - self::get_plugin( 'pinterest-for-woocommerce' ), ], ], [ @@ -53,7 +52,7 @@ class DefaultFreeExtensions { 'title' => __( 'Grow your store', 'woocommerce' ), 'plugins' => [ self::get_plugin( 'google-listings-and-ads:alt' ), - self::get_plugin( 'pinterest-for-woocommerce:alt' ), + self::get_plugin( 'pinterest-for-woocommerce' ), ], ], ]; @@ -100,30 +99,7 @@ class DefaultFreeExtensions { 'manage_url' => 'admin.php?page=wc-admin&path=%2Fgoogle%2Fstart', 'is_built_by_wc' => true, ], - 'pinterest-for-woocommerce' => [ - 'name' => __( 'Pinterest for WooCommerce', 'woocommerce' ), - 'description' => sprintf( - /* translators: 1: opening product link tag. 2: closing link tag */ - __( 'Inspire shoppers with %1$sPinterest for WooCommerce%2$s', 'woocommerce' ), - '', - '' - ), - 'image_url' => plugins_url( '/assets/images/onboarding/pinterest.png', WC_PLUGIN_FILE ), - 'manage_url' => 'admin.php?page=pinterest-for-woocommerce', - 'is_visible' => [ - [ - 'type' => 'not', - 'operand' => [ - [ - 'type' => 'plugins_activated', - 'plugins' => [ 'pinterest-for-woocommerce' ], - ], - ], - ], - ], - 'is_built_by_wc' => false, - ], - 'pinterest-for-woocommerce:alt' => [ + 'pinterest-for-woocommerce' => [ 'name' => __( 'Pinterest for WooCommerce', 'woocommerce' ), 'description' => __( 'Get your products in front of Pinterest users searching for ideas and things to buy. Get started with Pinterest and make your entire product catalog browsable.', 'woocommerce' ), 'image_url' => plugins_url( '/assets/images/onboarding/pinterest.png', WC_PLUGIN_FILE ), From ab319ad9ef8cc6df73d700644b15a469b9356289 Mon Sep 17 00:00:00 2001 From: Fernando Marichal Date: Thu, 14 Apr 2022 11:50:03 -0300 Subject: [PATCH 42/45] Add changelog --- .../changelog/fix-32141_remove_pinterest_extension_from_obw | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/fix-32141_remove_pinterest_extension_from_obw diff --git a/plugins/woocommerce/changelog/fix-32141_remove_pinterest_extension_from_obw b/plugins/woocommerce/changelog/fix-32141_remove_pinterest_extension_from_obw new file mode 100644 index 00000000000..e8e565aaf0d --- /dev/null +++ b/plugins/woocommerce/changelog/fix-32141_remove_pinterest_extension_from_obw @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +Remove Pinterest extension from OBW #32626 From f384581e6765fe0877454a6164b8cf70551fd170 Mon Sep 17 00:00:00 2001 From: Josh Betz Date: Wed, 13 Apr 2022 14:43:51 -0500 Subject: [PATCH 43/45] Reports: Don't include auto-draft orders in reports We use auto-draft in the the API (https://github.com/woocommerce/woocommerce/pull/31290) and to some extent in wp-admin. These orders should not impact reporting. Fixes https://github.com/woocommerce/woocommerce-ios/issues/6626 --- plugins/woocommerce/src/Admin/API/Reports/DataStore.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce/src/Admin/API/Reports/DataStore.php b/plugins/woocommerce/src/Admin/API/Reports/DataStore.php index aebda100324..bf2a95cf2ac 100644 --- a/plugins/woocommerce/src/Admin/API/Reports/DataStore.php +++ b/plugins/woocommerce/src/Admin/API/Reports/DataStore.php @@ -577,7 +577,7 @@ class DataStore extends SqlQuery { */ protected static function get_excluded_report_order_statuses() { $excluded_statuses = \WC_Admin_Settings::get_option( 'woocommerce_excluded_report_order_statuses', array( 'pending', 'failed', 'cancelled' ) ); - $excluded_statuses = array_merge( array( 'trash' ), array_map( 'esc_sql', $excluded_statuses ) ); + $excluded_statuses = array_merge( array( 'auto-draft', 'trash' ), array_map( 'esc_sql', $excluded_statuses ) ); return apply_filters( 'woocommerce_analytics_excluded_order_statuses', $excluded_statuses ); } From de086a684e022eac835bdf30cf39326ff5c9573a Mon Sep 17 00:00:00 2001 From: Josh Betz Date: Thu, 14 Apr 2022 10:13:19 -0500 Subject: [PATCH 44/45] Add changelog --- plugins/woocommerce/changelog/fix-exclude-drafts-in-reports | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/fix-exclude-drafts-in-reports diff --git a/plugins/woocommerce/changelog/fix-exclude-drafts-in-reports b/plugins/woocommerce/changelog/fix-exclude-drafts-in-reports new file mode 100644 index 00000000000..354111e694b --- /dev/null +++ b/plugins/woocommerce/changelog/fix-exclude-drafts-in-reports @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Don't include draft orders in reports From 3561b87f837097bb7cfde4ed753123443e0313d3 Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Thu, 14 Apr 2022 12:21:56 -0400 Subject: [PATCH 45/45] Track when task list sections are closed (#32625) * Track when task list sections are closed * Add tracks for when task list section is opened --- .../two-column-tasks/sectioned-task-list.tsx | 30 +++++++++++++++++-- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx index 9fb472401da..2703c84d0cf 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx @@ -35,7 +35,7 @@ const PanelBodyWithUpdatedType = PanelBody as React.ComponentType< PanelBodyProp export const SectionedTaskList: React.FC< TaskListProps > = ( { query, id, - eventName, + eventPrefix, tasks, keepCompletedTaskList, isComplete, @@ -66,7 +66,7 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { return; } - recordEvent( `${ eventName }_view`, { + recordEvent( `${ eventPrefix }view`, { number_tasks: visibleTasks.length, store_connected: profileItems.wccom_connected, } ); @@ -122,7 +122,7 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { } const trackClick = ( task: TaskType ) => { - recordEvent( `${ eventName }_click`, { + recordEvent( `${ eventPrefix }_click`, { task_name: task.id, } ); }; @@ -182,10 +182,34 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( { opened={ openPanel === section.id } onToggle={ ( isOpen: boolean ) => { if ( ! isOpen && openPanel === section.id ) { + recordEvent( + `${ eventPrefix }section_closed`, + { + id: section.id, + all: true, + } + ); setOpenPanel( null ); } else { + if ( openPanel ) { + recordEvent( + `${ eventPrefix }section_closed`, + { + id: openPanel, + all: false, + } + ); + } setOpenPanel( section.id ); } + if ( isOpen ) { + recordEvent( + `${ eventPrefix }section_opened`, + { + id: section.id, + } + ); + } } } initialOpen={ false } >