Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uniform Smart Button Display for PayPal, Google Pay, and Apple Pay (2177) #1900

Merged
merged 5 commits into from
Dec 14, 2023
Merged

Uniform Smart Button Display for PayPal, Google Pay, and Apple Pay (2177) #1900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
46c575a
Fix apm button styling
pedrosilva-pt Dec 7, 2023
55c7900
Adjust block button styles.
pedrosilva-pt Dec 11, 2023
ec0dd52
Adjustments to apm button layouts.
pedrosilva-pt Dec 11, 2023
c59f6de
Fix ApmButton margin condition.
pedrosilva-pt Dec 12, 2023
39040eb
Remove unused code.
pedrosilva-pt Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 21 additions & 35 deletions modules/ppcp-applepay/resources/css/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,44 @@
#applepay-container, .ppcp-button-applepay {
.ppcp-button-applepay {
// Should replicate apm-button.scss sizes.
--apple-pay-button-height: 45px;
--apple-pay-button-min-height: 40px;
--apple-pay-button-min-height: 35px;
--apple-pay-button-width: 100%;
--apple-pay-button-max-width: 750px;
--apple-pay-button-border-radius: 4px;
--apple-pay-button-overflow: hidden;
margin:7px 0;

.ppcp-width-min & {
--apple-pay-button-height: 35px;
}
.ppcp-width-300 & {
--apple-pay-button-height: 45px;
}
.ppcp-width-500 & {
--apple-pay-button-height: 55px;
}

&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}

&.ppcp-button-minicart {
--apple-pay-button-display: block;
--apple-pay-button-height: 40px;
}
}

.woocommerce-checkout {
#applepay-container, .ppcp-button-applepay {
margin-top: 0;
--apple-pay-button-border-radius: 4px;
--apple-pay-button-height: 45px;
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}
}
}

.ppcp-has-applepay-block {

.wp-block-woocommerce-checkout {
#applepay-container, .ppcp-button-applepay {
margin: 0;
--apple-pay-button-margin: 0;
--apple-pay-button-height: 48px;
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}
}
}
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart {
.ppcp-button-applepay {
--apple-pay-button-margin: 0;

.wp-block-woocommerce-cart {
#applepay-container, .ppcp-button-applepay {
margin: 0;
--apple-pay-button-margin: 0;
--apple-pay-button-height: 48px;
apple-pay-button {
min-width: 0;
width: 100%;
--apple-pay-button-width-default: 100%;
}
}
}

.wp-admin {
.ppcp-button-applepay {
pointer-events: none;
}
&.ppcp-non-ios-device {
.ppcp-button-applepay {
apple-pay-button {
Expand Down
17 changes: 12 additions & 5 deletions modules/ppcp-applepay/resources/js/ApplepayButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/Butto
import FormValidator from "../../../ppcp-button/resources/js/modules/Helper/FormValidator";
import ErrorHandler from '../../../ppcp-button/resources/js/modules/ErrorHandler';
import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButtons";

class ApplepayButton {

constructor(context, externalHandler, buttonConfig, ppcpConfig) {
apmButtonsInit();

this.isInitialized = false;

this.context = context;
Expand Down Expand Up @@ -60,7 +63,7 @@ class ApplepayButton {
this.initEventHandlers();
this.isInitialized = true;
this.applePayConfig = config;
const isEligible = this.applePayConfig.isEligible;
const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin;

if (isEligible) {
this.fetchTransactionInfo().then(() => {
Expand All @@ -84,6 +87,10 @@ class ApplepayButton {
});
}
});
} else {
jQuery('#' + this.buttonConfig.button.wrapper).hide();
jQuery('#' + this.buttonConfig.button.mini_cart_wrapper).hide();
jQuery('#express-payment-method-ppcp-applepay').hide();
}
}

Expand Down Expand Up @@ -179,13 +186,13 @@ class ApplepayButton {
appleContainer.innerHTML = `<apple-pay-button id="${id}" buttonstyle="${color}" type="${type}" locale="${language}">`;
}

jQuery('#' + wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
const $wrapper = jQuery('#' + wrapper);
$wrapper.addClass('ppcp-button-' + ppcpStyle.shape);

if (ppcpStyle.height) {
jQuery('#' + wrapper).css('--apple-pay-button-height', `${ppcpStyle.height}px`)
$wrapper.css('--apple-pay-button-height', `${ppcpStyle.height}px`)
$wrapper.css('height', `${ppcpStyle.height}px`)
}

jQuery(wrapper).append(appleContainer);
}

//------------------------
Expand Down
2 changes: 1 addition & 1 deletion modules/ppcp-applepay/resources/js/boot-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi
buttonConfig.button.wrapper = selector.replace('#', '');
applyConfigOptions(buttonConfig);

const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-applepay"></div>`;
const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-apm ppcp-button-applepay"></div>`;

if (!jQuery(selector).length) {
jQuery(ppcpConfig.button.wrapper).after(wrapperElement);
Expand Down
8 changes: 1 addition & 7 deletions modules/ppcp-applepay/resources/js/boot-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,6 @@ const ApplePayComponent = () => {
const manager = new ApplepayManager(buttonConfig, ppcpConfig);
manager.init();
};
useEffect(() => {
const bodyClass = 'ppcp-has-applepay-block';
if (!document.body.classList.contains(bodyClass)) {
document.body.classList.add(bodyClass);
}
}, []);

useEffect(() => {
// Load ApplePay SDK
Expand All @@ -50,7 +44,7 @@ const ApplePayComponent = () => {
}, [paypalLoaded, applePayLoaded]);

return (
<div id={buttonConfig.button.wrapper.replace('#', '')}></div>
<div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-apm ppcp-button-applepay"></div>
);
}

Expand Down
4 changes: 2 additions & 2 deletions modules/ppcp-applepay/src/Assets/ApplePayButton.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -968,7 +968,7 @@ function () {
add_action(
$render_placeholder,
function () {
echo '<span id="applepay-container-minicart" class="ppcp-button-applepay ppcp-button-minicart"></span>';
echo '<span id="applepay-container-minicart" class="ppcp-button-apm ppcp-button-applepay ppcp-button-minicart"></span>';
},
21
);
Expand All @@ -981,7 +981,7 @@ function () {
*/
protected function applepay_button(): void {
?>
<div id="applepay-container">
<div id="applepay-container" class="ppcp-button-apm ppcp-button-applepay">
<?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
</div>
<?php
Expand Down
3 changes: 3 additions & 0 deletions modules/ppcp-applepay/src/Assets/DataToAppleButtonScripts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ protected function data_for_product_page(
return array(
'sdk_url' => $this->sdk_url,
'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false,
'is_admin' => false,
'preferences' => array(
'checkout_data_mode' => $checkout_data_mode,
),
Expand Down Expand Up @@ -204,6 +205,7 @@ protected function data_for_cart_page(
return array(
'sdk_url' => $this->sdk_url,
'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false,
'is_admin' => false,
'preferences' => array(
'checkout_data_mode' => $checkout_data_mode,
),
Expand Down Expand Up @@ -252,6 +254,7 @@ protected function data_for_admin_page(
return array(
'sdk_url' => $this->sdk_url,
'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false,
'is_admin' => true,
'preferences' => array(
'checkout_data_mode' => $checkout_data_mode,
),
Expand Down
15 changes: 15 additions & 0 deletions modules/ppcp-blocks/resources/css/gateway.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@use "../../../ppcp-button/resources/css/mixins/apm-button" as apm-button;

li[id^="express-payment-method-ppcp-"] {
line-height: 0;

// Set min-width to 0 as the buttons need to fit in a tight grid.
.paypal-buttons {
min-width: 0 !important;
}
}

.ppcp-button-apm {
@include apm-button.button;
}

22 changes: 22 additions & 0 deletions modules/ppcp-blocks/src/BlocksModule.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,28 @@ static function () use ( $c ) {
$endpoint->handle_request();
}
);

// Enqueue frontend scripts.
add_action(
'wp_enqueue_scripts',
static function () use ( $c ) {
if ( ! has_block( 'woocommerce/checkout' ) && ! has_block( 'woocommerce/cart' ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may not load in editor (if block not added yet).

If we want to fix that, here is how I check it in the messaging branch 4e34332

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should load in the block editor right now as the preview there currently isn't working, maybe address it in the context of that fix:
image

return;
}

$module_url = $c->get( 'blocks.url' );
$asset_version = $c->get( 'ppcp.asset-version' );

wp_register_style(
'wc-ppcp-blocks',
untrailingslashit( $module_url ) . '/assets/css/gateway.css',
array(),
$asset_version
);
wp_enqueue_style( 'wc-ppcp-blocks' );
}
);

}

/**
Expand Down
3 changes: 2 additions & 1 deletion modules/ppcp-blocks/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ module.exports = {
target: 'web',
plugins: [ new DependencyExtractionWebpackPlugin() ],
entry: {
'checkout-block': path.resolve('./resources/js/checkout-block.js')
'checkout-block': path.resolve('./resources/js/checkout-block.js'),
"gateway": path.resolve('./resources/css/gateway.scss')
},
output: {
path: path.resolve(__dirname, 'assets/'),
Expand Down
16 changes: 16 additions & 0 deletions modules/ppcp-button/resources/css/gateway.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "mixins/apm-button" as apm-button;

#place_order.ppcp-hidden {
display: none !important;
}
Expand All @@ -15,3 +17,17 @@
.ppc-button-wrapper #ppcp-messages:first-child {
padding-top: 10px;
}

// Prevents spacing after button group.
#ppc-button-ppcp-gateway {
line-height: 0;
}

#ppc-button-minicart {
line-height: 0;
display: block;
}

.ppcp-button-apm {
@include apm-button.button;
}
42 changes: 42 additions & 0 deletions modules/ppcp-button/resources/css/mixins/apm-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@

@mixin button {
overflow: hidden;
min-width: 0;
max-width: 750px;
line-height: 0;
border-radius: 4px;

// Defaults
height: 45px;
margin-top: 14px;

&.ppcp-button-pill {
border-radius: 50px;
}

&.ppcp-button-minicart {
display: block;
}

.ppcp-width-min & {
height: 35px;
}

.ppcp-width-300 & {
height: 45px;
}

.ppcp-width-500 & {
height: 55px;
}

// No margin on block layout.
.wp-block-woocommerce-checkout &, .wp-block-woocommerce-cart & {
margin: 0;
min-width: 0;
}

.wp-admin & {
pointer-events: none;
}
}
Loading
Loading