New Settings UI: Apply feedback

This commit is contained in:
Himad M 2024-12-03 15:24:49 -04:00
parent a06a74004c
commit 4f0f71f5e0
No known key found for this signature in database
GPG key ID: 5FC769E9888A7B98
5 changed files with 37 additions and 27 deletions

View file

@ -43,7 +43,11 @@ const useHooks = () => {
const clientSecret = usePersistent( 'clientSecret' ); const clientSecret = usePersistent( 'clientSecret' );
const isSandboxMode = usePersistent( 'useSandbox' ); const isSandboxMode = usePersistent( 'useSandbox' );
const isManualConnectionMode = usePersistent( 'useManualConnection' ); const isManualConnectionMode = usePersistent( 'useManualConnection' );
const flags = usePersistent( 'flags' );
const wooSettings = useSelect(
( select ) => select( STORE_NAME ).wooSettings(),
[]
);
const savePersistent = async ( setter, value ) => { const savePersistent = async ( setter, value ) => {
setter( value ); setter( value );
@ -70,7 +74,7 @@ const useHooks = () => {
}, },
connectViaSandbox, connectViaSandbox,
connectViaIdAndSecret, connectViaIdAndSecret,
flags, wooSettings,
}; };
}; };
@ -113,7 +117,6 @@ export const useManualConnection = () => {
}; };
export const useWooSettings = () => { export const useWooSettings = () => {
const { flags = {} } = useHooks(); const { wooSettings } = useHooks();
const { country, currency } = flags; return wooSettings;
return { storeCountry: country, storeCurrency: currency };
}; };

View file

@ -22,10 +22,6 @@ const defaultPersistent = {
useManualConnection: false, useManualConnection: false,
clientId: '', clientId: '',
clientSecret: '', clientSecret: '',
flags: {
country: '',
currency: '',
},
}; };
// Reducer logic. // Reducer logic.
@ -42,11 +38,18 @@ const commonReducer = createReducer( defaultTransient, defaultPersistent, {
[ ACTION_TYPES.SET_PERSISTENT ]: ( state, action ) => [ ACTION_TYPES.SET_PERSISTENT ]: ( state, action ) =>
setPersistent( state, action ), setPersistent( state, action ),
[ ACTION_TYPES.HYDRATE ]: ( state, payload ) => [ ACTION_TYPES.HYDRATE ]: ( state, payload ) => {
setPersistent( state, { const newState = setPersistent( state, payload.data );
...payload.data,
flags: payload.flags, if ( payload.wooSettings ) {
} ), newState.wooSettings = {
...newState.wooSettings,
...payload.wooSettings,
};
}
return newState;
},
} ); } );
export default commonReducer; export default commonReducer;

View file

@ -16,6 +16,10 @@ export const persistentData = ( state ) => {
}; };
export const transientData = ( state ) => { export const transientData = ( state ) => {
const { data, ...transientState } = getState( state ); const { data, wooSettings, ...transientState } = getState( state ); // ← extract the wooSettings, to ensure they are not part of the "transientState" collection.
return transientState || EMPTY_OBJ; return transientState || EMPTY_OBJ;
}; };
export const wooSettings = ( state ) => {
return getState( state ).wooSettings || EMPTY_OBJ;
};

View file

@ -34,7 +34,7 @@ class CommonSettings extends AbstractDataModel {
* *
* @var array * @var array
*/ */
protected array $flags = array(); protected array $woo_settings = array();
/** /**
* Constructor. * Constructor.
@ -44,8 +44,8 @@ class CommonSettings extends AbstractDataModel {
*/ */
public function __construct( string $country, string $currency ) { public function __construct( string $country, string $currency ) {
parent::__construct(); parent::__construct();
$this->flags['country'] = $country; $this->woo_settings['country'] = $country;
$this->flags['currency'] = $currency; $this->woo_settings['currency'] = $currency;
} }
/** /**
@ -141,7 +141,7 @@ class CommonSettings extends AbstractDataModel {
* *
* @return array * @return array
*/ */
public function get_flags() : array { public function get_woo_settings() : array {
return $this->flags; return $this->woo_settings;
} }
} }

View file

@ -65,12 +65,12 @@ class CommonRestEndpoint extends RestEndpoint {
* *
* @var array * @var array
*/ */
private array $flag_map = array( private array $woo_settings_map = array(
'country' => array( 'country' => array(
'js_name' => 'country', 'js_name' => 'storeCountry',
), ),
'currency' => array( 'currency' => array(
'js_name' => 'currency', 'js_name' => 'storeCurrency',
), ),
); );
@ -123,15 +123,15 @@ class CommonRestEndpoint extends RestEndpoint {
$this->field_map $this->field_map
); );
$js_flags = $this->sanitize_for_javascript( $js_woo_settings = $this->sanitize_for_javascript(
$this->settings->get_flags(), $this->settings->get_woo_settings(),
$this->flag_map $this->woo_settings_map
); );
return $this->return_success( return $this->return_success(
$js_data, $js_data,
array( array(
'flags' => $js_flags, 'wooSettings' => $js_woo_settings,
) )
); );
} }