From b6501aad7fbfcee08a57b0330ea0a323cb218ce1 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Sat, 12 Feb 2022 12:57:55 +0330 Subject: [PATCH] So Many Changes New Product Component Made And Cmpleted Categories Sorted With Mr.Khajis Component Redux Changes Cart Remove Or Decrease OTP is Ready To use But Not Merged --- src/App.js | 2 +- src/components/Product/index.js | 162 ++++++++-- src/components/ShoppingCart/Product/index.js | 50 +++- src/components/ShoppingCart/index.js | 16 +- src/redux/actions/book.js | 2 +- src/redux/actions/userProduct.js | 2 +- src/store/index.js | 127 -------- src/view/LoginSignUp/SignUpForm/index.js | 292 +++++++++++++++++++ src/view/contact/index.js | 3 +- src/view/dashboard2/Games.js | 22 +- src/view/register/SignUpForm/index.js | 292 +++++++++++++++++++ src/view/services/index.js | 95 ++++-- src/view/services/service/index.js | 70 +++++ tailwind.config.js | 3 +- 14 files changed, 921 insertions(+), 217 deletions(-) delete mode 100644 src/store/index.js create mode 100644 src/view/LoginSignUp/SignUpForm/index.js create mode 100644 src/view/register/SignUpForm/index.js create mode 100644 src/view/services/service/index.js diff --git a/src/App.js b/src/App.js index 68ca9f1..c89c0ba 100644 --- a/src/App.js +++ b/src/App.js @@ -623,7 +623,7 @@ function App() { } } } - const [LOGIN,setLOGIN]=useState(false); + const [LOGIN,setLOGIN]=useState(true); const activeLogin=()=>{ setLOGIN(true); } diff --git a/src/components/Product/index.js b/src/components/Product/index.js index 2cd3e4b..028ab9f 100644 --- a/src/components/Product/index.js +++ b/src/components/Product/index.js @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import { BsExclamationSquareFill } from "react-icons/bs"; @@ -33,51 +34,148 @@ const ProductDesign = ({ numberOfRegards, productHolderHoverBorder, hoverMode, - teacher + teacher, + btnOnClick, + catId }) => { const [isHovering, setIsHovering] = useState(false); - return ( -
- + + + const emkanat = [ + { + title: 'دستشویی', + isActive: true, + }, + { + title: 'آب خوری', + isActive: true, + }, + { + title: 'تخته هوشمند', + isActive: true, + }, + { + title: 'کامپیوتر', + isActive: true, + }, + { + title: 'کتابخانه', + isActive: true, + }, + { + title: 'مشاوره تحصیلی', + isActive: true, + }, + { + title: 'آزمایشگاه', + isActive: false, + }, + ] + + + if (catId == 1) { + return ( +
+
-

{productName}

-

+

{productName}

+

در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد -

+

-
-

- استاد : {teacher} -

-
+
+

+ استاد : {teacher} +

+
-

نوع گروه : A

+

نوع گروه : A

- -
-

{productPrice} تومان

-
+

{productPrice} تومان

+
- -
- -
- - - + > + +
+ +
+ + + +
+ + + ) + } + if (catId == 2) { + return ( +
+
+ {/* image */} +
- - - ); +
+

دبیرستان غیر انتفاعی مدرسان هوشمند

+

تهران خیابان انقلاب اسلامی حدفاصل ابوریحان و فلسطین پلاک2

+
+
+ شماره تلفن: ۰۲۱۶۶۴۵۶۷۳۸ +
+
+ آدرس وبسایت : www.google.com +
+
+ آدرس بروی نقشه +
+
+
+
+ امکانات : + + { + emkanat.map((item, index) => ( +
+
+ + + + + + +
+

{item.title}

+
+ )) + } + +
+
+

{productPrice} تومان

+
+ +
+ +
+ +
+
+ +
+ ) + } }; export default ProductDesign; diff --git a/src/components/ShoppingCart/Product/index.js b/src/components/ShoppingCart/Product/index.js index 6b6c9e8..89a1c91 100644 --- a/src/components/ShoppingCart/Product/index.js +++ b/src/components/ShoppingCart/Product/index.js @@ -145,15 +145,53 @@ function Product({ product, grades, pushToCart, isMobile }) { // /> // // - return( -
+ return ( +
-
{product?.productCat}
-

{product?.product?.book?.name}

+
{product?.product?.book?.category}
+

{product?.product?.book?.name}

+
+
+ {product?.product?.price} تومان +
+
+ pushToCart( + { + productId: product?.productId, + userId: product?.userId, + count: -product?.count, + }, + {}, + { id: product?.factorId } + ) + } + > + + + + {product.count == 1 ? + + + + + + + : + + + + + } + + -
- {product?.product?.price} تومان +
); diff --git a/src/components/ShoppingCart/index.js b/src/components/ShoppingCart/index.js index a728cf8..9a03612 100644 --- a/src/components/ShoppingCart/index.js +++ b/src/components/ShoppingCart/index.js @@ -29,11 +29,11 @@ function ShoppingCart({ }) { const [phase, setPhase] = useState("products"); - useEffect(() => { + getList(); getFactorInfo({ userId }); setHeaderOptions(headerOptions); - }, []); + // const Table = () => { // return ( @@ -222,31 +222,31 @@ function ShoppingCart({ return(
- - + {list.map((product, index) => ( ))}
+ {/* {console.log(list)} */}

جمع مبالغ خدمات

-

۴۲۰۰۰۰ تومان

+

{factorInfo?.sumPrice} تومان

تخفیف

-

-۱۰۰۰۰ تومان

+

{factorInfo?.offPrice} - تومان

کسر از اعتبار

-

-۴۵۰۰۰۰ تومان

+

-۰ تومان

+
+
+ + {!resend && ( +
+ یک کد چهار رقمی تا  {" "} +   دیگر برای شماره +  {" "} + + {signUpFields?.cellphone} + {" "} +   ارسال خواهد شد. +
+ )} + +
+
+ + onChange( + e.target.name, + (e.target.value = onInput.numberOnly(e.target.value)) + ) + } + maxlength="1" + ref={otp1} + /> + + onChange( + e.target.name, + (e.target.value = onInput.numberOnly(e.target.value)) + ) + } + maxlength="1" + ref={otp2} + /> + + onChange( + e.target.name, + (e.target.value = onInput.numberOnly(e.target.value)) + ) + } + maxlength="1" + ref={otp3} + /> + + onChange( + e.target.name, + (e.target.value = onInput.englishAndNumberWithoutSpace(e.target.value)) + ) + } + maxlength="1" + ref={otp4} + /> +
+
+ +
+
+
+
+ + ); +} + +const mapStateToProps = (state) => ({ + loginFlag : state.user.status, +}); + +const mapDispatchToProps = { + sendOtp: user.otp_login, + sendPhoneNumber: user.otp, + setHeaderOptions: publicApi.setHeaderOptions, +}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(SignUp); diff --git a/src/view/contact/index.js b/src/view/contact/index.js index 2431983..a3dca3d 100644 --- a/src/view/contact/index.js +++ b/src/view/contact/index.js @@ -77,7 +77,8 @@ const ContactUs = () => { -
+
+
diff --git a/src/view/dashboard2/Games.js b/src/view/dashboard2/Games.js index ba00e85..388e91f 100644 --- a/src/view/dashboard2/Games.js +++ b/src/view/dashboard2/Games.js @@ -15,46 +15,46 @@ const Games = ({ gameId, chooseGame, selectedGames }) => { { id: 1, img: img1, - title: "ماجراجو", + title: 'کلاس های آموزشی', }, { id: 2, img: img2, - title: "فرفره", + title: 'پیش ثبت نام مدارس', }, { id: 3, img: img3, - title: "آشپزباشی", + title: 'بسته های آزمون', }, { id: 4, img: img4, - title: "صخره نورد", + title: 'کتاب های آموزشی', }, { id: 5, img: img5, - title: "معمارک", + title: 'دوره های مجازی', }, { id: 6, img: img6, - title: "کنجکاو", + title: 'سایر خدمات', }, ]); return ( -
+
{data.map((item, index) => (
{ game-img
{item.title}
diff --git a/src/view/register/SignUpForm/index.js b/src/view/register/SignUpForm/index.js new file mode 100644 index 0000000..a47d664 --- /dev/null +++ b/src/view/register/SignUpForm/index.js @@ -0,0 +1,292 @@ +import React, { useState, useRef, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import Input from "../../../components/Input"; +import Button from "../../../components/Button"; +import Timer from "../../../components/Timer"; +import onInput from "../../../utils/onInput"; +import { Link } from "react-router-dom"; + +import { connect } from "react-redux"; +import { user, publicApi } from "../../../redux/actions"; +import _ from "lodash"; +//assets +import logoIcon from "./assets/logo.svg"; + +function SignUp({ + sendOtp, + sendPhoneNumber, + loginFlag, + theme, + headerOptions, + setHeaderOptions, +}) { + const [level, setLevel] = useState("phonenumber"); + const [signUpFields, setSignUpFiels] = useState({}); + const [error, setError] = useState(""); + const [resend, setResend] = useState(false); + const navigate = useNavigate(); + + const otp1 = useRef(); + const otp2 = useRef(); + const otp3 = useRef(); + const otp4 = useRef(); + + const onChange = (name, value) => { + setSignUpFiels({ ...signUpFields, [name]: value }); + switch (name) { + case "otp1": + if (value) { + otp2.current.focus(); + } + break; + case "otp2": + if (value) { + otp3.current.focus(); + } else { + otp1.current.focus(); + } + break; + case "otp3": + if (value) { + otp4.current.focus(); + } else { + otp2.current.focus(); + } + break; + case "otp4": + if (value) { + checkOtp(); + } else { + otp3.current.focus(); + } + break; + default: + break; + } + }; + + const checkPhoneNumber = (e) => { + if ( + signUpFields?.cellphone?.slice(0, 2) === "09" && + signUpFields?.cellphone.length === 11 + ) { + setLevel("otp"); + setResend(false); + sendPhoneNumber({ cellphone: signUpFields?.cellphone }); + setError(undefined); + } else { + setError("شماره موبایل خود را چک کنید."); + } + }; + + const checkOtp = () => { + if ( + signUpFields?.otp1 && + signUpFields?.otp2 && + signUpFields?.otp3 && + signUpFields?.otp4 + ) { + sendOtp({ + cellphone: signUpFields?.cellphone, + otp: + signUpFields?.otp1 + + signUpFields?.otp2 + + signUpFields?.otp3 + + signUpFields?.otp4, + userToken: "2", + applicationToken: "22", + }); + setError(undefined); + } else { + setError("کد وارد شده را چک کنید."); + } + }; + + const numberInput = useRef(); + + useEffect(() => { + // numberInput.current.focus(); + setHeaderOptions(headerOptions); + }, []); + + useEffect(() => { + if (signUpFields?.otp?.length === 4) { + sendOtp({ + cellphone: signUpFields?.cellphone, + otp: signUpFields?.otp, + userToken: "2", + applicationToken: "22", + }); + } + }, [signUpFields]); + + useEffect(() => { + if (level === "phonenumber") { + // numberInput.current.focus(); + } else { + // otpInput.current.focus(); + } + }, [level]); + + useEffect(() => { + if (loginFlag) { + navigate("/"); + } + }, [loginFlag]); + const light = theme === "light"; + return ( +
+
+ + + سلام
خوش برگشتی! + +
+ onChange(name, value)} + value={signUpFields?.cellphone} + align="text-center" + maxLength="11" + direction="ltr" + /> + {error} +
+
+
+
+ + {!resend && ( +
+ یک کد چهار رقمی تا  {" "} +   دیگر برای شماره +  {" "} + + {signUpFields?.cellphone} + {" "} +   ارسال خواهد شد. +
+ )} + +
+
+ + onChange( + e.target.name, + (e.target.value = onInput.numberOnly(e.target.value)) + ) + } + maxlength="1" + ref={otp1} + /> + + onChange( + e.target.name, + (e.target.value = onInput.numberOnly(e.target.value)) + ) + } + maxlength="1" + ref={otp2} + /> + + onChange( + e.target.name, + (e.target.value = onInput.numberOnly(e.target.value)) + ) + } + maxlength="1" + ref={otp3} + /> + + onChange( + e.target.name, + (e.target.value = onInput.englishAndNumberWithoutSpace(e.target.value)) + ) + } + maxlength="1" + ref={otp4} + /> +
+
+ +
+
+
+
+
+ ); +} + +const mapStateToProps = (state) => ({ + loginFlag : state.user.status, +}); + +const mapDispatchToProps = { + sendOtp: user.otp_login, + sendPhoneNumber: user.otp, + setHeaderOptions: publicApi.setHeaderOptions, +}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(SignUp); diff --git a/src/view/services/index.js b/src/view/services/index.js index 0d1025f..f764cbd 100644 --- a/src/view/services/index.js +++ b/src/view/services/index.js @@ -12,6 +12,9 @@ import img4 from "../../assets/img/Group 1364.svg"; import img5 from "../../assets/img/Group 1357.svg"; import img6 from "../../assets/img/Group 1362.svg"; import ShoppingCart from "../../components/ShoppingCart"; +import ServicePopUp from "./service"; +import Games from "../dashboard2/Games"; +import Packages from "../dashboard2/Packages"; const Services = ({ isMobile, books, @@ -33,6 +36,17 @@ const Services = ({ isMobile, productsType: "کتاب", }); + const [popup, setPopUp] = useState(false) + const [popUpContent, setPopUpContent] = useState({ + title: '', + video: '', + description: '', + price: '', + teacher: '', + classHour: '', + classMinute: '' + + }) const onChange = (name, value) => { setFilter({ ...filter, [name]: value }); @@ -80,13 +94,19 @@ const Services = ({ isMobile, }, ]; - + const [selectedGames, setSelectedGames] = useState([]); + const [gameId, setGameId] = useState(1); + const chooseGame = (id) => { + setGameId(id); + }; return ( -
+
+ {popup ? setPopUp(false)} /> : null}
-
- { + +
+ {/* { services.map((item, index) => (
{item.title}
)) - } + } */} +
{/* filters */}
@@ -134,11 +159,11 @@ const Services = ({ isMobile,
-
setFilterCheck([...prevState, filterCheck[0] = !filterCheck[0]])} + onClick={prevState => setFilterCheck([...prevState, filterCheck[0] = !filterCheck[0]])} >

آنلاین

@@ -207,30 +232,35 @@ const Services = ({ isMobile,
- +
-
+
+ {books?.map((product, index) => ( - - pushToCart({ - productId: product?.productId, - userId: product?.userId, - count: 1, - }) - - } - > + // to={"/class/" + product?.id} + to='#' + onClick={() => { + setPopUpContent({ + title: product?.name, + video: '', + teacher: product.vodTeacher, + description: 'در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت', + price: product.product[0].price, + classHour: 21, + classMinute: 56 + }) + setPopUp(true); + }} + > + {/* {console.log(product)} */} + + pushToCart({ + productId: product?.productId, + userId: product?.userId, + count: 1, + })} /> + ))}
+
); }; diff --git a/src/view/services/service/index.js b/src/view/services/service/index.js new file mode 100644 index 0000000..04cb957 --- /dev/null +++ b/src/view/services/service/index.js @@ -0,0 +1,70 @@ +import React from "react"; +import Button from "../../../components/Button"; + +const servicePopUp = ({ + content, + closeOnClick, + addToCartFunction +}) => { + return ( +
+
+
+
+ + + + + + + + +
+
+
+
+

کلاس آنلاین {content.title}

+

+ {content.description} +

+
+
+
نام کلاس
+
{content.title}
+
+
+
استاد
+
{content.teacher}
+
+
+
زمان کلاس
+
+ {content.classHour} ساعت و {content.classMinute} دقیقه +
+
+ + +
+ +
+ +
+
+
+
+
+ ); +}; + +export default servicePopUp; \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 3dd4c92..15fc487 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -30,7 +30,8 @@ module.exports = { grayEC: '#ececec', red82OP: 'rgba(223, 20, 82, 0.08)', pinkF5: '#fff1f5', - black40: '#404040' + black40: '#404040', + green17 : '#8daf17' }, }, screens: {