Merge pull request #1360 from woocommerce/PCP-1543-acdc-validation

Improve ACDC error message when empty fields
This commit is contained in:
Emili Castells 2023-06-27 11:36:09 +02:00 committed by GitHub
commit bb39a86466
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 2 deletions

View file

@ -10,6 +10,7 @@ class CreditCardRenderer {
this.spinner = spinner;
this.cardValid = false;
this.formValid = false;
this.emptyFields = new Set(['number', 'cvv', 'expirationDate']);
this.currentHostedFieldsInstance = null;
}
@ -130,7 +131,7 @@ class CreditCardRenderer {
return event.fields[key].isValid;
});
const className = this._cardNumberFiledCLassNameByCardType(event.cards[0].type);
const className = event.cards.length ? this._cardNumberFiledCLassNameByCardType(event.cards[0].type) : '';
event.fields.number.isValid
? cardNumber.classList.add(className)
: this._recreateElementClassAttribute(cardNumber, cardNumberField.className);
@ -138,6 +139,12 @@ class CreditCardRenderer {
this.formValid = formValid;
});
hostedFields.on('empty', (event) => {
this.emptyFields.add(event.emittedBy);
});
hostedFields.on('notEmpty', (event) => {
this.emptyFields.delete(event.emittedBy);
});
show(buttonSelector);
@ -249,7 +256,16 @@ class CreditCardRenderer {
});
} else {
this.spinner.unblock();
const message = ! this.cardValid ? this.defaultConfig.hosted_fields.labels.card_not_supported : this.defaultConfig.hosted_fields.labels.fields_not_valid;
let message = this.defaultConfig.labels.error.generic;
if (this.emptyFields.size > 0) {
message = this.defaultConfig.hosted_fields.labels.fields_empty;
} else if (!this.cardValid) {
message = this.defaultConfig.hosted_fields.labels.card_not_supported;
} else if (!this.formValid) {
message = this.defaultConfig.hosted_fields.labels.fields_not_valid;
}
this.errorHandler.message(message);
}
}

View file

@ -893,6 +893,10 @@ class SmartButton implements SmartButtonInterface {
'credit_card_number' => '',
'cvv' => '',
'mm_yy' => __( 'MM/YY', 'woocommerce-paypal-payments' ),
'fields_empty' => __(
'Card payment details are missing. Please fill in all required fields.',
'woocommerce-paypal-payments'
),
'fields_not_valid' => __(
'Unfortunately, your credit card details are not valid.',
'woocommerce-paypal-payments'