Move the pre-launch checklist from step 3 to 4 for the MC setup

js/src/components/free-listings/configure-product-listings/__snapshots__/checkErrors.test.js.snap

@@ -6,26 +6,6 @@ exports[`checkErrors For tax rate, if selected country codes include 'US' When t
 
 exports[`checkErrors For tax rate, if selected country codes include 'US' When the tax rate option is an invalid value or missing, should not pass 3`] = `"Please specify tax rate option."`;
 
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 1`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 2`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 3`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 4`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 5`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 6`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 7`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 8`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 9`] = `"Please check the requirement."`;
-
-exports[`checkErrors Requirements When there are any requirements are not true, should not pass 10`] = `"Please check the requirement."`;
-
 exports[`checkErrors Shipping rates For flat type When the free shipping threshold is an invalid value or missing, should not pass 1`] = `"Please specify a valid minimum order price for free shipping"`;
 
 exports[`checkErrors Shipping rates For flat type When the free shipping threshold is an invalid value or missing, should not pass 2`] = `"Please specify a valid minimum order price for free shipping"`;

js/src/components/free-listings/configure-product-listings/checkErrors.js

@@ -82,44 +82,6 @@ const checkErrors = (
 		);
 	}
 
-	/**
-	 * Pre-launch checklist.
-	 */
-	if ( values.website_live !== true ) {
-		errors.website_live = __(
-			'Please check the requirement.',
-			'google-listings-and-ads'
-		);
-	}
-
-	if ( values.checkout_process_secure !== true ) {
-		errors.checkout_process_secure = __(
-			'Please check the requirement.',
-			'google-listings-and-ads'
-		);
-	}
-
-	if ( values.payment_methods_visible !== true ) {
-		errors.payment_methods_visible = __(
-			'Please check the requirement.',
-			'google-listings-and-ads'
-		);
-	}
-
-	if ( values.refund_tos_visible !== true ) {
-		errors.refund_tos_visible = __(
-			'Please check the requirement.',
-			'google-listings-and-ads'
-		);
-	}
-
-	if ( values.contact_info_visible !== true ) {
-		errors.contact_info_visible = __(
-			'Please check the requirement.',
-			'google-listings-and-ads'
-		);
-	}
-
 	return errors;
 };
 

js/src/components/free-listings/configure-product-listings/checkErrors.test.js

@@ -33,11 +33,6 @@ describe( 'checkErrors', () => {
 			offers_free_shipping: true,
 			free_shipping_threshold: 100,
 			tax_rate: 'manual',
-			website_live: true,
-			checkout_process_secure: true,
-			payment_methods_visible: true,
-			refund_tos_visible: true,
-			contact_info_visible: true,
 		};
 		const rates = toRates( [ 'US', 10 ], [ 'JP', 30 ] );
 		const times = toTimes( [ 'US', 3 ], [ 'JP', 10 ] );
@@ -53,7 +48,6 @@ describe( 'checkErrors', () => {
 
 		expect( errors ).toHaveProperty( 'shipping_rate' );
 		expect( errors ).toHaveProperty( 'shipping_time' );
-		expect( errors ).toHaveProperty( 'website_live' );
 	} );
 
 	describe( 'Shipping rates', () => {
@@ -322,70 +316,4 @@ describe( 'checkErrors', () => {
 			expect( errors ).not.toHaveProperty( 'tax_rate' );
 		} );
 	} );
-
-	describe( 'Requirements', () => {
-		it( 'When there are any requirements are not true, should not pass', () => {
-			// Not set yet
-			let errors = checkErrors( {}, [], [], [] );
-
-			expect( errors ).toHaveProperty( 'website_live' );
-			expect( errors.website_live ).toMatchSnapshot();
-
-			expect( errors ).toHaveProperty( 'checkout_process_secure' );
-			expect( errors.checkout_process_secure ).toMatchSnapshot();
-
-			expect( errors ).toHaveProperty( 'payment_methods_visible' );
-			expect( errors.payment_methods_visible ).toMatchSnapshot();
-
-			expect( errors ).toHaveProperty( 'refund_tos_visible' );
-			expect( errors.refund_tos_visible ).toMatchSnapshot();
-
-			expect( errors ).toHaveProperty( 'contact_info_visible' );
-			expect( errors.contact_info_visible ).toMatchSnapshot();
-
-			// Invalid value
-			const values = {
-				website_live: false,
-				checkout_process_secure: 1,
-				payment_methods_visible: 'true',
-				refund_tos_visible: [],
-				contact_info_visible: {},
-			};
-
-			errors = checkErrors( values, [], [], [] );
-
-			expect( errors ).toHaveProperty( 'website_live' );
-			expect( errors.website_live ).toMatchSnapshot();
-
-			expect( errors ).toHaveProperty( 'checkout_process_secure' );
-			expect( errors.checkout_process_secure ).toMatchSnapshot();
-
-			expect( errors ).toHaveProperty( 'payment_methods_visible' );
-			expect( errors.payment_methods_visible ).toMatchSnapshot();
-
-			expect( errors ).toHaveProperty( 'refund_tos_visible' );
-			expect( errors.refund_tos_visible ).toMatchSnapshot();
-
-			expect( errors ).toHaveProperty( 'contact_info_visible' );
-			expect( errors.contact_info_visible ).toMatchSnapshot();
-		} );
-
-		it( 'When all requirements are true, should pass', () => {
-			const values = {
-				website_live: true,
-				checkout_process_secure: true,
-				payment_methods_visible: true,
-				refund_tos_visible: true,
-				contact_info_visible: true,
-			};
-
-			const errors = checkErrors( values, [], [], [] );
-
-			expect( errors ).not.toHaveProperty( 'website_live' );
-			expect( errors ).not.toHaveProperty( 'checkout_process_secure' );
-			expect( errors ).not.toHaveProperty( 'payment_methods_visible' );
-			expect( errors ).not.toHaveProperty( 'refund_tos_visible' );
-			expect( errors ).not.toHaveProperty( 'contact_info_visible' );
-		} );
-	} );
 } );

js/src/data/reducer.js

@@ -143,10 +143,16 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 
 		case TYPES.RECEIVE_SETTINGS:
 		case TYPES.SAVE_SETTINGS: {
-			const { settings } = action;
-			const newState = cloneDeep( state );
-			newState.mc.settings = settings;
-			return newState;
+			return {
+				...state,
+				mc: {
+					...state.mc,
+					settings: {
+						...state.mc.settings,
+						...action.settings,
+					},
+				},
+			};
 		}
 
 		case TYPES.RECEIVE_ACCOUNTS_JETPACK: {

js/src/setup-mc/setup-stepper/setup-free-listings/form-content.js

@@ -5,7 +5,6 @@ import StepContent from '.~/components/stepper/step-content';
 import StepContentFooter from '.~/components/stepper/step-content-footer';
 import CombinedShipping from './combined-shipping';
 import TaxRate from '.~/components/free-listings/configure-product-listings/tax-rate';
-import PreLaunchChecklist from './pre-launch-checklist';
 import useAutoSaveSettingsEffect from './useAutoSaveSettingsEffect';
 import useDisplayTaxRate from '.~/components/free-listings/configure-product-listings/useDisplayTaxRate';
 import useTargetAudienceFinalCountryCodes from '.~/hooks/useTargetAudienceFinalCountryCodes';
@@ -32,7 +31,6 @@ const FormContent = ( props ) => {
 			<ConditionalSection show={ shouldDisplayTaxRate }>
 				<TaxRate formProps={ formProps } />
 			</ConditionalSection>
-			<PreLaunchChecklist formProps={ formProps } />
 			<StepContentFooter>{ submitButton }</StepContentFooter>
 		</StepContent>
 	);

js/src/setup-mc/setup-stepper/setup-free-listings/index.js

@@ -75,11 +75,6 @@ const SetupFreeListings = ( props ) => {
 					free_shipping_threshold: settings.free_shipping_threshold,
 					shipping_time: settings.shipping_time,
 					tax_rate: settings.tax_rate,
-					website_live: settings.website_live,
-					checkout_process_secure: settings.checkout_process_secure,
-					payment_methods_visible: settings.payment_methods_visible,
-					refund_tos_visible: settings.refund_tos_visible,
-					contact_info_visible: settings.contact_info_visible,
 				} }
 				validate={ handleValidate }
 				onSubmitCallback={ handleSubmitCallback }

js/src/setup-mc/setup-stepper/store-requirements/index.js

@@ -14,28 +14,32 @@ import { useAppDispatch } from '.~/data';
 import useAdminUrl from '.~/hooks/useAdminUrl';
 import useGoogleMCPhoneNumber from '.~/hooks/useGoogleMCPhoneNumber';
 import useStoreAddress from '.~/hooks/useStoreAddress';
+import useSettings from '.~/components/free-listings/configure-product-listings/useSettings';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import StepContent from '.~/components/stepper/step-content';
 import StepContentHeader from '.~/components/stepper/step-content-header';
 import StepContentFooter from '.~/components/stepper/step-content-footer';
 import ContactInformation from '.~/components/contact-information';
 import AppButton from '.~/components/app-button';
+import PreLaunchChecklist from './pre-launch-checklist';
+import checkErrors from './pre-launch-checklist/checkErrors';
 
 export default function StoreRequirements() {
 	const adminUrl = useAdminUrl();
-	const { updateGoogleMCContactInformation } = useAppDispatch();
+	const { updateGoogleMCContactInformation, saveSettings } = useAppDispatch();
 	const { createNotice } = useDispatchCoreNotices();
 	const { data: initPhoneNumber } = useGoogleMCPhoneNumber();
 	const { data: address } = useStoreAddress();
+	const { settings } = useSettings();
+
 	const [ completing, setCompleting ] = useState( false );
 	const [ phoneNumber, setPhoneNumber ] = useState( {
 		isValid: false,
 		isDirty: false,
 	} );
 
-	const handleValidate = () => {
-		// TODO: [lite-contact-info] add validation for pre-launch checklist
-		return {};
+	const handleChangeCallback = ( _, values ) => {
+		saveSettings( values );
 	};
 
 	const handleSubmitCallback = async () => {
@@ -85,8 +89,16 @@ export default function StoreRequirements() {
 				) }
 			/>
 			<Form
-				initialValues={ {} }
-				validate={ handleValidate }
+				initialValues={ {
+					website_live: settings.website_live,
+					checkout_process_secure: settings.checkout_process_secure,
+					payment_methods_visible: settings.payment_methods_visible,
+					refund_tos_visible: settings.refund_tos_visible,
+					contact_info_visible: settings.contact_info_visible,
+				} }
+				validate={ checkErrors }
+				onChangeCallback={ handleChangeCallback }
+				onChange={ handleChangeCallback }
 				onSubmitCallback={ handleSubmitCallback }
 				onSubmit={ handleSubmitCallback }
 			>
@@ -108,7 +120,7 @@ export default function StoreRequirements() {
 								view="setup-mc"
 								onPhoneNumberChange={ setPhoneNumber }
 							/>
-							<div>TODO: move pre-lauch checklist to here</div>
+							<PreLaunchChecklist formProps={ formProps } />
 							<StepContentFooter>
 								<AppButton
 									isPrimary

js/src/setup-mc/setup-stepper/store-requirements/pre-launch-checklist/__snapshots__/checkErrors.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 1`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 2`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 3`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 4`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 5`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 6`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 7`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 8`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 9`] = `"Please check the requirement."`;
+
+exports[`checkErrors Requirements When there are any requirements are not true, should not pass 10`] = `"Please check the requirement."`;

js/src/setup-mc/setup-stepper/store-requirements/pre-launch-checklist/checkErrors.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default function checkErrors( values ) {
+	const errors = {};
+
+	/**
+	 * Pre-launch checklist.
+	 */
+	if ( values.website_live !== true ) {
+		errors.website_live = __(
+			'Please check the requirement.',
+			'google-listings-and-ads'
+		);
+	}
+
+	if ( values.checkout_process_secure !== true ) {
+		errors.checkout_process_secure = __(
+			'Please check the requirement.',
+			'google-listings-and-ads'
+		);
+	}
+
+	if ( values.payment_methods_visible !== true ) {
+		errors.payment_methods_visible = __(
+			'Please check the requirement.',
+			'google-listings-and-ads'
+		);
+	}
+
+	if ( values.refund_tos_visible !== true ) {
+		errors.refund_tos_visible = __(
+			'Please check the requirement.',
+			'google-listings-and-ads'
+		);
+	}
+
+	if ( values.contact_info_visible !== true ) {
+		errors.contact_info_visible = __(
+			'Please check the requirement.',
+			'google-listings-and-ads'
+		);
+	}
+
+	return errors;
+}