reza add some changes

master
RezaAshrafi77 3 years ago
parent 221101f2a5
commit ed1bd15f99
  1. 76
      src/AppRouter.js
  2. 22
      src/views/AR/Item/index.js
  3. 76
      src/views/AR/Item/index.scss
  4. 2
      src/views/Activation/index.js
  5. 3
      src/views/Activation/index.scss
  6. 3
      src/views/Auth/Profile/Input/index.js
  7. 50
      src/views/Blogs/index.js
  8. 59
      src/views/Blogs/index.scss
  9. 46
      src/views/Home/HomeSlider/index.scss
  10. 4
      src/views/Home/HomeStatic/Flex/index.js
  11. 4
      src/views/Home/HomeStatic/Simple/index.js
  12. 7
      src/views/Home/HomeStatic/Vitrin/index.js
  13. 1
      src/views/Home/HomeStatic/index.scss
  14. 55
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  15. 3
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
  16. 13
      src/views/Home/SingleBlog/index.js
  17. 27
      src/views/MyBooks/index.js
  18. 557
      src/views/NewProfile/index.js
  19. 18
      src/views/Products/Product/index.js
  20. 17
      src/views/Products/Product/index.scss
  21. 2
      src/views/Products/Sort/index.js
  22. 9
      src/views/Products/index.js
  23. 11
      src/views/QRScan/Modal/index.js
  24. 26
      src/views/QRScan/Modal/index.scss
  25. 4
      src/views/QRScan/index.js
  26. 54
      src/views/Support/index.js

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

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

@ -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;
}
}
}

@ -23,7 +23,7 @@ const fontSize = {
}, },
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15, 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, form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 24,
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 25, span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 25,
}, },

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

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

@ -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);

@ -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;
}
}
}

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

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

@ -12,7 +12,9 @@ export default function Simple(props) {
const { data } = props; const { data } = props;
const parentStyle = { const parentStyle = {
// backgroundImage: `url('${data.imageUrl}')`, // 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, flex: data.flex,
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%", backgroundSize: "100% 100%",

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

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

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

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

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

@ -18,7 +18,7 @@ const maxMobileSize = 550;
const fontSize = { const fontSize = {
mobile: { 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, 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"> <div className="mobile-products-product__info d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1> <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
</div> </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> </div>
); );
}; };

@ -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: "",
},
};

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

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

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

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

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

@ -24,6 +24,19 @@
font-family: numeralLight; font-family: numeralLight;
border-radius: 25px; 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 { .qr-modal {
@ -52,6 +65,19 @@
font-family: numeralLight; font-family: numeralLight;
border-radius: 25px; 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 { @keyframes qrModal {

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

@ -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;
Loading…
Cancel
Save