mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 12:25:15 +08:00
Merge pull request #2053 from woocommerce/PCP-2692-messaging-configurator-feedback
Improve the messaging configurator styles (2692)
This commit is contained in:
commit
11e7f79efa
5 changed files with 76 additions and 60 deletions
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
|
@ -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$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>'
|
||||
);
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( is_admin() ) {
|
||||
|
|
|
@ -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 );
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue