Merge branch 'feature/632' of https://git.dilig.net/selenaaasi/trampa-frontend

src/components/About/AboutSection/AboutSection.styled.js

   flex: 1;
   width: 648px;
   height: 345px;
+  object-fit: cover;
 `;
 export const AboutSectionTextContainer = styled(Box)`
   display: flex;

src/components/Buttons/ArrowButton/ArrowButton.styled.js

   ${(props) =>
     props.disabled &&
     `
-    border 1px solid ${selectedTheme.colors.iconStrokeDisabledColor};
+    border 1px solid ${selectedTheme.colors.iconStrokeDisabledColor} !important;
     &:hover {
         background-color: inherit;
         & svg path {

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

     }
   }
 `;
+export const ErrorText = styled(Typography)`
+  color: red;
+  font-family: ${selectedTheme.fonts.textFont};
+  height: 20px;
+  font-size: 14px;
+`;

src/components/Cards/CreateOfferCard/FirstPart/ErrorMessage/ErrorMessage.js

+import React from "react";
+import PropTypes from "prop-types";
+import { ErrorText } from "../../CreateOffer.styled";
+
+const ErrorMessage = (props) => {
+  const formik = props.formik;
+  return (
+    <>
+      {formik.errors.nameOfProduct && formik.touched.nameOfProduct ? (
+        <ErrorText>{formik.errors.nameOfProduct}</ErrorText>
+      ) : formik.errors.description && formik.touched.description ? (
+        <ErrorText>{formik.errors.description}</ErrorText>
+      ) : formik.errors.location && formik.touched.location ? (
+        <ErrorText>{formik.errors.location}</ErrorText>
+      ) : formik.errors.category && formik.touched.category ? (
+        <ErrorText>{formik.errors.category}</ErrorText>
+      ) : formik.errors.subcategory && formik.touched.subcategory ? (
+        <ErrorText>{formik.errors.subcategory}</ErrorText>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+ErrorMessage.propTypes = {
+  formik: PropTypes.any,
+};
+
+export default ErrorMessage;

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.js

 import NextButton from "./NextButton/NextButton";
 import firstPartCreateOfferInitialValues from "../../../../initialValues/createOfferInitialValues/firstPartCreateOfferInitialValues";
 import firstPartCreateOfferValidation from "../../../../validations/createOfferValidation/firstPartCreateOfferValidation";
+import ErrorMessage from "./ErrorMessage/ErrorMessage";
 
 const FirstPartCreateOffer = (props) => {
   const [subcategories, setSubcategories] = useState([]);
     initialValues,
     validationSchema,
     onSubmit: handleSubmit,
-    validateOnBlur: true,
+    // validateOnBlur: true,
     enableReinitialize: true,
   });
 
         handleSubcategories={handleSubcategories}
       />
       <OfferSubcategoryField formik={formik} subcategories={subcategories} />
+      <ErrorMessage formik={formik} />
       <NextButton formik={formik} />
     </CreateOfferFormContainer>
   );

src/components/Cards/FilterCard/FilterCard.js

       myOffers={props.myOffers}
       skeleton={props.skeleton}
     >
-      <SkeletonFilterCard
-        skeleton={props.skeleton}
-      />
+      <SkeletonFilterCard skeleton={props.skeleton} />
       {/* Header title for my offers */}
       {props.myOffers && <HeaderBack />}
 
         />
 
         {/* Locations */}
-        <LocationChoser filters={filters} ref={locationRef} />
+        {!props.myOffers && (
+          <LocationChoser filters={filters} ref={locationRef} />
+        )}
       </ContentContainer>
 
       <FilterFooter

src/components/Cards/ItemDetailsCard/Information/Information.styled.js

 export const InfoText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   text-transform: capitalize;
+  color: ${selectedTheme.colors.primaryText};
+  font-size: 12px;
   @media (max-width: 600px) {
     font-size: 12px;
   }

src/components/Cards/ProfileCard/ProfileCard.styled.js

   box-sizing: border-box;
   padding: 0 50px;
   margin-top: 34px;
+  overflow: hidden;
 
   @media (max-width: 1200px) {
     padding: 0 36px 0 0;
 `;
 
 export const ProfileCardWrapper = styled(Card)`
-  border: 1px solid ${selectedTheme.colors.primaryPurple};
+  border: 1px solid ${selectedTheme.colors.borderNormal};
   background: ${(props) =>
     props.isMyProfile ? selectedTheme.colors.primaryPurple : "white"};
   width: 100%;
   min-width: fit-content;
   padding: 1rem;
   position: relative;
+  border-radius: 0 0 4px 4px;
 `;
 
 // export const ProfileName = styled(Typography)`
 export const HeaderTitle = styled(Typography)`
   font-size: 16px;
   font-family: ${selectedTheme.fonts.textFont};
-  color: ${selectedTheme.colors.primaryDarkTextThird};
+  color: ${selectedTheme.colors.primaryText};
   position: relative;
   @media (max-width: 600px) {
     font-size: 12px;

src/components/Cards/ProfileCard/ProfileStats/ProfileStats.styled.js

   padding-bottom: 1.3rem;
   margin-bottom: -1rem;
   margin-left: -1rem;
-  border-radius: 0 0 4px 4px;
+  /* border-radius: 0 0 4px 4px; */
 `;
 export const ProfileStatsGrid = styled(Grid)`
   display: flex;

src/components/DirectChat/DirectChat.styled.js

 import styled from "styled-components";
 
 export const DirectChatContainer = styled(Box)`
+    margin-bottom: 8px;
 `

src/components/DirectChat/DirectChatHeaderTitle/DirectChatHeaderTitle.styled.js

 import { Box, Link, Typography } from "@mui/material";
 import styled from "styled-components";
-import {ReactComponent as Message} from "../../../assets/images/svg/message.svg";
+import { ReactComponent as Message } from "../../../assets/images/svg/message.svg";
 import selectedTheme from "../../../themes";
 
-export const DirectChatHeaderTitleContainer = styled(Box)`
-
-`
-export const MessageIcon = styled(Message)`
-
-`
+export const DirectChatHeaderTitleContainer = styled(Box)``;
+export const MessageIcon = styled(Message)``;
 export const HeaderTitleContent = styled(Typography)`
-    font-family: ${selectedTheme.fonts.textFont};
-    font-size: 16px;
-    position: relative;
-    left: 9px;
-    bottom: 7px;
-`
+  font-family: ${selectedTheme.fonts.textFont};
+  font-size: 16px;
+  position: relative;
+  left: 9px;
+  bottom: 7px;
+  color: ${selectedTheme.colors.primaryText};
+`;
 export const ButtonContainer = styled(Link)`
   width: fit-content;
   cursor: pointer;

src/components/DirectChat/MiniChatColumn/MiniChatColumnHeader/MiniChatColumnHeaderTitle.styled.js

     font-size: 16px;
     position: relative;
     left: 9px;
+    color: ${selectedTheme.colors.primaryText};
     bottom: 7px;
 `

src/components/Header/AboutHeader/AboutHeader.styled.js

   font-size: 16px;
   line-height: 22px;
   letter-spacing: 0.02em;
+  border-bottom: 0px solid ${selectedTheme.iconYellowColor};
+  &:hover {
+    border-bottom: 1px solid ${selectedTheme.colors.iconYellowColor};
+  }
 `;

src/components/MarketPlace/Header/Header.js

 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import {
-  ButtonContainer,
+  // ButtonContainer,
   CategoryHeaderIcon,
   HeaderAltLocation,
   HeaderButton,
   HeaderLocation,
   HeaderOptions,
   HeaderSelect,
-  HeaderText,
+  // HeaderText,
+  HeaderTitleContainer,
+  HeaderTitleText,
   HeaderWrapperContainer,
   IconStyled,
   PageTitleContainer,
   SelectOption,
+  SwapsHeaderIcon,
   SwapsIcon,
   SwapsTitle,
 } from "./Header.styled";
 import { useSelector } from "react-redux";
 import { selectHeaderString } from "../../../store/selectors/filtersSelectors";
 import useIsMobile from "../../../hooks/useIsMobile";
-import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
-import history from "../../../store/utils/history";
+// import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
+// import history from "../../../store/utils/history";
 
 const DownArrow = (props) => (
   <IconStyled {...props}>
   const { isMobile } = useIsMobile();
   // Changing header string on refresh or on load
 
-  const showAltString = useMemo(() => {
-    return (
-      sorting.selectedSortOption === sortEnum.INITIAL ||
-      sorting.selectedSortOption === sortEnum.NEW ||
-      !sorting.selectedSortOption
-    );
+  const altString = useMemo(() => {
+    if (sorting.selectedSortOption === sortEnum.OLD) {
+      return t("header.oldOffers");
+    }
+    if (sorting.selectedSortOption === sortEnum.POPULAR) {
+      return t("header.popularOffers");
+    }
+    return t("header.newOffers");
   }, [sorting.selectedSortOption]);
 
   const handleChangeSelect = (event) => {
     sorting.changeSorting(event.target.value);
   };
-  const goBack = () => {
-    history.goBack();
-  };
+  // const goBack = () => {
+  //   history.goBack();
+  // };
 
   return (
     <>
-      <SkeletonHeader skeleton={props.skeleton} myOffers={props.myOffers}/>
+      <SkeletonHeader skeleton={props.skeleton} myOffers={props.myOffers} />
       <HeaderWrapperContainer skeleton={props.skeleton}>
         <HeaderContainer>
           {/* Setting appropriate header title if page is market place or my offers */}
               {!props.myOffers ? (
                 <>
                   <CategoryHeaderIcon />
-                  <HeaderLocation initial={showAltString}>
+                  <HeaderLocation initial={altString}>
                     {headerString}
                   </HeaderLocation>
-                  {showAltString && (
-                    <HeaderAltLocation>
-                      {t("header.newOffers")}
-                    </HeaderAltLocation>
-                  )}
+                  <HeaderAltLocation>{altString}</HeaderAltLocation>
                 </>
               ) : (
-                <ButtonContainer onClick={goBack}>
-                  <ArrowButton side={"left"}></ArrowButton>
-                  <HeaderText>{t("profile.backToHome")}</HeaderText>
-                </ButtonContainer>
+                <HeaderTitleContainer>
+                  <SwapsHeaderIcon />
+                  <HeaderTitleText>{t("header.myOffers")}</HeaderTitleText>
+                </HeaderTitleContainer>
               )}
             </>
           </Tooltip>

src/components/MarketPlace/Header/Header.styled.js

     font-size: 14px;
   }
 `;
+export const SwapsHeaderIcon = styled(SwapsIcon)`
+  width: 18px;
+  height: 18px;
+`
+export const HeaderTitleContainer = styled(Box)`
+  position: relative;
+  left: 5px;
+`
+export const HeaderTitleText = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
+  font-size: 16px;
+  position: relative;
+  bottom: 2px;
+`

src/components/Prices/PricesHeader/PricesHeader.js

 import React from "react";
 import PropTypes from "prop-types";
-import { Arrow, ButtonContainer, LinkText, PricesHeaderContainer, PricesHeaderTitle } from "./PricesHeader.styled";
+import { Arrow, ButtonContainer, LinkText, PricesHeaderContainer, PricesHeaderLine, PricesHeaderTitle } from "./PricesHeader.styled";
 import { useTranslation } from "react-i18next";
 
 const PricesHeader = () => {
   return (
     <PricesHeaderContainer>
       <PricesHeaderTitle>{t("prices.header.title")}</PricesHeaderTitle>
+      <PricesHeaderLine />
       <ButtonContainer>
         <LinkText>{t("prices.header.link")}</LinkText>
         <Arrow />

src/components/Prices/PricesHeader/PricesHeader.styled.js

   display: flex;
   flex: 1;
 `;
+export const PricesHeaderLine = styled(Box)`
+    border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
+    width: 90px;
+    margin-bottom: 26px;
+`;
 export const PricesHeaderContainer = styled(Box)`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   width: 100%;
   justify-content: space-between;
 `;

src/components/Profile/ProfileOffers/ProfileOffers.js

                 isMyOffer={props.isMyProfile}
                 offer={item}
                 key={JSON.stringify(item)}
-                pinned
                 messageUser={messageUser}
               />
             ))

src/components/Profile/ProfileOffers/SelectSortField/SelectSortField.styled.js

   width: 210px;
   height: 35px;
   font-family: ${selectedTheme.fonts.textFont};
+  background: white;
   margin-top: 3px;
   font-weight: 400;
   position: absolute;

src/components/UserReviews/NoReviews/NoReviews.js

     <NoReviewsContainer>
       <NoReviewsText>{t("reviews.title")}</NoReviewsText>
       <NoReviewsAltText>{t("reviews.altTitle")}</NoReviewsAltText>
-      <UserReviewsSkeleton numOfElements={isMobile ? 1 : 2} />
+      <UserReviewsSkeleton noReviews numOfElements={isMobile ? 1 : 2} />
     </NoReviewsContainer>
   );
 };

src/components/UserReviews/NoReviews/NoReviews.styled.js

 import selectedTheme from "../../../themes"
 
 export const NoReviewsContainer = styled(Box)`
+  text-align: center;
+  margin-top: 36px;
 `
 export const NoReviewsText = styled(Typography)`
   color: ${selectedTheme.colors.primaryPurple};
   font-family: ${selectedTheme.fonts.textFont};
   text-align: center;
   font-weight: 700;
-  width: 100%;
+  width: 229px;
   
 `
 export const NoReviewsAltText = styled(Typography)`

src/components/UserReviews/NoReviews/UserReviewsSkeleton/UserReviewsSkeleton.styled.js

   display: flex;
   flex-direction: row;
   & * {
-    background-color: ${(props) =>
-      props.skeleton
-        ? `${selectedTheme.colors.skeletonItemColor}`
-        : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
-  }
-  & * {
+    background-color: ${selectedTheme.colors.skeletonItemColor};
     ${(props) =>
       props.skeleton &&
       css`
   width: 54px;
   height: 54px;
   border-radius: 100%;
+  background-color: ${selectedTheme.colors.skeletonItemColor};
   ${(props) =>
     props.skeleton &&
     css`
   height: 18px;
   margin-top: 18px;
   margin-left: 18px;
+  background-color: ${selectedTheme.colors.skeletonItemColor};
   ${(props) =>
     props.skeleton &&
     css`
 export const UserReviewsSkeletonSquareImage = styled(Box)`
   width: 54px;
   height: 54px;
-  background-color: ${(props) =>
-    props.skeleton
-      ? `${selectedTheme.colors.skeletonItemColor}`
-      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
-
+  background-color: ${selectedTheme.colors.skeletonItemColor};
   ${(props) =>
     props.skeleton &&
     css`
 export const UserReviewsSkeletonSquareInfoFirstLine = styled(Box)`
   width: 121px;
   height: 14px;
-  background-color: ${(props) =>
-    props.skeleton
-      ? `${selectedTheme.colors.skeletonItemColor}`
-      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
+  background-color: ${selectedTheme.colors.skeletonItemColor};
 
   ${(props) =>
     props.skeleton &&
   width: 78px;
   height: 18px;
   margin-top: 6px;
-  background-color: ${(props) =>
-    props.skeleton
-      ? `${selectedTheme.colors.skeletonItemColor}`
-      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
+  background-color: ${selectedTheme.colors.skeletonItemColor};
   ${(props) =>
     props.skeleton &&
     css`

src/components/UserReviews/ReviewsSorting/ReviewsSorting.js

 import { reviewSortEnum } from "../../../enums/reviewEnum";
 import { setReviews } from "../../../store/actions/review/reviewActions";
 
-const ReviewsSorting = () => {
+const ReviewsSorting = (props) => {
   const reviews = useSelector(selectSelectedReviews);
   const dispatch = useDispatch();
   const [value, setValue] = useState();
         )
       )
     );
+    props.changeSorting();
     setValue(event.target.value);
   };
   return (
 
 ReviewsSorting.propTypes = {
   children: PropTypes.node,
+  changeSorting: PropTypes.func,
 };
 
 export default ReviewsSorting;

src/components/UserReviews/UserReviews.js

-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import PropTypes from "prop-types";
 import {
   ReviewList,
   const reviews = useSelector(selectSelectedReviews);
   const routeMatch = useRouteMatch();
   const dispatch = useDispatch();
+  const listRef = useRef(null);
 
   const isLoadingReview = useSelector(
     selectIsLoadingByActionType(
     return [];
   }, [props.profileReviews, offer, props.isProfileReviews, reviews]);
 
+  const scrollToTop = () => {
+    listRef.current.scrollTo({ top: 0, behaviour: "smooth" });
+  };
+
   return (
     <>
       {!props.givingReview &&
                 />
                 <ReviewsTitle>{t("reviews.rates")}</ReviewsTitle>
               </ReviewsHeaderTitle>
-              <ReviewsSorting />
+              <ReviewsSorting changeSorting={scrollToTop} />
             </ReviewsHeader>
           )}
-          <ReviewList isProfileReviews={props.isProfileReviews}>
+          <ReviewList ref={listRef} isProfileReviews={props.isProfileReviews}>
             {lastThreeReviews?.length > 0 ? (
               lastThreeReviews?.map((review, index) => (
                 <UserReviewsCard

src/components/UserReviews/UserReviews.styled.js

   /* @media (max-width: 1200px) {
     padding: 0 50px;
   } */
+  ${(props) =>
+    props.profile &&
+    `
+  position: relative;
+  top: -15px;
+  `}
   margin-top: ${(props) => (props.profile ? "60px" : "0")};
   @media (max-width: 600px) {
     position: relative;

src/i18n/resources/rs.js

     useDifferentEmail: "Iskoristite drugačiju lozinku.",
     wrongCredentials: "Pogrešan mail ili lozinka!",
     headerTitle: "Ulogujte se",
+    nameOfProductError: "Naslov je obavezan!",
+    descriptionRequiredError: "Opis je obavezan!",
+    descriptionNoOfCharsError: "Opis mora imati najmanje 8 karaktera!",
+    locationError: "Unesite ispravnu lokaciju!",
+    categoryError: "Kategorija je obavezna!",
+    subcategoryError: "Podkategorija je obavezna!"
   },
   password: {
     weak: "slaba",
     checkEverything: "POGLEDAJ SVE",
     myMessages: "Moje poruke",
     newOffers: "Najnovije ponude",
+    oldOffers: "Najstarije ponude",
+    popularOffers: "Najpopularnije ponude",
     navMenu: "Navigacioni Meni",
     noItems: "Trenutno nema ni jedne stavke...",
     logout: "Odjavite se",

src/pages/RegisterPages/Register/Register.js

         registerUser({ ...informations, ...values });
       }
     }
+    console.log({...informations, ...values})
     setInformations({ ...informations, ...values });
   };
 

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

     },
     validationSchema: Yup.object().shape({
       nameOfFirm: Yup.string().required(t("login.usernameRequired")),
-      PIB: Yup.number()
+      PIB: Yup.string()
         .required(t("login.passwordRequired"))
-        .min(100000000, "PIB mora imati 9 karaktera!")
-        .max(999999999, "PIB mora imati 9 karaktera!"),
+        .min(9, t("register.PIBnoOfCharacters"))
+        .max(9, t("register.PIBnoOfCharacters")),
     }),
     onSubmit: props.handleSubmit,
     validateOnBlur: true,
         margin="normal"
         type="number"
         value={formik.values.PIB}
-        onChange={formik.handleChange}
+        onChange={(event) => {
+          formik.setFieldValue("PIB", event.target.value)
+        }}
         error={
           (formik.touched.PIB && Boolean(formik.errors.PIB)) || PIBTakenStatus
         }

src/validations/createOfferValidation/firstPartCreateOfferValidation.js

 
 export default (locations, categories, subcategories) =>
   Yup.object().shape({
-    nameOfProduct: Yup.string().required(
-      i18next.t("login.nameOfProductRequired")
-    ),
+    nameOfProduct: Yup.string().required(i18next.t("login.nameOfProductError")),
     description: Yup.string()
-      .required(i18next.t("login.descriptionRequired"))
-      .min(8),
-    location: Yup.string().oneOf(locations.map((l) => l.city)),
-    category: Yup.string().oneOf(categories.map((c) => c.name)),
-    subcategory: Yup.string().oneOf(subcategories || []),
+      .required(i18next.t("login.descriptionRequiredError"))
+      .min(8, i18next.t("login.descriptionNoOfCharsError")),
+    location: Yup.string().oneOf(
+      locations.map((l) => l.city),
+      i18next.t("login.locationError")
+    ),
+    category: Yup.string().oneOf(
+      categories.map((c) => c.name),
+      i18next.t("login.categoryError")
+    ),
+    subcategory: Yup.string().oneOf(
+      subcategories || [],
+      i18next.t("login.subcategoryError")
+    ),
   });