reza added some change

src/App.tsx

@@ -11,8 +11,8 @@ function App() {
     <Provider store={store}>
       <Router />
       <ToastContainer
-          position="top-right"
-          autoClose={2000}
+          position="bottom-left"
+          autoClose={3000}
           hideProgressBar={true}
           newestOnTop={true}
           closeOnClick

src/components/Loader/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import CircularProgress from "@mui/material/CircularProgress";
+
+
+export default function CircularIndeterminate({size}) {
+  return (
+      <CircularProgress size={size} />
+  );
+}

src/components/PrivateRouter/index.js

@@ -12,10 +12,11 @@ const PrivateRouter = ({
     <Route
       {...rest}
       render={(props) =>
-        true  ? (
-          <Component {...props} />
-        ) : (
+        status  ? (
           <Redirect to="/" />
+        ) : (
+          <Component {...props} />
+
         )
       }
     />

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 {

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";
+
 
 
 

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;

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;

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";
+
 

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

src/router.js

@@ -19,47 +19,32 @@ import About from './views/About';
 // import proxy from "./redux/proxy";
 
 function router({ status }) {
-  const home = (
-    <Route exact path="/">{1 ? <Home /> : <Auth page="signup" />}</Route>
-  );
   return (
     <Router>
       <Switch>
-        {home}
-        <PrivateRouter restricted={false} component={Home} path="/" exact />
-        <Route exact path={"/sign-up"}>
-          <Auth page="signup" />
+        <Route exact path="/">
+          <Home />
         </Route>
+        <PrivateRouter restricted={false} component={Auth} path="/signup" exact />
+        <PrivateRouter restricted={false} component={Auth} path="/login" exact />
         <Route exact path={"/profile"}>
           <Auth page="profile" />
         </Route>
-        <Route exact path={"/login"}>
-          <Auth page="login" />
-        </Route>
         <Route exact path={"/grades/:id"}>
           <Courses />
         </Route>
         <Route exact path={"/about"}>
           <About />
         </Route>
-        <PrivateRouter
-          restricted={false}
-          component={Course}
-          path="/courses/:id"
-          exact
-        />
-        <PrivateRouter
-          restricted={false}
-          component={VideoTube}
-          path="/video-tube"
-          exact
-        />
-        <PrivateRouter
-          restricted={false}
-          component={Subscription}
-          path="/subscribe"
-          exact
-        />
+        <Route exact path={"/courses/:id"}>
+          <Course />
+        </Route>
+        <Route exact path={"/video-tube"}>
+          <VideoTube />
+        </Route>
+        <Route exact path={"/subscribe"}>
+          <Subscription />
+        </Route>
         <Route exact path={"/contact"}>
           <Contact />
         </Route>

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;

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;

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({
     <>
       <div
         className="home main d-flex flex-column"
-        style={{ filter: vocal ? "blur(8px)" : "" }}
+        style={{ filter: (vocal || bookLoading || publicLoading)  ? "blur(8px)" : "" }}
       >
         <Navbar />
         <div className="desktop">
@@ -66,6 +69,11 @@ function Home({
       {vocal ? (
         <Vocal setVocal={setVocal} setInputValue={setInputValue} />
       ) : null}
+      {
+        (bookLoading || publicLoading ) && <div className="full-loader">
+          <Loader size={50} />
+        </div>
+      }
     </>
   );
 }
@@ -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,

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

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 (
     <div className="discount-code d-flex align-items-center justify-content-between">
       <h3>کارت هدیه یا کد تخفیف دارید؟ </h3>
       <div className="d-flex flex-column">
         <div className="d-flex">
-          <input type="text" placeholder="کد خود را در این قسمت وارد نمائید" />
-          <button>تایید کد</button>
+          {!code ? (
+            <>
+              <input
+                type="text"
+                placeholder="کد خود را در این قسمت وارد نمائید"
+                defaultValue={codeId}
+                onChange={(e) => setValue(e.target.value)}
+              />
+              <button onClick={setOff}>تایید کد</button>
+            </>
+          ) : (
+            <>
+              <p>
+                کد تخفیف برای شما ثبت شده است
+              </p>
+              <button
+                onClick={() => delCodeId({})}
+                className="discount-code__cancel"
+              >
+                x{" "}
+              </button>
+            </>
+          )}
         </div>
       </div>
     </div>
-  )
+  );
 }
+
+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);

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

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

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 (
-    <div className="subscription main d-flex flex-column">
+    <div className={"subscription main d-flex flex-column"}>
       <Navbar />
-      <main className="d-flex flex-column">
+      <main className={"d-flex flex-column" + ' ' + (loading && 'blur')}>
         <h1>خرید اشتراک دانوین</h1>
         <p>
           لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
@@ -24,7 +25,7 @@ function Subscription({ listVOD, getList }: any) {
           سطرآنچنان که لازم است و برای شرایط{" "}
         </p>
         {listVOD?.map((subscribe: any, i: any) => (
-          <SubscribeRadio data={subscribe} />
+          <SubscribeRadio data={subscribe} key={i} />
         ))}
         <DiscountCode />
         <div className="d-flex justify-content-end py-4">
@@ -32,6 +33,11 @@ function Subscription({ listVOD, getList }: any) {
         </div>
       </main>
       <Footer />
+      {loading ? (
+        <div className="full-loader">
+          <Loader size={50} />
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -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);