fix bug 1609

src/App.js

@@ -6,6 +6,7 @@ import {
 import { RegisterPage } from "./_containers/RegisterPage";
 import { alertActions } from "./_actions";
 import { history } from "./_helpers";
+import ChooseOrg from "./_containers/RegisterPage/components/ChooseOrg";
 function App() {
   String.prototype.capitalize = function () {
     var letters =
@@ -31,12 +32,17 @@ function App() {
       <div className="loading-side hide"></div>
       <Router path="/" history={history}>
         <Switch>
+            <RouteRedirectToAdmin
+              path="/"
+              exact={true}
+              component={ChooseOrg}
+            />
             <RouteRedirectToAdmin
               path="/:orgLevel"
               exact={true}
               component={RegisterPage}
             />
-          <Redirect from="*" to="/namdinh" />
+          <Redirect from="*" to="/" />
         </Switch>
       </Router>
     </div>

src/_components/Auth/InputSelectSearch/index.scss

@@ -75,7 +75,7 @@ $border-color: #4a4848;
         height: 100%;
         border: none;
         font-size: 18px;
-        line-height: 21px;
+        // line-height: 21px;
         flex: 1;
         background-color: transparent;
         opacity: 1;
@@ -86,6 +86,7 @@ $border-color: #4a4848;
 
         @include screen_mobile {
           font-size: 0.9rem !important;
+          margin-top: 1%;
         }
       }
     }

src/_components/Auth/InputText/index.scss

@@ -88,7 +88,7 @@ $border-color: #4a4848;
         height: 100%;
         border: none;
         font-size: 18px;
-        line-height: 21px;
+        // line-height: 21px;
         flex: 1;
         background-color: transparent;
 
@@ -98,6 +98,7 @@ $border-color: #4a4848;
 
         @include screen_mobile {
           font-size: 0.9rem !important;
+          margin-top: 1%;
         }
       }
     }

src/_components/Header/HeaderLogoRegister/HeaderLogoRegister.js

@@ -3,10 +3,10 @@ import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import './headerTS.style.scss'
 
-function HeaderLogoRegister({srcImg, name, color}) {
+function HeaderLogoRegister({srcImg, name, color, path}) {
   return (
     <div className="logo header-ts">
-      <Link to={`/`}>
+      <Link to={'/' + path}>
         <img 
           src={srcImg} 
           alt={"Logo"} 

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

@@ -13,6 +13,7 @@
     align-items: center;
     margin-left: 56px;
     margin-top: 8px;
+    cursor: default;
 
     @media screen and (max-height: 800px) {
       margin-left: 46px;

src/_constants/register.js

@@ -1,17 +1,22 @@
 export const registerValue = {
   namdinh: {
+    path: 'namdinh',
     province_alias: 'nam_dinh_',
     district_alias: '',
-    organization: '',
+    organization: 'Nam Định',
-    represent_code: 'ND1'
+    represent_code: 'ND1',
+    logo: '/assets/images/logo_ND.png',
+    name: 'Sở giáo dục và đào tạo Nam Định',
+    color: '#007FBF'
   },
   phucyen: {
+    path: 'phucyen',
     province_alias: 'vinh_phuc',
     district_alias: 'thanh_pho_phuc_yen',
-    organization: '',
+    organization: 'Phúc Yên',
     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

@@ -190,14 +190,13 @@ function RegisterPage() {
   return (
     <div className="bg-register rel">
       {!!registerInfo && 
-      (orgLevel === 'namdinh' ? 
+        <HeaderLogoRegister 
-        <HeaderCloud /> 
+          srcImg={registerInfo?.logo} 
-        : <HeaderLogoRegister 
+          name={registerInfo?.name} 
-            srcImg={registerInfo?.logo} 
+          color={registerInfo?.color}
-            name={registerInfo?.name} 
+          path={registerInfo?.path}
-            color={registerInfo?.color}
+        />
-          />
+      }
-      )}
       {statusRegister.type !== "success" ? (
         <>
           <div

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

@@ -19,7 +19,7 @@ export default function AddressStudying(props) {
   const [provinceList, setProvinceList] = useState([]);
   const [province, setProvince] = useState({
     title: "",
-    value: props?.registerInfo?.province_alias || "nam_dinh_",
+    value: props?.registerInfo?.province_alias || "",
   });
   const [districtList, setDistrictList] = useState([]);
   const [district, setDistrict] = useState({
@@ -33,6 +33,7 @@ export default function AddressStudying(props) {
   const [organization, setOrganization] = useState({
     title: '',
     value: '',
+    id: '',
   });
 
   const getProvinceList = () => {
@@ -99,6 +100,7 @@ export default function AddressStudying(props) {
       setOrganization({
         title: "",
         value: "",
+        id: '',
       });
       setDistrict(newDistrict);
       // getSchoolList(newDistrict.value);
@@ -126,15 +128,15 @@ export default function AddressStudying(props) {
     props.setData({
       province: province.value,
       district: district.value,
-      school: school.value,
+      school: organization.title,
-      school_id: school.id,
+      school_id: organization.id,
       organization: organization.value
     })
   }
   
   useEffect(() => {
     if(!props?.registerInfo) {
-      history.push('/namdinh')
+      history.push('/')
       return;
     }
     if(province.value) {
@@ -225,6 +227,7 @@ export default function AddressStudying(props) {
                 return {
                   value: item.token,
                   title: item.name,
+                  id: item.id
                 };
               })}
               placeholder="Trường"

src/_containers/RegisterPage/components/ChooseOrg/ChooseOrg.logic.js

@@ -0,0 +1,13 @@
+import { useState } from "react"
+import { registerValue } from "../../../../_constants/register"
+
+export const ChooseOrgLogic = () => {
+  const [organizationList, setOrganizationList] = useState(Object.values(registerValue))
+  const [orgHover, setOrgHover] = useState(null)
+
+  return {
+    organizationList,
+    orgHover,
+    setOrgHover
+  }
+}

src/_containers/RegisterPage/components/ChooseOrg/ChooseOrg.style.scss

@@ -0,0 +1,98 @@
+@import "/src/_styles/mixin";
+
+// .bg-register {
+//   max-height: 100vh;
+//   overflow-y: hidden;
+
+//   @include screen_mobile {
+//     overflow: unset;
+//     max-height: unset;
+//   }
+// }
+
+.choose-org-container {
+  width: 100%;
+  display: block;
+  padding: 5% 15% 0;
+
+  @include screen_mobile {
+    padding: 10% 0;
+  }
+}
+
+.choose-org-heading {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 600;
+  text-transform: uppercase;
+
+  @include screen_mobile {
+    font-size: 1.6rem;
+  }
+}
+
+.org-list-container {
+  margin-top: 94px;
+  display: flex;
+  justify-content: center;
+  overflow-y: auto;
+
+  @include screen_mobile {
+    padding: 0 16px;
+    margin-top: 26px;
+    overflow-y: unset;
+  }
+
+  @media screen and (max-height: 800px) {
+    margin-top: 40px;
+  }
+}
+
+.org-list {
+  max-height: 64vh;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 50px;
+  justify-content: center;
+
+  @include screen_mobile {
+    max-height: unset;
+    gap: 32px;
+  }
+}
+
+.org-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.org-item-img {
+  display: flex;
+  justify-content: center;
+
+  img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: contain;
+
+    @include screen_mobile {
+      width: 80px;
+      height: 80px;
+    }
+  }
+}
+
+.org-item-name {
+  p {
+    font-size: 18px;
+    font-weight: 600;
+    text-align: center;
+
+    @include screen_mobile {
+      font-size: 14px;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import { history } from '../../../../_helpers'
+import { ChooseOrgLogic } from './ChooseOrg.logic'
+import './ChooseOrg.style.scss'
+
+export default function ChooseOrg() {
+  const {organizationList, orgHover,setOrgHover,} = ChooseOrgLogic()
+  return (
+    <div className="bg-register rel">
+      <div className="choose-org-container">
+        <p className="choose-org-heading">Chọn tổ chức của bạn</p>
+        <div className='org-list-container scrollbar-custom'>
+          <div className='org-list'>
+            {organizationList.map(item => (
+              <div 
+                className='org-item' 
+                key={item.path} 
+                onMouseEnter={() => setOrgHover(item)} 
+                onMouseLeave={() => setOrgHover(null)}
+                onClick={() => history.push(`/${item.path}`)}
+              >
+                <div className='org-item-img'>
+                  <img src={item.logo} alt={item.path} />
+                </div>
+                <div className='org-item-name'>
+                  <p style={{color: orgHover?.path === item.path ? item.color : 'unset'}}>{item.organization}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -32,9 +32,9 @@ const RegisterSuccess = ({handleReset}) => {
         <div className="back_login">
           {/* <Link to="/login"> */}
             <button className={"btn-line-blue btn-back"} onClick={handleReset}>
-              <span>Trở về</span>
+              <span>Quay lại</span>
             </button>
-            <button className={"btn-line-blue"} onClick={() =>  window.location.href = 'https://sundayenglish.com/login'} >Đăng nhập</button>
+            <button className={"btn-line-blue"} onClick={() =>  window.location.href = 'https://sundayenglish.com/login'} >Đi tới đăng nhập</button>
         </div>
       </div>
     </div>