fix bug 1609

src/App.js

@@ -10,6 +10,7 @@ import { alertActions } from "./_actions";
 import { history } from "./_helpers";
 import { useDispatch, useSelector } from "react-redux";
 import { AccountAuthentication } from "./_containers/RegisterPage/components/AccountAuthentication/AccountAuthentication";
+import ChooseOrg from "./_containers/RegisterPage/components/ChooseOrg";
 
 function App() {
   const dispatch = useDispatch();
@@ -39,6 +40,11 @@ function App() {
       <div className="loading-side hide"></div>
       <Router path="/" history={history}>
         <Switch>
+        <RouteRedirectToAdmin
+          path="/"
+          exact={true}
+          component={ChooseOrg}
+        />
         <RouteRedirectToAdmin
           path="/:orgLevel"
           exact={true}
@@ -49,7 +55,7 @@ function App() {
           exact={true}
           component={AccountAuthentication}
         />
-        <Redirect from="*" to="/namdinh" />
+        <Redirect from="*" to="/" />
         </Switch>
       </Router>
     </div>

src/_components/Auth/InputSelectSearch/index.scss

@@ -86,6 +86,7 @@ $border-color: #4a4848;
 
         @include screen_mobile {
           font-size: 0.9rem !important;
+          margin-top: 1%;
         }
       }
     }

src/_components/Auth/InputText/index.scss

@@ -98,6 +98,7 @@ $border-color: #4a4848;
 
         @include screen_mobile {
           font-size: 0.9rem !important;
+          margin-top: 1%;
         }
       }
     }

src/_components/GlobalStyles/GlobalStyles.scss

@@ -1601,7 +1601,7 @@ img {
 
 .btn-action-popup {
   max-width: 200px;
-  width: 155px !important;
+  // width: 155px !important;
 }
 
 .btn-action-popup-smaller {

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: '',
-    represent_code: 'ND1'
+    organization: 'Nam Định',
+    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

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

src/_containers/RegisterPage/components/AccountAuthentication/AccountAuthentication.jsx

@@ -79,7 +79,7 @@ const AccountAuthentication = () => {
           message={"Xác thực tài khoản thành công!"} 
           onClickNo={() => history.goBack()} 
           labelNo='Quay lại' 
-          labelYes={"Đăng nhập"}
+          labelYes={"Đi tới đăng nhập"}
           onClickYes={() => window.location.replace('https://sundayenglish.com/login')}
         />
       }

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

@@ -61,7 +61,7 @@ const AccountType = (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. Học khối`}
+          {`3. Chọn trường`}
         </h3>
         {/* {!props?.org && <div className="account_content">
           <div className="account_content_title">

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 = () => {
@@ -126,15 +127,15 @@ export default function AddressStudying(props) {
     props.setData({
       province: province.value,
       district: district.value,
-      school: school.value,
-      school_id: school.id,
+      school: organization.title,
+      school_id: organization.id,
       organization: organization.value
     })
   }
   
   useEffect(() => {
     if(!props?.registerInfo) {
-      history.push('/namdinh')
+      history.push('/')
       return;
     }
     if(province.value) {
@@ -169,7 +170,7 @@ export default function AddressStudying(props) {
     <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">
         <h2 className="title_register title text-center">ĐĂNG KÝ TÀI KHOẢN</h2>
-        <h3 className="step_register_name text-center">1. Nơi học tập</h3>
+        <h3 className="step_register_name text-center">1. Nơi công tác</h3>
         <form
           className="sunE-login-app"
           onSubmit={handleSubmit}
@@ -225,6 +226,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>
+  )
+}