From b073cb61903f3e10be3a7127ab426bedcca06d91 Mon Sep 17 00:00:00 2001
From: Pedram Keshavarzi <pkpedram80@gmail.com>
Date: Tue, 25 Jan 2022 12:25:28 +0330
Subject: [PATCH 1/4] Checkbox Bug Fixed

---
 src/components/Checkbox/index.js              |   5 +-
 .../VerticalExpandableProductFilter/index.js  |   9 +-
 .../Product/Desktop/ProductOverAll/index.js   | 164 ++++++++++++++++++
 src/views/Product/Desktop/index.js            |   5 +-
 src/views/Product/index.js                    |   6 +-
 src/views/Products/layouts/Sidebar.js         |   4 +-
 tailwind.config.js                            |   8 +
 7 files changed, 193 insertions(+), 8 deletions(-)
 create mode 100644 src/views/Product/Desktop/ProductOverAll/index.js

diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
index 87ce1ae..0f1b141 100644
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@@ -2,6 +2,7 @@ import React from "react";
 import './index.css';
 
 export default function Checkbox(props) {
+  console.log(props)
   return (
     <div>
       <svg className="checkbox-symbol">
@@ -16,8 +17,8 @@ export default function Checkbox(props) {
       </svg>
 
       <div className="checkbox-container">
-        <input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} />
-        <label className="checkbox" htmlFor="apples">
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} />
+        <label className="checkbox" htmlFor={"ch"+props.name}>
           <span>
             <svg width="12px" height="10px">
               <use xlinkHref="#check"></use>
diff --git a/src/components/VerticalExpandableProductFilter/index.js b/src/components/VerticalExpandableProductFilter/index.js
index d25383e..c829547 100644
--- a/src/components/VerticalExpandableProductFilter/index.js
+++ b/src/components/VerticalExpandableProductFilter/index.js
@@ -11,6 +11,8 @@ const langDetector = (lang = "fa", option1, option2) => {
 export default function VerticalExpandableProductFilter(props) {
   const [text, setText] = useState("");
   const [searchResult, setSearchResult] = useState([]);
+  const [checkedBox, setChecked] = useState([]);
+  const name = props.name||Math.random()
   useEffect(() => {
     let fakeSearchResult;
     fakeSearchResult = props.list.filter(
@@ -54,12 +56,17 @@ export default function VerticalExpandableProductFilter(props) {
       <ul className="w-full list-none flex flex-col divide-y divide-gray-100">
         {(searchResult.length > 0 ? searchResult : props.list)?.map(
           (item1, i) => (
+          
             <li
               key={i}
               className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2"
             >
+                {console.log(i)}
               <div className="flex flex-row items-center">
-                <Checkbox />
+                <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
+                  checkedBox[i] = !checkedBox[i]
+                  setChecked(checkedBox)
+                }}/>
                 <strong className="text-xs font-light text-gray-500">
                   {item1.name}
                 </strong>
diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js
new file mode 100644
index 0000000..bbaeb52
--- /dev/null
+++ b/src/views/Product/Desktop/ProductOverAll/index.js
@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { toast } from "react-toastify";
+import { book, userProduct, publicApi } from "../../../../redux/actions";
+import proxy from "../../../../redux/proxy";
+import location from "../../../../utils/location";
+import Button from "../../../../components/Button";
+import Header from "../../../../components/Header";
+import Comment from "../../Comment";
+import Rate from "../../Rate";
+
+export const ProductOverAll = ({
+    productType,
+  getInfo,
+  book,
+  grades,
+  isDark,
+  userId,
+  pushToCart,
+  headerOptions,
+  setHeaderOptions,
+}) =>{
+    const [type, setType] = useState("physical");
+    return (
+        
+        <div>
+           <header
+          className={`w-full flex`}
+        >
+          <img
+            src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
+            alt=""
+            style={{height: '320px'}}
+            className="-md py-8 px-16 bg-grayF4 mx-4"
+          />
+          <div className="flex flex-1 flex-col pr-2 pt-2">
+            <h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
+              {type === "digital"
+                ? book?.product[0]?.name
+                : book?.product[1]?.name}
+            </h1>
+            <div className="text-blueC0 text-xs dark:text-greenBA">
+              {"پایه" + " " + grades[book?.gradeId]}
+            </div>
+          </div>
+          
+        </header>
+        <ul
+          className="list-none flex flex-row divide-x items-center mt-4"
+          style={{ direction: "ltr" }}
+        >
+          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+            {book?.pagesNum} <br /> صفحه
+          </li>
+          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+            {"فیزیکی - دیجیتالی"} <br /> در دسترس
+          </li>
+          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+            {book?.rate} <br /> امتیاز
+          </li>
+        </ul>
+        <h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
+          نسخه محصول را انتخاب کنید
+        </h2>
+        <div className="w-full flex flex-row justify-between items-center mt-4">
+          <Button
+            title="نسخه فیزیکی"
+            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+            width="49%"
+            color={isDark ? "text-white" : "text-blueC0"}
+            active={type === "physical"}
+            selectable={true}
+            onClick={() => setType("physical")}
+          />
+          <Button
+            title="نسخه دیجیتال"
+            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+            width="49%"
+            selectable={true}
+            active={type === "digital"}
+            color={isDark ? "text-white" : "text-blueC0"}
+            onClick={() => setType("digital")}
+          />
+        </div>
+        <div className="w-full flex flex-row justify-between items-center mt-4">
+          <Button
+            onClick={() =>
+              proxy.status()
+                ? pushToCart({
+                    productId:
+                      type === "digital"
+                        ? book?.product[0]?.id
+                        : book?.product[1]?.id,
+                    userId: userId,
+                    count: 1,
+                  })
+                : toast.info("ابتدا وارد حساب کاربری خود شوید.")
+            }
+            title={
+              "خرید با قیمت" +
+              " " +
+              (type === "digital"
+                ? book?.product[0]?.price
+                : book?.product[1]?.price) +
+              " " +
+              "تومان"
+            }
+            backgroundColor="bg-blueC0"
+            border={{ color: "#196EC055", width: "1px" }}
+            width="65%"
+            color="text-white"
+          />
+          <Button
+            title="مشاهده نمونه"
+            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+            width="33%"
+            color={isDark ? "text-white" : "text-blueC0"}
+          />
+        </div>
+        <div className="w-full flex flex-row justify-between items-center mt-4">
+          <Button
+            title="مشاهده دوره ویدئویی این محصول"
+            backgroundColor="bg-blueC0"
+            border={{ color: "#196EC055", width: "0px" }}
+            bgOpacity="bg-opacity-10"
+            width="100%"
+            color={isDark ? "text-white" : "text-blueC0"}
+          />
+        </div>
+        <div className="w-full flex flex-col justify-between items-center mt-4">
+          <Header title="توضیحات" link="#" />
+          <p className="text-xs text-gray1 mt-2 dark:text-white">
+            خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
+            ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ
+            ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ
+            ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ
+            ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ
+            ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ
+            ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ
+            ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
+          </p>
+        </div>
+        </div>
+    )
+}
+
+const mapStateToProps = (state) => ({
+    book: state.book.info,
+    grades: state.publicApi.grades,
+    isDark: state.publicApi.isDark,
+    userId: state.user.status.id,
+  });
+  
+  const mapDispatchToProps = {
+    getInfo: book.info,
+    pushToCart: userProduct.add,
+    setHeaderOptions: publicApi.setHeaderOptions,
+  };
+  
+  export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll);
+  
\ No newline at end of file
diff --git a/src/views/Product/Desktop/index.js b/src/views/Product/Desktop/index.js
index ac958a4..b797975 100644
--- a/src/views/Product/Desktop/index.js
+++ b/src/views/Product/Desktop/index.js
@@ -1,9 +1,10 @@
 import React from "react";
+import ProductOverAll from "./ProductOverAll";
 
 const DesktopProductLayout = () =>{
     return (
-        <div className="w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3">
-            Desktop
+        <div className="w-4/5 flex flex-row gap-10 px-5  overflow-y-hidden mt-3 mb-64">
+            <ProductOverAll />
         </div>
     );
 };
diff --git a/src/views/Product/index.js b/src/views/Product/index.js
index a7e1ed4..2cd6cb7 100644
--- a/src/views/Product/index.js
+++ b/src/views/Product/index.js
@@ -174,7 +174,10 @@ export const Product = ({
             <Comment key={index} />
           ))}
         </div>
-      </div>) : <DesktopProductLayout />}
+      </div>) :<div className="flex flex-col items-center justify-center">
+      <DesktopProductLayout />
+      </div>
+      }
     </>
   );
 };
@@ -182,6 +185,7 @@ export const Product = ({
 const mapStateToProps = (state) => ({
   book: state.book.info,
   grades: state.publicApi.grades,
+  isMobile: state.publicApi.isMobile,
   isDark: state.publicApi.isDark,
   userId: state.user.status.id,
 });
diff --git a/src/views/Products/layouts/Sidebar.js b/src/views/Products/layouts/Sidebar.js
index d059160..8caec53 100644
--- a/src/views/Products/layouts/Sidebar.js
+++ b/src/views/Products/layouts/Sidebar.js
@@ -59,8 +59,8 @@ export const Sidebar = ({}) => {
     },
   ]
   return <div className="flex flex-col w-1/4 p-4">
-          <VerticalExpandableProductFilter btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
-          <VerticalExpandableProductFilter list={categories} title="دسته بندی" searchAble={false}/>
+          <VerticalExpandableProductFilter  btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
+          <VerticalExpandableProductFilter   list={categories} title="دسته بندی" searchAble={false}/>
           
   </div>;
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index e7fba29..0aa1760 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -49,6 +49,14 @@ module.exports = {
       gray70: "#707070",
       grayDB: "#DBDBDB",
     }),
+    // height: (theme) =>( {
+    //   sm: '8px',
+    //   md: '16px',
+    //   lg: '24px',
+    //   xl: '48px',
+    //   h420 : '320px',
+    //   full: '100%',
+    //   }),
     borderColor: (theme) => ({
       ...theme("colors"),
       blueC0: "#196EC0",

From 381af7f5b2337c55c02d912f7623d0c818dfcef3 Mon Sep 17 00:00:00 2001
From: Pedram Keshavarzi <pkpedram80@gmail.com>
Date: Tue, 25 Jan 2022 13:37:03 +0330
Subject: [PATCH 2/4] Product Page Product Overview Massive Changes

---
 src/components/Button/index.js                |   8 +-
 .../Product/Desktop/ProductOverAll/index.js   | 285 ++++++++++--------
 src/views/Products/layouts/Sidebar.js         |   4 +-
 tailwind.config.js                            |   3 +
 4 files changed, 167 insertions(+), 133 deletions(-)

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 377752f..b6df9d0 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -10,10 +10,14 @@ export default function Button({
   onClick,
   selectable,
   active,
+  borderType,
+  twPaddings,
+  customStyle,
+  radius
 }) {
   return (
     <button
-      className={`rounded-md py-3 justify-center text-sm cursor-pointer ${
+      className={`${radius == false ? '' : 'rounded-md'} ${twPaddings? twPaddings : 'py-3'} ${customStyle} 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
@@ -21,7 +25,7 @@ export default function Button({
       style={{
         border: `${
           selectable ? (active ? "2px" : border.width) : border.width
-        } solid ${
+        } ${borderType ? borderType : 'solid'} ${
           selectable ? (active ? "#196EC0" : border.color) : border.color
         }`,
         width: width,
diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js
index bbaeb52..7c7ed3d 100644
--- a/src/views/Product/Desktop/ProductOverAll/index.js
+++ b/src/views/Product/Desktop/ProductOverAll/index.js
@@ -8,9 +8,10 @@ import Button from "../../../../components/Button";
 import Header from "../../../../components/Header";
 import Comment from "../../Comment";
 import Rate from "../../Rate";
+import StarRating from "../../../../components/StarRating";
 
 export const ProductOverAll = ({
-    productType,
+  productType,
   getInfo,
   book,
   grades,
@@ -19,21 +20,22 @@ export const ProductOverAll = ({
   pushToCart,
   headerOptions,
   setHeaderOptions,
-}) =>{
-    const [type, setType] = useState("physical");
-    return (
-        
-        <div>
-           <header
-          className={`w-full flex`}
-        >
-          <img
-            src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
-            alt=""
-            style={{height: '320px'}}
-            className="-md py-8 px-16 bg-grayF4 mx-4"
-          />
-          <div className="flex flex-1 flex-col pr-2 pt-2">
+}) => {
+  const [type, setType] = useState("physical");
+  return (
+
+    <div>
+      <header
+        className={`w-full flex justify-between`}
+      >
+        <img
+          src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
+          alt=""
+          style={{ height: '320px' }}
+          className="-md py-8 px-16 bg-grayF4 mx-4"
+        />
+        <div className="flex flex-col flex-1 ">
+          <div className="flex flex-col pr-2 py-2  border-0 border-b border-solid border-gray-100">
             <h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
               {type === "digital"
                 ? book?.product[0]?.name
@@ -42,123 +44,148 @@ export const ProductOverAll = ({
             <div className="text-blueC0 text-xs dark:text-greenBA">
               {"پایه" + " " + grades[book?.gradeId]}
             </div>
+            <div className="flex float-left justify-end">
+            <div className="p-2">
+              <StarRating />
+            </div>
+            <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
+              بیش از 160 نفر امتیاز داده اند
+                          </div>
           </div>
-          
-        </header>
-        <ul
-          className="list-none flex flex-row divide-x items-center mt-4"
-          style={{ direction: "ltr" }}
-        >
-          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
-            {book?.pagesNum} <br /> صفحه
-          </li>
-          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
-            {"فیزیکی - دیجیتالی"} <br /> در دسترس
-          </li>
-          <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
-            {book?.rate} <br /> امتیاز
-          </li>
-        </ul>
-        <h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
-          نسخه محصول را انتخاب کنید
-        </h2>
-        <div className="w-full flex flex-row justify-between items-center mt-4">
-          <Button
-            title="نسخه فیزیکی"
-            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
-            width="49%"
-            color={isDark ? "text-white" : "text-blueC0"}
-            active={type === "physical"}
-            selectable={true}
-            onClick={() => setType("physical")}
-          />
-          <Button
-            title="نسخه دیجیتال"
-            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
-            width="49%"
-            selectable={true}
-            active={type === "digital"}
-            color={isDark ? "text-white" : "text-blueC0"}
-            onClick={() => setType("digital")}
-          />
-        </div>
-        <div className="w-full flex flex-row justify-between items-center mt-4">
-          <Button
-            onClick={() =>
-              proxy.status()
-                ? pushToCart({
-                    productId:
-                      type === "digital"
-                        ? book?.product[0]?.id
-                        : book?.product[1]?.id,
-                    userId: userId,
-                    count: 1,
-                  })
-                : toast.info("ابتدا وارد حساب کاربری خود شوید.")
-            }
-            title={
-              "خرید با قیمت" +
-              " " +
-              (type === "digital"
-                ? book?.product[0]?.price
-                : book?.product[1]?.price) +
-              " " +
-              "تومان"
-            }
-            backgroundColor="bg-blueC0"
-            border={{ color: "#196EC055", width: "1px" }}
-            width="65%"
-            color="text-white"
-          />
-          <Button
-            title="مشاهده نمونه"
-            backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-            border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
-            width="33%"
-            color={isDark ? "text-white" : "text-blueC0"}
-          />
-        </div>
-        <div className="w-full flex flex-row justify-between items-center mt-4">
-          <Button
-            title="مشاهده دوره ویدئویی این محصول"
-            backgroundColor="bg-blueC0"
-            border={{ color: "#196EC055", width: "0px" }}
-            bgOpacity="bg-opacity-10"
-            width="100%"
-            color={isDark ? "text-white" : "text-blueC0"}
-          />
+          </div>
+
+      <div className="py-4 border-0 border-b border-solid border-gray-100">
+        <div className="flex items-center py-2">
+        <h1>نوع کتاب</h1>
+        <p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
         </div>
-        <div className="w-full flex flex-col justify-between items-center mt-4">
-          <Header title="توضیحات" link="#" />
-          <p className="text-xs text-gray1 mt-2 dark:text-white">
-            خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
-            ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ
-            ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ
-            ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ
-            ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ
-            ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ
-            ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ
-            ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
-          </p>
+          <div className="w-full flex flex-row justify-between items-center mt-4">
+        <Button
+          title="نسخه فیزیکی"
+          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+          border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+          color={isDark ? "text-white" : "text-blueC0"}
+          active={type === "physical"}
+          selectable={true}
+          onClick={() => setType("physical")}
+          borderType='dashed'
+          customStyle=''
+          twPaddings='py-4 px-12'
+          radius={false}
+        />
+        <Button
+          title="نسخه دیجیتال"
+          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+          border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+          selectable={true}
+          active={type === "digital"}
+          color={isDark ? "text-white" : "text-blueC0"}
+          onClick={() => setType("digital")}
+          radius={false}
+          twPaddings='py-4 px-12'
+        />
+        <Button
+          title="مشاهده نمونه"
+          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+          border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
+          radius={false}
+          twPaddings='py-4 px-6'
+          color={isDark ? "text-white" : "text-red19"}
+        />
+      </div>
+      </div>
         </div>
+        <div>
+          <h1>aopdjsoqweqweqweqweqweWajsduh</h1>
         </div>
-    )
+
+      </header>
+      <ul
+        className="list-none flex flex-row divide-x items-center mt-4"
+        style={{ direction: "ltr" }}
+      >
+        <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+          {book?.pagesNum} <br /> صفحه
+        </li>
+        <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+          {"فیزیکی - دیجیتالی"} <br /> در دسترس
+        </li>
+        <li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
+          {book?.rate} <br /> امتیاز
+        </li>
+      </ul>
+      <h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
+        نسخه محصول را انتخاب کنید
+      </h2>
+      
+      <div className="w-full flex flex-row justify-between items-center mt-4">
+        <Button
+          onClick={() =>
+            proxy.status()
+              ? pushToCart({
+                productId:
+                  type === "digital"
+                    ? book?.product[0]?.id
+                    : book?.product[1]?.id,
+                userId: userId,
+                count: 1,
+              })
+              : toast.info("ابتدا وارد حساب کاربری خود شوید.")
+          }
+          title={
+            "خرید با قیمت" +
+            " " +
+            (type === "digital"
+              ? book?.product[0]?.price
+              : book?.product[1]?.price) +
+            " " +
+            "تومان"
+          }
+          backgroundColor="bg-blueC0"
+          border={{ color: "#196EC055", width: "1px" }}
+          width="65%"
+          color="text-white"
+        />
+        
+      </div>
+      <div className="w-full flex flex-row justify-between items-center mt-4">
+        <Button
+          title="مشاهده دوره ویدئویی این محصول"
+          backgroundColor="bg-blueC0"
+          border={{ color: "#196EC055", width: "0px" }}
+          bgOpacity="bg-opacity-10"
+          width="100%"
+          color={isDark ? "text-white" : "text-blueC0"}
+        />
+      </div>
+      <div className="w-full flex flex-col justify-between items-center mt-4">
+        <Header title="توضیحات" link="#" />
+        <p className="text-xs text-gray1 mt-2 dark:text-white">
+          خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
+          ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ
+          ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ
+          ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ
+          ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ
+          ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ
+          ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ
+          ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
+        </p>
+      </div>
+    </div>
+  )
 }
 
 const mapStateToProps = (state) => ({
-    book: state.book.info,
-    grades: state.publicApi.grades,
-    isDark: state.publicApi.isDark,
-    userId: state.user.status.id,
-  });
-  
-  const mapDispatchToProps = {
-    getInfo: book.info,
-    pushToCart: userProduct.add,
-    setHeaderOptions: publicApi.setHeaderOptions,
-  };
-  
-  export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll);
-  
\ No newline at end of file
+  book: state.book.info,
+  grades: state.publicApi.grades,
+  isDark: state.publicApi.isDark,
+  userId: state.user.status.id,
+});
+
+const mapDispatchToProps = {
+  getInfo: book.info,
+  pushToCart: userProduct.add,
+  setHeaderOptions: publicApi.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll);
diff --git a/src/views/Products/layouts/Sidebar.js b/src/views/Products/layouts/Sidebar.js
index 8caec53..d85e5e2 100644
--- a/src/views/Products/layouts/Sidebar.js
+++ b/src/views/Products/layouts/Sidebar.js
@@ -59,8 +59,8 @@ export const Sidebar = ({}) => {
     },
   ]
   return <div className="flex flex-col w-1/4 p-4">
-          <VerticalExpandableProductFilter  btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
-          <VerticalExpandableProductFilter   list={categories} title="دسته بندی" searchAble={false}/>
+          <VerticalExpandableProductFilter name="grades" btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
+          <VerticalExpandableProductFilter name="category"  list={categories} title="دسته بندی" searchAble={false}/>
           
   </div>;
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index e837da6..7682517 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,6 +16,7 @@ module.exports = {
       blueFFOP : "rgba(6, 146, 255, 0.36)",
       redFF: "#FFE6E6",
       redFF1: "#FF2020",
+      red19: "#C01919",
       yellow2: "#FDFFDA",
       yellow3: "#EFFF00",
       gray36: "#363636",
@@ -45,6 +46,7 @@ module.exports = {
       green71: "#067182",
       greenBA: "#06BACE",
       red5F: "#5F1A05",
+      red19: "#C01919",
       yellow1: "#5F5F05",
       gray1: "#333333",
       gray70: "#707070",
@@ -67,6 +69,7 @@ module.exports = {
       blueB9: '#86A0B9',
       grayDB: "#DBDBDB",
       gray45: "#454545",
+      red19: "#C01919",
 
     }),
     fill: (theme) => ({

From 50543dec50e84f26253c6d3029e7090369bf4e92 Mon Sep 17 00:00:00 2001
From: Pedram Keshavarzi <pkpedram80@gmail.com>
Date: Tue, 25 Jan 2022 14:50:12 +0330
Subject: [PATCH 3/4] Side Bar Filtering Works But Has Errors (Not Loading The
 Data)

---
 src/components/Checkbox/index.js              |  2 +-
 .../VerticalExpandableProductFilter/index.js  |  6 +-
 .../Product/Desktop/ProductOverAll/index.js   | 96 +++++++++----------
 src/views/Products/index.js                   |  6 +-
 src/views/Products/layouts/Sidebar.js         | 10 +-
 5 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
index 0f1b141..42b9264 100644
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@@ -17,7 +17,7 @@ export default function Checkbox(props) {
       </svg>
 
       <div className="checkbox-container">
-        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} />
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick}/>
         <label className="checkbox" htmlFor={"ch"+props.name}>
           <span>
             <svg width="12px" height="10px">
diff --git a/src/components/VerticalExpandableProductFilter/index.js b/src/components/VerticalExpandableProductFilter/index.js
index c829547..b4b9047 100644
--- a/src/components/VerticalExpandableProductFilter/index.js
+++ b/src/components/VerticalExpandableProductFilter/index.js
@@ -66,9 +66,11 @@ export default function VerticalExpandableProductFilter(props) {
                 <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
                   checkedBox[i] = !checkedBox[i]
                   setChecked(checkedBox)
-                }}/>
+                  props.onChange(name , item1.name);
+                  
+                }} />
                 <strong className="text-xs font-light text-gray-500">
-                  {item1.name}
+                  {props.preName ? props.preName + ' ' + item1.name : item1.name}
                 </strong>
               </div>
 
diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js
index 7c7ed3d..d17451c 100644
--- a/src/views/Product/Desktop/ProductOverAll/index.js
+++ b/src/views/Product/Desktop/ProductOverAll/index.js
@@ -45,55 +45,55 @@ export const ProductOverAll = ({
               {"پایه" + " " + grades[book?.gradeId]}
             </div>
             <div className="flex float-left justify-end">
-            <div className="p-2">
-              <StarRating />
+              <div className="p-2">
+                <StarRating />
+              </div>
+              <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
+                بیش از 160 نفر امتیاز داده اند
+              </div>
             </div>
-            <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
-              بیش از 160 نفر امتیاز داده اند
-                          </div>
-          </div>
           </div>
 
-      <div className="py-4 border-0 border-b border-solid border-gray-100">
-        <div className="flex items-center py-2">
-        <h1>نوع کتاب</h1>
-        <p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
-        </div>
-          <div className="w-full flex flex-row justify-between items-center mt-4">
-        <Button
-          title="نسخه فیزیکی"
-          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-          border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
-          color={isDark ? "text-white" : "text-blueC0"}
-          active={type === "physical"}
-          selectable={true}
-          onClick={() => setType("physical")}
-          borderType='dashed'
-          customStyle=''
-          twPaddings='py-4 px-12'
-          radius={false}
-        />
-        <Button
-          title="نسخه دیجیتال"
-          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-          border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
-          selectable={true}
-          active={type === "digital"}
-          color={isDark ? "text-white" : "text-blueC0"}
-          onClick={() => setType("digital")}
-          radius={false}
-          twPaddings='py-4 px-12'
-        />
-        <Button
-          title="مشاهده نمونه"
-          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-          border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
-          radius={false}
-          twPaddings='py-4 px-6'
-          color={isDark ? "text-white" : "text-red19"}
-        />
-      </div>
-      </div>
+          <div className="py-4 border-0 border-b border-solid border-gray-100">
+            <div className="flex items-center py-2">
+              <h1>نوع کتاب</h1>
+              <p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
+            </div>
+            <div className="w-full flex flex-row justify-between items-center mt-4">
+              <Button
+                title="نسخه فیزیکی"
+                backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+                border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+                color={isDark ? "text-white" : "text-blueC0"}
+                active={type === "physical"}
+                selectable={true}
+                onClick={() => setType("physical")}
+                borderType='dashed'
+                customStyle=''
+                twPaddings='py-4 px-12'
+                radius={false}
+              />
+              <Button
+                title="نسخه دیجیتال"
+                backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+                border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+                selectable={true}
+                active={type === "digital"}
+                color={isDark ? "text-white" : "text-blueC0"}
+                onClick={() => setType("digital")}
+                radius={false}
+                twPaddings='py-4 px-12'
+              />
+              <Button
+                title="مشاهده نمونه"
+                backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+                border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
+                radius={false}
+                twPaddings='py-4 px-6'
+                color={isDark ? "text-white" : "text-red19"}
+              />
+            </div>
+          </div>
         </div>
         <div>
           <h1>aopdjsoqweqweqweqweqweWajsduh</h1>
@@ -117,7 +117,7 @@ export const ProductOverAll = ({
       <h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
         نسخه محصول را انتخاب کنید
       </h2>
-      
+
       <div className="w-full flex flex-row justify-between items-center mt-4">
         <Button
           onClick={() =>
@@ -146,7 +146,7 @@ export const ProductOverAll = ({
           width="65%"
           color="text-white"
         />
-        
+
       </div>
       <div className="w-full flex flex-row justify-between items-center mt-4">
         <Button
diff --git a/src/views/Products/index.js b/src/views/Products/index.js
index 63475e8..950f90d 100644
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@@ -33,6 +33,10 @@ export const Products = ({
   const onChange = (name, value) => {
     setFilter({ ...filter, [name]: value });
   };
+  const onchange1 = (name, value) =>{
+    console.log(name)
+    console.log(value)
+  }
 
   useEffect(() => {
     getList();
@@ -158,7 +162,7 @@ export const Products = ({
             className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
             // style={{ height: 1500 }}
           >
-            <Sidebar />
+            <Sidebar onChange={onChange}/>
             <Main />
           </div>
         )}
diff --git a/src/views/Products/layouts/Sidebar.js b/src/views/Products/layouts/Sidebar.js
index d85e5e2..2ba096b 100644
--- a/src/views/Products/layouts/Sidebar.js
+++ b/src/views/Products/layouts/Sidebar.js
@@ -3,12 +3,12 @@ import { connect } from "react-redux";
 import Checkbox from "../../../components/Checkbox";
 import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter";
 
-export const Sidebar = ({}) => {
+export const Sidebar = ({onChange}) => {
 
   const filteronGrade = [
     {
       id:0,
-      name: "پایه اول",
+      name: "اول",
       expaneded: false,
       subList: [{
         id:1,
@@ -17,7 +17,7 @@ export const Sidebar = ({}) => {
     },
     {
       id:1,
-      name: "پایه دوم",
+      name: "دوم",
       expaneded: false,
       subList: [{
         id:1,
@@ -26,7 +26,7 @@ export const Sidebar = ({}) => {
     },
     {
       id:2,
-      name: "پایه سوم",
+      name: "سوم",
       expaneded: false,
       subList: [],
     },
@@ -59,7 +59,7 @@ export const Sidebar = ({}) => {
     },
   ]
   return <div className="flex flex-col w-1/4 p-4">
-          <VerticalExpandableProductFilter name="grades" btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
+          <VerticalExpandableProductFilter onChange={onChange} name="grade" preName='پایه' btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
           <VerticalExpandableProductFilter name="category"  list={categories} title="دسته بندی" searchAble={false}/>
           
   </div>;

From 9729e99d5e9ff30bbe598abd916e69cae2b92e5f Mon Sep 17 00:00:00 2001
From: Pedram Keshavarzi <pkpedram80@gmail.com>
Date: Tue, 25 Jan 2022 16:11:51 +0330
Subject: [PATCH 4/4] Add to Cart Card Made

---
 src/assets/icons/vuesax-linear-group.svg      | 15 ++++
 .../icons/vuesax-linear-shield-tick.svg       |  9 +++
 .../icons/vuesax-linear-tick-circle.svg       |  9 +++
 src/components/AddToCart/index.js             | 51 +++++++++++++
 src/components/Checkbox/index.js              |  2 +-
 .../VerticalExpandableProductFilter/index.js  |  4 +-
 .../Product/Desktop/ProductOverAll/index.js   | 75 ++++++++++++-------
 tailwind.config.js                            |  1 +
 8 files changed, 134 insertions(+), 32 deletions(-)
 create mode 100644 src/assets/icons/vuesax-linear-group.svg
 create mode 100644 src/assets/icons/vuesax-linear-shield-tick.svg
 create mode 100644 src/assets/icons/vuesax-linear-tick-circle.svg
 create mode 100644 src/components/AddToCart/index.js

diff --git a/src/assets/icons/vuesax-linear-group.svg b/src/assets/icons/vuesax-linear-group.svg
new file mode 100644
index 0000000..efee704
--- /dev/null
+++ b/src/assets/icons/vuesax-linear-group.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.544" height="35.544" viewBox="0 0 35.544 35.544">
+  <g id="vuesax_linear_group" data-name="vuesax/linear/group" transform="translate(0 0)">
+    <g id="group" transform="translate(0 0)">
+      <path id="Vector" d="M14.055,17.772h1.481A2.971,2.971,0,0,0,18.5,14.81V0H5.169A5.918,5.918,0,0,0,0,3.036" transform="translate(3.717 2.962)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,17.772a4.437,4.437,0,0,0,4.443,4.443H5.924a2.962,2.962,0,1,1,5.924,0h5.924a2.962,2.962,0,1,1,5.924,0h1.481a4.437,4.437,0,0,0,4.443-4.443V13.329H25.177A1.485,1.485,0,0,1,23.7,11.848V7.4a1.485,1.485,0,0,1,1.481-1.481h1.91L24.555,1.5A2.986,2.986,0,0,0,21.978,0H19.253V10.367a2.971,2.971,0,0,1-2.962,2.962H14.81" transform="translate(2.962 7.405)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M5.924,2.962A2.962,2.962,0,1,1,2.962,0,2.962,2.962,0,0,1,5.924,2.962Z" transform="translate(8.886 26.658)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-4" data-name="Vector" d="M5.924,2.962A2.962,2.962,0,1,1,2.962,0,2.962,2.962,0,0,1,5.924,2.962Z" transform="translate(20.734 26.658)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-5" data-name="Vector" d="M5.924,4.443V7.4H1.481A1.485,1.485,0,0,1,0,5.924V1.481A1.485,1.485,0,0,1,1.481,0h1.91Z" transform="translate(26.658 13.329)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-6" data-name="Vector" d="M0,0H8.886" transform="translate(2.962 11.848)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-7" data-name="Vector" d="M0,0H5.924" transform="translate(2.962 16.291)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-8" data-name="Vector" d="M0,0H2.962" transform="translate(2.962 20.734)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-9" data-name="Vector" d="M0,0H35.544V35.544H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/icons/vuesax-linear-shield-tick.svg b/src/assets/icons/vuesax-linear-shield-tick.svg
new file mode 100644
index 0000000..f897d79
--- /dev/null
+++ b/src/assets/icons/vuesax-linear-shield-tick.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.994" height="35.994" viewBox="0 0 35.994 35.994">
+  <g id="vuesax_linear_shield-tick" data-name="vuesax/linear/shield-tick" transform="translate(0 0)">
+    <g id="shield-tick" transform="translate(0 0)">
+      <path id="Vector" d="M10.618.349,3.134,3.168A5.2,5.2,0,0,0,0,7.682V18.825a7.291,7.291,0,0,0,2.595,5.159L9.043,28.8a6.826,6.826,0,0,0,7.709,0L23.2,23.985A7.291,7.291,0,0,0,25.8,18.825V7.682a5.207,5.207,0,0,0-3.134-4.529L15.177.349A7.626,7.626,0,0,0,10.618.349Z" transform="translate(5.114 2.996)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M0,4.034,2.415,6.449,8.863,0" transform="translate(13.573 13.768)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H35.994V35.994H0Z" transform="translate(35.994 35.994) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/icons/vuesax-linear-tick-circle.svg b/src/assets/icons/vuesax-linear-tick-circle.svg
new file mode 100644
index 0000000..2f17e2a
--- /dev/null
+++ b/src/assets/icons/vuesax-linear-tick-circle.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.085" height="38.085" viewBox="0 0 38.085 38.085">
+  <g id="vuesax_linear_tick-circle" data-name="vuesax/linear/tick-circle" transform="translate(0 0)">
+    <g id="tick-circle" transform="translate(0 0)">
+      <path id="Vector" d="M15.869,31.738A15.869,15.869,0,1,0,0,15.869,15.915,15.915,0,0,0,15.869,31.738Z" transform="translate(3.174 3.174)" fill="#42e337" stroke="#9eff97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M0,4.491,4.491,8.982l9-8.982" transform="translate(12.298 14.552)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H38.085V38.085H0Z" fill="#afe7ab" opacity="0"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/AddToCart/index.js b/src/components/AddToCart/index.js
new file mode 100644
index 0000000..14c83bf
--- /dev/null
+++ b/src/components/AddToCart/index.js
@@ -0,0 +1,51 @@
+import React from "react";
+
+import circleTick from '../../assets/icons/vuesax-linear-tick-circle.svg';
+import shieldTick from '../../assets/icons/vuesax-linear-shield-tick.svg';
+import linearGroup from '../../assets/icons/vuesax-linear-group.svg';
+
+
+
+const AddToCartCard = ({
+    numberOfSuggest,
+    sendingTime,
+    button,
+    price,
+    profit
+}) =>{
+    const specialities = [
+        {
+            icon: circleTick,
+            description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
+        },
+        {
+            icon: linearGroup,
+            description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
+        },
+        {
+            icon: shieldTick,
+            description: `گارانتی اصالت و سلامت فیزیکی`,
+        }
+    ];
+    return(
+        <div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center">
+            {specialities.map((item, index) => (
+                <div className="flex items-center  p-2 w-full border-0 border-b border-solid border-gray-300">
+                    {item.icon && <img src={item.icon} className="pl-3" />}
+                    <p className="text-sm text-blue52 text-right">{item.description}</p>
+                    </div>
+            ))}
+            <div className="w-full flex flex-col items-center justify-center p-4">
+                <h1 className="text-xl text-gray-500">
+                    <span className=" text-blueC0"> {price} </span> 
+                      تومان </h1>
+                    { profit && <h5 className="text-xs p-2 pb-0 text-blue52">با خرید این کالا {profit} تومان سود کنید</h5>}
+            </div>
+            <div className="w-full flex justify-center">
+                {button}
+            </div>
+        </div>
+    );
+};
+
+export default AddToCartCard;
\ No newline at end of file
diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
index 42b9264..38d5dd1 100644
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@@ -17,7 +17,7 @@ export default function Checkbox(props) {
       </svg>
 
       <div className="checkbox-container">
-        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick}/>
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} onChange={props.onChange}/>
         <label className="checkbox" htmlFor={"ch"+props.name}>
           <span>
             <svg width="12px" height="10px">
diff --git a/src/components/VerticalExpandableProductFilter/index.js b/src/components/VerticalExpandableProductFilter/index.js
index b4b9047..7f583a8 100644
--- a/src/components/VerticalExpandableProductFilter/index.js
+++ b/src/components/VerticalExpandableProductFilter/index.js
@@ -66,9 +66,9 @@ export default function VerticalExpandableProductFilter(props) {
                 <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
                   checkedBox[i] = !checkedBox[i]
                   setChecked(checkedBox)
-                  props.onChange(name , item1.name);
                   
-                }} />
+                  
+                }} onChange={() => props.onChange(name , item1.name)} />
                 <strong className="text-xs font-light text-gray-500">
                   {props.preName ? props.preName + ' ' + item1.name : item1.name}
                 </strong>
diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js
index d17451c..c3e7c7d 100644
--- a/src/views/Product/Desktop/ProductOverAll/index.js
+++ b/src/views/Product/Desktop/ProductOverAll/index.js
@@ -9,6 +9,7 @@ import Header from "../../../../components/Header";
 import Comment from "../../Comment";
 import Rate from "../../Rate";
 import StarRating from "../../../../components/StarRating";
+import AddToCartCard from "../../../../components/AddToCart";
 
 export const ProductOverAll = ({
   productType,
@@ -94,9 +95,52 @@ export const ProductOverAll = ({
               />
             </div>
           </div>
+          <div className="flex justify-center py-6">
+            <Button
+              title="مشاهده دوره ویدیویی این محصول       >"
+              backgroundColor={isDark ? "bg-transparent" : "bg-blueC0'"}
+              border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "2px" }}
+              color={isDark ? "text-white" : "text-blue52"}
+              
+              selectable={true}
+              onClick={() => setType("physical")}
+              
+              customStyle='bg-black bg-opacity-10'
+              twPaddings='py-4 px-32'
+              radius={false}
+              />
+          </div>
         </div>
         <div>
-          <h1>aopdjsoqweqweqweqweqweWajsduh</h1>
+          <AddToCartCard 
+          price={type === "digital" ? book?.product[0]?.price : book?.product[1]?.price}
+          sendingTime={20}
+          numberOfSuggest={160}
+          profit={12000}
+          button={
+            <Button
+            onClick={() =>
+              proxy.status()
+                ? pushToCart({
+                  productId:
+                    type === "digital"
+                      ? book?.product[0]?.id
+                      : book?.product[1]?.id,
+                  userId: userId,
+                  count: 1,
+                })
+                : toast.info("ابتدا وارد حساب کاربری خود شوید.")
+            }
+            title='افزودن به سبد خرید'
+            backgroundColor="bg-blueC0"
+            border={{ color: "#196EC055", width: "1px" }}
+            width="100%"
+            color="text-white"
+           twPaddings='py-4'
+          />
+          }
+
+          />
         </div>
 
       </header>
@@ -119,34 +163,7 @@ export const ProductOverAll = ({
       </h2>
 
       <div className="w-full flex flex-row justify-between items-center mt-4">
-        <Button
-          onClick={() =>
-            proxy.status()
-              ? pushToCart({
-                productId:
-                  type === "digital"
-                    ? book?.product[0]?.id
-                    : book?.product[1]?.id,
-                userId: userId,
-                count: 1,
-              })
-              : toast.info("ابتدا وارد حساب کاربری خود شوید.")
-          }
-          title={
-            "خرید با قیمت" +
-            " " +
-            (type === "digital"
-              ? book?.product[0]?.price
-              : book?.product[1]?.price) +
-            " " +
-            "تومان"
-          }
-          backgroundColor="bg-blueC0"
-          border={{ color: "#196EC055", width: "1px" }}
-          width="65%"
-          color="text-white"
-        />
-
+        
       </div>
       <div className="w-full flex flex-row justify-between items-center mt-4">
         <Button
diff --git a/tailwind.config.js b/tailwind.config.js
index 7682517..0c6284b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,7 @@ module.exports = {
       grayEE: "#EEEEEE",
       grayF9: "#F9F9F9",
       grayF4: "#EBF0F4",
+      grayF7: "#F7F7F7"
     }),
     textColor: (theme) => ({
       ...theme("colors"),