Merge pull request #996 from woocommerce/pcp-969-fix-styling

Improve styling when using separate buttons
This commit is contained in:
Emili Castells 2022-11-17 11:25:46 +01:00 committed by GitHub
commit 13ee93be2c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 2 deletions

View file

@ -20,6 +20,7 @@
* Enhancement - Isolate container and modularity deps #972
* Enhancement - PUI gateway displayed on pay for order page when mandatory billing fields are left empty or country is unsupported #966
* Enhancement - When Brand Name field is left empty, PUI purchase fails #916
* Enhancement - Improve styling when using separate buttons #996
= 1.9.5 - 2022-11-01 =
* Fix - Invalid tracking number in logs when adding tracking #903

View file

@ -32,7 +32,11 @@ class Renderer {
if (fundingSource !== 'paypal') {
style = {
shape: style.shape,
color: style.color,
};
if (fundingSource !== 'paylater') {
delete style.color;
}
}
this.renderButtons(

View file

@ -2,6 +2,7 @@ import { loadScript } from "@paypal/paypal-js";
import {debounce} from "./helper/debounce";
import Renderer from '../../../ppcp-button/resources/js/modules/Renderer/Renderer'
import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/MessageRenderer";
import {setVisibleByClass, isVisible} from "../../../ppcp-button/resources/js/modules/Helper/Hiding"
;document.addEventListener(
'DOMContentLoaded',
@ -40,6 +41,37 @@ import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/
});
}
const separateCardButtonCheckbox = document.querySelector('#ppcp-allow_card_button_gateway');
if (separateCardButtonCheckbox) {
separateCardButtonCheckbox.addEventListener('change', () => {
setVisibleByClass('#field-button_layout', !separateCardButtonCheckbox.checked, 'hide');
});
}
[
{layoutSelector: '#ppcp-button_layout', taglineSelector: '#field-button_tagline', canHaveSeparateButtons: true},
{layoutSelector: '#ppcp-button_product_layout', taglineSelector: '#field-button_product_tagline'},
{layoutSelector: '#ppcp-button_cart_layout', taglineSelector: '#field-button_cart_tagline'},
{layoutSelector: '#ppcp-button_mini-cart_layout', taglineSelector: '#field-button_mini-cart_tagline'},
].forEach(location => {
const layoutSelect = document.querySelector(location.layoutSelector);
const taglineField = document.querySelector(location.taglineSelector);
if (layoutSelect && taglineField) {
const setTaglineFieldVisibility = () => {
const supportsTagline = jQuery(layoutSelect).val() === 'horizontal'
&& (!location.canHaveSeparateButtons || (separateCardButtonCheckbox && !separateCardButtonCheckbox.checked))
&& isVisible(layoutSelect.parentElement);
setVisibleByClass(taglineField, supportsTagline, 'hide');
};
setTaglineFieldVisibility();
// looks like only jQuery event fires for WC selects
jQuery(layoutSelect).change(setTaglineFieldVisibility);
if (location.canHaveSeparateButtons && separateCardButtonCheckbox) {
separateCardButtonCheckbox.addEventListener('change', setTaglineFieldVisibility);
}
}
});
function createButtonPreview(settingsCallback) {
const render = (settings) => {
const wrapper = document.querySelector(settings.button.wrapper);
@ -95,7 +127,8 @@ import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/
}
function getButtonSettings(wrapperSelector, fields) {
const layout = jQuery(fields['layout']).val();
const layoutElement = jQuery(fields['layout']);
const layout = (layoutElement.length && layoutElement.is(':visible')) ? layoutElement.val() : 'vertical';
const style = {
'color': jQuery(fields['color']).val(),
'shape': jQuery(fields['shape']).val(),

View file

@ -442,6 +442,8 @@ return array(
$subscription_helper = $container->get( 'subscription.helper' );
assert( $subscription_helper instanceof SubscriptionHelper );
$has_enabled_separate_button_gateways = $container->get( 'wcgateway.settings.has_enabled_separate_button_gateways' );
$fields = array(
'checkout_settings_heading' => array(
'heading' => __( 'Standard Payments Settings', 'woocommerce-paypal-payments' ),
@ -739,7 +741,7 @@ return array(
'button_layout' => array(
'title' => __( 'Button Layout', 'woocommerce-paypal-payments' ),
'type' => 'select',
'class' => array(),
'classes' => $has_enabled_separate_button_gateways ? array( 'hide' ) : array(),
'input_class' => array( 'wc-enhanced-select' ),
'default' => 'vertical',
'desc_tip' => true,
@ -1745,6 +1747,10 @@ return array(
(bool) $settings->get( 'allow_card_button_gateway' ) :
$container->get( 'wcgateway.settings.allow_card_button_gateway.default' );
},
'wcgateway.settings.has_enabled_separate_button_gateways' => static function ( ContainerInterface $container ): bool {
return (bool) $container->get( 'wcgateway.settings.allow_card_button_gateway' );
},
'order-tracking.is-tracking-available' => static function ( ContainerInterface $container ): bool {
try {
$bearer = $container->get( 'api.bearer' );

View file

@ -101,6 +101,7 @@ Follow the steps below to connect the plugin to your PayPal account:
* Enhancement - Isolate container and modularity deps #972
* Enhancement - PUI gateway displayed on pay for order page when mandatory billing fields are left empty or country is unsupported #966
* Enhancement - When Brand Name field is left empty, PUI purchase fails #916
* Enhancement - Improve styling when using separate buttons #996
= 1.9.5
* Fix - Invalid tracking number in logs when adding tracking #903