reza added some thing

src/AppRouter.js

@@ -35,18 +35,18 @@ class AppRouter extends Component {
   state = {};
 
   componentDidMount() {
-    if (this.props.profile) {
+    // if (this.props.profile) {
-      return;
+    //   return;
-    } else {
+    // } else {
-      this.props.getProfile();
+    //   this.props.getProfile();
-    }
+    // }
   }
 
   render() {
     let home = (
       <Route exact path={"/"}>
         {proxy.status() ? (
-          this.props.profile ? (
+          this.props.profile.status ? (
             <Home />
           ) : (
             <Auth page={"profile"} />
@@ -84,48 +84,16 @@ class AppRouter extends Component {
             )}
           </Route>
           <Route exact path={"/about"}>
-            {proxy.status() ? (
+            <About />
-              <About />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
           <Route exact path={"/products"}>
-            {proxy.status() ? (
+            <Products />
-              <Products />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
           <Route exact path={"/products/:id"}>
-            {proxy.status() ? (
+            <Product />
-              <Product />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
           <Route exact path={"/qr"}>
-            {proxy.status() ? (
+            <QR />
-              <QR />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
           <Route exact path={"/auth"}>
             <Auth />
@@ -134,60 +102,20 @@ class AppRouter extends Component {
             <Auth page={"profile"} />
           </Route>
           <Route exact path={"/qr-scan"}>
-            {proxy.status() ? (
+            <QRScan />
-              <QRScan />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
 
           <Route exact path={"/activation"}>
-            {proxy.status() ? (
+            <Activation />
-              <Activation />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
           <Route exact path={"/chatroom"}>
-            {proxy.status() ? (
+            <ChatList />
-              <Chatroom />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
           <Route exact path={"/cart"}>
-            {proxy.status() ? (
+            <Cart />
-              <Cart />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
           <Route exact path={"/mybooks"}>
-            {proxy.status() ? (
+            <MyBooks />
-              <MyBooks />
-            ) : (
-              <Redirect
-                to={{
-                  pathname: "/auth",
-                }}
-              />
-            )}
           </Route>
           <Route exact path={"/ar"}>
             {proxy.status() ? (
@@ -214,7 +142,7 @@ class AppRouter extends Component {
             </Route>
           ) : null}
           <Route path={""}>
-            {proxy.status() ? (
+            {proxy.status ? (
               <Redirect
                 to={{
                   pathname: "/qr",

src/Redux/actions/index.js

@@ -6,3 +6,4 @@ export { default as chat } from "./chat.js";
 export { default as user } from "./user.js";
 export { default as qr } from "./qr.js";
 export { default as book } from "./book.js";
+export { default as userProduct } from "./userProduct.js";

src/Redux/actions/userProduct.js

@@ -0,0 +1,31 @@
+import proxy from "../proxy";
+const userProduct = {
+  list:
+    (data = {}) =>
+    async (dispatch) =>
+      await proxy.get("userProduct/list", data, { dispatch }),
+  info:
+    (data = {}) =>
+    async (dispatch) =>
+      await proxy.get("userProduct/info", data, { dispatch }),
+  update:
+    (data = {}, data2 = {}) =>
+    async (dispatch) => {
+      await proxy.put("userProduct/update", data);
+      await proxy.get("userProduct/list", data2, { dispatch });
+    },
+  add:
+    (data = {}, data2 = {}) =>
+    async (dispatch) => {
+      await proxy.post("userProduct/add", data);
+      await proxy.get("userProduct/list", data2, { dispatch });
+    },
+  del:
+    (data = {}, data2 = {}) =>
+    async (dispatch) => {
+      await proxy.delete("userProduct/delete", data);
+      await proxy.get("userProduct/list", data2, { dispatch });
+    },
+};
+
+export default userProduct;

src/Redux/proxy.js

@@ -93,7 +93,8 @@ class Proxy {
       localStorage.removeItem("userData");
       return false;
     }
-    return JSON.parse(userData);
+    let fakeUserData = JSON.parse(userData);
+    return fakeUserData.profile;
   };
 }
 const _proxy = new Proxy();

src/Redux/reducers/index.js

@@ -6,3 +6,4 @@ export { default as public } from "./public.js";
 export { default as user } from "./user.js";
 export { default as qr } from "./qr.js";
 export { default as book } from "./book.js";
+export { default as userProduct } from "./userProduct.js";

src/Redux/reducers/user.js

@@ -1,7 +1,7 @@
 import proxy from "../proxy";
 import { ToastContainer, toast } from "react-toastify";
 const initialState = {
-  status: null,
+  status: proxy.status(),
   loading: false,
   error: null,
   list: null,

src/Redux/reducers/userProduct.js

@@ -0,0 +1,28 @@
+const initialState = {
+  loading: false,
+  error: null,
+  list: null,
+  info: null,
+};
+export default function userProduct(state = initialState, action) {
+  let { type, data } = action;
+  switch (type) {
+    case "userProduct/list":
+      return { ...state, loading: false, list: data, error: null };
+    case "userProduct/info":
+      return { ...state, loading: false, list: null, info: data, error: null };
+    case "userProduct/update":
+      return { ...state, loading: false, error: null };
+    case "userProduct/add":
+      return { ...state, loading: false, error: null };
+    case "userProduct/delete":
+      return { ...state, loading: false, error: null };
+    /////////////
+    case "loading":
+      return { ...state, loading: true };
+    case "error":
+      return { ...state, loading: false, error: data.message };
+    default:
+      return state;
+  }
+}

src/views/AR/Item/index.js

@@ -25,7 +25,7 @@ export default class Item extends Component {
       <>
         {window.innerWidth < 1000 ? (
           <article className="mobile-ar-book d-flex flex-column">
-            <a href={`https://ar.dnvn.ir/lunch?id=${data.id}`}>
+            <a href={`https://ar.dnvn.ir/lunch?id=${data.id}`} target="_blank">
               <img src={data.imageUrl} alt={data.title} />
               <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
             </a>

src/views/About/mobin.js

@@ -0,0 +1,820 @@
+//about
+let aboutData = {
+  fury: {
+    title: "ماموریت ما در دانوین",
+    text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت",
+  },
+  keywords: {
+    title: "کلمات کلیدی ماموریت",
+    list: [
+      "کیفیت آموزش",
+      "جذابیت",
+      "سازگار با نظام آموزش و پرورش",
+      "در راستای نیل به سند تحول",
+    ],
+  },
+  advantages: {
+    title: "مزیت رقابت اصلی",
+    list: [
+      "بکارگیری بروزترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)",
+      "دارای رویکرد آموزش سرگرم کننده",
+      "بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی",
+      "رویکرد معرفتی - ارزشی",
+      "ویدیوهای منحصر بفرد",
+      "متن گفتگو محور - روایی- قابل فهم - جذاب و سرگرم کننده",
+    ],
+  },
+};
+
+//ar, images => http://localhost:3000/ar
+arData = [
+  {
+    id: 222,
+    title: "دانوین زیست دهم",
+    imageUrl: zist_10,
+  },
+  {
+    id: 223,
+    title: "دانوین شیمی نهم",
+    imageUrl: chemistry_10,
+  },
+  {
+    id: 225,
+    title: "دانوین علوم نهم",
+    imageUrl: sciense_6,
+  },
+  {
+    id: 226,
+    title: "دانوین علوم هشتم",
+    imageUrl: sciense_8,
+  },
+  {
+    id: 227,
+    title: "دانوین علوم هفتم",
+    imageUrl: sciense_7,
+  },
+  {
+    id: 228,
+    title: "دانوین علوم ششم",
+    imageUrl: sciense_6,
+  },
+];
+
+//cart
+deliveryMethods = [
+  {
+    name: "ارسال با پست پیشتاز",
+    price: 36.891,
+  },
+  {
+    name: "ارسال با پیک موتوری",
+    price: 36.891,
+  },
+];
+
+//contact
+let contactData = {
+  address: "fdsfds",
+  cellphone: "32432",
+  email: "fsdafs",
+};
+
+//faq
+let messages = [
+  {
+    id: 0,
+    title: "چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟",
+    description:
+      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+    active: false,
+  },
+  {
+    id: 1,
+    title: "نحوه سفارش برای خارج از کشور چگونه است؟",
+    description:
+      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+    active: false,
+  },
+  {
+    id: 2,
+    title: "آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟",
+    description:
+      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+    active: false,
+  },
+  {
+    id: 3,
+    title: "در صورت فراموشی رمزعبور باید چکار کنیم؟",
+    description:
+      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+    active: false,
+  },
+  {
+    id: 4,
+    title: "امکان بازگشت وجه تا چند روز ممکن است؟",
+    description:
+      "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+    active: false,
+  },
+];
+
+//home
+let mobileData = [
+  {
+    type: "slider",
+    title: "",
+    height: window.innerWidth > 1000 ? 370 : 203,
+    design: "header",
+    number: 1,
+    data: [
+      {
+        id: 0,
+        image: pic1,
+        width: "100%",
+        backgroundColor: "rgba(18, 159, 253,0.6)",
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+        link: "",
+        buttonText: "اطلاعات بیشتر",
+      },
+      {
+        id: 1,
+        image: pic1,
+        width: "100%",
+        backgroundColor: "rgba(18, 159, 253,0.6)",
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+        link: "",
+        buttonText: "اطلاعات بیشتر",
+      },
+      {
+        id: 2,
+        image: pic1,
+        width: "100%",
+        backgroundColor: "rgba(18, 159, 253,0.6)",
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+        link: "",
+        buttonText: "اطلاعات بیشتر",
+      },
+    ],
+  },
+  {
+    type: "static",
+    title: "",
+    height: 160,
+    data: [
+      {
+        id: 0,
+        imageUrl: qr,
+        backgroundColor: {
+          first: "#2070CBED",
+          second: "#2070CBED",
+          angle: "180deg",
+        },
+        design: "flex",
+        title: "QR خوان",
+        subTitle: "در صفحات کتاب هوشمند",
+        link: "/qr-scan",
+        badge: "",
+        flex: 1,
+        fontSize: "large",
+        color: "white",
+      },
+      {
+        id: 1,
+        imageUrl: home_ar,
+        backgroundColor: {
+          first: "#09DA76",
+          second: "#056D3B",
+          angle: "230deg",
+        },
+        design: "flex",
+        title: "واقعیت افزوده",
+        subTitle: "توضیحات مختصر در این رابطه",
+        link: "/ar",
+        badge: "",
+        flex: 1,
+        fontSize: "large",
+        color: "white",
+      },
+    ],
+  },
+  {
+    type: "static",
+    title: "",
+    height: 160,
+    data: [
+      {
+        id: 0,
+        imageUrl: home_chat,
+        backgroundColor: {
+          first: "#0AB81B",
+          second: "#6CFF61",
+          angle: "110deg",
+        },
+        design: "flex",
+        title: "دانوینی ها",
+        subTitle: "",
+        link: "/chatroom",
+        badge: "5 پیام جدید",
+        flex: 1.6,
+        fontSize: "normal",
+        color: "white",
+      },
+      {
+        id: 1,
+        imageUrl: myBook,
+        backgroundColor: {
+          first: "#9446FCaa",
+          second: "#9446FCaa",
+          angle: "180deg",
+        },
+        design: "simple",
+        title: "کتابهای من",
+        subTitle: "",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        link: "/mybooks",
+        badge: "",
+        flex: 1,
+        fontSize: "large",
+        color: "white",
+      },
+    ],
+  },
+  {
+    type: "static",
+    title: "",
+    height: 160,
+    data: [
+      {
+        id: 0,
+        imageUrl: homeBlog,
+        backgroundColor: {
+          first: "#39BF55",
+          second: "#39BF4B55",
+          angle: "110deg",
+        },
+        design: "simple",
+        title: "بلاگ",
+        subTitle: "",
+        justifyContent: "center",
+        alignItems: "center",
+        link: "/blog",
+        badge: "",
+        flex: 1.2,
+        fontSize: "normal",
+        color: "white",
+      },
+      {
+        id: 1,
+        backgroundColor: {
+          first: "#5DBEFF",
+          second: "#0483D9",
+          angle: "180deg",
+        },
+        design: "vitrin",
+        title: "فروشگاه",
+        subTitle: "",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        books: [
+          { id: 0, imageUrl: sciense_6 },
+          { id: 1, imageUrl: chemistry_10 },
+          { id: 2, imageUrl: sciense_8 },
+        ],
+        link: "/products",
+        badge: "",
+        flex: 2,
+        fontSize: "large",
+        color: "white",
+      },
+    ],
+  },
+
+  {
+    type: "static",
+    title: "",
+    data: [
+      {
+        id: 0,
+        design: "3d",
+        flex: 1,
+        subData: [
+          {
+            id: 0,
+            imageUrl: "",
+            backgroundColor: {
+              first: "#FC365F",
+              second: "#7E1B30",
+              angle: "254deg",
+            },
+            design: "simple",
+            title: "پیشتیبانی",
+            subTitle: "",
+            justifyContent: "center",
+            alignItems: "center",
+            link: "/contact",
+            badge: "",
+            flex: 1,
+            fontSize: "normal",
+            color: "white",
+          },
+          {
+            id: 1,
+            imageUrl: "",
+            backgroundColor: {
+              first: "#FFCC00",
+              second: "#FF9800",
+              angle: "105deg",
+            },
+            design: "simple",
+            title: "پروفایل",
+            subTitle: "",
+            justifyContent: "center",
+            alignItems: "center",
+            link: "/profile",
+            badge: "",
+            flex: 1,
+            fontSize: "normal",
+            color: "white",
+          },
+        ],
+      },
+      {
+        id: 1,
+        imageUrl: bookActivation,
+        backgroundColor: {
+          first: "#03FCDA7F",
+          second: "#03FCDA7F",
+          angle: "180deg",
+        },
+        design: "simple",
+        title: "فعال سازی کتاب",
+        subTitle: "",
+        justifyContent: "center",
+        alignItems: "center",
+        link: "/activation",
+        badge: "",
+        flex: 1,
+        fontSize: "large",
+        color: "white",
+      },
+    ],
+  },
+];
+
+let homeData = [
+  {
+    type: "slider",
+    title: "",
+    height: window.innerWidth > 1000 ? 370 : 233,
+    design: "header",
+    number: 1,
+    data: [
+      {
+        id: 0,
+        image: pic1,
+        width: "100%",
+        backgroundColor: "rgba(18, 159, 253,0.6)",
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+        link: "",
+        buttonText: "اطلاعات بیشتر",
+      },
+      {
+        id: 1,
+        image: pic1,
+        width: "100%",
+        backgroundColor: "rgba(18, 159, 253,0.6)",
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+        link: "",
+        buttonText: "اطلاعات بیشتر",
+      },
+      {
+        id: 2,
+        image: pic1,
+        width: "100%",
+        backgroundColor: "rgba(18, 159, 253,0.6)",
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
+        link: "",
+        buttonText: "اطلاعات بیشتر",
+      },
+    ],
+  },
+  {
+    type: window.innerWidth > 1000 ? "" : "static",
+    title: "",
+    height: 150,
+    data: [
+      {
+        image: qr,
+        width: 48,
+        link: "",
+        topText: "QR خوان",
+        bottomText: "توضیحات مختصر در این رابطه",
+      },
+      {
+        image: ar,
+        width: 48,
+        link: "",
+        topText: "واقعیت افزوده",
+        bottomText: "توضیحات مختصر در این رابطه",
+      },
+    ],
+  },
+  {
+    type: window.innerWidth > 1000 ? "static" : "",
+    title: "",
+    height: 150,
+    data: [
+      {
+        image: online,
+        width: 24,
+        link: "",
+        topText: "دسترسی به محتوای آموزشی",
+        bottomText: "از تمامی دستگاهها",
+      },
+      {
+        image: chemistry,
+        width: 24,
+        link: "",
+        topText: " به صورت زنده و جالب انگیز",
+        bottomText: "آزمایش انجام دهید",
+      },
+      {
+        image: calculator,
+        width: 24,
+        link: "",
+        topText: "به صرفه تر هزینه کنید",
+        bottomText: "با خرید یکی دوتا ببرید",
+      },
+      {
+        image: homework,
+        width: 24,
+        link: "",
+        topText: "به صورت کاملا تعاملی",
+        bottomText: "درسهای خود را یاد بگیرید",
+      },
+    ],
+  },
+  {
+    type: "search",
+    data: ["همه", "پرفروش"],
+  },
+  {
+    type: window.innerWidth > 1000 ? "slider" : "scroll",
+    title: "کتاب‌های من",
+    moreText: "لیست کتاب‌ها",
+    height: window.innerWidth > 1000 ? 340 : 270,
+    design: window.innerWidth > 1000 ? "simple" : "myProduct",
+    number: window.innerWidth > 1000 ? 4 : 2.8,
+    data: [
+      {
+        id: 0,
+        image: sciense_6,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+      },
+      {
+        id: 1,
+        image: chemistry_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+      },
+      {
+        id: 2,
+        image: sciense_8,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+      },
+      {
+        id: 3,
+        image: sciense_9,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+      },
+      {
+        id: 4,
+        image: zist_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه هفتم ابتدایی",
+      },
+      {
+        id: 5,
+        image: sciense_6,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+      },
+      {
+        id: 6,
+        image: chemistry_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+      },
+      {
+        id: 7,
+        image: sciense_8,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+      },
+      {
+        id: 8,
+        image: sciense_9,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+      },
+      {
+        id: 9,
+        image: zist_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه هفتم ابتدایی",
+      },
+    ],
+  },
+  {
+    type: window.innerWidth < 1000 ? "scroll" : "",
+    title: "موضوعات",
+    moreText: "تمام موضوعات",
+    design: "subjects",
+    number: 4,
+    data: [
+      { id: 0, name: "علوم طبیعی", backgroundColor: "yellow" },
+      { id: 1, name: "شیمی الی", backgroundColor: "red" },
+      { id: 2, name: "زمین شناسی", backgroundColor: "blue" },
+      { id: 3, name: "ریاضیات", backgroundColor: "purple" },
+    ],
+  },
+  {
+    type: window.innerWidth > 1000 ? "slider" : "scroll",
+    title: "پرفروش‌ترین کتاب‌های دانوین",
+    moreText: "لیست کتاب‌ها",
+    height: window.innerWidth > 1000 ? 420 : 320,
+    design: window.innerWidth > 1000 ? "simple" : "product",
+    number: window.innerWidth > 1000 ? 4 : 2.8,
+    data: [
+      {
+        id: 0,
+        image: sciense_6,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+        price: "78.000",
+        oldPrice: "",
+        date: new Date(),
+      },
+      {
+        id: 1,
+        image: chemistry_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+        price: "39.000",
+        oldPrice: "59.000",
+        date: new Date(),
+      },
+      {
+        id: 2,
+        image: sciense_8,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+        price: "21.000",
+        oldPrice: "",
+      },
+      {
+        id: 3,
+        image: sciense_9,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+        price: "",
+        oldPrice: "",
+      },
+      {
+        id: 4,
+        image: zist_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه هفتم ابتدایی",
+        price: "59.000",
+        oldPrice: "",
+      },
+      {
+        id: 5,
+        image: sciense_6,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+        price: "78.000",
+        oldPrice: "",
+        date: new Date(),
+      },
+      {
+        id: 6,
+        image: chemistry_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+        price: "39.000",
+        oldPrice: "59.000",
+        date: new Date(),
+      },
+      {
+        id: 7,
+        image: sciense_8,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+        price: "21.000",
+        oldPrice: "",
+        date: new Date(),
+      },
+      {
+        id: 8,
+        image: sciense_9,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+        price: "",
+        oldPrice: "",
+        date: new Date(),
+      },
+      {
+        id: 9,
+        image: zist_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه هفتم ابتدایی",
+        price: "59.000",
+        oldPrice: "",
+        date: new Date(),
+      },
+    ],
+  },
+  {
+    type: window.innerWidth > 1000 ? "slider" : "scroll",
+    title: "جدیدترین کتاب‌های دانوین",
+    height: window.innerWidth > 1000 ? 420 : 320,
+    design: window.innerWidth > 1000 ? "tab" : "product",
+    number: window.innerWidth > 1000 ? 4 : 3.5,
+    moreText: "لیست کتاب‌ها",
+    data: [
+      {
+        id: 0,
+        image: sciense_6,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+        price: "78.000",
+        oldPrice: "",
+        date: new Date(),
+      },
+      {
+        id: 1,
+        image: chemistry_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+        price: "39.000",
+        oldPrice: "59.000",
+        date: new Date(),
+      },
+      {
+        id: 2,
+        image: sciense_8,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+        price: "21.000",
+        oldPrice: "",
+      },
+      {
+        id: 3,
+        image: sciense_9,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+        price: "",
+        oldPrice: "",
+      },
+      {
+        id: 4,
+        image: zist_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه هفتم ابتدایی",
+        price: "59.000",
+        oldPrice: "",
+      },
+      {
+        id: 5,
+        image: sciense_6,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+        price: "78.000",
+        oldPrice: "",
+        date: new Date(),
+      },
+      {
+        id: 6,
+        image: chemistry_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+        price: "39.000",
+        oldPrice: "59.000",
+        date: new Date(),
+      },
+      {
+        id: 7,
+        image: sciense_8,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه ششم ابتدایی",
+        price: "21.000",
+        oldPrice: "",
+        date: new Date(),
+      },
+      {
+        id: 8,
+        image: sciense_9,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه دهم ابتدایی",
+        price: "",
+        oldPrice: "",
+        date: new Date(),
+      },
+      {
+        id: 9,
+        image: zist_10,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle: "پایه هفتم ابتدایی",
+        price: "59.000",
+        oldPrice: "",
+        date: new Date(),
+      },
+    ],
+  },
+  {
+    type: "singleBlog",
+    height: 350,
+    direction: "rtl",
+    data: {
+      id: 0,
+      image: pic,
+      video: null,
+      title: "منفجر کردن مغز خود را به ما بسپارید",
+      subTitle:
+        "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
+      link: "",
+      buttonText: "اطلاعات بیشتر",
+    },
+  },
+  {
+    type: "slider",
+    title: "بلاگ",
+    height: "",
+    design: "blog",
+    number: window.innerWidth > 1000 ? 3 : 2,
+    data: [
+      {
+        id: 0,
+        image: blog1,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
+        date: new Date(),
+        link: "",
+        buttonText: "ادامه مطلب",
+        category: { name: "علمی تخیلی", color: "red" },
+        duration: "۲۰ دقیقه",
+      },
+      {
+        id: 1,
+        image: blog2,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
+        date: new Date(),
+        link: "",
+        buttonText: "ادامه مطلب",
+        category: { name: "تاریخی", color: "blue" },
+        duration: "۲۰ دقیقه",
+      },
+      {
+        id: 2,
+        image: blog3,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
+        link: "",
+        buttonText: "ادامه مطلب",
+        category: { name: "ورزشی", color: "green" },
+        duration: "۲۰ دقیقه",
+      },
+      {
+        id: 3,
+        image: pic,
+        title: "منفجر کردن مغز خود را به ما بسپارید",
+        subTitle:
+          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
+        link: "",
+        buttonText: "ادامه مطلب",
+        category: { name: "سیاسی", color: "purple" },
+        duration: "۲۰ دقیقه",
+      },
+    ],
+  },
+  {
+    type: "membership",
+  },
+];
+
+//product

src/views/About/reza.js

@@ -0,0 +1,4 @@
+//comment modal
+//comment for book or bookPage
+//user can edit self comment
+//trophy

src/views/Activation/index.js

@@ -11,6 +11,7 @@ import danger from "../../assets/icons/danger.svg";
 import "./index.scss";
 
 const maxDesktopSize = 1250;
+const maxMobileSize = 550;
 
 const fontSize = {
   desktop: {
@@ -20,6 +21,12 @@ const fontSize = {
     span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
     form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
   },
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15,
+    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
+    form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 24,
+    span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 25,
+  },
 };
 
 export default class Activation extends Component {
@@ -88,16 +95,23 @@ export default class Activation extends Component {
         {window.innerWidth < 1000 ? (
           <div className="mobile-activation d-flex flex-column align-items-center">
             <Navbar />
-            <div className="mobile-activation__back d-flex">
+            <div
-              <Link to="/">بازگشت</Link>
+              style={{ fontSize: fontSize.mobile.span }}
+              className="mobile-activation__back d-flex"
+            >
+              <Link to="/" style={{ fontSize: fontSize.mobile.span }}>
+                بازگشت
+              </Link>
             </div>
             <header className="mobile-activation__header d-flex flex-column align-items-center">
               <img src={analytics} alt="فعال سازی کتاب" />
-              <h1>فعال سازی کتاب الکترونیک</h1>
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>
+                فعال سازی کتاب الکترونیک
+              </h1>
             </header>
             <div className="mobile-activation__description d-flex">
               <span>.</span>
-              <p>
+              <p style={{ fontSize: fontSize.mobile.p }}>
                 کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
                 وارد تا کتاب الکترونیک آن فعالسازی شود
               </p>
@@ -112,10 +126,14 @@ export default class Activation extends Component {
                 maxLength={9}
                 autoComplete="off"
                 onChange={(e) => this.setState({ code: e.target.value })}
+                placeholder={"FC5DFD : مثال"}
+                style={{ fontSize: fontSize.mobile.form }}
               />
-              <button type="submit">ثبت کد فعال سازی</button>
+              <button style={{ fontSize: fontSize.mobile.form }} type="submit">
+                ثبت کد فعال سازی
+              </button>
             </form>
-            <div className="mobile-activation__support d-flex align-center">
+            {/* <div className="mobile-activation__support d-flex align-center">
               <span>
                 <img src={danger} />
               </span>
@@ -123,13 +141,13 @@ export default class Activation extends Component {
                 کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
                 وارد تا کتاب الکترونیک آن فعالسازی شود
               </p>
-            </div>
+            </div> */}
-            <div className="mobile-activation__history d-flex flex-column">
+            {/* <div className="mobile-activation__history d-flex flex-column">
               <h2>آخرین مشاهدات</h2>
               {data.map((item, i) => (
                 <History data={item} key={i} />
               ))}
-            </div>
+            </div> */}
           </div>
         ) : null}
       </>

src/views/Activation/index.scss

@@ -1,214 +1,212 @@
-.mobile-activation{
+.mobile-activation {
   width: 100vw;
   max-width: 650px;
   margin: 0px auto;
-  padding : 0px 10px 40px;
+  padding: 0px 10px 40px;
   direction: rtl;
   padding-top: 70px;
   overflow-x: hidden;
-  &__back{
+  &__back {
     width: 100%;
-    justify-content:flex-end;
+    justify-content: flex-end;
-    a{
+    a {
       display: inline;
       font-family: numeralLight;
       text-decoration: none;
       padding: 5px 20px 3px;
-      background-color: #00CC69;
+      background-color: #00cc69;
       border-radius: 25px;
-      font-size: calc(100vw / 26);
       color: white;
-      &:focus:enabled{
+      &:focus:enabled {
         text-decoration: none;
       }
     }
   }
-  &__header{
+  &__header {
     margin-top: 30px;
-    h1{
+    h1 {
-      font-size: calc(100vw / 16);
       font-family: numeralBold;
       margin-top: 15px;
-      color: #00CC69;
+      color: #00cc69;
       letter-spacing: -2px;
     }
   }
-  &__description{
+  &__description {
     width: 100%;
     margin-top: 30px;
-    span{
+    span {
       font-size: 50px;
-      color: #00CC69;
+      color: #00cc69;
       margin-left: 10px;
       position: relative;
       bottom: 35px;
     }
-    p{
+    p {
-      font-size: calc(100vw / 30);
+      color: #6f7074;
-      color: #6F7074;
       font-family: numeralMedium;
     }
   }
-  &__form{
+  &__form {
     width: 100%;
+    padding: 0px 15px;
     font-family: numeralMedium;
-    input{
+    position: fixed;
+    bottom: 20px;
+    input {
       width: 100%;
-      background-color: #F6F6F6;
+      background-color: #f6f6f6;
-      color: #4D4D4F;
+      color: #4d4d4f;
       text-align: center;
       direction: ltr;
-      font-size: calc(100vw / 18);
       border: 0px;
       padding: 15px 0px;
       border-radius: 10px;
-      &:focus{
+      &:focus {
         outline: 0px;
       }
+      &::placeholder {
+        color: #afafaf;
+      }
     }
-    button{
+    button {
       display: inline;
       font-family: numeralLight;
       text-decoration: none;
       padding: 14px 20px 14px;
-      background-color: #00CC69;
+      background-color: #00cc69;
       border-radius: 10px;
-      font-size: calc(100vw / 18);
       color: white;
       border: 0px;
-      margin-top: 10px;
+      margin-top: 20px;
       letter-spacing: -1px;
-      &:focus:enabled{
+      &:focus:enabled {
         text-decoration: none;
       }
     }
-
   }
-  &__support{
+  &__support {
     width: 80%;
     margin-top: 30px;
-    span{
+    span {
-      color: #00CC69;
+      color: #00cc69;
       margin-left: 10px;
     }
-    p{
+    p {
       font-size: calc(100vw / 30);
-      color: #6F7074;
+      color: #6f7074;
       font-family: numeralMedium;
       text-align: center;
     }
   }
-  &__history{
+  &__history {
     width: 100%;
     margin: 30px 0px;
-    h2{
+    h2 {
       font-family: numeralBold;
-      color: #02A255;
+      color: #02a255;
       font-size: calc(100vw / 24);
       margin-bottom: 20px;
     }
   }
 }
 
-
+.activation {
-.activation{
   width: 100vw;
   max-width: 1250px;
   margin: 0px auto;
-  padding : 0px 10px 40px;
+  padding: 0px 10px 40px;
   direction: rtl;
   overflow-x: hidden;
-  &__header{
+  &__header {
     max-width: 900px;
     width: 100%;
     margin-top: 30px;
-    img{
+    img {
       width: 200px;
     }
-    h1{
+    h1 {
       font-family: numeralBold;
       margin-top: 15px;
-      color: #00CC69;
+      color: #00cc69;
       letter-spacing: -2px;
     }
   }
-  &__description{
+  &__description {
     width: 100%;
     margin-top: 30px;
     max-width: 900px;
-    span{
+    span {
       font-size: 50px;
-      color: #00CC69;
+      color: #00cc69;
       margin-left: 10px;
       position: relative;
       bottom: 42px;
     }
-    p{
+    p {
       font-size: calc(100vw / 30);
-      color: #6F7074;
+      color: #6f7074;
       font-family: numeralMedium;
     }
   }
-  &__form{
+  &__form {
     width: 100%;
     max-width: 900px;
     font-family: numeralMedium;
     justify-content: space-between;
-    input{
+    input {
       width: 70%;
-      background-color: #F6F6F6;
+      background-color: #f6f6f6;
-      color: #4D4D4F;
+      color: #4d4d4f;
       text-align: center;
       direction: ltr;
       border: 0px;
       height: 60px;
       border-radius: 10px;
-      &:focus{
+      &:focus {
         outline: 0px;
       }
     }
-    button{
+    button {
-      width : 25%;
+      width: 25%;
       height: 60px;
       display: inline;
       font-family: numeralLight;
       text-decoration: none;
       padding: 16px 20px 16px;
-      background-color: #00CC69;
+      background-color: #00cc69;
       border-radius: 10px;
       color: white;
       border: 0px;
       letter-spacing: -1px;
-      &:focus:enabled{
+      &:focus:enabled {
         text-decoration: none;
       }
     }
-
   }
-  &__support{
+  &__support {
     width: 100%;
     max-width: 900px;
     margin-top: 30px;
     align-items: center;
-    span{
+    span {
-      color: #00CC69;
+      color: #00cc69;
       margin-left: 10px;
     }
-    p{
+    p {
       color: #afafaf;
       font-family: numeralMedium;
       text-align: center;
       margin-bottom: 0px;
     }
   }
-  &__history{
+  &__history {
     width: 100%;
     max-width: 900px;
     margin: 50px 0px;
-    h2{
+    h2 {
       font-family: numeralBold;
-      color: #02A255;
+      color: #02a255;
       margin-bottom: 20px;
     }
   }
-}
+}

src/views/Auth/Profile/Birthdate/index.scss

@@ -10,7 +10,6 @@
     font-family: numeralLight;
   }
   span {
-    font-size: calc(100vw / 30);
     color: #bfbfbf;
   }
   input {
@@ -21,15 +20,37 @@
     width: 42px;
     text-align: center;
     direction: ltr;
-    font-size: calc(100vw / 26);
     &:focus {
       outline: 0px;
     }
     &::placeholder {
-      font-size: calc(100vw / 30);
       color: #bfbfbf;
     }
   }
+  @media screen and (max-width: 1000px) {
+    span {
+      font-size: 14px;
+    }
+    input {
+      font-size: 14px;
+
+      &::placeholder {
+        font-size: 15px;
+      }
+    }
+  }
+  @media screen and (max-width: 550px) {
+    span {
+      font-size: calc(100vw / 30);
+    }
+    input {
+      font-size: calc(100vw / 26);
+
+      &::placeholder {
+        font-size: calc(100vw / 30);
+      }
+    }
+  }
 }
 
 .birthdate {

src/views/Auth/Profile/Document/index.js

@@ -0,0 +1,92 @@
+import React from "react";
+import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop: {
+    span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
+  },
+  mobile: {
+    span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
+  },
+};
+
+export default function Document(props) {
+  const { parent, name } = props;
+  return (
+    <>
+      {window.innerWidth < 1000 ? (
+        <div className="mobile-auth-profile__document d-flex justify-content-center align-items-center mb-3">
+          {parent.state.docFileIds === "" ? (
+            <>
+              <input
+                type="file"
+                // parent.onChange(e.target.name, e.target.value)
+                name={name}
+                onChange={(e) =>
+                  parent.onChange(e.target.name, e.target.files[0])
+                }
+              />
+              <span style={{ fontSize: fontSize.mobile.span }}>
+                گواهی تدریس خود را آپلود کنید.
+              </span>
+            </>
+          ) : (
+            <>
+              <input
+                type="file"
+                name="file"
+                onChange={(e) =>
+                  parent.onChange(e.target.name, e.target.files[0])
+                }
+              />
+              <span style={{ color: "rgb(18,140,126)" }}>
+                {parent.state.docFileIds.name}
+              </span>
+              {/* <img src={parent.state.file} alt={"کاربر"} /> */}
+            </>
+          )}
+        </div>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <div className="auth-profile__upload d-flex justify-content-center-align-items-center">
+          {parent.state.file === null ? (
+            <>
+              <input
+                label={props.label}
+                onChange={(e) => parent.onChange(e.target.name, e.target.value)}
+                name={props.name}
+                defaultValue=""
+                type="file"
+              />
+              <AddAPhotoIcon
+                style={{
+                  width: 40,
+                  height: 40,
+                  color: "grey",
+                  position: "absolute",
+                  left: "calc(50% - 20px)",
+                  top: "calc(50% - 20px)",
+                }}
+              />
+            </>
+          ) : (
+            <>
+              <input
+                label={props.label}
+                onChange={(e) => parent.onChange(e.target.name, e.target.value)}
+                name={props.name}
+                defaultValue=""
+                type="file"
+              />
+            </>
+          )}
+        </div>
+      ) : null}
+    </>
+  );
+}

src/views/Auth/Profile/Document/index.scss

@@ -0,0 +1,28 @@
+.mobile-auth-profile {
+  &__document {
+    margin: 10px auto;
+    width: 100%;
+    height: 50px;
+    border-radius: 10px;
+    border: 2px dashed rgb(209, 209, 209);
+    position: relative;
+    input {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      opacity: 0;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+    span {
+      color: #afafaf;
+      font-family: numeralLight;
+    }
+  }
+}

src/views/Auth/Profile/GenderSwitch/index.js

@@ -15,7 +15,7 @@ export default function GenderSwitch(props) {
     girl: {
       fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
       color: selectedOption === options[1] ? "white" : "grey",
-      backgroundColor: selectedOption === options[1] ? "green" : "white",
+      backgroundColor: selectedOption === options[1] ? "#128c7e" : "white",
       border: selectedOption === options[1] ? "0px" : "1px solid #ccc",
       borderTopLeftRadius: 10,
       borderBottomLeftRadius: 10,
@@ -23,7 +23,7 @@ export default function GenderSwitch(props) {
     boy: {
       fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
       color: selectedOption === options[0] ? "white" : "grey",
-      backgroundColor: selectedOption === options[0] ? "green" : "white",
+      backgroundColor: selectedOption === options[0] ? "#128c7e" : "white",
       border: selectedOption === options[0] ? "0px" : "1px solid #ccc",
       borderTopRightRadius: 10,
       borderBottomRightRadius: 10,

src/views/Auth/Profile/Input/index.js

@@ -18,7 +18,7 @@ export default function FormPropsTextFields(props) {
   }));
 
   const classes = useStyles();
-  const { parent, defaultValue } = props;
+  const { parent, defaultValue, maxLength, inputMode } = props;
   return (
     <form className={classes.root} noValidate autoComplete="off">
       <div>
@@ -29,6 +29,8 @@ export default function FormPropsTextFields(props) {
           variant="outlined"
           onChange={(e) => parent.onChange(e.target.name, e.target.value)}
           defaultValue={defaultValue[props.name]}
+          maxLength={maxLength}
+          inputMode={inputMode}
         />
       </div>
     </form>
@@ -37,4 +39,6 @@ export default function FormPropsTextFields(props) {
 
 FormPropsTextFields.defaultProps = {
   align: "right",
+  maxLength: "",
+  inputMode: "numeric",
 };

src/views/Auth/Profile/MultipleSelector/index.scss

@@ -5,6 +5,6 @@
   border: 1px solid #ccc !important;
   margin: 0px !important;
   .MuiInput-formControl {
-    margin: 9px 0px 15px !important;
+    margin: 9px 0px 8px !important;
   }
 }

src/views/Auth/Profile/Select/index.js

@@ -6,29 +6,7 @@ import InputBase from "@material-ui/core/InputBase";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import InputLabel from "@material-ui/core/InputLabel";
 
-const BootstrapInput = withStyles((theme) => ({
+const BootstrapInput = withStyles((theme) => ({}))(InputBase);
-  root: {
-    "label + &": {
-      marginTop: theme.spacing(3),
-    },
-    input: {
-      borderRadius: 4,
-      position: "relative",
-      // backgroundColor: theme.palette.background.paper,
-      border: "1px solid #a5a5a5",
-      fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
-      color: "#a5a5a5",
-      // maxWidth : 70,
-      minWidth: "100%",
-      padding: "0px",
-      // Use the system font instead of the default Roboto font.
-      fontFamily: "numeralLight",
-      "&:focus": {
-        borderRadius: 4,
-      },
-    },
-  },
-}))(InputBase);
 
 const useStyles = makeStyles((theme) => ({
   marginLeft: {

src/views/Auth/Profile/Upload/index.js

@@ -21,7 +21,9 @@ export default function Upload(props) {
               <input
                 type="file"
                 name="file"
-                onChange={(e) => parent.onChange(e.target.name, e.target.value)}
+                onChange={(e) =>
+                  parent.onChange(e.target.name, e.target.files[0])
+                }
               />
               <AddAPhotoIcon
                 style={{ width: 40, height: 40, color: "white" }}
@@ -32,16 +34,18 @@ export default function Upload(props) {
               <input
                 type="file"
                 name="file"
-                onChange={(e) => parent.onChange(e.target.name, e.target.value)}
+                onChange={(e) =>
+                  parent.onChange(e.target.name, e.target.files[0])
+                }
               />
-              <img src={this.props.user.icon} alt={"کاربر"} />
+              {/* <img src={parent.state.file} alt={"کاربر"} /> */}
             </>
           )}
         </div>
       ) : null}
       {window.innerWidth > 1000 ? (
         <div className="auth-profile__upload d-flex justify-content-center-align-items-center">
-          {parent.state.file === null ? (
+          {parent.state.file === "" ? (
             <>
               <input
                 label={props.label}
@@ -70,6 +74,9 @@ export default function Upload(props) {
                 defaultValue=""
                 type="file"
               />
+              <span style={{ color: "rgb(18,140,126)" }}>
+                {parent.state.file.name}
+              </span>
             </>
           )}
         </div>

src/views/Auth/Profile/index.js

@@ -10,7 +10,7 @@ import Gender from "./GenderSwitch/index";
 import Birthdate from "./Birthdate/index";
 import MultipleSelector from "./MultipleSelector/index";
 import Loader from "~/components/Loader/index";
-
+import Document from "./Document/index";
 import logo from "../../../assets/icons/logo.png";
 import pic from "../../../assets/images/pic.png";
 
@@ -29,18 +29,26 @@ const fontSize = {
     p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
   },
 };
+
+const toastMessages = {
+  firstName: "نام وارد شده صحیح نیست!",
+  lastName: "نام خانوادگی وارد شده صحیح نیست!",
+  username: "نام کاربری صحیح نیست.",
+};
+
 class Profile extends Component {
   state = {
     render: false,
     file: null,
+    docFileIds: "",
     firstName: "",
     lastName: "",
     password: "",
     username: "",
     address: "",
     email: "",
-    gender: "",
+    gender: "دختر",
-    userRoleId: "معلم",
+    userRoleId: "دانش آموز",
     nationalId: "",
     provinceId: "",
     phone: "",
@@ -50,9 +58,13 @@ class Profile extends Component {
     postalCode: "",
     gradeId: [],
     validation: {
-      firstName: { name: "نام", status: "" },
+      firstName: "",
-      lastName: { name: "نام خانوادگی", status: "" },
+      lastName: "",
-      username: { name: "نام کاربری", status: "" },
+      username: "",
+      email: "",
+      postalCode: "",
+      nationalId: "",
+      schoolId: "",
     },
   };
 
@@ -65,6 +77,12 @@ class Profile extends Component {
       this.setState((prevState) => ({
         gradeId: [...prevState.gradeId, value],
       }));
+    }
+    if (name === "userRoleId") {
+      this.setState({
+        gradeId: [],
+        [name]: value,
+      });
     } else {
       this.setState({
         [name]: value,
@@ -350,6 +368,8 @@ class Profile extends Component {
                 parent={this}
                 align="left"
                 defaultValue={profile}
+                maxLength={10}
+                inputMode="numeric"
               />
               <Birthdate />
               <Gender
@@ -402,7 +422,7 @@ class Profile extends Component {
                 />
               ) : null}
               {this.state.userRoleId === "دانش آموز" &&
-              this.state.gradeId.length > 0 ? (
+              Number(this.state.gradeId) > 9 ? (
                 <Select
                   parent={this}
                   options={[
@@ -453,6 +473,9 @@ class Profile extends Component {
                   defaultValue={profile}
                 />
               ) : null}
+              {this.state.userRoleId === "معلم" ? (
+                <Document parent={this} name="docFileIds" />
+              ) : null}
               <Input
                 parent={this}
                 name="postalCode"

src/views/Auth/Profile/index.scss

@@ -4,27 +4,29 @@
   overflow-y: scroll;
   position: relative;
   padding: 15px;
+  max-width: 550px;
+  margin: 0px auto;
   img {
-    width: calc(100% / 2.5);
+    // width: calc(100% / 2.5);
+    max-width: 200px;
+    transform: translateX(15px);
   }
   h1 {
     margin-top: 15px;
     font-family: numeralBold;
-    font-size: calc(100vw / 15);
     color: #6f7074;
     letter-spacing: -1px;
   }
   p {
     font-family: numeralLight;
-    font-size: calc(100vw / 22);
     color: #6f7074;
     letter-spacing: -1px;
     text-align: justify;
   }
   &__upload {
     margin: 10px auto;
-    min-width: 120px;
+    min-width: 130px;
-    min-height: 120px;
+    min-height: 130px;
     border-radius: 50%;
     background-color: rgb(209, 209, 209);
     position: relative;
@@ -43,24 +45,6 @@
       border-radius: 50%;
     }
   }
-  // .MuiFormControl-root {
-  //   min-width: 310px;
-  //   width: 80%;
-  //   max-width: 400px;
-  //   margin-top: 20px;
-  //   border: 1px solid #eee;
-  //   border-radius: 5px;
-  //   padding : 10px 8px;
-  //   .MuiInputBase-input{
-  //     color: #00cba2 !important;
-  //     font-size: 18px;
-  //     &::placeholder{
-  //       font-size: 14px;
-  //       color: black;
-  //       letter-spacing: -1px;
-  //     }
-  //   }
-  // }
 
   .MuiFormControl-root {
     width: 100%;
@@ -80,13 +64,11 @@
     border-color: #cecece !important;
     border-width: 1px !important;
     color: green !important;
-    font-size: calc(100vw / 22) !important;
     border-radius: 10px !important;
   }
 
   .MuiOutlinedInput-input {
     padding: 15px 14px !important;
-    font-size: calc(100vw / 28) !important;
   }
   .MuiInputLabel-outlined {
     font-family: numeralLight !important;
@@ -112,7 +94,6 @@
     background-color: white;
     width: fit-content;
     text-align: center;
-    font-size: calc(100vw / 27) !important;
     color: #797979 !important;
     letter-spacing: -1px;
   }
@@ -142,6 +123,22 @@
       padding: 12px 0px;
     }
   }
+  @media screen and (max-width: 1000px) {
+    .MuiOutlinedInput-input {
+      font-size: 15px !important;
+    }
+    label {
+      font-size: 14px !important;
+    }
+  }
+  @media screen and (max-width: 550px) {
+    .MuiOutlinedInput-input {
+      font-size: calc(100vw / 28) !important;
+    }
+    label {
+      font-size: calc(100vw / 27) !important;
+    }
+  }
 }
 
 .auth-profile {

src/views/MyBooks/index.js

@@ -1,28 +1,33 @@
 import React from "react";
+import { connect } from "react-redux";
+import { userProduct } from "~/Redux/actions";
 import { Link } from "react-router-dom";
 
 import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 
-import sciense_6 from "../../assets/images/sciense-6.png";
+import sciense_6 from "~/assets/images/olum6.jpg";
-import sciense_8 from "../../assets/images/sciense-8.png";
+import sciense_8 from "~/assets/images/olum8.jpg";
-import sciense_9 from "../../assets/images/sciense-9.png";
+import sciense_9 from "~/assets/images/olum9.jpg";
-import sciense_7 from "../../assets/images/sciense-7.png";
+import sciense_7 from "~/assets/images/olum7.jpg";
-import basket from "../../assets/icons/basket.png";
+import shimi_10 from "~/assets/images/shimi10.jpg";
-
+import zist_10 from "~/assets/images/zist10.jpg";
-import "./index.scss";
 
 const maxDesktopSize = 1250;
 const maxMobileSize = 550;
 
 const fontSize = {
   mobile: {
-    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15,
+    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 17,
     a: window.innerHeight > maxMobileSize ? 15 : window.innerWidth / 30,
   },
 };
 
-export default class MyBooks extends React.Component {
+class MyBooks extends React.Component {
+  componentDidMount() {
+    this.props.getList();
+  }
+
   render() {
     const { books } = this.props;
     return (
@@ -37,9 +42,9 @@ export default class MyBooks extends React.Component {
         ) : null}
         {window.innerWidth < 1000 ? (
           <>
-            <div className="mobile-mybooks d-flex flex-column">
+            <div className="mobile-products d-flex flex-column">
               <Navbar />
-              <h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1>
+              {/* <h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1> */}
               <div className="d-flex flex-wrap p-1">
                 {books.map((item, i) => (
                   <Item data={item} key={i} id={i} />
@@ -53,41 +58,45 @@ export default class MyBooks extends React.Component {
   }
 }
 
+export default connect(
+  (state) => ({
+    list: state.userProduct.list,
+    // status: state.user.status,
+  }),
+  { getList: userProduct.list }
+)(MyBooks);
+
 const Item = (props) => {
   const { data, id } = props;
   return (
-    <div
+    <div className="mobile-products-product d-flex flex-column">
-      className="mobile-mybooks__item d-flex flex-column"
-      style={{
-        borderBottomLeftRadius: Number(id) % 2 === 1 ? 30 : 0,
-        borderBottomRightRadius: Number(id) % 2 === 0 ? 30 : 0,
-      }}
-    >
       <img src={data.imageUrl} alt={"عکس مجصول"} />
-      <div className="mobile-mybooks__item--buttons d-flex flex-column">
+      <div className="mobile-products-product__info d-flex flex-column">
+        <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
+      </div>
+      <div className="mobile-products-product__links d-flex">
         <Link
+          // to={}
           style={{
-            background: data.status.digital ? "#FFEE00" : "#FFFFFF",
             fontSize: fontSize.mobile.a,
-            color: data.status.ar ? "#4D4D4F" : "#4D4D4F",
           }}
+          className="mobile-products-product__links--physical"
         >
           کتاب دیجیتال
-          {!data.status.digital ? (
+          {/* {!data.status.digital ? (
             <img src={basket} alt="افزودن به سبد خرید" />
-          ) : null}
+          ) : null} */}
         </Link>
         <Link
           style={{
-            background: data.status.ar ? "#00CC69" : "#FFFFFF",
-            color: data.status.ar ? "#FFFFFF" : "#4D4D4F",
             fontSize: fontSize.mobile.a,
           }}
+          className="mobile-products-product__links--ar"
         >
           واقعیت افزوده
-          {!data.status.ar ? (
+          {/* {!data.status.ar ? (
             <img src={basket} alt="افزودن به سبد خرید" />
-          ) : null}
+          ) : null} */}
         </Link>
       </div>
     </div>
@@ -98,6 +107,7 @@ MyBooks.defaultProps = {
   books: [
     {
       id: 0,
+      title: "علوم ششم",
       link: "",
       imageUrl: sciense_6,
       status: {
@@ -108,6 +118,7 @@ MyBooks.defaultProps = {
     {
       id: 1,
       link: "",
+      title: "علوم هشتم",
       imageUrl: sciense_8,
       status: {
         digital: false,
@@ -117,6 +128,7 @@ MyBooks.defaultProps = {
     {
       id: 2,
       link: "",
+      title: "علوم نهم",
       imageUrl: sciense_9,
       status: {
         digital: true,
@@ -126,34 +138,18 @@ MyBooks.defaultProps = {
     {
       id: 3,
       link: "",
+      title: "علوم هفتم",
       imageUrl: sciense_7,
       status: {
         digital: true,
         ar: true,
       },
     },
-    {
-      id: 4,
-      link: "",
-      imageUrl: sciense_6,
-      status: {
-        digital: true,
-        ar: true,
-      },
-    },
-    {
-      id: 5,
-      link: "",
-      imageUrl: sciense_8,
-      status: {
-        digital: true,
-        ar: true,
-      },
-    },
     {
       id: 6,
       link: "",
-      imageUrl: sciense_9,
+      title: "شیمی دهم",
+      imageUrl: shimi_10,
       status: {
         digital: true,
         ar: true,
@@ -162,7 +158,8 @@ MyBooks.defaultProps = {
     {
       id: 7,
       link: "",
-      imageUrl: sciense_7,
+      title: "زیست دهم",
+      imageUrl: zist_10,
       status: {
         digital: true,
         ar: true,

src/views/MyBooks/index.scss

@@ -1,75 +0,0 @@
-.mybooks {
-  width: 100vw;
-  max-width: 1250px;
-  margin: 0px auto;
-  padding: 0px 10px;
-  direction: rtl;
-  min-height: calc(100vh - 288px);
-  padding-top: 100px;
-}
-
-.mobile-mybooks {
-  width: 100vw;
-  max-width: 600px;
-  margin: 0px auto;
-  padding: 0px;
-  direction: rtl;
-  overflow-x: hidden;
-  padding-top: 70px;
-  h1 {
-    padding: 0px 10px;
-    font-family: numeralBold;
-    color: #6f7074;
-    margin-bottom: 10px;
-  }
-  &__item {
-    margin: 10px auto;
-    height: calc(100vh - 200px);
-    max-height: 470px;
-    background-color: #fafafa;
-    border-radius: 0.5rem;
-    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
-    margin-bottom: 20px;
-    h1 {
-      font-family: numeralMedium;
-      color: #6f7074;
-      margin-bottom: 10px;
-    }
-    & img {
-      height: 60%;
-      width: 80%;
-      min-height: 250px;
-      max-height: 290px;
-      border-radius: 10px;
-      margin: 20px auto;
-      // max-height: 320px;
-      // margin: 20px 40px;
-    }
-    &--buttons {
-      // padding: 5px 9px;
-      width: 80%;
-      margin: 0px auto;
-      a {
-        text-decoration: none;
-        width: 100%;
-        padding: 8px;
-        font-family: numeralMedium;
-        margin-bottom: 10px;
-        border-radius: 10px;
-        text-align: center;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin: 10px 5px;
-        img {
-          position: absolute;
-          top: calc(50% - 8px);
-          left: 5px;
-          width: 20px;
-          height: 20px;
-        }
-      }
-    }
-  }
-}

src/views/Product/index.js

@@ -121,14 +121,14 @@ class Product extends Component {
                   <div className="d-flex flex-column mt-3">
                     <div className="d-flex">
                       <Link
-                        to={`/products/${product.id}/sample`}
+                        to={`/cart`}
                         className="mobile-product__header--digitalButton"
                         style={{ fontSize: fontSize.mobile.a }}
                       >
                         خرید نسخه دیجیتال
                       </Link>
                       <Link
-                        to={`/products/${product.id}/sample`}
+                        to={`/cart`}
                         className="mobile-product__header--purchase"
                         style={{ fontSize: fontSize.mobile.a }}
                       >