mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Fixes AXO module
This commit is contained in:
Pedro Silva
parent
c71c56973a
commit
995621ba21
8 changed files with 138 additions and 58 deletions
|
|
@ -209,9 +209,9 @@ return array(
|
|||
'Advanced Style Settings (optional) %1$sSee more%2$s %3$sSee less%4$s',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'<a href="javascript:void(0)" id="ppcp-axo-style-more" onclick="jQuery(this).hide(); jQuery(\'#ppcp-axo-style-less\').show(); document.ppcpAxoShowStyles = true; jQuery(document).trigger(\'ppcp-display-change\');" style="font-weight: normal; text-decoration: none;">',
|
||||
'<a href="javascript:void(0)" id="ppcp-axo-style-more" onclick="jQuery(this).hide(); jQuery(\'#ppcp-axo-style-less\').show(); document.ppcpAxoShowStyles = true; jQuery(document).trigger(\'ppcp-display-change\');" style="font-weight: normal;">',
|
||||
'</a>',
|
||||
'<a href="javascript:void(0)" id="ppcp-axo-style-less" onclick="jQuery(this).hide(); jQuery(\'#ppcp-axo-style-more\').show(); document.ppcpAxoShowStyles = false; jQuery(document).trigger(\'ppcp-display-change\');" style="font-weight: normal; text-decoration: none; display: none;">',
|
||||
'<a href="javascript:void(0)" id="ppcp-axo-style-less" onclick="jQuery(this).hide(); jQuery(\'#ppcp-axo-style-more\').show(); document.ppcpAxoShowStyles = false; jQuery(document).trigger(\'ppcp-display-change\');" style="font-weight: normal; display: none;">',
|
||||
'</a>'
|
||||
),
|
||||
'type' => 'ppcp-heading',
|
||||
|
|
@ -219,13 +219,10 @@ return array(
|
|||
sprintf(
|
||||
// translators: %1$s and %2$s is a link tag.
|
||||
__(
|
||||
'Leave the default styling, or customize how Fastlane looks on your website. See PayPal\'s developer docs for info',
|
||||
'Leave the default styling, or customize how Fastlane looks on your website. %1$sSee PayPal\'s developer docs%2$s for info',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'<a
|
||||
rel="noreferrer noopener"
|
||||
href="https://woo.com/document/woocommerce-paypal-payments/#vaulting-a-card"
|
||||
>',
|
||||
'<a href="https://www.paypal.com/us/fastlane" target="_blank">',
|
||||
'</a>'
|
||||
)
|
||||
),
|
||||
|
|
|
|||
|
|
@ -34,3 +34,7 @@
|
|||
.ppcp-axo-field-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ppcp-axo-customer-details {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,8 +51,9 @@ class AxoManager {
|
|||
this.setStatus(key, value);
|
||||
}
|
||||
|
||||
document.axoDebugObject = (key, value) => {
|
||||
document.axoDebugObject = () => {
|
||||
console.log(this);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -351,6 +352,27 @@ class AxoManager {
|
|||
`);
|
||||
}
|
||||
|
||||
// Watermark container
|
||||
const wc = this.el.watermarkContainer;
|
||||
if (!document.querySelector(wc.selector)) {
|
||||
this.emailInput = document.querySelector(this.el.fieldBillingEmail.selector + ' input');
|
||||
this.emailInput.insertAdjacentHTML('afterend', `
|
||||
<div class="${wc.className}" id="${wc.id}"></div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Payment container
|
||||
const pc = this.el.paymentContainer;
|
||||
if (!document.querySelector(pc.selector)) {
|
||||
const gatewayPaymentContainer = document.querySelector('.payment_method_ppcp-axo-gateway');
|
||||
gatewayPaymentContainer.insertAdjacentHTML('beforeend', `
|
||||
<div id="${pc.id}" class="${pc.className} hidden">
|
||||
<div id="${pc.id}-form" class="${pc.className}-form"></div>
|
||||
<div id="${pc.id}-details" class="${pc.className}-details"></div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.useEmailWidget()) {
|
||||
|
||||
// Display email widget.
|
||||
|
|
@ -379,7 +401,6 @@ class AxoManager {
|
|||
this.initialized = true;
|
||||
|
||||
await this.connect();
|
||||
this.insertDomElements();
|
||||
this.renderWatermark();
|
||||
this.watchEmail();
|
||||
}
|
||||
|
|
@ -395,21 +416,6 @@ class AxoManager {
|
|||
this.fastlane.setLocale('en_us');
|
||||
}
|
||||
|
||||
insertDomElements() {
|
||||
this.emailInput = document.querySelector(this.el.fieldBillingEmail.selector + ' input');
|
||||
this.emailInput.insertAdjacentHTML('afterend', `
|
||||
<div class="${this.el.watermarkContainer.className}" id="${this.el.watermarkContainer.id}"></div>
|
||||
`);
|
||||
|
||||
const gatewayPaymentContainer = document.querySelector('.payment_method_ppcp-axo-gateway');
|
||||
gatewayPaymentContainer.insertAdjacentHTML('beforeend', `
|
||||
<div id="${this.el.paymentContainer.id}" class="${this.el.paymentContainer.className} hidden">
|
||||
<div id="${this.el.paymentContainer.id}-form" class="${this.el.paymentContainer.className}-form"></div>
|
||||
<div id="${this.el.paymentContainer.id}-details" class="${this.el.paymentContainer.className}-details"></div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
triggerGatewayChange() {
|
||||
this.el.gatewayRadioButton.trigger('change');
|
||||
}
|
||||
|
|
@ -551,14 +557,20 @@ class AxoManager {
|
|||
}
|
||||
|
||||
onClickSubmitButton() {
|
||||
// TODO: validate data.
|
||||
|
||||
if (this.data.card) { // Ryan flow
|
||||
log('Ryan flow.');
|
||||
console.log('this.data.card', this.data.card);
|
||||
|
||||
jQuery('#ship-to-different-address-checkbox').prop('checked', 'checked');
|
||||
this.billingView.copyDataToForm();
|
||||
this.shippingView.copyDataToForm();
|
||||
this.cardView.copyDataToForm();
|
||||
|
||||
this.submit(this.data.card.id);
|
||||
|
||||
} else { // Gary flow
|
||||
log('Gary flow.');
|
||||
console.log('this.tokenizeData()', this.tokenizeData());
|
||||
|
||||
try {
|
||||
this.cardComponent.tokenize(
|
||||
|
|
|
|||
|
|
@ -17,10 +17,17 @@ class FormFieldGroup {
|
|||
this.refresh();
|
||||
}
|
||||
|
||||
getDataValue(path) {
|
||||
dataValue(fieldKey) {
|
||||
if (!fieldKey || !this.fields[fieldKey]) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const path = this.fields[fieldKey].valuePath;
|
||||
|
||||
if (!path) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const value = path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined) ? acc[key] : undefined, this.data);
|
||||
return value ? value : '';
|
||||
}
|
||||
|
|
@ -66,13 +73,13 @@ class FormFieldGroup {
|
|||
|
||||
if (typeof this.template === 'function') {
|
||||
content.innerHTML = this.template({
|
||||
value: (valueKey) => {
|
||||
return this.getDataValue(this.fields[valueKey].valuePath);
|
||||
value: (fieldKey) => {
|
||||
return this.dataValue(fieldKey);
|
||||
},
|
||||
isEmpty: () => {
|
||||
let isEmpty = true;
|
||||
Object.values(this.fields).forEach((valueField) => {
|
||||
if (this.getDataValue(valueField.valuePath)) {
|
||||
Object.keys(this.fields).forEach((fieldKey) => {
|
||||
if (this.dataValue(fieldKey)) {
|
||||
isEmpty = false;
|
||||
return false;
|
||||
}
|
||||
|
|
@ -98,20 +105,47 @@ class FormFieldGroup {
|
|||
}
|
||||
}
|
||||
|
||||
inputValue(name) {
|
||||
inputElement(name) {
|
||||
const baseSelector = this.fields[name].selector;
|
||||
|
||||
const select = document.querySelector(baseSelector + ' input');
|
||||
const select = document.querySelector(baseSelector + ' select');
|
||||
if (select) {
|
||||
return select.value;
|
||||
return select;
|
||||
}
|
||||
|
||||
const input = document.querySelector(baseSelector + ' input');
|
||||
if (input) {
|
||||
return input.value;
|
||||
return input;
|
||||
}
|
||||
|
||||
return '';
|
||||
return null;
|
||||
}
|
||||
|
||||
inputValue(name) {
|
||||
const el = this.inputElement(name);
|
||||
return el ? el.value : '';
|
||||
}
|
||||
|
||||
copyDataToForm() {
|
||||
|
||||
Object.keys(this.fields).forEach((fieldKey) => {
|
||||
const field = this.fields[fieldKey];
|
||||
|
||||
if (!field.valuePath || !field.selector) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const inputElement = this.inputElement(fieldKey);
|
||||
|
||||
if (!inputElement) {
|
||||
return true;
|
||||
}
|
||||
|
||||
jQuery(inputElement).val(
|
||||
this.dataValue(fieldKey)
|
||||
);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ class BillingView {
|
|||
constructor(selector, elements) {
|
||||
this.el = elements;
|
||||
|
||||
this.billingFormFields = new FormFieldGroup({
|
||||
this.group = new FormFieldGroup({
|
||||
baseSelector: '.woocommerce-checkout',
|
||||
contentSelector: selector,
|
||||
template: (data) => {
|
||||
|
|
@ -81,42 +81,46 @@ class BillingView {
|
|||
'selector': '#billing_company_field',
|
||||
'valuePath': null,
|
||||
},
|
||||
phone: {
|
||||
'selector': '#billing_phone_field',
|
||||
'valuePath': null,
|
||||
},
|
||||
// phone: {
|
||||
// 'selector': '#billing_phone_field',
|
||||
// 'valuePath': null,
|
||||
// },
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
isActive() {
|
||||
return this.billingFormFields.active;
|
||||
return this.group.active;
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.billingFormFields.activate();
|
||||
this.group.activate();
|
||||
}
|
||||
|
||||
deactivate() {
|
||||
this.billingFormFields.deactivate();
|
||||
this.group.deactivate();
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.billingFormFields.refresh();
|
||||
this.group.refresh();
|
||||
}
|
||||
|
||||
setData(data) {
|
||||
this.billingFormFields.setData(data);
|
||||
this.group.setData(data);
|
||||
}
|
||||
|
||||
inputValue(name) {
|
||||
return this.billingFormFields.inputValue(name);
|
||||
return this.group.inputValue(name);
|
||||
}
|
||||
|
||||
fullName() {
|
||||
return `${this.inputValue('firstName')} ${this.inputValue('lastName')}`.trim();
|
||||
}
|
||||
|
||||
copyDataToForm() {
|
||||
return this.group.copyDataToForm();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default BillingView;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ class CardView {
|
|||
this.el = elements;
|
||||
this.manager = manager;
|
||||
|
||||
this.cardFormFields = new FormFieldGroup({
|
||||
this.group = new FormFieldGroup({
|
||||
baseSelector: '.ppcp-axo-payment-container',
|
||||
contentSelector: selector,
|
||||
template: (data) => {
|
||||
|
|
@ -76,19 +76,37 @@ class CardView {
|
|||
}
|
||||
|
||||
activate() {
|
||||
this.cardFormFields.activate();
|
||||
this.group.activate();
|
||||
}
|
||||
|
||||
deactivate() {
|
||||
this.cardFormFields.deactivate();
|
||||
this.group.deactivate();
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.cardFormFields.refresh();
|
||||
this.group.refresh();
|
||||
}
|
||||
|
||||
setData(data) {
|
||||
this.cardFormFields.setData(data);
|
||||
this.group.setData(data);
|
||||
}
|
||||
|
||||
copyDataToForm() {
|
||||
const name = this.group.dataValue('name');
|
||||
const { firstName, lastName } = this.splitName(name);
|
||||
|
||||
jQuery('#billing_first_name').val(firstName);
|
||||
jQuery('#billing_last_name').val(lastName);
|
||||
|
||||
return this.group.copyDataToForm();
|
||||
}
|
||||
|
||||
splitName(fullName) {
|
||||
let nameParts = fullName.trim().split(' ');
|
||||
let firstName = nameParts[0];
|
||||
let lastName = nameParts.length > 1 ? nameParts[nameParts.length - 1] : '';
|
||||
|
||||
return { firstName, lastName };
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ class ShippingView {
|
|||
constructor(selector, elements) {
|
||||
this.el = elements;
|
||||
|
||||
this.shippingFormFields = new FormFieldGroup({
|
||||
this.group = new FormFieldGroup({
|
||||
baseSelector: '.woocommerce-checkout',
|
||||
contentSelector: selector,
|
||||
template: (data) => {
|
||||
|
|
@ -86,23 +86,27 @@ class ShippingView {
|
|||
}
|
||||
|
||||
isActive() {
|
||||
return this.shippingFormFields.active;
|
||||
return this.group.active;
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.shippingFormFields.activate();
|
||||
this.group.activate();
|
||||
}
|
||||
|
||||
deactivate() {
|
||||
this.shippingFormFields.deactivate();
|
||||
this.group.deactivate();
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.shippingFormFields.refresh();
|
||||
this.group.refresh();
|
||||
}
|
||||
|
||||
setData(data) {
|
||||
this.shippingFormFields.setData(data);
|
||||
this.group.setData(data);
|
||||
}
|
||||
|
||||
copyDataToForm() {
|
||||
return this.group.copyDataToForm();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,6 +127,13 @@ class AxoModule implements ModuleInterface {
|
|||
}
|
||||
);
|
||||
|
||||
add_action('wp_head', function () {
|
||||
echo '
|
||||
<!-- PayPal Insights SDK JS library -->
|
||||
<script async src="https://www.paypalobjects.com/insights/v1/paypal-insights.sandbox.min.js"></script>
|
||||
';
|
||||
});
|
||||
|
||||
},
|
||||
1
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
