From 0651eaf99bb5405067d62c99595f13bdcdc6aa8b Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Wed, 13 Oct 2021 16:49:14 +0330 Subject: [PATCH] reza added some change --- src/App.tsx | 4 +- src/components/Loader/index.js | 9 +++ src/components/PrivateRouter/index.js | 7 ++- src/custom.scss | 26 ++++++++ src/redux/actions-type/index.tsx | 2 + src/redux/actions-type/userFactor.tsx | 51 ++++++++++++++++ src/redux/actions/userFactor.tsx | 16 +++++ src/redux/reducers/index.tsx | 2 + src/redux/reducers/userFactor.tsx | 40 +++++++++++++ src/router.js | 41 ++++--------- src/views/Courses/Course/index.scss | 2 +- src/views/Courses/index.scss | 2 +- src/views/Home/index.tsx | 12 +++- .../Subscription/DiscountCode/index.scss | 19 ++++-- src/views/Subscription/DiscountCode/index.tsx | 59 +++++++++++++++++-- .../Subscription/SubscribeRadio/index.scss | 7 ++- src/views/Subscription/index.scss | 10 ++-- src/views/Subscription/index.tsx | 15 +++-- 18 files changed, 264 insertions(+), 60 deletions(-) create mode 100644 src/components/Loader/index.js create mode 100644 src/redux/actions-type/userFactor.tsx create mode 100644 src/redux/reducers/userFactor.tsx diff --git a/src/App.tsx b/src/App.tsx index 2c0935e..8a4448b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,8 +11,8 @@ function App() { + ); +} diff --git a/src/components/PrivateRouter/index.js b/src/components/PrivateRouter/index.js index ea9b2cd..699d7eb 100644 --- a/src/components/PrivateRouter/index.js +++ b/src/components/PrivateRouter/index.js @@ -12,10 +12,11 @@ const PrivateRouter = ({ - true ? ( - - ) : ( + status ? ( + ) : ( + + ) } /> diff --git a/src/custom.scss b/src/custom.scss index 41fcdda..56a0209 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -261,6 +261,32 @@ p { } +//Toastify +.Toastify{ + *{ + font-family: numeralLight !important; + } +} + +//Loader +.full-loader{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + z-index: 1000; + background-color: rgba(0, 0, 0, 0.261); + position: fixed; + top: 0px; + left: 0px; +} + +//blur filter +.blur{ + filter: blur(8px); +} + @media screen and (min-width: 1441px) { .submit { diff --git a/src/redux/actions-type/index.tsx b/src/redux/actions-type/index.tsx index ffb5beb..1f42bfe 100644 --- a/src/redux/actions-type/index.tsx +++ b/src/redux/actions-type/index.tsx @@ -6,6 +6,8 @@ export type { default as BlogAction } from "./blog"; export type { default as productAction } from "./product"; export type { default as FaqAction } from "./faq"; export type { default as FileAction } from "./file"; +export type { default as UserFactorAction } from "./userFactor"; + diff --git a/src/redux/actions-type/userFactor.tsx b/src/redux/actions-type/userFactor.tsx new file mode 100644 index 0000000..8a21e58 --- /dev/null +++ b/src/redux/actions-type/userFactor.tsx @@ -0,0 +1,51 @@ +interface list { + type: "userFactor/myList"; + data: any; +} + +interface info { + type: "userFactor/info"; + data: any; +} + +interface update { + type: "userFactor/update"; + data: any; +} + +interface payment { + type: "userFactor/payment"; + data: any; +} + +interface verify { + type: "userFactor/verify"; + data: any; +} + +interface deleteUserOffCode { + type: "userFactor/deleteUserOffCode"; + data: any; +} + +interface error { + type: "userFactor/error"; + data: undefined; +} + +interface loading { + type: "userFactor/loading"; + data: undefined; +} + +type UserFactorAction = + | list + | info + | update + | payment + | verify + | deleteUserOffCode + | loading + | error; + +export default UserFactorAction; diff --git a/src/redux/actions/userFactor.tsx b/src/redux/actions/userFactor.tsx index 5192a3c..58d6428 100644 --- a/src/redux/actions/userFactor.tsx +++ b/src/redux/actions/userFactor.tsx @@ -9,6 +9,22 @@ const userFactor = { (data = {}) => async (dispatch: Dispatch) => await proxy.get("userFactor/verify", data, { dispatch }), + info: + (data = {}) => + async (dispatch: Dispatch) => + await proxy.get("userFactor/info", data, { dispatch }), + update: + (data = {}, data2 = {}) => + async (dispatch: Dispatch) => { + await proxy.put("userFactor/update", data, { dispatch }); + await proxy.get("userFactor/info", data2, { dispatch }); + }, + deleteUserOffCode: + (data = {}, data2 = {}) => + async (dispatch: Dispatch) => { + await proxy.delete("userFactor/deleteUserOffCode", data, { dispatch }); + await proxy.get("userFactor/info", data2, { dispatch }); + }, }; export default userFactor; diff --git a/src/redux/reducers/index.tsx b/src/redux/reducers/index.tsx index 643033b..d84d04c 100644 --- a/src/redux/reducers/index.tsx +++ b/src/redux/reducers/index.tsx @@ -6,4 +6,6 @@ export { default as blog } from "./blog"; export { default as product } from "./product"; export { default as faq } from "./faq"; export { default as file } from "./file"; +export { default as userFactor } from "./userFactor"; + diff --git a/src/redux/reducers/userFactor.tsx b/src/redux/reducers/userFactor.tsx new file mode 100644 index 0000000..aa0ac22 --- /dev/null +++ b/src/redux/reducers/userFactor.tsx @@ -0,0 +1,40 @@ +import { toast } from "react-toastify"; +import {UserFactorAction} from '../actions-type'; +const initialState = { + loading: false, + error: null, + list: null, + info: null, + sum: null, + checkEmpty: false, + isVerified: null, +}; +export default function userFactor(state = initialState, action : UserFactorAction) { + let { type, data } = action; + switch (type) { + case "userFactor/myList": + return { ...state, loading: false, list: data, error: null }; + case "userFactor/info": + return { ...state, loading: false, info: data, error: null }; + case "userFactor/update": + toast.success("درخواست شما با موفقیت انجام شد."); + return { ...state, loading: false, error: null }; + // case "userFactor/add": + // toast.success("درخواست شما با موفقیت انجام شد."); + // return { ...state, loading: false, error: null, sum: data.payPrice }; + case "userFactor/deleteUserOffCode": + return { ...state, loading: false, error: null }; + case "userFactor/payment": + window.location.replace(data); + return { ...state, loading: false, error: null, isVerified: false }; + case "userFactor/verify": + return { ...state, loading: false, error: null, isVerified: true }; + case "userFactor/loading": + return { ...state, loading: true }; + case "userFactor/error": + toast.error(data.message); + return { ...state, loading: false, error: data.message }; + default: + return state; + } +} diff --git a/src/router.js b/src/router.js index dc0e992..393b52c 100644 --- a/src/router.js +++ b/src/router.js @@ -19,47 +19,32 @@ import About from './views/About'; // import proxy from "./redux/proxy"; function router({ status }) { - const home = ( - {1 ? : } - ); return ( - {home} - - - + + + + - - - - - - + + + + + + + + + diff --git a/src/views/Courses/Course/index.scss b/src/views/Courses/Course/index.scss index 3dd0a3b..934e1c2 100644 --- a/src/views/Courses/Course/index.scss +++ b/src/views/Courses/Course/index.scss @@ -47,7 +47,7 @@ } } -@media screen and (min-width: 1008px) and (max-width: 1400px) { +@media screen and (min-width: 1008px) and (max-width: 1440px) { .courses-course { &:hover { background-color: #dddddd21; diff --git a/src/views/Courses/index.scss b/src/views/Courses/index.scss index fbc0508..b6342b6 100644 --- a/src/views/Courses/index.scss +++ b/src/views/Courses/index.scss @@ -14,7 +14,7 @@ } } -@media screen and (min-width: 1008px) and (max-width: 1400px) { +@media screen and (min-width: 1008px) and (max-width: 1440px) { .courses { main { max-width: 700px; diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index bbf5957..8a6a589 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -11,6 +11,7 @@ import Header from "./Header"; import AppDownload from "./AppDownload"; import Vocal from "../../components/Vocal/Vocal"; import scroll from "../../util/scroll"; +import Loader from "../../components/Loader"; import { connect } from "react-redux"; import { book, publicApi } from "../../redux/actions"; @@ -25,6 +26,8 @@ function Home({ selectedSort, sortFilter, getHeader, + bookLoading, + publicLoading, }: any) { const [grade, setGrade] = useState(null); const [vocal, setVocal] = useState(false); @@ -45,7 +48,7 @@ function Home({ <>
@@ -66,6 +69,11 @@ function Home({ {vocal ? ( ) : null} + { + (bookLoading || publicLoading ) &&
+ +
+ } ); } @@ -77,6 +85,8 @@ export default connect( sortFilterCourse: state.book.sortFilterCourse, selectedSort: state.book.selectedSort, headerData: state.publicApi.header, + bookLoading: state.book.loading, + publicLoading : state.publicApi.loading, }), { getCourseList: book.list, diff --git a/src/views/Subscription/DiscountCode/index.scss b/src/views/Subscription/DiscountCode/index.scss index d45e182..4c833b3 100644 --- a/src/views/Subscription/DiscountCode/index.scss +++ b/src/views/Subscription/DiscountCode/index.scss @@ -3,8 +3,15 @@ border: 1px solid #707070; border-radius: 10px; padding: 10px 30px; - h3{ + &__cancel{ + background-color: orange; color: white; + } + p{ + color: orange; + } + h3{ + color: #aaa; margin: 0px; } input{ @@ -12,9 +19,9 @@ border-top-right-radius: 10px; border-bottom-right-radius: 10px; border: 0px; - color: white; + color: #aaa; &::placeholder{ - color: white; + color: #aaa; } } button{ @@ -70,20 +77,20 @@ .discount-code{ padding: 10px; h3{ - font-size: calc(100vw / 40); + font-size: calc(100vw / 45); } input{ padding: 10px; width: 300px; font-size: calc(100vw / 45); &::placeholder{ - font-size: calc(100vw / 50); + font-size: calc(100vw / 55); } margin-right: 5px; } button{ width : 90px; - font-size: calc(100vw / 40); + font-size: calc(100vw / 45); } } } diff --git a/src/views/Subscription/DiscountCode/index.tsx b/src/views/Subscription/DiscountCode/index.tsx index d231c67..20c49aa 100644 --- a/src/views/Subscription/DiscountCode/index.tsx +++ b/src/views/Subscription/DiscountCode/index.tsx @@ -1,16 +1,63 @@ -import React from 'react'; -import './index.scss'; +import React, { useState } from "react"; +import { connect } from "react-redux"; +import { userFactor } from "../../../redux/actions"; +import "./index.scss"; -export default function DiscountCode() { +function DiscountCode({ + codeId, + setCodeId, + delCodeId, + userId, + factorId, + code, +}: any) { + const [value, setValue] = React.useState(code || ""); + const setOff = () => { + setCodeId({ offCodeValue: value, userId: userId, id: Number(factorId) || null }); + }; return (

کارت هدیه یا کد تخفیف دارید؟

- - + {!code ? ( + <> + setValue(e.target.value)} + /> + + + ) : ( + <> +

+ کد تخفیف برای شما ثبت شده است +

+ + + )}
- ) + ); } + +export default connect( + (state: any) => ({ + codeId: state.userFactor.info?.codeId, + code: state.userFactor.info?.offCode?.code, + userId: state.user.status.id, + factorId: state.userFactor.info?.id, + }), + { + setCodeId: userFactor.update, + delCodeId: userFactor.deleteUserOffCode, + } +)(DiscountCode); diff --git a/src/views/Subscription/SubscribeRadio/index.scss b/src/views/Subscription/SubscribeRadio/index.scss index 6f13e46..47afe6b 100644 --- a/src/views/Subscription/SubscribeRadio/index.scss +++ b/src/views/Subscription/SubscribeRadio/index.scss @@ -1,6 +1,6 @@ .subscribe-radio{ width: 100%; - border : 1px solid #DFDFDF; + border : 1px solid #777; margin-bottom: 15px; border-radius: 10px; cursor: pointer; @@ -8,6 +8,7 @@ border-top-right-radius: 10px; border-bottom-right-radius: 10px; h2{ + color: white !important; margin-bottom: 0px; } } @@ -143,7 +144,7 @@ &__name{ flex: 7; h2{ - font-size: calc(100vw / 35); + font-size: calc(100vw / 40); margin-right: 10px; } } @@ -165,7 +166,7 @@ font-size: calc(100vw / 45); } strong{ - font-size: calc(100vw / 30); + font-size: calc(100vw / 38); } } } diff --git a/src/views/Subscription/index.scss b/src/views/Subscription/index.scss index 8bb69db..b45eafa 100644 --- a/src/views/Subscription/index.scss +++ b/src/views/Subscription/index.scss @@ -1,11 +1,11 @@ .subscription { main { h1,h2{ - color: white; + color: #aaa; } p{ - color : #969696; - margin : 5px 0px 35px; + color : #aaa; + margin : 10px 0px 35px; } } } @@ -49,10 +49,10 @@ margin-top: 0px; max-width: 900px; h1{ - font-size: calc(100vw / 30); + font-size: calc(100vw / 35); } p{ - font-size: calc(100vw / 40); + font-size: calc(100vw / 55); } } } diff --git a/src/views/Subscription/index.tsx b/src/views/Subscription/index.tsx index b19712b..ad46292 100644 --- a/src/views/Subscription/index.tsx +++ b/src/views/Subscription/index.tsx @@ -6,17 +6,18 @@ import DiscountCode from "./DiscountCode"; import { connect } from "react-redux"; import { product } from "../../redux/actions"; import scroll from "../../util/scroll"; +import Loader from "../../components/Loader"; import "./index.scss"; -function Subscription({ listVOD, getList }: any) { +function Subscription({ listVOD, getList, loading }: any) { useEffect(() => { getList(); scroll.goToTop(); }, []); return ( -
+
-
+

خرید اشتراک دانوین

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده @@ -24,7 +25,7 @@ function Subscription({ listVOD, getList }: any) { سطرآنچنان که لازم است و برای شرایط{" "}

{listVOD?.map((subscribe: any, i: any) => ( - + ))}
@@ -32,6 +33,11 @@ function Subscription({ listVOD, getList }: any) {
); } @@ -39,6 +45,7 @@ function Subscription({ listVOD, getList }: any) { export default connect( (state: any) => ({ listVOD: state.product.listVOD, + loading: state.product.loading, }), { getList: product.listVOD } )(Subscription);