Merge pull request #2053 from woocommerce/PCP-2692-messaging-configurator-feedback

Improve the messaging configurator styles (2692)

modules/ppcp-button/src/Assets/SmartButton.php

@@ -872,6 +872,7 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 		$text_color    = $this->settings->has( "{$setting_name_prefix}_color" ) ? $this->settings->get( "{$setting_name_prefix}_color" ) : 'black';
 		$style_color   = $this->settings->has( "{$setting_name_prefix}_flex_color" ) ? $this->settings->get( "{$setting_name_prefix}_flex_color" ) : 'blue';
 		$ratio         = $this->settings->has( "{$setting_name_prefix}_flex_ratio" ) ? $this->settings->get( "{$setting_name_prefix}_flex_ratio" ) : '1x1';
+		$text_size     = $this->settings->has( "{$setting_name_prefix}_text_size" ) ? $this->settings->get( "{$setting_name_prefix}_text_size" ) : '12';
 
 		return array(
 			'wrapper'   => '#ppcp-messages',
@@ -889,6 +890,7 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
 				),
 				'text'   => array(
 					'color' => $text_color,
+					'size'  => $text_size,
 				),
 				'color'  => $style_color,
 				'ratio'  => $ratio,

modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss

@@ -26,5 +26,25 @@
 		line-height: 1.5;
 		color: #3c434a;
 		font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+
+		a {
+			font-size: 14px;
+		}
+	}
+
+	.css-dpyjrq-text_body, .css-dpyjrq-text_body a {
+		font-size: 14px;
+	}
+
+	button.css-104jwuk {
+		background: none;
+	}
+
+	.css-1yo2lxy-text_body_strong, span.css-16jt5za-text_body, span.css-1yo2lxy-text_body_strong, span {
+		font-size: 14px;
 	}
 }
+
+#field-pay_later_messaging_heading h3{
+	margin-bottom: 0px;
+}

modules/ppcp-paylater-configurator/resources/js/paylater-configurator.js

@@ -1,10 +1,18 @@
 document.addEventListener( 'DOMContentLoaded', () => {
     const form = document.querySelector('#mainform');
     const table = form.querySelector('.form-table');
+    const headingRow = table.querySelector('#field-pay_later_messaging_heading');
     const saveChangesButton = form.querySelector('.woocommerce-save-button');
     const publishButtonClassName = PcpPayLaterConfigurator.publishButtonClassName;
 
-    table.insertAdjacentHTML('afterend', '<div id="messaging-configurator"></div>');
+    const tempContainer = document.createElement('div');
+    tempContainer.innerHTML = `<div id='messaging-configurator'></div>`;
+
+    // Get the new row element from the container
+    const newRow = tempContainer.firstChild;
+
+    // Insert the new row after the headingRow
+    headingRow.parentNode.insertBefore(newRow, headingRow.nextSibling);
 
 
     saveChangesButton.addEventListener('click', () => {

modules/ppcp-wc-gateway/src/Gateway/PayPalGateway.php

@@ -396,13 +396,7 @@ class PayPalGateway extends \WC_Payment_Gateway {
 		}
 
 		if ( $this->is_pay_later_tab() ) {
-			return sprintf(
+			return '';
-			// translators: %1$s is </ br> HTML tag and %2$s, %3$s are the opening and closing of HTML <i> tag.
-				__( 'Let customers pay over time while you get paid up front — at no additional cost.%1$sPayPal’s pay later options are boosting merchant conversion rates and increasing cart sizes by 39%%. %2$s(PayPal Q2 Earnings-2021.)%3$s', 'woocommerce-paypal-payments' ),
-				'</ br>',
-				'<i>',
-				'</ i>'
-			);
 		}
 
 		if ( is_admin() ) {

modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php

@@ -44,51 +44,6 @@ return function ( ContainerInterface $container, array $fields ): array {
 	};
 
 	$pay_later_fields = array(
-		'pay_later_button_heading'                        => array(
-			'heading'      => __( 'Pay Later Button', 'woocommerce-paypal-payments' ),
-			'type'         => 'ppcp-heading',
-			'screens'      => array( State::STATE_ONBOARDED ),
-			'requirements' => array( 'messages' ),
-			'gateway'      => Settings::PAY_LATER_TAB_ID,
-			'description'  => sprintf(
-			// translators: %1$s and %2$s are the opening and closing of HTML <a> tag.
-				__( 'When enabled, a %1$sPay Later button%2$s is displayed for eligible customers.%3$sPayPal buttons must be enabled to display the Pay Later button.', 'woocommerce-paypal-payments' ),
-				'<a href="https://woocommerce.com/document/woocommerce-paypal-payments/#pay-later-buttons" target="_blank">',
-				'</a>',
-				'</ br>'
-			),
-		),
-		'pay_later_button_enabled'                        => array(
-			'title'        => __( 'Enable/Disable', 'woocommerce-paypal-payments' ),
-			'type'         => 'checkbox',
-			'label'        => esc_html( $pay_later_messaging_enabled_label ),
-			'default'      => true,
-			'screens'      => array( State::STATE_ONBOARDED ),
-			'requirements' => array( 'messages' ),
-			'gateway'      => Settings::PAY_LATER_TAB_ID,
-			'input_class'  => $vault_enabled ? array( 'ppcp-disabled-checkbox' ) : array(),
-		),
-		'pay_later_button_locations'                      => array(
-			'title'        => __( 'Pay Later Button Locations', 'woocommerce-paypal-payments' ),
-			'type'         => 'ppcp-multiselect',
-			'class'        => array(),
-			'input_class'  => array( 'wc-enhanced-select' ),
-			'default'      => $container->get( 'wcgateway.settings.pay-later.default-button-locations' ),
-			'desc_tip'     => false,
-			'description'  => __( 'Select where the Pay Later button should be displayed.', 'woocommerce-paypal-payments' ),
-			'options'      => $container->get( 'wcgateway.settings.pay-later.button-locations' ),
-			'screens'      => array( State::STATE_ONBOARDED ),
-			'requirements' => array( 'messages' ),
-			'gateway'      => Settings::PAY_LATER_TAB_ID,
-		),
-		'pay_later_button_preview'                        => array(
-			'type'         => 'ppcp-text',
-			'text'         => $render_preview_element( 'ppcpPayLaterButtonPreview', 'button', $button_message ),
-			'screens'      => array( State::STATE_ONBOARDED ),
-			'requirements' => array( 'messages' ),
-			'gateway'      => Settings::PAY_LATER_TAB_ID,
-		),
-
 		// Messaging.
 		'pay_later_messaging_heading'                     => array(
 			'heading'      => __( 'Pay Later Messaging', 'woocommerce-paypal-payments' ),
@@ -96,13 +51,6 @@ return function ( ContainerInterface $container, array $fields ): array {
 			'screens'      => array( State::STATE_ONBOARDED ),
 			'requirements' => array( 'messages' ),
 			'gateway'      => Settings::PAY_LATER_TAB_ID,
-			'description'  => sprintf(
-			// translators: %1$s and %2$s are the opening and closing of HTML <a> tag.
-				__( 'When enabled, %1$sPayPal Pay Later messaging%2$s is displayed for eligible customers.%3$sCustomers automatically see the most relevant Pay Later offering.', 'woocommerce-paypal-payments' ),
-				'<a href="https://woocommerce.com/document/woocommerce-paypal-payments/#pay-later-messaging" target="_blank">',
-				'</a>',
-				'</ br>'
-			),
 		),
 		'pay_later_messaging_enabled'                     => array(
 			'title'        => __( 'Enable/Disable', 'woocommerce-paypal-payments' ),
@@ -871,6 +819,50 @@ return function ( ContainerInterface $container, array $fields ): array {
 			'requirements' => array( 'messages' ),
 			'gateway'      => Settings::PAY_LATER_TAB_ID,
 		),
+		'pay_later_button_heading'                        => array(
+			'heading'      => __( 'Pay Later Button', 'woocommerce-paypal-payments' ),
+			'type'         => 'ppcp-heading',
+			'screens'      => array( State::STATE_ONBOARDED ),
+			'requirements' => array( 'messages' ),
+			'gateway'      => Settings::PAY_LATER_TAB_ID,
+			'description'  => sprintf(
+			// translators: %1$s and %2$s are the opening and closing of HTML <a> tag.
+				__( 'When enabled, a %1$sPay Later button%2$s is displayed for eligible customers.%3$sPayPal buttons must be enabled to display the Pay Later button.', 'woocommerce-paypal-payments' ),
+				'<a href="https://woocommerce.com/document/woocommerce-paypal-payments/#pay-later-buttons" target="_blank">',
+				'</a>',
+				'</ br>'
+			),
+		),
+		'pay_later_button_enabled'                        => array(
+			'title'        => __( 'Enable/Disable', 'woocommerce-paypal-payments' ),
+			'type'         => 'checkbox',
+			'label'        => esc_html( $pay_later_messaging_enabled_label ),
+			'default'      => true,
+			'screens'      => array( State::STATE_ONBOARDED ),
+			'requirements' => array( 'messages' ),
+			'gateway'      => Settings::PAY_LATER_TAB_ID,
+			'input_class'  => $vault_enabled ? array( 'ppcp-disabled-checkbox' ) : array(),
+		),
+		'pay_later_button_locations'                      => array(
+			'title'        => __( 'Pay Later Button Locations', 'woocommerce-paypal-payments' ),
+			'type'         => 'ppcp-multiselect',
+			'class'        => array(),
+			'input_class'  => array( 'wc-enhanced-select' ),
+			'default'      => $container->get( 'wcgateway.settings.pay-later.default-button-locations' ),
+			'desc_tip'     => false,
+			'description'  => __( 'Select where the Pay Later button should be displayed.', 'woocommerce-paypal-payments' ),
+			'options'      => $container->get( 'wcgateway.settings.pay-later.button-locations' ),
+			'screens'      => array( State::STATE_ONBOARDED ),
+			'requirements' => array( 'messages' ),
+			'gateway'      => Settings::PAY_LATER_TAB_ID,
+		),
+		'pay_later_button_preview'                        => array(
+			'type'         => 'ppcp-text',
+			'text'         => $render_preview_element( 'ppcpPayLaterButtonPreview', 'button', $button_message ),
+			'screens'      => array( State::STATE_ONBOARDED ),
+			'requirements' => array( 'messages' ),
+			'gateway'      => Settings::PAY_LATER_TAB_ID,
+		),
 	);
 
 	return array_merge( $fields, $pay_later_fields );