convert js/utils to TypeScript

templates/frontOffice/modern/assets/js/app.js → templates/frontOffice/modern/assets/js/app.ts

@@ -14,7 +14,7 @@ import SearchDropdown from '@components/smarty/SearchDropdown/SearchDropdown';
 import SvgAjax from '@utils/SvgAjax';
 import axios from 'axios';
 
-window.apiUtils = apiUtils;
+(window as any).apiUtils = apiUtils;
 
 function main() {
   axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

templates/frontOffice/modern/assets/js/utils/SvgAjax.js → templates/frontOffice/modern/assets/js/utils/SvgAjax.ts

@@ -1,7 +1,7 @@
 export default async function SvgAjax() {
-  if (!window.SVG_SPRITE_URL) return;
+  if (!(window as any).SVG_SPRITE_URL) return;
 
-  const res = await fetch(window.SVG_SPRITE_URL);
+  const res = await fetch((window as any).SVG_SPRITE_URL);
   const data = await res.text();
   const svg = new DOMParser().parseFromString(data, 'image/svg+xml');
   const div = document.createElement('div');

templates/frontOffice/modern/assets/js/utils/api.js → templates/frontOffice/modern/assets/js/utils/api.ts

@@ -1,10 +1,11 @@
 import { useQuery } from 'react-query';
-import axios from 'axios';
+import axios, { AxiosRequestConfig } from 'axios';
 
-export const baseURL = `${window.location.href.includes('index_dev.php') ? '/index_dev.php' : ''
-  }/open_api`;
+export const baseURL = `${
+  window.location.href.includes('index_dev.php') ? '/index_dev.php' : ''
+}/open_api`;
 
-export default async function fetcher(request) {
+export default async function fetcher(request: AxiosRequestConfig<any>) {
   try {
     const response = await axios(request || {});
     return response.data;
@@ -13,12 +14,12 @@ export default async function fetcher(request) {
   }
 }
 
-export function useProductImage(item_id) {
+export function useProductImage(item_id: number) {
   return useQuery(
     ['product_img', item_id],
     () =>
       fetcher({
-        url: `${baseURL}/library/image?itemId=${item_id}&itemType=product`,
+        url: `${baseURL}/library/image?itemId=${item_id}&itemType=product`
       }),
     {
       enabled: !!item_id

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

@@ -0,0 +1,7 @@
+export default (str: string) =>
+  `${str.charAt(0).toLowerCase()}${str
+    .replace(/[\W_]/g, '|')
+    .split('|')
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join('')
+    .slice(1)}`;

templates/frontOffice/modern/assets/js/utils/closeAndFocus.js → templates/frontOffice/modern/assets/js/utils/closeAndFocus.ts

@@ -1,6 +1,6 @@
 export default function closeAndFocus(
   dispatchAction = () => {},
-  focusSelector
+  focusSelector: any
 ) {
   dispatchAction();
   const refocus = Array.from(document.querySelectorAll(focusSelector));

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

@@ -0,0 +1,19 @@
+export function getCookie(name: string) {
+  const match = document.cookie.match(new RegExp(name + '=([^;]+)'));
+  if (match) return match[1];
+  return null;
+}
+
+export function setCookie(name: string, value: string, days?: number) {
+  var expires = '';
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = '; expires=' + date.toString();
+  }
+  document.cookie = name + '=' + value + expires + '; path=/';
+}
+
+const utils = { getCookie, setCookie };
+
+export default utils;

templates/frontOffice/modern/assets/js/utils/getLocale.js → templates/frontOffice/modern/assets/js/utils/getLocale.ts

@@ -3,7 +3,6 @@ export default function getLocale() {
     document.documentElement.lang ||
     (navigator.languages && navigator.languages[0]) ||
     navigator.language ||
-    navigator.userLanguage ||
     'en-US'
   );
 }

templates/frontOffice/modern/assets/js/utils/manageStickyElement.js → templates/frontOffice/modern/assets/js/utils/manageStickyElement.ts

@@ -1,16 +1,18 @@
 const VW_TO_DISABLE = 769;
 const INTERSECTION_RATIO_LIMIT = 1;
 
-const createIntersectionObserver = (classToToggle, callback) =>
+const createIntersectionObserver = (classToToggle: any, callback: any) =>
   new IntersectionObserver(
     ([e]) => {
       if (
         window.innerWidth < VW_TO_DISABLE ||
-        (e.boundingClientRect.width === 0 && e.boundingClientRect.height === 0)
+        (e?.boundingClientRect.width === 0 &&
+          e?.boundingClientRect.height === 0)
       )
         return;
 
       const IS_STUCK =
+        e &&
         e.intersectionRatio < INTERSECTION_RATIO_LIMIT &&
         e.boundingClientRect.y <= 0;
 
@@ -23,7 +25,11 @@ const createIntersectionObserver = (classToToggle, callback) =>
     { threshold: [1] }
   );
 
-const observeStickyElement = (element, classToToggle, callback) => {
+const observeStickyElement = (
+  element: Element,
+  classToToggle: any,
+  callback: any
+) => {
   const observer = createIntersectionObserver(classToToggle, callback);
 
   observer.observe(element);

templates/frontOffice/modern/assets/js/utils/map.js → templates/frontOffice/modern/assets/js/utils/map.ts

@@ -1,12 +1,12 @@
-export function rad2degr(rad) {
+export function rad2degr(rad: number) {
   return (rad * 180) / Math.PI;
 }
 
-export function degr2rad(degr) {
+export function degr2rad(degr: number) {
   return (degr * Math.PI) / 180;
 }
 
-export function getLatLngCenter(points) {
+export function getLatLngCenter(points: { longitude: any; latitude: any }[]) {
   if (points.length <= 0)
     return {
       latitude: 0,

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

@@ -1,9 +1,9 @@
 import getLocale from '@utils/getLocale';
-let fn = null;
+let fn: Intl.NumberFormat | null = null;
 
-export default function priceFormat(price, options = {}) {
+export default function priceFormat(price: any, options: any = {}) {
   const locale = options.locale || getLocale();
-  const currency = options.currency || global.DEFAULT_CURRENCY_CODE;
+  const currency = options.currency || (global as any).DEFAULT_CURRENCY_CODE;
   if (typeof price !== 'number' || !locale || !currency) return '0 €';
 
   if (isNaN(price)) return '0 €';
@@ -15,5 +15,5 @@ export default function priceFormat(price, options = {}) {
     });
   }
 
-  return fn.format(price);
+  return fn.format(price) as any;
 }

templates/frontOffice/modern/assets/js/utils/useLockBodyScroll.js → templates/frontOffice/modern/assets/js/utils/useLockBodyScroll.ts

@@ -1,6 +1,10 @@
 import { useEffect } from 'react';
 
-export default function useLockBodyScroll(ref, active, redirect = false) {
+export default function useLockBodyScroll(
+  ref: React.RefObject<HTMLElement | null>,
+  active: boolean,
+  redirect = false
+) {
   useEffect(() => {
     if ((ref.current && active) || redirect) {
       document.body.classList.add('sidebar-open');

templates/frontOffice/modern/assets/js/utils/zoom.js

@@ -11,7 +11,7 @@ export default function zoom() {
     image.addEventListener('mousemove', (e) => {
       const backgroundImage = 'url(' + image.src + ')';
 
-      image.parentElement.insertBefore(zoomer, image);
+      image.parentElement?.insertBefore(zoomer, image);
 
       zoomer.classList.add('is-visible');
 

templates/frontOffice/modern/tsconfig.json

@@ -21,7 +21,8 @@
       "@images/*": ["./assets/images/*"],
       "@icons/*": ["./assets/svg-icons/*"],
       "@fonts/*": ["./assets/fonts/*"],
-      "@favicons/*": ["./assets/favicons/*"]
+      "@favicons/*": ["./assets/favicons/*"],
+      "@standalone/*": ["./assets/js/standalone/*"]
     }, // A series of entries which re-map imports to lookup locations relative to the baseUrl
 
     // Source Map
@@ -40,6 +41,11 @@
     "allowJs": true,
     "noUnusedLocals": false
   },
-  "include": ["./**/*.ts", "./components/**/*.tsx", "./components/**/*.ts"],
+  "include": [
+    "./**/*.ts",
+    "./components/**/*.tsx",
+    "./components/**/*.ts",
+    "assets/js/utils/zoom.js"
+  ],
   "exclude": ["node_modules/**/*", "dist"]
 }

templates/frontOffice/modern/webpack.config.js

@@ -75,7 +75,7 @@ Encore.configureBabel((config) => {
 Encore.addPlugin(new ESLintPlugin());
 
 // ENTRIES
-Encore.addEntry('app', './assets/js/app.js')
+Encore.addEntry('app', './assets/js/app')
   .addEntry('home', './assets/js/routes/home')
   .addEntry('category', './assets/js/routes/category')
   .addEntry('product', './assets/js/routes/product')