Finished #2249

src/components/Cards/CreateOfferCard/ThirdPart/ThirdPartCreateOffer.js

@@ -8,7 +8,7 @@ import { useMemo } from "react";
 
 const ThirdPartCreateOffer = (props) => {
   const { t } = useTranslation();
-  console.log(props)
+
   const offer = useMemo(
     () => ({
       offer: {

src/components/Header/Header.js

@@ -132,6 +132,13 @@ const Header = () => {
     if (isAdminRoute()) {
       search.setSearchStringManually(value);
     } else {
+      if (history.location.pathname.includes("/offer")) {
+        const newQueryString = new URLSearchParams({ search: value });
+        history.push({
+          pathname: HOME_PAGE,
+          search: newQueryString.toString(),
+        });
+      }
       if (!routeMatches(HOME_PAGE) && !routeMatches(BASE_PAGE)) {
         const newQueryString = new URLSearchParams({ search: value });
         history.push({

src/components/MarketPlace/MarketPlace.js

@@ -1,17 +1,24 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { MarketPlaceContainer } from "./MarketPlace.styled";
+import {
+  AddOfferButton,
+  AddPlusIcon,
+  MarketPlaceContainer,
+} from "./MarketPlace.styled";
 import Header from "./Header/Header";
 import Offers from "./Offers/Offers";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect } from "react";
 import { fetchChats } from "../../store/actions/chat/chatActions";
 import { selectUserId } from "../../store/selectors/loginSelectors";
+import { toggleCreateOfferModal } from "../../store/actions/modal/modalActions";
+import useIsMobile from "../../hooks/useIsMobile";
 
 const MarketPlace = (props) => {
   const [isGrid, setIsGrid] = useState(false);
   const userId = useSelector(selectUserId);
   const dispatch = useDispatch();
+  const { isMobile } = useIsMobile();
   useEffect(() => {
     console.log("ABG", userId);
     if (userId)
@@ -22,6 +29,9 @@ const MarketPlace = (props) => {
       );
   }, [userId]);
   const offers = props.offers;
+  const addOfferHandler = () => {
+    dispatch(toggleCreateOfferModal());
+  };
   return (
     <MarketPlaceContainer>
       <Header
@@ -45,6 +55,11 @@ const MarketPlace = (props) => {
         isUsers={props.users}
         users={props.allUsers}
       />
+      {isMobile && (
+        <AddOfferButton onClick={addOfferHandler}>
+          <AddPlusIcon />
+        </AddOfferButton>
+      )}
     </MarketPlaceContainer>
   );
 };

src/components/MarketPlace/MarketPlace.styled.js

@@ -1,5 +1,7 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../themes";
+import { ReactComponent as PlusIcon } from "../../assets/images/svg/plus.svg";
 
 export const MarketPlaceContainer = styled(Box)`
   height: 100%;
@@ -10,3 +12,24 @@ export const MarketPlaceContainer = styled(Box)`
     margin-right: 18px;
   }
 `;
+
+export const AddOfferButton = styled(Box)`
+  width: 54px;
+  height: 54px;
+  border-radius: 100%;
+  background-color: ${selectedTheme.colors.primaryPurple};
+  position: fixed;
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const AddPlusIcon = styled(PlusIcon)`
+  width: 25px;
+  path {
+    stroke: ${selectedTheme.colors.iconYellowColor};
+    stroke-width: 6px;
+  }
+`;