From 2d7da703e4e4d53fe0d6ecd5899363b7d5c7e276 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Mon, 14 Feb 2022 10:58:55 +0330 Subject: [PATCH] OTP Done --- src/components/Checkbox/index.css | 97 ++++++++++++++++++++++++++++ src/components/Checkbox/index.js | 31 +++++++++ src/components/ShoppingCart/index.js | 4 +- src/constants/defaultValues.js | 6 +- src/redux/reducers/userProduct.js | 2 +- src/view/LoginSignUp/index.js | 28 ++++++-- src/view/services/index.js | 64 +++++++++--------- src/view/services/service/index.js | 60 ++++++++++++++--- tailwind.config.js | 4 +- 9 files changed, 243 insertions(+), 53 deletions(-) create mode 100644 src/components/Checkbox/index.css create mode 100644 src/components/Checkbox/index.js diff --git a/src/components/Checkbox/index.css b/src/components/Checkbox/index.css new file mode 100644 index 0000000..7fecbcd --- /dev/null +++ b/src/components/Checkbox/index.css @@ -0,0 +1,97 @@ +.checkbox-symbol { + position: absolute; + width: 0; + height: 0; + pointer-events: none; + user-select: none; + } + + .checkbox-container { + box-sizing: border-box; + color: #222; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + flex-flow: row wrap; + } + + .checkbox-container * { + box-sizing: border-box; + } + + .checkbox-input { + position: absolute; + visibility: hidden; + } + + .checkbox { + user-select: none; + cursor: pointer; + padding: 6px 8px; + border-radius: 6px; + overflow: hidden; + transition: all 0.3s ease; + display: flex; + } + + .checkbox:not(:last-child) { + margin-right: 6px; + } + + .checkbox:hover { + background: inherit; + } + + .checkbox span { + vertical-align: middle; + transform: translate3d(0, 0, 0); + } + + .checkbox span:first-child { + position: relative; + flex: 0 0 18px; + width: 18px; + height: 18px; + border-radius: 4px; + transform: scale(1); + border: 1px solid #cccfdb; + transition: all 0.3s ease; + } + + .checkbox span:first-child svg { + position: absolute; + top: 3px; + left: 2px; + fill: none; + stroke: #fff; + stroke-dasharray: 16px; + stroke-dashoffset: 16px; + transition: all 0.3s ease; + transform: translate3d(0, 0, 0); + } + + .checkbox span:last-child { + padding-left: 8px; + line-height: 18px; + } + + .checkbox:hover span:first-child { + border-color: #06BAC0; + } + + .checkbox-input:checked + .checkbox span:first-child { + background: #06BAC0; + border-color: #06BAC0; + animation: zoom-in-out 0.3s ease; + } + + .checkbox-input:checked + .checkbox span:first-child svg { + stroke-dashoffset: 0; + } + + @keyframes zoom-in-out { + 50% { + transform: scale(0.9); + } + } \ No newline at end of file diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js new file mode 100644 index 0000000..f9d4f26 --- /dev/null +++ b/src/components/Checkbox/index.js @@ -0,0 +1,31 @@ +import React from "react"; +import './index.css'; + +export default function Checkbox(props) { + // console.log(props) + return ( +
+ + + + + + +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/src/components/ShoppingCart/index.js b/src/components/ShoppingCart/index.js index 9a03612..08bf97a 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 ( diff --git a/src/constants/defaultValues.js b/src/constants/defaultValues.js index 63e72a9..2591544 100644 --- a/src/constants/defaultValues.js +++ b/src/constants/defaultValues.js @@ -1,7 +1,7 @@ export const ApiConfig = { - // apiKey: 'AIzaSyBBksq-Asxq2M4Ot-75X19IyrEYJqNBPcg', - // authDomain: 'dnvn.ir', - // baseUrl: 'https://dnvn.ir/api/v1', + apiKey: 'AIzaSyBBksq-Asxq2M4Ot-75X19IyrEYJqNBPcg', + authDomain: 'dnvn.ir', + baseUrl: 'https://dnvn.ir/api/v1', //baseUrl: 'http://localhost:3030/api/v1', loginURL: 'user/login', otploginURL: 'user/otp/login', diff --git a/src/redux/reducers/userProduct.js b/src/redux/reducers/userProduct.js index 80ade2d..1434248 100644 --- a/src/redux/reducers/userProduct.js +++ b/src/redux/reducers/userProduct.js @@ -14,7 +14,7 @@ export default function userFactor(state = initialState, action) { switch (type) { case "userProduct/list": const checkEmpty = data.filter( - (item) => item.condition === 2 && item.product.productType === (1 || 3) + (item) => item.condition === 2 ); const hasPhysical = data.filter((item) => item.product.productType === 2).length > 0 diff --git a/src/view/LoginSignUp/index.js b/src/view/LoginSignUp/index.js index 0bb6e8f..0fc4b81 100644 --- a/src/view/LoginSignUp/index.js +++ b/src/view/LoginSignUp/index.js @@ -12,6 +12,10 @@ import Input from "../../components/input/signUpInput"; import onInput from "../../utils/onInput"; import Timer from "../../components/Timer"; + +import { connect } from "react-redux"; +import { user, publicApi } from "../../redux/actions"; + const LoginSignUp = ({ activeLogin, sendOtp, sendPhoneNumber, @@ -21,7 +25,7 @@ const LoginSignUp = ({ activeLogin, setHeaderOptions, }) => { - const [steps, setSteps] = useState(2); + const [steps, setSteps] = useState(0); const [index, setIndex] = useState(1); const [register, setRegister] = useState(false); const timeoutRef = useRef(null); @@ -188,10 +192,12 @@ const LoginSignUp = ({ activeLogin, signUpFields?.cellphone?.slice(0, 2) === "09" && signUpFields?.cellphone.length === 11 ) { + setSteps(2) - setResend(false); + sendPhoneNumber({ cellphone: signUpFields?.cellphone }); setError(undefined); + console.log(signUpFields.cellphone) } else { setError("شماره موبایل خود را چک کنید."); } @@ -215,7 +221,7 @@ const LoginSignUp = ({ activeLogin, applicationToken: "22", }); setError(undefined); - + } else { setError("کد وارد شده را چک کنید."); } @@ -503,4 +509,18 @@ const LoginSignUp = ({ activeLogin, ); }; -export default LoginSignUp; \ No newline at end of file +const mapStateToProps = (state) => ({ + loginFlag : state.user.status, + }); + + const mapDispatchToProps = { + sendOtp: user.otp_login, + sendPhoneNumber: user.otp, + setHeaderOptions: publicApi.setHeaderOptions, + }; + + export default connect( + mapStateToProps, + mapDispatchToProps + )(LoginSignUp); + \ No newline at end of file diff --git a/src/view/services/index.js b/src/view/services/index.js index 7f6a426..b23cd27 100644 --- a/src/view/services/index.js +++ b/src/view/services/index.js @@ -17,7 +17,7 @@ import Packages from "../dashboard2/Packages"; const Services = ({ isMobile, - // books, + books, getList, grades, gradeFilter, @@ -45,6 +45,7 @@ const Services = ({ const [popup, setPopUp] = useState(false); const [popUpContent, setPopUpContent] = useState({ + id: 1, title: "", video: "", description: "", @@ -99,38 +100,7 @@ const Services = ({ role: "", }, ]; - const books = [ - { - name : 'علوم', - product: [{price: 1000}], - vodTeacher: 'علی استادی' - }, - { - name : 'علوم', - product: [{price: 1000}], - vodTeacher: 'علی استادی' - }, - { - name : 'علوم', - product: [{price: 1000}], - vodTeacher: 'علی استادی' - }, - { - name : 'علوم', - product: [{price: 1000}], - vodTeacher: 'علی استادی' - }, - { - name : 'علوم', - product: [{price: 1000}], - vodTeacher: 'علی استادی' - }, - { - name : 'علوم', - product: [{price: 1000}], - vodTeacher: 'علی استادی' - }, - ] + const [selectedGames, setSelectedGames] = useState([]); const [gameId, setGameId] = useState(1); const chooseGame = (id) => { @@ -355,6 +325,7 @@ const Services = ({ to="#" onClick={() => { setPopUpContent({ + id: gameId, title: product?.name, video: "", teacher: product.vodTeacher, @@ -363,8 +334,33 @@ const Services = ({ price: product.product[0].price, classHour: 21, classMinute: 56, + image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg', + examCont : [ + { + title: 'بخش اول آزمون ' + product.name, + date: '۱۴۰۰/۱۲/۱۳', + time: '۱۴:۴۶', + numberOfQ: '۱۸', + price: 10000 + }, + { + title: 'بخش دوم آزمون ' + product.name, + date: '۱۴۰۰/۱۲/۱۴', + time: '۱۴:۴۶', + numberOfQ: '۱۸', + price: 10000 + }, + { + title: 'بخش سوم آزمون ' + product.name, + date: '۱۴۰۰/۱۲/۱۵', + time: '۱۴:۴۶', + numberOfQ: '۳۲', + price: 250000 + }, + ] }); - if(gameId == 1){setPopUp(true);} + setPopUp(true); + console.log(gameId) }} > {/* {console.log(product)} */} diff --git a/src/view/services/service/index.js b/src/view/services/service/index.js index 04cb957..60953f6 100644 --- a/src/view/services/service/index.js +++ b/src/view/services/service/index.js @@ -1,6 +1,6 @@ import React from "react"; import Button from "../../../components/Button"; - +import Checkbox from '../../../components/Checkbox'; const servicePopUp = ({ content, closeOnClick, @@ -21,13 +21,17 @@ const servicePopUp = ({ -
-
-

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

+
+ { content.id !== 3 &&
+

+ + {content.id == 1 ? 'کلاس آنلاین ' : content.id == 4 ? 'کتاب ' : null} + + {content.title}

{content.description}

-
+
نام کلاس
{content.title}
@@ -46,13 +50,53 @@ const servicePopUp = ({
-
-
} + { + content.id == 3 && +
+

آزمون {content.title}

+
+
نوع آزمون : آنلاین
+
تاریخ شروع : 1400/12/03
+
تعداد آزمون : ۱۸
+
بودجه بندی آزمون
+
+
+ + توجه: + + به صورت معمول تمامی آزمون ها برای شما خریداری خواهند شد مگر اینکه شما به صورت دلخواه یک یا چند آزمون را انتخاب نمایید +
+ { + content.examCont?.map( + (item, index) => ( +
+
+ +

{item.title}

+
+

تاریخ : {item.date}

+

ساعت : {item.time}

+

بودجه بندی !

+

تعداد سوالات: {item.numberOfQ}

+

{item.price} تومان

+
+ ) + ) + } +
+ } + + {content.id == 1 && + } + + { + content.id == 4 && + }