| <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <g clip-path="url(#clip0_3817_12834)"> | |||||
| <rect width="18" height="18" rx="9" fill="white"/> | |||||
| <path d="M0 9C0 4.02891 4.02891 0 9 0C13.9711 0 18 4.02891 18 9C18 13.9711 13.9711 18 9 18C4.02891 18 0 13.9711 0 9ZM13.0711 7.44609C13.4543 7.06289 13.4543 6.43711 13.0711 6.05391C12.6879 5.6707 12.0621 5.6707 11.6789 6.05391L7.875 9.85781L6.32109 8.30391C5.93789 7.9207 5.31211 7.9207 4.92891 8.30391C4.5457 8.68711 4.5457 9.31289 4.92891 9.69609L7.17891 11.9461C7.56211 12.3293 8.18789 12.3293 8.57109 11.9461L13.0711 7.44609Z" fill="#0FC136"/> | |||||
| </g> | |||||
| <defs> | |||||
| <clipPath id="clip0_3817_12834"> | |||||
| <rect width="18" height="18" rx="9" fill="white"/> | |||||
| </clipPath> | |||||
| </defs> | |||||
| </svg> |
| dispatch(fetchProfileOffers(profileId)); | dispatch(fetchProfileOffers(profileId)); | ||||
| }; | }; | ||||
| let numberOfExchanges = | |||||
| profile?.statistics?.exchanges?.failedExchanges + | |||||
| profile?.statistics?.exchanges?.succeededExchanges; | |||||
| let percentOfSucceededExchanges; | let percentOfSucceededExchanges; | ||||
| if (profile?.statistics?.exchanges?.succeeded === 0) { | |||||
| if (profile?.statistics?.exchanges?.succeededExchanges === 0) { | |||||
| percentOfSucceededExchanges = 0; | percentOfSucceededExchanges = 0; | ||||
| } else { | } else { | ||||
| percentOfSucceededExchanges = Math.ceil( | percentOfSucceededExchanges = Math.ceil( | ||||
| (profile?.statistics?.exchanges?.total / | |||||
| profile?.statistics?.exchanges?.succeeded) * | |||||
| ((profile?.statistics?.exchanges?.succeededExchanges + | |||||
| profile?.statistics?.exchanges?.failedExchanges) / | |||||
| profile?.statistics?.exchanges?.succeededExchanges) * | |||||
| 100 | 100 | ||||
| ); | ); | ||||
| } | } | ||||
| let percentOfSucceededCommunication; | |||||
| if (profile?.statistics?.exchanges?.succeededCommunication === 0) { | |||||
| percentOfSucceededCommunication = 0; | |||||
| } else { | |||||
| percentOfSucceededCommunication = Math.ceil( | |||||
| ((profile?.statistics?.exchanges?.succeededCommunication + | |||||
| profile?.statistics?.exchanges?.failedCommunication) / | |||||
| profile?.statistics?.exchanges?.succeededCommunication) * | |||||
| 100 | |||||
| ); | |||||
| } | |||||
| let verifiedUser = | |||||
| numberOfExchanges >= 20 && percentOfSucceededCommunication >= 90; | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| {isLoading ? ( | {isLoading ? ( | ||||
| profile={profile} | profile={profile} | ||||
| isMyProfile={isMyProfile} | isMyProfile={isMyProfile} | ||||
| isBlocked={!props.isAdmin && profile?._blocked} | isBlocked={!props.isAdmin && profile?._blocked} | ||||
| verifiedUser={verifiedUser} | |||||
| /> | /> | ||||
| {/* Profile Contact */} | {/* Profile Contact */} | ||||
| <ProfileContact | <ProfileContact | ||||
| {/* Profile Stats */} | {/* Profile Stats */} | ||||
| <ProfileStats | <ProfileStats | ||||
| profile={profile} | profile={profile} | ||||
| numberOfExchanges={numberOfExchanges} | |||||
| percentOfSucceededExchanges={percentOfSucceededExchanges} | percentOfSucceededExchanges={percentOfSucceededExchanges} | ||||
| isBlocked={!props.isAdmin && profile?._blocked} | isBlocked={!props.isAdmin && profile?._blocked} | ||||
| percentOfSucceededCommunication={ | |||||
| percentOfSucceededCommunication | |||||
| } | |||||
| /> | /> | ||||
| </ProfileInfoContainer> | </ProfileInfoContainer> | ||||
| </ProfileCardWrapper> | </ProfileCardWrapper> |
| ProfilePIBContainer, | ProfilePIBContainer, | ||||
| PocketIcon, | PocketIcon, | ||||
| ProfilePIB, | ProfilePIB, | ||||
| VerifiedUserContainer, | |||||
| // BlockedProfileText, | // BlockedProfileText, | ||||
| } from "./ProfileMainInfo.styled"; | } from "./ProfileMainInfo.styled"; | ||||
| import { useTranslation } from "react-i18next"; | import { useTranslation } from "react-i18next"; | ||||
| } from "../../../../util/helpers/routeHelpers"; | } from "../../../../util/helpers/routeHelpers"; | ||||
| import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages"; | import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages"; | ||||
| import BlockedProfile from "../BlockedProfile/BlockedProfile"; | import BlockedProfile from "../BlockedProfile/BlockedProfile"; | ||||
| import { ReactComponent as VerifiedIcon } from "../../../../assets/images/svg/verified-user.svg"; | |||||
| import { Tooltip } from "@mui/material"; | |||||
| const ProfileMainInfo = (props) => { | const ProfileMainInfo = (props) => { | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| onClick={goToUser} | onClick={goToUser} | ||||
| > | > | ||||
| {props.profile?.company?.name} | {props.profile?.company?.name} | ||||
| {props.verifiedUser && ( | |||||
| <Tooltip title={t("profile.verifiedTooltip")} placement="right"> | |||||
| <VerifiedUserContainer> | |||||
| <VerifiedIcon /> | |||||
| </VerifiedUserContainer> | |||||
| </Tooltip> | |||||
| )} | |||||
| </ProfileName> | </ProfileName> | ||||
| <ProfilePIBContainer> | <ProfilePIBContainer> | ||||
| <PocketIcon /> | <PocketIcon /> | ||||
| isAdmin: PropTypes.any, | isAdmin: PropTypes.any, | ||||
| bigProfileCard: PropTypes.bool, | bigProfileCard: PropTypes.bool, | ||||
| isBlocked: PropTypes.bool, | isBlocked: PropTypes.bool, | ||||
| verifiedUser: PropTypes.bool, | |||||
| }; | }; | ||||
| ProfileMainInfo.defaultProps = { | ProfileMainInfo.defaultProps = { | ||||
| isAdmin: false, | isAdmin: false, |
| font-size: 14px; | font-size: 14px; | ||||
| } | } | ||||
| `; | `; | ||||
| export const VerifiedUserContainer = styled.span` | |||||
| margin-left: 9px; | |||||
| `; |
| isBlocked={props.isBlocked} | isBlocked={props.isBlocked} | ||||
| > | > | ||||
| <ProfileStatsGrid> | <ProfileStatsGrid> | ||||
| <StatsItem variant="subtitle2"> | |||||
| {/* <StatsItem variant="subtitle2"> | |||||
| <b>{props.profile?.statistics?.publishes?.count}</b> | <b>{props.profile?.statistics?.publishes?.count}</b> | ||||
| {t("profile.publishes")} | {t("profile.publishes")} | ||||
| </StatsItem> | |||||
| </StatsItem> */} | |||||
| <StatsItem variant="subtitle2"> | <StatsItem variant="subtitle2"> | ||||
| <b>{props.percentOfSucceededExchanges}%</b> | |||||
| <b>{props.numberOfExchanges}</b> | |||||
| {t("profile.successExchange")} | {t("profile.successExchange")} | ||||
| <b>({props.percentOfSucceededExchanges}%)</b> | |||||
| </StatsItem> | </StatsItem> | ||||
| </ProfileStatsGrid> | </ProfileStatsGrid> | ||||
| <ProfileStatsGrid> | <ProfileStatsGrid> | ||||
| <StatsItem variant="subtitle2"> | |||||
| {/* <StatsItem variant="subtitle2"> | |||||
| <b>{props.profile?.statistics?.views?.count}</b> | <b>{props.profile?.statistics?.views?.count}</b> | ||||
| {t("profile.numberOfViews")} | {t("profile.numberOfViews")} | ||||
| </StatsItem> | |||||
| </StatsItem> */} | |||||
| <StatsItem variant="subtitle2"> | <StatsItem variant="subtitle2"> | ||||
| <b>{props.percentOfSucceededExchanges}%</b> | |||||
| {t("profile.successComunication")} | {t("profile.successComunication")} | ||||
| <b>{props.percentOfSucceededCommunication}%</b> | |||||
| </StatsItem> | </StatsItem> | ||||
| </ProfileStatsGrid> | </ProfileStatsGrid> | ||||
| </ProfileStatsContainer> | </ProfileStatsContainer> | ||||
| className: PropTypes.string, | className: PropTypes.string, | ||||
| twoRows: PropTypes.bool, | twoRows: PropTypes.bool, | ||||
| isBlocked: PropTypes.bool, | isBlocked: PropTypes.bool, | ||||
| numberOfExchanges: PropTypes.number, | |||||
| percentOfSucceededCommunication: PropTypes.number, | |||||
| }; | }; | ||||
| export default ProfileStats; | export default ProfileStats; |
| PROFILE_PAGE, | PROFILE_PAGE, | ||||
| } from "../../../constants/pages"; | } from "../../../constants/pages"; | ||||
| import { NEW_CHAT } from "../../../constants/chatConstants"; | import { NEW_CHAT } from "../../../constants/chatConstants"; | ||||
| import { VerifiedUserContainer } from "../../Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.styled"; | |||||
| import { ReactComponent as VerifiedIcon } from "../../../assets/images/svg/verified-user.svg"; | |||||
| const ItemDetailsHeaderCard = (props) => { | const ItemDetailsHeaderCard = (props) => { | ||||
| const history = useHistory(); | const history = useHistory(); | ||||
| <OfferDetails> | <OfferDetails> | ||||
| <OfferTitle isMyProfile={props.isMyProfile} onClick={handleGoProfile}> | <OfferTitle isMyProfile={props.isMyProfile} onClick={handleGoProfile}> | ||||
| {offer?.user?.company?.name} | {offer?.user?.company?.name} | ||||
| {props.verify && props.verifiedUser && ( | |||||
| <Tooltip title={t("profile.verifiedTooltip")} placement="right"> | |||||
| <VerifiedUserContainer> | |||||
| <VerifiedIcon /> | |||||
| </VerifiedUserContainer> | |||||
| </Tooltip> | |||||
| )} | |||||
| </OfferTitle> | </OfferTitle> | ||||
| <PIBDetail offer={offer} isMyProfile={props.isMyProfile} /> | <PIBDetail offer={offer} isMyProfile={props.isMyProfile} /> | ||||
| <CategoryDetail offer={offer} isMyProfile={props.isMyProfile} /> | <CategoryDetail offer={offer} isMyProfile={props.isMyProfile} /> | ||||
| isMyProfile: PropTypes.bool, | isMyProfile: PropTypes.bool, | ||||
| singleOffer: PropTypes.bool, | singleOffer: PropTypes.bool, | ||||
| isAdmin: PropTypes.bool, | isAdmin: PropTypes.bool, | ||||
| verify: PropTypes.bool, | |||||
| verifiedUser: PropTypes.bool, | |||||
| }; | }; | ||||
| ItemDetailsHeaderCard.defaultProps = { | ItemDetailsHeaderCard.defaultProps = { | ||||
| halfwidth: false, | halfwidth: false, |
| let urlLink = linkValue.trim(); | let urlLink = linkValue.trim(); | ||||
| if (urlLink.startsWith("http://") || urlLink.startsWith("https://")) | if (urlLink.startsWith("http://") || urlLink.startsWith("https://")) | ||||
| props?.callbackFunction(urlLink); | props?.callbackFunction(urlLink); | ||||
| else props?.callbackFunction(`http://${urlLink}`); | |||||
| else | |||||
| props?.callbackFunction({ | |||||
| url: `http://${urlLink}`, | |||||
| link: urlLink, | |||||
| }); | |||||
| }; | }; | ||||
| return ( | return ( |
| if (offer?.offer?.userId?.toString() === userId?.toString()) return true; | if (offer?.offer?.userId?.toString() === userId?.toString()) return true; | ||||
| return false; | return false; | ||||
| }, [offer, userId]); | }, [offer, userId]); | ||||
| let numberOfExchanges = | |||||
| offer?.user?.statistics?.exchanges?.failedExchanges + | |||||
| offer?.user?.statistics?.exchanges?.succeededExchanges; | |||||
| let percentOfSucceededExchanges; | |||||
| if (offer?.user?.statistics?.exchanges?.succeededExchanges === 0) { | |||||
| percentOfSucceededExchanges = 0; | |||||
| } else { | |||||
| percentOfSucceededExchanges = Math.ceil( | |||||
| ((offer?.user?.statistics?.exchanges?.succeededExchanges + | |||||
| offer?.user?.statistics?.exchanges?.failedExchanges) / | |||||
| offer?.user?.statistics?.exchanges?.succeededExchanges) * | |||||
| 100 | |||||
| ); | |||||
| } | |||||
| let percentOfSucceededCommunication; | |||||
| if (offer?.user?.statistics?.exchanges?.succeededCommunication === 0) { | |||||
| percentOfSucceededCommunication = 0; | |||||
| } else { | |||||
| percentOfSucceededCommunication = Math.ceil( | |||||
| ((offer?.user?.statistics?.exchanges?.succeededCommunication + | |||||
| offer?.user?.statistics?.exchanges?.failedCommunication) / | |||||
| offer?.user?.statistics?.exchanges?.succeededCommunication) * | |||||
| 100 | |||||
| ); | |||||
| } | |||||
| let verifiedUser = | |||||
| numberOfExchanges >= 20 && percentOfSucceededCommunication >= 90; | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| {isLoadingOfferContent || isLoadingOfferContent === undefined ? ( | {isLoadingOfferContent || isLoadingOfferContent === undefined ? ( | ||||
| offer={offer} | offer={offer} | ||||
| isMyProfile={isMyProfile} | isMyProfile={isMyProfile} | ||||
| singleOffer | singleOffer | ||||
| verify | |||||
| verifiedUser={verifiedUser} | |||||
| /> | /> | ||||
| <ProfileMiniStats | <ProfileMiniStats | ||||
| profile={offer.companyData} | |||||
| percentOfSucceededExchanges={ | |||||
| offer.companyData?.statistics?.exchanges?.total | |||||
| } | |||||
| // profile={profile} | |||||
| numberOfExchanges={numberOfExchanges} | |||||
| percentOfSucceededExchanges={percentOfSucceededExchanges} | |||||
| percentOfSucceededCommunication={percentOfSucceededCommunication} | |||||
| isMyProfile={isMyProfile} | isMyProfile={isMyProfile} | ||||
| /> | /> | ||||
| </ProfileHeader> | </ProfileHeader> |
| import PopoverComponent from "../../Popovers/PopoverComponent"; | import PopoverComponent from "../../Popovers/PopoverComponent"; | ||||
| const toggleMark = (editor, format, link) => { | const toggleMark = (editor, format, link) => { | ||||
| Editor.addMark(editor, format, link); | |||||
| Editor.addMark(editor, format, link.url); | |||||
| if ( | |||||
| (editor?.selection && | |||||
| Editor.string(editor, editor.selection).length === 0) || | |||||
| !editor?.selection | |||||
| ) { | |||||
| Editor.insertNode(editor, { text: link.link, a: link.url }); | |||||
| } | |||||
| }; | }; | ||||
| const LinkButton = (props) => { | const LinkButton = (props) => { | ||||
| const [isLinkPopoverShowing, setIsLinkPopoverShowing] = useState(false); | const [isLinkPopoverShowing, setIsLinkPopoverShowing] = useState(false); | ||||
| const [linkPopoverAnchor, setLinkPopoverAnchor] = useState(null); | const [linkPopoverAnchor, setLinkPopoverAnchor] = useState(null); | ||||
| const callbackFunction = (link) => { | |||||
| const callbackFunction = (linkObject) => { | |||||
| setIsLinkPopoverShowing(false); | setIsLinkPopoverShowing(false); | ||||
| toggleMark(editor, "a", link); | |||||
| toggleMark(editor, "a", linkObject); | |||||
| }; | }; | ||||
| const handleClickLinkButton = (event) => { | const handleClickLinkButton = (event) => { | ||||
| setIsLinkPopoverShowing(true); | setIsLinkPopoverShowing(true); |
| Editor.removeMark(editor, "a"); | Editor.removeMark(editor, "a"); | ||||
| } | } | ||||
| } | } | ||||
| console.log(newValue); | |||||
| if (props?.onChange) props?.onChange(JSON.stringify(newValue)); | if (props?.onChange) props?.onChange(JSON.stringify(newValue)); | ||||
| else setValue(newValue); | else setValue(newValue); | ||||
| }} | }} |
| myProfile: "Moj profil", | myProfile: "Moj profil", | ||||
| PIB: "PIB:", | PIB: "PIB:", | ||||
| publishes: " objava", | publishes: " objava", | ||||
| successExchange: " uspešna trampa", | |||||
| successExchange: " uspešnih trampi ", | |||||
| numberOfViews: " ukupnih pregleda", | numberOfViews: " ukupnih pregleda", | ||||
| successComunication: " korektna komunikacija", | |||||
| successComunication: "Procenat uspešne komunikacije ", | |||||
| back: "Nazad na objave", | back: "Nazad na objave", | ||||
| companyProfile: "Profil kompanije", | companyProfile: "Profil kompanije", | ||||
| noOffers: { | noOffers: { | ||||
| deletedProfile: "Obrisan profil", | deletedProfile: "Obrisan profil", | ||||
| admin: "Administrator", | admin: "Administrator", | ||||
| adminPanel: "Admin Panel", | adminPanel: "Admin Panel", | ||||
| verifiedTooltip: "Pouzdana saradnja", | |||||
| }, | }, | ||||
| about: { | about: { | ||||
| header: { | header: { |