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

src/components/Cards/CreateOfferCard/CreateOffer.js

 import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer";
 import {
   addOffer,
-  // fetchOffers,
-  // fetchOneOffer,
+  fetchOffers,
+  fetchOneOffer,
   fetchProfileOffers,
 } from "../../../store/actions/offers/offersActions";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
 import { useMemo } from "react";
 // import { useLocation } from "react-router-dom";
 import { useHistory } from "react-router-dom";
-import { PROFILE_PAGE } from "../../../constants/pages";
-import { replaceInRoute } from "../../../util/helpers/routeHelpers";
+import {
+  ADMIN_ITEM_DETAILS_PAGE,
+  ADMIN_SINGLE_USER_PAGE,
+  BASE_PAGE,
+  HOME_PAGE,
+  ITEM_DETAILS_PAGE,
+  PROFILE_PAGE,
+} from "../../../constants/pages";
+import { dynamicRouteMatches, replaceInRoute } from "../../../util/helpers/routeHelpers";
 import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
 import {
   OFFER_ADD_SCOPE,
   OFFER_EDIT_SCOPE,
 } from "../../../store/actions/offers/offersActionConstants";
 import { closeModal } from "../../../store/actions/modal/modalActions";
-// import { routeMatches } from "../../../util/helpers/routeHelpers";
+import { selectQueryString } from "../../../store/selectors/queryStringSelectors";
+import { routeMatches } from "../../../util/helpers/routeHelpers";
 
-const CreateOffer = ({ editOffer, offer }) => {
+const CreateOffer = ({ editOffer, offer, isAdmin, customUserId }) => {
   const dispatch = useDispatch();
   // const location = useLocation();
   const history = useHistory();
+  const queryString = useSelector(selectQueryString);
   const [informations, setInformations] = useState({});
   const [currentStep, setCurrentStep] = useState(1);
   const { t } = useTranslation();
   const closeCreateOfferModal = () => dispatch(closeModal());
 
   const handleApiResponseSuccess = () => {
-    // if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
-    //   dispatch(fetchOffers({ queryString: "" }));
-    // if (location.pathname.includes("profile"))
-    //   dispatch(fetchProfileOffers(userId));
-    // if (location.pathname.includes("proizvodi"))
-    //   dispatch(fetchOneOffer(offer._id));
-    dispatch(fetchProfileOffers(userId));
-    history.push(
-      replaceInRoute(PROFILE_PAGE, {
-        idProfile: userId,
-      })
-    );
+    if (editOffer) {
+      if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
+        dispatch(fetchOffers({ queryString }));
+      if (dynamicRouteMatches(PROFILE_PAGE) || dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE))
+        if (isAdmin) dispatch(fetchProfileOffers(customUserId));
+        else dispatch(fetchProfileOffers(userId));
+
+      if (
+        dynamicRouteMatches(ITEM_DETAILS_PAGE) ||
+        dynamicRouteMatches(ADMIN_ITEM_DETAILS_PAGE)
+      )
+        dispatch(fetchOneOffer(offer._id));
+    } else
+      history.push(
+        replaceInRoute(PROFILE_PAGE, {
+          idProfile: userId,
+        })
+      );
     closeCreateOfferModal();
   };
 
         editOneOffer({
           offerId: offer._id,
           offerData,
+          isAdmin,
           handleApiResponseSuccess,
         })
       );
   closeCreateOfferModal: PropTypes.func,
   editOffer: PropTypes.bool,
   offer: PropTypes.object,
+  isAdmin: PropTypes.bool,
+  customUserId: PropTypes.string,
 };
 export default CreateOffer;

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

   RemoveIconContainer,
   RemoveIcon,
   ButtonContainer,
+  PinIconContainer,
+  PinIcon,
+  UnpinIcon,
   // EditDeleteButtons,
 } from "./ItemDetailsCard.styled";
 import selectedTheme from "../../../themes";
     dispatch(
       toggleDeleteOfferModal({
         offer: offer.offer,
+        isAdmin: props.isAdmin,
       })
     );
   };
 
   const showEditOfferModalHandler = () => {
-    dispatch(toggleEditOfferModal({ editOffer: true, offer: offer.offer }));
+    dispatch(
+      toggleEditOfferModal({
+        editOffer: true,
+        offer: offer?.offer,
+        isAdmin: props.isAdmin,
+        customUserId: offer?.offer?.userId
+      })
+    );
+  };
+  const showPinOfferModalHandler = () => {
+    console.log(offer);
+    dispatch(
+      toggleDeleteOfferModal({
+        offer: offer?.offer,
+        pin: true,
+        pinnedOffer: offer?.offer?.pinned,
+        deleteOffer: false,
+      })
+    );
   };
 
   return (
             <DateButtonsContainer>
               {props.isMyOffer && (
                 <ButtonsContainer>
+                  <PinIconContainer onClick={showPinOfferModalHandler}>
+                    {offer?.offer?.pinned ? <UnpinIcon /> : <PinIcon />}
+                  </PinIconContainer>
                   <EditIconContainer onClick={showEditOfferModalHandler}>
                     <EditIcon />
                   </EditIconContainer>
   isMyOffer: PropTypes.bool,
   previewCard: PropTypes.bool,
   createOffer: PropTypes.bool,
+  isAdmin: PropTypes.bool,
 };
 ItemDetailsCard.defaultProps = {
   halfwidth: false,
   sponsored: false,
   showExchangeButton: true,
+  isAdmin: false,
 };
 
 export default ItemDetailsCard;

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

 import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { ReactComponent as Edit } from "../../../assets/images/svg/edit.svg";
+import { ReactComponent as Pin } from "../../../assets/images/svg/pin-outlined.svg";
+import { ReactComponent as Unpin } from "../../../assets/images/svg/unpin-outlined.svg";
 import { ReactComponent as Remove } from "../../../assets/images/svg/trash.svg";
 
 export const ItemDetailsCardContainer = styled(Container)`
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;
-  margin-left: 18px;
+  /* margin-left: 18px; */
 
   @media screen and (max-width: 600px) {
     width: 32px;
     height: 32px;
   }
 `;
-
 export const RemoveIcon = styled(Remove)`
   @media screen and (max-width: 600px) {
     width: 16px;
     left: -2px;
   }
 `;
+export const PinIconContainer = styled(IconButton)`
+  width: 40px;
+  height: 40px;
+  position: relative;
+  top: 4px;
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
+  border-radius: 100%;
+  padding-top: 2px;
+  text-align: center;
+  /* margin-left: 18px; */
+
+  @media screen and (max-width: 600px) {
+    width: 32px;
+    top: 0;
+    height: 32px;
+  }
+`;
+
+export const PinIcon = styled(Pin)`
+  @media screen and (max-width: 600px) {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    top: -4px;
+    left: -2px;
+  }
+`;
+export const UnpinIcon = styled(Unpin)`
+  @media screen and (max-width: 600px) {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    top: -4px;
+    left: -2px;
+  }
+`;
 
 export const DateButtonsContainer = styled(Box)`
   display: flex;

src/components/Cards/OfferCard/DeleteOffer/DeleteOffer.js

 import { useDispatch, useSelector } from "react-redux";
 import {
   fetchOffers,
+  fetchOneOffer,
   fetchProfileOffers,
   pinOffer,
   removeOffer,
 import CancelButton from "./CancelButton/CancelButton";
 import SaveButton from "./SaveButton/SaveButton";
 import { closeModal } from "../../../../store/actions/modal/modalActions";
+import {
+  dynamicRouteMatches,
+  routeMatches,
+} from "../../../../util/helpers/routeHelpers";
+import {
+  ADMIN_ITEM_DETAILS_PAGE,
+  ADMIN_SINGLE_USER_PAGE,
+  BASE_PAGE,
+  HOME_PAGE,
+  ITEM_DETAILS_PAGE,
+  PROFILE_PAGE,
+} from "../../../../constants/pages";
 
 const DeleteOffer = (props) => {
   const dispatch = useDispatch();
   };
 
   const handleApiResponseSuccess = () => {
-    dispatch(fetchProfileOffers(userId));
-    dispatch(fetchOffers({ queryString }));
+    if (
+      dynamicRouteMatches(PROFILE_PAGE) ||
+      dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE)
+    )
+      dispatch(fetchProfileOffers(userId));
+    if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE))
+      dispatch(fetchOffers({ queryString }));
+    if (
+      dynamicRouteMatches(ITEM_DETAILS_PAGE) ||
+      dynamicRouteMatches(ADMIN_ITEM_DETAILS_PAGE)
+    ) {
+      if (props.pin) dispatch(fetchOneOffer(props.offer?._id));
+      else history.goBack();
+    }
   };
 
   const removeOfferHandler = () => {
         pinOffer({ offerId: props.offer?._id, handleApiResponseSuccess })
       );
     } else {
-      dispatch(removeOffer({ offerId, handleApiResponseSuccess }));
+      dispatch(
+        removeOffer({
+          offerId,
+          isAdmin: props.isAdmin,
+          handleApiResponseSuccess,
+        })
+      );
     }
     closeDeleteModalHandler();
     if (history.location.pathname.includes("proizvodi")) {
   pin: PropTypes.bool,
   deleteOffer: PropTypes.bool,
   pinnedOffer: PropTypes.bool,
+  isAdmin: PropTypes.bool,
+};
+DeleteOffer.defaultProps = {
+  isAdmin: false,
 };
 
 export default DeleteOffer;

src/components/Cards/OfferCard/OfferCard.js

 } from "../../../store/actions/modal/modalActions";
 import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { replaceInRoute } from "../../../util/helpers/routeHelpers";
+import {
+  ADMIN_ITEM_DETAILS_PAGE,
+  ITEM_DETAILS_PAGE,
+} from "../../../constants/pages";
 
 const OfferCard = (props) => {
   const dispatch = useDispatch();
   };
   const routeToItem = (itemId) => {
     if (!props.disabledCheckButton) {
-      history.push(`/proizvodi/${itemId}`);
+      if (props.isAdmin) {
+        history.push(
+          replaceInRoute(ADMIN_ITEM_DETAILS_PAGE, {
+            idProizvod: itemId,
+          })
+        );
+      } else {
+        history.push(
+          replaceInRoute(ITEM_DETAILS_PAGE, {
+            idProizvod: itemId,
+          })
+        );
+      }
     }
   };
   const messageUser = (event) => {
       toggleEditOfferModal({
         editOffer: true,
         offer: props.offer,
+        isAdmin: props.isAdmin,
+        customUserId: props?.offer?.userId,
       })
     );
   };
     dispatch(
       toggleDeleteOfferModal({
         offer: props.offer,
+        isAdmin: props.isAdmin,
       })
     );
   };

src/components/ItemDetails/ItemDetails.js

     selectIsLoadingByActionType(ONE_OFFER_SCOPE)
   );
   let isMyProfile = useMemo(() => {
-    if (offer?.offer?.userId?.toString() === userId?.toString()) return true;
+    if (
+      offer?.offer?.userId?.toString() === userId?.toString() ||
+      props.isAdmin
+    )
+      return true;
     return false;
-  }, [offer, userId]);
+  }, [offer, userId, props.isAdmin]);
 
   return (
     <ItemDetailsContainer>
               <OfferIconText>{t("offer.product")}</OfferIconText>
             </OfferIconContainer>
           )}
-          <ItemDetailsCard offer={offer} isMyOffer={isMyProfile} singleOffer />
+          <ItemDetailsCard offer={offer} isMyOffer={isMyProfile} isAdmin={props.isAdmin} singleOffer />
         </>
       )}
     </ItemDetailsContainer>
 
 ItemDetails.propTypes = {
   singleOffer: PropTypes.any,
+  isAdmin: PropTypes.bool,
 };
 
 export default ItemDetails;

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

         ) : (
           <Tooltip title={t("messages.tooltip")}>
             <TooltipInnerContainer>
-              <MessageIcon onClick={() => messageUser(offer)}>
+              <MessageIcon disabled onClick={() => messageUser(offer)}>
                 <MessageColor />
               </MessageIcon>
             </TooltipInnerContainer>

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.styled.js

 import { Box, Typography } from "@mui/material";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import selectedTheme from "../../../themes";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
   background-color: ${selectedTheme.colors.primaryPurple};
   border-radius: 100%;
   padding-top: 2px;
+  ${(props) =>
+    props.disabled &&
+    css`
+      border: 1px solid ${selectedTheme.colors.borderNormal};
+      background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
+      & button svg path {
+        stroke: ${selectedTheme.colors.iconStrokePurpleDisabledColor};
+        padding-top: 1px;
+      }
+    `}
   text-align: center;
   @media (max-width: 600px) {
     width: 32px;
       width: 16px;
       height: 16px;
       position: relative;
-      top: -4px;
-      left: -2px;
+      top: ${(props) => (props.disabled ? "-5px" : "-4px")};
+      left: ${(props) => (props.disabled ? "-3px" : "-2px")};
     }
   }
 `;

src/constants/pages.js

 export const ADMIN_HOME_PAGE = "/admin";
 export const ADMIN_USERS_PAGE = "/admin/users";
 export const ADMIN_SINGLE_USER_PAGE = "/admin/users/:idProfile";
+export const ADMIN_ITEM_DETAILS_PAGE = "/admin/proizvodi/:idProizvod";
 export const ADMIN_CATEGORIES_PAGE = "/admin/categories";
 export const ADMIN_LOCATIONS_PAGE = "/admin/locations";
 export const ADMIN_PAYMENT_PAGE = "/admin/payment";

src/layouts/AdminLayout/AdminLayout.js

     <AdminLayoutContainer className={props.className}>
       {props.children}
       <Grid container maxHeight="xl">
-        <LeftCard item xs={0} sm={0} md={3} lg={3} xl={3}>
+        <LeftCard item xs={0} sm={0} md={3} lg={3} xl={2.4}>
           {props.leftCard}
         </LeftCard>
-        <Content item xs={12} sm={12} md={9} lg={9} xl={9}>
+        <Content item xs={12} sm={12} md={9} lg={9} xl={9.6}>
           {props.content}
         </Content>
       </Grid>

src/pages/AdminHomePage/AdminHomePage.js

 import { Switch, useHistory } from "react-router-dom";
 import {
   ADMIN_CATEGORIES_PAGE,
+  ADMIN_ITEM_DETAILS_PAGE,
   ADMIN_LOCATIONS_PAGE,
   ADMIN_PAYMENT_PAGE,
   ADMIN_SINGLE_USER_PAGE,
 import AdminPaymentPage from "./AdminPaymentPage/AdminPaymentPage";
 import AdminSingleUserPage from "./AdminUsersPage/AdminSingleUserPage/AdminSingleUserPage";
 import { AdminLayoutHomePage } from "./AdminHomePage.styled";
+import AdminItemDetailsPage from "./AdminItemDetailsPage/AdminItemDetailsPage";
 
 const AdminHomePage = () => {
   const profile = useSelector(selectMineProfile);
             component={AdminSingleUserPage}
           />
           <AdminRoute
-            path={ADMIN_SUBCATEGORIES_PAGE}
-            component={AdminSubcategoriesPage}
+            path={ADMIN_ITEM_DETAILS_PAGE}
+            component={AdminItemDetailsPage}
           />
           <AdminRoute
             path={ADMIN_SUBCATEGORIES_PAGE}

src/pages/AdminHomePage/AdminItemDetailsPage/AdminItemDetailsPage.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux';
+import { selectOffer } from '../../../store/selectors/offersSelectors';
+import { useState } from 'react';
+import { useEffect } from 'react';
+import { clearSelectedOffer, fetchOneOffer } from '../../../store/actions/offers/offersActions';
+import { AdminItemDetailsPageContainer } from './AdminItemDetailsPage.styled';
+import ItemDetailsLayout from '../../../layouts/ItemDetailsLayout/ItemDetailsLayout';
+import ItemDetails from '../../../components/ItemDetails/ItemDetails';
+import ProfileMini from '../../../components/ProfileMini/ProfileMini';
+import UserReviews from '../../../components/UserReviews/UserReviews';
+
+const AdminItemDetailsPage = (props) => {
+    const dispatch = useDispatch();
+    const selectedOffer = useSelector(selectOffer);
+    const [isInitiallyLoaded, setIsInitiallyLoaded] = useState(false);
+    const offerId = props.match.params.idProizvod;
+  
+    useEffect(() => {
+      dispatch(fetchOneOffer(offerId));
+      () => dispatch(clearSelectedOffer());
+    }, []);
+  
+    useEffect(() => {
+      if (!selectedOffer?.offer && isInitiallyLoaded) {
+        dispatch(fetchOneOffer(offerId));
+      }
+      if (selectedOffer?.offer) {
+        setIsInitiallyLoaded(true);
+      }
+    }, [selectedOffer?.offer]);
+  
+    useEffect(() => {
+      window.scrollTo({ top: 0, behaviour: "smooth" });
+    }, []);
+  
+    return (
+      <AdminItemDetailsPageContainer>
+        <ItemDetailsLayout
+          singleOffer
+          content={<ItemDetails singleOffer isAdmin />}
+          rightCard={
+            <>
+              <ProfileMini /> <UserReviews rightReviews />
+            </>
+          }
+        />
+      </AdminItemDetailsPageContainer>
+    );
+  };
+  
+  AdminItemDetailsPage.propTypes = {
+    match: PropTypes.shape({
+      params: PropTypes.shape({
+        idProizvod: PropTypes.string,
+      }),
+    }),
+  };
+
+export default AdminItemDetailsPage

src/pages/AdminHomePage/AdminItemDetailsPage/AdminItemDetailsPage.styled.js

+import styled from "styled-components";
+import { Box, Grid } from "@mui/material";
+import selectedTheme from "../../../themes";
+export const AdminItemDetailsPageContainer = styled(Box)`
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  max-width: none;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: ${selectedTheme.colors.offerBackgroundColor};
+
+  @media screen and (max-width: 600px) {
+    margin-top: 65px;
+  }
+`;
+export const GridStyled = styled(Grid)``;

src/request/apiEndpoints.js

     getFeaturedOffers: "offers/featured",
     addOffer: "/users/{userId}/offers",
     editOffer: "/users/{userId}/offers/{offerId}",
+    editOfferAsAdmin: "/admin/offers/{offerId}",
     categories: "categories",
     locations: "locations",
     mineOffers: "users",
     removeOffer: "/users/{userId}/offers/{offerId}",
+    removeOfferAsAdmin: "/admin/offers/{offerId}",
     pinOffer: "admin/offers/{id}/pin",
   },
   chat: {

src/request/offersRequest.js

     })
   );
 };
+export const attemptRemoveOfferAsAdmin = (offerId) => {
+  return deleteRequest(
+    replaceInUrl(apiEndpoints.offers.removeOfferAsAdmin, {
+      offerId: offerId,
+    })
+  );
+};
 export const attemptEditOffer = (payload, offerId, editedData) => {
   return putRequest(
     replaceInUrl(apiEndpoints.offers.editOffer, {
     editedData
   );
 };
+export const attemptEditOfferAsAdmin = (offerId, editedData) => {
+  return putRequest(
+    replaceInUrl(apiEndpoints.offers.editOfferAsAdmin, {
+      offerId: offerId,
+    }),
+    editedData
+  );
+};
 export const attemptPinOffer = (payload) => {
   return patchRequest(
     replaceInUrl(apiEndpoints.offers.pinOffer, { id: payload })

src/store/saga/offersSaga.js

 import {
   attemptAddOffer,
   attemptEditOffer,
+  attemptEditOfferAsAdmin,
   attemptFetchFeaturedOffers,
   attemptFetchOffers,
   attemptFetchOneOffer,
   attemptPinOffer,
   attemptRemoveOffer,
+  attemptRemoveOfferAsAdmin,
 } from "../../request/offersRequest";
 import {
   // OFFERS_ALL_FETCH,
 function* fetchOneOffer(payload) {
   try {
     const data = yield call(attemptFetchOneOffer, payload.payload);
-    if (!data?.data) throw new Error()
+    if (!data?.data) throw new Error();
     yield put(fetchOneOfferSuccess(data?.data));
   } catch (e) {
     console.log(e?.response?.status);
     if (!userId || userId?.length === 0)
       throw new Error("User id is not defined!");
     const data = yield call(attemptFetchProfileOffers, userId);
-    yield put(setProfileOffers(data.data));
+    yield put(setProfileOffers(data.data.offers));
     yield put(fetchProfileOffersSuccess());
   } catch (e) {
     console.dir(e);
   try {
     const userId = yield select(selectUserId);
     const offerId = payload.payload.offerId;
-    yield call(attemptRemoveOffer, userId, offerId);
+    if (payload.payload.isAdmin) yield call(attemptRemoveOfferAsAdmin, offerId);
+    else yield call(attemptRemoveOffer, userId, offerId);
     yield put(removeOfferSuccess());
     if (payload.payload.handleApiResponseSuccess) {
       yield call(payload.payload.handleApiResponseSuccess);
     formData.append("location[city]", offerData.location.city);
     formData.append("name", offerData.name);
     formData.append("subcategory", offerData.subcategory);
-    yield call(attemptEditOffer, userId, offerId, formData);
+    if (payload.payload.isAdmin) {
+      yield call(attemptEditOfferAsAdmin, offerId, formData);
+    } else {
+      yield call(attemptEditOffer, userId, offerId, formData);
+    }
     yield put(editOfferSuccess());
     if (payload.payload.handleApiResponseSuccess) {
       yield call(payload.payload.handleApiResponseSuccess);

src/util/helpers/routeHelpers.js

 import {
   ADMIN_CATEGORIES_PAGE,
   ADMIN_HOME_PAGE,
+  ADMIN_ITEM_DETAILS_PAGE,
   ADMIN_LOCATIONS_PAGE,
   ADMIN_LOGIN_PAGE,
   ADMIN_PAYMENT_PAGE,
     routeMatches(ADMIN_LOCATIONS_PAGE) ||
     routeMatches(ADMIN_PAYMENT_PAGE) ||
     dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE) ||
+    dynamicRouteMatches(ADMIN_ITEM_DETAILS_PAGE) ||
     isInRoute(ADMIN_HOME_PAGE)
   )
     return true;