From 568696921ff46cdaa892d117d61409822281230f Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Wed, 31 May 2023 17:59:12 -0500 Subject: [PATCH 001/371] Migrate DepositsStatus and PaymentsStatus components to Typescript (#6247) --- .../add-migrate-deposit-status-to-typescript | 4 +++ .../deposits-status/{index.js => index.tsx} | 25 ++++++++++++++++-- .../payments-status/{index.js => index.tsx} | 26 ++++++++++++++----- client/types/account/account-status.d.ts | 16 ++++++++++++ 4 files changed, 62 insertions(+), 9 deletions(-) create mode 100644 changelog/add-migrate-deposit-status-to-typescript rename client/components/deposits-status/{index.js => index.tsx} (78%) rename client/components/payments-status/{index.js => index.tsx} (60%) create mode 100644 client/types/account/account-status.d.ts diff --git a/changelog/add-migrate-deposit-status-to-typescript b/changelog/add-migrate-deposit-status-to-typescript new file mode 100644 index 00000000000..4ad739a60ef --- /dev/null +++ b/changelog/add-migrate-deposit-status-to-typescript @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Migrate DepositsStatus and PaymentsStatus components to Typescript diff --git a/client/components/deposits-status/index.js b/client/components/deposits-status/index.tsx similarity index 78% rename from client/components/deposits-status/index.js rename to client/components/deposits-status/index.tsx index 97ba19708fe..45213944aba 100644 --- a/client/components/deposits-status/index.js +++ b/client/components/deposits-status/index.tsx @@ -7,17 +7,38 @@ import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle'; import GridiconNotice from 'gridicons/dist/notice'; import { __ } from '@wordpress/i18n'; import { createInterpolateElement } from '@wordpress/element'; +import React from 'react'; /** * Internal dependencies */ import 'components/account-status/shared.scss'; +import type { AccountStatus } from 'wcpay/types/account/account-status'; -const DepositsStatus = ( { status, interval, accountStatus, iconSize } ) => { +type DepositsStatus = 'enabled' | 'disabled' | 'blocked'; +type DepositsIntervals = 'daily' | 'weekly' | 'monthly' | 'manual'; + +interface Props { + status: DepositsStatus; + interval: DepositsIntervals; + accountStatus: AccountStatus; + iconSize: number; +} + +const DepositsStatus: React.FC< Props > = ( { + status, + interval, + accountStatus, + iconSize, +} ) => { let className = 'account-status__info__green'; let description; let icon = ; - const automaticIntervals = [ 'daily', 'weekly', 'monthly' ]; + const automaticIntervals: DepositsIntervals[] = [ + 'daily', + 'weekly', + 'monthly', + ]; const showSuspendedNotice = 'blocked' === status; if ( 'pending_verification' === accountStatus ) { diff --git a/client/components/payments-status/index.js b/client/components/payments-status/index.tsx similarity index 60% rename from client/components/payments-status/index.js rename to client/components/payments-status/index.tsx index 0b090232773..300b37f464d 100644 --- a/client/components/payments-status/index.js +++ b/client/components/payments-status/index.tsx @@ -6,13 +6,19 @@ import { __ } from '@wordpress/i18n'; import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle'; import GridiconNotice from 'gridicons/dist/notice'; +import React from 'react'; /** * Internal dependencies */ import 'components/account-status/shared.scss'; +import type { AccountStatus } from 'wcpay/types/account/account-status'; -const PaymentsStatusEnabled = ( props ) => { +interface PaymentsStatusProps { + iconSize: number; +} + +const PaymentsStatusEnabled: React.FC< PaymentsStatusProps > = ( props ) => { const { iconSize } = props; return ( @@ -23,7 +29,7 @@ const PaymentsStatusEnabled = ( props ) => { ); }; -const PaymentsStatusDisabled = ( props ) => { +const PaymentsStatusDisabled: React.FC< PaymentsStatusProps > = ( props ) => { const { iconSize } = props; return ( @@ -34,7 +40,7 @@ const PaymentsStatusDisabled = ( props ) => { ); }; -const PaymentsStatusPending = ( props ) => { +const PaymentsStatusPending: React.FC< PaymentsStatusProps > = ( props ) => { const { iconSize } = props; return ( @@ -45,16 +51,22 @@ const PaymentsStatusPending = ( props ) => { ); }; -const PaymentsStatus = ( props ) => { +interface Props { + paymentsEnabled: string; + accountStatus: AccountStatus; + iconSize: number; +} + +const PaymentsStatus: React.FC< Props > = ( props ) => { const { paymentsEnabled, accountStatus } = props; if ( 'pending_verification' === accountStatus ) { - return ; + return ; } return paymentsEnabled ? ( - + ) : ( - + ); }; diff --git a/client/types/account/account-status.d.ts b/client/types/account/account-status.d.ts new file mode 100644 index 00000000000..17a92347b43 --- /dev/null +++ b/client/types/account/account-status.d.ts @@ -0,0 +1,16 @@ +export type AccountStatus = + | 'complete' + | 'pending_verification' + | 'restricted_partially' + | 'restricted' + | 'restricted_soon' + | 'requirements.past_due' + | 'requirements.pending_verification' + | 'listed' + | 'platform_paused' + | 'rejected.fraud' + | 'rejected.listed' + | 'rejected.terms_of_service' + | 'rejected.other' + | 'under_review' + | 'other'; From 242e60e334f7becea083de02dfabc3c3a5a2755b Mon Sep 17 00:00:00 2001 From: Achyuth Ajoy Date: Thu, 1 Jun 2023 13:17:09 +0530 Subject: [PATCH 002/371] E2E - Fix failing shopper test on WC Beta (#6411) --- changelog/e2e-fix-wc-beta-shopper-test | 4 ++++ tests/e2e/specs/wcpay/shopper/shopper-pay-for-order.spec.js | 4 +--- 2 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 changelog/e2e-fix-wc-beta-shopper-test diff --git a/changelog/e2e-fix-wc-beta-shopper-test b/changelog/e2e-fix-wc-beta-shopper-test new file mode 100644 index 00000000000..ebb0ee37615 --- /dev/null +++ b/changelog/e2e-fix-wc-beta-shopper-test @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Fix failing e2e shopper test - WC Beta diff --git a/tests/e2e/specs/wcpay/shopper/shopper-pay-for-order.spec.js b/tests/e2e/specs/wcpay/shopper/shopper-pay-for-order.spec.js index b35ba6805f4..c89c71d481e 100644 --- a/tests/e2e/specs/wcpay/shopper/shopper-pay-for-order.spec.js +++ b/tests/e2e/specs/wcpay/shopper/shopper-pay-for-order.spec.js @@ -36,9 +36,7 @@ describe( 'Shopper > Pay for Order', () => { // after the card has been declined, go to the order page and pay with a basic card await shopperWCP.goToOrders(); - const payButtons = await page.$$( - '.woocommerce-button.wp-element-button.button.pay' - ); + const payButtons = await page.$$( '.woocommerce-button.button.pay' ); const payButton = payButtons.find( async ( button ) => 'Pay' === From 61271c52c101db7e39b45e4da098a5942b2497e6 Mon Sep 17 00:00:00 2001 From: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com> Date: Thu, 1 Jun 2023 13:18:34 +0300 Subject: [PATCH 003/371] Fix account status chip for progressively onboarded accounts (#6409) --- changelog/fix-6375-account-status-for-po | 4 +++ client/account-status-settings/index.js | 8 ++++- client/account-status-settings/test/index.js | 36 +++++++++++++++++++ client/components/account-status/index.js | 9 +++-- .../components/account-status/status-chip.js | 8 +++-- .../test/__snapshots__/index.js.snap | 19 ++++++++++ .../components/account-status/test/index.js | 27 ++++++++++++-- 7 files changed, 104 insertions(+), 7 deletions(-) create mode 100644 changelog/fix-6375-account-status-for-po diff --git a/changelog/fix-6375-account-status-for-po b/changelog/fix-6375-account-status-for-po new file mode 100644 index 00000000000..fb9b67f2cef --- /dev/null +++ b/changelog/fix-6375-account-status-for-po @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix account status chip from restricted to pending for PO accounts diff --git a/client/account-status-settings/index.js b/client/account-status-settings/index.js index 53e5dc3526a..547ed6b57b0 100644 --- a/client/account-status-settings/index.js +++ b/client/account-status-settings/index.js @@ -123,7 +123,13 @@ const AccountStatus = ( props ) => { return (
- + { renderPaymentsStatus( accountStatus.paymentsEnabled ) } { renderDepositsStatus( { deposits: accountStatus.deposits } ) }
diff --git a/client/account-status-settings/test/index.js b/client/account-status-settings/test/index.js index f4daa6f8b2b..9b25d97aaf6 100644 --- a/client/account-status-settings/test/index.js +++ b/client/account-status-settings/test/index.js @@ -22,6 +22,10 @@ describe( 'AccountStatus', () => { status: 'enabled', interval: 'daily', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 0, accountLink: '', } ); @@ -36,6 +40,10 @@ describe( 'AccountStatus', () => { status: 'enabled', interval: 'daily', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 1583844589, accountLink: '/wp-admin/admin.php?page=wc-settings&tab=checkout§ion=woocommerce_payments&wcpay-login=1', @@ -51,6 +59,10 @@ describe( 'AccountStatus', () => { status: 'disabled', interval: '', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 1583844589, pastDue: true, accountLink: @@ -67,6 +79,10 @@ describe( 'AccountStatus', () => { status: 'disabled', interval: 'daily', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 1583844589, pastDue: false, accountLink: '', @@ -82,6 +98,10 @@ describe( 'AccountStatus', () => { status: 'disabled', interval: 'daily', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 1583844589, pastDue: false, accountLink: '', @@ -97,6 +117,10 @@ describe( 'AccountStatus', () => { status: 'disabled', interval: 'monthly', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 0, accountLink: '', } ); @@ -111,6 +135,10 @@ describe( 'AccountStatus', () => { status: 'disabled', interval: 'daily', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 0, accountLink: '', } ); @@ -125,6 +153,10 @@ describe( 'AccountStatus', () => { status: 'disabled', interval: 'daily', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 0, accountLink: '', } ); @@ -139,6 +171,10 @@ describe( 'AccountStatus', () => { status: 'enabled', interval: 'manual', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, currentDeadline: 0, accountLink: '', } ); diff --git a/client/components/account-status/index.js b/client/components/account-status/index.js index 6049d9bac2a..0353fb465db 100755 --- a/client/components/account-status/index.js +++ b/client/components/account-status/index.js @@ -57,14 +57,19 @@ const AccountStatusError = () => { const AccountStatusDetails = ( props ) => { const { accountStatus, accountFees } = props; - const cardTitle = ( <> { __( 'Account details', 'woocommerce-payments' ) } - +
`; +exports[`StatusChip renders pending verification status for po 1`] = ` +
+ +
+`; + exports[`StatusChip renders rejected status 1`] = `
{ status: 'enabled', interval: 'weekly', }, + progressiveOnboarding: { + isEnabled: false, + isComplete: false, + }, }, [ { @@ -119,12 +123,31 @@ describe( 'StatusChip', () => { expect( statusChip ).toMatchSnapshot(); } ); + test( 'renders pending verification status for po', () => { + const { container: statusChip } = renderStatusChip( + 'pending_verification', + true, + false + ); + expect( statusChip ).toMatchSnapshot(); + } ); + test( 'renders unknown status', () => { const { container: statusChip } = renderStatusChip( 'foobar' ); expect( statusChip ).toMatchSnapshot(); } ); - function renderStatusChip( accountStatus ) { - return render( ); + function renderStatusChip( + accountStatus, + poEnabled = false, + poComplete = false + ) { + return render( + + ); } } ); From e2c04479efd6dbca3589439c809553ef70ebf1dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ismael=20Mart=C3=ADn=20Alabarce?= Date: Thu, 1 Jun 2023 13:08:54 +0200 Subject: [PATCH 004/371] Show PO eligibility modal without checking account status (#6414) --- changelog/fix-6412-eligibility-modal-peding-status | 5 +++++ client/overview/index.js | 3 +-- 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 changelog/fix-6412-eligibility-modal-peding-status diff --git a/changelog/fix-6412-eligibility-modal-peding-status b/changelog/fix-6412-eligibility-modal-peding-status new file mode 100644 index 00000000000..f495c1b5a00 --- /dev/null +++ b/changelog/fix-6412-eligibility-modal-peding-status @@ -0,0 +1,5 @@ +Significance: patch +Type: fix +Comment: Fix behind PO feature flag + + diff --git a/client/overview/index.js b/client/overview/index.js index 53e36cd83ed..675e336798a 100644 --- a/client/overview/index.js +++ b/client/overview/index.js @@ -83,8 +83,7 @@ const OverviewPage = () => { const showProgressiveOnboardingEligibilityModal = showConnectionSuccess && accountStatus.progressiveOnboarding.isEnabled && - ! accountStatus.progressiveOnboarding.isComplete && - 'pending_verification' !== accountStatus.status; + ! accountStatus.progressiveOnboarding.isComplete; const accountRejected = accountStatus.status && accountStatus.status.startsWith( 'rejected' ); From 1a1198b02859c7503245db42fbd70e0e2e4d563d Mon Sep 17 00:00:00 2001 From: Mike Moore Date: Thu, 1 Jun 2023 16:18:47 -0400 Subject: [PATCH 005/371] Protect WooPay styles from being easily overridden by themes (#6367) --- changelog/fix-6327-woopay-theming-and-markup | 4 ++++ client/checkout/woopay/style.scss | 20 +++++++++---------- client/components/woopay/save-user/style.scss | 18 +++++++++++------ client/payment-request/index.js | 2 +- ...ayments-payment-request-button-handler.php | 2 +- ...lass-wc-payments-woopay-button-handler.php | 2 +- 6 files changed, 29 insertions(+), 19 deletions(-) create mode 100644 changelog/fix-6327-woopay-theming-and-markup diff --git a/changelog/fix-6327-woopay-theming-and-markup b/changelog/fix-6327-woopay-theming-and-markup new file mode 100644 index 00000000000..c961b8513b7 --- /dev/null +++ b/changelog/fix-6327-woopay-theming-and-markup @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Just a few CSS updates for WooPay buttons. diff --git a/client/checkout/woopay/style.scss b/client/checkout/woopay/style.scss index e1e14813932..bbd465aa8c5 100644 --- a/client/checkout/woopay/style.scss +++ b/client/checkout/woopay/style.scss @@ -129,9 +129,9 @@ sans-serif; letter-spacing: 0.8px; height: 40px; - background: #f2deff; - border: 1px solid $white; - color: $studio-woocommerce-purple-60; + background: #f2deff !important; + border: 1px solid $white !important; + color: $studio-woocommerce-purple-60 !important; width: 100%; border-radius: 4px; padding-top: 1px; @@ -142,7 +142,7 @@ white-space: nowrap; &:hover { - background: #d9baff; + background: #d9baff !important; cursor: pointer; } @@ -153,22 +153,22 @@ } &[data-theme='dark'] { - background: $studio-woocommerce-purple-60; - color: $white; - border-color: $studio-woocommerce-purple-60; + background: $studio-woocommerce-purple-60 !important; + color: $white !important; + border-color: $studio-woocommerce-purple-60 !important; svg { fill: $white; } &:hover { - background: #533582; + background: #533582 !important; } } &[data-theme='light-outline'] { - border-color: #674399; + border-color: #674399 !important; &:hover { - background: #d9baff; + background: #d9baff !important; } } diff --git a/client/components/woopay/save-user/style.scss b/client/components/woopay/save-user/style.scss index c95090c127c..bf39997fd35 100644 --- a/client/components/woopay/save-user/style.scss +++ b/client/components/woopay/save-user/style.scss @@ -18,15 +18,13 @@ } label { - flex: 1; - display: flex; - gap: $gap-small; - align-items: flex-start; + display: block; margin: 0 !important; - padding: 0 !important; + padding: 0 0 0 27px; + text-indent: -27px; .save-details-checkbox:not( .wc-block-components-checkbox__input ) { - margin-top: 0.375rem; + margin-right: 12px; } } @@ -36,6 +34,10 @@ label { gap: unset; + display: flex !important; + align-items: flex-start; + padding: 0; + text-indent: 0; } input { @@ -88,6 +90,10 @@ display: flex; } + span { + color: $gray-900; + } + svg { fill: currentColor; color: $alert-green; diff --git a/client/payment-request/index.js b/client/payment-request/index.js index 40bb3bb0e0b..c05aeec4877 100644 --- a/client/payment-request/index.js +++ b/client/payment-request/index.js @@ -440,7 +440,7 @@ jQuery( ( $ ) => { getElements: () => { return $( - '#wcpay-payment-request-wrapper,#wcpay-payment-request-button-separator' + '.wcpay-payment-request-wrapper,#wcpay-payment-request-button-separator' ); }, diff --git a/includes/class-wc-payments-payment-request-button-handler.php b/includes/class-wc-payments-payment-request-button-handler.php index 0b71a1ca83f..aa32dddde14 100644 --- a/includes/class-wc-payments-payment-request-button-handler.php +++ b/includes/class-wc-payments-payment-request-button-handler.php @@ -773,7 +773,7 @@ public function display_payment_request_button_html() { if ( WC()->session && Fraud_Prevention_Service::get_instance()->is_enabled() ) : ?> -