Register refactored

src/components/TextFields/AutoSuggestTextField/AutoSuggestTextField.js

@@ -49,7 +49,10 @@ const AutoSuggestTextField = (props) => {
   };
 
   return (
-    <AutoSuggestTextFieldContainer editLocation={props.editLocation}>
+    <AutoSuggestTextFieldContainer
+      editLocation={props.editLocation}
+      error={props.error}
+    >
       <Autosuggest
         suggestions={suggestions}
         onSuggestionsFetchRequested={onSuggestionsFetchRequested}
@@ -69,6 +72,11 @@ AutoSuggestTextField.propTypes = {
   onChange: PropTypes.func,
   data: PropTypes.array,
   editLocation: PropTypes.bool,
+  error: PropTypes.bool,
 };
+AutoSuggestTextField.defaultProps = {
+  error: false,
+  editLocation: false,
+}
 
 export default AutoSuggestTextField;

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

@@ -13,7 +13,11 @@ export const AutoSuggestTextFieldContainer = styled(Box)`
       height: ${(props) => (props.editLocation ? "43px" : "48px")};
       padding: 4px 14px;
       border-radius: 4px;
-      border: 1px solid rgba(0, 0, 0, 0.23);
+      border: 1px solid
+        ${(props) =>
+          props.error
+            ? selectedTheme.colors.errorColor
+            : "rgba(0, 0, 0, 0.23)"};
       outline-width: 0;
       background-color: initial;
       font-family: ${selectedTheme.fonts.textFont};
@@ -24,7 +28,11 @@ export const AutoSuggestTextFieldContainer = styled(Box)`
       border: 1px solid rgba(0, 0, 0, 0.87);
     } */
     & input:focus-visible {
-      border: 2px solid ${selectedTheme.colors.primaryPurple};
+      border: 2px solid
+        ${(props) =>
+          props.error
+            ? selectedTheme.colors.errorColor
+            : selectedTheme.colors.primaryPurple};
     }
     & input::placeholder {
       color: rgba(0, 0, 0, 0.38);

src/i18n/resources/rs.js

@@ -19,10 +19,10 @@ export default {
     labelPassword: "Lozinka",
     labelFirm: "Ime Firme",
     labelPIB: "PIB",
-    labelPhone: "Telefon (opciono)",
+    labelPhone: "Telefon",
     labelPhoneNumber: "Broj telefona",
-    labelLocation: "Lokacija (opciono)",
-    labelWebsite: "Adresa Websajta (opciono)",
+    labelLocation: "Lokacija",
+    labelWebsite: "Adresa Websajta",
     logout: "Odjavi se",
     next: "Sledeće",
     nextPage: "Sledeća strana",
@@ -107,10 +107,13 @@ export default {
     imageError: "Slika je obavezna!",
     serverError: "Greška sa serverom!",
     labelLocationValid: "Unesite ispravnu lokaciju!",
+    labelLocationRequired: "Lokacija je obavezna!",
     phoneNumberNoOfCharacters:
       "Broj telefona mora imati izmedju 6 i 15 karaktera!",
+    phoneNumberRequired: "Broj telefona je obavezan!",
     locationError: "Odaberite ispravnu lokaciju!",
     websiteError: "Unesite ispravnu adresu svog website!",
+    websiteRequired: "Website je obavezan!"
   },
   forgotPassword: {
     title: "Povrati lozinku",

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import {
   ErrorMessage,
   FormContainer,
-  RegisterDescription,
+  // RegisterDescription,
 } from "./SecondPartOfRegistration.styled";
 import { useFormik } from "formik";
 import * as Yup from "yup";
@@ -47,9 +47,9 @@ const SecondPartOfRegistration = (props) => {
   });
   return (
     <FormContainer component="form" onSubmit={formik.handleSubmit}>
-      <RegisterDescription component="p" variant="p">
+      {/* <RegisterDescription component="p" variant="p">
         {t("register.descriptionSecond")}
-      </RegisterDescription>
+      </RegisterDescription> */}
 
       <TextField
         name="nameOfFirm"

src/pages/RegisterPages/Register/ThirdPart/ErrorMessage/ErrorMessage.js

@@ -6,12 +6,12 @@ const ErrorMessage = (props) => {
   const formik = props.formik;
   return (
     <>
-      {formik.errors?.location && formik.touched?.location ? (
-        <ErrorMessageContainer>{formik.errors.location}</ErrorMessageContainer>
-      ) : formik.errors?.phoneNumber && formik.touched?.phoneNumber ? (
+      {formik.errors?.phoneNumber && formik.touched?.phoneNumber ? (
         <ErrorMessageContainer>
           {formik.errors.phoneNumber}
         </ErrorMessageContainer>
+      ) : formik.errors?.location && formik.touched?.location ? (
+        <ErrorMessageContainer>{formik.errors.location}</ErrorMessageContainer>
       ) : formik.errors?.website && formik.touched?.website ? (
         <ErrorMessageContainer>{formik.errors.website}</ErrorMessageContainer>
       ) : (

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import {
   FormContainer,
-  RegisterDescription,
+  // RegisterDescription,
 } from "./ThirdPartOfRegistration.styled";
 import { useFormik } from "formik";
 import { useTranslation } from "react-i18next";
@@ -47,9 +47,9 @@ const ThirdPartOfRegistration = (props) => {
 
   return (
     <FormContainer component="form" onSubmit={formik.handleSubmit}>
-      <RegisterDescription component="p" variant="p">
+      {/* <RegisterDescription component="p" variant="p">
         {t("register.descriptionThird")}
-      </RegisterDescription>
+      </RegisterDescription> */}
 
       <TextField
         name="phoneNumber"
@@ -77,6 +77,7 @@ const ThirdPartOfRegistration = (props) => {
         placeholder={t("common.labelLocation")}
         data={locations.map((item) => ({ name: item.city }))}
         value={formik.values.location}
+        error={formik.touched.location && Boolean(formik.errors.location)}
         onChange={(event, { newValue }) =>
           formik.setFieldValue("location", newValue)
         }

src/themes/primaryTheme/primaryThemeColors.js

@@ -38,4 +38,5 @@ export const primaryThemeColors = {
   staticBackgroundColor: "#F3EFF8",
   stepProgressAltColor: "#F4F4F4",
   blockedColor: "#EE3A3A",
+  errorColor: "#d32f2f"
 };

src/validations/registerValidations/thirdPartValidation.js

@@ -1,4 +1,3 @@
-import i18next from "i18next";
 import * as Yup from "yup";
 import i18n from "../../i18n";
 
@@ -6,13 +5,18 @@ export default (locations) =>
   Yup.object().shape({
     phoneNumber: Yup.string()
       .min(6, i18n.t("register.phoneNumberNoOfCharacters"))
-      .max(14, i18n.t("register.phoneNumberNoOfCharacters")),
-    location: Yup.string().oneOf(
-      locations.map((l) => l.city),
-      i18next.t("register.labelLocationValid")
-    ),
-    website: Yup.string().matches(
-      /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm,
-      i18n.t("register.websiteError")
-    ),
+      .max(14, i18n.t("register.phoneNumberNoOfCharacters"))
+      .required(i18n.t("register.phoneNumberRequired")),
+    location: Yup.string()
+      .oneOf(
+        locations.map((l) => l.city),
+        i18n.t("register.labelLocationValid")
+      )
+      .required(i18n.t("register.labelLocationRequired")),
+    website: Yup.string()
+      .matches(
+        /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm,
+        i18n.t("register.websiteError")
+      )
+      .required(i18n.t("register.websiteRequired")),
   });