| font-size: 12px; | font-size: 12px; | ||||
| line-height: 16px; | line-height: 16px; | ||||
| font-family: ${selectedTheme.fonts.textFont}; | font-family: ${selectedTheme.fonts.textFont}; | ||||
| color: ${(props) => | |||||
| props.redText ? selectedTheme.colors.blockedColor : "white"}; | |||||
| /* color: ${(props) => | |||||
| props.redText ? selectedTheme.colors.blockedColor : "white"}; */ | |||||
| color: ${selectedTheme.colors.blockedTextColor}; | |||||
| `; | `; | ||||
| export const BlockedContainer = styled(Box)` | export const BlockedContainer = styled(Box)` | ||||
| display: flex; | display: flex; | ||||
| left: -2px; | left: -2px; | ||||
| } | } | ||||
| & path { | & path { | ||||
| stroke: ${(props) => | |||||
| props.redText ? selectedTheme.colors.blockedColor : "white"}; | |||||
| /* stroke: ${(props) => | |||||
| props.redText ? selectedTheme.colors.blockedColor : "white"}; */ | |||||
| stroke: ${selectedTheme.colors.blockedTextColor}; | |||||
| } | } | ||||
| `; | `; |
| isMyProfile={ | isMyProfile={ | ||||
| (!props.isAdmin && profile?._blocked) || isMyProfile | (!props.isAdmin && profile?._blocked) || isMyProfile | ||||
| } | } | ||||
| isBlocked={!props.isAdmin && profile?._blocked} | |||||
| /> | /> | ||||
| </ProfileInfoAndContactContainer> | </ProfileInfoAndContactContainer> | ||||
| {/* Profile Stats */} | {/* Profile Stats */} | ||||
| <ProfileStats | <ProfileStats | ||||
| profile={profile} | profile={profile} | ||||
| percentOfSucceededExchanges={percentOfSucceededExchanges} | percentOfSucceededExchanges={percentOfSucceededExchanges} | ||||
| isBlocked={!props.isAdmin && profile?._blocked} | |||||
| /> | /> | ||||
| </ProfileInfoContainer> | </ProfileInfoContainer> | ||||
| </ProfileCardWrapper> | </ProfileCardWrapper> |
| width: 40px; | width: 40px; | ||||
| height: 40px; | height: 40px; | ||||
| font-weight: 900; | font-weight: 900; | ||||
| background: ${selectedTheme.colors.primaryIconBackgroundColor}; | |||||
| background: ${(props) => | |||||
| props.disabled ? "white" : selectedTheme.colors.primaryIconBackgroundColor}; | |||||
| border-radius: 360px; | border-radius: 360px; | ||||
| padding: 0.45rem 0.45rem 0.27rem 0.57rem; | padding: 0.45rem 0.45rem 0.27rem 0.57rem; | ||||
| cursor: ${(props) => !props.disabled && `pointer`}; | cursor: ${(props) => !props.disabled && `pointer`}; |
| isAdmin={props.isAdmin} | isAdmin={props.isAdmin} | ||||
| isMyProfile={props.isMyProfile} | isMyProfile={props.isMyProfile} | ||||
| variant="subtitle2" | variant="subtitle2" | ||||
| isBlocked={props.isBlocked} | |||||
| > | > | ||||
| {props.profile?.company?.contacts?.location} | {props.profile?.company?.contacts?.location} | ||||
| </ContactItem> | </ContactItem> | ||||
| isAdmin={props.isAdmin} | isAdmin={props.isAdmin} | ||||
| isMyProfile={props.isMyProfile} | isMyProfile={props.isMyProfile} | ||||
| variant="subtitle2" | variant="subtitle2" | ||||
| isBlocked={props.isBlocked} | |||||
| > | > | ||||
| {props.profile?.email} | {props.profile?.email} | ||||
| </ContactItem> | </ContactItem> | ||||
| isAdmin={props.isAdmin} | isAdmin={props.isAdmin} | ||||
| isMyProfile={props.isMyProfile} | isMyProfile={props.isMyProfile} | ||||
| variant="subtitle2" | variant="subtitle2" | ||||
| isBlocked={props.isBlocked} | |||||
| > | > | ||||
| {props.profile?.company?.contacts?.web} | {props.profile?.company?.contacts?.web} | ||||
| </ContactItem> | </ContactItem> | ||||
| children: PropTypes.node, | children: PropTypes.node, | ||||
| isAdmin: PropTypes.bool, | isAdmin: PropTypes.bool, | ||||
| bigProfileCard: PropTypes.bool, | bigProfileCard: PropTypes.bool, | ||||
| isBlocked: PropTypes.bool, | |||||
| }; | }; | ||||
| export default ProfileContact; | export default ProfileContact; |
| margin-right: 2rem; | margin-right: 2rem; | ||||
| margin-left: 0.4rem; | margin-left: 0.4rem; | ||||
| color: ${(props) => | color: ${(props) => | ||||
| props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText}; | |||||
| props.isMyProfile && !props.isBlocked | |||||
| ? "white" | |||||
| : selectedTheme.colors.primaryDarkText}; | |||||
| /* color: ${selectedTheme.colors.primaryDarkText}; */ | |||||
| display: unset; | display: unset; | ||||
| font-family: ${selectedTheme.fonts.textFont}; | font-family: ${selectedTheme.fonts.textFont}; | ||||
| letter-spacing: 0.02em; | letter-spacing: 0.02em; |
| <PocketIcon /> | <PocketIcon /> | ||||
| <ProfilePIB | <ProfilePIB | ||||
| isMyProfile={props?.isBlocked || props.isMyProfile} | isMyProfile={props?.isBlocked || props.isMyProfile} | ||||
| isBlocked={props.isBlocked} | |||||
| variant="subtitle2" | variant="subtitle2" | ||||
| > | > | ||||
| {t("profile.PIB")} {props.profile?.company?.PIB} | {t("profile.PIB")} {props.profile?.company?.PIB} |
| export const ProfileName = styled(Typography)` | export const ProfileName = styled(Typography)` | ||||
| color: ${(props) => | color: ${(props) => | ||||
| props.isBlocked | props.isBlocked | ||||
| ? "white" | |||||
| ? selectedTheme.colors.primaryPurple | |||||
| : props.isMyProfile | : props.isMyProfile | ||||
| ? selectedTheme.colors.primaryYellow | ? selectedTheme.colors.primaryYellow | ||||
| : selectedTheme.colors.primaryPurple}; | : selectedTheme.colors.primaryPurple}; | ||||
| `; | `; | ||||
| export const ProfilePIB = styled(Typography)` | export const ProfilePIB = styled(Typography)` | ||||
| color: ${(props) => | color: ${(props) => | ||||
| props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText}; | |||||
| props.isMyProfile && !props.isBlocked | |||||
| ? "white" | |||||
| : selectedTheme.colors.primaryDarkText}; | |||||
| /* color: ${selectedTheme.colors.primaryDarkText}; */ | |||||
| margin-top: 0.18rem; | margin-top: 0.18rem; | ||||
| font-family: ${selectedTheme.fonts.textFont}; | font-family: ${selectedTheme.fonts.textFont}; | ||||
| font-size: 16px; | font-size: 16px; |
| const ProfileStats = (props) => { | const ProfileStats = (props) => { | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| return ( | return ( | ||||
| <ProfileStatsContainer className={props.className} twoRows={props.twoRows}> | |||||
| <ProfileStatsContainer | |||||
| className={props.className} | |||||
| twoRows={props.twoRows} | |||||
| 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> | ||||
| percentOfSucceededExchanges: PropTypes.number, | percentOfSucceededExchanges: PropTypes.number, | ||||
| className: PropTypes.string, | className: PropTypes.string, | ||||
| twoRows: PropTypes.bool, | twoRows: PropTypes.bool, | ||||
| isBlocked: PropTypes.bool, | |||||
| }; | }; | ||||
| export default ProfileStats; | export default ProfileStats; |
| display: flex; | display: flex; | ||||
| justify-content: start; | justify-content: start; | ||||
| flex-direction: row; | flex-direction: row; | ||||
| background: ${selectedTheme.colors.primaryDarkTextSecond}; | |||||
| background: ${(props) => | |||||
| props.isBlocked | |||||
| ? selectedTheme.colors.borderNormal | |||||
| : selectedTheme.colors.primaryDarkTextSecond}; | |||||
| width: calc(100% + 36px); | width: calc(100% + 36px); | ||||
| padding-top: 18px; | padding-top: 18px; | ||||
| padding-bottom: 18px; | padding-bottom: 18px; |
| ButtonsContainer, | ButtonsContainer, | ||||
| CategoryTitleField, | CategoryTitleField, | ||||
| EditCategoryContainer, | EditCategoryContainer, | ||||
| EditCategoryImagePicker, | |||||
| // EditCategoryImagePicker, | |||||
| EditCategoryTitle, | EditCategoryTitle, | ||||
| FieldLabel, | FieldLabel, | ||||
| InputContainer, | InputContainer, | ||||
| SaveButton, | SaveButton, | ||||
| SupportedFormats, | |||||
| // SupportedFormats, | |||||
| XIcon, | XIcon, | ||||
| } from "./EditCategory.styled"; | } from "./EditCategory.styled"; | ||||
| import { useState } from "react"; | import { useState } from "react"; | ||||
| import { Trans, useTranslation } from "react-i18next"; | |||||
| import { useTranslation } from "react-i18next"; | |||||
| import { useFormik } from "formik"; | import { useFormik } from "formik"; | ||||
| import { useMemo } from "react"; | import { useMemo } from "react"; | ||||
| import { useDispatch } from "react-redux"; | import { useDispatch } from "react-redux"; | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| const dispatch = useDispatch(); | const dispatch = useDispatch(); | ||||
| const [clickedOnNext, setClickedOnNext] = useState(false); | const [clickedOnNext, setClickedOnNext] = useState(false); | ||||
| const setImage = useState("")[1]; | |||||
| // const setImage = useState("")[1]; | |||||
| const inputRef = useRef(null); | const inputRef = useRef(null); | ||||
| const title = useMemo(() => { | const title = useMemo(() => { | ||||
| return t(`admin.${props.type}.${props.method}.title`); | return t(`admin.${props.type}.${props.method}.title`); | ||||
| const secondButtonText = useMemo(() => { | const secondButtonText = useMemo(() => { | ||||
| return t(`admin.${props.type}.${props.method}.save`); | return t(`admin.${props.type}.${props.method}.save`); | ||||
| }, [props.type, props.method]); | }, [props.type, props.method]); | ||||
| const setImageHandler = (image) => { | |||||
| setImage(image); | |||||
| formik.setFieldValue("image", image); | |||||
| }; | |||||
| // const setImageHandler = (image) => { | |||||
| // setImage(image); | |||||
| // formik.setFieldValue("image", image); | |||||
| // }; | |||||
| const closeModalHandler = () => { | const closeModalHandler = () => { | ||||
| dispatch(closeModal()); | dispatch(closeModal()); | ||||
| <EditCategoryContainer hideImagePicker={props.hideImagePicker}> | <EditCategoryContainer hideImagePicker={props.hideImagePicker}> | ||||
| <XIcon onClick={closeModalHandler} /> | <XIcon onClick={closeModalHandler} /> | ||||
| <EditCategoryTitle>{title}</EditCategoryTitle> | <EditCategoryTitle>{title}</EditCategoryTitle> | ||||
| {!props.hideImagePicker && ( | |||||
| {/* {!props.hideImagePicker && ( | |||||
| <> | <> | ||||
| <EditCategoryImagePicker setImage={setImageHandler} singleImage /> | <EditCategoryImagePicker setImage={setImageHandler} singleImage /> | ||||
| <SupportedFormats> | <SupportedFormats> | ||||
| <Trans i18nKey="offer.supportedImagesFormats" /> | <Trans i18nKey="offer.supportedImagesFormats" /> | ||||
| </SupportedFormats> | </SupportedFormats> | ||||
| </> | </> | ||||
| )} | |||||
| )} */} | |||||
| <InputContainer hideImagePicker={props.hideImagePicker}> | <InputContainer hideImagePicker={props.hideImagePicker}> | ||||
| <FieldLabel leftText={fieldLabel} /> | <FieldLabel leftText={fieldLabel} /> | ||||
| <CategoryTitleField | <CategoryTitleField |
| export const EditCategoryContainer = styled(Box)` | export const EditCategoryContainer = styled(Box)` | ||||
| position: fixed; | position: fixed; | ||||
| width: 623px; | width: 623px; | ||||
| height: ${(props) => (props.hideImagePicker ? "296px" : "510px")}; | |||||
| /* height: ${(props) => (props.hideImagePicker ? "296px" : "510px")}; */ | |||||
| top: ${(props) => | top: ${(props) => | ||||
| props.hideImagePicker ? "calc(50vh - 148px)" : "calc(50vh - 255px)"}; | |||||
| props.hideImagePicker ? "calc(50vh - 148px)" : "calc(50vh - 146.5px)"}; | |||||
| left: calc(50vw - 311px); | left: calc(50vw - 311px); | ||||
| background: white; | background: white; | ||||
| } | } | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| width: 350px; | width: 350px; | ||||
| height: ${(props) => (props.hideImagePicker ? "207px" : "412px")}; | |||||
| /* height: ${(props) => (props.hideImagePicker ? "207px" : "412px")}; */ | |||||
| left: calc(50vw - 175px); | left: calc(50vw - 175px); | ||||
| top: ${(props) => | top: ${(props) => | ||||
| props.hideImagePicker ? "calc(50vh - 103px)" : "calc(50vh - 206px)"}; | |||||
| props.hideImagePicker ? "calc(50vh - 103px)" : "calc(50vh - 111px)"}; | |||||
| } | } | ||||
| `; | `; | ||||
| export const EditCategoryTitle = styled(Typography)` | export const EditCategoryTitle = styled(Typography)` |
| `; | `; | ||||
| export const UserReviewsSkeletonItemsContainer = styled(Box)` | export const UserReviewsSkeletonItemsContainer = styled(Box)` | ||||
| width: 100%; | width: 100%; | ||||
| padding: 18px 0; | |||||
| `; | `; | ||||
| export const UserReviewsSkeletonLine = styled(Box)` | export const UserReviewsSkeletonLine = styled(Box)` | ||||
| display: flex; | display: flex; |
| deleteLocation: "admin/locations/{locationId}", | deleteLocation: "admin/locations/{locationId}", | ||||
| }, | }, | ||||
| reviews: { | reviews: { | ||||
| getUserReviewsAsAdmin: 'admin/reviews/{userId}' | |||||
| } | |||||
| getUserReviewsAsAdmin: "admin/reviews/{userId}", | |||||
| }, | |||||
| }, | }, | ||||
| }; | }; |
| filterSkeletonItemsSecond: "#DDDDDD", | filterSkeletonItemsSecond: "#DDDDDD", | ||||
| staticBackgroundColor: "#F3EFF8", | staticBackgroundColor: "#F3EFF8", | ||||
| stepProgressAltColor: "#F4F4F4", | stepProgressAltColor: "#F4F4F4", | ||||
| blockedColor: "#EE3A3A", | |||||
| errorColor: "#d32f2f" | |||||
| blockedColor: "#E4E4E4", | |||||
| blockedTextColor: "#D13333", | |||||
| errorColor: "#d32f2f", | |||||
| }; | }; |