| <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M9.5 2H2.5C1.94772 2 1.5 2.44772 1.5 3V10C1.5 10.5523 1.94772 11 2.5 11H9.5C10.0523 11 10.5 10.5523 10.5 10V3C10.5 2.44772 10.0523 2 9.5 2Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/> | |||||
| <path d="M8 1V3" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/> | |||||
| <path d="M4 1V3" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/> | |||||
| <path d="M1.5 5H10.5" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/> | |||||
| </svg> |
| import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer"; | import ThirdPartCreateOffer from "./ThirdPart/ThirdPartCreateOffer"; | ||||
| import { | import { | ||||
| addOffer, | addOffer, | ||||
| fetchOffers, | |||||
| fetchOneOffer, | |||||
| // fetchOffers, | |||||
| // fetchOneOffer, | |||||
| fetchProfileOffers, | fetchProfileOffers, | ||||
| } from "../../../store/actions/offers/offersActions"; | } from "../../../store/actions/offers/offersActions"; | ||||
| import { selectUserId } from "../../../store/selectors/loginSelectors"; | import { selectUserId } from "../../../store/selectors/loginSelectors"; | ||||
| import BackButton from "./BackButton/BackButton"; | import BackButton from "./BackButton/BackButton"; | ||||
| import selectedTheme from "../../../themes"; | import selectedTheme from "../../../themes"; | ||||
| import { useMemo } from "react"; | import { useMemo } from "react"; | ||||
| import { useLocation } from "react-router-dom"; | |||||
| import { BASE_PAGE, HOME_PAGE } from "../../../constants/pages"; | |||||
| import { routeMatches } from "../../../util/helpers/routeHelpers"; | |||||
| // 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 { routeMatches } from "../../../util/helpers/routeHelpers"; | |||||
| const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => { | const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => { | ||||
| const dispatch = useDispatch(); | const dispatch = useDispatch(); | ||||
| const location = useLocation(); | |||||
| // const location = useLocation(); | |||||
| const history = useHistory(); | |||||
| const [informations, setInformations] = useState({}); | const [informations, setInformations] = useState({}); | ||||
| const [currentStep, setCurrentStep] = useState(1); | const [currentStep, setCurrentStep] = useState(1); | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| const userId = useSelector(selectUserId); | const userId = useSelector(selectUserId); | ||||
| const handleApiResponseSuccess = () => { | 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)); | |||||
| // 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, | |||||
| }) | |||||
| ); | |||||
| }; | }; | ||||
| // Go to next step and save typed values | // Go to next step and save typed values | ||||
| // Create (or edit) offer | // Create (or edit) offer | ||||
| const handleSubmitOffer = () => { | const handleSubmitOffer = () => { | ||||
| if (editOffer) { | if (editOffer) { | ||||
| dispatch(editOneOffer({offerId: offer._id, offerData, handleApiResponseSuccess})); | |||||
| dispatch( | |||||
| editOneOffer({ | |||||
| offerId: offer._id, | |||||
| offerData, | |||||
| handleApiResponseSuccess, | |||||
| }) | |||||
| ); | |||||
| } else { | } else { | ||||
| dispatch(addOffer({ offerData, handleApiResponseSuccess })); | dispatch(addOffer({ offerData, handleApiResponseSuccess })); | ||||
| } | } |
| OfferTitle, | OfferTitle, | ||||
| OfferTitleAboveImage, | OfferTitleAboveImage, | ||||
| OfferViews, | OfferViews, | ||||
| OfferDate, | |||||
| PinIcon, | PinIcon, | ||||
| RemoveIcon, | RemoveIcon, | ||||
| RemoveIconContainer, | RemoveIconContainer, | ||||
| LikeIcon, | LikeIcon, | ||||
| LikeIconContainer, | LikeIconContainer, | ||||
| CategoryIcon, | CategoryIcon, | ||||
| CalendarIcon, | |||||
| PinIconContainer, | PinIconContainer, | ||||
| PinOutlinedIcon, | PinOutlinedIcon, | ||||
| } from "./OfferCard.styled"; | } from "./OfferCard.styled"; | ||||
| import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter"; | import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter"; | ||||
| import OfferDescription from "./OfferDescription/OfferDescription"; | import OfferDescription from "./OfferDescription/OfferDescription"; | ||||
| import CheckButton from "./CheckButton/CheckButton"; | import CheckButton from "./CheckButton/CheckButton"; | ||||
| import { formatDateLocale } from "../../../util/helpers/dateHelpers"; | |||||
| const OfferCard = (props) => { | const OfferCard = (props) => { | ||||
| const [deleteOfferModal, setDeleteOfferModal] = useState(false); | const [deleteOfferModal, setDeleteOfferModal] = useState(false); | ||||
| const history = useHistory(); | const history = useHistory(); | ||||
| const userId = useSelector(selectUserId); | const userId = useSelector(selectUserId); | ||||
| const { isMobile } = useIsMobile(); | const { isMobile } = useIsMobile(); | ||||
| const date = formatDateLocale(new Date(props.offer?._created)); | |||||
| const pinOffer = (event) => { | const pinOffer = (event) => { | ||||
| event.stopPropagation(); | event.stopPropagation(); | ||||
| </DetailIcon> | </DetailIcon> | ||||
| <DetailText>{props?.offer?.category?.name}</DetailText> | <DetailText>{props?.offer?.category?.name}</DetailText> | ||||
| </OfferCategory> | </OfferCategory> | ||||
| {props.dontShowViews ? ( | {props.dontShowViews ? ( | ||||
| <></> | <></> | ||||
| ) : ( | ) : ( | ||||
| <DetailText>{props?.offer?.views?.count}</DetailText> | <DetailText>{props?.offer?.views?.count}</DetailText> | ||||
| </OfferViews> | </OfferViews> | ||||
| )} | )} | ||||
| <OfferDate vertical={props.vertical}> | |||||
| <DetailIcon component="span" size="16px"> | |||||
| <CalendarIcon /> | |||||
| </DetailIcon> | |||||
| <DetailText>{date}</DetailText> | |||||
| </OfferDate> | |||||
| </OfferDetails> | </OfferDetails> | ||||
| </OfferInfo> | </OfferInfo> | ||||
| {!props.halfwidth ? ( | {!props.halfwidth ? ( |
| import { ReactComponent as Pin } from "../../../assets/images/svg/pin.svg"; | import { ReactComponent as Pin } from "../../../assets/images/svg/pin.svg"; | ||||
| import { ReactComponent as PinOutlined } from "../../../assets/images/svg/pin-outlined.svg"; | import { ReactComponent as PinOutlined } from "../../../assets/images/svg/pin-outlined.svg"; | ||||
| import { ReactComponent as Category } from "../../../assets/images/svg/category.svg"; | import { ReactComponent as Category } from "../../../assets/images/svg/category.svg"; | ||||
| import { ReactComponent as Calendar } from "../../../assets/images/svg/calendar.svg"; | |||||
| export const OfferCardContainer = styled(Container)` | export const OfferCardContainer = styled(Container)` | ||||
| display: ${(props) => (props.skeleton ? "none" : "flex")}; | display: ${(props) => (props.skeleton ? "none" : "flex")}; | ||||
| `} | `} | ||||
| } | } | ||||
| @media (max-width: 760px) { | |||||
| margin-bottom: 16px; | |||||
| } | |||||
| `; | `; | ||||
| export const OfferAuthor = styled(Box)` | export const OfferAuthor = styled(Box)` | ||||
| display: flex; | display: flex; | ||||
| flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")}; | flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")}; | ||||
| justify-content: start; | justify-content: start; | ||||
| gap: 1rem; | gap: 1rem; | ||||
| @media (max-width: 650px) { | |||||
| @media (max-width: 760px) { | |||||
| flex-direction: column; | flex-direction: column; | ||||
| justify-content: center; | justify-content: center; | ||||
| gap: 0; | gap: 0; | ||||
| display: none; | display: none; | ||||
| `} | `} | ||||
| `; | `; | ||||
| export const OfferDate = styled(Box)` | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| color: ${selectedTheme.colors.primaryText}; | |||||
| line-height: 16px; | |||||
| font-size: 12px; | |||||
| margin-top: 1px; | |||||
| `; | |||||
| export const Line = styled(Box)` | export const Line = styled(Box)` | ||||
| border-left: 1px solid rgba(0, 0, 0, 0.15); | border-left: 1px solid rgba(0, 0, 0, 0.15); | ||||
| stroke-width: 1; | stroke-width: 1; | ||||
| } | } | ||||
| `; | `; | ||||
| export const CalendarIcon = styled(Calendar)` | |||||
| width: 14px; | |||||
| & path { | |||||
| stroke-width: 1; | |||||
| } | |||||
| `; |
| ProfileCardHeader, | ProfileCardHeader, | ||||
| HeaderTitle, | HeaderTitle, | ||||
| EditIcon, | EditIcon, | ||||
| MessageIcon, | |||||
| MessageButton, | |||||
| ProfileInfoContainer, | ProfileInfoContainer, | ||||
| } from "./ProfileCard.styled"; | } from "./ProfileCard.styled"; | ||||
| import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; | import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; | ||||
| <HeaderTitle>{t("profile.myProfile")}</HeaderTitle> | <HeaderTitle>{t("profile.myProfile")}</HeaderTitle> | ||||
| </ProfileCardHeader> | </ProfileCardHeader> | ||||
| <ProfileCardWrapper variant="outlined" isMyProfile={isMyProfile}> | <ProfileCardWrapper variant="outlined" isMyProfile={isMyProfile}> | ||||
| {isMyProfile ? ( | |||||
| {isMyProfile && ( | |||||
| <EditButton onClick={() => setEditProfileModal(true)}> | <EditButton onClick={() => setEditProfileModal(true)}> | ||||
| <EditIcon /> | <EditIcon /> | ||||
| </EditButton> | </EditButton> | ||||
| ) : ( | |||||
| <MessageButton> | |||||
| <MessageIcon /> | |||||
| </MessageButton> | |||||
| )} | )} | ||||
| <ProfileInfoContainer> | <ProfileInfoContainer> | ||||
| {/* Profile Main Info */} | {/* Profile Main Info */} |
| buttonOnClick={() => seeMyProfile()} | buttonOnClick={() => seeMyProfile()} | ||||
| > | > | ||||
| <GrayButtonsContainer> | <GrayButtonsContainer> | ||||
| <AboutButton closePopover={props.closePopover} /> | |||||
| <PricesButton closePopover={props.closePopover} /> | <PricesButton closePopover={props.closePopover} /> | ||||
| <AboutButton closePopover={props.closePopover} /> | |||||
| <PrivacyPolicyButton closePopover={props.closePopover} /> | <PrivacyPolicyButton closePopover={props.closePopover} /> | ||||
| </GrayButtonsContainer> | </GrayButtonsContainer> | ||||
| <LogoutButton /> | <LogoutButton /> |
| const monthCreated = | const monthCreated = | ||||
| date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; | date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; | ||||
| const yearCreated = date.getFullYear(); | const yearCreated = date.getFullYear(); | ||||
| return `${dayCreated}.${monthCreated}.${yearCreated}`; | |||||
| return `${dayCreated}.${monthCreated}.${yearCreated}.`; | |||||
| } | } | ||||
| export function convertUTCDateToLocalDate(date) { | export function convertUTCDateToLocalDate(date) { | ||||
| var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000); | var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000); |