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 module

Browse source
This commit is contained in:
Pedro Silva 2024-03-08 17:41:21 +00:00
parent 039cc53f40
commit 795c1fdcd6
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
8 changed files with 365 additions and 311 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,105 @@
import FormFieldGroup from "../Helper/FormFieldGroup";
class BillingView {
constructor(selector) {
this.billingFormFields = new FormFieldGroup({
baseSelector: '.woocommerce-checkout',
contentSelector: selector,
template: (data) => {
const valueOfSelect = (selectSelector, key) => {
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;">
<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>
<div>${data.value('company')}</div>
<div>${data.value('firstName')} ${data.value('lastName')}</div>
<div>${data.value('street1')}</div>
<div>${data.value('street2')}</div>
<div>${data.value('postCode')} ${data.value('city')}</div>
<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: {
firstName: {
'selector': '#billing_first_name_field',
'valuePath': 'billing.name.firstName',
},
lastName: {
'selector': '#billing_last_name_field',
'valuePath': 'billing.name.lastName',
},
street1: {
'selector': '#billing_address_1_field',
'valuePath': 'billing.address.addressLine1',
},
street2: {
'selector': '#billing_address_2_field',
'valuePath': null
},
postCode: {
'selector': '#billing_postcode_field',
'valuePath': 'billing.address.postalCode',
},
city: {
'selector': '#billing_city_field',
'valuePath': 'billing.address.adminArea2',
},
stateCode: {
'selector': '#billing_state_field',
'valuePath': 'billing.address.adminArea1',
},
countryCode: {
'selector': '#billing_country_field',
'valuePath': 'billing.address.countryCode',
},
company: {
'selector': '#billing_company_field',
'valuePath': null,
},
phone: {
'selector': '#billing_phone_field',
'valuePath': null,
},
}
});
}
activate() {
this.billingFormFields.activate();
}
deactivate() {
this.billingFormFields.deactivate();
}
setData(data) {
this.billingFormFields.setData(data);
}
}
export default BillingView;