update 42 files

2 years ago · 08e6ff0bbe
parent 8681b95b7e
commit 08e6ff0bbe
43 changed files with 506 additions and 378 deletions
--- a/public/index.html
+++ b/public/index.html
@ -23,10 +23,10 @@
    window.ar = ar;
    window.en = en;

-    const ratio = (lang == "en" || lang == "ar") ? (1 / 15000) : 1
-    window.tr = (price) => Math.round(ratio * price * 100) / 100
+    window.ratio = (lang == "en" || lang == "ar") ? (1 / 15000) : 1
+    window.tr = (price) => Math.round(window.ratio * price * 100) / 100
    function t(val) {
-      const lang_ = window[lang];
+      const lang_ = window[window.lang];
      if (!lang_) return val;
      if (!lang_[val]) console.error(val);
      return lang_[val] || "*" + val;
--- a/src/App.js
+++ b/src/App.js
@ -7,10 +7,16 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import "react-toastify/dist/ReactToastify.css";

 class App extends Component {
+  state = { lang: window.lang };
+  componentDidMount() {
+    window.forceUpdate = () => {
+      this.setState({ lang: window.lang });
+    };
+  }
  render() {
    return (
      <Provider store={store}>
-        <AppRouter />
+        <AppRouter lang={this.state.lang} />
        <ToastContainer
          position="top-right"
          autoClose={2000}
--- a/src/AppRouter.js
+++ b/src/AppRouter.js
@ -17,6 +17,7 @@ import About from "./views/About/index";
 import Products from "./views/Products/index";
 import Product from "./views/Product/index";
 import QR from "./views/QR/index";
+import Reset from "./views/Reset";
 import Auth from "./views/Auth/index";
 import QRScan from "./views/QRScan/index";
 import Activation from "./views/Activation/index";
@ -75,7 +76,7 @@ class AppRouter extends Component {
    let home = (
      <Route exact path={"/"}>
        {status && status.status === 0 ? (
-          <Auth page={"profile"} />
+          <Auth page={"profile"} lang={this.props.lang} />
        ) : afterLogin ? (
          <>
            <Redirect
@ -85,60 +86,64 @@ class AppRouter extends Component {
            />
          </>
        ) : (
-          <Home status={status} />
+          <Home status={status} lang={this.props.lang} />
        )}
      </Route>
    );

    return (
      <div
-        className={`flex-1 ${
+        className={` ${
          localStorage.getItem("language") === "en" ? "ltr" : "rtl"
        }`}
+        style={{ height: "100%" }}
      >
        <Router>
          <Switch>
            {home}
+            <Route exact path={"/reset"}>
+              <Reset lang={this.props.lang} />
+            </Route>
            <Route exact path={"/faq"}>
-              <Faq />
+              <Faq lang={this.props.lang} />
            </Route>
            <Route exact path={"/contact"}>
-              <Contact />
+              <Contact lang={this.props.lang} />
            </Route>
            <Route exact path={"/download"}>
-              <Download />
+              <Download lang={this.props.lang} />
            </Route>
            <Route exact path={"/blogs"}>
-              <Blogs />
+              <Blogs lang={this.props.lang} />
            </Route>
            <Route exact path={"/blogs/:id"}>
-              <Blog />
+              <Blog lang={this.props.lang} />
            </Route>
            <Route exact path={"/page/:name"}>
-              <Blog />
+              <Blog lang={this.props.lang} />
            </Route>
            <Route exact path={"/about"}>
-              <About />
+              <About lang={this.props.lang} />
            </Route>
            <Route exact path={"/products"}>
-              <Products />
+              <Products lang={this.props.lang} />
            </Route>
            <Route exact path="/orders">
-              <Orders />
+              <Orders lang={this.props.lang} />
            </Route>
            <Route exact path="/mybooks">
-              <MyBooks />
+              <MyBooks lang={this.props.lang} />
            </Route>
            {/* <Route path={"/sample"}>
            <Sample />
          </Route> */}
            <Route path={"/pdf"}>
-              <PDF />
+              <PDF lang={this.props.lang} />
            </Route>
            <Route exact path={"/newProfile"}>
              {mobile ? (
                status ? (
-                  <NewProfile />
+                  <NewProfile lang={this.props.lang} />
                ) : (
                  <Redirect
                    to={{
@ -153,7 +158,7 @@ class AppRouter extends Component {
            <Route exact path={"/support"}>
              {mobile ? (
                status ? (
-                  <Support />
+                  <Support lang={this.props.lang} />
                ) : (
                  <Redirect
                    to={{
@ -166,13 +171,13 @@ class AppRouter extends Component {
              )}
            </Route>
            <Route exact path={"/products/digital/:id"}>
-              <Product page="digital" />
+              <Product page="digital" lang={this.props.lang} />
            </Route>
            <Route exact path={"/products/physical/:id"}>
-              <Product page="physical" />
+              <Product page="physical" lang={this.props.lang} />
            </Route>
            <Route exact path={"/qr"}>
-              <QR />
+              <QR lang={this.props.lang} />
            </Route>
            <Route exact path={"/auth"}>
              {proxy.status() ? (
@ -182,11 +187,11 @@ class AppRouter extends Component {
                  }}
                />
              ) : (
-                <NewProfile />
+                <Auth lang={this.props.lang} />
              )}
            </Route>
            <Route exact path={"/support"}>
-              <Support />
+              <Support lang={this.props.lang} />
              {/* {mobile ? (
              status ? (
                <Support />
@ -202,13 +207,13 @@ class AppRouter extends Component {
            )} */}
            </Route>
            <Route exact path={"/products/digital/:id"}>
-              <Product page="digital" />
+              <Product page="digital" lang={this.props.lang} />
            </Route>
            <Route exact path={"/products/physical/:id"}>
-              <Product page="physical" />
+              <Product page="physical" lang={this.props.lang} />
            </Route>
            <Route exact path={"/qr"}>
-              <QR />
+              <QR lang={this.props.lang} />
            </Route>
            <Route exact path={"/auth"}>
              {proxy.status() ? (
@ -218,16 +223,16 @@ class AppRouter extends Component {
                  }}
                />
              ) : (
-                <Auth />
+                <Auth lang={this.props.lang} />
              )}
            </Route>
            <Route exact path={"/profile"}>
-              {status ? <Auth page={"profile"} /> : null}
+              {status ? <Auth page={"profile"} lang={this.props.lang} /> : null}
            </Route>
            <Route exact path={"/qr-scan"}>
              {mobile ? (
                status ? (
-                  <QRScan />
+                  <QRScan lang={this.props.lang} />
                ) : (
                  <Redirect
                    to={{
@ -236,7 +241,7 @@ class AppRouter extends Component {
                  />
                )
              ) : status ? (
-                <QRScan />
+                <QRScan lang={this.props.lang} />
              ) : (
                <Redirect
                  to={{
@ -248,7 +253,7 @@ class AppRouter extends Component {
            <Route exact path={"/activation"}>
              {mobile ? (
                status ? (
-                  <Activation />
+                  <Activation lang={this.props.lang} />
                ) : (
                  <Redirect
                    to={{
@ -257,7 +262,7 @@ class AppRouter extends Component {
                  />
                )
              ) : status ? (
-                <Activation />
+                <Activation lang={this.props.lang} />
              ) : (
                <Redirect
                  to={{
@ -269,7 +274,7 @@ class AppRouter extends Component {
            <Route exact path={"/chatroom"}>
              {mobile ? (
                status ? (
-                  <ChatList />
+                  <ChatList lang={this.props.lang} />
                ) : (
                  <Redirect
                    to={{
@ -278,7 +283,7 @@ class AppRouter extends Component {
                  />
                )
              ) : status ? (
-                <ChatList />
+                <ChatList lang={this.props.lang} />
              ) : (
                <Redirect
                  to={{
@ -288,7 +293,7 @@ class AppRouter extends Component {
              )}
            </Route>
            <Route exact path={"/cart"}>
-              <Cart />
+              <Cart lang={this.props.lang} />
              {/* {status ? (
                <Cart />
              ) : (
@ -301,7 +306,7 @@ class AppRouter extends Component {
            </Route>
            <Route exact path={"/checkout"}>
              {status ? (
-                <Checkout />
+                <Checkout lang={this.props.lang} />
              ) : (
                <Redirect
                  to={{
@ -334,7 +339,7 @@ class AppRouter extends Component {
            <Route exact path={"/ar"}>
              {mobile ? (
                status ? (
-                  <AR />
+                  <AR lang={this.props.lang} />
                ) : (
                  <Redirect
                    to={{
@ -343,7 +348,7 @@ class AppRouter extends Component {
                  />
                )
              ) : status ? (
-                <AR />
+                <AR lang={this.props.lang} />
              ) : (
                <Redirect
                  to={{
@ -356,7 +361,7 @@ class AppRouter extends Component {
            <Route exact path={"/chatroom/:id"}>
              {mobile ? (
                status ? (
-                  <Chatroom />
+                  <Chatroom lang={this.props.lang} />
                ) : (
                  <Redirect
                    to={{
@ -365,7 +370,7 @@ class AppRouter extends Component {
                  />
                )
              ) : status ? (
-                <Chatroom />
+                <Chatroom lang={this.props.lang} />
              ) : (
                <Redirect
                  to={{
@ -399,6 +404,7 @@ export default connect(
    profile: state.user.status,
    userProductList: state.userProduct.list,
    config: state.publicApi.config,
+    lang: state.publicApi.lang,
    // status: state.user.status,
  }),
  { getProfile: user.getProfile, getUserProductList: userProduct.list }
--- a/src/QRScan/LastQr/index.js
+++ b/src/QRScan/LastQr/index.js
@ -3,7 +3,9 @@ import { Link } from "react-router-dom";

 import "./index.scss";

-const grades = [
+export default function LastQR(props) {
+  const { data } = props;
+  const grades = [
    window.t("اول"),
    window.t("دوم"),
    window.t("سوم"),
@ -16,10 +18,7 @@ const grades = [
    window.t("دهم"),
    window.t("یازدهم"),
    window.t("دوازدهم"),
-];
-
-export default function LastQR(props) {
-  const { data } = props;
+  ];
  return (
    <>
      {window.innerWidth > 1000 ? <div className="last-qr"></div> : null}
--- a/src/Redux/actions/public.js
+++ b/src/Redux/actions/public.js
@ -24,6 +24,10 @@ const publicApi = {
    await proxy.get("public/province", data, { history, dispatch }),
  getCity: (data, history) => async (dispatch) =>
    await proxy.get("public/city", data, { history, dispatch }),
+  changeLanguage:
+    (data = {}) =>
+    async (dispatch) =>
+      await dispatch({ type: "public/changeLanguage", data }),
 };

 export default publicApi;
--- a/src/Redux/proxy.js
+++ b/src/Redux/proxy.js
@ -5,13 +5,23 @@ let { baseUrl } = ApiConfig;
 window.baseURL = baseUrl;
 baseUrl = baseUrl + "/";

-const Axios = axios.create({
+let Axios = axios.create({
  withCredentials: true,
  validateStatus: null,
  baseURL: baseUrl,
-
  headers: { lang: window.lang },
 });
+window.reLang = (lang) => {
+  window.lang = lang;
+  window.ratio = lang == "en" || lang == "ar" ? 1 / 15000 : 1;
+  Axios = axios.create({
+    withCredentials: true,
+    validateStatus: null,
+    baseURL: baseUrl,
+    headers: { lang: window.lang },
+  });
+  window.forceUpdate();
+};
 class Proxy {
  get = async (url, params, opt = {}, data) =>
    await this.check(
@ -71,7 +81,7 @@ class Proxy {

  refresh = async () => {
    let refresh = localStorage.getItem("refresh");
-    if (!refresh) window.location.href = "/";
+    if (!refresh) window.location.reload();
    let login = await this.login(
      "user/login",
      {},
--- a/src/Redux/reducers/book.js
+++ b/src/Redux/reducers/book.js
@ -16,7 +16,8 @@ const initialState = {
  ],
 };

-const grades = [
+export default function book(state = initialState, action) {
+  const grades = [
    window.t("پیش دبستان"),
    window.t("اول"),
    window.t("دوم"),
@ -30,8 +31,7 @@ const grades = [
    window.t("دهم"),
    window.t("یازدهم"),
    window.t("دوازدهم"),
-];
-export default function book(state = initialState, action) {
+  ];
  let { type, data } = action;
  switch (type) {
    case "book/list":
@ -125,6 +125,21 @@ export default function book(state = initialState, action) {
    case "book/error":
      toast.error(data.message);
      return { ...state, loading: false, error: data.message };
+    case "public/changeLanguage":
+      return {
+        ...state,
+        sortFilters: [
+          window.t("مرتب سازی"),
+          window.t("محبوب ترین"),
+          window.t("جدیدترین"),
+        ],
+        info: null,
+        searchResult: [],
+        filterResult: [],
+        subjects: [],
+        levels: [],
+        list: [],
+      };
    default:
      return state;
  }
--- a/src/Redux/reducers/public.js
+++ b/src/Redux/reducers/public.js
@ -18,7 +18,8 @@ const initialState = {
  },
 };

-const grades = [
+export default function publicApi(state = initialState, action) {
+  const grades = [
    window.t("پیش دبستان"),
    window.t("اول"),
    window.t("دوم"),
@ -32,8 +33,7 @@ const grades = [
    window.t("دهم"),
    window.t("یازدهم"),
    window.t("دوازدهم"),
-];
-export default function publicApi(state = initialState, action) {
+  ];
  let { type, data } = action;
  switch (type) {
    case "public/direction":
@ -185,7 +185,8 @@ export default function publicApi(state = initialState, action) {
    case "public/error":
      toast.error(data.message);
      return { ...state, loading: false, error: data.message };
-
+    case "public/changeLanguage":
+      return { ...state, lang: window.lang, contactData: null, faqList: [] };
    default:
      return state;
  }
--- a/src/Redux/reducers/userFactor.js
+++ b/src/Redux/reducers/userFactor.js
@ -33,7 +33,13 @@ export default function userFactor(state = initialState, action) {
      return { ...state, loading: true };
    case "userFactor/error":
      toast.error(data.message);
+
      return { ...state, loading: false, error: data.message };
+    case "public/changeLanguage":
+      return {
+        ...state,
+        info: null,
+      };
    default:
      return state;
  }
--- a/src/views/About/index.js
+++ b/src/views/About/index.js
@ -26,7 +26,8 @@ const fontSize = {
 };

 export default class About extends Component {
-  state = {
+  render() {
+    const state = {
      first: {
        title: window.t("درباره ما"),
        text: window.t(
@ -79,8 +80,7 @@ export default class About extends Component {
        ],
      },
    };
-  render() {
-    const { fury, advantages, keywords, keywords2, first } = this.state;
+    const { fury, advantages, keywords, keywords2, first } = state;
    return (
      <>
        {window.innerWidth > 1000 ? (
--- a/src/views/Auth/Login/Code/index.js
+++ b/src/views/Auth/Login/Code/index.js
@ -96,7 +96,7 @@ export default class Code extends Component {
                style={{ width: "48%", height: "100%" }}
                className="d-flex flex-column justify-content-center align-items-center p-5"
              >
-                <img src={logo} alt={window.test("دانوین")} />
+                <img src={logo} alt={window.t("دانوین")} />
                <div className="auth-code__box--codes d-flex justify-content-around">
                  <label htmlFor="code1">
                    <input
--- a/src/views/Auth/Profile/Birthdate/index.js
+++ b/src/views/Auth/Profile/Birthdate/index.js
@ -6,7 +6,8 @@ import moment from "jalali-moment";

 export default function Birthdate(props) {
  const { defaultValue, parent, name } = props;
-  let momentDate = moment(defaultValue[name]);
+  console.log({ defaultValue });
+  let momentDate = moment((defaultValue || {})[name]);
  let isvalid = momentDate?.isValid();
  const day = isvalid ? momentDate?.format("jDD") : null,
    month = isvalid ? momentDate?.format("jMM") : null,
--- a/src/views/Auth/Profile/TextArea/index.js
+++ b/src/views/Auth/Profile/TextArea/index.js
@ -13,7 +13,8 @@ const useStyles = makeStyles((theme) => ({

 export default function MultilineTextFields(props) {
  const classes = useStyles();
-  const { parent, defaultValue } = props;
+  let { parent, defaultValue } = props;
+  defaultValue = defaultValue || {};
  return (
    <form className={classes.root} noValidate autoComplete="off">
      <TextField
--- a/src/views/Auth/Profile/index.js
+++ b/src/views/Auth/Profile/index.js
@ -178,6 +178,7 @@ class Profile extends Component {
      window.t("دوازدهم"),
    ];
    const { profile } = this.props;
+    console.log({ profile });
    return (
      <>
        {window.innerWidth > 1000 ? (
--- a/src/views/Auth/index.js
+++ b/src/views/Auth/index.js
@ -15,7 +15,7 @@ export default class Auth extends Component {
    return (
      <div className="auth d-flex">
        {this.state.page === "login" ? <Login parent={this} /> : null}
-        {/* {this.state.page === "profile" ? <Profile parent={this} /> : null} */}
+        {this.state.page === "profile" ? <Profile parent={this} /> : null}
      </div>
    );
  }
--- a/src/views/Callback/index.js
+++ b/src/views/Callback/index.js
@ -160,7 +160,7 @@ class Callback extends Component {
                      </h3>
                      <div className="d-flex align-items-center">
                        <strong style={{ fontSize: fontSize.mobile.h1 }}>
-                          {window.tr(payPrice)}
+                          {window.tr(payPrice || 0)}
                        </strong>
                        <span style={{ fontSize: fontSize.mobile.h3 }}>
                          {window.t("تومان")}
@ -241,7 +241,7 @@ class Callback extends Component {
                </h3>
                <div className="d-flex align-items-center">
                  <strong style={{ fontSize: fontSize.mobile.h1 }}>
-                    {window.tr(payPrice)}
+                    {window.tr(payPrice || 0)}
                  </strong>
                  <span style={{ fontSize: fontSize.mobile.h3 }}>
                    {window.t("تومان")}
--- a/src/views/Cart/Discount/index.js
+++ b/src/views/Cart/Discount/index.js
@ -156,6 +156,7 @@ export default connect(
    code: state.userFactor.info?.offCode?.code,
    userId: state.user.status.id,
    factorId: state.userFactor.info?.id,
+    lang: state.publicApi.lang,
  }),
  {
    setCodeId: userFactor.update,
--- a/src/views/Cart/Table/index.js
+++ b/src/views/Cart/Table/index.js
@ -16,21 +16,7 @@ import "./index.scss";
 const useStyles = makeStyles({
  table: {},
 });
-const grades = [
-  window.t("پیش دبستان"),
-  window.t("اول"),
-  window.t("دوم"),
-  window.t("سوم"),
-  window.t("چهارم"),
-  window.t("پنجم"),
-  window.t("ششم"),
-  window.t("هفتم"),
-  window.t("هشتم"),
-  window.t("نهم"),
-  window.t("دهم"),
-  window.t("یازدهم"),
-  window.t("دوازدهم"),
-];
+
 const maxMobileSize = 550;
 const maxDesktopSize = 1250;

@ -117,7 +103,7 @@ function BasicTable(props) {
                <TableRow>
                  <TableCell align="center">
                    <span style={{ color: "grey" }}>
-                      {window.t("مبلغ کل")} {factorInfo.sumPrice}
+                      {window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)}
                    </span>
                  </TableCell>
                  <TableCell align="right" component="th" scope="row">
@ -163,7 +149,7 @@ function BasicTable(props) {
                  </TableCell>
                  <TableCell align="center">
                    <span style={{ color: "grey" }}>
-                      {window.t("مبلغ کل")} {factorInfo.sumPrice}
+                      {window.t("مبلغ کل")} {window.tr(factorInfo.sumPrice)}
                    </span>
                  </TableCell>
                  <TableCell align="center" component="th" scope="row">
@ -185,6 +171,21 @@ function BasicTable(props) {
 }

 const Item = (props) => {
+  const grades = [
+    window.t("پیش دبستان"),
+    window.t("اول"),
+    window.t("دوم"),
+    window.t("سوم"),
+    window.t("چهارم"),
+    window.t("پنجم"),
+    window.t("ششم"),
+    window.t("هفتم"),
+    window.t("هشتم"),
+    window.t("نهم"),
+    window.t("دهم"),
+    window.t("یازدهم"),
+    window.t("دوازدهم"),
+  ];
  const { data, pushToCart, id, route } = props;
  if (!data.product) return null;
  return (
@ -266,11 +267,12 @@ const Item = (props) => {
            <div className="mobile-cart-table-price d-flex flex-column align-items-center">
              <div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center">
                <strong style={{ fontSize: fontSize.mobile.price.strong }}>
-                  {data.product.price * data.count || "1000"}
+                  {window.tr(data.product.price * data.count || 1000)}
                </strong>
                {route !== "callback" ? (
                  <span style={{ fontSize: fontSize.mobile.price.span }}>
-                    {data.product.price || "100"} {window.t("قیمت هر واحد")}{" "}
+                    {window.tr(data.product.price || "100")}{" "}
+                    {window.t("قیمت هر واحد")}{" "}
                  </span>
                ) : null}
              </div>
@ -336,7 +338,7 @@ const Item = (props) => {
              />
              <div className="d-flex flex-column justify-content-center">
                <strong style={{ fontSize: fontSize.desktop.info.strong }}>
-                  {`نسخه ${
+                  {`${window.t("نسخه")} ${
                    +data.product?.productType === 1
                      ? window.t("الکترونیکی")
                      : window.t("چاپی")
@ -356,7 +358,8 @@ const Item = (props) => {
          <TableCell>
            <div className="cart-item__price d-flex flex-column justify-content-center align-items-center">
              <strong style={{ fontSize: fontSize.desktop.price.strong }}>
-                {data.product.price * data.count || "1000"} {window.t("تومان")}
+                {window.tr(data.product.price * data.count || "1000")}{" "}
+                {window.t("تومان")}
              </strong>
              <span style={{ fontSize: fontSize.desktop.price.span }}>
                {window.t("قیمت هر عدد")}{" "}
@ -454,6 +457,7 @@ export default connect(
    info: state.book.info,
    id: state.user.status.id,
    factorInfo: state.userFactor.info,
+    lang: state.publicApi.lang,
  }),
  { pushToCart: userProduct.add }
 )(BasicTable);
--- a/src/views/Cart/index.js
+++ b/src/views/Cart/index.js
@ -49,6 +49,10 @@ class Cart extends Component {
  };

  componentDidUpdate(prevProps, prevState) {
+    // if (this.props.factorInfo === null && !this.props.loading) {
+    //   this.props.getFactorInfo({});
+    // }
+
    if (window.location.search)
      if (!window.location.search.includes("NOK") && !window.location.hash) {
        let Authority = window.location.search
@ -214,8 +218,9 @@ class Cart extends Component {
                        </h3>
                        <div className="d-flex align-items-center">
                          <strong style={{ fontSize: fontSize.mobile.h1 }}>
-                            {(factorInfo.payPrice - factorInfo.transportPrice) *
-                              window.ratio}
+                            {window.tr(
+                              factorInfo.payPrice - factorInfo.transportPrice
+                            )}
                          </strong>
                          <span style={{ fontSize: fontSize.mobile.h3 }}>
                            {window.t("تومان")}
@ -325,8 +330,9 @@ class Cart extends Component {
                {factorInfo ? (
                  <div className="d-flex align-items-center">
                    <strong style={{ fontSize: fontSize.mobile.h1 }}>
-                      {(factorInfo.payPrice - factorInfo.transportPrice) *
-                        window.ratio}
+                      {window.tr(
+                        factorInfo.payPrice - factorInfo.transportPrice
+                      )}
                      {/* // factorInfo.transportPrice - // factorInfo.offPrice} */}
                    </strong>
                    <span style={{ fontSize: fontSize.mobile.h3 }}>
@ -410,8 +416,9 @@ export default connect(
    payPrice: state.userProduct.sum,
    payMethods: state.transport.list,
    factorInfo: state.userFactor.info,
+    loading: state.userFactor.loading,
    userId: state.user.status.id,
-
+    lang: state.publicApi.lang,
    isVerified: state.userFactor.isVerified,
  }),
  {
--- a/src/views/Checkout/Discount/index.js
+++ b/src/views/Checkout/Discount/index.js
@ -84,6 +84,7 @@ export default connect(
    codeId: state.userFactor.info?.codeId,
    userId: state.user.status.id,
    factorId: state.userFactor.info?.id,
+    lang: state.publicApi.lang,
  }),
  {
    setCodeId: userFactor.update,
--- a/src/views/Checkout/Table/index.js
+++ b/src/views/Checkout/Table/index.js
@ -157,7 +157,7 @@ const Item = (props) => {
              />
              <div className="mobile-cart-table-product__info d-flex flex-column p-1">
                <strong style={{ fontSize: fontSize.mobile.info.strong }}>
-                  {`نسخه ${
+                  {`${window.t("نسخه")}  ${
                    +data.product.productType === 1
                      ? window.t("الکترونیکی")
                      : window.t("چاپی")
@ -215,7 +215,7 @@ const Item = (props) => {
                </strong>
                <span style={{ fontSize: 12 }}>
                  {" "}
-                  {`نسخه ${
+                  {`${window.t("نسخه")}  ${
                    +data.product.productType === 1
                      ? window.t("الکترونیکی")
                      : window.t("چاپی")
--- a/src/views/Checkout/index.js
+++ b/src/views/Checkout/index.js
@ -229,7 +229,7 @@ class Cart extends Component {
                        <div className="mt-2">
                          <TextArea
                            parent={this}
-                            label={"آدرس "}
+                            label={window.t("آدرس")}
                            name="recieverAddress"
                            defaultValue={factorInfo.recieverAddress}
                            required
@ -289,7 +289,7 @@ class Cart extends Component {
                      list={list}
                      handleCounter={this.handleCounter}
                      handleDelete={this.handleDelete}
-                      payPrice={payPrice}
+                      payPrice={window.tr(payPrice)}
                      route={"cart"}
                    />
                    {factorInfo ? <Factor parent={this} list={list} /> : null}
@ -431,7 +431,7 @@ class Cart extends Component {
                  <div className="mt-2">
                    <TextArea
                      parent={this}
-                      label={"آدرس "}
+                      label={window.t("آدرس")}
                      name="recieverAddress"
                      defaultValue={factorInfo.recieverAddress}
                      required
--- a/src/views/Contact/Input/index.js
+++ b/src/views/Contact/Input/index.js
@ -9,6 +9,7 @@ const useStyles = makeStyles((theme) => ({
      // maxWidth: "400px",
      position: "relative",
      marginTop: 20,
+      border: "1px solid #333333",
    },
  },
 }));
@ -33,6 +34,7 @@ export default function FormPropsTextFields({
          variant="outlined"
          onChange={(e) => parent.onChange(name, e.target.value)}
          required={required}
+          style={{ border: "1px solid #44444455", borderRadius: "10px" }}
        />
      </div>
    </form>
--- a/src/views/Contact/index.js
+++ b/src/views/Contact/index.js
@ -39,8 +39,9 @@ class Contact extends Component {
    text: null,
  };

-  componentDidMount() {
-    if (!this.props.contactData?.address) this.props.getContactData();
+  componentDidUpdate() {
+    if (!this.props.contactData?.address && !this.props.loading)
+      this.props.getContactData();
  }

  render() {
@ -165,7 +166,7 @@ export default connect(
    loading: state.publicApi.loading,
    contactData: state.publicApi.contactData,
    list: state.userProduct.mylist || [],
-    //loading: state.publicApi.loading,
+    // loading: state.publicApi.loading,
  }),
  { getContactData: publicApi.getContactData }
 )(Contact);
--- a/src/views/Download/Item/index.js
+++ b/src/views/Download/Item/index.js
@ -15,7 +15,10 @@ const fontSize = {
    old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
  },
 };
-const grades = [
+
+export default class Item extends Component {
+  render() {
+    const grades = [
      window.t("پیش دبستان"),
      window.t("اول"),
      window.t("دوم"),
@ -29,9 +32,7 @@ const grades = [
      window.t("دهم"),
      window.t("یازدهم"),
      window.t("دوازدهم"),
-];
-export default class Item extends Component {
-  render() {
+    ];
    const { data } = this.props;
    return (
      <>
--- a/src/views/Faq/index.js
+++ b/src/views/Faq/index.js
@ -39,6 +39,11 @@ class Faq extends Component {
  componentDidMount() {
    this.props.getFaqList();
  }
+  componentDidUpdate() {
+    if (!this.props.faqList.length && !this.props.loading) {
+      this.props.getFaqList();
+    }
+  }

  setMessageActive = (id, status) => {
    if (this.state.searchedMessages) {
--- a/src/views/Home/Footer/index.js
+++ b/src/views/Home/Footer/index.js
@ -7,7 +7,13 @@ import contact from "../../../assets/icons/contact.png";
 import "./index.scss";
 export default class Footer extends Component {
  render() {
-    const { fastAccess } = this.props;
+    const fastAccess = [
+      { name: window.t("صفحه اصلی"), link: "/" },
+      { name: window.t("فروشگاه"), link: "/shop" },
+      { name: window.t("سوالات متداول"), link: "/faq" },
+      { name: window.t("درباره ما"), link: "/about" },
+      { name: window.t("تماس با ما"), link: "/call" },
+    ];
    return (
      <>
        {window.innerWidth > 1000 ? (
@ -31,7 +37,13 @@ export default class Footer extends Component {
                    window.lang === "en" ? "ltr" : ""
                  }`}
                >
-                  <h1>{window.t("دانوین کجاست؟")}</h1>
+                  <h1
+                    style={{
+                      textAlign: window.lang == "en" ? "left" : "right",
+                    }}
+                  >
+                    {window.t("دانوین کجاست؟")}
+                  </h1>
                  <p
                    className="mt-2"
                    style={{
@ -60,7 +72,11 @@ export default class Footer extends Component {
                        ? "ltr"
                        : ""
                    }
-                    style={{ width: "55%", justifyContent: "space-between" }}
+                    style={{
+                      width: "55%",
+                      justifyContent: "space-between",
+                      textAlign: window.lang == "en" ? "left" : "right",
+                    }}
                  >
                    <div
                      className={
@ -68,20 +84,22 @@ export default class Footer extends Component {
                          ? "ltr"
                          : ""
                      }
-                      style={{ fontFamily: "Arial !important" }}
                    >
+                      <img
+                        src={contact}
+                        alt={window.t("تماس")}
+                        className="m-1"
+                      />{" "}
                      <a
                        href="tel:58795"
-                        style={{ textDecoration: "none", color: "white" }}
+                        style={{
+                          textDecoration: "none",
+                          color: "white",
+                          fontFamily: window.lang == "en" ? "Arial" : "",
+                        }}
                      >
                        58795
                      </a>
-
-                      <img
-                        src={contact}
-                        alt={window.t("تماس")}
-                        className="m-1"
-                      />
                    </div>
                    {/* <div
                      className="d-flex align-items-center"
@ -221,12 +239,4 @@ export default class Footer extends Component {
  }
 }

-Footer.defaultProps = {
-  fastAccess: [
-    { name: window.t("صفحه اصلی"), link: "/" },
-    { name: window.t("فروشگاه"), link: "/shop" },
-    { name: window.t("سوالات متداول"), link: "/faq" },
-    { name: window.t("درباره ما"), link: "/about" },
-    { name: window.t("تماس با ما"), link: "/call" },
-  ],
-};
+Footer.defaultProps = {};
--- a/src/views/Home/Navbar/Laptop/index.js
+++ b/src/views/Home/Navbar/Laptop/index.js
@ -11,7 +11,7 @@ import Menu from "@material-ui/core/Menu";
 import { connect } from "react-redux";
 import "./index.scss";
 import { useHistory } from "react-router-dom";
-import { user } from "~/Redux/actions";
+import { user, publicApi } from "~/Redux/actions";
 function Navigate({ path }) {
  let history = useHistory();
  return <>{history.push(path)}</>;
@ -25,39 +25,42 @@ const fontSize = {
  },
 };

-const changeLanguage = (val) => {
-  if (val === "fa") {
-    localStorage.removeItem("language");
-  } else if (val === "en") {
-    localStorage.setItem("language", "en");
-  } else {
-    localStorage.setItem("language", "ar");
-  }
-  window.location.reload();
-};
+// const changeLanguage = (val) => {
+//   if (val === "fa") {
+//     localStorage.removeItem("language");
+//   } else if (val === "en") {
+//     localStorage.setItem("language", "en");
+//   } else {
+//     localStorage.setItem("language", "ar");
+//   }
+//   window.location.reload();
+// };

 class LaptopNavbar extends Component {
  state = {};

  render() {
    const { status } = this.props;
-    if (this.state.navigatePath) return <Navigate path={this.navigatePath} />;
-    const { links } = this.props;
+    if (this.state.navigatePath)
+      return <Navigate path={this.state.navigatePath} />;
+    const links = [
+      { name: window.t("صفحه اصلی"), to: "/", page: "home" },
+      { name: window.t("فروشگاه"), to: "/products", page: "products" },
+      { name: window.t("سوالات متداول"), to: "/faq", page: "faq" },
+      { name: window.t("درباره ما"), to: "/about", page: "about" },
+      { name: window.t("پشتیبانی"), to: "/contact", page: "contact" },
+    ];
    return (
      <nav
-        className={`laptop-navbar d-flex ${
-          window.lang === "en" ? "flex-row-reverse" : ""
-        }`}
-      >
-        <div
-          className={`d-flex ${window.lang === "en" ? "flex-row-reverse" : ""}`}
+        className={`laptop-navbar d-flex ${window.lang === "en" ? "ltr" : ""}`}
      >
+        <div className={`d-flex ${window.lang === "en" ? "ltr" : ""}`}>
          <Link to="/" className="laptop-navbar__logo">
            <img src={logo} alt={window.t("لوگو")} />
          </Link>
          <ul
            className={`laptop-navbar__list d-flex ${
-              window.lang === "en" ? "flex-row-reverse" : ""
+              window.lang === "en" ? "ltr" : ""
            }`}
          >
            {links.map((item, i) => (
@ -83,14 +86,14 @@ class LaptopNavbar extends Component {
                  color: "#6f7074",
                }}
              >
-                {window.t("دانلود")}{" "}
+                {window.t("دانلود")}
              </span>
            </li>
          </ul>
        </div>
        <div
          className={`d-flex align-items-center ${
-            window.lang === "en" ? "flex-row-reverse" : ""
+            window.lang === "en" ? "ltr" : ""
          }`}
        >
          {proxy.status() ? (
@ -158,7 +161,11 @@ class LaptopNavbar extends Component {
                className="language-select"
                onChange={(e) => {
                  window.localStorage.setItem("language", e.target.value);
-                  window.location.reload();
+                  window.reLang(e.target.value);
+                  this.props.changeLanguage();
+                  this.setState({ navigatePath: "/reset" });
+
+                  //window.location.reload();
                }}
              >
                {[
@ -213,7 +220,10 @@ class LaptopNavbar extends Component {
                className="language-select"
                onChange={(e) => {
                  window.localStorage.setItem("language", e.target.value);
-                  window.location.reload();
+                  // window.location.reload();
+                  window.reLang(e.target.value);
+                  this.props.changeLanguage();
+                  this.setState({ navigatePath: "/reset" });
                }}
              >
                {console.log(window.lang)}
@ -248,15 +258,12 @@ class LaptopNavbar extends Component {
    );
  }
 }
-export default connect((state) => ({ status: state.user.status }), {
+export default connect(
+  (state) => ({ status: state.user.status, lang: state.publicApi.lang }),
+  {
+    changeLanguage: publicApi.changeLanguage,
+
    logout: user.logout,
-})(LaptopNavbar);
-LaptopNavbar.defaultProps = {
-  links: [
-    { name: window.t("صفحه اصلی"), to: "/", page: "home" },
-    { name: window.t("فروشگاه"), to: "/products", page: "products" },
-    { name: window.t("سوالات متداول"), to: "/faq", page: "faq" },
-    { name: window.t("درباره ما"), to: "/about", page: "about" },
-    { name: window.t("پشتیبانی"), to: "/contact", page: "contact" },
-  ],
-};
+  }
+)(LaptopNavbar);
+LaptopNavbar.defaultProps = {};
--- a/src/views/Home/Navbar/Mobile/index.js
+++ b/src/views/Home/Navbar/Mobile/index.js
@ -12,8 +12,15 @@ import back from "../../../../assets/icons/back.png";
 import hamburger from "../../../../assets/icons/hamburger.png";
 import search from "../../../../assets/icons/navbarSearch.png";
 import proxy from "~/Redux/proxy";
+import { connect } from "react-redux";
+import { publicApi } from "~/Redux/actions";

 import "./index.scss";
+
+function Navigate({ path }) {
+  let history = useHistory();
+  return <>{history.push(path)}</>;
+}
 function BackButton({ children }) {
  let history = useHistory();
  return (
@ -27,17 +34,6 @@ function BackButton({ children }) {
  );
 }

-const changeLanguage = (val) => {
-  if (val === "fa") {
-    localStorage.removeItem("language");
-  } else if (val === "en") {
-    localStorage.setItem("language", "en");
-  } else {
-    localStorage.setItem("language", "ar");
-  }
-  window.location.reload();
-};
-
 const useStyles = makeStyles({
  list: {
    width: window.innerWidth * 0.8,
@ -49,7 +45,7 @@ const useStyles = makeStyles({
  },
 });

-export default function MobileNavbar(props) {
+function MobileNavbar(props) {
  const status = proxy.status();
  const classes = useStyles();
  const [state, setState] = useState({
@ -119,7 +115,10 @@ export default function MobileNavbar(props) {
              className="language-select"
              onChange={(e) => {
                window.localStorage.setItem("language", e.target.value);
-                window.location.reload();
+                // window.location.reload();
+                window.reLang(e.target.value);
+                props.changeLanguage();
+                Navigate("/reset");
              }}
            >
              {[
@ -196,7 +195,10 @@ export default function MobileNavbar(props) {
          className="language-select"
          onChange={(e) => {
            window.localStorage.setItem("language", e.target.value);
-            window.location.reload();
+            // window.location.reload();
+            window.reLang(e.target.value);
+            props.changeLanguage();
+            Navigate("/reset");
          }}
        >
          {[
@ -257,3 +259,6 @@ export default function MobileNavbar(props) {
    </nav>
  );
 }
+export default connect((state) => ({ lang: state.publicApi.lang }), {
+  changeLanguage: publicApi.changeLanguage,
+})(MobileNavbar);
--- a/src/views/MyBooks/index.js
+++ b/src/views/MyBooks/index.js
@ -5,7 +5,14 @@ import { userProduct } from "~/Redux/actions";
 import moment from "jalali-moment";
 import "./index.scss";
 import { Link } from "react-router-dom";
-const grades = [
+
+class MyBooks extends Component {
+  componentDidMount() {
+    if (!this.props.mylist) this.props.getMyList();
+  }
+
+  render() {
+    const grades = [
      window.t("پیش دبستان"),
      window.t("اول"),
      window.t("دوم"),
@ -19,13 +26,7 @@ const grades = [
      window.t("دهم"),
      window.t("یازدهم"),
      window.t("دوازدهم"),
-];
-class MyBooks extends Component {
-  componentDidMount() {
-    if (!this.props.mylist) this.props.getMyList();
-  }
-
-  render() {
+    ];
    const data = (this.props.myList || []).filter((e) => +e.productType === 3);
    return (
      <div className="mybooks">
--- a/src/views/NewProfile/index.js
+++ b/src/views/NewProfile/index.js
@ -264,7 +264,7 @@ class NewProfile extends Component {
                    />
                  </div>
                  <div className="mb-2">
-                    <Birthdate />
+                    <Birthdate defaultValue={profile} name="birthdate" />
                  </div>
                  {/* <div className="mb-2">
                    <Input name="password" label="رمز عبور" parent={this} />
--- a/src/views/Orders/index.js
+++ b/src/views/Orders/index.js
@ -4,7 +4,13 @@ import Navbar from "../Home/Navbar";
 import { userFactor } from "~/Redux/actions";
 import "./index.css";
 import moment from "jalali-moment";
-const grades = [
+
+class Orders extends Component {
+  componentDidMount() {
+    if (!this.props.list) this.props.getList();
+  }
+  render() {
+    const grades = [
      window.t("پیش دبستان"),
      window.t("اول"),
      window.t("دوم"),
@ -18,12 +24,7 @@ const grades = [
      window.t("دهم"),
      window.t("یازدهم"),
      window.t("دوازدهم"),
-];
-class Orders extends Component {
-  componentDidMount() {
-    if (!this.props.list) this.props.getList();
-  }
-  render() {
+    ];
    // props.getList();
    let data = this.props.list;
    return (
--- a/src/views/PDF/index.js
+++ b/src/views/PDF/index.js
@ -5,9 +5,11 @@ import Navbar from "../Home/Navbar/index";
 export default class Test extends Component {
  render() {
    const id = +window.location.pathname.split("/").slice(-1)[0];
+    console.log(1);
    return (
      <div style={{ height: "100%" }}>
        <Navbar />
+
        <br />
        <br />

--- a/src/views/Product/index.js
+++ b/src/views/Product/index.js
@ -29,21 +29,7 @@ import "./index.scss";

 const maxDesktopSize = 1250;
 const maxMobileSize = 550;
-const grades = [
-  window.t("پیش دبستان"),
-  window.t("اول"),
-  window.t("دوم"),
-  window.t("سوم"),
-  window.t("چهارم"),
-  window.t("پنجم"),
-  window.t("ششم"),
-  window.t("هفتم"),
-  window.t("هشتم"),
-  window.t("نهم"),
-  window.t("دهم"),
-  window.t("یازدهم"),
-  window.t("دوازدهم"),
-];
+
 const fontSize = {
  desktop: {
    h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
@ -122,9 +108,39 @@ class Product extends Component {
    });
    this.props.getList();
  }
-
+  componentDidUpdate() {
+    if (!this.props.loading && !this.props.list.length) {
+      this.props.getInfo({
+        id: window.location.pathname.slice(
+          window.location.pathname.lastIndexOf("/") + 1,
+          window.location.pathname.length
+        ),
+      });
+      this.props.getList();
+    }
+  }
  render() {
-    const { supportItems, info, page } = this.props;
+    const grades = [
+      window.t("پیش دبستان"),
+      window.t("اول"),
+      window.t("دوم"),
+      window.t("سوم"),
+      window.t("چهارم"),
+      window.t("پنجم"),
+      window.t("ششم"),
+      window.t("هفتم"),
+      window.t("هشتم"),
+      window.t("نهم"),
+      window.t("دهم"),
+      window.t("یازدهم"),
+      window.t("دوازدهم"),
+    ];
+    const { info, page } = this.props;
+    const supportItems = [
+      { title: window.t("ارسال سریع"), icon: product_shipping },
+      { title: window.t("پشتیبانی 24 ساعته"), icon: product_support },
+      { title: window.t("ضمانت بازگشت"), icon: product_cash_back },
+    ];
    return (
      <>
        {window.innerWidth > 1000 ? (
@ -406,17 +422,12 @@ export default connect(
    loading: state.book.loading,
    list: state.book.list,
    id: state.user.status.id,
+    lang: state.publicApi.lang,
  }),
  { getInfo: book.info, getList: book.list, pushToCart: userProduct.add }
 )(Product);

-Product.defaultProps = {
-  supportItems: [
-    { title: window.t("ارسال سریع"), icon: product_shipping },
-    { title: window.t("پشتیبانی 24 ساعته"), icon: product_support },
-    { title: window.t("ضمانت بازگشت"), icon: product_cash_back },
-  ],
-};
+Product.defaultProps = {};

 const Identifier = (props) => {
  return (
--- a/src/views/Products/List/index.js
+++ b/src/views/Products/List/index.js
@ -11,6 +11,10 @@ class List extends React.Component {
  componentDidMount() {
    if (this.props.list?.length === 0) this.props.getList();
  }
+  componentDidUpdate() {
+    if (this.props.list?.length === 0 && !this.props.loading)
+      this.props.getList();
+  }

  render() {
    let { filterResult, loading } = this.props;
--- a/src/views/Products/Product/index.js
+++ b/src/views/Products/Product/index.js
@ -9,21 +9,6 @@ import { connect } from "react-redux";

 import { userProduct } from "~/Redux/actions";
 import "./index.scss";
-const grades = [
-  window.t("پیش دبستان"),
-  window.t("اول"),
-  window.t("دوم"),
-  window.t("سوم"),
-  window.t("چهارم"),
-  window.t("پنجم"),
-  window.t("ششم"),
-  window.t("هفتم"),
-  window.t("هشتم"),
-  window.t("نهم"),
-  window.t("دهم"),
-  window.t("یازدهم"),
-  window.t("دوازدهم"),
-];

 function Product(props) {
  let history = useHistory();
@ -41,6 +26,21 @@ function Product(props) {
    });
    setTimeout(() => history.push("/cart"), 2000);
  }
+  const grades = [
+    window.t("پیش دبستان"),
+    window.t("اول"),
+    window.t("دوم"),
+    window.t("سوم"),
+    window.t("چهارم"),
+    window.t("پنجم"),
+    window.t("ششم"),
+    window.t("هفتم"),
+    window.t("هشتم"),
+    window.t("نهم"),
+    window.t("دهم"),
+    window.t("یازدهم"),
+    window.t("دوازدهم"),
+  ];
  return (
    <>
      {window.innerWidth < 1000 ? (
--- a/src/views/Products/Sort/index.js
+++ b/src/views/Products/Sort/index.js
@ -13,6 +13,9 @@ const fontSize = {
 export default class Sort extends React.Component {
  render() {
    const { parent, selectedSort } = this.props;
+
+    const sortItems = [window.t("پرفروش ترین"), window.t("جدیدترین")];
+
    return (
      <div
        className={`products-sort d-flex align-items-center  ${
@ -31,7 +34,7 @@ export default class Sort extends React.Component {
            window.lang === "en" ? "flex-row-reverse" : ""
          }`}
        >
-          {parent.props.sortItems.map((item, i) => (
+          {sortItems.map((item, i) => (
            <Item
              data={item}
              key={i}
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@ -172,7 +172,3 @@ export default connect(
    filterBook: book.filterBook,
  }
 )(Products);
-
-Products.defaultProps = {
-  sortItems: [window.t("پرفروش ترین"), window.t("جدیدترین")],
-};
--- a/src/views/QR/index.js
+++ b/src/views/QR/index.js
@ -271,7 +271,7 @@ class QR extends Component {
                  </div>
                ) : (
                  <div className="mobile-qr__notAccess d-flex flex-column p-3">
-                    <h1>{window.q("محتوایی برای این صفحه در دسترس نیست.!")}</h1>
+                    <h1>{window.t("محتوایی برای این صفحه در دسترس نیست.!")}</h1>
                    <div className="mobile-qr-scan__back d-flex mb-2">
                      <Link to="/">{window.t("بازگشت")}</Link>
                    </div>
--- a/src/views/QRScan/LastQr/index.js
+++ b/src/views/QRScan/LastQr/index.js
@ -3,7 +3,8 @@ import { Link } from "react-router-dom";

 import "./index.scss";

-const grades = [
+export default function LastQR(props) {
+  const grades = [
    "0",
    window.t("اول"),
    window.t("دوم"),
@ -17,9 +18,7 @@ const grades = [
    window.t("دهم"),
    window.t("یازدهم"),
    window.t("دوازدهم"),
-];
-
-export default function LastQR(props) {
+  ];
  const { data } = props;
  return (
    <>
--- a/src/views/Reset.js
+++ b/src/views/Reset.js
@ -0,0 +1,7 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+export default function Reset() {
+  let history = useHistory();
+  setTimeout(() => history.goBack(), 100);
+  return <>{""}</>;
+}
--- a/src/views/Support/Upload/index.js
+++ b/src/views/Support/Upload/index.js
@ -20,7 +20,10 @@ export default function Document(props) {
  return (
    <>
      {window.innerWidth < 1000 ? (
-        <div className="support__document d-flex justify-content-center align-items-center mb-3">
+        <div
+          className="support__document d-flex justify-content-center align-items-center mb-3"
+          style={{ marginTop: 8 }}
+        >
          <input
            type="file"
            name={name}
--- a/src/views/Support/index.js
+++ b/src/views/Support/index.js
@ -10,21 +10,7 @@ import "./index.scss";
 import { connect } from "react-redux";
 const maxDesktopSize = 1250;
 const maxMobileSize = 550;
-const grades = [
-  window.t("پیش دبستان"),
-  window.t("اول"),
-  window.t("دوم"),
-  window.t("سوم"),
-  window.t("چهارم"),
-  window.t("پنجم"),
-  window.t("ششم"),
-  window.t("هفتم"),
-  window.t("هشتم"),
-  window.t("نهم"),
-  window.t("دهم"),
-  window.t("یازدهم"),
-  window.t("دوازدهم"),
-];
+
 const fontSize = {
  desktop: {
    h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
@ -80,6 +66,21 @@ class Support extends Component {
    //todo redirectHome
  }
  render() {
+    const grades = [
+      window.t("پیش دبستان"),
+      window.t("اول"),
+      window.t("دوم"),
+      window.t("سوم"),
+      window.t("چهارم"),
+      window.t("پنجم"),
+      window.t("ششم"),
+      window.t("هفتم"),
+      window.t("هشتم"),
+      window.t("نهم"),
+      window.t("دهم"),
+      window.t("یازدهم"),
+      window.t("دوازدهم"),
+    ];
    let { status } = this.props;
    let opt = [
      window.t("واحد مورد نظر"),
@ -92,7 +93,12 @@ class Support extends Component {
      <>
        <div className="mobile-support d-flex flex-column align-items-center">
          <Navbar page={"support"} />
-          <div className="mobile-support__form d-flex flex-column">
+          <div
+            className={
+              "mobile-support__form d-flex flex-column " +
+              (window.lang === "en" ? "ltr" : "")
+            }
+          >
            <h1 style={{ fontSize: fontSize.mobile.h1 }}>
              {window.t("پشتیبانی")}
            </h1>
@ -177,6 +183,7 @@ export default connect(
    myProductList: state.userProduct.myList,
    status: state.user.status,
    uploadFileId: state.file.supportFileId,
+    lang: state.publicApi.lang,
  }),
  {
    getUserProductList: userProduct.myList,