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

Merge pull request #2326 from woocommerce/PCP-3208-fastlane-add-call-to-action-for-unauthenticated-user

Browse source 
AXO: Add a Continue button next to the email input (3208)
This commit is contained in:
Emili Castells 2024-06-12 09:47:50 +02:00 • committed by GitHub
commit c161d03e7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 169 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

52
modules/ppcp-axo/resources/css/styles.scss
View file

@ -12,6 +12,39 @@
}
}
#ppcp-axo-billing-email-field-wrapper {
display: flex;
gap: 0.5rem;
}
#ppcp-axo-billing-email-submit-button {
margin-top: 0;
position: relative;
transition: opacity 0.3s ease;
flex: 0 1 auto;
align-self: flex-start;
.loader:before {
display: inline;
height: 12px;
width: 12px;
margin-left: -6px;
margin-top: -6px;
left: auto;
right: auto;
}
}
.ppcp-axo-billing-email-submit-button {
&-hidden {
opacity: 0;
}
&-loaded:not([disabled]) {
opacity: 1;
}
}
.ppcp-axo-payment-container {
padding: 1rem 0;
background-color: #ffffff;
@ -89,3 +122,22 @@
max-height: 25px;
}
}
.ppcp-axo-customer-details #billing_email_field .woocommerce-input-wrapper {
flex: 1 1 auto;
}
@media screen and (max-width: 719px) {
#ppcp-axo-billing-email {
&-field-wrapper {
flex-direction: column;
}
&-submit-button {
align-self: auto;
}
}
}

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

@ -167,12 +167,15 @@ class AxoManager {
ev.preventDefault();
log(`Enter key attempt - emailInput: ${this.emailInput.value}`);
log(`this.lastEmailCheckedIdentity: ${this.lastEmailCheckedIdentity}`);
this.validateEmail(this.el.fieldBillingEmail.selector);
if (this.emailInput && this.lastEmailCheckedIdentity !== this.emailInput.value) {
await this.onChangeEmail();
}
}
});
this.reEnableEmailInput();
// Clear last email checked identity when email field is focused.
this.$('#billing_email_field input').on('focus', (ev) => {
log(`Clear the last email checked: ${this.lastEmailCheckedIdentity}`);
@ -219,8 +222,10 @@ class AxoManager {
if (scenario.defaultSubmitButton) {
this.el.defaultSubmitButton.show();
this.el.billingEmailSubmitButton.hide();
} else {
this.el.defaultSubmitButton.hide();
this.el.billingEmailSubmitButton.show();
}
if (scenario.defaultEmailField) {
@ -246,8 +251,8 @@ class AxoManager {
this.el.watermarkContainer.show();
// Move watermark to after email.
this.$(this.el.fieldBillingEmail.selector).append(
this.$(this.el.watermarkContainer.selector)
document.querySelector('#billing_email_field .woocommerce-input-wrapper').append(
document.querySelector(this.el.watermarkContainer.selector)
);
} else {
this.el.emailWidgetContainer.hide();
@ -280,6 +285,8 @@ class AxoManager {
if (scenario.axoPaymentContainer) {
this.el.paymentContainer.show();
this.el.gatewayDescription.hide();
document.querySelector(this.el.billingEmailSubmitButton.selector).setAttribute('disabled', 'disabled');
} else {
this.el.paymentContainer.hide();
}
@ -425,10 +432,18 @@ class AxoManager {
`);
}
// billingEmailFieldWrapper
const befw = this.el.billingEmailFieldWrapper;
if (!document.querySelector(befw.selector)) {
document.querySelector('#billing_email_field .woocommerce-input-wrapper').insertAdjacentHTML('afterend', `
<div id="${befw.id}"></div>
`);
}
// Watermark container
const wc = this.el.watermarkContainer;
if (!document.querySelector(wc.selector)) {
this.emailInput.insertAdjacentHTML('afterend', `
document.querySelector(befw.selector).insertAdjacentHTML('beforeend', `
<div class="${wc.className}" id="${wc.id}"></div>
`);
}
@ -458,10 +473,10 @@ class AxoManager {
}
} else {
// Move email to the AXO container.
let emailRow = document.querySelector(this.el.fieldBillingEmail.selector);
wrapperElement.prepend(emailRow);
document.querySelector(this.el.billingEmailFieldWrapper.selector).prepend(document.querySelector('#billing_email_field .woocommerce-input-wrapper'));
}
}
@ -472,7 +487,8 @@ class AxoManager {
this.initialized = true;
await this.connect();
this.renderWatermark();
await this.renderWatermark();
this.renderEmailSubmitButton();
this.watchEmail();
}
@ -501,6 +517,24 @@ class AxoManager {
this.toggleWatermarkLoading(this.el.watermarkContainer, 'ppcp-axo-watermark-loading', 'loader');
}
renderEmailSubmitButton() {
const billingEmailSubmitButton = this.el.billingEmailSubmitButton;
const billingEmailSubmitButtonSpinner = this.el.billingEmailSubmitButtonSpinner;
if (!document.querySelector(billingEmailSubmitButton.selector)) {
document.querySelector(this.el.billingEmailFieldWrapper.selector).insertAdjacentHTML('beforeend', `
<button type="button" id="${billingEmailSubmitButton.id}" class="${billingEmailSubmitButton.className}">
${this.axoConfig.billing_email_button_text}
<span id="${billingEmailSubmitButtonSpinner.id}"></span>
</button>
`);
document.querySelector(this.el.billingEmailSubmitButton.selector).offsetHeight;
document.querySelector(this.el.billingEmailSubmitButton.selector).classList.remove('ppcp-axo-billing-email-submit-button-hidden');
document.querySelector(this.el.billingEmailSubmitButton.selector).classList.add('ppcp-axo-billing-email-submit-button-loaded');
}
}
watchEmail() {
if (this.useEmailWidget()) {
@ -512,6 +546,7 @@ class AxoManager {
log(`Change event attempt - emailInput: ${this.emailInput.value}`);
log(`this.lastEmailCheckedIdentity: ${this.lastEmailCheckedIdentity}`);
if (this.emailInput && this.lastEmailCheckedIdentity !== this.emailInput.value) {
this.validateEmail(this.el.fieldBillingEmail.selector);
this.onChangeEmail();
}
});
@ -549,7 +584,7 @@ class AxoManager {
this.lastEmailCheckedIdentity = this.emailInput.value;
if (!this.emailInput.value || !this.emailInput.checkValidity()) {
if (!this.emailInput.value || !this.emailInput.checkValidity() || !this.validateEmailFormat(this.emailInput.value)) {
log('The email address is not valid.');
return;
}
@ -566,8 +601,11 @@ class AxoManager {
page_type: 'checkout'
});
this.disableGatewaySelection();
this.spinnerToggleLoaderAndOverlay(this.el.billingEmailSubmitButtonSpinner, 'loader', 'ppcp-axo-overlay');
await this.lookupCustomerByEmail();
this.spinnerToggleLoaderAndOverlay(this.el.billingEmailSubmitButtonSpinner, 'loader', 'ppcp-axo-overlay');
this.enableGatewaySelection();
}
@ -878,6 +916,14 @@ class AxoManager {
}
}
spinnerToggleLoaderAndOverlay(element, loaderClass, overlayClass) {
const spinner = document.querySelector(`${element.selector}`);
if (spinner) {
spinner.classList.toggle(loaderClass);
spinner.classList.toggle(overlayClass);
}
}
toggleWatermarkLoading(container, loadingClass, loaderClass) {
const watermarkLoading = document.querySelector(`${container.selector}.${loadingClass}`);
const watermarkLoader = document.querySelector(`${container.selector}.${loaderClass}`);
@ -888,6 +934,39 @@ class AxoManager {
watermarkLoader.classList.toggle(loaderClass);
}
}
validateEmailFormat(value) {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailPattern.test(value);
}
validateEmail(billingEmail) {
const billingEmailSelector = document.querySelector(billingEmail);
const value = document.querySelector(billingEmail + ' input').value;
if (this.validateEmailFormat(value)) {
billingEmailSelector.classList.remove('woocommerce-invalid');
billingEmailSelector.classList.add('woocommerce-validated');
this.setStatus('validEmail', true);
} else {
billingEmailSelector.classList.remove('woocommerce-validated');
billingEmailSelector.classList.add('woocommerce-invalid');
this.setStatus('validEmail', false);
}
}
reEnableEmailInput() {
const reEnableInput = (ev) => {
const submitButton = document.querySelector(this.el.billingEmailSubmitButton.selector);
if (submitButton.hasAttribute('disabled')) {
submitButton.removeAttribute('disabled');
}
};
this.$('#billing_email_field input').on('focus', reEnableInput);
this.$('#billing_email_field input').on('input', reEnableInput);
this.$('#billing_email_field input').on('click', reEnableInput);
}
}
export default AxoManager;

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

@ -7,6 +7,10 @@ class DomElementCollection {
selector: '#payment_method_ppcp-axo-gateway',
});
this.gatewayDescription = new DomElement({
selector: '.payment_box.payment_method_ppcp-axo-gateway',
});
this.defaultSubmitButton = new DomElement({
selector: '#place_order',
});
@ -56,6 +60,23 @@ class DomElementCollection {
selector: '#billing_email_field'
});
this.billingEmailFieldWrapper = new DomElement({
id: 'ppcp-axo-billing-email-field-wrapper',
selector: '#ppcp-axo-billing-email-field-wrapper',
});
this.billingEmailSubmitButton = new DomElement({
id: 'ppcp-axo-billing-email-submit-button',
selector: '#ppcp-axo-billing-email-submit-button',
className: 'ppcp-axo-billing-email-submit-button-hidden button alt wp-element-button wc-block-components-button'
});
this.billingEmailSubmitButtonSpinner = new DomElement({
id: 'ppcp-axo-billing-email-submit-button-spinner',
selector: '#ppcp-axo-billing-email-submit-button-spinner',
className: 'loader ppcp-axo-overlay'
});
this.submitButtonContainer = new DomElement({
selector: '#ppcp-axo-submit-button-container',
});

19
modules/ppcp-axo/src/Assets/AxoManager.php
View file

@ -162,13 +162,13 @@ class AxoManager {
*/
private function script_data() {
return array(
'environment' => array(
'environment' => array(
'is_sandbox' => $this->environment->current_environment() === 'sandbox',
),
'widgets' => array(
'widgets' => array(
'email' => 'render',
),
'insights' => array(
'insights' => array(
'enabled' => true,
'client_id' => ( $this->settings->has( 'client_id' ) ? $this->settings->get( 'client_id' ) : null ),
'session_id' =>
@ -182,7 +182,7 @@ class AxoManager {
'value' => WC()->cart->get_total( 'numeric' ),
),
),
'style_options' => array(
'style_options' => array(
'root' => array(
'backgroundColor' => $this->settings->has( 'axo_style_root_bg_color' ) ? $this->settings->get( 'axo_style_root_bg_color' ) : '',
'errorColor' => $this->settings->has( 'axo_style_root_error_color' ) ? $this->settings->get( 'axo_style_root_error_color' ) : '',
@ -201,21 +201,22 @@ class AxoManager {
'focusBorderColor' => $this->settings->has( 'axo_style_input_focus_border_color' ) ? $this->settings->get( 'axo_style_input_focus_border_color' ) : '',
),
),
'name_on_card' => $this->settings->has( 'axo_name_on_card' ) ? $this->settings->get( 'axo_name_on_card' ) : '',
'woocommerce' => array(
'name_on_card' => $this->settings->has( 'axo_name_on_card' ) ? $this->settings->get( 'axo_name_on_card' ) : '',
'woocommerce' => array(
'states' => array(
'US' => WC()->countries->get_states( 'US' ),
'CA' => WC()->countries->get_states( 'CA' ),
),
),
'icons_directory' => esc_url( $this->wcgateway_module_url ) . 'assets/images/axo/',
'module_url' => untrailingslashit( $this->module_url ),
'ajax' => array(
'icons_directory' => esc_url( $this->wcgateway_module_url ) . 'assets/images/axo/',
'module_url' => untrailingslashit( $this->module_url ),
'ajax' => array(
'frontend_logger' => array(
'endpoint' => \WC_AJAX::get_endpoint( FrontendLoggerEndpoint::ENDPOINT ),
'nonce' => wp_create_nonce( FrontendLoggerEndpoint::nonce() ),
),
),
'billing_email_button_text' => __( 'Continue', 'woocommerce-paypal-payments' ),
);
}

2
modules/ppcp-axo/src/Gateway/AxoGateway.php
View file

@ -168,7 +168,7 @@ class AxoGateway extends WC_Payment_Gateway {
? $this->ppcp_settings->get( 'axo_gateway_title' )
: $this->get_option( 'title', $this->method_title );
$this->description = $this->get_option( 'description', '' );
$this->description = __( 'Enter your email address to continue.', 'woocommerce-paypal-payments' );
$this->init_form_fields();
$this->init_settings();