feat(carrier): move form error navbar management to dedicated component

admin-dev/themes/new-theme/js/components/navbar-form-error-handler.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+
+import NavbarHandler from './navbar-handler';
+
+type NavbarFormErrorHandlerType = {
+  form: HTMLElement;
+  navbarHandler: NavbarHandler;
+}
+
+/**
+ * This component is used as a wrapper for the NavbahHandler component. It allows handling
+ * tab redirection to the tab that contains some HTML form errors.
+ * Use this component only if you are using a form with NavbarHandler.
+ */
+export default class NavbarFormErrorHandler {
+  form: HTMLElement;
+
+  navbarHandler: NavbarHandler;
+
+  firstInvalidField: Element | null = null;
+
+  constructor(options: NavbarFormErrorHandlerType) {
+    this.navbarHandler = options.navbarHandler;
+    this.form = options.form;
+
+    this.initListener();
+    this.resetInvalidField();
+  }
+
+  private findRequiredFieldsFromForm(): NodeListOf<Element> {
+    return this.form.querySelectorAll('[required]');
+  }
+
+  private initListener(): void {
+    this.findRequiredFieldsFromForm().forEach((field) => {
+      field.addEventListener('invalid', () => {
+        if (!this.firstInvalidField) {
+          this.firstInvalidField = field;
+
+          const tab = field.closest('[role="tabpanel"]');
+          this.navbarHandler.switchToTarget(`#${tab?.id}`);
+
+          field.scrollIntoView({
+            behavior: 'smooth',
+            block: 'end',
+          });
+        }
+      });
+    });
+  }
+
+  private resetInvalidField() {
+    this.form.addEventListener('click', () => {
+      this.firstInvalidField = null;
+    }, true);
+  }
+}

admin-dev/themes/new-theme/js/pages/carrier/form/carrier-form-manager.ts

@@ -28,7 +28,6 @@ import CarrierFormMap from '@pages/carrier/form/carrier-form-map';
 import CarrierFormEventMap from '@pages/carrier/form/carrier-form-event-map';
 import ConfirmModal from '@js/components/modal/confirm-modal';
 import {Range} from '@pages/carrier/form/types';
-import NavbarHandler from '@components/navbar-handler';
 
 const {$} = window;
 
@@ -50,15 +49,12 @@ export default class CarrierFormManager {
 
   $freeShippingInput: JQuery;
 
-  navBarHandler: NavbarHandler;
-
   /**
    * @param {EventEmitter} eventEmitter
    */
   constructor(eventEmitter: EventEmitter) {
     this.eventEmitter = eventEmitter;
     this.currentShippingSymbol = '';
-    this.navBarHandler = new NavbarHandler($(CarrierFormMap.navigationBar));
 
     // Initialize dom elements
     this.$zonesInput = $(CarrierFormMap.zonesInput);
@@ -86,35 +82,6 @@ export default class CarrierFormManager {
     this.$shippingMethodInput.on('change', () => this.refreshCurrentShippingSymbol());
     $(CarrierFormMap.zonesContainer).on('click', CarrierFormMap.deleteZoneButton, (e:Event) => this.onDeleteZone(e));
     this.eventEmitter.on(CarrierFormEventMap.rangesUpdated, (ranges: Range[]) => this.onChangeRanges(ranges));
-
-    this.initErrorListener();
-  }
-
-  private initErrorListener(): void {
-    const carrierForm = document.querySelector(CarrierFormMap.form);
-    const requiredFields = carrierForm?.querySelectorAll('[required]');
-
-    let firstInvalidField: Element | null = null;
-
-    requiredFields?.forEach((field) => {
-      field.addEventListener('invalid', () => {
-        if (!firstInvalidField) {
-          firstInvalidField = field;
-
-          const tab = field.closest('[role="tabpanel"]');
-          this.navBarHandler.switchToTarget(`#${tab?.id}`);
-
-          field.scrollIntoView({
-            behavior: 'smooth',
-            block: 'end',
-          });
-        }
-      });
-    });
-
-    carrierForm?.addEventListener('click', () => {
-      firstInvalidField = null;
-    }, true);
   }
 
   private refreshFreeShipping(): void {

admin-dev/themes/new-theme/js/pages/carrier/form/index.ts

@@ -24,8 +24,11 @@
  */
 
 import ChoiceTable from '@js/components/choice-table';
+import NavbarHandler from '@js/components/navbar-handler';
 import CarrierFormManager from '@pages/carrier/form/carrier-form-manager';
 import CarrierRanges from '@pages/carrier/form/carrier-range-modal';
+import CarrierFormMap from '@pages/carrier/form/carrier-form-map';
+import NavbarFormErrorHandler from '@js/components/navbar-form-error-handler';
 
 $(() => {
   // Initialize components
@@ -42,4 +45,13 @@ $(() => {
 
   // Initialize the carrier form manager
   new CarrierFormManager(window.prestashop.instance.eventEmitter);
+
+  const carrierForm = document.querySelector(CarrierFormMap.form);
+
+  if (carrierForm instanceof HTMLElement) {
+    new NavbarFormErrorHandler({
+      form: carrierForm,
+      navbarHandler: new NavbarHandler($(CarrierFormMap.navigationBar)),
+    });
+  }
 });