woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Refactoring axo element handling

Browse source
This commit is contained in:
Pedro Silva 2024-03-12 09:23:42 +00:00
parent 795c1fdcd6
commit a9d2f97a80
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
7 changed files with 109 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

89
modules/ppcp-axo/resources/js/AxoManager.js
View file

@ -17,6 +17,7 @@ class AxoManager {
this.$ = jQuery;
this.isConnectProfile = false;
this.isNewProfile = false;
this.hideGatewaySelection = false;
this.data = {
@ -37,9 +38,9 @@ class AxoManager {
this.registerEventHandlers();
this.shippingView = new ShippingView(this.el.shippingAddressContainer.selector);
this.billingView = new BillingView(this.el.billingAddressContainer.selector);
this.cardView = new CardView(this.el.paymentContainer.selector, this);
this.shippingView = new ShippingView(this.el.shippingAddressContainer.selector, this.el);
this.billingView = new BillingView(this.el.billingAddressContainer.selector, this.el);
this.cardView = new CardView(this.el.paymentContainer.selector, this.el, this);
}
registerEventHandlers() {
@ -58,14 +59,13 @@ class AxoManager {
});
// On checkout form submitted.
this.$(document).on('click', this.el.submitButton.selector, () => {
this.el.submitButton.on('click', () => {
this.onClickSubmitButton();
return false;
});
})
// Click change shipping address link.
this.$(document).on('click', '*[data-ppcp-axo-change-shipping-address]', async () => {
this.el.changeShippingAddressLink.on('click', async () => {
if (this.isConnectProfile) {
console.log('profile', this.fastlane.profile);
@ -79,35 +79,18 @@ class AxoManager {
this.setShipping(selectedAddress);
this.shippingView.activate();
}
} else {
let checkbox = document.querySelector('#ship-to-different-address-checkbox');
if (checkbox && !checkbox.checked) {
jQuery(checkbox).trigger('click');
}
this.shippingView.deactivate();
}
});
this.$(document).on('click', '*[data-ppcp-axo-save-shipping-address]', async () => {
this.shippingView.activate();
});
// Click change billing address link.
this.$(document).on('click', '*[data-ppcp-axo-change-billing-address]', async () => {
this.el.changeBillingAddressLink.on('click', async () => {
if (this.isConnectProfile) {
this.$('*[data-ppcp-axo-change-card]').trigger('click');
} else {
this.billingView.deactivate();
this.el.changeCardLink.trigger('click');
}
});
this.$(document).on('click', '*[data-ppcp-axo-save-billing-address]', async () => {
this.billingView.activate();
});
// Click change card link.
this.$(document).on('click', '*[data-ppcp-axo-change-card]', async () => {
this.el.changeCardLink.on('click', async () => {
console.log('profile', this.fastlane.profile);
const response = await this.fastlane.profile.showCardSelector();
@ -123,7 +106,7 @@ class AxoManager {
});
// Cancel "continuation" mode.
this.$(document).on('click', '*[data-ppcp-axo-show-gateway-selection]', async () => {
this.el.showGatewaySelectionLink.on('click', async () => {
this.hideGatewaySelection = false;
this.$('.wc_payment_methods label').show();
this.cardView.refresh();
@ -135,21 +118,35 @@ class AxoManager {
this.initPlacements();
this.initFastlane();
this.shippingView.activate();
this.billingView.activate();
if (!this.isNewProfile && !this.isConnectProfile) {
this.el.allFields.hide();
}
if (this.useEmailWidget()) {
this.el.emailWidgetContainer.show();
this.el.fieldBillingEmail.hide();
} else {
this.el.emailWidgetContainer.hide();
this.el.fieldBillingEmail.show();
}
if (this.isConnectProfile) {
this.shippingView.activate();
this.billingView.activate();
this.el.emailWidgetContainer.hide();
this.el.fieldBillingEmail.hide();
}
this.el.emailWidgetContainer.show();
this.el.watermarkContainer.show();
this.el.paymentContainer.show();
this.el.submitButtonContainer.show();
this.el.defaultSubmitButton.hide();
if (this.useEmailWidget()) {
this.el.fieldBillingEmail.hide();
}
}
hideAxo() {
this.el.allFields.show();
this.shippingView.deactivate();
this.billingView.deactivate();
@ -159,9 +156,8 @@ class AxoManager {
this.el.submitButtonContainer.hide();
this.el.defaultSubmitButton.show();
if (this.useEmailWidget()) {
this.el.fieldBillingEmail.show();
}
this.el.emailWidgetContainer.hide();
this.el.fieldBillingEmail.show();
}
initPlacements() {
@ -271,16 +267,20 @@ class AxoManager {
log('Email changed: ' + this.emailInput.value);
this.isConnectProfile = false;
this.isNewProfile = false;
this.hideGatewaySelection = false;
this.el.allFields.hide();
if (!this.emailInput.checkValidity()) {
log('The email address is not valid.');
return;
}
const lookupResponse = await this.fastlane.identity.lookupCustomerByEmail(this.emailInput.value);
this.data.email = this.emailInput.value;
this.billingView.setData(this.data);
this.el.paymentContainer.show();
const lookupResponse = await this.fastlane.identity.lookupCustomerByEmail(this.emailInput.value);
if (lookupResponse.customerContextId) {
// Email is associated with a Connect profile or a PayPal member.
@ -296,6 +296,10 @@ class AxoManager {
if (authResponse.authenticationState === 'succeeded') {
log(JSON.stringify(authResponse));
this.el.allFields.show();
this.el.paymentContainer.show();
// document.querySelector(this.el.paymentContainer.selector).innerHTML =
// '<a href="javascript:void(0)" data-ppcp-axo-change-card>Change card</a>';
@ -322,6 +326,11 @@ class AxoManager {
// This is a guest customer.
log('No profile found with this email address.');
this.el.allFields.show();
this.el.paymentContainer.show();
this.isNewProfile = true;
this.cardComponent = await this.fastlane
.FastlaneCardComponent(MockData.cardComponent())
.render(this.el.paymentContainer.selector);

7
modules/ppcp-axo/resources/js/Components/DomElement.js
View file

@ -8,6 +8,7 @@ class DomElement {
this.selector = this.config.selector;
this.id = this.config.id || null;
this.className = this.config.className || null;
this.attributes = this.config.attributes || null;
this.anchorSelector = this.config.anchorSelector || null;
}
@ -19,12 +20,12 @@ class DomElement {
this.$(document).on(action, this.selector, callable);
}
hide(important = false) {
setVisible(this.selector, false, important);
hide() {
this.$(this.selector).hide();
}
show() {
setVisible(this.selector, true);
this.$(this.selector).show();
}
click() {

25
modules/ppcp-axo/resources/js/Components/DomElementCollection.js
View file

@ -23,6 +23,10 @@ class DomElementCollection {
className: 'ppcp-axo-watermark-container'
});
this.allFields = new DomElement({
selector: '#customer_details .form-row, #customer_details .woocommerce-shipping-fields'
});
this.emailWidgetContainer = new DomElement({
id: 'ppcp-axo-email-widget',
selector: '#ppcp-axo-email-widget',
@ -54,6 +58,27 @@ class DomElementCollection {
this.submitButton = new DomElement({
selector: '#ppcp-axo-submit-button-container button'
});
this.changeShippingAddressLink = new DomElement({
selector: '*[data-ppcp-axo-change-shipping-address]',
attributes: 'data-ppcp-axo-change-shipping-address',
});
this.changeBillingAddressLink = new DomElement({
selector: '*[data-ppcp-axo-change-billing-address]',
attributes: 'data-ppcp-axo-change-billing-address',
});
this.changeCardLink = new DomElement({
selector: '*[data-ppcp-axo-change-card]',
attributes: 'data-ppcp-axo-change-card',
});
this.showGatewaySelectionLink = new DomElement({
selector: '*[data-ppcp-axo-show-gateway-selection]',
attributes: 'data-ppcp-axo-show-gateway-selection',
});
}
}

9
modules/ppcp-axo/resources/js/Helper/FormFieldGroup.js → modules/ppcp-axo/resources/js/Components/FormFieldGroup.js
View file

@ -66,17 +66,14 @@ class MockData {
},
isEmpty: () => {
let isEmpty = true;
Object.values(this.fields).forEach((valuefield) => {
if (this.getDataValue(valuefield.valuePath)) {
Object.values(this.fields).forEach((valueField) => {
if (this.getDataValue(valueField.valuePath)) {
isEmpty = false;
return false;
}
});
return isEmpty;
},
isEditing: () => {
return ! this.active;
},
}
});
}

25
modules/ppcp-axo/resources/js/Views/BillingView.js
View file

@ -1,36 +1,35 @@
import FormFieldGroup from "../Helper/FormFieldGroup";
import FormFieldGroup from "../Components/FormFieldGroup";
class BillingView {
constructor(selector) {
constructor(selector, elements) {
this.el = elements;
this.billingFormFields = new FormFieldGroup({
baseSelector: '.woocommerce-checkout',
contentSelector: selector,
template: (data) => {
const valueOfSelect = (selectSelector, key) => {
if (!key) {
return '';
}
const selectElement = document.querySelector(selectSelector);
const option = selectElement.querySelector(`option[value="${key}"]`);
return option ? option.textContent : key;
}
if (data.isEditing()) {
return `
<div style="margin-bottom: 20px;">
<h4><a href="javascript:void(0)" data-ppcp-axo-save-billing-address>Save</a></h4>
</div>
`;
}
if (data.isEmpty()) {
return `
<div style="margin-bottom: 20px;">
<h3>Billing details <a href="javascript:void(0)" ${this.el.changeBillingAddressLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div>Please fill in your billing details.</div>
<h4><a href="javascript:void(0)" data-ppcp-axo-change-billing-address>Edit</a></h4>
</div>
`;
}
return `
<div style="margin-bottom: 20px;">
<h4>Billing address</h4>
<h3>Billing details <a href="javascript:void(0)" ${this.el.changeBillingAddressLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div>${data.value('email')}</div>
<div>${data.value('company')}</div>
<div>${data.value('firstName')} ${data.value('lastName')}</div>
<div>${data.value('street1')}</div>
@ -39,11 +38,13 @@ class BillingView {
<div>${valueOfSelect('#billing_state', data.value('stateCode'))}</div>
<div>${valueOfSelect('#billing_country', data.value('countryCode'))}</div>
<div>${data.value('phone')}</div>
<h4><a href="javascript:void(0)" data-ppcp-axo-change-billing-address>Edit</a></h4>
</div>
`;
},
fields: {
email: {
'valuePath': 'email',
},
firstName: {
'selector': '#billing_first_name_field',
'valuePath': 'billing.name.firstName',

11
modules/ppcp-axo/resources/js/Views/CardView.js
View file

@ -1,8 +1,9 @@
import FormFieldGroup from "../Helper/FormFieldGroup";
import FormFieldGroup from "../Components/FormFieldGroup";
class CardView {
constructor(selector, manager) {
constructor(selector, elements, manager) {
this.el = elements;
this.manager = manager;
this.cardFormFields = new FormFieldGroup({
@ -13,21 +14,21 @@ class CardView {
if (!this.manager.hideGatewaySelection) {
return '';
}
return `<p style="margin-top: 40px; text-align: center;"><a href="javascript:void(0)" data-ppcp-axo-show-gateway-selection>Select other payment method</a></p>`;
return `<p style="margin-top: 40px; text-align: center;"><a href="javascript:void(0)" ${this.el.showGatewaySelectionLink.attributes}>Select other payment method</a></p>`;
};
if (data.isEmpty()) {
return `
<div style="margin-bottom: 20px; text-align: center;">
<div>Please fill in your card details.</div>
<h4><a href="javascript:void(0)" data-ppcp-axo-change-card>Edit</a></h4>
<h4><a href="javascript:void(0)" ${this.el.changeCardLink.attributes}>Edit</a></h4>
${selectOtherPaymentMethod()}
</div>
`;
}
return `
<div style="margin-bottom: 20px;">
<h3>Card Details <a href="javascript:void(0)" data-ppcp-axo-change-card>Edit</a></h3>
<h3>Card Details <a href="javascript:void(0)" ${this.el.changeCardLink.attributes}>Edit</a></h3>
<div>${data.value('name')}</div>
<div>${data.value('brand')}</div>
<div>${data.value('lastDigits') ? '************' + data.value('lastDigits'): ''}</div>

20
modules/ppcp-axo/resources/js/Views/ShippingView.js
View file

@ -1,36 +1,34 @@
import FormFieldGroup from "../Helper/FormFieldGroup";
import FormFieldGroup from "../Components/FormFieldGroup";
class ShippingView {
constructor(selector) {
constructor(selector, elements) {
this.el = elements;
this.shippingFormFields = new FormFieldGroup({
baseSelector: '.woocommerce-checkout',
contentSelector: selector,
template: (data) => {
const valueOfSelect = (selectSelector, key) => {
if (!key) {
return '';
}
const selectElement = document.querySelector(selectSelector);
const option = selectElement.querySelector(`option[value="${key}"]`);
return option ? option.textContent : key;
}
if (data.isEditing()) {
return `
<div style="margin-bottom: 20px;">
<h3>Shipping details <a href="javascript:void(0)" data-ppcp-axo-save-shipping-address style="margin-left: 20px;">Save</a></h3>
</div>
`;
}
if (data.isEmpty()) {
return `
<div style="margin-bottom: 20px;">
<h3>Shipping details <a href="javascript:void(0)" data-ppcp-axo-change-shipping-address style="margin-left: 20px;">Edit</a></h3>
<h3>Shipping details <a href="javascript:void(0)" ${this.el.changeShippingAddressLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div>Please fill in your shipping details.</div>
</div>
`;
}
return `
<div style="margin-bottom: 20px;">
<h3>Shipping details <a href="javascript:void(0)" data-ppcp-axo-change-shipping-address style="margin-left: 20px;">Edit</a></h3>
<h3>Shipping details <a href="javascript:void(0)" ${this.el.changeShippingAddressLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div>${data.value('company')}</div>
<div>${data.value('firstName')} ${data.value('lastName')}</div>
<div>${data.value('street1')}</div>