>
);
};
diff --git a/client/onboarding/steps/test/mode-choice.tsx b/client/onboarding/steps/test/mode-choice.tsx
index 8c081182324..d6400d98936 100644
--- a/client/onboarding/steps/test/mode-choice.tsx
+++ b/client/onboarding/steps/test/mode-choice.tsx
@@ -27,7 +27,7 @@ declare const global: {
};
describe( 'ModeChoice', () => {
- it( 'displays test and live radio cards, notice for dev mode', () => {
+ it( 'displays test and live radio cards, notice for sandbox mode', () => {
global.wcpaySettings = {
connectUrl: 'https://wcpay.test/connect',
devMode: true,
@@ -35,14 +35,11 @@ describe( 'ModeChoice', () => {
render( );
expect(
- screen.getByText( strings.steps.mode.live.label )
- ).toBeInTheDocument();
- expect(
- screen.getByText( strings.steps.mode.test.label )
+ screen.getByText( strings.steps.mode.label )
).toBeInTheDocument();
expect(
screen.getByText(
- 'Dev mode is enabled, only test accounts will be created. If you want to process live transactions, please disable it.'
+ 'Sandbox mode is enabled, only test accounts will be created. If you want to process live transactions, please disable it.'
)
).toBeInTheDocument();
} );
@@ -51,8 +48,7 @@ describe( 'ModeChoice', () => {
nextStep = jest.fn();
render( );
- user.click( screen.getByText( strings.steps.mode.live.label ) );
- user.click( screen.getByRole( 'button' ) );
+ user.click( screen.getByTestId( 'live-mode-button' ) );
expect( nextStep ).toHaveBeenCalled();
} );
@@ -70,8 +66,9 @@ describe( 'ModeChoice', () => {
render( );
- user.click( screen.getByText( strings.steps.mode.test.label ) );
- user.click( screen.getByRole( 'button' ) );
+ user.click(
+ screen.getByRole( 'button', { name: /Continue in sandbox mode/i } )
+ );
expect( window.location.href ).toBe(
`https://wcpay.test/connect?test_mode=true`
diff --git a/client/onboarding/strings.tsx b/client/onboarding/strings.tsx
index 04d201af815..a1578aacb61 100644
--- a/client/onboarding/strings.tsx
+++ b/client/onboarding/strings.tsx
@@ -6,6 +6,14 @@ import { __, sprintf } from '@wordpress/i18n';
import interpolateComponents from '@automattic/interpolate-components';
import React from 'react';
+const documentationUrls = {
+ sandboxMode:
+ 'https://woo.com/document/woopayments/testing-and-troubleshooting/sandbox-mode/',
+ tos: 'https://wordpress.com/tos/',
+ merchantTerms: 'https://wordpress.com/tos/#more-woopay-specifically',
+ privacyPolicy: 'https://automattic.com/privacy/',
+};
+
export default {
steps: {
mode: {
@@ -17,33 +25,21 @@ export default {
'Select the option that best fits your needs.',
'woocommerce-payments'
),
- live: {
- label: __(
- 'I’d like to set up payments on my own store',
- 'woocommerce-payments'
- ),
- note: __(
- 'You’ll need to provide details to verify that you’re the owner of the account. If you’re setting up payments for someone else, choose the test payments option.',
- 'woocommerce-payments'
- ),
- },
- test: {
- label: __(
- 'I’m building a store for someone else and would like to test payments',
- 'woocommerce-payments'
- ),
- note: sprintf(
- /* translators: %s: WooPayments */
- __(
- 'This option will set up %s in development mode. You can use test data to set up, no personal information is required. When you’re ready to launch your store, switching to live payments is easy.',
- 'woocommerce-payments'
- ),
- 'WooPayments'
- ),
+ label: __(
+ 'I’d like to set up payments for my store',
+ 'woocommerce-payments'
+ ),
+ note: __(
+ 'You’ll need to provide details to verify that you’re the owner of the account. If you’re setting up payments for someone else, choose sandbox mode.',
+ 'woocommerce-payments'
+ ),
+ continue: {
+ live: __( 'Continue', 'woocommerce-payments' ),
+ test: __( 'Continue in sandbox mode', 'woocommerce-payments' ),
},
- devModeNotice: interpolateComponents( {
+ sandboxModeNotice: interpolateComponents( {
mixedString: __(
- 'Dev mode is enabled, only test accounts will be created. If you want to process live transactions, please disable it. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+ 'Sandbox mode is enabled, only test accounts will be created. If you want to process live transactions, please disable it. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
'woocommerce-payments'
),
components: {
@@ -51,15 +47,50 @@ export default {
// Link content is in the format string above. Consider disabling jsx-a11y/anchor-has-content.
// eslint-disable-next-line jsx-a11y/anchor-has-content
),
},
} ),
+ tos: interpolateComponents( {
+ mixedString: sprintf(
+ __(
+ /* translators: %1$s: WooPayments, %2$s: WooPay */
+ 'By using %1$s, you agree to the {{tosLink}}Terms of Service{{/tosLink}} (including %2$s {{merchantTermsLink}}merchant terms{{/merchantTermsLink}}) and acknowledge that you have read our {{privacyPolicyLink}}Privacy Policy{{/privacyPolicyLink}}.',
+ 'woocommerce-payments'
+ ),
+ 'WooPayments',
+ 'WooPay'
+ ),
+ components: {
+ tosLink: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+
+ ),
+ merchantTermsLink: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+
+ ),
+ privacyPolicyLink: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+
+ ),
+ },
+ } ),
},
personal: {
heading: __(
diff --git a/client/onboarding/style.scss b/client/onboarding/style.scss
index 1c118b5bf3c..8dbbef819e4 100644
--- a/client/onboarding/style.scss
+++ b/client/onboarding/style.scss
@@ -106,6 +106,12 @@ body.wcpay-onboarding__body {
padding: $gap-small $gap;
}
+ .onboarding-mode__sandbox {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
.personal-details-notice {
margin: 0;
}
@@ -124,4 +130,42 @@ body.wcpay-onboarding__body {
margin: $gap 0;
}
}
+
+ .wcpay-component-onboarding-card {
+ display: block;
+ padding: $gap-large;
+ background-color: #fff;
+ border-radius: 3px;
+ border: 1px solid $light-gray-500;
+ margin-bottom: $gap-large;
+
+ &__label {
+ display: grid;
+ grid-template-columns: 24px 1fr 25px;
+ column-gap: $gap-small;
+ align-items: center;
+ font-weight: bold;
+
+ &:not( :last-child ) {
+ margin-bottom: $gap;
+ }
+
+ svg {
+ fill: #bbb;
+ }
+ }
+
+ &__footer {
+ button {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ p {
+ color: $gray-700;
+ }
+ }
}
diff --git a/client/order/index.js b/client/order/index.js
index 1bfdfeee7ad..16ec2b60183 100644
--- a/client/order/index.js
+++ b/client/order/index.js
@@ -61,6 +61,9 @@ jQuery( function ( $ ) {
const manualRefundsTip = getConfig( 'manualRefundsTip' ) ?? '';
const chargeId = getConfig( 'chargeId' );
const testMode = getConfig( 'testMode' );
+ // Order and site are both in test mode, or both in live mode.
+ // '1' = true, '' = false, null = the order was created before the test mode meta was added, so we assume it matches.
+ const orderTestModeMatch = getConfig( 'orderTestModeMatch' ) !== '';
maybeShowOrderNotices();
@@ -175,7 +178,7 @@ jQuery( function ( $ ) {
'#wcpay-order-payment-details-container'
);
- // If the container doesn't exist (WC < 7.9), or the charge ID isn't present, don't render the notice.
+ // If the container doesn't exist (WC < 7.9) don't render notices.
if ( ! container ) {
return;
}
@@ -184,7 +187,7 @@ jQuery( function ( $ ) {
<>
{ testMode && }
- { chargeId && (
+ { chargeId && orderTestModeMatch && (
{
{
label: strings.notice.actions.learnMore,
url:
- 'https://woo.com/document/woopayments/testing-and-troubleshooting/dev-mode/',
+ 'https://woo.com/document/woopayments/testing-and-troubleshooting/sandbox-mode/',
urlTarget: '_blank',
},
]
diff --git a/client/overview/modal/progressive-onboarding-eligibility/index.tsx b/client/overview/modal/progressive-onboarding-eligibility/index.tsx
index 6e16ac57a1f..b6c2b85054f 100644
--- a/client/overview/modal/progressive-onboarding-eligibility/index.tsx
+++ b/client/overview/modal/progressive-onboarding-eligibility/index.tsx
@@ -12,7 +12,7 @@ import { useDispatch } from '@wordpress/data';
* Internal dependencies
*/
import { trackEligibilityModalClosed } from 'onboarding/tracking';
-import HeaderImg from 'assets/images/illustrations/po-eligibility.svg';
+import ConfettiAnimation from 'components/confetti-animation';
import './style.scss';
const ProgressiveOnboardingEligibilityModal: React.FC = () => {
@@ -70,18 +70,13 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => {
className="wcpay-progressive-onboarding-eligibility-modal"
onRequestClose={ handleDismiss }
>
-
-
-
+
- { __(
- 'You’re eligible to start selling now and fast-track the setup process.',
- 'woocommerce-payments'
- ) }
+ { __( 'You’re ready to sell.', 'woocommerce-payments' ) }
{ __(
- 'Start selling now with these benefits or continue the process to set up deposits.',
+ 'Start selling now and fast track the setup process, or continue the process to set up deposits with WooPayments.',
'woocommerce-payments'
) }
@@ -97,7 +92,7 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => {
{ sprintf(
/* translators: %s: WooPayments */
__(
- '%s enables you to start processing payments right away.',
+ '%s enables you to start processing credit card payments right away.',
'woocommerce-payments'
),
'WooPayments'
@@ -109,7 +104,7 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => {
{ __( 'Quick and easy setup', 'woocommerce-payments' ) }
{ __(
- 'The setup process is super simple and ensures your store is ready to accept payments.',
+ 'The setup process is super simple and ensures your store is ready to accept card payments.',
'woocommerce-payments'
) }
@@ -125,14 +120,11 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => {