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

src/assets/images/svg/arrow-up-right-from-square.svg

@@ -0,0 +1,10 @@
+<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3242_12927)">
+<path d="M6.00759 1.5C6.00759 1.08586 6.34316 0.75 6.75853 0.75H9.74121C9.86323 0.75 9.9618 0.770156 10.0486 0.806953C10.1167 0.843281 10.2199 0.896953 10.2927 0.967969C10.2927 0.969141 10.2927 0.970312 10.295 0.97125C10.4405 1.11703 10.4922 1.30734 10.5133 1.49766C10.5133 1.49859 10.5133 1.4993 10.5133 1.5V4.5C10.5133 4.91484 10.1777 5.25 9.76233 5.25C9.34696 5.25 9.01138 4.91484 9.01138 4.5V3.31172L5.03605 7.27969C4.74271 7.57266 4.26867 7.57266 3.97533 7.27969C3.68199 6.98672 3.68199 6.51328 3.97533 6.22031L7.94832 2.25H6.75853C6.34316 2.25 6.00759 1.91414 6.00759 1.5ZM0 3C0 2.17148 0.672333 1.5 1.5019 1.5H3.75474C4.17011 1.5 4.50569 1.83586 4.50569 2.25C4.50569 2.66484 4.17011 3 3.75474 3H1.5019V9.75H8.26043V7.5C8.26043 7.08516 8.59601 6.75 9.01138 6.75C9.42675 6.75 9.76233 7.08516 9.76233 7.5V9.75C9.76233 10.5773 9.08882 11.25 8.26043 11.25H1.5019C0.672333 11.25 0 10.5773 0 9.75V3Z" fill="#C4C4C4"/>
+</g>
+<defs>
+<clipPath id="clip0_3242_12927">
+<rect width="10.5133" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/svg/settings.svg

@@ -0,0 +1,11 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3244_13031)">
+<path d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.55 11.25C14.4502 11.4762 14.4204 11.7271 14.4645 11.9704C14.5086 12.2137 14.6246 12.4382 14.7975 12.615L14.8425 12.66C14.982 12.7993 15.0926 12.9647 15.1681 13.1468C15.2436 13.3289 15.2824 13.5241 15.2824 13.7213C15.2824 13.9184 15.2436 14.1136 15.1681 14.2957C15.0926 14.4778 14.982 14.6432 14.8425 14.7825C14.7032 14.922 14.5378 15.0326 14.3557 15.1081C14.1736 15.1836 13.9784 15.2224 13.7812 15.2224C13.5841 15.2224 13.3889 15.1836 13.2068 15.1081C13.0247 15.0326 12.8593 14.922 12.72 14.7825L12.675 14.7375C12.4982 14.5646 12.2737 14.4486 12.0304 14.4045C11.7871 14.3604 11.5362 14.3902 11.31 14.49C11.0882 14.5851 10.899 14.7429 10.7657 14.9442C10.6325 15.1454 10.561 15.3812 10.56 15.6225V15.75C10.56 16.1478 10.402 16.5294 10.1207 16.8107C9.83936 17.092 9.45782 17.25 9.06 17.25C8.66218 17.25 8.28064 17.092 7.99934 16.8107C7.71804 16.5294 7.56 16.1478 7.56 15.75V15.6825C7.55419 15.4343 7.47384 15.1935 7.32938 14.9915C7.18493 14.7896 6.98305 14.6357 6.75 14.55C6.52379 14.4502 6.27286 14.4204 6.02956 14.4645C5.78626 14.5086 5.56176 14.6246 5.385 14.7975L5.34 14.8425C5.20069 14.982 5.03526 15.0926 4.85316 15.1681C4.67106 15.2436 4.47587 15.2824 4.27875 15.2824C4.08163 15.2824 3.88644 15.2436 3.70434 15.1681C3.52224 15.0926 3.35681 14.982 3.2175 14.8425C3.07804 14.7032 2.9674 14.5378 2.89191 14.3557C2.81642 14.1736 2.77757 13.9784 2.77757 13.7812C2.77757 13.5841 2.81642 13.3889 2.89191 13.2068C2.9674 13.0247 3.07804 12.8593 3.2175 12.72L3.2625 12.675C3.4354 12.4982 3.55139 12.2737 3.5955 12.0304C3.63962 11.7871 3.60984 11.5362 3.51 11.31C3.41493 11.0882 3.25707 10.899 3.05585 10.7657C2.85463 10.6325 2.61884 10.561 2.3775 10.56H2.25C1.85218 10.56 1.47064 10.402 1.18934 10.1207C0.908035 9.83936 0.75 9.45782 0.75 9.06C0.75 8.66218 0.908035 8.28064 1.18934 7.99934C1.47064 7.71804 1.85218 7.56 2.25 7.56H2.3175C2.56575 7.55419 2.8065 7.47384 3.00847 7.32938C3.21045 7.18493 3.36429 6.98305 3.45 6.75C3.54984 6.52379 3.57962 6.27286 3.5355 6.02956C3.49139 5.78626 3.3754 5.56176 3.2025 5.385L3.1575 5.34C3.01804 5.20069 2.9074 5.03526 2.83191 4.85316C2.75642 4.67106 2.71757 4.47587 2.71757 4.27875C2.71757 4.08163 2.75642 3.88644 2.83191 3.70434C2.9074 3.52224 3.01804 3.35681 3.1575 3.2175C3.29681 3.07804 3.46224 2.9674 3.64434 2.89191C3.82644 2.81642 4.02163 2.77757 4.21875 2.77757C4.41587 2.77757 4.61106 2.81642 4.79316 2.89191C4.97526 2.9674 5.14069 3.07804 5.28 3.2175L5.325 3.2625C5.50176 3.4354 5.72626 3.55139 5.96956 3.5955C6.21285 3.63962 6.46379 3.60984 6.69 3.51H6.75C6.97183 3.41493 7.16101 3.25707 7.29427 3.05585C7.42753 2.85463 7.49904 2.61884 7.5 2.3775V2.25C7.5 1.85218 7.65804 1.47064 7.93934 1.18934C8.22064 0.908035 8.60218 0.75 9 0.75C9.39782 0.75 9.77936 0.908035 10.0607 1.18934C10.342 1.47064 10.5 1.85218 10.5 2.25V2.3175C10.501 2.55884 10.5725 2.79463 10.7057 2.99585C10.839 3.19707 11.0282 3.35493 11.25 3.45C11.4762 3.54984 11.7271 3.57962 11.9704 3.5355C12.2137 3.49139 12.4382 3.3754 12.615 3.2025L12.66 3.1575C12.7993 3.01804 12.9647 2.9074 13.1468 2.83191C13.3289 2.75642 13.5241 2.71757 13.7213 2.71757C13.9184 2.71757 14.1136 2.75642 14.2957 2.83191C14.4778 2.9074 14.6432 3.01804 14.7825 3.1575C14.922 3.29681 15.0326 3.46224 15.1081 3.64434C15.1836 3.82644 15.2224 4.02163 15.2224 4.21875C15.2224 4.41587 15.1836 4.61106 15.1081 4.79316C15.0326 4.97526 14.922 5.14069 14.7825 5.28L14.7375 5.325C14.5646 5.50176 14.4486 5.72626 14.4045 5.96956C14.3604 6.21285 14.3902 6.46379 14.49 6.69V6.75C14.5851 6.97183 14.7429 7.16101 14.9442 7.29427C15.1454 7.42753 15.3812 7.49904 15.6225 7.5H15.75C16.1478 7.5 16.5294 7.65804 16.8107 7.93934C17.092 8.22064 17.25 8.60218 17.25 9C17.25 9.39782 17.092 9.77936 16.8107 10.0607C16.5294 10.342 16.1478 10.5 15.75 10.5H15.6825C15.4412 10.501 15.2054 10.5725 15.0042 10.7057C14.8029 10.839 14.6451 11.0282 14.55 11.25V11.25Z" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3244_13031">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/Admin/Sidebar/Sidebar.js

@@ -14,6 +14,10 @@ import {
   SidebarProfileRole,
   SidebarNavigationMeniLogout,
   LogoutIcon,
+  SidebarNavigationMeniMarketplace,
+  MarketplaceIcon,
+  ButtonsContainer,
+  ArrowUpRightIcon,
 } from "./Sidebar.styled";
 import { ReactComponent as LogoHorizontal } from "../../../assets/images/svg/logo-horizontal.svg";
 import { useHistory } from "react-router-dom";
@@ -26,7 +30,11 @@ import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { logoutAdmin } from "../../../store/actions/login/loginActions";
 import { isInRoute, routeMatches } from "../../../util/helpers/routeHelpers";
-import { ADMIN_HOME_PAGE, ADMIN_USERS_PAGE } from "../../../constants/pages";
+import {
+  ADMIN_HOME_PAGE,
+  ADMIN_USERS_PAGE,
+  HOME_PAGE,
+} from "../../../constants/pages";
 
 const Sidebar = () => {
   const history = useHistory();
@@ -37,6 +45,11 @@ const Sidebar = () => {
   const routeToItem = (route) => {
     history.push(route);
   };
+  const marketplaceHandler = () => {
+    history.push({
+      pathname: HOME_PAGE,
+    });
+  };
   const logoutHandler = () => {
     dispatch(logoutAdmin());
   };
@@ -81,9 +94,15 @@ const Sidebar = () => {
             })}
           </SidebarNavigationMeniItemUl>
         </SidebarNavigation>
-        <SidebarNavigationMeniLogout onClick={logoutHandler}>
-          <LogoutIcon /> {t("admin.navigation.logout")}
-        </SidebarNavigationMeniLogout>
+        <ButtonsContainer>
+          <SidebarNavigationMeniMarketplace onClick={marketplaceHandler}>
+            <MarketplaceIcon /> {t("admin.navigation.marketplace")}
+            <ArrowUpRightIcon />
+          </SidebarNavigationMeniMarketplace>
+          <SidebarNavigationMeniLogout onClick={logoutHandler}>
+            <LogoutIcon /> {t("admin.navigation.logout")}
+          </SidebarNavigationMeniLogout>
+        </ButtonsContainer>
       </SidebarContent>
     </SidebarContainer>
   );

src/components/Admin/Sidebar/Sidebar.styled.js

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 import { Box, Typography } from "@mui/material";
+import { ReactComponent as Marketplace } from "../../../assets/images/svg/package.svg";
 import { ReactComponent as Logout } from "../../../assets/images/svg/log-out.svg";
+import { ReactComponent as ArrowUpRight } from "../../../assets/images/svg/arrow-up-right-from-square.svg";
 import selectedTheme from "../../../themes";
 
 export const SidebarContainer = styled(Box)`
@@ -132,6 +134,33 @@ export const SidebarNavigationMeniItemIcon = styled(Box)`
   `}
 `;
 
+export const ButtonsContainer = styled(Box)``;
+
+export const SidebarNavigationMeniMarketplace = styled(Box)`
+  font-family: "DM Sans";
+  font-size: 16px;
+  padding-top: 1.7vh;
+  padding-bottom: 1.7vh;
+  padding-left: 18px;
+  margin-top: 8vh;
+  margin-left: 18px;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  color: ${selectedTheme.colors.primaryPurple};
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f5edff;
+    font-weight: 700;
+  }
+`;
+
+export const MarketplaceIcon = styled(Marketplace)`
+  position: relative;
+  top: 5px;
+`;
+
 export const SidebarNavigationMeniLogout = styled(Box)`
   font-family: "DM Sans";
   font-size: 16px;
@@ -139,7 +168,6 @@ export const SidebarNavigationMeniLogout = styled(Box)`
   padding-bottom: 1.7vh;
   padding-left: 18px;
   margin-bottom: 18px;
-  margin-top: 8vh;
   margin-left: 18px;
   border-radius: 4px;
   border-top-right-radius: 0;
@@ -156,3 +184,7 @@ export const LogoutIcon = styled(Logout)`
   position: relative;
   top: 3px;
 `;
+
+export const ArrowUpRightIcon = styled(ArrowUpRight)`
+  margin-left: 4px;
+`;

src/components/Popovers/HeaderPopover/HeaderPopover.js

@@ -20,8 +20,12 @@ import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
 import { useMemo } from "react";
 import MyMessagesNotFound from "../MyMessages/MyMessagesNotFound/MyMessagesNotFound";
 import MyPostsNotFound from "../MyPosts/MyPostsNotFound/MyPostsNotFound";
+import { useSelector } from "react-redux";
+import { selectRoles } from "../../../store/selectors/loginSelectors";
 
 const HeaderPopover = (props) => {
+  const role = useSelector(selectRoles);
+  const isAdmin = role?.includes("Admin");
   const { isMobile } = useIsMobile();
   const items = useMemo(() => props.items, [props.items]);
   return (
@@ -81,6 +85,20 @@ const HeaderPopover = (props) => {
         )}
       </PopoverList>
       <PopoverButtonsContainer hideButtons={props.hideButtons}>
+        {isAdmin && (
+          <PopoverButton
+            sx={{
+              mr: 2,
+              mb: 2,
+            }}
+            variant="text"
+            endIcon={props.adminButtonIcon}
+            onClick={props.adminButtonOnClick}
+            disabled={props.noMessages || props.noPosts}
+          >
+            {props.adminButtonText}
+          </PopoverButton>
+        )}
         <PopoverButton
           sx={{
             mr: 2,
@@ -128,6 +146,9 @@ HeaderPopover.propTypes = {
   noMessages: PropTypes.bool,
   noPosts: PropTypes.bool,
   addOffer: PropTypes.func,
+  adminButtonText: PropTypes.string,
+  adminButtonIcon: PropTypes.any,
+  adminButtonOnClick: PropTypes.func,
 };
 
 export default HeaderPopover;

src/components/Popovers/HeaderPopover/HeaderPopover.styled.js

@@ -10,6 +10,7 @@ import {
 } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { ReactComponent as Settings } from "../../../assets/images/svg/settings.svg";
 import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
 import { ProfileAvatar } from "../MyProfile/MyProfile.styled";
 
@@ -69,6 +70,7 @@ export const PopoverListItemTextContainer = styled(ListItemText)`
     }
   }
 `;
+export const SettingsIcon = styled(Settings)``;
 export const EyeIcon = styled(Eye)`
   & path {
     stroke: ${selectedTheme.colors.primaryYellow};

src/components/Popovers/MyProfile/MyProfile.js

@@ -1,19 +1,27 @@
 import React, { useEffect, useState } from "react";
-import { GrayButtonsContainer, ProfileImgPIB } from "./MyProfile.styled";
+import {
+  AdminText,
+  GrayButtonsContainer,
+  ProfileImgPIB,
+} from "./MyProfile.styled";
 import HeaderPopover from "../HeaderPopover/HeaderPopover";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { selectMineProfile } from "../../../store/selectors/profileSelectors";
-import { selectUserId } from "../../../store/selectors/loginSelectors";
+import {
+  selectRoles,
+  selectUserId,
+} from "../../../store/selectors/loginSelectors";
 import { fetchMineProfile } from "../../../store/actions/profile/profileActions";
 import selectedTheme from "../../../themes";
-import { EyeIcon } from "../HeaderPopover/HeaderPopover.styled";
+import { EyeIcon, SettingsIcon } from "../HeaderPopover/HeaderPopover.styled";
 import { useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
 import LogoutButton from "./LogoutButton/LogoutButton";
 import AboutButton from "./AboutButton/AboutButton";
 import PrivacyPolicyButton from "./PrivacyPolicyButton/PrivacyPolicyButton";
 import PricesButton from "./PricesButton/PricesButton";
+import { ADMIN_HOME_PAGE } from "../../../constants/pages";
 
 export const MyProfile = (props) => {
   const { t } = useTranslation();
@@ -22,6 +30,8 @@ export const MyProfile = (props) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const [profileAsArray, setProfileAsArray] = useState([]);
+  const role = useSelector(selectRoles);
+  const isAdmin = role?.includes("Admin");
   useEffect(() => {
     if (userId?.length > 1) {
       dispatch(fetchMineProfile());
@@ -36,8 +46,15 @@ export const MyProfile = (props) => {
           onClick: () => seeMyProfile(),
           text: (
             <React.Fragment>
-              <ProfileImgPIB />
-              {`${t("itemDetailsCard.PIB")}${profile.company.PIB}`}
+              {isAdmin ? (
+                <AdminText>{t("profile.admin")}</AdminText>
+              ) : (
+                <>
+                  <ProfileImgPIB />
+                  {t("itemDetailsCard.PIB")}
+                  {profile.company.PIB}
+                </>
+              )}
             </React.Fragment>
           ),
         },
@@ -48,6 +65,12 @@ export const MyProfile = (props) => {
     history.push(`/profile/${userId}`);
     props.closePopover();
   };
+  const goToAdminHome = () => {
+    history.push({
+      pathname: ADMIN_HOME_PAGE,
+    });
+    props.closePopover();
+  };
 
   return (
     <HeaderPopover
@@ -57,6 +80,9 @@ export const MyProfile = (props) => {
       buttonText={t("header.checkProfile")}
       buttonIcon={<EyeIcon color={selectedTheme.colors.iconYellowColor} />}
       buttonOnClick={() => seeMyProfile()}
+      adminButtonText={t("header.adminPanel")}
+      adminButtonIcon={<SettingsIcon />}
+      adminButtonOnClick={() => goToAdminHome()}
     >
       <GrayButtonsContainer>
         <PricesButton closePopover={props.closePopover} />

src/components/Popovers/MyProfile/MyProfile.styled.js

@@ -1,4 +1,4 @@
-import { TextField, Avatar, Box } from "@mui/material";
+import { TextField, Avatar, Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import PIB from "@mui/icons-material/AdminPanelSettingsOutlined";
 import { ReactComponent as Dollar } from "../../../assets/images/svg/dollar.svg";
@@ -56,3 +56,7 @@ export const DollarIcon = styled(Dollar)`
     fill: ${selectedTheme.colors.borderNormal};
   }
 `;
+export const AdminText = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  font-size: 12px;
+`;

src/i18n/resources/rs.js

@@ -115,7 +115,7 @@ export default {
     phoneNumberRequired: "Broj telefona je obavezan!",
     locationError: "Odaberite ispravnu lokaciju!",
     websiteError: "Unesite ispravnu adresu svog website!",
-    websiteRequired: "Website je obavezan!"
+    websiteRequired: "Website je obavezan!",
   },
   forgotPassword: {
     title: "Povrati lozinku",
@@ -144,7 +144,7 @@ export default {
     passwordLabel: "Nova Lozinka",
     passwordConfirmLabel: "Potvrdite Lozinku",
     buttonText: "Postavi lozinku",
-    resetSuccess: "Uspešno ste promenili lozinku!"
+    resetSuccess: "Uspešno ste promenili lozinku!",
   },
   filters: {
     title: "Filteri",
@@ -219,6 +219,7 @@ export default {
     privacy: "Politika privatnosti",
     addItem: "Dodajte",
     yourFirstOffer: " svoju prvu objavu.",
+    adminPanel: "ADMIN PANEL",
   },
   reviews: {
     title: "Ova kompanija još uvek nema ocenu.",
@@ -317,6 +318,7 @@ export default {
     blockedProfileShort: "Blokiran profil",
     mineProfileBlocked: "Vaš profil je trenutno blokiran.",
     deletedProfile: "Obrisan profil",
+    admin: "Administrator",
   },
   about: {
     header: {
@@ -463,6 +465,7 @@ export default {
       categories: "Kategorije",
       locations: "Lokacije",
       payment: "Uplate",
+      marketplace: "Marketplace",
       logout: "Odjavi se",
     },
     categories: {