Merge pull request #2927 from woocommerce/PCP-3998-customize-descript…

…ion-based-on-locations-selection

Add location based descriptions on styling tab (3998)

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabStyling.js

@@ -90,7 +90,7 @@ const TabStyling = () => {
 	return (
 		<div className="ppcp-r-styling">
 			<div className="ppcp-r-styling__settings">
-				<SectionIntro />
+				<SectionIntro location={ location } />
 				<SectionLocations
 					locationOptions={ locationOptions }
 					location={ location }
@@ -157,20 +157,17 @@ const TabStylingSection = ( props ) => {
 	);
 };
 
-const SectionIntro = () => {
-	const buttonStyleDescription = sprintf(
-		// translators: %s: Link to Classic checkout page
-		__(
-			'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Classic Checkout page</a>. Checkout Buttons must be enabled to display the PayPal gateway on the Checkout page.'
-		),
-		'#'
-	);
+const SectionIntro = ( { location } ) => {
+	const { description, descriptionLink } =
+		defaultLocationSettings[ location ];
+	const buttonStyleDescription = sprintf( description, descriptionLink );
+
 	return (
 		<TabStylingSection
 			className="ppcp-r-styling__section--rc ppcp-r-styling__section--empty"
 			title={ __( 'Button Styling', 'wooocommerce-paypal-payments' ) }
 			description={ buttonStyleDescription }
-		></TabStylingSection>
+		/>
 	);
 };
 

modules/ppcp-settings/resources/js/data/settings/tab-styling-data.js

@@ -25,26 +25,56 @@ export const defaultLocationSettings = {
 		value: 'cart',
 		label: __( 'Cart', 'woocommerce-paypal-payments' ),
 		settings: { ...cartAndExpressCheckoutSettings },
+		// translators: %s: Link to Cart page
+		description: __(
+			'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Cart page</a> and select which additional payment buttons to display in this location.',
+			'wooocommerce-paypal-payments'
+		),
+		descriptionLink: '#',
 	},
 	'classic-checkout': {
 		value: 'classic-checkout',
 		label: __( 'Classic Checkout', 'woocommerce-paypal-payments' ),
 		settings: { ...settings },
+		// translators: %s: Link to Classic Checkout page
+		description: __(
+			'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Classic Checkout page</a> and choose which additional payment buttons to display in this location.',
+			'wooocommerce-paypal-payments'
+		),
+		descriptionLink: '#',
 	},
 	'express-checkout': {
 		value: 'express-checkout',
 		label: __( 'Express Checkout', 'woocommerce-paypal-payments' ),
 		settings: { ...cartAndExpressCheckoutSettings },
+		// translators: %s: Link to Express Checkout location
+		description: __(
+			'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Express Checkout location</a> and choose which additional payment buttons to display in this location.',
+			'wooocommerce-paypal-payments'
+		),
+		descriptionLink: '#',
 	},
 	'mini-cart': {
 		value: 'mini-cart',
 		label: __( 'Mini Cart', 'woocommerce-paypel-payements' ),
 		settings: { ...settings },
+		// translators: %s: Link to Mini Cart
+		description: __(
+			'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Mini Cart</a> and choose which additional payment buttons to display in this location.',
+			'wooocommerce-paypal-payments'
+		),
+		descriptionLink: '#',
 	},
 	'product-page': {
 		value: 'product-page',
 		label: __( 'Product Page', 'woocommerce-paypal-payments' ),
 		settings: { ...settings },
+		// translators: %s: Link to Product Page
+		description: __(
+			'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Product Page</a> and choose which additional payment buttons to display in this location.',
+			'wooocommerce-paypal-payments'
+		),
+		descriptionLink: '#',
 	},
 };