New Settings UI: Map storeCountry and currency to WooCommerce settings

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

@@ -43,6 +43,7 @@ const useHooks = () => {
 	const clientSecret = usePersistent( 'clientSecret' );
 	const isSandboxMode = usePersistent( 'useSandbox' );
 	const isManualConnectionMode = usePersistent( 'useManualConnection' );
+	const flags = usePersistent( 'flags' );
 
 	const savePersistent = async ( setter, value ) => {
 		setter( value );
@@ -69,6 +70,7 @@ const useHooks = () => {
 		},
 		connectViaSandbox,
 		connectViaIdAndSecret,
+		flags,
 	};
 };
 
@@ -109,3 +111,9 @@ export const useManualConnection = () => {
 		connectViaIdAndSecret,
 	};
 };
+
+export const useWooSettings = () => {
+	const { flags = {} } = useHooks();
+	const { country, currency } = flags;
+	return { storeCountry: country, storeCurrency: currency };
+};

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

@@ -22,6 +22,10 @@ const defaultPersistent = {
 	useManualConnection: false,
 	clientId: '',
 	clientSecret: '',
+	flags: {
+		country: '',
+		currency: '',
+	},
 };
 
 // Reducer logic.
@@ -39,7 +43,10 @@ const commonReducer = createReducer( defaultTransient, defaultPersistent, {
 		setPersistent( state, action ),
 
 	[ ACTION_TYPES.HYDRATE ]: ( state, payload ) =>
-		setPersistent( state, payload.data ),
+		setPersistent( state, {
+			...payload.data,
+			flags: payload.flags,
+		} ),
 } );
 
 export default commonReducer;

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 $flags = array();
+
+	/**
+	 * Constructor.
+	 *
+	 * @param string $country WooCommerce store country.
+	 * @param string $currency WooCommerce store currency.
+	 */
+	public function __construct( string $country, string $currency ) {
+		parent::__construct();
+		$this->flags['country']  = $country;
+		$this->flags['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_flags() : array {
+		return $this->flags;
+	}
 }

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 $flag_map = array(
+		'country'  => array(
+			'js_name' => 'country',
+		),
+		'currency' => array(
+			'js_name' => 'currency',
+		),
+	);
+
 	/**
 	 * Constructor.
 	 *
@@ -103,13 +117,23 @@ class CommonRestEndpoint extends RestEndpoint {
 	 *
 	 * @return WP_REST_Response The common settings.
 	 */
-	public function get_details() : WP_REST_Response {
+	public function get_details(): WP_REST_Response {
 		$js_data = $this->sanitize_for_javascript(
 			$this->settings->to_array(),
 			$this->field_map
 		);
 
-		return $this->return_success( $js_data );
+		$js_flags = $this->sanitize_for_javascript(
+			$this->settings->get_flags(),
+			$this->flag_map
+		);
+
+		return $this->return_success(
+			$js_data,
+			array(
+				'flags' => $js_flags,
+			)
+		);
 	}
 
 	/**