♻️ Separate eligibility flags from user input

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

@@ -32,7 +32,7 @@ export const setIsSaving = ( isSaving ) => {
 /**
  * Persistent. Set the full onboarding details, usually during app initialization.
  *
- * @param {Object} payload
+ * @param {{data: {}, flags?: {}}} payload
  * @return {{type: string, payload}} The action.
  */
 export const setOnboardingDetails = ( payload ) => {

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

@@ -3,6 +3,8 @@ import ACTION_TYPES from './action-types';
 const defaultState = {
 	isReady: false,
 	isSaving: false,
+
+	// Data persisted to the server.
 	data: {
 		completed: false,
 		step: 0,
@@ -10,6 +12,10 @@ const defaultState = {
 		useManualConnection: false,
 		clientId: '',
 		clientSecret: '',
+	},
+
+	// Read only values, provided by the server.
+	flags: {
 		canUseCasualSelling: false,
 		canUseVaulting: false,
 		canUseCardPayments: false,
@@ -49,7 +55,13 @@ export const onboardingReducer = (
 
 		// Persistent data.
 		case ACTION_TYPES.SET_ONBOARDING_DETAILS:
-			return setPersistent( action.payload );
+			const newState = setPersistent( action.payload.data );
+
+			if ( action.payload.flags ) {
+				newState.flags = { ...newState.flags, ...action.payload.flags };
+			}
+
+			return newState;
 
 		case ACTION_TYPES.SET_ONBOARDING_COMPLETED:
 			return setPersistent( { completed: action.completed } );

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

@@ -13,6 +13,10 @@ export const getPersistentData = ( state ) => {
 };
 
 export const getTransientData = ( state ) => {
-	const { data, ...transientState } = getOnboardingState( state );
+	const { data, flags, ...transientState } = getOnboardingState( state );
 	return transientState || EMPTY_OBJ;
 };
+
+export const getFlags = ( state ) => {
+	return getOnboardingState( state ).flags || EMPTY_OBJ;
+};

modules/ppcp-settings/src/Data/OnboardingProfile.php

@@ -29,6 +29,13 @@ class OnboardingProfile extends AbstractDataModel {
 	 */
 	protected const OPTION_KEY = 'woocommerce-ppcp-data-onboarding';
 
+	/**
+	 * List of customization flags, provided by the server (read-only).
+	 *
+	 * @var array
+	 */
+	protected array $flags = array();
+
 	/**
 	 * Constructor.
 	 *
@@ -45,9 +52,9 @@ class OnboardingProfile extends AbstractDataModel {
 	) {
 		parent::__construct();
 
-		$this->data['can_use_casual_selling'] = $can_use_casual_selling;
+		$this->flags['can_use_casual_selling'] = $can_use_casual_selling;
-		$this->data['can_use_vaulting']       = $can_use_vaulting;
+		$this->flags['can_use_vaulting']       = $can_use_vaulting;
-		$this->data['can_use_card_payments']  = $can_use_card_payments;
+		$this->flags['can_use_card_payments']  = $can_use_card_payments;
 	}
 
 	/**
@@ -57,15 +64,12 @@ class OnboardingProfile extends AbstractDataModel {
 	 */
 	protected function get_defaults() : array {
 		return array(
-			'completed'              => false,
+			'completed'             => false,
-			'step'                   => 0,
+			'step'                  => 0,
-			'use_sandbox'            => false,
+			'use_sandbox'           => false,
-			'use_manual_connection'  => false,
+			'use_manual_connection' => false,
-			'client_id'              => '',
+			'client_id'             => '',
-			'client_secret'          => '',
+			'client_secret'         => '',
-			'can_use_casual_selling' => null,
-			'can_use_vaulting'       => null,
-			'can_use_card_payments'  => null,
 		);
 	}
 
@@ -180,29 +184,11 @@ class OnboardingProfile extends AbstractDataModel {
 	}
 
 	/**
-	 * Gets whether casual selling can be used.
+	 * Returns the list of read-only customization flags
 	 *
-	 * @return bool
+	 * @return array
 	 */
-	public function get_can_use_casual_selling() : bool {
+	public function get_flags() : array {
-		return (bool) $this->data['can_use_casual_selling'];
+		return $this->flags;
-	}
-
-	/**
-	 * Gets whether vaulting can be used.
-	 *
-	 * @return bool
-	 */
-	public function get_can_use_vaulting() : bool {
-		return (bool) $this->data['can_use_vaulting'];
-	}
-
-	/**
-	 * Gets whether Credit Card payments can be used.
-	 *
-	 * @return bool
-	 */
-	public function get_can_use_card_payments() : bool {
-		return (bool) $this->data['can_use_card_payments'];
 	}
 }

modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php

@@ -41,41 +41,46 @@ class OnboardingRestEndpoint extends RestEndpoint {
 	 * @var array
 	 */
 	private array $field_map = array(
-		'completed'              => array(
+		'completed'             => array(
 			'js_name'  => 'completed',
 			'sanitize' => 'to_boolean',
 		),
-		'step'                   => array(
+		'step'                  => array(
 			'js_name'  => 'step',
 			'sanitize' => 'to_number',
 		),
-		'use_sandbox'            => array(
+		'use_sandbox'           => array(
 			'js_name'  => 'useSandbox',
 			'sanitize' => 'to_boolean',
 		),
-		'use_manual_connection'  => array(
+		'use_manual_connection' => array(
 			'js_name'  => 'useManualConnection',
 			'sanitize' => 'to_boolean',
 		),
-		'client_id'              => array(
+		'client_id'             => array(
 			'js_name'  => 'clientId',
 			'sanitize' => 'sanitize_text_field',
 		),
-		'client_secret'          => array(
+		'client_secret'         => array(
 			'js_name'  => 'clientSecret',
 			'sanitize' => 'sanitize_text_field',
 		),
+	);
+
+	/**
+	 * Map the internal flags to JS names.
+	 *
+	 * @var array
+	 */
+	private array $flag_map = array(
 		'can_use_casual_selling' => array(
-			'js_name'  => 'canUseCasualSelling',
+			'js_name' => 'canUseCasualSelling',
-			'sanitize' => 'read_only',
 		),
 		'can_use_vaulting'       => array(
-			'js_name'  => 'canUseVaulting',
+			'js_name' => 'canUseVaulting',
-			'sanitize' => 'read_only',
 		),
 		'can_use_card_payments'  => array(
-			'js_name'  => 'canUseCardPayments',
+			'js_name' => 'canUseCardPayments',
-			'sanitize' => 'read_only',
 		),
 	);
 
@@ -128,7 +133,17 @@ class OnboardingRestEndpoint extends RestEndpoint {
 			$this->field_map
 		);
 
-		return rest_ensure_response( $js_data );
+		$js_flags = $this->sanitize_for_javascript(
+			$this->profile->get_flags(),
+			$this->flag_map
+		);
+
+		return rest_ensure_response(
+			array(
+				'data'  => $js_data,
+				'flags' => $js_flags,
+			)
+		);
 	}
 
 	/**