feat: type smarty file

templates/frontOffice/modern/assets/js/redux/modules/visibility.ts

@@ -3,7 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   cart: false,
   login: false,
-  redirectionToCheckout: false,
+  redirectionToCheckout: false
 };
 
 export const visibilitySlice = createSlice({
@@ -21,11 +21,13 @@ export const visibilitySlice = createSlice({
     },
     showLogin: (state, action) => {
       state.login = true;
-      state.redirectionToCheckout = action.payload?.redirectionToCheckout || false;
+      state.redirectionToCheckout =
+        action.payload?.redirectionToCheckout || false;
     },
     hideLogin: (state, action) => {
       state.login = false;
-      state.redirectionToCheckout = action.payload?.redirectionToCheckout || false;
+      state.redirectionToCheckout =
+        action.payload?.redirectionToCheckout || false;
     },
     toggleLogin: (state) => {
       state.login = !state.login;

templates/frontOffice/modern/assets/js/utils/priceFormat.ts

@@ -6,8 +6,7 @@ export default function priceFormat(
   options: { locale?: string; currency?: string } = {}
 ) {
   const locale = options.locale || getLocale();
-  const currency =
-    options.currency || ((global as any).DEFAULT_CURRENCY_CODE as string);
+  const currency = options.currency || window.DEFAULT_CURRENCY_CODE;
   if (typeof price !== 'number' || !locale || !currency) return '0 €';
 
   if (isNaN(price)) return '0 €';

templates/frontOffice/modern/components/smarty/Cart/Cart.ts

@@ -0,0 +1,20 @@
+export default () => {
+  for (const form of document.querySelectorAll('.Cart-form')) {
+    form
+      ?.querySelector('select[name=quantity]')
+      ?.addEventListener('change', function () {
+        (form as HTMLFormElement).submit();
+      });
+    form
+      ?.querySelector('input[name=quantity]')
+      ?.addEventListener('change', function () {
+        (form as HTMLFormElement).submit();
+      });
+    form
+      ?.querySelector('.Button-change-country')
+      ?.addEventListener('click', function (e) {
+        e.preventDefault();
+        (form as HTMLFormElement).submit();
+      });
+  }
+};

templates/frontOffice/modern/components/smarty/Header/Header.js → templates/frontOffice/modern/components/smarty/Header/Header.ts

@@ -1,19 +1,23 @@
 import { trapTabKey } from '@js/standalone/trapItemsMenu';
 
-function manageFocusAccesibilty(target, targetMenu, activeClass = 'open') {
+function manageFocusAccesibilty(
+  target: string,
+  targetMenu: string,
+  activeClass = 'open'
+) {
   const lang = document.querySelector(target);
 
   if (!lang) return;
 
-  lang.addEventListener('keydown', (e) => {
+  lang.addEventListener('keydown', (e: KeyboardEvent) => {
     const { key } = e;
 
     if (!['Enter', 'Escape'].includes(key)) return;
 
     e.preventDefault();
     e.stopPropagation();
 
-    const menu = lang.querySelector(targetMenu);
+    const menu: HTMLElement | null = lang.querySelector(targetMenu);
 
     if (!menu) return;
 
@@ -27,10 +31,10 @@ function manageFocusAccesibilty(target, targetMenu, activeClass = 'open') {
 
     firstItem.focus();
 
-    menu.addEventListener('keydown', (event) => {
+    menu.addEventListener('keydown', (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         menu.classList.remove(activeClass);
-        lang.querySelector('a').focus();
+        lang.querySelector('a')?.focus();
         return;
       }
 

templates/frontOffice/modern/components/smarty/Modal/Modal.js → templates/frontOffice/modern/components/smarty/Modal/Modal.ts

@@ -2,10 +2,12 @@ export default function Modal() {
   let openmodal = document.querySelectorAll('[data-target-modal]');
 
   for (let i = 0; i < openmodal.length; i++) {
-    const target = document.querySelector(openmodal[i].dataset.targetModal);
+    const target = document.querySelector(
+      (openmodal[i] as HTMLElement).dataset.targetModal as string
+    );
     if (!target) continue;
 
-    openmodal[i].addEventListener('click', function (event) {
+    openmodal[i]?.addEventListener('click', function (event) {
       event.preventDefault();
       toggleModal(target);
     });
@@ -18,35 +20,35 @@ export default function Modal() {
 
   let closemodal = document.querySelectorAll('.Modal-close');
   for (let i = 0; i < closemodal.length; i++) {
-    closemodal[i].addEventListener('click', () => toggleModal());
+    closemodal[i]?.addEventListener('click', () => toggleModal());
   }
 
-  document.onkeydown = function (evt) {
+  document.onkeydown = function (evt: KeyboardEvent) {
     evt = evt || window.event;
     let isEscape = false;
     if ('key' in evt) {
       isEscape = evt.key === 'Escape' || evt.key === 'Esc';
     } else {
-      isEscape = evt.keyCode === 27;
+      isEscape = (evt as KeyboardEvent).keyCode === 27;
     }
     if (isEscape && document.body.classList.contains('Modal-active')) {
       toggleModal();
     }
   };
 
-  function toggleModal(target) {
+  function toggleModal(target?: Element) {
     const body = document.querySelector('body');
     const modals = [...document.querySelectorAll('.Modal')];
 
     if (target) {
       target.classList.remove('opacity-0');
       target.classList.remove('pointer-events-none');
-      body.classList.add('Modal-active');
+      body?.classList.add('Modal-active');
     } else {
       for (const modal of modals) {
         modal.classList.add('opacity-0');
         modal.classList.add('pointer-events-none');
-        body.classList.remove('Modal-active');
+        body?.classList.remove('Modal-active');
       }
     }
   }

templates/frontOffice/modern/components/smarty/StateSelect/StateSelect.ts

@@ -0,0 +1,32 @@
+export default function StateSelect() {
+  let originalStateInput = document.querySelector('[name$="[state]"]');
+
+  const stateInputCopy = originalStateInput?.cloneNode(true);
+
+  document.addEventListener(
+    'change',
+    (e) => {
+      if ((e.target as HTMLInputElement)?.matches('[name$="[country]"]')) {
+        const countryId = (e.target as HTMLInputElement).value;
+        const stateInput = document.querySelector('[name$="[state]"]');
+        const validStates = (stateInputCopy as Document)?.querySelectorAll(
+          `[data-country="${countryId}"]`
+        );
+
+        if (validStates.length) {
+          const stateInput = document.querySelector('[name$="[state]"]');
+          if (stateInput) {
+            stateInput.innerHTML = '';
+          }
+          stateInput?.closest('.StateSelect')?.classList.remove('hidden');
+          for (const state of validStates) {
+            stateInput?.appendChild(state);
+          }
+        } else {
+          stateInput?.closest('.StateSelect')?.classList.add('hidden');
+        }
+      }
+    },
+    false
+  );
+}

templates/frontOffice/modern/components/smarty/StratSeo/StratSeo.ts

@@ -0,0 +1,19 @@
+export default function StratSeo() {
+  const observer = new IntersectionObserver(
+    (observables) => {
+      observables.forEach((observable) => {
+        if (observable.intersectionRatio > 0.4) {
+          observable.target.classList.remove('is-hide');
+          observer.unobserve(observable.target);
+        }
+      });
+    },
+    {
+      threshold: [0.4]
+    }
+  );
+
+  const strat = document.getElementById('StratSeo');
+
+  observer.observe(strat as Element);
+}

templates/frontOffice/modern/global.d.ts

@@ -15,4 +15,5 @@ interface Window {
   ATTRIBUTES: import('@components/React/PseSelector/PseSelector.types').Attribute[];
   SCRIPTRECAPTCHA: string;
   CGV_URL: string;
+  DEFAULT_CURRENCY_CODE: string;
 }