From e8555e7ae755dd89beb62fba6b82c93f22cef1bc Mon Sep 17 00:00:00 2001
From: HOANGLAOTA <hoangmt0502@gmail.com>
Date: Thu, 18 Jul 2024 09:02:04 +0700
Subject: [PATCH] fix bug 1807

---
 .../AdvisementForm/AdvisementForm.jsx         | 39 ++++++++--
 .../AdvisementForm/AdvisementForm.logic.js    |  8 +-
 .../AdvisementForm/AdvisementForm.style.scss  |  4 +-
 src/_components/Auth/InputText/index.js       | 74 +++++++++++++------
 src/_components/Auth/InputText/index.scss     | 21 ++++++
 5 files changed, 107 insertions(+), 39 deletions(-)

diff --git a/src/_components/AdvisementForm/AdvisementForm.jsx b/src/_components/AdvisementForm/AdvisementForm.jsx
index b307366..43fbc91 100644
--- a/src/_components/AdvisementForm/AdvisementForm.jsx
+++ b/src/_components/AdvisementForm/AdvisementForm.jsx
@@ -64,14 +64,31 @@ const AdvisementForm = (props) => {
             ) no-repeat top center /cover`,
           }}
         >
-          <div>
+          <div className="">
             {props.type == userConstants.ROLE_TEACHER ? (
-              <img
-                src="/assets/images/homeNews/content/teacher/title_advisement_teacher.png"
-                alt="Titlte Advisement"
-                className="contain_image title_header_teacher"
-                style={{width: '90%'}}
-              />
+              <>
+                <img
+                  src="/assets/images/homeNews/content/teacher/title_advisement_teacher.png"
+                  alt="Titlte Advisement"
+                  className="contain_image title_header_teacher text-align-center display_none_mobile"
+                  style={{width: '90%'}}
+                />
+
+                <div className="flex-center-column hide display_flex_mobile">
+                  <img
+                    src="/assets/images/homeNews/content/teacher/title_advisement_teacher_1_mobile.png"
+                    alt="Titlte Advisement"
+                    className="contain_image title_header_teacher_1_mobile text-align-center"
+                    style={{width: '90%'}}
+                  />
+                  <img
+                    src="/assets/images/homeNews/content/teacher/title_advisement_teacher_2_mobile.png"
+                    alt="Titlte Advisement"
+                    className="contain_image title_header_teacher_2_mobile text-align-center"
+                    style={{width: '90%'}}
+                  />
+                </div>
+              </>
             ) : (
               <>
                 <img
@@ -131,6 +148,7 @@ const AdvisementForm = (props) => {
                     onBlurField("name");
                   }}
                   errorAbsolute={true}
+                  showRequired
                 />
                 <InputText
                   value={phone}
@@ -146,6 +164,7 @@ const AdvisementForm = (props) => {
                     onBlurField("phone");
                   }}
                   errorAbsolute={true}
+                  showRequired
                 />
                 <InputText
                   value={email}
@@ -153,7 +172,7 @@ const AdvisementForm = (props) => {
                   type="text"
                   name="email"
                   placeholder="Email"
-                  required={true}
+                  // required={true}
                   // renderLabelIcon={() => renderAuthIcon("phone")}
                   errorText={emailError}
                   setErrorText={setEmailError}
@@ -207,6 +226,10 @@ const AdvisementForm = (props) => {
                   type="text"
                   name="message"
                   placeholder="Lời nhắn"
+                  multiLine
+                  inputProps={{
+                    rows: 3
+                  }}
                 />
 
                 {/* <InputSelectNews
diff --git a/src/_components/AdvisementForm/AdvisementForm.logic.js b/src/_components/AdvisementForm/AdvisementForm.logic.js
index 33c4796..5edbb0d 100644
--- a/src/_components/AdvisementForm/AdvisementForm.logic.js
+++ b/src/_components/AdvisementForm/AdvisementForm.logic.js
@@ -238,7 +238,7 @@ export const advisementLogic = (props) => {
       phone &&
       !nameUserError &&
       !phoneWarning &&
-      !!email?.trim() &&
+      // !!email?.trim() &&
       !emailError
       // timeAdvisement?.value &&
       // !timeAdvisementError
@@ -274,11 +274,7 @@ export const advisementLogic = (props) => {
       } else {
         if (!phone) {
           setPhoneWarning("Vui lòng nhập thông tin.");
-        } else {
-          if(!email) {
-            setEmailError("Vui lòng nhập thông tin.")
-          }
-        }
+        } 
       }
     }
   };
diff --git a/src/_components/AdvisementForm/AdvisementForm.style.scss b/src/_components/AdvisementForm/AdvisementForm.style.scss
index 8d0e512..3808461 100644
--- a/src/_components/AdvisementForm/AdvisementForm.style.scss
+++ b/src/_components/AdvisementForm/AdvisementForm.style.scss
@@ -186,12 +186,12 @@
         }
 
         .input_text_base {
-          padding: 0 1.2rem !important;
+          padding: 0 1.2rem;
         }
 
         .input_text_base,
         .input_select_main_wrapper {
-          height: clamp(3.2rem, 4vw, 3.375rem) !important;
+          height: clamp(3.2rem, 4vw, 3.375rem);
           border: none;
           background-color: var(--white-color) !important;
           margin-bottom: 2.3rem;
diff --git a/src/_components/Auth/InputText/index.js b/src/_components/Auth/InputText/index.js
index 296889b..9f83788 100644
--- a/src/_components/Auth/InputText/index.js
+++ b/src/_components/Auth/InputText/index.js
@@ -105,6 +105,7 @@ const InputText = (props) => {
           <span>{props.errorText}</span>
         </div>
       ) : null}
+      {props?.showRequired && <div className="input_text_required">*</div>}
       <div
         ref={$inputRef}
         className={classnames(
@@ -123,29 +124,56 @@ const InputText = (props) => {
           <div className={`icon_label ${!props.renderLabelIcon && "hide"}`}>
             {props.renderLabelIcon ? props.renderLabelIcon() : null}
           </div>
-          <input
-            readOnly={props.readOnly}
-            type={renderType()}
-            name={props.name}
-            placeholder={props.placeholder}
-            required={props.required}
-            className={`input_text one-line ${
-              props.readOnly && " notallowed_cursor"
-            }`}
-            value={props.value}
-            onChange={props.onChange ? props.onChange : changeValue}
-            onFocus={() => {
-              setIsFocus(true);
-              props.onFocus && props.onFocus();
-            }}
-            min={props.min ? props.min : ""}
-            max={props.max ? props.max : ""}
-            onBlur={props.onBlur}
-            autoComplete={
-              props.autoComplete ? props.autoComplete : "new-password"
-            }
-            autoFocus={props?.autoFocus ? props.autoFocus : false}
-          />
+          {!props?.multiLine ? 
+            <input
+              readOnly={props.readOnly}
+              type={renderType()}
+              name={props.name}
+              placeholder={props.placeholder}
+              required={props.required}
+              className={`input_text one-line ${
+                props.readOnly && " notallowed_cursor"
+              }`}
+              value={props.value}
+              onChange={props.onChange ? props.onChange : changeValue}
+              onFocus={() => {
+                setIsFocus(true);
+                props.onFocus && props.onFocus();
+              }}
+              min={props.min ? props.min : ""}
+              max={props.max ? props.max : ""}
+              onBlur={props.onBlur}
+              autoComplete={
+                props.autoComplete ? props.autoComplete : "new-password"
+              }
+              autoFocus={props?.autoFocus ? props.autoFocus : false}
+              {...props?.inputProps}
+            /> : 
+            <textarea
+              readOnly={props.readOnly}
+              type={renderType()}
+              name={props.name}
+              placeholder={props.placeholder}
+              required={props.required}
+              className={`input_text input_text_area ${
+                props.readOnly && " notallowed_cursor"
+              }`}
+              value={props.value}
+              onChange={props.onChange ? props.onChange : changeValue}
+              onFocus={() => {
+                setIsFocus(true);
+                props.onFocus && props.onFocus();
+              }}
+              min={props.min ? props.min : ""}
+              max={props.max ? props.max : ""}
+              onBlur={props.onBlur}
+              autoComplete={
+                props.autoComplete ? props.autoComplete : "new-password"
+              }
+              autoFocus={props?.autoFocus ? props.autoFocus : false}
+              {...props?.inputProps}
+            />
+          }
           {props.typeSearch == "search" && props.value ? (
             <div
               className="flex-center pointer_cursor no_select"
diff --git a/src/_components/Auth/InputText/index.scss b/src/_components/Auth/InputText/index.scss
index e360809..262e291 100644
--- a/src/_components/Auth/InputText/index.scss
+++ b/src/_components/Auth/InputText/index.scss
@@ -3,9 +3,25 @@
 $red: #e22028;
 $border-color: #4a4848;
 
+.input_text_base:has(.input_text_area) {
+  height: auto !important;
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
+}
+
 .input_text_base_container {
   position: relative;
 
+  .input_text_required {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    color: red;
+    display: block;
+    font-size: 26px;
+    line-height: 16px;
+  }
+
   .error_input {
     span {
       color: $red;
@@ -100,6 +116,11 @@ $border-color: #4a4848;
           font-size: 0.9rem !important;
         }
       }
+
+      .input_text_area {
+        resize: none;
+        line-height: 26px;
+      }
     }
 
     .toggle_password {