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

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',