Make js validation error message like WC message

This commit is contained in:
Alex P 2022-07-22 11:48:53 +03:00
parent 88838ce5ca
commit 8212605926
2 changed files with 42 additions and 19 deletions

View file

@ -40,20 +40,34 @@ const bootstrap = () => {
});
const invalidFields = Array.from(jQuery('form.woocommerce-checkout .validate-required.woocommerce-invalid:visible'));
if (invalidFields.length) {
const namesMap = PayPalCommerceGateway.labels.elements;
const labels = invalidFields.map(el => {
const billingFieldsContainer = document.querySelector('.woocommerce-billing-fields');
const shippingFieldsContainer = document.querySelector('.woocommerce-shipping-fields');
const nameMessageMap = PayPalCommerceGateway.labels.error.required.elements;
const messages = invalidFields.map(el => {
const name = el.querySelector('[name]')?.getAttribute('name');
if (name && name in namesMap) {
return namesMap[name];
if (name && name in nameMessageMap) {
return nameMessageMap[name];
}
return el.querySelector('label').textContent
let label = el.querySelector('label').textContent
.replaceAll('*', '')
.trim();
if (billingFieldsContainer?.contains(el)) {
label = PayPalCommerceGateway.labels.billing_field.replace('%s', label);
}
if (shippingFieldsContainer?.contains(el)) {
label = PayPalCommerceGateway.labels.shipping_field.replace('%s', label);
}
return PayPalCommerceGateway.labels.error.required.field
.replace('%s', `<strong>${label}</strong>`)
}).filter(s => s.length > 2);
errorHandler.clear();
errorHandler.message(PayPalCommerceGateway.labels.error.js_validation);
labels.forEach(s => errorHandler.message(s)); // each message() call adds <li>
if (messages.length) {
messages.forEach(s => errorHandler.message(s));
} else {
errorHandler.message(PayPalCommerceGateway.labels.error.required.generic);
}
return actions.reject();
}
@ -96,7 +110,7 @@ const bootstrap = () => {
PayPalCommerceGateway,
renderer,
messageRenderer,
);
);w
singleProductBootstrap.init();
}

View file

@ -852,22 +852,31 @@ class SmartButton implements SmartButtonInterface {
),
'messages' => $this->message_values(),
'labels' => array(
'error' => array(
'generic' => __(
'error' => array(
'generic' => __(
'Something went wrong. Please try again or choose another payment source.',
'woocommerce-paypal-payments'
),
'js_validation' => __(
'Required form fields are not filled or invalid.',
'woocommerce-paypal-payments'
),
),
'elements' => array( // Map <form element name> => text, used for error messages.
'terms' => __(
'Terms and conditions',
'woocommerce-paypal-payments'
'required' => array(
'generic' => __(
'Required form fields are not filled.',
'woocommerce-paypal-payments'
),
// phpcs:ignore WordPress.WP.I18n
'field' => __( '%s is a required field.', 'woocommerce' ),
'elements' => array( // Map <form element name> => text for error messages.
'terms' => __(
'Please read and accept the terms and conditions to proceed with your order.',
// phpcs:ignore WordPress.WP.I18n.TextDomainMismatch
'woocommerce'
),
),
),
),
// phpcs:ignore WordPress.WP.I18n
'billing_field' => _x( 'Billing %s', 'checkout-validation', 'woocommerce' ),
// phpcs:ignore WordPress.WP.I18n
'shipping_field' => _x( 'Shipping %s', 'checkout-validation', 'woocommerce' ),
),
'order_id' => 'pay-now' === $this->context() ? absint( $wp->query_vars['order-pay'] ) : 0,
'single_product_buttons_enabled' => $this->settings->has( 'button_product_enabled' ) && $this->settings->get( 'button_product_enabled' ),