Skip to content

Commit

Permalink
Adjustments to apm button layouts.
Browse files Browse the repository at this point in the history
  • Loading branch information
pedrosilva-pt committed Dec 11, 2023
1 parent 55c7900 commit ec0dd52
Show file tree
Hide file tree
Showing 11 changed files with 159 additions and 174 deletions.
59 changes: 15 additions & 44 deletions modules/ppcp-applepay/resources/css/styles.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
.ppcp-button-applepay {
// Should replicate apm-button.scss sizes.
--apple-pay-button-height: 45px;
--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;

.ppcp-width-min & {
--apple-pay-button-height: 35px;
}
Expand All @@ -8,14 +16,6 @@
.ppcp-width-500 & {
--apple-pay-button-height: 55px;
}
}

#applepay-container, .ppcp-button-applepay {
--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;

&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
Expand All @@ -26,41 +26,19 @@
}
}

.woocommerce-checkout {
#applepay-container, .ppcp-button-applepay {
--apple-pay-button-border-radius: 4px;
&.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 All @@ -69,10 +47,3 @@
}
}
}

// todo remove
.ppcp-button-applepay {
apple-pay-button {
display: block !important;
}
}
6 changes: 3 additions & 3 deletions modules/ppcp-applepay/resources/js/ApplepayButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ 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 {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton";
import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButtons";

class ApplepayButton {

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

this.isInitialized = false;

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

if (isEligible) {
this.fetchTransactionInfo().then(() => {
Expand Down
6 changes: 0 additions & 6 deletions modules/ppcp-applepay/resources/js/boot-block.js
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 Down
6 changes: 6 additions & 0 deletions modules/ppcp-blocks/resources/css/gateway.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,14 @@

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

5 changes: 5 additions & 0 deletions modules/ppcp-button/resources/css/gateway.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@
line-height: 0;
}

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

.ppcp-button-apm {
@include apm-button.button;
}
26 changes: 25 additions & 1 deletion modules/ppcp-button/resources/css/mixins/apm-button.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,22 @@

@mixin button {
min-width: 200px;
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;
Expand All @@ -15,4 +29,14 @@
.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;
}
}
83 changes: 0 additions & 83 deletions modules/ppcp-button/resources/js/modules/Helper/ApmButton.js

This file was deleted.

100 changes: 100 additions & 0 deletions modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@

export const apmButtonsInit = (selector = '.ppcp-button-apm') => {
if (window.ppcpApmButtons) {
return;
}
window.ppcpApmButtons = new ApmButtons(selector);
}

export class ApmButtons {

constructor(selector) {
this.selector = selector;
this.containers = [];

// Reloads button containers.
this.reloadContainers();

// Refresh button layout.
jQuery(window).resize(() => {
this.refresh();
}).resize();

// Observes for new buttons.
(new MutationObserver(this.observeElementsCallback.bind(this)))
.observe(document.body, { childList: true, subtree: true });
}

observeElementsCallback(mutationsList, observer) {
const observeSelector = this.selector + ', .widget_shopping_cart, .widget_shopping_cart_content';

let shouldReload = false;
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
if (node.matches && node.matches(observeSelector)) {
shouldReload = true;
}
});
}
}

if (shouldReload) {
this.reloadContainers();
this.refresh();
}
};

reloadContainers() {
jQuery(this.selector).each((index, el) => {
const parent = jQuery(el).parent();
if (!this.containers.some($el => $el.is(parent))) {
this.containers.push(parent);
}
});
console.log('this.containers', this.containers);
}

refresh() {
for (const container of this.containers) {
const $container = jQuery(container);

// Check width and add classes
const width = $container.width();

$container.removeClass('ppcp-width-500 ppcp-width-300 ppcp-width-min');

if (width >= 500) {
$container.addClass('ppcp-width-500');
} else if (width >= 300) {
$container.addClass('ppcp-width-300');
} else {
$container.addClass('ppcp-width-min');
}

// Check first apm button
const $firstApmButton = $container.find(this.selector + ':visible').first();
const $firstElement = $container.children(':visible').first();

let isFirstElement = false;
if ($firstApmButton.is($firstElement)) {
isFirstElement = true;
}

// Assign margins to buttons
$container.find(this.selector).each((index, el) => {
const $el = jQuery(el);
const height = $el.height();

if (isFirstElement) {
$el.css('margin-top', `0px`);
return true;
}

$el.css('margin-top', `${Math.round(height * 0.3)}px`);
});

}
}

}
Loading

0 comments on commit ec0dd52

Please sign in to comment.