Finished bug 519

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.0",
+  "version": "2.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/components/ProfileCard/EditProfile/EditProfile.js

@@ -15,6 +15,7 @@ import {
   ButtonsContainer,
   ErrorMessage,
   ProfileImagePicker,
+  InputFieldLabelLocation,
 } from "./EditProfile.styled";
 import selectedTheme from "../../../themes";
 import { useFormik } from "formik";
@@ -29,6 +30,8 @@ import { useDispatch, useSelector } from "react-redux";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
 import editProfileValidation from "../../../validations/editProfileValidation";
 import useIsMobile from "../../../hooks/useIsMobile";
+import AutoSuggestTextField from "../../TextFields/AutoSuggestTextField/AutoSuggestTextField";
+import { selectLocations } from "../../../store/selectors/locationsSelectors";
 
 const EditProfile = (props) => {
   const [profileImage, setProfileImage] = useState(props.profile.image);
@@ -38,6 +41,7 @@ const EditProfile = (props) => {
   const dispatch = useDispatch();
   const { isMobile } = useIsMobile();
   const userId = useSelector(selectUserId);
+  const locations = useSelector(selectLocations);
 
   useEffect(() => {
     if (isMobile) {
@@ -132,23 +136,32 @@ const EditProfile = (props) => {
               fullWidth
               disabled
             />
-            <InputFieldLabel
+            <InputFieldLabelLocation
               leftText={t("common.labelLocation").toUpperCase()}
             />
-            <InputField
+            <AutoSuggestTextField
+              editLocation
+              data={locations.map((item) => ({ name: item.city }))}
+              value={formik.values.firmLocation}
+              onChange={(event, { newValue }) =>
+                formik.setFieldValue("firmLocation", newValue)
+              }
+            />
+            {/* <InputField
               name="firmLocation"
               value={formik.values.firmLocation}
               onChange={formik.handleChange}
               error={formik.touched.firmLocation && formik.errors.firmLocation}
               margin="normal"
               fullWidth
-            />
+            /> */}
           </BasicInfo>
         )}
         {showDetails && (
           <DetailsInfo>
             <InputFieldLabel
               leftText={t("editProfile.website").toUpperCase()}
+              labelWebsite
             />
             <InputField
               name="firmWebsite"

src/components/ProfileCard/EditProfile/EditProfile.styled.js

@@ -86,6 +86,7 @@ export const CloseButton = styled(Box)`
 export const InputFieldLabel = styled(Label)`
   position: relative;
   bottom: -14px;
+
   & label {
     font-size: 12px;
     font-weight: 600;
@@ -93,12 +94,13 @@ export const InputFieldLabel = styled(Label)`
     color: #808080;
     cursor: auto;
     letter-spacing: 0.2px;
+    ${(props) => props.labelWebsite && `margin-top: 8px`}
   }
 
   @media screen and (max-width: 600px) {
     & label {
       font-size: 9px;
-      margin-top: -3px;
+      margin-top: 0;
     }
   }
 `;
@@ -117,6 +119,29 @@ export const InputField = styled(TextField)`
   }
 `;
 
+export const InputFieldLabelLocation = styled(Label)`
+  position: relative;
+  bottom: -8px;
+  margin: 10px 0;
+  & label {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+    color: #808080;
+    cursor: auto;
+    letter-spacing: 0.2px;
+  }
+
+  @media screen and (max-width: 600px) {
+    bottom: -12px;
+    margin: 5px 0 17px 0;
+    & label {
+      font-size: 9px;
+      margin-top: 0;
+    }
+  }
+`;
+
 export const SaveButton = styled(PrimaryButton)`
   font-size: 12px;
   letter-spacing: 1.5px;

src/components/TextFields/AutoSuggestTextField/AutoSuggestTextField.js

@@ -12,18 +12,18 @@ const AutoSuggestTextField = (props) => {
 
   const getSuggestions = (value) => {
     const escapedValue = escapeRegexCharacters(value.trim());
-  
+
     if (escapedValue === "") {
       return [];
     }
-  
+
     const regex = new RegExp("^" + escapedValue, "i");
     const suggestions = data.filter((dataItem) => regex.test(dataItem.name));
-  
+
     if (suggestions.length === 0) {
       return [{ isAddNew: true }];
     }
-  
+
     return suggestions;
   };
 
@@ -49,7 +49,7 @@ const AutoSuggestTextField = (props) => {
   };
 
   return (
-    <AutoSuggestTextFieldContainer>
+    <AutoSuggestTextFieldContainer editLocation={props.editLocation}>
       <Autosuggest
         suggestions={suggestions}
         onSuggestionsFetchRequested={onSuggestionsFetchRequested}
@@ -68,6 +68,7 @@ AutoSuggestTextField.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func,
   data: PropTypes.array,
+  editLocation: PropTypes.bool,
 };
 
 export default AutoSuggestTextField;

src/components/TextFields/AutoSuggestTextField/AutoSuggestTextField.styled.js

@@ -5,12 +5,12 @@ import selectedTheme from "../../../themes";
 export const AutoSuggestTextFieldContainer = styled(Box)`
   & .react-autosuggest__container {
     width: 100%;
-    height: 48px;
+    height: ${(props) => (props.editLocation ? "43px" : "48px")};
     position: relative;
     z-index: 20;
     & input {
       width: 100%;
-      height: 48px;
+      height: ${(props) => (props.editLocation ? "43px" : "48px")};
       padding: 4px 14px;
       border-radius: 4px;
       border: 1px solid rgba(0, 0, 0, 0.23);
@@ -27,7 +27,7 @@ export const AutoSuggestTextFieldContainer = styled(Box)`
       border: 2px solid ${selectedTheme.primaryPurple};
     }
     & input::placeholder {
-      color: rgba(0,0,0, 0.38);
+      color: rgba(0, 0, 0, 0.38);
     }
 
     & div {
@@ -56,4 +56,12 @@ export const AutoSuggestTextFieldContainer = styled(Box)`
       color: ${selectedTheme.primaryBackgroundColor};
     }
   }
+
+  @media (max-width: 600px) {
+    & .react-autosuggest__container {
+      & input {
+        font-size: 13px;
+      }
+    }
+  }
 `;

src/validations/editProfileValidation.js

@@ -6,13 +6,10 @@ export default Yup.object().shape({
     .required(i18n.t("editProfile.labelPIBRequired"))
     .min(9, i18n.t("register.PIBnoOfCharacters"))
     .max(9, i18n.t("register.PIBnoOfCharacters")),
-  firmLocation: Yup.string().required(
-    i18n.t("editProfile.labelLocationRequired")
-  ),
+  firmLocation: Yup.string(),
   firmWebsite: Yup.string(),
   firmApplink: Yup.string(),
   firmPhone: Yup.string()
-    .required(i18n.t("editProfile.labelPhoneRequired"))
     .min(6, i18n.t("editProfile.labelPhoneValid"))
     .max(14, i18n.t("editProfile.labelPhoneValid")),
 });