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

Improve the messaging configurator styles (2692)
This commit is contained in:
Emili Castells 2024-02-29 11:55:58 +01:00 committed by GitHub
commit 11e7f79efa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 76 additions and 60 deletions

View file

@ -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,

View file

@ -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;
}

View file

@ -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', () => {

View file

@ -396,13 +396,7 @@ class PayPalGateway extends \WC_Payment_Gateway {
}
if ( $this->is_pay_later_tab() ) {
return sprintf(
// 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$sPayPals 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>'
);
return '';
}
if ( is_admin() ) {

View file

@ -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 );