-
{ strings.steps[ name ].heading }
diff --git a/client/onboarding/steps/business-details.tsx b/client/onboarding/steps/business-details.tsx
index 8a9a3b762bb..42a7ad5bbb2 100644
--- a/client/onboarding/steps/business-details.tsx
+++ b/client/onboarding/steps/business-details.tsx
@@ -9,22 +9,21 @@ import React from 'react';
import { useOnboardingContext } from '../context';
import { Item } from 'components/custom-select-control';
import { OnboardingFields } from '../types';
-import {
- OnboardingGroupedSelectField,
- OnboardingSelectField,
- OnboardingTextField,
-} from '../form';
+import { OnboardingGroupedSelectField, OnboardingSelectField } from '../form';
import {
getAvailableCountries,
getBusinessTypes,
getMccsFlatList,
} from 'onboarding/utils';
import { BusinessType } from 'onboarding/types';
+import InlineNotice from 'components/inline-notice';
+import strings from 'onboarding/strings';
const BusinessDetails: React.FC = () => {
const { data, setData } = useOnboardingContext();
const countries = getAvailableCountries();
const businessTypes = getBusinessTypes();
+ const mccsFlatList = getMccsFlatList();
const selectedCountry = businessTypes.find(
( country ) => country.key === data.country
@@ -33,6 +32,14 @@ const BusinessDetails: React.FC = () => {
( type ) => type.key === data.business_type
);
+ const selectedBusinessStructure =
+ selectedBusinessType?.structures.length === 0 ||
+ selectedBusinessType?.structures.find(
+ ( structure ) => structure.key === data[ 'company.structure' ]
+ );
+
+ const selectedMcc = mccsFlatList.find( ( mcc ) => mcc.key === data.mcc );
+
const handleTiedChange = (
name: keyof OnboardingFields,
selectedItem?: Item | null
@@ -48,47 +55,83 @@ const BusinessDetails: React.FC = () => {
setData( newData );
};
- const mccsFlatList = getMccsFlatList();
-
return (
<>
-
-
-
- { selectedCountry && selectedCountry.types.length > 0 && (
-
handleTiedChange( 'country', null ),
+ },
+ ] }
+ status="info"
>
- { ( item: Item & BusinessType ) => (
-
-
{ item.name }
-
- { item.description }
-
-
+
+ { strings.inlineNotice.title }{ ' ' }
+ { selectedCountry.name }
+
+
) }
- { selectedBusinessType &&
- selectedBusinessType.structures.length > 0 && (
+ { ! selectedCountry && (
+
+
+ ) }
+ { selectedCountry && selectedCountry.types.length > 0 && (
+
+
+ { ( item: Item & BusinessType ) => (
+
+
{ item.name }
+
+ { item.description }
+
+
+ ) }
+ { selectedBusinessType &&
+ selectedBusinessType.structures.length > 0 && (
+
+
+
+ ) }
+ { selectedCountry &&
+ selectedBusinessType &&
+ selectedBusinessStructure && (
+
+
+
) }
-
+ { selectedCountry &&
+ selectedBusinessType &&
+ selectedBusinessStructure &&
+ selectedMcc && (
+
+ { strings.tos }
+
+ ) }
);
};
diff --git a/client/onboarding/steps/loading.tsx b/client/onboarding/steps/loading.tsx
index 232d609bf99..feb8053438d 100644
--- a/client/onboarding/steps/loading.tsx
+++ b/client/onboarding/steps/loading.tsx
@@ -9,7 +9,7 @@ import apiFetch from '@wordpress/api-fetch';
* Internal dependencies
*/
import { useOnboardingContext } from '../context';
-import { POEligibleData, POEligibleResult } from '../types';
+import { PoEligibleData, PoEligibleResult } from '../types';
import { fromDotNotation } from '../utils';
import { trackRedirected, useTrackAbandoned } from '../tracking';
import LoadBar from 'components/load-bar';
@@ -34,7 +34,7 @@ const LoadingStep: React.FC< Props > = () => {
) {
return false;
}
- const eligibilityDetails: POEligibleData = {
+ const eligibilityDetails: PoEligibleData = {
business: {
country: data.country,
type: data.business_type,
@@ -45,7 +45,7 @@ const LoadingStep: React.FC< Props > = () => {
go_live_timeframe: data.go_live_timeframe,
},
};
- const eligibleResult = await apiFetch< POEligibleResult >( {
+ const eligibleResult = await apiFetch< PoEligibleResult >( {
path: '/wc/v3/payments/onboarding/router/po_eligible',
method: 'POST',
data: eligibilityDetails,
diff --git a/client/onboarding/steps/personal-details.tsx b/client/onboarding/steps/personal-details.tsx
deleted file mode 100644
index 4941ca9df29..00000000000
--- a/client/onboarding/steps/personal-details.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-import { Flex, FlexBlock } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import strings from '../strings';
-import { OnboardingTextField, OnboardingPhoneNumberField } from '../form';
-import InlineNotice from 'components/inline-notice';
-
-const PersonalDetails: React.FC = () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- { strings.steps.personal.notice }
-
-
- );
-};
-
-export default PersonalDetails;
diff --git a/client/onboarding/steps/test/business-details.tsx b/client/onboarding/steps/test/business-details.tsx
index 66e889f60c7..2bfe392b532 100644
--- a/client/onboarding/steps/test/business-details.tsx
+++ b/client/onboarding/steps/test/business-details.tsx
@@ -172,58 +172,61 @@ const mccsFlatList = [
mocked( getMccsFlatList ).mockReturnValue( mccsFlatList );
describe( 'BusinessDetails', () => {
- it( 'renders and updates fields data when they are changed', () => {
+ it( 'renders and updates fields data when they are changed', async () => {
render(
);
- const businessNameField = screen.getByLabelText(
- strings.fields.business_name
- );
- const urlField = screen.getByLabelText( strings.fields.url );
- const countryField = screen.getByText( strings.placeholders.country );
+ const countryField = screen
+ .getByTestId( 'country-select' )
+ .querySelector( 'button' );
- user.type( businessNameField, 'John Doe LLC' );
- user.type( urlField, 'https://johndoe.com' );
+ if ( ! countryField ) {
+ throw new Error( 'Country select not found' );
+ }
- expect(
- screen.queryByText( strings.placeholders.business_type )
- ).not.toBeInTheDocument();
- expect(
- screen.queryByText( strings.placeholders[ 'company.structure' ] )
- ).not.toBeInTheDocument();
+ expect( countryField ).toBeInTheDocument();
user.click( countryField );
- user.click( screen.getByText( 'Spain' ) );
+ await screen.findByText( 'United States' );
+ user.click( screen.getByText( 'United States' ) );
- expect(
- screen.queryByText( strings.placeholders.business_type )
- ).not.toBeInTheDocument();
+ const businessTypeField = screen
+ .getByTestId( 'business-type-select' )
+ .querySelector( 'button' );
- user.click( countryField );
- user.click( screen.getByText( 'United States' ) );
+ if ( ! businessTypeField ) {
+ throw new Error( 'Business type select not found' );
+ }
- const businessTypeField = screen.getByText(
- strings.placeholders.business_type
- );
user.click( businessTypeField );
+ await screen.findByText( 'Company' );
user.click( screen.getByText( 'Company' ) );
- const companyStructureField = screen.getByText(
- strings.placeholders[ 'company.structure' ]
- );
+ const companyStructureField = screen
+ .getByTestId( 'business-structure-select' )
+ .querySelector( 'button' );
+
+ if ( ! companyStructureField ) {
+ throw new Error( 'Company structure select not found' );
+ }
user.click( companyStructureField );
+ await screen.findByText( 'Single member LLC' );
user.click( screen.getByText( 'Single member LLC' ) );
- const mccField = screen.getByText( strings.placeholders.mcc );
+ const mccField = screen
+ .getByTestId( 'mcc-select' )
+ .querySelector( 'button' );
+ if ( ! mccField ) {
+ throw new Error( 'MCC select not found' );
+ }
+
user.click( mccField );
+ await screen.findByText( 'Popular Software' );
user.click( screen.getByText( 'Popular Software' ) );
- expect( businessNameField ).toHaveValue( 'John Doe LLC' );
- expect( urlField ).toHaveValue( 'https://johndoe.com' );
- expect( countryField ).toHaveTextContent( 'United States' );
expect( businessTypeField ).toHaveTextContent( 'Company' );
expect( companyStructureField ).toHaveTextContent(
'Single member LLC'
diff --git a/client/onboarding/steps/test/personal-details.tsx b/client/onboarding/steps/test/personal-details.tsx
deleted file mode 100644
index 603cc8192c2..00000000000
--- a/client/onboarding/steps/test/personal-details.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import user from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import PersonalDetails from '../personal-details';
-import { OnboardingContextProvider } from '../../context';
-import strings from '../../strings';
-
-declare const global: {
- wcpaySettings: {
- connect: { country: string };
- };
-};
-
-describe( 'PersonalDetails', () => {
- it( 'renders and updates fields data when they are changed', () => {
- global.wcpaySettings = {
- connect: { country: 'US' },
- };
-
- render(
-
-
-
- );
- const firstNameField = screen.getByLabelText(
- strings.fields[ 'individual.first_name' ]
- );
- const lastNameField = screen.getByLabelText(
- strings.fields[ 'individual.last_name' ]
- );
- const emailField = screen.getByLabelText( strings.fields.email );
- const phoneField = screen.getByLabelText( strings.fields.phone );
-
- user.type( firstNameField, 'John' );
- user.type( lastNameField, 'Doe' );
- user.type( emailField, 'john@doe.com' );
- user.type( phoneField, '000000000' );
-
- expect( firstNameField ).toHaveValue( 'John' );
- expect( lastNameField ).toHaveValue( 'Doe' );
- expect( emailField ).toHaveValue( 'john@doe.com' );
- expect( phoneField ).toHaveValue( '000000000' );
- } );
-} );
diff --git a/client/onboarding/strings.tsx b/client/onboarding/strings.tsx
index 69bd69461e9..02ea32d2998 100644
--- a/client/onboarding/strings.tsx
+++ b/client/onboarding/strings.tsx
@@ -14,82 +14,9 @@ const documentationUrls = {
export default {
steps: {
- mode: {
- heading: __(
- 'Let’s get your store ready to accept payments',
- 'woocommerce-payments'
- ),
- subheading: __(
- 'Select the option that best fits your needs.',
- 'woocommerce-payments'
- ),
- 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' ),
- },
- 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: __(
- 'First, you’ll need to create an account',
- 'woocommerce-payments'
- ),
- subheading: __(
- 'The information below should reflect that of the business owner or an authorized team member.',
- 'woocommerce-payments'
- ),
- notice: __(
- 'We’ll use the email address to contact you with any important notifications related to your account, and the phone number will only be used to protect your account with two-factor authentication.',
- 'woocommerce-payments'
- ),
- },
business: {
heading: __(
- 'Tell us about your business',
+ 'Let’s get your store ready to accept payments',
'woocommerce-payments'
),
subheading: __(
@@ -109,25 +36,16 @@ export default {
},
loading: {
heading: __(
- 'Let’s get you set up for payments',
+ 'One last step! Verify your identity with our partner',
'woocommerce-payments'
),
subheading: __(
- 'Confirm your identity with our partner',
+ 'This will take place in a secure environment through our partner. Once your business details are verified, you’ll be redirected back to your store dashboard.',
'woocommerce-payments'
),
},
},
fields: {
- email: __( 'What’s your email address?', 'woocommerce-payments' ),
- 'individual.first_name': __( 'First name', 'woocommerce-payments' ),
- 'individual.last_name': __( 'Last name', 'woocommerce-payments' ),
- phone: __( 'What’s your mobile phone number?', 'woocommerce-payments' ),
- business_name: __(
- 'What’s the legal name of your business?',
- 'woocommerce-payments'
- ),
- url: __( 'What’s your business website?', 'woocommerce-payments' ),
country: __(
'Where is your business legally registered?',
'woocommerce-payments'
@@ -155,24 +73,6 @@ export default {
},
errors: {
generic: __( 'Please provide a response', 'woocommerce-payments' ),
- 'individual.first_name': __(
- 'Please provide a first name',
- 'woocommerce-payments'
- ),
- 'individual.last_name': __(
- 'Please provide a last name',
- 'woocommerce-payments'
- ),
- email: __( 'Please provide a valid email', 'woocommerce-payments' ),
- phone: __(
- 'Please provide a valid phone number',
- 'woocommerce-payments'
- ),
- url: __( 'Please provide a valid website', 'woocommerce-payments' ),
- business_name: __(
- 'Please provide a business name',
- 'woocommerce-payments'
- ),
country: __( 'Please provide a country', 'woocommerce-payments' ),
business_type: __(
'Please provide a business type',
@@ -184,22 +84,8 @@ export default {
),
},
placeholders: {
- country: __(
- 'Select the primary country of your business',
- 'woocommerce-payments'
- ),
- business_type: __(
- 'Select the legal structure of your business',
- 'woocommerce-payments'
- ),
- 'company.structure': __(
- 'Select the legal category of your business',
- 'woocommerce-payments'
- ),
- mcc: __(
- 'Select the primary industry of your business',
- 'woocommerce-payments'
- ),
+ generic: __( 'Select an option', 'woocommerce-payments' ),
+ country: __( 'Select a country', 'woocommerce-payments' ),
annual_revenue: __(
'Select your annual revenue',
'woocommerce-payments'
@@ -220,10 +106,47 @@ export default {
from_3_to_6months: __( '3 – 6 months', 'woocommerce-payments' ),
more_than_6months: __( '6+ months', 'woocommerce-payments' ),
},
- restoredState: __(
- 'We have restored your previous session. You can pick up where you left off, or go back to a previous step to make changes. ',
- 'woocommerce-payments'
- ),
+ tos: interpolateComponents( {
+ mixedString: sprintf(
+ __(
+ /* translators: %1$s: WooPayments, %2$s: WooPay */
+ 'By using %1$s, you agree to be bound by our {{tosLink}}Terms of Service{{/tosLink}} (including {{merchantTermsLink}}%2$s 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
+
+ ),
+ },
+ } ),
+ inlineNotice: {
+ title: __( 'Business Location:', 'woocommerce-payments' ),
+ action: __( 'Change', 'woocommerce-payments' ),
+ },
continue: __( 'Continue', 'woocommerce-payments' ),
back: __( 'Back', 'woocommerce-payments' ),
};
diff --git a/client/onboarding/style.scss b/client/onboarding/style.scss
index 8dbbef819e4..9408cd1e1ef 100644
--- a/client/onboarding/style.scss
+++ b/client/onboarding/style.scss
@@ -7,16 +7,6 @@ body.wcpay-onboarding__body {
}
.stepper {
- &__progress {
- position: fixed;
- top: 0;
- left: 0;
- height: 8px;
- background-color: var( --wp-admin-theme-color );
- z-index: 11;
- transition: width 250ms;
- }
-
&__nav {
position: fixed;
top: 0;
@@ -56,8 +46,8 @@ body.wcpay-onboarding__body {
}
&__wrapper {
- max-width: 600px;
- margin: 88px auto 0;
+ max-width: 620px;
+ margin: 116px auto 0;
display: flex;
flex-direction: column;
align-items: center;
@@ -65,6 +55,7 @@ body.wcpay-onboarding__body {
&__heading {
@include wp-title-large;
+ font-family: 'SF Pro Display', $default-font;
color: $studio-gray-100;
text-align: center;
}
@@ -89,10 +80,41 @@ body.wcpay-onboarding__body {
&__cta {
display: block;
width: 100%;
- margin-top: $gap-larger;
+ height: 40px; // Matching the updated WP Component. We can remove this when we update Components version.
+ margin-top: $gap-large;
+ }
+ }
+
+ .wcpay-inline-notice {
+ background-color: $gray-0;
+ &__content {
+ display: flex;
+ width: 100%;
+ &__title {
+ width: inherit;
+ }
+ &__actions {
+ width: auto;
+ padding-top: 0;
+ }
}
}
+ .wcpay-onboarding__tos {
+ font-size: 12px;
+ }
+
+ .wcpay-component-grouped-select-control__button-value {
+ color: $gray-900;
+ }
+
+ .complete-business-info-task__option-description {
+ font-size: 12px;
+ color: $gray-700;
+ line-height: 16px;
+ margin-top: 4px;
+ }
+
.loading-step {
max-width: 520px;
position: absolute;
@@ -125,10 +147,6 @@ body.wcpay-onboarding__body {
.components-form-field__error {
margin: -$gap 0 $gap;
}
-
- .restored-state-banner {
- margin: $gap 0;
- }
}
.wcpay-component-onboarding-card {
diff --git a/client/onboarding/test/context.tsx b/client/onboarding/test/context.tsx
index 3344cb1aa72..a9ffe225dea 100644
--- a/client/onboarding/test/context.tsx
+++ b/client/onboarding/test/context.tsx
@@ -23,13 +23,13 @@ describe( 'OnboardingContext', () => {
} = useOnboardingContext();
const handleClick = () => {
setData( {
- url: 'URL',
+ business_type: 'Individual',
} );
setErrors( {
- url: 'Required',
+ business_type: 'Required',
} );
setTouched( {
- url: true,
+ business_type: true,
} );
};
return (
@@ -42,7 +42,7 @@ describe( 'OnboardingContext', () => {
);
};
- const initialData = { url: 'Initial' };
+ const initialData = { business_type: 'Individual' };
render(
@@ -51,19 +51,21 @@ describe( 'OnboardingContext', () => {
);
expect(
- screen.getByText( 'data: {"url":"Initial"}' )
+ screen.getByText( 'data: {"business_type":"Individual"}' )
).toBeInTheDocument();
expect( screen.getByText( 'errors: {}' ) ).toBeInTheDocument();
expect( screen.getByText( 'touched: {}' ) ).toBeInTheDocument();
user.click( screen.getByText( 'Update Data' ) );
- expect( screen.getByText( 'data: {"url":"URL"}' ) ).toBeInTheDocument();
expect(
- screen.getByText( 'errors: {"url":"Required"}' )
+ screen.getByText( 'data: {"business_type":"Individual"}' )
).toBeInTheDocument();
expect(
- screen.getByText( 'touched: {"url":true}' )
+ screen.getByText( 'errors: {"business_type":"Required"}' )
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText( 'touched: {"business_type":true}' )
).toBeInTheDocument();
} );
diff --git a/client/onboarding/test/form.tsx b/client/onboarding/test/form.tsx
index d80b6601025..91abec821d6 100644
--- a/client/onboarding/test/form.tsx
+++ b/client/onboarding/test/form.tsx
@@ -12,7 +12,6 @@ import {
OnboardingForm,
OnboardingTextField,
OnboardingSelectField,
- OnboardingPhoneNumberField,
} from '../form';
declare const global: {
@@ -114,55 +113,65 @@ describe( 'Onboarding Form', () => {
describe( 'OnboardingTextField', () => {
it( 'renders component with provided props ', () => {
- data = { 'individual.first_name': 'John' };
+ data = { annual_revenue: 'Less than $250k' };
error.mockReturnValue( 'error message' );
- render( );
+ render( );
- const textField = screen.getByLabelText( 'First name' );
+ const textField = screen.getByLabelText(
+ 'What is your estimated annual Ecommerce revenue (USD)?'
+ );
const errorMessage = screen.getByText( 'error message' );
- expect( textField ).toHaveValue( 'John' );
+ expect( textField ).toHaveValue( 'Less than $250k' );
expect( errorMessage ).toBeInTheDocument();
} );
it( 'calls setData on change', () => {
- render( );
+ render( );
- const textField = screen.getByLabelText( 'First name' );
+ const textField = screen.getByLabelText(
+ 'What is your estimated annual Ecommerce revenue (USD)?'
+ );
textField.focus(); // Workaround for `type` not triggering focus.
- userEvent.type( textField, 'John' );
+ userEvent.type( textField, 'Less than $250k' );
expect( setData ).toHaveBeenCalledWith( {
- 'individual.first_name': 'John',
+ annual_revenue: 'Less than $250k',
} );
expect( validate ).not.toHaveBeenCalled();
} );
it( 'calls validate on change if touched', () => {
- touched = { 'individual.first_name': true };
- render( );
+ touched = { annual_revenue: true };
+ render( );
- const textField = screen.getByLabelText( 'First name' );
+ const textField = screen.getByLabelText(
+ 'What is your estimated annual Ecommerce revenue (USD)?'
+ );
userEvent.type( textField, 'John' );
expect( validate ).toHaveBeenCalledWith( 'John' );
} );
it( 'calls validate on change if not focused', () => {
- render( );
+ render( );
- const textField = screen.getByLabelText( 'First name' );
+ const textField = screen.getByLabelText(
+ 'What is your estimated annual Ecommerce revenue (USD)?'
+ );
userEvent.type( textField, 'John' );
expect( validate ).toHaveBeenCalledWith( 'John' );
} );
it( 'calls validate on blur', () => {
- render( );
+ render( );
- const textField = screen.getByLabelText( 'First name' );
+ const textField = screen.getByLabelText(
+ 'What is your estimated annual Ecommerce revenue (USD)?'
+ );
userEvent.type( textField, 'John' );
userEvent.tab();
fireEvent.focusOut( textField ); // Workaround for onFocus event not firing with jsdom <16.3.0
@@ -208,64 +217,4 @@ describe( 'Onboarding Form', () => {
expect( validate ).toHaveBeenCalledWith( 'individual' );
} );
} );
-
- describe( 'OnboardingPhoneNumberField', () => {
- it( 'renders component with provided props ', () => {
- data = { phone: '+123' };
- error.mockReturnValue( 'error message' );
-
- render( );
-
- const textField = screen.getByLabelText(
- 'What’s your mobile phone number?'
- );
- const errorMessage = screen.getByText( 'error message' );
-
- expect( textField ).toHaveValue( '23' );
- expect( errorMessage ).toBeInTheDocument();
- } );
-
- it( 'calls setTemp and setData on change', () => {
- render( );
-
- const textField = screen.getByLabelText(
- 'What’s your mobile phone number?'
- );
- userEvent.type( textField, '23' );
-
- expect( setTemp ).toHaveBeenCalledWith( {
- phoneCountryCode: 'US',
- } );
-
- expect( setData ).toHaveBeenCalledWith( {
- phone: '+123',
- } );
- expect( validate ).not.toHaveBeenCalledWith();
- } );
-
- it( 'only calls validate on change if touched', () => {
- touched = { phone: true };
- render( );
-
- const textField = screen.getByLabelText(
- 'What’s your mobile phone number?'
- );
- userEvent.type( textField, '23' );
-
- expect( validate ).toHaveBeenCalledWith( '+123' );
- } );
-
- it( 'calls validate on blur', () => {
- render( );
-
- const textField = screen.getByLabelText(
- 'What’s your mobile phone number?'
- );
- userEvent.type( textField, '23' );
- userEvent.tab();
- fireEvent.focusOut( textField ); // Workaround for onFocus event not firing with jsdom <16.3.0
-
- expect( validate ).toHaveBeenCalledWith();
- } );
- } );
} );
diff --git a/client/onboarding/test/validation.ts b/client/onboarding/test/validation.ts
index f5d167e11da..5bf58cdb02e 100644
--- a/client/onboarding/test/validation.ts
+++ b/client/onboarding/test/validation.ts
@@ -10,28 +10,6 @@ import { useValidation } from '../validation';
import { OnboardingContextProvider } from '../context';
describe( 'useValidation', () => {
- it( 'sets email error state for an invalid value', () => {
- const { result } = renderHook( () => useValidation( 'email' ), {
- wrapper: OnboardingContextProvider,
- } );
-
- act( () => result.current.validate( 'invalid' ) );
-
- expect( result.current.error() ).toEqual(
- 'Please provide a valid email'
- );
- } );
-
- it( 'sets email error state to undefined for a valid value', () => {
- const { result } = renderHook( () => useValidation( 'email' ), {
- wrapper: OnboardingContextProvider,
- } );
-
- act( () => result.current.validate( 'valid@email.com' ) );
-
- expect( result.current.error() ).toBeUndefined();
- } );
-
it( 'uses a generic string for a non existing error', () => {
const { result } = renderHook(
() => useValidation( 'annual_revenue' ),
diff --git a/client/onboarding/types.ts b/client/onboarding/types.ts
index 0f945551670..2f57aa08e94 100644
--- a/client/onboarding/types.ts
+++ b/client/onboarding/types.ts
@@ -2,15 +2,9 @@
* Internal dependencies
*/
-export type OnboardingSteps = 'personal' | 'business' | 'store' | 'loading';
+export type OnboardingSteps = 'business' | 'store' | 'loading';
export type OnboardingFields = {
- email?: string;
- 'individual.first_name'?: string;
- 'individual.last_name'?: string;
- phone?: string;
- business_name?: string;
- url?: string;
country?: string;
business_type?: string;
'company.structure'?: string;
@@ -19,11 +13,11 @@ export type OnboardingFields = {
go_live_timeframe?: string;
};
-export interface POEligibleResult {
+export interface PoEligibleResult {
result: 'eligible' | 'not_eligible';
}
-export interface POEligibleData {
+export interface PoEligibleData {
business: {
country: string;
type: string;
@@ -35,10 +29,6 @@ export interface POEligibleData {
};
}
-export type TempData = {
- phoneCountryCode?: string;
-};
-
export interface Country {
key: string;
name: string;
diff --git a/client/onboarding/utils.ts b/client/onboarding/utils.ts
index 4e5f392fb59..c45c218f9b0 100644
--- a/client/onboarding/utils.ts
+++ b/client/onboarding/utils.ts
@@ -2,15 +2,13 @@
* External dependencies
*/
import { set, toPairs } from 'lodash';
-import apiFetch from '@wordpress/api-fetch';
/**
* Internal dependencies
*/
-import { NAMESPACE } from 'data/constants';
import { ListItem } from 'components/grouped-select-control';
import businessTypeDescriptionStrings from './translations/descriptions';
-import { Country, OnboardingFields } from './types';
+import { Country } from './types';
export const fromDotNotation = (
record: Record< string, unknown >
@@ -86,14 +84,3 @@ export const getMccsFlatList = (): ListItem[] => {
];
}, [] as ListItem[] );
};
-
-export const persistFlowState = (
- currentStep: string,
- data: OnboardingFields
-): Promise< void > =>
- apiFetch( {
- path: `${ NAMESPACE }/onboarding/flow-state`,
- method: 'POST',
- data: { current_step: currentStep, data },
- parse: false,
- } );
diff --git a/client/onboarding/validation.ts b/client/onboarding/validation.ts
index d858b83e3d5..b55694dc1e6 100644
--- a/client/onboarding/validation.ts
+++ b/client/onboarding/validation.ts
@@ -14,10 +14,6 @@ const isValid = ( name: keyof OnboardingFields, value?: string ): boolean => {
if ( ! value ) return false;
switch ( name ) {
- case 'email':
- return value.includes( '@' );
- case 'phone':
- return /^\+\d{7,}$/.test( value );
default:
return true;
}
diff --git a/includes/admin/class-wc-payments-admin.php b/includes/admin/class-wc-payments-admin.php
index 9cb0e033a1b..d82c14f0cf5 100644
--- a/includes/admin/class-wc-payments-admin.php
+++ b/includes/admin/class-wc-payments-admin.php
@@ -805,7 +805,6 @@ private function get_js_settings(): array {
// Set this flag for use in the front-end to alter messages and notices if on-boarding has been disabled.
'onBoardingDisabled' => WC_Payments_Account::is_on_boarding_disabled(),
'onboardingFieldsData' => $this->onboarding_service->get_fields_data( get_user_locale() ),
- 'onboardingFlowState' => $this->onboarding_service->get_onboarding_flow_state(),
'errorMessage' => $error_message,
'featureFlags' => $this->get_frontend_feature_flags(),
'isSubscriptionsActive' => class_exists( 'WC_Subscriptions' ) && version_compare( WC_Subscriptions::$version, '2.2.0', '>=' ),
diff --git a/includes/admin/class-wc-rest-payments-onboarding-controller.php b/includes/admin/class-wc-rest-payments-onboarding-controller.php
index b8eab24046d..74cbac4dc9f 100644
--- a/includes/admin/class-wc-rest-payments-onboarding-controller.php
+++ b/includes/admin/class-wc-rest-payments-onboarding-controller.php
@@ -124,28 +124,6 @@ public function register_routes() {
'permission_callback' => [ $this, 'check_permission' ],
],
);
-
- register_rest_route(
- $this->namespace,
- '/' . $this->rest_base . '/flow-state',
- [
- 'methods' => WP_REST_Server::EDITABLE,
- 'callback' => [ $this, 'update_flow_state' ],
- 'permission_callback' => [ $this, 'check_permission' ],
- 'args' => [
- 'current_step' => [
- 'required' => true,
- 'description' => 'The current step of the onboarding process.',
- 'type' => 'string',
- ],
- 'data' => [
- 'required' => true,
- 'description' => 'The onboarding context data.',
- 'type' => 'object',
- ],
- ],
- ],
- );
}
/**
@@ -210,14 +188,4 @@ public function get_progressive_onboarding_eligible( WP_REST_Request $request )
]
);
}
-
- /**
- * Update the onboarding flow state.
- *
- * @param WP_REST_Request $request Request object.
- * @return void
- */
- public function update_flow_state( WP_REST_Request $request ) {
- $this->onboarding_service->set_onboarding_flow_state( $request->get_json_params() );
- }
}
diff --git a/includes/class-wc-payments-account.php b/includes/class-wc-payments-account.php
index 757f9b34018..e4e07883fed 100644
--- a/includes/class-wc-payments-account.php
+++ b/includes/class-wc-payments-account.php
@@ -1440,9 +1440,6 @@ private function init_stripe_onboarding( $wcpay_connect_from, $additional_args =
WC_Payments_Onboarding_Service::set_test_mode( true );
}
- // Clear persisted onboarding flow state.
- WC_Payments_Onboarding_Service::clear_onboarding_flow_state();
-
if ( ! $collect_payout_requirements ) {
// Clear onboarding related account options if this is an initial onboarding attempt.
WC_Payments_Onboarding_Service::clear_account_options();
diff --git a/includes/class-wc-payments-onboarding-service.php b/includes/class-wc-payments-onboarding-service.php
index 71453b2dda4..2fd28026802 100644
--- a/includes/class-wc-payments-onboarding-service.php
+++ b/includes/class-wc-payments-onboarding-service.php
@@ -18,7 +18,6 @@
class WC_Payments_Onboarding_Service {
const TEST_MODE_OPTION = 'wcpay_onboarding_test_mode';
- const ONBOARDING_FLOW_STATE_OPTION = 'wcpay_onboarding_flow_state';
const ONBOARDING_ELIGIBILITY_MODAL_OPTION = 'wcpay_onboarding_eligibility_modal_dismissed';
const SOURCE_WCADMIN_PAYMENT_TASK = 'wcadmin-payment-task';
const SOURCE_WCADMIN_SETTINGS_PAGE = 'wcadmin-settings-page';
@@ -206,34 +205,6 @@ public function add_admin_body_classes( string $classes = '' ): string {
return $classes;
}
- /**
- * Get the onboarding flow state.
- *
- * @return ?array The onboarding flow state, or null if not set.
- */
- public function get_onboarding_flow_state(): ?array {
- return get_option( self::ONBOARDING_FLOW_STATE_OPTION, null );
- }
-
- /**
- * Set the onboarding flow state.
- *
- * @param array $value The onboarding flow state.
- * @return bool Whether the option was updated successfully.
- */
- public function set_onboarding_flow_state( array $value ): bool {
- return update_option( self::ONBOARDING_FLOW_STATE_OPTION, $value );
- }
-
- /**
- * Clear the onboarding flow state.
- *
- * @return boolean Whether the option was deleted successfully.
- */
- public static function clear_onboarding_flow_state(): bool {
- return delete_option( self::ONBOARDING_FLOW_STATE_OPTION );
- }
-
/**
* Clear any account options we may want to reset when a new onboarding flow is initialised.
* Currently, just deletes the option which stores whether the eligibility modal has been dismissed.
diff --git a/tests/unit/admin/test-class-wc-rest-payments-onboarding-controller.php b/tests/unit/admin/test-class-wc-rest-payments-onboarding-controller.php
index ee220f5b43c..06606c14902 100644
--- a/tests/unit/admin/test-class-wc-rest-payments-onboarding-controller.php
+++ b/tests/unit/admin/test-class-wc-rest-payments-onboarding-controller.php
@@ -193,23 +193,4 @@ public function test_get_progressive_onboarding_not_eligible() {
$response->get_data()
);
}
-
- public function test_update_flow_state() {
- $state = [
- 'current_step' => 'personal',
- 'data' => [],
- ];
-
- $request = new WP_REST_Request( 'POST' );
- $request->set_header( 'Content-Type', 'application/json' );
- $request->set_body( wp_json_encode( $state ) );
-
- $this->mock_onboarding_service
- ->expects( $this->once() )
- ->method( 'set_onboarding_flow_state' )
- ->with( $state )
- ->willReturn( true );
-
- $this->controller->update_flow_state( $request );
- }
}
diff --git a/tests/unit/test-class-wc-payments-onboarding-service.php b/tests/unit/test-class-wc-payments-onboarding-service.php
index 4cdc5596842..7f32038c975 100644
--- a/tests/unit/test-class-wc-payments-onboarding-service.php
+++ b/tests/unit/test-class-wc-payments-onboarding-service.php
@@ -220,26 +220,6 @@ public function test_set_test_mode() {
delete_option( 'wcpay_onboarding_test_mode' );
}
- public function test_get_onboarding_flow_state() {
- $this->assertNull( $this->onboarding_service->get_onboarding_flow_state() );
-
- update_option( WC_Payments_Onboarding_Service::ONBOARDING_FLOW_STATE_OPTION, [] );
-
- $this->assertEquals( [], $this->onboarding_service->get_onboarding_flow_state() );
-
- delete_option( WC_Payments_Onboarding_Service::ONBOARDING_FLOW_STATE_OPTION );
- }
-
- public function test_set_onboarding_flow_state() {
- $this->assertFalse( get_option( WC_Payments_Onboarding_Service::ONBOARDING_FLOW_STATE_OPTION ) );
-
- $this->onboarding_service->set_onboarding_flow_state( [] );
-
- $this->assertEquals( [], get_option( WC_Payments_Onboarding_Service::ONBOARDING_FLOW_STATE_OPTION ) );
-
- delete_option( WC_Payments_Onboarding_Service::ONBOARDING_FLOW_STATE_OPTION );
- }
-
/**
* @dataProvider data_get_source
*/