feat: add eslint to the build process

.eslintrc.json

@@ -1,10 +1,15 @@
+// TODO: Add next core-web-vitals. E.g. "extends": ["next/core-web-vitals"]
+
 {
   "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "rules": {
-    "quotes": ["error", "single"],
+    "quotes": ["warn", "single"],
     "semi": ["error", "always"],
     "linebreak-style": ["error", "unix"],
     "no-console": "off",
-    "max-len": "off"
+    "max-len": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "no-async-promise-executor": "warn"
   }
 }

package.json

@@ -77,10 +77,13 @@
     "babel-plugin-istanbul": "^6.1.1",
     "cypress": "^13.12.0",
     "eslint": "^7.32.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.0.11",
     "next-unused": "^0.0.6",
     "postcss": "8.4.31",
     "prettier": "2.7.1",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "0.1.13",
     "reset-css": "5.0.1",
     "sass": "1.41.0",

src/components/Snackbar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 

src/components/annual-plans-for-affiliates/CtaSection.tsx

@@ -2,10 +2,12 @@ const PRICE_TABLE_ID = 'pricing-table';
 
 const CtaSection = ({ textContent }: { textContent: any }) => {
   function redirectToPricingTable() {
-    window.scrollTo({
-      top: document?.getElementById(PRICE_TABLE_ID)?.offsetTop! + 500,
-      behavior: 'smooth',
-    });
+    if (document.getElementById(PRICE_TABLE_ID)) {
+      window.scrollTo({
+        top: document.getElementById(PRICE_TABLE_ID)!.offsetTop + 500,
+        behavior: 'smooth',
+      });
+    }
   }
 
   return (
@@ -16,7 +18,7 @@ const CtaSection = ({ textContent }: { textContent: any }) => {
       className="overflow-hidden bg-primary bg-cover px-5 py-14"
     >
       <div className="flex flex-col items-center justify-center space-y-8 text-center">
-        <div className={`flex flex-col items-center space-y-4 text-center text-white`}>
+        <div className={'flex flex-col items-center space-y-4 text-center text-white'}>
           <p className="text-4xl font-semibold">{textContent.title}</p>
           <p className="w-full max-w-[573px] text-xl font-normal">{textContent.description}</p>
         </div>

src/components/annual-plans-for-affiliates/HeroSection.tsx

@@ -17,7 +17,7 @@ const StartPageLabel = () => {
       <Image
         loading="lazy"
         className="select-none"
-        src={`../../logos/internxt/cool-gray-90.svg`}
+        src={'../../logos/internxt/cool-gray-90.svg'}
         alt="Internxt logo"
         width={130}
         height={16}
@@ -29,7 +29,7 @@ const StartPageLabel = () => {
 const HeroSection: React.FC<HeroSectionProps> = ({ textContent, InfoTextComponent, isStartPage }) => {
   function redirectToPricingTable() {
     window.scrollTo({
-      top: document?.getElementById('payment')?.offsetTop! + 500,
+      top: document?.getElementById('payment')!.offsetTop + 500,
       behavior: 'smooth',
     });
   }

src/components/banners/LoginBFBanner.tsx

@@ -60,7 +60,7 @@ const LoginBFBanner = () => {
     if (showBanner) {
       window.dispatchEvent(new Event('CloseSquare'));
     }
-    if (Boolean(hideBanner)) {
+    if (hideBanner) {
       setShowBanner(false);
     }
     window.addEventListener('unload', function (e) {
@@ -133,9 +133,11 @@ const LoginBFBanner = () => {
   };
 
   return showBanner ? (
-    <div className={`fixed top-0 left-0 right-0 bottom-0 z-50 flex bg-black bg-opacity-50 px-10`}>
+    <div className={'fixed top-0 left-0 right-0 bottom-0 z-50 flex bg-black bg-opacity-50 px-10'}>
       <div
-        className={`fixed top-1/2 left-1/2 flex h-auto -translate-y-[50%] -translate-x-[50%] flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-black to-primary`}
+        className={
+          'fixed top-1/2 left-1/2 flex h-auto -translate-y-[50%] -translate-x-[50%] flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-black to-primary'
+        }
       >
         <button className="absolute right-0 m-7 flex text-white" onClick={handleClose}>
           <X size={32} />