update 24 files

src/components/Dots/index.js

@@ -1,15 +1,11 @@
 import React, { useState, useEffect } from "react";
-import _ from "lodash";
 
 export default function Dots() {
   const [scroll, setScroll] = useState(null);
   const [active, setActive] = useState(null);
   const height = window.innerHeight;
   useEffect(() => {
-    window.addEventListener(
-      "scroll",
-      _.debounce(() => setScroll(window.scrollY), 20)
-    );
+    window.addEventListener(setScroll(window.scrollY), 20);
   }, []);
 
   useEffect(() => {
@@ -67,21 +63,17 @@ const Dot = ({ value, active, index, setActive }) => {
   };
   return (
     <div
-      className={_.join(
-        [
-          "rounded-full mb-2 cursor-pointer transition-all",
-          active ? "p-0.5 border-2" : "p-0",
-        ],
-        " "
-      )}
+      className={`rounded-full mb-2 cursor-pointer transition-all ${
+        active ? "p-0.5 border-2" : "p-0"
+      }`}
       style={{ border: active ? "2px solid blue" : "" }}
       onClick={() => click()}
     >
       <div
-        className={_.join(
-          ["w-3.5 h-3.5 rounded-full", active ? "bg-blueC0" : "bg-blue90"],
-          " "
-        )}
+        className={`w-3.5 h-3.5 rounded-full  ${
+          active ? "bg-blueC0" : "bg-blue90"
+        }
+        `}
       ></div>
     </div>
   );

src/components/Input/index.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import _ from "lodash";
 
 export default function Input(props) {
   const [focusToggle, setFocusToggle] = useState(false);

src/components/MainFooter/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import _ from "lodash";
 
 import enamadlogo from "./enamad-pic.svg";
 import callIcon from "../../assets/icons/vuesax-linear-call-calling.svg";

src/components/Navbar/index.js

@@ -3,7 +3,6 @@ import { Link, useNavigate, NavLink } from "react-router-dom";
 import { connect } from "react-redux";
 import { userProduct, userFavorite } from "../../redux/actions";
 import location from "../../utils/location";
-import _ from "lodash";
 
 //components
 import Drawer from "../Drawer";
@@ -79,7 +78,6 @@ function Navbar({
 
   useEffect(() => {
     if (!isMobile && user) {
-
       getCartProducts();
     }
   }, [user]);
@@ -91,9 +89,12 @@ function Navbar({
         backgroundColor: !top ? (isDark ? "#061B30" : "white") : "white",
       }}
     >
-      <div className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3  px-4" style={{
-        backgroundColor: isDark ? "#061B30" : "white"
-      }}>
+      <div
+        className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3  px-4"
+        style={{
+          backgroundColor: isDark ? "#061B30" : "white",
+        }}
+      >
         {/* desktop */}
         <div className=" items-center hidden lg:flex">
           <Link
@@ -189,7 +190,7 @@ function Navbar({
                 <img
                   src={isDark ? qrIcon : qrBlueIcon}
                   alt=""
-                  className={_.join(["w-6"], " ")}
+                  className="w-6"
                 />
               </Link>
               <Link
@@ -204,7 +205,7 @@ function Navbar({
                 <img
                   src={isDark ? arIcon : arBlueIcon}
                   alt=""
-                  className={_.join(["w-6"], " ")}
+                  className="w-6"
                 />
               </Link>
             </>
@@ -214,9 +215,7 @@ function Navbar({
               <Loading size={2} color="bg-green-500" />
             ) : isActiveBookmark ? (
               <img
-                src={
-                  isDark ? bookmarkActiveDarkIcon : bookmarkActiveLightIcon
-                }
+                src={isDark ? bookmarkActiveDarkIcon : bookmarkActiveLightIcon}
                 alt="bookmark"
                 className="w-7 flex lg:hidden"
                 onClick={() =>
@@ -331,7 +330,7 @@ const mapDispatchToProps = {
   getCartProducts: userProduct.list,
   addToFavorite: userFavorite.add,
   deleteBookmark: userFavorite.del,
-  getUserFavorite: userFavorite.list
+  getUserFavorite: userFavorite.list,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Navbar);

src/components/Search/index.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import { publicApi } from "../../redux/actions";
-import _ from "lodash";
 
 //assets
 import searchIcon from "./search.png";
@@ -15,13 +14,9 @@ function Search(props) {
     <div className="flex items-center justify-center w-full my-3 bg-white z-50 overflow-hidden rounded-md">
       <div className="relative text-gray-600 focus-within:text-gray-400 w-full">
         <span
-          className={_.join(
-            [
-              "absolute inset-y-0 flex items-center pl-2",
-              langDetector(props.lang, "left-0", "right-0"),
-            ],
-            " "
-          )}
+          className={`absolute inset-y-0 flex items-center pl-2
+              ${langDetector(props.lang, "left-0", "right-0")}
+           `}
         >
           <button
             type="submit"
@@ -38,10 +33,7 @@ function Search(props) {
           } ${
             props.textColor ? props.textColor : "text-gray1"
           } border border-solid border-gray-200 rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 `}
-          placeholder={_.join(
-            [langDetector(props.lang, "جستجو...", "Search...")],
-            " "
-          )}
+          placeholder={langDetector(props.lang, "جستجو...", "Search...")}
           autoComplete="off"
           onChange={(e) => props.onChange(e.target.value)}
           onFocus={() => props.setOverLayer(true)}

src/components/Textarea/index.js

@@ -1,17 +1,10 @@
 import React from "react";
-import _ from "lodash";
 
 export default function Textarea({ placeholder, onChange, value, name }) {
   return (
     <>
       <textarea
-        className={_.join(
-          [
-            "border w-full border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9",
-            // backgroundColor,
-          ],
-          " "
-        )}
+        className="border w-full border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9"
         vale={value}
         name={name}
         onChange={(e) => onChange(e.target.name, e.target.value)}

src/components/VerticalExpandableProductFilter/index.js

@@ -1,8 +1,12 @@
 import React, { useState } from "react";
-import searchIcon from "./search.png";
-import _ from "lodash";
+
+//components
 import Checkbox from "../Checkbox";
+
+//assets
 import arrowIcon from "./arrow-top.png";
+import searchIcon from "./search.png";
+
 
 const langDetector = (lang = "fa", option1, option2) => {
   return lang === "fa" ? option1 : option2;
@@ -22,21 +26,14 @@ export default function VerticalExpandableProductFilter(props) {
         <form className="relative w-full px-3 mb-3">
           <input
             type="text"
-            placeholder={_.join(
-              [langDetector(props.lang, "جستجو...", "Search...")],
-              " "
-            )}
+            placeholder={langDetector(props.lang, "جستجو...", "Search...")}
             className="border rounded-md py-1 px-2 w-full placeholder-gray-300 outline-none text-gray-500"
             onChange={(e) => setText(e.target.value)}
           />
           <span
-            className={_.join(
-              [
-                "absolute inset-y-0 flex items-center",
-                langDetector(props.lang, "left-4", "right-4"),
-              ],
-              " "
-            )}
+            className={`absolute inset-y-0 flex items-center
+                ${langDetector(props.lang, "left-4", "right-4")}
+              `}
           >
             <button
               type="submit"
@@ -76,13 +73,9 @@ export default function VerticalExpandableProductFilter(props) {
                 <img
                   src={arrowIcon}
                   alt=""
-                  className={_.join(
-                    [
-                      "cursor-pointer w-5 transform transition-all duration-300",
-                      item1.expaneded ? "" : "rotate-180",
-                    ],
-                    " "
-                  )}
+                  className={`cursor-pointer w-5 transform transition-all duration-300"
+                      ${item1.expaneded ? "" : "rotate-180"}
+                   `}
                 />
               )}
             </li>

src/views/About/index.js

@@ -1,5 +1,4 @@
 import React, { Fragment, useEffect } from "react";
-import _ from "lodash";
 import { connect } from "react-redux";
 import { publicApi } from "../../redux/actions";
 
@@ -17,13 +16,13 @@ function About({
   first,
   setHeaderOptions,
 }) {
-
-  useEffect(() => {
-    setHeaderOptions({ shown: true, hamburgerMenu : true, logo: true, qr : true });
-  }, []);
-
   useEffect(() => {
-    window.scrollTo(0, 0);
+    setHeaderOptions({
+      shown: true,
+      hamburgerMenu: true,
+      logo: true,
+      qr: true,
+    });
   }, []);
 
   return (

src/views/Auth/SignUp/index.js

@@ -1,14 +1,16 @@
 import React, { useState, useRef, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import onInput from "../../../utils/onInput";
+
+//components
 import Input from "../../../components/Input";
 import Button from "../../../components/Button";
 import Timer from "../../../components/Timer";
-import onInput from "../../../utils/onInput";
 import Loading from "../../../components/Loading";
 
 import { connect } from "react-redux";
 import { user, publicApi } from "../../../redux/actions";
-import _ from "lodash";
+
 //assets
 import logoIcon from "./assets/logo.svg";
 import arrowIcon from "../../../assets/icons/dropdown-blue.svg";

src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js

@@ -16,8 +16,6 @@ import Empty from "../../../../../components/Empty";
 import Button from "../../../../../components/Button";
 import FloatingButton from "../../../../../components/FloatingButton";
 
-import { add } from "lodash";
-
 const ProfileAddress = ({
   addresses,
   update,

src/views/Home/Landscape/Page1/Lights/index.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+
+//assets
 import projectorIcon from "../../../../../assets/icons/projector.svg";
 import lightIcon from "../../../../../assets/icons/light.svg";
-import _ from "lodash";
 
 export default function Lights({ degrees }) {
   return (
@@ -22,12 +23,17 @@ const Light = ({ degree }) => {
       style={{ transform: `rotate(${degree}deg)` }}
       draggable={false}
     >
-      <img src={projectorIcon} alt="" className="w-6 h-6 lg:w-12 lg:h-12" draggable={false} />
+      <img
+        src={projectorIcon}
+        alt=""
+        className="w-6 h-6 lg:w-12 lg:h-12"
+        draggable={false}
+      />
       <img
         draggable={false}
         src={lightIcon}
         alt=""
-        className={_.join(["absolute z-50 light-animation opacity-50"], " ")}
+        className="absolute z-50 light-animation opacity-50"
         style={{ transform: `scale(6) translateY(24%)`, pointerEvents: "none" }}
       />
     </div>
@@ -35,5 +41,5 @@ const Light = ({ degree }) => {
 };
 
 Lights.defaultProps = {
-  degrees : [32, 17, 0, -17, -32]
-}
+  degrees: [32, 17, 0, -17, -32],
+};

src/views/Home/Landscape/Page1/index.js

@@ -2,12 +2,13 @@ import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { Carousel } from "@trendyol-js/react-carousel";
+
+//components
 import Book from "./Book";
 import FloatWithMouse from "../../../../components/FloatWidthMouse";
 import Lights from "./Lights";
 
-import _ from "lodash";
-
+//assets
 import olum1Image from "../../../../assets/images/olum-1.svg";
 import olum2Image from "../../../../assets/images/olum-2.svg";
 import olum4Image from "../../../../assets/images/olum-4.svg";
@@ -25,16 +26,13 @@ function Page1({ list, top }) {
 
   useEffect(() => {
     const width = window.innerWidth;
-    window.addEventListener(
-      "resize",
-      _.debounce(() => {
+    window.addEventListener("resize", () => {
       if (width > 1536) {
         setShow(5);
       } else if (width > 1024) {
         setShow(4);
       }
-      }, 100)
-    );
+    });
     if (width > 1536) {
       setShow(5);
     } else if (width > 1024) {
@@ -44,13 +42,8 @@ function Page1({ list, top }) {
 
   return (
     <div
-      className={_.join(
-        [
-          "home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0 px-6",
-        ],
-        " "
-      )}
-      style={{ top: top }}
+      className="home-page1 w-full flex flex-col justify-center items-center h-screen fixed left-0 px-6"
+      style={{ top }}
     >
       <FloatWithMouse />
       <Lights />

src/views/Home/Landscape/Page2/Mobile/QrResult/index.js

@@ -1,12 +1,15 @@
 import React, { useState } from "react";
-import olum2Image from "../../../../../../assets/images/olum-2.svg";
 import { connect } from "react-redux";
-import _ from "lodash";
+
+//components
 import PDF from "./PDF";
 import Link from "./Link";
 import Voice from "./Voice";
 // import WaveAudio from "../../../../../components/Wave";
 
+//assets
+import olum2Image from "../../../../../../assets/images/olum-2.svg";
+
 const Identifier = ({ item, activeType }) => {
   return (
     <>
@@ -36,24 +39,23 @@ function QrResult({ book, grades, checked, dataTypes, list }) {
   const [activeType, setActivetType] = useState("all");
   return (
     <div
-      className={_.join(
-        [
-          "relative w-full h-full min-h-full transform flex flex-col px-2 pt-10 bg-white",
-        ],
-        " "
-      )}
+      className="relative w-full h-full min-h-full transform flex flex-col px-2 pt-10 bg-white"
       onClick={(e) => e.stopPropagation()}
     >
       <div className="w-full flex items-center">
         <img src={book.imageUrl} alt={book.name} className="rounded-md w-1/3" />
         <div className="flex flex-col">
           <h1 className="font-semibold text-primary">{book.name}</h1>
+          {book?.grade ? (
             <strong className="text-blueC0 font-light mt-2 text-sm">
-            {_.join(["پایه", grades[book.grade]], " ")}
+              {"پایه" + " " + grades[book.grade]}
             </strong>
+          ) : null}
+          {book?.page ? (
             <p className="mt-1 text-blueC0 text-sm">
-            {_.join(["شما در حال مطالعه صفحه", book.page, "هستید."], " ")}
+              {"شما در حال مطالعه صفحه" + " " + book.page + " " + "هستید."}
             </p>
+          ) : null}
         </div>
       </div>
       <div
@@ -65,15 +67,13 @@ function QrResult({ book, grades, checked, dataTypes, list }) {
             <li
               key={index}
               onClick={() => setActivetType(item.type)}
-              className={_.join(
-                [
-                  "w-1/5 text-xs text-center text-blueC0 cursor-pointer py-3 transition-all duration-300",
+              className={`w-1/5 text-xs text-center text-blueC0 cursor-pointer py-3 transition-all duration-300
+                  ${
                     activeType === item.type
                       ? "font-bold bg-blueFF"
-                    : "font-light bg-white",
-                ],
-                " "
-              )}
+                      : "font-light bg-white"
+                  }
+               `}
               style={{
                 borderBottom:
                   activeType === item.type

src/views/Home/Landscape/Page2/Mobile/Video/index.js

@@ -1,22 +1,22 @@
-import React, { useState, useEffect, useCallback } from "react";
-import {connect} from 'react-redux';
-import _ from "lodash";
+import React from "react";
+import { connect } from "react-redux";
+
+//assets
 import ARImage from "../../../../../../assets/images/ar.jpg";
-import scroll from "../../../../../../utils/scroll";
 
 function Video({ top, videoPosition }) {
   return (
     <div className="relative h-full w-full bg-transparent">
       <video
         id="video"
-        className={_.join(
-          [
-            "video outline-none animation-puls transform z-50",
-            window.scrollY > 3.5 * window.innerHeight ? "fixed" : "absolute",
-            window.scrollY > 3.5 * window.innerHeight ? "" : "-translate-y-1/2",
-          ],
-          " "
-        )}
+        className={`video outline-none animation-puls transform z-50
+            ${window.scrollY > 3.5 * window.innerHeight ? "fixed" : "absolute"}
+            ${
+              window.scrollY > 3.5 * window.innerHeight
+                ? ""
+                : "-translate-y-1/2"
+            }
+         `}
         style={{
           height:
             window.scrollY < 3.5 * window.innerHeight
@@ -53,7 +53,7 @@ function Video({ top, videoPosition }) {
 
 const mapStateToProps = (state) => ({
   videoPosition: state.scrollAction.page2VideoPosition,
-  top : state.scrollAction.page2VideoTopPosition
-})
+  top: state.scrollAction.page2VideoTopPosition,
+});
 
 export default connect(mapStateToProps, {})(Video);

src/views/Home/Landscape/Page2/Mobile/index.js

@@ -1,4 +1,3 @@
-import _ from "lodash";
 import { connect } from "react-redux";
 import QrResult from "./QrResult";
 import QrScanner from "./QrScanner";
@@ -8,60 +7,41 @@ import Video from "./Video";
 function Mobile({ mobilePosition, selectedVideo, unit }) {
   return (
     <div
-      className={_.join(
-        ["fixed rounded-2xl flex flex-col overflow-hidden shadow-xl"],
-        " "
-      )}
+      className="fixed rounded-2xl flex flex-col overflow-hidden shadow-xl"
       style={{
         top: "5%",
         height: (window.innerHeight * 9) / 10,
         width: (window.innerHeight * 10) / 20,
         left: mobilePosition + "%",
-        border: '4px solid black'
+        border: "4px solid black",
       }}
     >
       <div className="relative w-full h-full flex">
         <div
-          className={_.join(
-            [
-              "absolute left-0 top-0 h-full w-full",
-              unit === 1 ? "opacity-100 z-10" : "opacity-0 z-0",
-            ],
-            " "
-          )}
+          className={`absolute left-0 top-0 h-full w-full
+              ${unit === 1 ? "opacity-100 z-10" : "opacity-0 z-0"}
+           `}
         >
           <QrScanner />
         </div>
         <div
-          className={_.join(
-            [
-              "absolute w-full h-full min-h-full transform transitiona-ll duration-500",
-              unit === 2 ? "opacity-100 z-10" : "opacity-0 z-0",
-            ],
-            " "
-          )}
+          className={`absolute w-full h-full min-h-full transform transitiona-ll duration-500
+              ${unit === 2 ? "opacity-100 z-10" : "opacity-0 z-0"}
+          `}
         >
           <QrResult />
         </div>
         <div
-          className={_.join(
-            [
-              "absolute w-full h-full min-h-full transform",
-              unit === 3 ? "opacity-100 z-10" : "opacity-0 z-0",
-            ],
-            " "
-          )}
+          className={`absolute w-full h-full min-h-full transform",
+              ${unit === 3 ? "opacity-100 z-10" : "opacity-0 z-0"}
+            `}
         >
           <AR />
         </div>
         <div
-          className={_.join(
-            [
-              "absolute left-0 top-0 h-full w-full",
-              unit === 4 ? "opacity-100 z-10" : "opacity-0 z-0",
-            ],
-            " "
-          )}
+          className={`absolute left-0 top-0 h-full w-full
+              ${unit === 4 ? "opacity-100 z-10" : "opacity-0 z-0"}
+            `}
         >
           <Video selectedVideo={selectedVideo} />
         </div>

src/views/Home/Landscape/Page2/index.js

@@ -1,6 +1,9 @@
 import { connect } from "react-redux";
-import _ from "lodash";
+
+//components
 import Mobile from "./Mobile";
+
+//assets
 import qrImage from "../../../../assets/images/qrImage.png";
 import rightBg from "../../../../assets/images/page-bg.png";
 import leftBg from "../../../../assets/images/page-bg-1.png";
@@ -8,30 +11,22 @@ import leftBg from "../../../../assets/images/page-bg-1.png";
 function Page2({ top, rotateX, boxPosition }) {
   return (
     <div
-      className={_.join(["h-screen w-full fixed left-0 overflow-hidden"], " ")}
+      className="h-screen w-full fixed left-0 overflow-hidden"
       style={{
-        top: top,
+        top,
         perspective: "400px",
       }}
       onClick={(e) => e.stopPropagation()}
     >
       <div
-        className={_.join(
-          [" home-page2 h-full w-full origin-bottom overflow-hidden"],
-          " "
-        )}
+        className="home-page2 h-full w-full origin-bottom overflow-hidden"
         style={{
           transformStyle: "preserve-3d",
           transform: `rotateX(${rotateX}deg)`,
         }}
       >
         <div
-          className={_.join(
-            [
-              "relative shadow-2xl transform flex bg-white text-center overflow-hidden",
-            ],
-            " "
-          )}
+          className="relative shadow-2xl transform flex bg-white text-center overflow-hidden"
           style={{
             transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)`,
             width: "140%",
@@ -48,12 +43,7 @@ function Page2({ top, rotateX, boxPosition }) {
               className="w-full"
             />
             <video
-              className={_.join(
-                [
-                  "video outline-none w-1/2 absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 rounded-lg cursor-pointer",
-                ],
-                " "
-              )}
+              className="video outline-none w-1/2 absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 rounded-lg cursor-pointer"
               controls
             >
               <source
@@ -82,8 +72,7 @@ function Page2({ top, rotateX, boxPosition }) {
           </div>
         </div>
         {/* mobile phone */}
-        <Mobile
-        />
+        <Mobile />
         {/* video */}
       </div>
     </div>
@@ -95,7 +84,7 @@ const mapStateToProps = (state) => ({
   rotateX: state.scrollAction.page2RotateX,
   boxPosition: state.scrollAction.page2BoxPosition,
   mobilePosition: state.scrollAction.page2MobilePosition,
-  videoPosition : state.scrollAction.page2VideoPosition
+  videoPosition: state.scrollAction.page2VideoPosition,
 });
 
 export default connect(mapStateToProps, {})(Page2);

src/views/Home/Landscape/Page3/index.js

@@ -1,5 +1,6 @@
-import {connect} from 'react-redux';
-import _ from "lodash";
+import { connect } from "react-redux";
+
+//assets
 import testResultImage from "../../../../assets/images/test-result.png";
 // import testPageInfoImage from "../../../../assets/images/test-page-info.svg";
 import testPageImage from "../../../../assets/images/test-page.svg";
@@ -8,15 +9,11 @@ import testPageFormulaImage from "../../../../assets/images/test-page-formula.sv
 function Page3({ top, translateY }) {
   return (
     <div
-      className={_.join(
-        [
-          "fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex justify-center items-end z-30",
-          top > 50 ? "opacity-0" : "opacity-100",
-        ],
-        " "
-      )}
+      className={`fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex justify-center items-end z-30"
+          ${top > 50 ? "opacity-0" : "opacity-100"}
+       `}
       style={{
-        top: top,
+        top,
       }}
     >
       <div
@@ -51,7 +48,7 @@ function Page3({ top, translateY }) {
 
 const mapStateToProps = (state) => ({
   top: state.scrollAction.page3TopPosition,
-  translateY : state.scrollAction.page3TestTranslateY
-})
+  translateY: state.scrollAction.page3TestTranslateY,
+});
 
 export default connect(mapStateToProps, {})(Page3);

src/views/Home/Landscape/Page4/index.js

@@ -1,5 +1,6 @@
-import {connect} from 'react-redux';
-import _ from "lodash";
+import { connect } from "react-redux";
+
+//assets
 import bgImage from "../../../../assets/images/page5-bg.svg";
 import bazarImage from "../../../../assets/images/bazar.svg";
 import appStoreImage from "../../../../assets/images/app-store.svg";
@@ -7,14 +8,14 @@ import appStoreImage from "../../../../assets/images/app-store.svg";
 function Page4({ top }) {
   return (
     <div
-      className={_.join(
-        [
-          "z-30 fixed left-0 h-screen w-full pt-20 bg-white",
-          top >= window.innerHeight -50 ? "opacity-0 pointer-events-none" : "opacity-100",
-        ],
-        " "
-      )}
-      style={{ top: top }}
+      className={`z-30 fixed left-0 h-screen w-full pt-20 bg-white
+          ${
+            top >= window.innerHeight - 50
+              ? "opacity-0 pointer-events-none"
+              : "opacity-100"
+          }
+       `}
+      style={{ top }}
     >
       <div className="relative w-full h-full">
         <img src={bgImage} alt="" className="absolute left-0 -top-1/4 w-full" />
@@ -52,7 +53,7 @@ function Page4({ top }) {
 }
 
 const mapStateToProps = (state) => ({
-  top : state.scrollAction.page4TopPosition
-})
+  top: state.scrollAction.page4TopPosition,
+});
 
-export default connect(mapStateToProps, {})(Page4)
+export default connect(mapStateToProps, {})(Page4);

src/views/Home/Landscape/Test/Question.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import _ from "lodash";
 
 export default function Question({ question }) {
   const [select, setSelect] = useState("");
@@ -16,12 +15,7 @@ export default function Question({ question }) {
         {question.options.map((option, index) => (
           <li
             onClick={() => setSelect(option)}
-            className={_.join(
-              [
-                "rounded-md w-full overflow-hidden flex items-center my-2 cursor-pointer transition-all duration-500",
-              ],
-              " "
-            )}
+            className="rounded-md w-full overflow-hidden flex items-center my-2 cursor-pointer transition-all duration-500"
             style={{
               backgroundColor: select === option ? "#32af00" : "transparent",
               borderColor: select === option ? "transparent" : "#777",
@@ -31,10 +25,7 @@ export default function Question({ question }) {
             key={index}
           >
             <span
-              className={_.join(
-                ["h-full py-3 px-5 text-xs transition-all duration-500"],
-                " "
-              )}
+              className="h-full py-3 px-5 text-xs transition-all duration-500"
               style={{
                 color: select === option ? "white" : "#E7E7E7",
                 backgroundColor: select === option ? "#329f00" : "#444",
@@ -43,13 +34,9 @@ export default function Question({ question }) {
               الف
             </span>
             <p
-              className={_.join(
-                [
-                  "text-xs mr-4 transition-all duration-500",
-                  select === option ? "#66CD22" : "#E7E7E7",
-                ],
-                " "
-              )}
+              className={`text-xs mr-4 transition-all duration-500
+                  ${select === option ? "#66CD22" : "#E7E7E7"}
+               `}
               style={{ color: select === option ? "white" : "#E7E7E7" }}
             >
               {option}

src/views/Home/Landscape/Test/index.js

@@ -1,6 +1,9 @@
-import {connect} from 'react-redux';
-import _ from "lodash";
+import { connect } from "react-redux";
+
+//assets
 import timerIcon from "../../../../assets/icons/timer.svg";
+
+//components
 import QuestionBox from "./Question";
 
 function Test({ title, duration, questions, translateY }) {
@@ -28,7 +31,7 @@ function Test({ title, duration, questions, translateY }) {
         <div className="flex items-center">
           <img src={timerIcon} className="w-4 h-4 ml-1" />
           <div className="text-sm text-green71">
-            {_.join(["زمان باقیمانده", duration], " ")}
+            {"زمان باقیمانده" + " " + duration}
           </div>
         </div>
       </header>
@@ -47,7 +50,7 @@ function Test({ title, duration, questions, translateY }) {
 
 const mapStateToProps = (state) => ({
   translateY: state.scrollAction.testTranslateY,
-})
+});
 
 export default connect(mapStateToProps, {})(Test);
 
@@ -66,4 +69,3 @@ Test.defaultProps = {
     },
   ],
 };
-

src/views/Home/Landscape/VideoTube/LessonPlayList/index.js

@@ -1,14 +1,11 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { publicApi } from "../../../../../redux/actions";
-import _ from "lodash";
 
 function LessonPlayList({
   list,
   selectedVideo,
   setVideoActive,
-  // catergories,
-  // realCategories,
   vods,
   theme,
 }) {
@@ -34,7 +31,7 @@ function LessonPlayList({
   return (
     <>
       {
-        <div className={_.join(["w-full mb-2.5 flex flex-col border"], " ")}>
+        <div className={"w-full mb-2.5 flex flex-col border"}>
           {/* {bookId && (
             <header className="mb-1 flex items-center">
               <h3 className="py-1 px-2.5 m-0 bg-white inline">
@@ -55,13 +52,10 @@ function LessonPlayList({
             ?.filter((item) => !item.isFreeVOD)
             ?.map((video, i) => (
               <div
-                className={_.join(
-                  [
-                    "flex items-center py-2",
-                    video?.id === selectedVideo?.id ? "bg-white" : "",
-                  ],
-                  " "
-                )}
+                className={`
+                    flex items-center py-2 
+                    ${video?.id === selectedVideo?.id ? "bg-white" : ""}
+                  `}
                 key={i}
                 id={"listItem" + video.id}
                 onClick={() => setVideoActive(video)}

src/views/Home/Landscape/VideoTube/index.js

@@ -1,4 +1,8 @@
 import React, { useEffect, useRef } from "react";
+import { connect } from "react-redux";
+import { book, publicApi } from "../../../../redux/actions";
+
+//components
 import LessonPlayList from "./LessonPlayList";
 import Attachments from "./Attachments";
 import Book from "./Book";
@@ -6,19 +10,10 @@ import AddComment from "./AddComment";
 import Video from "../../../../components/JolPlayer";
 import Test from "../Test";
 import listIcon from "../../../../assets/icons/list.png";
-import { connect } from "react-redux";
-import _ from "lodash";
-import { book, publicApi } from "../../../../redux/actions";
+
 // import Loader from "../../components/Loader";
 
-function VodTube({
-  top,
-  autoPlay,
-  selectedVideo,
-  info,
-  getInfo,
-  theme,
-}) {
+function VodTube({ top, autoPlay, selectedVideo, info, getInfo, theme }) {
   const videoListTag = useRef(null);
   useEffect(() => {
     getInfo({
@@ -29,13 +24,9 @@ function VodTube({
   return (
     <div
       onClick={(e) => e.stopPropagation()}
-      className={_.join(
-        [
-          "fixed flex rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md",
-          top > 10 ? "opacity-0 z-0" : "opacity-100 z-10",
-        ],
-        " "
-      )}
+      className={`fixed flex rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md
+          ${top > 10 ? "opacity-0 z-0" : "opacity-100 z-10"}
+       `}
       style={{ top: top }}
     >
       {/* <Navbar /> */}

src/views/Home/Portrait/Private/Blogs/index.js

@@ -2,7 +2,6 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { blog } from "../../../../../redux/actions";
-import _ from "lodash";
 
 //assets
 import arrowGreenIcon from "../../../../../assets/icons/dropdown-blue.svg";
@@ -78,7 +77,7 @@ const Blog = ({ blog, setActive }) => {
             </div>
             <div className="flex items-center">
               <span className="text-xs font-light text-gray70 dark:text-greenBA">
-                {_.join([window.t("زمان مناسب"), "30"], " ")}
+                {window.t("زمان مناسب") + " " + "30"}
               </span>
             </div>
           </div>

src/views/Products/layouts/Mobile/Header.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import { book } from "../../../../redux/actions";
-import _ from "lodash";
 
 import Search from "../../../../components/Search";
 import Select from "../../../../components/Select";
@@ -25,10 +24,7 @@ export const Header = ({
         borderColor="border-grayDB dark:border-gray45"
         textColor="text-black dark:text-gray70"
         icon={searchLight}
-        onChange={_.debounce(
-          (val) => setFilterOptions({ ...filterOptions, search: val }),
-          700
-        )}
+        onChange={(val) => setFilterOptions({ ...filterOptions, search: val })}
       />
       <div className="w-full flex justify-between mt-3">
         <Select