add class

src/App.js

@@ -31,13 +31,13 @@ function App() {
       <div className="loading-side hide"></div>
       <Router path="/" history={history}>
         <Switch>
-          <RouteRedirectToAdmin
+            <RouteRedirectToAdmin
-            path="/namdinh"
+              path="/:orgLevel"
-            exact={true}
+              exact={true}
-            component={RegisterPage}
+              component={RegisterPage}
-          />
+            />
+          <Redirect from="*" to="/namdinh" />
         </Switch>
-        <Redirect to="/namdinh" />
       </Router>
     </div>
   );

src/_components/Header/HeaderCloud.js

@@ -5,7 +5,7 @@ import { useSelector } from "react-redux";
 function HeaderCloud() {
   const authentication = useSelector((state) => state.authentication);
   return (
-    <div className="logo">
+    <div className="logo-nam-dinh">
       <Link to={`/namdinh`}>
         <img src={"/assets/images/Logo_ND.png"} alt={"Logo"} />
       </Link>

src/_components/Header/HeaderLogoRegister/HeaderLogoRegister.js

@@ -3,19 +3,19 @@ import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import './headerTS.style.scss'
 
-function HeaderTS() {
+function HeaderLogoRegister({srcImg, name, color}) {
-  const authentication = useSelector((state) => state.authentication);
   return (
     <div className="logo header-ts">
       <Link to={`/`}>
         <img 
-          src={"/assets/images/logo_GV.png"} 
+          src={srcImg} 
           alt={"Logo"} 
         />
-        <span className="flex-1 d-flex align-items-center branch-text" >Cô Đặng Thu Hiền</span>
+        {name.split('\n').map((str, index) => <span key={index} className="flex-1 d-flex align-items-center branch-text" style={{color}}>{str}</span>)}
+         
       </Link>
     </div>
   );
 }
 
-export { HeaderTS };
+export { HeaderLogoRegister };

src/_components/Header/HeaderLogoRegister/headerTS.style.scss

@@ -25,12 +25,12 @@
   }
 
   img {
-    width: 90px;
+    width: 120px;
     height: auto;
     margin-top: 0 !important;
 
     @media screen and (max-width: 768px) {
-      width: 50px;
+      width: 74px;
     }
   }
 
@@ -38,7 +38,6 @@
     font-size: 16px;
     font-weight: 700;
     margin-top: 4px;
-    color: #14375F;
     font-family: 'Barlow-Bold';
 
     @media screen and (max-height: 800px) {

src/_components/Header/index.js

@@ -1,5 +1,5 @@
 export * from "./HeaderCloud";
 export * from "./HeaderCurve";
 export * from "./HeaderSquare";
-export * from "./HeaderTS/HeaderTS";
+export * from "./HeaderLogoRegister/HeaderLogoRegister";
 export { default as HeaderNews } from "./HeaderNews/HeaderNews";

src/_constants/register.js

@@ -0,0 +1,17 @@
+export const registerValue = {
+  namdinh: {
+    province_alias: 'nam_dinh_',
+    district_alias: '',
+    organization: '',
+    represent_code: 'ND1'
+  },
+  phucyen: {
+    province_alias: 'vinh_phuc',
+    district_alias: 'thanh_pho_phuc_yen',
+    organization: '',
+    represent_code: 'PY1',
+    logo: '/assets/images/logo_PY1.png',
+    name: 'Phòng Giáo dục thành phố\nPhúc Yên - Vĩnh Phúc',
+    color: '#3493B8'
+  }
+}

src/_containers/RegisterPage/RegisterPage.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { HeaderCloud, HeaderTS } from "../../_components/Header";
+import { HeaderCloud, HeaderLogoRegister } from "../../_components/Header";
 import { stepAuthConstants } from "../../_constants/auth";
 import { apiCaller, history } from "../../_helpers";
 import AccountType from "./components/AccountType";
@@ -15,7 +15,12 @@ import { isEmpty } from "lodash";
 import AddClassName from "./components/AddClassName";
 import './register.scss'
 import AddressStudying from "./components/AddressStudying";
+import { useParams } from "react-router-dom";
+import { registerValue } from "../../_constants/register";
 function RegisterPage() {
+  const params = useParams()
+  const orgLevel = params?.orgLevel;
+  const [registerInfo, setRegisterInfo] = useState(registerValue?.[orgLevel] || undefined);
   const [step, setStep] = useState(stepAuthConstants.STEP_ADDRESS_STUDYING);
   const [dataAddressStudying, setDataAddressStudying] = useState({
     province: '',
@@ -137,6 +142,7 @@ function RegisterPage() {
     } else {
       const newData = {
         ...data,
+        class_nickname: dataClassName?.class_nickname,
         auto_active: 1
       }
       apiCaller("/api_register/register", "POST", newData).then((res) => {
@@ -183,7 +189,15 @@ function RegisterPage() {
 
   return (
     <div className="bg-register rel">
-      <HeaderTS />
+      {!!registerInfo && 
+      (orgLevel === 'namdinh' ? 
+        <HeaderCloud /> 
+        : <HeaderLogoRegister 
+            srcImg={registerInfo?.logo} 
+            name={registerInfo?.name} 
+            color={registerInfo?.color}
+          />
+      )}
       {statusRegister.type !== "success" ? (
         <>
           <div
@@ -198,7 +212,8 @@ function RegisterPage() {
               setStep={setStep}
               data={dataAddressStudying}
               setData={setDataAddressStudying}
-              
+              registerInfo={registerInfo}
+              setRegisterInfo={setRegisterInfo}
             />
           </div>
           <div

src/_containers/RegisterPage/components/AccountType/index.js

@@ -36,7 +36,7 @@ const AccountType = (props) => {
         grade,
         schoolType,
       });
-      props.setStep(stepAuthConstants.STEP_UPDATE_ACCOUNT);
+      props.setStep(stepAuthConstants.STEP_ADD_CLASS_NAME);
     }
   };
 

src/_containers/RegisterPage/components/AccountType/index.scss

@@ -99,11 +99,19 @@ $normal-class: #979797;
                 box-shadow: 0px 1px 3px #cccccc;
                 background-color: white;
 
+                @media screen and (max-width: 768px) {
+                    height: 80px;
+                }
+
                 svg {
                     position: absolute;
                     left: 50%;
                     top: 50%;
                     transform: translate3d(-50%, -50%, 0);
+
+                    @media screen and (max-width: 768px) {
+                        width: 50px;
+                    }
                 }
 
                 .class_number {

src/_containers/RegisterPage/components/AddClassName/index.js

@@ -133,7 +133,7 @@ export default function AddClassName(props) {
       <div className="sunE-custom-form login-form-container_content responsive_small_screen_margin_login">
         <h2 className="title_register title text-center">ĐĂNG KÝ TÀI KHOẢN</h2>
         <h3 className="step_register_name text-center">
-          {`3. ${role === 'student' ? "Chọn lớp" : "Tạo lớp"}`}
+          {`4. ${role === 'student' ? "Học lớp" : "Tạo lớp"}`}
         </h3>
         <div className="add-class-content">
           <form

src/_containers/RegisterPage/components/AddressStudying/index.jsx

@@ -1,11 +1,15 @@
 import { useEffect, useState } from 'react';
 import './index.scss'
-import { apiCaller } from '../../../../_helpers';
+import { apiCaller, history } from '../../../../_helpers';
 import InputSelectSearch from '../../../../_components/Auth/InputSelectSearch';
 import { renderLocationIcon, renderSchoolIcon } from './renderIcon';
 import { stepAuthConstants } from '../../../../_constants/auth';
+import { useParams } from 'react-router-dom';
+import { registerValue } from '../../../../_constants/register';
 
 export default function AddressStudying(props) {
+  const params = useParams()
+  const orgLevel = params?.orgLevel
   const [school, setSchool] = useState({
     title: '',
     value: '',
@@ -14,13 +18,13 @@ export default function AddressStudying(props) {
   // address
   const [provinceList, setProvinceList] = useState([]);
   const [province, setProvince] = useState({
-    title: "Nam Định",
+    title: "",
-    value: "nam_Dinh_",
+    value: props?.registerInfo?.province_alias || "nam_dinh_",
   });
   const [districtList, setDistrictList] = useState([]);
   const [district, setDistrict] = useState({
     title: "",
-    value: "",
+    value: props?.registerInfo?.district_alias || "",
   });
   const [schoolList, setSchoolList] = useState([]);
   const [errProvince, setErrProvince] = useState("");
@@ -60,7 +64,7 @@ export default function AddressStudying(props) {
   };
 
   const getOrganizationList = (districtAlias) => {
-    apiCaller(`/api_organization/get_represent_code?district_alias=${districtAlias}&represent_code=nd1`).then(
+    apiCaller(`/api_organization/get_represent_code?district_alias=${districtAlias}&represent_code=${props?.registerInfo?.represent_code}`).then(
       (res) => {
         if(res?.status) {
           setOrganizationList(res.data)
@@ -129,9 +133,38 @@ export default function AddressStudying(props) {
   }
   
   useEffect(() => {
-    getDistrictList(province.value);
+    if(!props?.registerInfo) {
+      history.push('/namdinh')
+      return;
+    }
+    if(province.value) {
+      getDistrictList(province.value);
+    }
+    if (district.value) {
+      getOrganizationList(district.value);
+    }
   }, []);
 
+  useEffect(() => {
+    if(!!registerValue?.[orgLevel]?.represent_code) {
+      if(!!registerValue[orgLevel]?.province_alias) {
+        setProvince({
+          title: '',
+          value: registerValue[orgLevel].province_alias
+        })
+        getDistrictList(registerValue[orgLevel]?.province_alias);
+      }
+      if (!!registerValue[orgLevel]?.district_alias) {
+        setDistrict({
+          title: '',
+          value: registerValue[orgLevel].district_alias
+        })
+        getOrganizationList(registerValue[orgLevel]?.district_alias);
+      }
+      props.setRegisterInfo(registerValue[orgLevel])
+    }
+  }, [orgLevel])
+
   return (
     <div className="sunE-form-container login-form-container register_create_account register_step">
       <div className="sunE-custom-form login-form-container_content responsive_small_screen_margin_login">
@@ -162,7 +195,7 @@ export default function AddressStudying(props) {
               errorAbsolute={true}
               bottomErr={true}
             /> */}
-            <InputSelectSearch
+            {!!props?.registerInfo?.province_alias && !props?.registerInfo?.district_alias && <InputSelectSearch
               className="field_item field_district"
               value={district}
               setValue={changeDistrict}
@@ -183,7 +216,7 @@ export default function AddressStudying(props) {
               setErrorText={setErrDistrict}
               errorAbsolute={true}
               bottomErr={true}
-            />
+            />}
             <InputSelectSearch
               className="field_item field_school"
               value={organization}
@@ -194,8 +227,8 @@ export default function AddressStudying(props) {
                   title: item.name,
                 };
               })}
-              placeholder="Tổ chức"
+              placeholder="Trường"
-              titleHeader="Chọn Tổ chức"
+              titleHeader="Chọn Trường"
               renderLabelIcon={renderSchoolIcon}
               disabledClick={!district.value}
               onClickDisable={() => {

src/_containers/RegisterPage/components/RegisterSuccess/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import "./index.scss";
+import ButtonNews from "../../../../_components/Button/ButtonNews";
 
 const RegisterSuccess = ({handleReset}) => {
   return (
@@ -30,8 +31,10 @@ const RegisterSuccess = ({handleReset}) => {
         </div>
         <div className="back_login">
           {/* <Link to="/login"> */}
-            <button className={"btn-line-blue"} onClick={handleReset}>Đồng ý</button>
+            <button className={"btn-line-blue btn-back"} onClick={handleReset}>
-          {/* </Link> */}
+              <span>Trở về</span>
+            </button>
+            <button className={"btn-line-blue"} onClick={() =>  window.location.href = 'https://sundayenglish.com/login'} >Đăng nhập</button>
         </div>
       </div>
     </div>

src/_containers/RegisterPage/components/RegisterSuccess/index.scss

@@ -2,19 +2,32 @@
   .title_register {
     margin-bottom: 36px;
   }
+
   .success_icon {
     text-align: center;
     margin-bottom: 44px;
   }
+
   .success_message {
     text-align: center;
+
     p {
       font-size: 18px;
     }
   }
+
   .back_login {
     text-align: center;
     margin-top: 44px;
+    display: flex;
+    align-items: center;
+    gap: 32px;
+
+    @media screen and (max-width: 768px) {
+      flex-direction: column-reverse;
+      gap: 16px;
+    }
+
     button {
       width: 210px;
       height: 50px;
@@ -23,4 +36,32 @@
       font-size: 18px;
     }
   }
-}
+
+  .btn-back {
+    width: 100px;
+    background-image: none;
+    background:
+      linear-gradient(#F3FFFF, #F3FFFF) padding-box,
+      linear-gradient(to right, #00b9b7, #00e1a0) border-box;
+    height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid transparent;
+    border-radius: 10px;
+
+    span {
+      font-size: 18px;
+      font-weight: 600;
+      background: -webkit-linear-gradient(#00b9b7, #00e1a0);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      width: 100%;
+    }
+
+    :hover {
+      opacity: 0.6;
+    }
+  }
+}

src/_containers/RegisterPage/components/UpdateInformation/index.js

@@ -113,7 +113,7 @@ const UpdateInformation = (props) => {
       <div className="sunE-custom-form register_update_info_content responsive_small_screen_margin_login">
         <h2 className="title_register title text-center">ĐĂNG KÝ TÀI KHOẢN</h2>
         <h3 className="step_register_name text-center">
-          {`3. Cập nhật thông tin`}
+          {`5. Cập nhật thông tin`}
         </h3>
 
         {props.popupMessageRegisterTeacher && (
@@ -325,7 +325,7 @@ const UpdateInformation = (props) => {
           <div className="login_text text-center no_select flex-center">
             <p
               onClick={() => {
-                props.setStep(stepAuthConstants.STEP_ACCOUNT_TYPE);
+                props.setStep(stepAuthConstants.STEP_ADD_CLASS_NAME);
               }}
               style={{
                 width: "fit-content",

src/_containers/RegisterPage/register.scss

@@ -5,16 +5,29 @@ $bg-gg: #be1e2d;
 $bg-apple: #000000;
 $loading-color: #f8f8f8;
 
-.bg-register .logo img {
-  width: 144px;
-  margin-top: 32px;
 
-  @media screen and (max-height: 800px) {
+
-    width: 120px;
+.bg-register .logo-nam-dinh {
+  a {
+    margin-left: 32px;
+
+    @media screen and (max-width: 768px) {
+      margin-left: 16px;
+    }
   }
 
-  @media screen and (max-width: 768px) {
+  img {
-    width: 96px;
+    width: 173px;
+    margin-top: 32px;
+
+    @media screen and (max-height: 800px) {
+      width: 163px;
+      margin-top: 16px;
+    }
+
+    @media screen and (max-width: 768px) {
+      width: 128px;
+    }
   }
 }