By default, show checkbox inline error message in block-based checkout. Use a tweak to register forced WPML strings when translating mails.

Author: dennisnissle

assets/js/blocks/checkout/checkout-checkboxes/checkboxes/legal-checkbox.js

@@ -3,6 +3,7 @@ import classnames from "classnames";
 import { useSelect, useDispatch } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 import { CheckboxControl } from '@woocommerce/blocks-checkout';
+import { Icon, warning } from '@wordpress/icons';
 
 const LegalCheckbox = ({
    checkbox,
@@ -33,7 +34,7 @@ const LegalCheckbox = ({
         } else if ( checkbox.is_required ) {
             setValidationErrors( {
                 [ validationErrorId ]: {
-                    message: checkbox.error_message,
+                    message: checkbox.error_message ? checkbox.error_message : 'error_placeholder',
                     hidden: true,
                 },
             } );
@@ -63,6 +64,8 @@ const LegalCheckbox = ({
         return null;
     }
 
+    const showInlineErrorMessage = error?.hidden === false && error?.message && 'error_placeholder' !== error?.message;
+
     return (
         <div
             className={ classnames(
@@ -73,6 +76,19 @@ const LegalCheckbox = ({
         >
             { checkbox.has_checkbox ? (
                 <>
+                    { showInlineErrorMessage && (
+                        <div className="wc-block-components-validation-error" role="alert">
+                            <p id={ validationErrorId }>
+                                <Icon icon={ warning } />
+                                <span
+                                    dangerouslySetInnerHTML={ {
+                                        __html: error?.message,
+                                    } }>
+                                </span>
+                            </p>
+                        </div>
+                    ) }
+
                     <CheckboxControl
                         key={ `checkbox-${ checkbox.id }` }
                         { ...fieldProps }

assets/js/blocks/checkout/checkout-checkboxes/edit.js

@@ -27,6 +27,7 @@ export const Edit = ({ attributes, setAttributes }) => {
 		'is_required': true,
 		'name': 'preview',
 		'has_checkbox': true,
+        'error_message': '',
 		'wrapper_classes': [],
 	};
 

includes/compatibility/class-wc-gzd-compatibility-wpml.php

@@ -89,6 +89,7 @@ public function load() {
 		add_filter( 'wcml_get_order_items_language', array( $this, 'maybe_filter_wpml_order_items_language' ), 10, 2 );
 		add_action( 'woocommerce_gzd_switch_email_locale', array( $this, 'setup_email_locale' ), 10, 2 );
 		add_action( 'woocommerce_gzd_restore_email_locale', array( $this, 'restore_email_locale' ), 10, 1 );
+		add_action( 'wpml_st_force_translate_admin_options', array( $this, 'register_forced_email_translations' ), 0 );
 
 		// Add compatibility with email string translation by WPML
 		add_filter( 'wcml_emails_options_to_translate', array( $this, 'register_email_options' ), 10, 1 );
@@ -120,6 +121,37 @@ function ( $product_category ) {
 		do_action( 'woocommerce_gzd_wpml_compatibility_loaded', $this );
 	}
 
+	/**
+	 * As WCML does not provide a filter/entrypoint to detect when the plugin is translating emails
+	 * we'll need to find a tweak by checking whether WCML calls the wpml_st_force_translate_admin_options hook.
+	 * If that is the case, we'll need to register our custom strings too.
+	 *
+	 * @see WCML_Emails::force_translating_admin_options_in_backend
+	 *
+	 * @return void
+	 */
+	public function register_forced_email_translations() {
+		$stack     = debug_backtrace( DEBUG_BACKTRACE_IGNORE_ARGS, 5 ); // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_debug_backtrace
+		$is_emails = false;
+
+		foreach ( $stack as $backtrace ) {
+			if ( ! isset( $backtrace['class'], $backtrace['function'] ) ) {
+				continue;
+			}
+
+			if ( 'force_translating_admin_options_in_backend' === $backtrace['function'] ) {
+				$is_emails = true;
+				break;
+			}
+		}
+
+		if ( $is_emails ) {
+			remove_action( 'wpml_st_force_translate_admin_options', array( $this, 'force_admin_option_translation' ), 0 );
+
+			$this->force_admin_option_translation();
+		}
+	}
+
 	/**
 	 * Make sure to filter order items language in case order details or order confirmation is resent
 	 * during admin edit order requests.

src/Blocks/Checkout.php

@@ -486,7 +486,7 @@ private function get_cart_data() {
 				'label'                    => $checkbox->get_label(),
 				'wrapper_classes'          => array_diff( $checkbox->get_html_wrapper_classes(), array( 'validate-required', 'form-row' ) ),
 				'custom_styles'            => $checkbox->get_html_style(),
-				'error_message'            => $checkbox->get_error_message( true ),
+				'error_message'            => apply_filters( 'woocommerce_gzd_checkout_block_checkbox_show_inline_error_message', false, $checkbox ) ? $checkbox->get_error_message() : '',
 				'html_id'                  => $checkbox->get_html_id(),
 				'has_checkbox'             => ! $checkbox->hide_input(),
 				'show_for_payment_methods' => $checkbox->get_show_for_payment_methods(),