Merge pull request #2870 from woocommerce/PPCP-3962-refactor-store-country-currency

New Settings UI: Map storeCountry and currency to WooCommerce settings (3962)

modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js

@@ -1,4 +1,4 @@
-import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
+import BadgeBox from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
 import Separator from '../Separator';
 import generatePriceText from '../../../utils/badgeBoxUtils';
@@ -10,7 +10,7 @@ const AcdcOptionalPaymentMethods = ( {
 	storeCountry,
 	storeCurrency,
 } ) => {
-	if ( isFastlane && isPayLater && storeCountry === 'us' ) {
+	if ( isFastlane && isPayLater && storeCountry === 'US' ) {
 		return (
 			<div className="ppcp-r-optional-payment-methods__wrapper">
 				<BadgeBox

modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js

@@ -12,7 +12,7 @@ const AcdcFlow = ( {
 	storeCountry,
 	storeCurrency,
 } ) => {
-	if ( isFastlane && isPayLater && storeCountry === 'us' ) {
+	if ( isFastlane && isPayLater && storeCountry === 'US' ) {
 		return (
 			<div className="ppcp-r-welcome-docs__wrapper">
 				<div className="ppcp-r-welcome-docs__col">
@@ -123,7 +123,7 @@ const AcdcFlow = ( {
 		);
 	}
 
-	if ( isPayLater && storeCountry === 'uk' ) {
+	if ( isPayLater && storeCountry === 'UK' ) {
 		return (
 			<div className="ppcp-r-welcome-docs__wrapper">
 				<div className="ppcp-r-welcome-docs__col">

modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js

@@ -6,7 +6,7 @@ import { countryPriceInfo } from '../../../utils/countryPriceInfo';
 import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
 
 const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
-	if ( isPayLater && storeCountry === 'us' ) {
+	if ( isPayLater && storeCountry === 'US' ) {
 		return (
 			<div className="ppcp-r-welcome-docs__wrapper">
 				<div className="ppcp-r-welcome-docs__col">

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js

@@ -3,7 +3,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
 import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
 import SelectBox from '../../ReusableComponents/SelectBox';
-import { OnboardingHooks } from '../../../data';
+import { CommonHooks, OnboardingHooks } from '../../../data';
 import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods';
 
 const OPM_RADIO_GROUP_NAME = 'optional-payment-methods';
@@ -13,6 +13,9 @@ const StepPaymentMethods = ( {} ) => {
 		areOptionalPaymentMethodsEnabled,
 		setAreOptionalPaymentMethodsEnabled,
 	} = OnboardingHooks.useOptionalPaymentMethods();
+
+	const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
+
 	const pricesBasedDescription = sprintf(
 		// translators: %s: Link to PayPal REST application guide
 		__(
@@ -42,8 +45,8 @@ const StepPaymentMethods = ( {} ) => {
 								useAcdc={ true }
 								isFastlane={ true }
 								isPayLater={ true }
-								storeCountry={ 'us' }
-								storeCurrency={ 'usd' }
+								storeCountry={ storeCountry }
+								storeCurrency={ storeCurrency }
 							/>
 						}
 						name={ OPM_RADIO_GROUP_NAME }

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js

@@ -8,8 +8,10 @@ import WelcomeDocs from '../../ReusableComponents/WelcomeDocs/WelcomeDocs';
 import AccordionSection from '../../ReusableComponents/AccordionSection';
 
 import AdvancedOptionsForm from './Components/AdvancedOptionsForm';
+import { CommonHooks } from '../../../data';
 
 const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
+	const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
 	return (
 		<div className="ppcp-r-page-welcome">
 			<OnboardingHeader
@@ -47,8 +49,8 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
 				useAcdc={ true }
 				isFastlane={ true }
 				isPayLater={ true }
-				storeCountry={ 'us' }
-				storeCurrency={ 'USD' }
+				storeCountry={ storeCountry }
+				storeCurrency={ storeCurrency }
 			/>
 			<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />
 			<AccordionSection

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

@@ -44,6 +44,11 @@ const useHooks = () => {
 	const isSandboxMode = usePersistent( 'useSandbox' );
 	const isManualConnectionMode = usePersistent( 'useManualConnection' );
 
+	const wooSettings = useSelect(
+		( select ) => select( STORE_NAME ).wooSettings(),
+		[]
+	);
+
 	const savePersistent = async ( setter, value ) => {
 		setter( value );
 		await persist();
@@ -69,6 +74,7 @@ const useHooks = () => {
 		},
 		connectViaSandbox,
 		connectViaIdAndSecret,
+		wooSettings,
 	};
 };
 
@@ -109,3 +115,8 @@ export const useManualConnection = () => {
 		connectViaIdAndSecret,
 	};
 };
+
+export const useWooSettings = () => {
+	const { wooSettings } = useHooks();
+	return wooSettings;
+};

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

@@ -15,6 +15,12 @@ import ACTION_TYPES from './action-types';
 const defaultTransient = {
 	isReady: false,
 	isBusy: false,
+
+	// Read only values, provided by the server via hydrate.
+	wooSettings: {
+		storeCountry: '',
+		storeCurrency: '',
+	},
 };
 
 const defaultPersistent = {
@@ -38,8 +44,18 @@ const commonReducer = createReducer( defaultTransient, defaultPersistent, {
 	[ ACTION_TYPES.SET_PERSISTENT ]: ( state, action ) =>
 		setPersistent( state, action ),
 
-	[ ACTION_TYPES.HYDRATE ]: ( state, payload ) =>
-		setPersistent( state, payload.data ),
+	[ ACTION_TYPES.HYDRATE ]: ( state, payload ) => {
+		const newState = setPersistent( state, payload.data );
+
+		if ( payload.wooSettings ) {
+			newState.wooSettings = {
+				...newState.wooSettings,
+				...payload.wooSettings,
+			};
+		}
+
+		return newState;
+	},
 } );
 
 export default commonReducer;

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

@@ -16,6 +16,10 @@ export const persistentData = ( state ) => {
 };
 
 export const transientData = ( state ) => {
-	const { data, ...transientState } = getState( state );
+	const { data, wooSettings, ...transientState } = getState( state );
 	return transientState || EMPTY_OBJ;
 };
+
+export const wooSettings = ( state ) => {
+	return getState( state ).wooSettings || EMPTY_OBJ;
+};

modules/ppcp-settings/resources/js/utils/countryPriceInfo.js

@@ -1,5 +1,5 @@
 export const countryPriceInfo = {
-	us: {
+	US: {
 		currencySymbol: '$',
 		fixedFee: 0.49,
 		checkout: 3.49,
@@ -9,7 +9,7 @@ export const countryPriceInfo = {
 		fastlane: 2.59,
 		standardCardFields: 2.99,
 	},
-	uk: {
+	UK: {
 		currencySymbol: '£',
 		fixedFee: 0.3,
 		checkout: 2.9,
@@ -18,7 +18,7 @@ export const countryPriceInfo = {
 		apm: 1.2,
 		standardCardFields: 1.2,
 	},
-	ca: {
+	CA: {
 		currencySymbol: '$',
 		fixedFee: 0.3,
 		checkout: 2.9,
@@ -27,7 +27,7 @@ export const countryPriceInfo = {
 		apm: 2.9,
 		standardCardFields: 2.9,
 	},
-	au: {
+	AU: {
 		currencySymbol: '$',
 		fixedFee: 0.3,
 		checkout: 2.6,
@@ -36,7 +36,7 @@ export const countryPriceInfo = {
 		apm: 2.6,
 		standardCardFields: 2.6,
 	},
-	fr: {
+	FR: {
 		currencySymbol: '€',
 		fixedFee: 0.35,
 		checkout: 2.9,
@@ -45,7 +45,7 @@ export const countryPriceInfo = {
 		apm: 1.2,
 		standardCardFields: 1.2,
 	},
-	it: {
+	IT: {
 		currencySymbol: '€',
 		fixedFee: 0.35,
 		checkout: 3.4,
@@ -54,7 +54,7 @@ export const countryPriceInfo = {
 		apm: 1.2,
 		standardCardFields: 1.2,
 	},
-	de: {
+	DE: {
 		currencySymbol: '€',
 		fixedFee: 0.39,
 		checkout: 2.99,
@@ -63,7 +63,7 @@ export const countryPriceInfo = {
 		apm: 2.99,
 		standardCardFields: 2.99,
 	},
-	es: {
+	ES: {
 		currencySymbol: '€',
 		fixedFee: 0.35,
 		checkout: 2.9,

modules/ppcp-settings/services.php

@@ -54,7 +54,10 @@ return array(
 		return new GeneralSettings();
 	},
 	'settings.data.common'                        => static function ( ContainerInterface $container ) : CommonSettings {
-		return new CommonSettings();
+		return new CommonSettings(
+			$container->get( 'api.shop.country' ),
+			$container->get( 'api.shop.currency.getter' )->get(),
+		);
 	},
 	'settings.rest.onboarding'                    => static function ( ContainerInterface $container ) : OnboardingRestEndpoint {
 		return new OnboardingRestEndpoint( $container->get( 'settings.data.onboarding' ) );

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

@@ -29,6 +29,25 @@ class CommonSettings extends AbstractDataModel {
 	 */
 	protected const OPTION_KEY = 'woocommerce-ppcp-data-common';
 
+	/**
+	 * List of customization flags, provided by the server (read-only).
+	 *
+	 * @var array
+	 */
+	protected array $woo_settings = array();
+
+	/**
+	 * Constructor.
+	 *
+	 * @param string $country  WooCommerce store country.
+	 * @param string $currency WooCommerce store currency.
+	 */
+	public function __construct( string $country, string $currency ) {
+		parent::__construct();
+		$this->woo_settings['country']  = $country;
+		$this->woo_settings['currency'] = $currency;
+	}
+
 	/**
 	 * Get default values for the model.
 	 *
@@ -116,4 +135,13 @@ class CommonSettings extends AbstractDataModel {
 	public function set_client_secret( string $client_secret ) : void {
 		$this->data['client_secret'] = sanitize_text_field( $client_secret );
 	}
+
+	/**
+	 * Returns the list of read-only customization flags.
+	 *
+	 * @return array
+	 */
+	public function get_woo_settings() : array {
+		return $this->woo_settings;
+	}
 }

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

@@ -60,6 +60,20 @@ class CommonRestEndpoint extends RestEndpoint {
 		),
 	);
 
+	/**
+	 * Map the internal flags to JS names.
+	 *
+	 * @var array
+	 */
+	private array $woo_settings_map = array(
+		'country'  => array(
+			'js_name' => 'storeCountry',
+		),
+		'currency' => array(
+			'js_name' => 'storeCurrency',
+		),
+	);
+
 	/**
 	 * Constructor.
 	 *
@@ -109,7 +123,17 @@ class CommonRestEndpoint extends RestEndpoint {
 			$this->field_map
 		);
 
-		return $this->return_success( $js_data );
+		$js_woo_settings = $this->sanitize_for_javascript(
+			$this->settings->get_woo_settings(),
+			$this->woo_settings_map
+		);
+
+		return $this->return_success(
+			$js_data,
+			array(
+				'wooSettings' => $js_woo_settings,
+			)
+		);
 	}
 
 	/**