From ceae0e994e546259added329e28fe8939943c2ce Mon Sep 17 00:00:00 2001 From: Kalina Zhecheva <60223025+kzhecheva@users.noreply.github.com> Date: Mon, 30 Oct 2023 10:08:55 +0200 Subject: [PATCH] Show wishes on the top of campaign page (#1633) * fix: shows tabs for donors and wishes * fix: wishes tab shows messages and pagination * fix: adds btn 'Show all' to wishes tab, align wishes array * fix: InfoIcon align * fix: shuffle wishes array * fix: clear unused classes --- public/locales/bg/campaigns.json | 4 +- public/locales/en/campaigns.json | 4 +- .../client/campaigns/DonationWishesInline.tsx | 137 +++++++++++++++ .../client/campaigns/InlineDonation.tsx | 160 ++++++++++++++---- 4 files changed, 273 insertions(+), 32 deletions(-) create mode 100644 src/components/client/campaigns/DonationWishesInline.tsx diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json index e61d7ce12..a24885560 100644 --- a/public/locales/bg/campaigns.json +++ b/public/locales/bg/campaigns.json @@ -193,7 +193,9 @@ "tag": "Таг:", "date": "Дата:", "news": "Новини", - "wishes": "Пожелания" + "wishes": "Пожелания", + "nowishes": "Няма добавени пожелания", + "seeAll": "Виж всички" }, "info-graphics": { "donation-title": "100% от дарението отива при нуждаещите се", diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json index 5f7de4c73..a80f11c96 100644 --- a/public/locales/en/campaigns.json +++ b/public/locales/en/campaigns.json @@ -179,7 +179,9 @@ "tag": "Tag:", "date": "Date:", "news": "News", - "wishes": "Wishes" + "wishes": "Wishes", + "nowishes": "No wishes yet", + "seeAll": "Show all" }, "info-graphics": { "donation-title": "100% of the donation goes to those in need", diff --git a/src/components/client/campaigns/DonationWishesInline.tsx b/src/components/client/campaigns/DonationWishesInline.tsx new file mode 100644 index 000000000..bac420eb4 --- /dev/null +++ b/src/components/client/campaigns/DonationWishesInline.tsx @@ -0,0 +1,137 @@ +import { useMemo } from 'react' + +import { useTranslation } from 'next-i18next' + +import { DonationWishPaginatedResponse } from 'gql/donationWish' + +import AccountCircleIcon from '@mui/icons-material/AccountCircle' +import { Grid, Typography } from '@mui/material' +import { styled } from '@mui/material/styles' + +import theme from 'common/theme' +import { bg, enUS } from 'date-fns/locale' +import { getExactDate } from 'common/util/date' + +const PREFIX = 'DonationsWishesInline' + +const classes = { + donationsWrapper: `${PREFIX}-donationsWrapper`, + donationItemWrapper: `${PREFIX}-donationItemWrapper`, + donationQuantityAndTimeWrapper: `${PREFIX}-donationQuantityAndTimeWrapper`, + separatorIcon: `${PREFIX}-separatorIcon`, + donatorName: `${PREFIX}-donatorName`, + donatorAvatar: `${PREFIX}-donatorAvatar`, +} + +const Root = styled('div')(({ theme }) => ({ + [`& .${classes.donationsWrapper}`]: { + maxHeight: 400, + }, + + [`& .${classes.donationItemWrapper}`]: { + display: 'flex', + gap: theme.spacing(1), + alignItems: 'start', + marginBottom: theme.spacing(1.7), + maxHeight: 'fit-content', + + '&:last-of-type': { + marginBottom: 0, + }, + }, + + [`& .${classes.donationQuantityAndTimeWrapper}`]: { + display: 'flex', + gap: theme.spacing(1), + color: '#909090', + alignItems: 'center', + lineHeight: '145%', + + '& p': { + fontSize: theme.typography.pxToRem(12), + }, + }, + + [`& .${classes.separatorIcon}`]: { + fontSize: theme.typography.pxToRem(21), + fontWeight: 200, + }, + + [`& .${classes.donatorName}`]: { + color: theme.palette.common.black, + fontWeight: 500, + }, + + [`& .${classes.donatorAvatar}`]: { + width: theme.spacing(5.25), + height: theme.spacing(5.25), + }, +})) + +export default function DonationsWishesInline({ + wishList, + pageSize = 3, +}: { + wishList: DonationWishPaginatedResponse + pageSize?: number +}) { + const { t, i18n } = useTranslation() + + const wishListToShow = useMemo(() => { + if (wishList?.items?.length <= pageSize) { + return wishList?.items + } + + const wishListSortByMsgLengthAndCreateDate = wishList?.items + ?.sort((a, b) => b?.message?.length - a?.message?.length) + ?.slice(0, 5) + .map((value) => ({ value, sort: Math.random() })) + .sort((a, b) => a.sort - b.sort) + .map(({ value }) => value) + ?.slice(0, pageSize) + ?.sort((c, d) => (c.createdAt > d.createdAt ? -1 : 1)) + + return wishListSortByMsgLengthAndCreateDate + }, [wishList?.items]) + + return ( + + + {wishListToShow && wishListToShow.length !== 0 ? ( + wishListToShow.map(({ person, createdAt, message }, key) => ( + + + + + + {person + ? `${person?.firstName} ${person?.lastName}` + : t('campaigns:donations.anonymous')} + + | + + {getExactDate(createdAt, i18n.language == 'bg' ? bg : enUS)} + + + + {message} + + + + )) + ) : ( + + {t('campaigns:campaign.nowishes')} + + )} + + + ) +} diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index ec9d094bb..587ac3063 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -5,7 +5,16 @@ import { useRouter } from 'next/router' import { CampaignResponse } from 'gql/campaigns' -import { Button, CircularProgress, Grid, IconButton, Menu, Typography } from '@mui/material' +import { + Button, + Chip, + CircularProgress, + FormControl, + Grid, + IconButton, + Menu, + Typography, +} from '@mui/material' import { AddLinkOutlined, Favorite } from '@mui/icons-material' import { lighten } from '@mui/material/styles' import { styled } from '@mui/material/styles' @@ -13,6 +22,7 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos' import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos' +import ArrowForwardIcon from '@mui/icons-material/ArrowForward' import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined' import { baseUrl, routes } from 'common/routes' @@ -25,11 +35,13 @@ import useMobile from 'common/hooks/useMobile' import LinkButton from '../../common/LinkButton' import CampaignProgress from './CampaignProgress' import DonorsAndDonations from './DonorsAndDonations' +import DonationWishesInline from './DonationWishesInline' import CustomListItem from 'components/common/navigation/CustomListItem' import { socialMedia } from './helpers/socialMedia' import { CampaignState } from './helpers/campaign.enums' import { AlertStore } from 'stores/AlertStore' import RenderCampaignSubscribeModal from '../notifications/CampaignSubscribeModal' +import { useDonationWishesList } from 'common/hooks/donationWish' const PREFIX = 'InlineDonation' @@ -38,7 +50,9 @@ const classes = { reachedAndTargetMoneyWrapper: `${PREFIX}-reachedAndTargetMoneyWrapper`, moneyUnit: `${PREFIX}-moneyUnit`, moneyFraction: `${PREFIX}-moneyFraction`, - donorsSharesCount: `${PREFIX}-donorsSharesCount`, + donorsWishesTabs: `${PREFIX}-donorsWishesTabs`, + donorsWishesTab: `${PREFIX}-donorsWishesTab`, + selected: `${PREFIX}-selected`, donationPriceList: `${PREFIX}-donationPriceList`, dropdownLinkButton: `${PREFIX}-dropdownLinkButton`, dropdownLinkText: `${PREFIX}-dropdownLinkText`, @@ -91,11 +105,29 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ margin: theme.spacing(0.25, 0, 0, 0.25), }, - [`& .${classes.donorsSharesCount}`]: { - textTransform: 'capitalize', + [`& .${classes.donorsWishesTabs}`]: { + display: 'rowflex', + flexDirection: 'row', + width: '100%', + border: '1px solid grey', + borderRadius: '60px', margin: theme.spacing(1.7, 0), - fontSize: theme.typography.pxToRem(14), - color: theme.palette.common.black, + }, + + [`& .${classes.donorsWishesTab}`]: { + textTransform: 'capitalize', + display: 'flex', + justifyContent: 'center', + width: '50%', + fontSize: '13px', + backgroundColor: 'transparant', + paddingBottom: theme.spacing(0.2), + borderRadius: '60px', + cursor: 'pointer', + }, + + [`& .${classes.selected}`]: { + backgroundColor: '#b1defe', }, [`& .${classes.donationPriceList}`]: { @@ -172,7 +204,8 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ }, [`& .${classes.infoIcon}`]: { - marginTop: `-${theme.spacing(0.25)}`, + marginTop: `${theme.spacing(0.125)}`, + marginRight: `${theme.spacing(0.25)}`, fontSize: theme.typography.pxToRem(16), color: '#6d6d6d', }, @@ -264,6 +297,76 @@ export default function InlineDonation({ campaign }: Props) { const handleClose = () => setAnchorEl(null) + const [selected, setSelected] = useState('donors') + + const donorsDisplay = ( + <> + + {donations && donations.length !== 0 ? ( + + {`${page * pageSize + 1}-${rowCount} ${t( + 'campaigns:of', + )} ${all_rows}`} + setPage((index) => index - 1)}> + + + setPage((index) => index + 1)}> + + + + ) : null} + + ) + + const { data: wishList } = useDonationWishesList( + campaignId, + { pageIndex: 0, pageSize }, + { sortBy: 'createdAt', sortOrder: 'desc' }, + '', + ) + + const wishesDisplay = ( + <> + {wishList && } + {wishList?.totalCount !== 0 && ( + } + onDelete={() => { + return + }} + component="a" + href="#wishes" + clickable + size="medium" + sx={{ + border: `2px solid ${theme.palette.primary.dark}`, + color: theme.palette.primary.dark, + backgroundColor: '#EEEEEE', + marginTop: theme.spacing(1.7), + padding: '0 4px', + '.MuiChip-label': { + paddingRight: theme.spacing(1.7), + }, + '.MuiChip-deleteIcon': { + color: theme.palette.primary.dark, + ':hover': { + color: theme.palette.primary.dark, + }, + fontSize: 'large', + }, + }} + /> + )} + + ) + return ( @@ -364,29 +467,26 @@ export default function InlineDonation({ campaign }: Props) { {t('campaign.noCommissionInfo')} - - {t('campaign.donors')}: {donors} - - - {donations && donations.length !== 0 ? ( - - {`${page * pageSize + 1}-${rowCount} ${t( - 'campaigns:of', - )} ${all_rows}`} - setPage((index) => index - 1)}> - - - setPage((index) => index + 1)}> - - - - ) : null} + + setSelected('donors')}>{`${t( + 'campaign.donors', + )} (${donors})`} + setSelected('wishes')}>{`${t('campaign.wishes')} (${ + wishList?.totalCount + })`} + + + {selected === 'donors' ? donorsDisplay : wishesDisplay} ))} {mobile && (