From 7ac7081ddbd95b0287eb4435966d2f8eda2e22ed Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Thu, 22 Feb 2024 18:12:11 +0400 Subject: [PATCH 1/6] Update styles --- .../resources/css/paylater-configurator.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss b/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss index 5c46ed669..108803a45 100644 --- a/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss +++ b/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss @@ -26,5 +26,17 @@ 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; } } From 55227e6005bd90a7dd9e986846122bd8bb741400 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Thu, 22 Feb 2024 18:17:06 +0400 Subject: [PATCH 2/6] Remove the description for Pay Later tab --- modules/ppcp-wc-gateway/src/Gateway/PayPalGateway.php | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/modules/ppcp-wc-gateway/src/Gateway/PayPalGateway.php b/modules/ppcp-wc-gateway/src/Gateway/PayPalGateway.php index 8220b0a5b..73afb085b 100644 --- a/modules/ppcp-wc-gateway/src/Gateway/PayPalGateway.php +++ b/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( - // translators: %1$s is HTML tag and %2$s, %3$s are the opening and closing of HTML 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' ), - '', - '', - '' - ); + return ''; } if ( is_admin() ) { From f82b0be0e4ee76c73b183f8cec479388a9b67edf Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Thu, 22 Feb 2024 19:21:24 +0400 Subject: [PATCH 3/6] Put messaging configurator on top of the page --- .../resources/js/paylater-configurator.js | 10 ++- .../Settings/Fields/pay-later-tab-fields.php | 89 +++++++++---------- 2 files changed, 53 insertions(+), 46 deletions(-) diff --git a/modules/ppcp-paylater-configurator/resources/js/paylater-configurator.js b/modules/ppcp-paylater-configurator/resources/js/paylater-configurator.js index fc78ef4f6..7250e8ce0 100644 --- a/modules/ppcp-paylater-configurator/resources/js/paylater-configurator.js +++ b/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', '
'); + const tempContainer = document.createElement('div'); + tempContainer.innerHTML = `
`; + + // 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', () => { diff --git a/modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php b/modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php index 094e12026..5285ca39c 100644 --- a/modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php +++ b/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 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' ), - '', - '', - '' - ), - ), - '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' ), @@ -871,6 +826,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 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' ), + '', + '', + '' + ), + ), + '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 ); From 19f57ae87e2d81f0d56525d0018e96712a46f31f Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Thu, 22 Feb 2024 19:49:58 +0400 Subject: [PATCH 4/6] Remove the messaging description --- .../resources/css/paylater-configurator.scss | 4 ++++ .../src/Settings/Fields/pay-later-tab-fields.php | 7 ------- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss b/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss index 108803a45..3be5a328a 100644 --- a/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss +++ b/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss @@ -40,3 +40,7 @@ background: none; } } + +#field-pay_later_messaging_heading h3{ + margin-bottom: 0px; +} diff --git a/modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php b/modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php index 5285ca39c..8b2fc55e2 100644 --- a/modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php +++ b/modules/ppcp-wc-gateway/src/Settings/Fields/pay-later-tab-fields.php @@ -51,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 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' ), - '', - '', - '' - ), ), 'pay_later_messaging_enabled' => array( 'title' => __( 'Enable/Disable', 'woocommerce-paypal-payments' ), From 4282270c671404b5f7f73703a4960ebc49b04d71 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Thu, 22 Feb 2024 19:58:04 +0400 Subject: [PATCH 5/6] Update the placement font sizes --- .../resources/css/paylater-configurator.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss b/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss index 3be5a328a..5d7cca405 100644 --- a/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss +++ b/modules/ppcp-paylater-configurator/resources/css/paylater-configurator.scss @@ -39,6 +39,10 @@ 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{ From 93d4f6427059d51062689334c7d9eac86c91a851 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Fri, 23 Feb 2024 15:42:00 +0400 Subject: [PATCH 6/6] use the text-size for rendering messages --- modules/ppcp-button/src/Assets/SmartButton.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php index 63946488f..2cf6aee65 100644 --- a/modules/ppcp-button/src/Assets/SmartButton.php +++ b/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,