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

View file

@ -852,22 +852,31 @@ class SmartButton implements SmartButtonInterface {
), ),
'messages' => $this->message_values(), 'messages' => $this->message_values(),
'labels' => array( 'labels' => array(
'error' => array( 'error' => array(
'generic' => __( 'generic' => __(
'Something went wrong. Please try again or choose another payment source.', 'Something went wrong. Please try again or choose another payment source.',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ),
'js_validation' => __( 'required' => array(
'Required form fields are not filled or invalid.', 'generic' => __(
'woocommerce-paypal-payments' 'Required form fields are not filled.',
), 'woocommerce-paypal-payments'
), ),
'elements' => array( // Map <form element name> => text, used for error messages. // phpcs:ignore WordPress.WP.I18n
'terms' => __( 'field' => __( '%s is a required field.', 'woocommerce' ),
'Terms and conditions', 'elements' => array( // Map <form element name> => text for error messages.
'woocommerce-paypal-payments' '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, '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' ), 'single_product_buttons_enabled' => $this->settings->has( 'button_product_enabled' ) && $this->settings->get( 'button_product_enabled' ),