Merge branch 'master' of https://git.sitenevis.com/Reza_ashrafi/NewDanovin

src/assets/icons/delete.svg

@@ -0,0 +1,10 @@
+<svg id="vuesax_linear_trash" data-name="vuesax/linear/trash" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31">
+  <g id="trash">
+    <path id="Vector" d="M23.25.646C18.949.22,14.622,0,10.307,0A76.3,76.3,0,0,0,2.635.388L0,.646" transform="translate(3.875 7.078)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,3.836.284,2.144C.491.917.646,0,2.829,0H6.213C8.4,0,8.564.969,8.757,2.157l.284,1.679" transform="translate(10.979 2.583)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M17.7,0l-.84,13.007c-.142,2.028-.258,3.6-3.862,3.6H4.7c-3.6,0-3.72-1.576-3.862-3.6L0,0" transform="translate(6.652 11.806)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H4.3" transform="translate(13.343 21.313)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-5" data-name="Vector" d="M0,0H6.458" transform="translate(12.271 16.146)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-6" data-name="Vector" d="M0,0H31V31H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/BG/index.js

@@ -12,6 +12,7 @@ export const BG = ({ isDark }) => {
 
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
+  isMobile: state.publicApi.isMobile
 });
 
 const mapDispatchToProps = {};

src/components/Button/index.js

@@ -13,7 +13,7 @@ export default function Button({
 }) {
   return (
     <button
-      className={`rounded-md py-3 justify-center text-sm ${
+      className={`rounded-md py-3 justify-center text-sm cursor-pointer ${
         selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
       } ${selectable ? (active ? "text-blueC0" : color) : color} ${
         selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity

src/components/Navbar/index.js

@@ -69,7 +69,6 @@ function Navbar({
 
     if (!isMobile) {
       window.addEventListener("scroll", () => {
-        
         if (window.scrollY >= 64) {
           setDesktopMiddleFix(() => true);
         } else {
@@ -85,9 +84,7 @@ function Navbar({
       });
     }
   }, []);
-  return (
+  return isMobile ? (
-    <>
-      {isMobile ? (
     <div
       className={_.join(
         [
@@ -147,9 +144,7 @@ function Navbar({
                 className={_.join(
                   [
                     "rounded-sm p-1.5",
-                        isDark
+                    isDark ? "bg-gray36  ml-2" : "bg-blueFF1 ml-3 shadow-sm",
-                          ? "bg-gray36  ml-2"
-                          : "bg-blueFF1 ml-3 shadow-sm",
                   ],
                   " "
                 )}
@@ -187,9 +182,7 @@ function Navbar({
           {bookmark && (
             <img
               src={
-                    isDark
+                isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon
-                      ? bookmarkDeactiveDarkIcon
-                      : bookmarkDeactiveLightIcon
               }
               alt="bookmark"
               className="w-7 ml-2"
@@ -222,9 +215,7 @@ function Navbar({
           <span className="text-sm font-normal text-blue52 mr-6">
             انتخاب کشور
           </span>
-              <span className="text-sm font-normal text-blue52">
+          <span className="text-sm font-normal text-blue52">پیگیری سفارش</span>
-                پیگیری سفارش
-              </span>
         </div>
         <div className="divide-x">
           <span className="text-sm font-normal ml-6 text-blue52">
@@ -271,7 +262,6 @@ function Navbar({
           }`}
           style={{
             transition: "all 0.3s",
-                transitionDelay : '0.1s',
           }}
         >
           <div className="ml-10 flex flex-row items-center">
@@ -281,9 +271,7 @@ function Navbar({
               className="w-5 transform translate-y-1 ml-2"
             />
             {/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */}
-                <span
+            <span className={`text-sm text-blue52 ${productCategoryTextColor}`}>
-                  className={`text-sm text-blue52 ${productCategoryTextColor}`}
-                >
               دسته بندی کالاها&nbsp;&nbsp;
             </span>
           </div>
@@ -304,8 +292,6 @@ function Navbar({
         </div>
       </div>
     </header>
-      )}
-    </>
   );
 }
 

src/redux/actions/public.js

@@ -1,5 +1,7 @@
 import proxy from "../proxy";
 const publicApi = {
+  setDesktopContentTransform: (data) => async (dispatch) => 
+    await dispatch({type : "public/setDesktopContentTransform", data}),
   setHeaderOptions: (data) => async (dispatch) =>
     await dispatch({ type: "public/setHeaderOptions", data }),
   setIsDark: (data) => async (dispatch) =>

src/redux/reducers/public.js

@@ -59,7 +59,8 @@ const initialState = {
     menu : false,
     back : false,
     title : false,
-  }
+  },
+  desktopContentTransform : false,
 };
 
 const grades = [
@@ -77,9 +78,12 @@ const grades = [
   "یازدهم",
   "دوازدهم",
 ];
+
 export default function publicApi(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
+    case "public/setDesktopContentTransform":
+      return {...state, desktopContentTransform : data };
     case "public/setHeaderOptions":
       return {...state, headerOptions : data};
     case "public/setIsDark":

src/router.js

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { connect } from "react-redux";
+import { publicApi } from "./redux/actions";
 import Navbar from "./components/Navbar";
 import BG from "./components/BG";
 import BottomNavigation from "./components/BottomNavigation";
@@ -24,7 +25,20 @@ import Faq from "./views/Faq";
 import Contact from "./views/Contact";
 // import VideoTube from "./views/Home/VideoTube";
 
-function Router({ isDark,isMobile, isLogin, headerOptions }) {
+function Router({ isDark, isMobile, isLogin, headerOptions, setDesktopContentTransform }) {
+  useEffect(() => {
+    window.addEventListener("scroll", () => {
+      if (!isMobile) {
+        window.addEventListener("scroll", () => {
+          if (window.scrollY >= 64) {
+            setDesktopContentTransform(true);
+          } else {
+            setDesktopContentTransform(false);
+          }
+        });
+      }
+    });
+  }, []);
   return (
     <div className={_.join([isDark ? "dark" : ""], " ")}>
       <div
@@ -39,8 +53,12 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
       >
         <BrowserRouter>
           {headerOptions?.shown && <Navbar headerOptions={headerOptions} />}
+          {isMobile && (
+            <>
               <BG />
               <BottomNavigation />
+            </>
+          )}
           <Routes>
             <Route
               path="/"
@@ -82,7 +100,9 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
             <Route
               path="/products"
               exact
-              element={<Products headerOptions={{ shown: isMobile ? false : true }} />}
+              element={
+                <Products headerOptions={{ shown: isMobile ? false : true }} />
+              }
             />
             <Route
               path="/products/:id"
@@ -108,8 +128,8 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
                 <ShoppingCart
                   headerOptions={{
                     shown: true,
-                    title: "سبد خرید",
+                    title: isMobile && "سبد خرید",
-                    back: true,
+                    back: isMobile && true,
                   }}
                 />
               }
@@ -303,9 +323,13 @@ function Router({ isDark,isMobile, isLogin, headerOptions }) {
 
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
-  isMobile : state.publicApi.isMobile,
+  isMobile: state.publicApi.isMobile,
   isLogin: state.user.status,
   headerOptions: state.publicApi.headerOptions,
 });
 
-export default connect(mapStateToProps, {})(Router);
+const mapDispatchToProps = {
+  setDesktopContentTransform : publicApi.setDesktopContentTransform,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Router);

src/views/Products/index.js

@@ -21,13 +21,14 @@ export const Products = ({
   gradeFilterBooks,
   setHeaderOptions,
   headerOptions,
+  desktopContentTransform,
 }) => {
   const [filter, setFilter] = useState({
     search: "",
     grade: "",
     productsType: "کتاب",
   });
-  const [desktopContentTransform, setDesktopContentTransform] = useState(false);
+
 
   const onChange = (name, value) => {
     setFilter({ ...filter, [name]: value });
@@ -36,15 +37,6 @@ export const Products = ({
   useEffect(() => {
     getList();
     setHeaderOptions(headerOptions);
-    if (!isMobile) {
-      window.addEventListener("scroll", () => {
-        if (window.scrollY >= 64) {
-          setDesktopContentTransform(() => true);
-        } else {
-          setDesktopContentTransform(() => false);
-        }
-      });
-    }
   }, []);
 
   useEffect(() => {
@@ -182,6 +174,7 @@ const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
   gradeFilterBooks: state.book.gradeFilterBooks,
   selectedGrade: state.book.selectedGrade,
+  desktopContentTransform: state.publicApi.desktopContentTransform,
 });
 
 const mapDispatchToProps = {

src/views/Products/layouts/Main.js

@@ -55,13 +55,13 @@ export const Main = ({ isMobile,
       <ul className='flex justify-between w-3/4 px-4 py-0 '>
         {
           filteringNavItems.map(e => (
-            <li className='text-sm rounded py-2 px-6 transition-all	hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li>
+            <li className='text-sm rounded py-2 px-6 transition-all	duration-700 hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li>
           ))
         }
       </ul>
     </div>
     
-      <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-center">
+      <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-between">
         {selectedGrade
           ? gradeFilterBooks?.map((product, index) => (
             <Product

src/views/ShoppingCart/Product/index.js

@@ -5,9 +5,10 @@ import { userProduct } from "../../../redux/actions";
 // assets
 import bookImage from "../../../assets/images/zist-11.svg";
 import exitIcon from "../../../assets/icons/exit.svg";
+import deleteIcon from "../../../assets/icons/delete.svg";
 
-function Product({ product, grades, pushToCart }) {
+function Product({ product, grades, pushToCart, isMobile }) {
-  return (
+  return isMobile ? (
     <div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
       <div className="flex flex-row">
         <img
@@ -39,7 +40,7 @@ function Product({ product, grades, pushToCart }) {
                 count: product?.productType === 1 ? -1 : -product?.count,
               },
               {},
-              {id : product?.factorId}
+              { id: product?.factorId }
             )
           }
         />
@@ -81,11 +82,75 @@ function Product({ product, grades, pushToCart }) {
         </div>
       </div>
     </div>
+  ) : (
+    <div className="flex flex-row w-full gap-10 py-4 border-b border-solid border-gray-200">
+      <div className="w-1/2 flex flex-row">
+        <img
+          src={"https://dnvn.ir/api/v1/file/" + product?.product?.book?.fileIds}
+          className="rounded-md w-20"
+        />
+        <div className="flex flex-col pr-4 pt-1">
+          <strong className="text-lg text-blue5F mb-1 dark:text-white font-semibold">
+            {product?.product?.book?.name}
+          </strong>
+          <div className="flex flex-row items-center mt-4">
+            <span className="w-2 h-2 bg-greenBA rounded-md ml-1"></span>
+            <div className="text-gray70 text-sm dark:text-greenBA">
+              {"پایه" + " " + grades[product?.product?.book?.gradeId]}
+            </div>
+            <span className="w-2 h-2 bg-greenBA rounded-md mr-5 ml-1"></span>
+            <div className="text-gray70 text-sm dark:text-greenBA">
+              {product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="w-1/4 flex flex-row items-center">
+        <button
+          className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg"
+          onClick={() =>
+            pushToCart({
+              productId: product?.productId,
+              userId: product?.userId,
+              count: 1,
+            })
+          }
+        >
+          +
+        </button>
+        <span className="mx-2.5 font-semibold text-lg text-blueC0">
+          {product.count}
+        </span>
+        <button
+          className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0 text-lg"
+          onClick={() =>
+            pushToCart({
+              productId: product?.productId,
+              userId: product?.userId,
+              count: -1,
+            })
+          }
+        >
+          -
+        </button>
+      </div>
+      <div className="w-1/4 flex flex-row items-center justify-end pl-4">
+        <strong className="font-semibold text-md text-blue5F dark:text-white">
+          &nbsp;{product?.product?.price}&nbsp;&nbsp;تومان
+        </strong>
+        <img
+          src={deleteIcon}
+          alt="delete"
+          className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md mr-4"
+        />
+      </div>
+    </div>
   );
 }
 
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
+  isMobile: state.publicApi.isMobile,
 });
 
 const mapDispatchToProps = {

src/views/ShoppingCart/index.js

@@ -10,22 +10,6 @@ import alertIcon from "../../assets/icons/alert.svg";
 
 import { connect } from "react-redux";
 
-const PriceStatus = ({ name, value, type, isDark }) => {
-  return (
-    <div className="w-full flex flex-row justify-between py-2">
-      <strong className="font-light text-sm dark:text-white">{name}</strong>
-      <span
-        className="font-bold text-sm dark:text-white"
-        style={{
-          color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
-        }}
-      >
-        {value + " " + "تومان"}
-      </span>
-    </div>
-  );
-};
-
 function ShoppingCart({
   isDark,
   isMobile,
@@ -40,6 +24,7 @@ function ShoppingCart({
   payFactor,
   headerOptions,
   setHeaderOptions,
+  desktopContentTransform,
 }) {
   useEffect(() => {
     getList();
@@ -48,11 +33,67 @@ function ShoppingCart({
   }, []);
 
   const Table = () => {
-    
-  }
     return (
-    <>
+      <div className="w-full flex flex-col">
-      {isMobile ? (
+        <header className="w-full flex flex-row gap-10">
+          <strong className="w-1/2 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
+            کالاهای انتخابی{" "}
+          </strong>
+          <strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
+            تعداد سفارش
+          </strong>
+          <strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
+            مبلغ
+          </strong>
+        </header>
+        <ul className="w-full mt-2 list-none p-0">
+          {list.map((product, index) => (
+            <Product key={index} product={product} />
+          ))}
+        </ul>
+      </div>
+    );
+  };
+
+  const PriceStatus = ({ name, value, type }) => {
+    return isMobile ? (
+      <div className="w-full flex flex-row justify-between py-2">
+        <strong className="font-light text-sm dark:text-white">{name}</strong>
+        <span
+          className="font-bold text-sm dark:text-white"
+          style={{
+            color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+          }}
+        >
+          {value + " " + "تومان"}
+        </span>
+      </div>
+    ) : (
+      <div className="w-full flex flex-row justify-between py-4">
+        <strong className="font-light text-base dark:text-white text-blue5F">
+          {name}
+        </strong>
+        <span
+          className="font-medium text-xl dark:text-white"
+          style={{
+            color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+          }}
+        >
+          {value}
+          <span
+            style={{
+              color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+            }}
+            className="text-sm mr-2"
+          >
+            تومان
+          </span>
+        </span>
+      </div>
+    );
+  };
+
+  return isMobile ? (
     <div className="w-full flex flex-col px-4">
       {list.map((product, index) => (
         <Product key={index} product={product} />
@@ -63,19 +104,16 @@ function ShoppingCart({
           name="مبلغ سبد خرید"
           value={factorInfo?.sumPrice}
           type="normal"
-              isDark={isDark}
         />
         <PriceStatus
           name="میزان تخفیف"
           value={factorInfo?.offPrice}
           type="error"
-              isDark={isDark}
         />
         <PriceStatus
           name="مالیات بر ارزش افزوده"
           value={factorInfo?.sumPrice * 0.009}
           type="error"
-              isDark={isDark}
         />
       </div>
       <div className="flex flex-row justify-between items-center w-full py-3">
@@ -105,14 +143,63 @@ function ShoppingCart({
       />
     </div>
   ) : (
-        <div className="w-full flex flex-row">
+    <div
-          <div className="flex flex-col">
+      className={`w-full flex flex-row relative gap-10 px-5 mt-10 ${
+        desktopContentTransform ? "top-24" : ""
+      }`}
+    >
+      <div className="flex flex-col w-3/4">
         <Table />
       </div>
-
+      <div
+        className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
+        style={{ height: "fit-content" }}
+      >
+        <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
+          <PriceStatus
+            name="مبلغ سبد خرید"
+            value={factorInfo?.sumPrice}
+            type="normal"
+          />
+          <PriceStatus
+            name="میزان تخفیف"
+            value={factorInfo?.offPrice}
+            type="error"
+          />
+          <PriceStatus
+            name="مالیات بر ارزش افزوده"
+            value={factorInfo?.sumPrice * 0.009}
+            type="error"
+          />
+        </div>
+        <div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
+          <strong className="font-medium text-base text-blue5F dark:text-white">
+            جمع کل سبد خرید
+          </strong>
+          <p className="font-medium text-greenBA text-xl dark:text-white">
+            {factorInfo?.payPrice}
+            <span className="font-medium text-greenBA text-sm mr-2">تومان</span>
+          </p>
+        </div>
+        <div
+          className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4"
+          style={{ backgroundColor: "#196EC01a" }}
+        >
+          <img src={alertIcon} className="w-5 ml-2" />
+          <p className="text-xs text-blueC0 dark:text-white text-justify">
+            هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
+          </p>
+        </div>
+        <Button
+          title="ادامه فرایند خرید"
+          backgroundColor="bg-blueC0"
+          border={{ color: "#196EC055", width: "1px" }}
+          width="100%"
+          color="text-white"
+          // onClick={() => }
+        />
+      </div>
     </div>
-      )}
-    </>
   );
 }
 
@@ -124,6 +211,7 @@ const mapStateToProps = (state) => ({
   factorInfo: state.userFactor.info,
   userId: state.user.status.id,
   hasPhysical: state.userProduct.hasPhysical,
+  desktopContentTransform: state.publicApi.desktopContentTransform,
 });
 
 const mapDispatchToProps = {

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
       yellow3: "#EFFF00",
       gray36: "#363636",
       orange1: "#FF6600",
+      greenBA: "#06BACE",
       green1: "#00FF80",
       gray20: "#202020",
       gray2077: "#20202077",
@@ -75,18 +76,18 @@ module.exports = {
       greenBA: "#06BACE",
     }),
     fontSize: {
-      'xs': 'clamp(calc(100vw / 38), 8, 13)',
+      'xs': 'clamp(9px, 2.78vw, 11px)',
-      'sm': '.875rem',
+      'sm': 'clamp(11px, 3.02vw , 13px)',
-      'tiny': '.875rem',
+      'tiny': 'clamp(13px,3.28vw, 15px)',
-      'base': '1rem',
+      'base': 'clamp(15px, 3.52vw, 17px)',
-      'lg': '1.125rem',
+      'lg': 'clamp(17px, 3.76vw, 19px)',
-      'xl': '1.25rem',
+      'xl': 'clamp(19px, 4vw, 21px)',
-      '2xl': '1.5rem',
+      '2xl': 'clamp(21px, 4.24vw, 23px)',
-      '3xl': '1.875rem',
+      '3xl': 'clamp(23px, 4.48vw, 25px)',
-      '4xl': '2.25rem',
+      '4xl': 'clamp(25px, 4.72vw, 27px)',
-      '5xl': '3rem',
+      '5xl': 'clamp(27px, 4.96vw, 29px)',
-      '6xl': '4rem',
+      '6xl': 'clamp(29px, 5.22vw, 31px)',
-      '7xl': '5rem',
+      '7xl': 'clamp(31px, 4.46vw, 33px)',
       'sm-1': '0.5rem'
     },
     extend: {