reza add some changes

src/AppRouter.js

@@ -25,7 +25,9 @@ import Chatroom from "./views/ChatRoom/index";
 import Cart from "./views/Cart/index";
 import MyBooks from "./views/MyBooks/index";
 import AR from "./views/AR/index";
+import Support from "./views/Support/index";
 import Callback from "./views/Callback/index";
+import NewProfile from "./views/NewProfile/index";
 
 class AppRouter extends Component {
   constructor(props) {
@@ -36,9 +38,10 @@ class AppRouter extends Component {
   state = {};
 
   render() {
-    let home = (
+    const mobile = window.innerWidth < 1000 ? true : false;
+    let home = mobile ? (
       <Route exact path={"/"}>
-        {proxy.status() ? (
+        {proxy.status ? (
           this.props.profile ? (
             <Home />
           ) : (
@@ -48,14 +51,18 @@ class AppRouter extends Component {
           <Auth />
         )}
       </Route>
+    ) : (
+      <Route exact path={"/"}>
+        <Home />
+      </Route>
     );
-
     return (
       <Router>
         <Switch>
           {home}
           <Route exact path={"/faq"}>
-            {proxy.status() ? (
+            {mobile ? (
+              window.innerWiproxy.status() ? (
                 <Faq />
               ) : (
                 <Redirect
@@ -63,10 +70,14 @@ class AppRouter extends Component {
                     pathname: "/auth",
                   }}
                 />
+              )
+            ) : (
+              <Faq />
             )}
           </Route>
           <Route exact path={"/contact"}>
-            {proxy.status() ? (
+            {mobile ? (
+              proxy.status() ? (
                 <Contact />
               ) : (
                 <Redirect
@@ -74,6 +85,9 @@ class AppRouter extends Component {
                     pathname: "/auth",
                   }}
                 />
+              )
+            ) : (
+              <Contact />
             )}
           </Route>
           <Route exact path={"/callback"}>
@@ -85,6 +99,12 @@ class AppRouter extends Component {
           <Route exact path={"/products"}>
             <Products />
           </Route>
+          <Route exact path={"/newProfile"}>
+            <NewProfile />
+          </Route>
+          <Route exact path={"/support"}>
+            <Support />
+          </Route>
           <Route exact path={"/products/digital/:id"}>
             <Product page="digital" />
           </Route>
@@ -117,7 +137,8 @@ class AppRouter extends Component {
             <MyBooks />
           </Route>
           <Route exact path={"/ar"}>
-            {proxy.status() ? (
+            {mobile ? (
+              proxy.status() ? (
                 <AR />
               ) : (
                 <Redirect
@@ -125,9 +146,12 @@ class AppRouter extends Component {
                     pathname: "/auth",
                   }}
                 />
+              )
+            ) : (
+              <AR />
             )}
           </Route>
-          {window.innerWidth < 1000 ? (
+          {mobile ? (
             <Route exact path={"/chatroom/:id"}>
               {proxy.status() ? (
                 <Chatroom />
@@ -141,7 +165,7 @@ class AppRouter extends Component {
             </Route>
           ) : null}
           <Route path={""}>
-            {proxy.status ? (
+            {proxy.status() ? (
               <Redirect
                 to={{
                   pathname: "/qr",

src/views/AR/Item/index.js

@@ -1,7 +1,5 @@
 import React, { Component } from "react";
 
-import "./index.scss";
-
 const maxMobileSize = 550;
 const maxDesktopSize = 1250;
 
@@ -24,15 +22,19 @@ export default class Item extends Component {
     return (
       <>
         {window.innerWidth < 1000 ? (
-          <article className="mobile-ar-book d-flex flex-column">
-            <a href={`https://ar.dnvn.ir/lunch?id=${data.id}`} target="_blank">
+          <a
+            href={`https://ar.dnvn.ir/lunch?id=${data.id}`}
+            target="_blank"
+            className="mobile-products-product d-flex flex-column"
+          >
             <img
               src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
               alt={data.title}
             />
+            <div className="mobile-products-product__info d-flex flex-column">
               <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
+            </div>
           </a>
-          </article>
         ) : null}
         {window.innerWidth > 1000 ? (
           <article className="products-product d-flex flex-column align-items"></article>

src/views/AR/Item/index.scss

@@ -1,76 +0,0 @@
-.mobile-ar-book {
-  width: calc(100% / 2);
-  padding: 10px;
-  a {
-    width: 100%;
-    text-decoration: none;
-    &:hover {
-    }
-    img {
-      width: 100%;
-      height: 170px;
-      border-radius: 20px;
-    }
-    h1 {
-      font-family: numeralBold;
-      margin-top: 15px;
-      color: #4d4d4d;
-      letter-spacing: -1px;
-    }
-  }
-}
-
-.products-product {
-  width: calc(100% / 4);
-  padding: 10px;
-  margin-bottom: 20px;
-  a {
-    width: 100%;
-    text-decoration: none;
-    &:hover {
-    }
-    img {
-      width: 100%;
-      height: 200px;
-      border-radius: 30px;
-    }
-    h1 {
-      font-family: numeralBold;
-      margin-top: 15px;
-      color: #02a1a6;
-      letter-spacing: -1px;
-      text-align: center;
-    }
-  }
-  &__notAvailabe {
-    font-family: numeralBold;
-    width: 100%;
-    text-align: center;
-    color: #6f7074;
-    margin-top: 15px;
-  }
-  &__price {
-    width: 100%;
-    margin-top: 15px;
-    text-align: center;
-    &--old {
-      font-family: numeralBold;
-      color: #6f7074;
-      position: relative;
-      margin-left: 10px;
-      align-items: center;
-      span {
-        position: absolute;
-        left: 0px;
-        width: 100%;
-        height: 2px;
-        background-color: rgba(121, 121, 121, 0.534);
-        transform: rotate(-14deg);
-      }
-    }
-    &--price {
-      color: #4d4d4d;
-      font-family: numeralBold;
-    }
-  }
-}

src/views/Activation/index.js

@@ -23,7 +23,7 @@ const fontSize = {
   },
   mobile: {
     h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15,
-    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
+    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
     form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 24,
     span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 25,
   },

src/views/Activation/index.scss

@@ -30,6 +30,9 @@
       color: #00cc69;
       letter-spacing: -2px;
     }
+    img {
+      width: calc(100vh / 5);
+    }
   }
   &__description {
     width: 100%;

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

@@ -29,7 +29,7 @@ export default function FormPropsTextFields(props) {
           label={props.label}
           variant="outlined"
           onChange={(e) => parent.onChange(e.target.name, e.target.value)}
-          defaultValue={defaultValue[props.name]}
+          defaultValue={defaultValue[props.name] || ""}
           maxLength={maxLength}
           onInput={(e) => (e.target.value = onInput(e.target.value))}
         />
@@ -42,4 +42,5 @@ FormPropsTextFields.defaultProps = {
   align: "right",
   maxLength: "",
   inputMode: "numeric",
+  defaultValue: "",
 };

src/views/Blogs/index.js

@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import "./index.scss";
+class Blogs extends Component {
+  componentDidMount() {
+    // this.props.contentList(1, 100, CONTENT_LIST_3);
+  }
+
+  render() {
+    const { blogs } = this.props;
+    return (
+      <>
+        {window.innerWidth > 1000 ? (
+          <div className="landscape-blogs d-flex flex-column">
+            <div className="landscape-blogs__header d-flex">
+              <span></span>
+              <h3>اخبار</h3>
+            </div>
+            <div className="landscape-blogs__scroll d-flex flex-column">
+              {blogs.map((item) => (
+                <Item item={item} key={item.id} getSingle={getSingle} />
+              ))}
+            </div>
+          </div>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="portrait-blogs d-flex flex-column">
+            <div className="portrait-blogs__header d-flex">
+              <span></span>
+              <h3>اخبار</h3>
+            </div>
+            <div className="portrait-blogs__scroll d-flex flex-column">
+              {blogs.map((item) => (
+                <Item item={item} key={item.id} getSingle={getSingle} />
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default connect(
+  (state) => ({
+    all: state.content.all,
+  }),
+  {}
+)(Blogs);

src/views/Blogs/index.scss

@@ -0,0 +1,59 @@
+.landscape-blogs {
+  width: 100vw;
+  padding: 90px 10px 10px;
+  max-width: 1250px;
+  margin: 0px auto;
+  direction: rtl;
+  &__header {
+    width: 100%;
+    height: 40px;
+    align-items: center;
+    padding: 0px;
+    & h3 {
+      font-size: 36px;
+      margin-bottom: 20px;
+      letter-spacing: -1px;
+      margin-right: 10px;
+      // color : $bright-cerulean;
+    }
+  }
+  &__scroll {
+    width: 100%;
+    direction: rtl;
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0px;
+    }
+  }
+}
+
+.portrait-blogs {
+  width: 100vw;
+  padding: 90px 10px 10px;
+  max-width: 680px;
+  margin: 0px auto;
+  direction: rtl;
+  &__header {
+    width: 100%;
+    height: 40px;
+    align-items: center;
+    padding: 0px;
+    & h3 {
+      font-size: 28px;
+      margin-bottom: 20px;
+      letter-spacing: -1px;
+      margin-right: 10px;
+      color: $bright-cerulean;
+    }
+  }
+  &__scroll {
+    width: 100%;
+    direction: rtl;
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0px;
+    }
+  }
+}

src/views/Home/HomeSlider/index.scss

@@ -1,15 +1,15 @@
-.mobile-home-slider{
+.mobile-home-slider {
   width: 100%;
   padding: 2px 0px 0px;
   margin: 0px 0px 10px;
   position: relative;
-  .rec-arrow-left{
-    top : calc(50% - 22px) !important;
+  .rec-arrow-left {
+    top: calc(50% - 22px) !important;
     right: -12px !important;
   }
 
-  .rec-arrow-right{
-    top : calc(50% - 22px) !important;
+  .rec-arrow-right {
+    top: calc(50% - 22px) !important;
     left: -12px !important;
   }
 }
@@ -19,19 +19,17 @@
   padding: 2px 0px 0px;
   margin: 20px 0px 10px;
   position: relative;
-  .rec-arrow-left{
-    top : calc(50% - 22px) !important;
+  .rec-arrow-left {
+    top: calc(50% - 22px) !important;
     right: 5px !important;
   }
 
-  .rec-arrow-right{
-    top : calc(50% - 22px) !important;
+  .rec-arrow-right {
+    top: calc(50% - 22px) !important;
     left: 5px !important;
   }
 }
 
-
-
 .rec-dot_active {
   background-color: green !important;
   color: white !important;
@@ -48,38 +46,38 @@
     background-color: grey;
     margin: 2px !important;
     box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
-    &:focus{
+    &:focus {
       box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
     }
   }
 }
 
-.rec-slider-container{
-  margin : 0px !important;
+.rec-slider-container {
+  margin: 0px !important;
 }
 
-.rec-arrow{
-  position : absolute !important; 
+.rec-arrow {
+  position: absolute !important;
   z-index: 100;
   background-color: inherit !important;
   box-shadow: none !important;
   border: 0px !important;
   color: grey !important;
-  &:focus{
+  &:focus {
     color: grey !important;
   }
-  &:disabled{
+  &:disabled {
     color: black !important;
+    display: none !important;
   }
-  &:enabled{
+  &:enabled {
     color: grey;
   }
-  &:hover{
+  &:hover {
     color: white;
   }
 }
 
-.rec-slider-container{
+.rec-slider-container {
   border-radius: 10px;
 }
-

src/views/Home/HomeStatic/Flex/index.js

@@ -16,12 +16,14 @@ export default function Flex(props) {
     margin: 5,
     borderRadius: 10,
     color: data.color,
+    filter: data.link === "/chatroom" ? "grayscale(90%)" : "",
   };
   return (
     <Link
-      to={data.link}
+      to={data.link === "/chatroom" ? "/" : data.link}
       className="mobile-home-static__flex d-flex align-items-center"
       style={style}
+      disabled={true}
     >
       <div className="mobile-home-static__flex--right d-flex flex-column">
         <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>

src/views/Home/HomeStatic/Simple/index.js

@@ -12,7 +12,9 @@ export default function Simple(props) {
   const { data } = props;
   const parentStyle = {
     // backgroundImage: `url('${data.imageUrl}')`,
-    background: `url('${`https://dnvn.ir/api/v1/file/${data.fileId}`}')`,
+    background: data.fileId
+      ? `url('${`https://dnvn.ir/api/v1/file/${data.fileId}`}')`
+      : "",
     flex: data.flex,
     backgroundRepeat: "no-repeat",
     backgroundSize: "100% 100%",

src/views/Home/HomeStatic/Vitrin/index.js

@@ -23,7 +23,8 @@ export default function Vitrin(props) {
   };
 
   return (
-    <div
+    <Link
+      to={data.link}
       className="mobile-home-static__vitrin d-flex flex-column"
       style={style}
     >
@@ -36,7 +37,7 @@ export default function Vitrin(props) {
           مشاهده بیشتر
         </Link>
       </div>
-    </div>
+    </Link>
   );
 }
 
@@ -44,7 +45,7 @@ const Item = (props) => {
   const { data } = props;
   return (
     <Link
-      to={"/products/" + data.id}
+      to={"/products/physical/" + data.id}
       className="mobile-home-static__vitrin--product d-flex"
     >
       <img

src/views/Home/HomeStatic/index.scss

@@ -51,6 +51,7 @@
   }
   &__vitrin {
     padding: 15px 5px;
+    text-decoration: none;
     h1 {
       font-family: numeralBold;
       text-align: justify;

src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import AddCircleOutlineRoundedIcon from "@material-ui/icons/AddCircleOutlineRounded";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import Avatar from "@material-ui/core/Avatar";
@@ -51,6 +52,7 @@ class NavbarDrawer extends Component {
               className="navbar-drawer__header--dropdown"
               onClick={() => this.setState({ dropdown: false })}
             >
+              <span>25 امتیاز</span>
               <KeyboardArrowUpIcon style={{ color: "grey", fontSize: 45 }} />
             </div>
           ) : (
@@ -65,6 +67,19 @@ class NavbarDrawer extends Component {
         </div>
         {this.state.dropdown ? (
           <div className="navbar-drawer__dropdown d-flex flex-column">
+            <Link
+              to={"/newProfile"}
+              key={this.props.users.length + 1}
+              style={{ color: "#4e4e4e" }}
+            >
+              <div className="navbar-drawer__bottom--link d-flex">
+                <AddCircleOutlineRoundedIcon
+                  style={{ fontSize: 35, color: "#4e4e4e", margin: "0px 10px" }}
+                />
+                <div>اضافه کردن کاربر </div>
+                {/* {item.message && <div class="badge">{item.message}</div>} */}
+              </div>
+            </Link>
             {this.props.users.map((item, i) => (
               <User data={item} key={i} />
             ))}
@@ -103,15 +118,7 @@ export default NavbarDrawer;
 NavbarDrawer.defaultProps = {
   users: [
     {
-      id: 0,
-      firstName: "محمدرضا",
-      lastName: "خراسانی",
-      title: "استاد علوم تجربی",
-      image: user1,
-      status: 0,
-    },
-    {
-      id: 0,
+      id: 1,
       firstName: "اکبر",
       lastName: "خراسانی",
       title: "استاد علوم تجربی",
@@ -129,7 +136,7 @@ NavbarDrawer.defaultProps = {
     },
     {
       name: "واقعیت افزوده",
-      link: "/",
+      link: "/ar",
       icon: <img src={mobileAr} alt="واقعیت افزوده" />,
       toast: "",
       message: "",
@@ -142,9 +149,9 @@ NavbarDrawer.defaultProps = {
       message: "",
     },
     {
-      name: "کتاب الکترونیک",
-      link: "/activation",
-      icon: <img src={mobileBlog} alt="کتاب الکترونیک" />,
+      name: "کتاب‌های من",
+      link: "/mybooks",
+      icon: <img src={mobileBlog} alt="کتاب‌های من" />,
       toast: "",
       message: "",
     },
@@ -164,25 +171,25 @@ NavbarDrawer.defaultProps = {
     },
     {
       name: "پیام رسان",
-      link: "/chatroom",
-      icon: <img src={mobileMail} alt="بلاگ" />,
+      link: "/",
+      icon: <img src={mobileProfile} alt="پیام رسان" />,
       toast: "",
       message: "",
     },
     {
-      name: "ویرایش مشخصات",
-      link: "/profile",
-      icon: <img src={mobileProfile} alt="ویرایش مشخصات" />,
+      name: "پشتیبانی",
+      link: "/support",
+      icon: <img src={mobileDanger} alt="پشتیبانی" />,
       toast: "",
-      message: "4 پیام",
+      message: "",
+      // onClick: this.props.logout,
     },
     {
-      name: "گزارش ایراد",
-      link: "/",
-      icon: <img src={mobileDanger} alt="گزارش ایراد" />,
+      name: "ویرایش مشخصات",
+      link: "/profile",
+      icon: <img src={mobileMail} alt="ویرایش مشخصات" />,
       toast: "",
-      message: "",
-      // onClick: this.props.logout,
+      message: "4 پیام",
     },
     {
       name: "خروج",

src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss

@@ -11,6 +11,9 @@
   text-align: right !important;
   direction: rtl;
   padding: 30px 0px 10px 0px;
+  a {
+    text-decoration: none;
+  }
   &__header {
     height: 60px;
     background-color: white;

src/views/Home/SingleBlog/index.js

@@ -20,15 +20,18 @@ export default class SingleBlog extends Component {
       <div style={{ height: height }} className="single-blog d-flex">
         <div className="single-blog__right d-flex flex-column justify-content-center">
           <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
-          <p style={{ fontSize: fontSize.desktop.p }}>{data.subTitle}</p>
-          <Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>
-            {data.buttonText}
+          <p style={{ fontSize: fontSize.desktop.p }}>{data.text}</p>
+          <Link
+            style={{ fontSize: fontSize.desktop.a }}
+            to={"/blogs" + data.id}
+          >
+            بیشتر
           </Link>
         </div>
         <div className="single-blog__left d-flex">
-          {data.fileId ? (
+          {data.id ? (
             <img
-              src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+              src={`https://dnvn.ir/api/v1/file/${data.id}`}
               alt={data.title}
             />
           ) : null}

src/views/MyBooks/index.js

@@ -18,7 +18,7 @@ const maxMobileSize = 550;
 
 const fontSize = {
   mobile: {
-    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 17,
+    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20,
     a: window.innerHeight > maxMobileSize ? 15 : window.innerWidth / 30,
   },
 };
@@ -74,31 +74,6 @@ const Item = (props) => {
       <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={{
-            fontSize: fontSize.mobile.a,
-          }}
-          className="mobile-products-product__links--physical"
-        >
-          کتاب دیجیتال
-          {/* {!data.status.digital ? (
-            <img src={basket} alt="افزودن به سبد خرید" />
-          ) : null} */}
-        </Link>
-        <Link
-          style={{
-            fontSize: fontSize.mobile.a,
-          }}
-          className="mobile-products-product__links--ar"
-        >
-          واقعیت افزوده
-          {/* {!data.status.ar ? (
-            <img src={basket} alt="افزودن به سبد خرید" />
-          ) : null} */}
-        </Link>
-      </div>
     </div>
   );
 };

src/views/NewProfile/index.js

@@ -0,0 +1,557 @@
+import React, { Component } from "react";
+import { user } from "~/Redux/actions";
+import { connect } from "react-redux";
+
+import Select from "../Auth/Profile/Select/index";
+import Input from "../Auth/Profile/Input/index";
+import TextArea from "../Auth/Profile/TextArea/index";
+import Upload from "../Auth/Profile/Upload/index";
+import Gender from "../Auth/Profile/GenderSwitch/index";
+import Birthdate from "../Auth/Profile/Birthdate/index";
+import MultipleSelector from "../Auth/Profile/MultipleSelector/index";
+import Loader from "~/components/Loader/index";
+import Document from "../Auth/Profile/Document/index";
+
+import logo from "~/assets/icons/logo.png";
+import pic from "~/assets/images/pic.png";
+
+import "../Auth/Profile/index.scss";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55,
+    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
+  },
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
+    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
+  },
+};
+
+const toastMessages = {
+  firstName: "نام وارد شده صحیح نیست!",
+  lastName: "نام خانوادگی وارد شده صحیح نیست!",
+  username: "نام کاربری صحیح نیست.",
+};
+
+class NewProfile extends Component {
+  state = {
+    render: false,
+    file: null,
+    docFileIds: "",
+    firstName: "",
+    lastName: "",
+    password: "",
+    username: "",
+    address: "",
+    email: "",
+    gender: "دختر",
+    userRoleId: "دانش آموز",
+    nationalId: "",
+    provinceId: "",
+    phone: "",
+    cityId: "",
+    zoneId: "",
+    schoolId: "",
+    postalCode: "",
+    gradeId: [],
+    validation: {
+      firstName: "",
+      lastName: "",
+      username: "",
+      email: "",
+      postalCode: "",
+      nationalId: "",
+      schoolId: "",
+    },
+  };
+
+  componentDidMount() {
+    // this.props.getProfile();
+  }
+
+  onChange = (name, value) => {
+    if (name === "gardeId" && this.state.userRoleId === "معلم") {
+      this.setState((prevState) => ({
+        gradeId: [...prevState.gradeId, value],
+      }));
+    }
+    if (name === "userRoleId") {
+      this.setState({
+        gradeId: [],
+        [name]: value,
+      });
+    } else {
+      this.setState({
+        [name]: value,
+      });
+    }
+  };
+
+  onSubmit = async (e) => {
+    const {
+      firstName,
+      lastName,
+      username,
+      cellphone,
+      password,
+      postalCode,
+      address,
+      email,
+      phone,
+    } = this.state;
+    const { profile, setProfile } = this.props;
+    const data = {
+      firstName: firstName || profile.firstName,
+      lastName: lastName || profile.lastName,
+      username: username || profile.username,
+      cellphone: profile.cellphone,
+      password: password || profile.password,
+      postalCode: postalCode || profile.postalCode,
+      address: address || profile.address,
+      email: email || profile.email,
+      phone: phone || profile.phone,
+    };
+    await setProfile(data);
+  };
+
+  forcePersian = (txt) => {
+    let yas = txt;
+    yas = yas.replace(/`/g, "");
+    yas = yas.replace(/0/g, "");
+    yas = yas.replace(/1/g, "");
+    yas = yas.replace(/2/g, "");
+    yas = yas.replace(/3/g, "");
+    yas = yas.replace(/4/g, "");
+    yas = yas.replace(/5/g, "");
+    yas = yas.replace(/6/g, "");
+    yas = yas.replace(/7/g, "");
+    yas = yas.replace(/8/g, "");
+    yas = yas.replace(/9/g, "");
+    yas = yas.replace(/0/g, "");
+    yas = yas.replace(/q/g, "");
+    yas = yas.replace(/w/g, "");
+    yas = yas.replace(/e/g, "");
+    yas = yas.replace(/r/g, "");
+    yas = yas.replace(/t/g, "");
+    yas = yas.replace(/y/g, "");
+    yas = yas.replace(/u/g, "");
+    yas = yas.replace(/i/g, "");
+    yas = yas.replace(/o/g, "");
+    yas = yas.replace(/p/g, "");
+    yas = yas.replace(/\[/g, "");
+    yas = yas.replace(/\]/g, "");
+    yas = yas.replace(/a/g, "");
+    yas = yas.replace(/s/g, "");
+    yas = yas.replace(/d/g, "");
+    yas = yas.replace(/f/g, "");
+    yas = yas.replace(/g/g, "");
+    yas = yas.replace(/h/g, "");
+    yas = yas.replace(/j/g, "");
+    yas = yas.replace(/k/g, "");
+    yas = yas.replace(/l/g, "");
+    yas = yas.replace(/\;/g, "");
+    yas = yas.replace(/\'/g, "");
+    yas = yas.replace(/z/g, "");
+    yas = yas.replace(/x/g, "");
+    yas = yas.replace(/c/g, "");
+    yas = yas.replace(/v/g, "");
+    yas = yas.replace(/b/g, "");
+    yas = yas.replace(/n/g, "");
+    yas = yas.replace(/m/g, "");
+    yas = yas.replace(/\,/g, "");
+    yas = yas.replace(/\./g, "");
+    yas = yas.replace(/\//g, "");
+    yas = yas.replace(/~/g, " ");
+    yas = yas.replace(/Q/g, "");
+    yas = yas.replace(/W/g, "");
+    yas = yas.replace(/E/g, "");
+    yas = yas.replace(/R/g, "");
+    yas = yas.replace(/T/g, "");
+    yas = yas.replace(/Y/g, "");
+    yas = yas.replace(/U/g, "");
+    yas = yas.replace(/I/g, "");
+    yas = yas.replace(/O/g, "");
+    yas = yas.replace(/P/g, "");
+    yas = yas.replace(/A/g, "");
+    yas = yas.replace(/S/g, "");
+    yas = yas.replace(/G/g, "");
+    yas = yas.replace(/H/g, "");
+    yas = yas.replace(/J/g, "");
+    yas = yas.replace(/K/g, "");
+    yas = yas.replace(/L/g, "");
+    yas = yas.replace(/Z/g, "");
+    yas = yas.replace(/X/g, "");
+    yas = yas.replace(/B/g, "");
+    yas = yas.replace(/N/g, "");
+    yas = yas.replace(/M/g, "");
+    yas = yas.replace(/\?/g, "");
+    return yas;
+  };
+
+  render() {
+    const { user, profile } = this.props;
+    return (
+      <>
+        {window.innerWidth > 1000 ? (
+          <div className="auth-profile d-flex justify-content-center">
+            <div className="auth-profile__box d-flex flex-column p-4">
+              <h1 style={{ fontSize: fontSize.desktop.h1 }}>حساب کاربری</h1>
+              <p style={{ fontSize: fontSize.desktop.p }}>
+                لطفا مشخصات خود را به صورت کامل نمایید.
+              </p>
+              <form
+                className="auth-profile__box--form d-flex"
+                onSubmit={(e) => this.onSubmit(e)}
+              >
+                <div style={{ width: "48%" }}>
+                  <div className="mb-2 d-flex justify-content-center">
+                    <Upload name="file" parent={this} />
+                  </div>
+                  <div className="mb-2">
+                    <Input
+                      name="firstName"
+                      label="نام"
+                      parent={this}
+                      defaultValue={profile}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <Input
+                      name="lastName"
+                      label="نام خانوادگی"
+                      parent={this}
+                      defaultValue={profile}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <Input
+                      name="username"
+                      label="نام کاربری"
+                      parent={this}
+                      defaultValue={profile}
+                      align="left"
+                    />
+                  </div>
+
+                  <div className="mb-2">
+                    <Gender
+                      options={["دختر", "پسر"]}
+                      parent={this}
+                      name="gender"
+                      selectedOption={this.state.gender}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <Input
+                      name="nationalId"
+                      label="کد ملی"
+                      parent={this}
+                      align="left"
+                      defaultValue={profile}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <Birthdate />
+                  </div>
+                  {/* <div className="mb-2">
+                    <Input name="password" label="رمز عبور" parent={this} />
+                  </div> */}
+                </div>
+                <div style={{ width: "48%" }}>
+                  <div className="mb-2" style={{ minWidth: "100%" }}>
+                    <Gender
+                      parent={this}
+                      options={["معلم", "دانش آموز"]}
+                      name="userRoleId"
+                      label={"عنوان"}
+                      selectedOption={this.state.userRoleId}
+                    />
+                  </div>
+                  {this.state.userRoleId === "دانش آموز" ? (
+                    <div className="mb-2">
+                      <Select
+                        parent={this}
+                        options={[
+                          "1",
+                          "2",
+                          "3",
+                          "4",
+                          "5",
+                          "6",
+                          "7",
+                          "8",
+                          "9",
+                          "10",
+                          "11",
+                          "12",
+                        ]}
+                        name="gradeId"
+                        label={"پایه تحصیلی"}
+                      />
+                    </div>
+                  ) : null}
+                  {this.state.userRoleId === "معلم" ? (
+                    <div className="mb-2">
+                      <MultipleSelector
+                        parent={this}
+                        options={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
+                        name="gradeId"
+                        label={"پایه تحصیلی"}
+                        selectedOptions={this.state.gradeId}
+                      />
+                    </div>
+                  ) : null}
+
+                  {this.state.userRoleId === "دانش آموز" &&
+                  this.state.gradeId > 9 ? (
+                    <div className="mb-2">
+                      <Select
+                        parent={this}
+                        options={[
+                          "ریاضی",
+                          "تجربی",
+                          "انسانی",
+                          "فنی حرفه‌ای",
+                          "کاردانش",
+                          "معارف",
+                        ]}
+                        name="field"
+                        label={"رشته تحصیلی"}
+                        selectedOptions={this.state.gradeId}
+                      />
+                    </div>
+                  ) : null}
+
+                  <div className="mb-2" style={{ minWidth: "100%" }}>
+                    <Select
+                      parent={this}
+                      options={["karaj", "tehran"]}
+                      name="province"
+                      label={"استان"}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <Select
+                      parent={this}
+                      options={["karaj", "tehran"]}
+                      name="city"
+                      label={"شهرستان"}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <Select
+                      parent={this}
+                      options={["chaharbagh", "mahalat"]}
+                      name="zoneId"
+                      label={"شهر/روستا"}
+                    />
+                  </div>
+                  {this.state.userRoleId === "دانش آموز" ? (
+                    <div className="mb-2">
+                      <Input
+                        parent={this}
+                        name="schoolId"
+                        label={"نام مدرسه"}
+                        defaultValue={profile}
+                      />
+                    </div>
+                  ) : null}
+                  {this.state.userRoleId === "معلم" ? (
+                    <div className="mb-2">
+                      <Input
+                        parent={this}
+                        name="schoolId"
+                        label={"محل تدریس"}
+                        defaultValue={profile}
+                      />
+                    </div>
+                  ) : null}
+                  <div className="mb-2">
+                    <Input
+                      parent={this}
+                      name="postalCode"
+                      label={"کد پستی"}
+                      align="left"
+                      defaultValue={profile}
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <TextArea
+                      parent={this}
+                      label={"آدرس محل سکونت"}
+                      name="address"
+                    />
+                  </div>
+                  <div className="auth-profile__box--form__footer d-flex justify-content-center">
+                    <button>‌ذخیره</button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-auth-profile d-flex flex-column">
+            <img src={logo} alt="دانوین" />
+            <h1 style={{ fontSize: fontSize.mobile.h1 }}>افزودن کاربر جدید</h1>
+            <p style={{ fontSize: fontSize.mobile.p }}>
+              لطفا مشحصات خود را به صورت کامل وارد نمایید
+            </p>
+            <Upload name="file" parent={this} />
+            <Input
+              name="firstName"
+              label="نام"
+              parent={this}
+              onInput={this.forcePersian}
+            />
+            <Input
+              name="lastName"
+              label="نام خانوادگی"
+              parent={this}
+              onInput={this.forcePersian}
+            />
+            <Input
+              name="username"
+              label="نام کاربری"
+              parent={this}
+              align="left"
+            />
+            <Gender
+              options={["دختر", "پسر"]}
+              parent={this}
+              name="gender"
+              selectedOption={this.state.gender}
+            />
+            <Input
+              name="nationalId"
+              label="کد ملی"
+              parent={this}
+              align="left"
+              maxLength={10}
+              inputMode="numeric"
+            />
+            <Birthdate />
+            <Gender
+              parent={this}
+              options={["معلم", "دانش آموز"]}
+              name="userRoleId"
+              selectedOption={this.state.userRoleId}
+            />
+            {this.state.userRoleId === "دانش آموز" ? (
+              <Select
+                parent={this}
+                options={[
+                  "1",
+                  "2",
+                  "3",
+                  "4",
+                  "5",
+                  "6",
+                  "7",
+                  "8",
+                  "9",
+                  "10",
+                  "11",
+                  "12",
+                ]}
+                name="gradeId"
+                label={"پایه تحصیلی"}
+              />
+            ) : null}
+            {this.state.userRoleId === "معلم" ? (
+              <MultipleSelector
+                parent={this}
+                options={[
+                  "1",
+                  "2",
+                  "3",
+                  "4",
+                  "5",
+                  "6",
+                  "7",
+                  "8",
+                  "9",
+                  "10",
+                  "11",
+                  "12",
+                ]}
+                name="gradeId"
+                label={"پایه تحصیلی"}
+                selectedOptions={this.state.gradeId}
+              />
+            ) : null}
+            {this.state.userRoleId === "دانش آموز" &&
+            Number(this.state.gradeId) > 9 ? (
+              <Select
+                parent={this}
+                options={[
+                  "ریاضی",
+                  "تجربی",
+                  "انسانی",
+                  "فنی حرفه‌ای",
+                  "کاردانش",
+                  "معارف",
+                ]}
+                name="field"
+                label={"رشته تحصیلی"}
+                selectedOptions={this.state.gradeId}
+              />
+            ) : null}
+
+            <Select
+              parent={this}
+              options={["karaj", "tehran"]}
+              name="provinceId"
+              label={"استان"}
+            />
+            <Select
+              parent={this}
+              options={["karaj", "tehran"]}
+              name="cityId"
+              label={"شهرستان"}
+            />
+            <Select
+              parent={this}
+              options={["chaharbagh", "mahalat"]}
+              name="zoneId"
+              label={"شهر/روستا"}
+            />
+            {this.state.userRoleId === "دانش آموز" ? (
+              <Input parent={this} name="schoolId" label={"نام مدرسه"} />
+            ) : null}
+            {this.state.userRoleId === "معلم" ? (
+              <Input parent={this} name="schoolId" label={"محل تدریس"} />
+            ) : null}
+            {this.state.userRoleId === "معلم" ? (
+              <Document parent={this} name="docFileIds" />
+            ) : null}
+            <Input
+              parent={this}
+              name="postalCode"
+              label={"کد پستی"}
+              align="left"
+            />
+            <TextArea parent={this} label={"آدرس محل سکونت"} name="address" />
+            <div className="mobile-auth-profile__footer d-flex justify-content-center">
+              <button onClick={() => this.onSubmit()}>‌ذخیره</button>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default connect((state) => ({}), {})(NewProfile);
+
+NewProfile.defaultProps = {
+  user: {
+    name: "اکبر",
+    icon: pic,
+    description: "",
+  },
+};

src/views/Products/Product/index.js

@@ -17,6 +17,7 @@ const fontSize = {
   },
   desktop: {
     h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65,
+    h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
     div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
     old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
   },
@@ -69,9 +70,12 @@ export default class Product extends Component {
             <Link
               to={`/products/physical/${product.id}`}
               style={{ fontSize: fontSize.mobile.a }}
-              className="products-product--physical"
+              className="products-product--physical d-flex justify-content-between align-items-center"
             >
-              کتاب
+              <h2 style={{ fontSize: fontSize.desktop.h2 }}>کتاب</h2>
+              <span style={{ fontSize: fontSize.desktop.h2 }}>
+                {product.product[1].price} تومان
+              </span>
               {/* {!product.status.digital ? (
                   <img src={basket} alt="افزودن به سبد خرید" />
                 ) : null} */}
@@ -79,12 +83,12 @@ export default class Product extends Component {
             <Link
               to={`/products/digital/${product.id}`}
               style={{ fontSize: fontSize.mobile.a }}
-              className="products-product--ar"
+              className="products-product--ar d-flex justify-content-between align-items-center"
             >
-              نسخه دیجیتال
-              {/* {!product.status.digital ? (
-                  <img src={basket} alt="افزودن به سبد خرید" />
-                ) : null} */}
+              <h2 style={{ fontSize: fontSize.desktop.h2 }}>دیجیتال</h2>
+              <span style={{ fontSize: fontSize.desktop.h2 }}>
+                {product.product[0].price} تومان
+              </span>
             </Link>
           </article>
         ) : null}

src/views/Products/Product/index.scss

@@ -22,26 +22,39 @@
   &--physical {
     background-color: #7fc75d;
     color: white;
-    padding: 5px 3px;
+    padding: 5px 7px;
     border-radius: 7px;
     font-family: numeralMedium;
     text-decoration: none;
+    width: 100%;
+    h2 {
+      margin: 0px;
+    }
     &:hover {
       color: white;
     }
   }
   &--ar {
     border: 1px solid #7fc75d;
-    padding: 5px 3px;
+    padding: 5px 7px;
     border-radius: 7px;
     color: #7fc75d;
     margin-top: 10px;
+    width: 100%;
+    text-decoration: none;
+    font-family: numeralLight;
+    h2 {
+      margin: 0px;
+    }
     &:hover {
       color: #7fc75d;
     }
   }
 }
 
+.mobile-products-product {
+  text-decoration: none;
+}
 @media screen and (max-width: 350px) {
   .mobile-products-product {
     width: 100%;

src/views/Products/Sort/index.js

@@ -17,7 +17,7 @@ export default class Sort extends React.Component {
       <div className="products-sort d-flex align-items-center">
         <SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} />
         <span style={{ fontSize: fontSize.span }}>مرتب سازی بر اساس</span>
-        <ul className="d-flex justify-content-between align-items-center mr-2">
+        <ul className="d-flex align-items-center mr-2">
           {parent.props.sortItems.map((item, i) => (
             <Item
               data={item}

src/views/Products/index.js

@@ -137,14 +137,7 @@ export default connect((state) => ({}), {
 })(Products);
 
 Products.defaultProps = {
-  sortItems: [
-    "پربازدیدترین",
-    "پرفروش ترین",
-    "گران ‌ترین",
-    "ارزان ‌ترین",
-    "جدیدترین",
-    "بزودی",
-  ],
+  sortItems: ["پرفروش ترین", "جدیدترین"],
   subjects: ["فیزیک", "زیست", "شیمی", "روانشناسی", "علوم", "دین و زندگی"],
   levels: ["اول", "دوم", "سوم", "دهم"],
 };

src/views/QRScan/Modal/index.js

@@ -13,6 +13,7 @@ const fontSize = {
 };
 export default class QRModal extends Component {
   render() {
+    const { tail, parent } = this.props;
     return (
       <>
         {window.innerWidth < 1000 ? (
@@ -21,8 +22,11 @@ export default class QRModal extends Component {
               اسکن کد QR موفقیت آمیز بود.
             </span>
             <Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}>
-              {this.props.tail}
+              {tail}
             </Link>
+            <button onClick={() => parent.setState({ tail: null })}>
+              انصراف
+            </button>
           </div>
         ) : (
           <div className="qr-modal d-flex flex-column justify-content-center align-items-center">
@@ -30,8 +34,11 @@ export default class QRModal extends Component {
               اسکن کد QR موفقیت آمیز بود.
             </span>
             <Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}>
-              {this.props.tail}
+              {tail}
             </Link>
+            <button onClick={() => parent.setState({ tail: null })}>
+              انصراف
+            </button>
           </div>
         )}
       </>

src/views/QRScan/Modal/index.scss

@@ -24,6 +24,19 @@
     font-family: numeralLight;
     border-radius: 25px;
   }
+  button {
+    text-decoration: none;
+    width: 30%;
+    min-width: 100px;
+    margin: 15px auto;
+    background-color: #cc001b;
+    border: 2px solid white;
+    padding: 5px 0px;
+    text-align: center;
+    color: white;
+    font-family: numeralLight;
+    border-radius: 25px;
+  }
 }
 
 .qr-modal {
@@ -52,6 +65,19 @@
     font-family: numeralLight;
     border-radius: 25px;
   }
+  button {
+    text-decoration: none;
+    width: 25%;
+    max-width: 100px;
+    margin: 15px auto;
+    background-color: #cc001b;
+    border: 2px solid white;
+    padding: 10px 0px;
+    text-align: center;
+    color: white;
+    font-family: numeralLight;
+    border-radius: 25px;
+  }
 }
 
 @keyframes qrModal {

src/views/QRScan/index.js

@@ -29,7 +29,7 @@ class QRScan extends Component {
   state = {
     value: null,
     facingMode: 0,
-    tail: "Zist13-10",
+    tail: null,
   };
 
   async componentDidUpdate() {
@@ -125,7 +125,7 @@ class QRScan extends Component {
                 )}
               </section>
               {this.state.tail === null ? null : (
-                <Modal tail={this.state.tail} />
+                <Modal parent={this} tail={this.state.tail} />
               )}
               <section className="mobile-qr-scan__lasts d-flex flex-column">
                 <h2>آخرین مشاهدات</h2>

src/views/Support/index.js

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+
+import Navbar from "../Home/Navbar/index";
+import Input from "../Contact/Input/index";
+import Select from "../Contact/Select/index";
+
+import "../Contact/index.scss";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
+    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
+    span: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
+  },
+  mobile: {
+    h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
+    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34,
+    span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32,
+  },
+};
+
+class Support extends Component {
+  render() {
+    return (
+      <>
+        <div className="mobile-contact d-flex flex-column align-items-center">
+          <Navbar page={"contact"} />
+          <div className="mobile-contact__form d-flex flex-column">
+            <h1 style={{ fontSize: fontSize.mobile.h1 }}>تماس با ما</h1>
+            <p style={{ fontSize: fontSize.mobile.p }}>
+              برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
+              پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
+            </p>
+            <Input label={"نام‌و‌نام خانوادگی"} name={"name"} />
+            <Input label={"شماره تماس"} name={"mobile"} />
+            <Select options={["همه", "پرفروش"]} />
+            <Input label={"موضوع پیام"} name={"subject"} />
+            <textarea
+              placeholder="متن پیام"
+              name="description"
+              rows="5"
+            ></textarea>
+            <button>ارسال</button>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default Support;