✨ Finish initial Redux store

modules/ppcp-settings/resources/js/App.js

@@ -1,8 +1,40 @@
 import * as Store from './data';
 
-export function App() {
-	// We need to "use" the Store variable, to prevent webpack from tree-shaking it.
-	console.log( 'Store ready:', Store );
+const StoreTest = () => {
+	const { isSaving, onboardingStep, setOnboardingStep } =
+		Store.useOnboardingDetails();
 
-	return <div className="red">App with Store</div>;
+	return (
+		<div>
+			<hr />
+			<div>Onboarding Step: { onboardingStep }</div>
+			<div>{ isSaving ? 'Saving...' : 'Not Saving' }</div>
+
+			<div>
+				<button
+					type={ 'button' }
+					onClick={ () => setOnboardingStep( onboardingStep - 1 ) }
+					disabled={ onboardingStep < 1 }
+				>
+					Prev
+				</button>
+				<button
+					type={ 'button' }
+					onClick={ () => setOnboardingStep( onboardingStep + 1 ) }
+					disabled={ onboardingStep > 3 }
+				>
+					Next
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export function App() {
+	return (
+		<div className="red">
+			App
+			<StoreTest />
+		</div>
+	);
 }

modules/ppcp-settings/resources/js/data/index.js

@@ -4,3 +4,4 @@ import { initStore } from './store';
 initStore();
 
 export const WC_PAYPAL_STORE_NAME = STORE_NAME;
+export * from './onboarding/hooks';

modules/ppcp-settings/resources/js/data/onboarding/action-types.js

@@ -1,4 +1,5 @@
 export default {
 	SET_ONBOARDING_DETAILS: 'SET_ONBOARDING_DETAILS',
 	SET_IS_SAVING_ONBOARDING_DETAILS: 'SET_IS_SAVING_ONBOARDING_DETAILS',
+	SET_ONBOARDING_STEP: 'SET_ONBOARDING_STEP',
 };

modules/ppcp-settings/resources/js/data/onboarding/actions.js

@@ -1,5 +1,6 @@
 import { dispatch, select } from '@wordpress/data';
 import { apiFetch } from '@wordpress/data-controls';
+import { __ } from '@wordpress/i18n';
 import ACTION_TYPES from './action-types';
 import { NAMESPACE, STORE_NAME } from '../constants';
 
@@ -16,36 +17,50 @@ export const updateOnboardingDetails = ( payload ) => {
 	};
 };
 
+/**
+ * Persistent. Sets the onboarding wizard to a new step.
+ *
+ * @param {number} step
+ * @return {{type: string, step}} An action.
+ */
+export const setOnboardingStep = ( step ) => {
+	return {
+		type: ACTION_TYPES.SET_ONBOARDING_STEP,
+		step,
+	};
+};
+
 /**
  * Non-persistent. Changes the "saving" flag.
  *
  * @param {boolean} isSaving
  * @return {{type: string, isSaving}} The action.
  */
-export function updateIsSavingOnboardingDetails( isSaving ) {
+export const updateIsSaving = ( isSaving ) => {
 	return {
 		type: ACTION_TYPES.SET_IS_SAVING_ONBOARDING_DETAILS,
 		isSaving,
 	};
-}
+};
 
 /**
  * Saves the persistent details to the WP database.
  *
  * @return {Generator<any>} A generator function that handles the saving process.
  */
-export function* saveOnboardingDetails() {
+export function* persist() {
 	let error = null;
 
 	try {
-		const settings = select( STORE_NAME ).getOnboardingDetails();
+		const path = `${ NAMESPACE }/onboarding`;
+		const data = select( STORE_NAME ).getOnboardingData();
 
-		yield updateIsSavingOnboardingDetails( true );
+		yield updateIsSaving( true );
 
 		yield apiFetch( {
-			path: `${ NAMESPACE }/onboarding`,
-			method: 'POST',
-			data: settings,
+			path,
+			method: 'post',
+			data,
 		} );
 
 		yield dispatch( 'core/notices' ).createSuccessNotice(
@@ -57,7 +72,7 @@ export function* saveOnboardingDetails() {
 			__( 'Error saving progress.', 'woocommerce-paypal-payments' )
 		);
 	} finally {
-		yield updateIsSavingOnboardingDetails( false );
+		yield updateIsSaving( false );
 	}
 
 	return error === null;

modules/ppcp-settings/resources/js/data/onboarding/hooks.js

@@ -0,0 +1,23 @@
+import { useSelect, useDispatch } from '@wordpress/data';
+import { STORE_NAME } from '../constants';
+
+export const useOnboardingDetails = () => {
+	const { setOnboardingStep, persist } = useDispatch( STORE_NAME );
+
+	const onboardingStep = useSelect( ( select ) => {
+		return select( STORE_NAME ).getOnboardingStep();
+	}, [] );
+
+	const isSaving = useSelect( ( select ) => {
+		return select( STORE_NAME ).isSaving();
+	}, [] );
+
+	return {
+		onboardingStep,
+		isSaving,
+		setOnboardingStep: async ( step ) => {
+			setOnboardingStep( step );
+			await persist();
+		},
+	};
+};

modules/ppcp-settings/resources/js/data/onboarding/reducer.js

@@ -23,6 +23,17 @@ export const onboardingReducer = (
 				...state,
 				isSaving: action.isSaving,
 			};
+
+		case ACTION_TYPES.SET_ONBOARDING_STEP:
+			return {
+				...state,
+				data: {
+					...( state.data || {} ),
+					step: action.step,
+				},
+			};
+
+		default:
 	}
 
 	return state;

modules/ppcp-settings/resources/js/data/onboarding/resolvers.js

@@ -7,7 +7,7 @@ import { updateOnboardingDetails } from './actions';
 /**
  * Retrieve settings from the site's REST API.
  */
-export function* getOnboardingDetails() {
+export function* getOnboardingData() {
 	const path = `${ NAMESPACE }/onboarding`;
 
 	try {

modules/ppcp-settings/resources/js/data/onboarding/selectors.js

@@ -8,10 +8,14 @@ const getOnboardingState = ( state ) => {
 	return state.onboarding || EMPTY_OBJ;
 };
 
-export const getOnboardingDetails = ( state ) => {
+export const getOnboardingData = ( state ) => {
 	return getOnboardingState( state ).data || EMPTY_OBJ;
 };
 
-export const getOnboardingStep = ( state ) => {
-	return getOnboardingDetails( state ).step || 0;
+export const isSaving = ( state ) => {
+	return getOnboardingState( state ).isSaving || false;
+};
+
+export const getOnboardingStep = ( state ) => {
+	return getOnboardingData( state ).step || 0;
 };