From 4fc20a5200ee22714734870b81fcebd93855f06e Mon Sep 17 00:00:00 2001 From: Kalina Zhecheva Date: Tue, 24 Oct 2023 22:23:15 +0300 Subject: [PATCH 1/6] fix: shows tabs for donors and wishes --- .../client/campaigns/InlineDonation.tsx | 115 ++++++++++++++---- 1 file changed, 92 insertions(+), 23 deletions(-) diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index bbfbad613..df446e4ab 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, MarkEmailUnread } from '@mui/icons-material' import { lighten } from '@mui/material/styles' import { styled } from '@mui/material/styles' @@ -25,6 +34,7 @@ import useMobile from 'common/hooks/useMobile' import LinkButton from '../../common/LinkButton' import CampaignProgress from './CampaignProgress' import DonorsAndDonations from './DonorsAndDonations' +import DonationWishes from './DonationWishes' import CustomListItem from 'components/common/navigation/CustomListItem' import { socialMedia } from './helpers/socialMedia' import { CampaignState } from './helpers/campaign.enums' @@ -39,6 +49,9 @@ const classes = { 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`, @@ -98,6 +111,28 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ color: theme.palette.common.black, }, + [`& .${classes.donorsWishesTabs}`]: { + display: 'rowflex', + flexDirection: 'row', + width: 'fit-content', + border: '1px solid grey', + borderRadius: '60px', + margin: theme.spacing(1.7, 0), + }, + + [`& .${classes.donorsWishesTab}`]: { + textTransform: 'capitalize', + backgroundColor: '#EEEEEE', + padding: theme.spacing(0, 1.7), + paddingBottom: '2px', + borderRadius: '60px', + cursor: 'pointer', + }, + + [`& .${classes.selected}`]: { + backgroundColor: '#b1defe', + }, + [`& .${classes.donationPriceList}`]: { display: 'contents', textAlignLast: 'center', @@ -264,6 +299,39 @@ 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 wishesDisplay = ( + <> + {' '} + + ) + return ( @@ -364,29 +432,30 @@ 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', + )} (${donors})`} + + + {selected === 'donors' ? donorsDisplay : wishesDisplay} ))} {mobile && ( From b54ad4733e07b4b5cf32f764446385641f577a91 Mon Sep 17 00:00:00 2001 From: Kalina Zhecheva Date: Thu, 26 Oct 2023 21:13:39 +0300 Subject: [PATCH 2/6] fix: wishes tab shows messages and pagination --- .../client/campaigns/DonationWishesInline.tsx | 127 ++++++++++++++++++ .../client/campaigns/InlineDonation.tsx | 103 ++++++++++++-- 2 files changed, 221 insertions(+), 9 deletions(-) create mode 100644 src/components/client/campaigns/DonationWishesInline.tsx diff --git a/src/components/client/campaigns/DonationWishesInline.tsx b/src/components/client/campaigns/DonationWishesInline.tsx new file mode 100644 index 000000000..c53111003 --- /dev/null +++ b/src/components/client/campaigns/DonationWishesInline.tsx @@ -0,0 +1,127 @@ +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 { formatDistanceStrict, parseISO } from 'date-fns' +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, + }, + + [`& .${classes.donatorAvatar}`]: { + width: theme.spacing(5.25), + height: theme.spacing(5.25), + }, +})) + +export default function DonationsWishesInline({ + wishList, +}: { + wishList: DonationWishPaginatedResponse +}) { + const { t, i18n } = useTranslation() + const all = false + const wishListToShow = useMemo(() => { + if (all) { + return wishList?.items + } + return wishList?.items?.slice(0, wishList?.totalCount) + }, [wishList?.items, all]) + + // console.log(wishListToShow) + + 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:donations.none')} + + )} + + + ) +} diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index df446e4ab..d5d977a59 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -34,7 +34,7 @@ import useMobile from 'common/hooks/useMobile' import LinkButton from '../../common/LinkButton' import CampaignProgress from './CampaignProgress' import DonorsAndDonations from './DonorsAndDonations' -import DonationWishes from './DonationWishes' +import DonationWishesInline from './DonationWishesInline' import CustomListItem from 'components/common/navigation/CustomListItem' import { socialMedia } from './helpers/socialMedia' import { CampaignState } from './helpers/campaign.enums' @@ -326,9 +326,98 @@ export default function InlineDonation({ campaign }: Props) { ) + const wishList = { + items: [ + { + id: 'c7f50140-0f5e-4df0-8d4b-760e78655147', + message: '<3', + campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', + personId: '0bb9f7f2-1cb8-4f13-bee3-0b1ddc096f57', + donationId: '80f1dce8-735c-4e5a-9ac8-6f4d3fedefd9', + createdAt: '2023-08-14T12:51:40.082Z', + updatedAt: '2023-08-14T12:51:40.082Z', + person: { + id: '0bb9f7f2-1cb8-4f13-bee3-0b1ddc096f57', + firstName: 'Евгения', + lastName: 'Врабчева', + }, + donation: { + amount: 2000, + currency: 'BGN', + }, + }, + { + id: '5bec2524-593b-4bd5-ac5c-a988615db312', + message: 'Uspeh!\nПрекрасна инициатива!', + campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', + personId: '8ff079dd-1895-4846-b53e-aefdb9f9deca', + donationId: 'a1bfc657-9fef-43a0-adc0-38ff47d1a053', + createdAt: '2023-07-20T17:18:39.760Z', + updatedAt: '2023-07-20T17:18:39.760Z', + person: { + id: '8ff079dd-1895-4846-b53e-aefdb9f9deca', + firstName: 'Бендис', + lastName: 'Йода', + }, + donation: { + amount: 2420, + currency: 'BGN', + }, + }, + { + id: '387dc820-7d96-4b00-8255-ef0b37f493d2', + message: 'Традициите, културата, фолклор - това сме ние. Нека не го губим.', + campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', + personId: null, + donationId: 'e2ec8d82-7292-448c-b9d4-ec3f958419cb', + createdAt: '2023-02-03T10:03:23.579Z', + updatedAt: '2023-02-03T10:03:23.579Z', + person: null, + donation: { + amount: 50000, + currency: 'BGN', + }, + }, + { + id: '8d4b43ba-9b0c-4671-aa40-3189cdbf50f7', + message: 'Успех, любима алтруистке! ', + campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', + personId: null, + donationId: '555b0d97-a1f8-4d37-ab35-01916d998911', + createdAt: '2023-01-18T18:05:47.520Z', + updatedAt: '2023-01-18T18:05:47.520Z', + person: null, + donation: { + amount: 3000, + currency: 'BGN', + }, + }, + ], + totalCount: 4, + } + const wishesDisplay = ( <> - {' '} + + {wishList?.items && wishList?.items?.length !== 0 ? ( + + {`${page * wishList?.totalCount + 1}-${wishList?.totalCount} ${t( + 'campaigns:of', + )} ${wishList?.items?.length}`} + setPage((index) => index - 1)}> + + + setPage((index) => index + 1)}> + + + + ) : null} ) @@ -432,10 +521,6 @@ export default function InlineDonation({ campaign }: Props) { {t('campaign.noCommissionInfo')} - {/* - {t('campaign.donors')}: {donors} - */} - setSelected('wishes')}>{`${t( - 'campaign.wishes', - )} (${donors})`} + onClick={() => setSelected('wishes')}>{`${t('campaign.wishes')} (${ + wishList?.totalCount + })`} {selected === 'donors' ? donorsDisplay : wishesDisplay} From 280bdd855f3c69d46be11e36e64c998011837317 Mon Sep 17 00:00:00 2001 From: Kalina Zhecheva Date: Fri, 27 Oct 2023 15:17:24 +0300 Subject: [PATCH 3/6] fix: adds btn 'Show all' to wishes tab, align wishes array --- public/locales/bg/campaigns.json | 4 +- public/locales/en/campaigns.json | 4 +- .../client/campaigns/DonationWishesInline.tsx | 23 +- .../client/campaigns/InlineDonation.tsx | 218 ++++++++++-------- 4 files changed, 146 insertions(+), 103 deletions(-) diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json index 84667c8e0..fdb2c6a18 100644 --- a/public/locales/bg/campaigns.json +++ b/public/locales/bg/campaigns.json @@ -174,7 +174,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 7c347ac37..77c5f77b6 100644 --- a/public/locales/en/campaigns.json +++ b/public/locales/en/campaigns.json @@ -160,7 +160,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 index c53111003..0aee9f54c 100644 --- a/src/components/client/campaigns/DonationWishesInline.tsx +++ b/src/components/client/campaigns/DonationWishesInline.tsx @@ -9,7 +9,6 @@ import { Grid, Typography } from '@mui/material' import { styled } from '@mui/material/styles' import theme from 'common/theme' -import { formatDistanceStrict, parseISO } from 'date-fns' import { bg, enUS } from 'date-fns/locale' import { getExactDate } from 'common/util/date' @@ -60,6 +59,7 @@ const Root = styled('div')(({ theme }) => ({ [`& .${classes.donatorName}`]: { color: theme.palette.common.black, + fontWeight: 500, }, [`& .${classes.donatorAvatar}`]: { @@ -70,19 +70,26 @@ const Root = styled('div')(({ theme }) => ({ export default function DonationsWishesInline({ wishList, + pageSize = 3, }: { wishList: DonationWishPaginatedResponse + pageSize?: number }) { const { t, i18n } = useTranslation() - const all = false + const wishListToShow = useMemo(() => { - if (all) { + if (wishList?.items?.length <= pageSize) { return wishList?.items } - return wishList?.items?.slice(0, wishList?.totalCount) - }, [wishList?.items, all]) - // console.log(wishListToShow) + const wishListSortByMsgLengthAndCreateDate = wishList?.items + ?.map((item) => ({ ...item, msgLength: item.message.length })) + ?.sort((a, b) => (a.msgLength > b.msgLength ? -1 : 1)) + ?.slice(0, pageSize) + ?.sort((c, d) => (c.createdAt > d.createdAt ? -1 : 1)) + + return wishListSortByMsgLengthAndCreateDate + }, [wishList?.items]) return ( @@ -99,7 +106,7 @@ export default function DonationsWishesInline({ : t('campaigns:donations.anonymous')} | - + {getExactDate(createdAt, i18n.language == 'bg' ? bg : enUS)} @@ -118,7 +125,7 @@ export default function DonationsWishesInline({ )) ) : ( - {t('campaigns:donations.none')} + {t('campaigns:campaign.nowishes')} )} diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index 79b088b88..0b7a4a486 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -7,6 +7,7 @@ import { CampaignResponse } from 'gql/campaigns' import { Button, + Chip, CircularProgress, FormControl, Grid, @@ -21,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' @@ -39,6 +41,7 @@ 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' @@ -113,7 +116,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ [`& .${classes.donorsWishesTabs}`]: { display: 'rowflex', flexDirection: 'row', - width: 'fit-content', + width: '100%', border: '1px solid grey', borderRadius: '60px', margin: theme.spacing(1.7, 0), @@ -121,9 +124,12 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ [`& .${classes.donorsWishesTab}`]: { textTransform: 'capitalize', - backgroundColor: '#EEEEEE', - padding: theme.spacing(0, 1.7), - paddingBottom: '2px', + display: 'flex', + justifyContent: 'center', + width: '50%', + fontSize: '13px', + backgroundColor: 'transparant', + paddingBottom: theme.spacing(0.2), borderRadius: '60px', cursor: 'pointer', }, @@ -325,98 +331,124 @@ export default function InlineDonation({ campaign }: Props) { ) - const wishList = { - items: [ - { - id: 'c7f50140-0f5e-4df0-8d4b-760e78655147', - message: '<3', - campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', - personId: '0bb9f7f2-1cb8-4f13-bee3-0b1ddc096f57', - donationId: '80f1dce8-735c-4e5a-9ac8-6f4d3fedefd9', - createdAt: '2023-08-14T12:51:40.082Z', - updatedAt: '2023-08-14T12:51:40.082Z', - person: { - id: '0bb9f7f2-1cb8-4f13-bee3-0b1ddc096f57', - firstName: 'Евгения', - lastName: 'Врабчева', - }, - donation: { - amount: 2000, - currency: 'BGN', - }, - }, - { - id: '5bec2524-593b-4bd5-ac5c-a988615db312', - message: 'Uspeh!\nПрекрасна инициатива!', - campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', - personId: '8ff079dd-1895-4846-b53e-aefdb9f9deca', - donationId: 'a1bfc657-9fef-43a0-adc0-38ff47d1a053', - createdAt: '2023-07-20T17:18:39.760Z', - updatedAt: '2023-07-20T17:18:39.760Z', - person: { - id: '8ff079dd-1895-4846-b53e-aefdb9f9deca', - firstName: 'Бендис', - lastName: 'Йода', - }, - donation: { - amount: 2420, - currency: 'BGN', - }, - }, - { - id: '387dc820-7d96-4b00-8255-ef0b37f493d2', - message: 'Традициите, културата, фолклор - това сме ние. Нека не го губим.', - campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', - personId: null, - donationId: 'e2ec8d82-7292-448c-b9d4-ec3f958419cb', - createdAt: '2023-02-03T10:03:23.579Z', - updatedAt: '2023-02-03T10:03:23.579Z', - person: null, - donation: { - amount: 50000, - currency: 'BGN', - }, - }, - { - id: '8d4b43ba-9b0c-4671-aa40-3189cdbf50f7', - message: 'Успех, любима алтруистке! ', - campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', - personId: null, - donationId: '555b0d97-a1f8-4d37-ab35-01916d998911', - createdAt: '2023-01-18T18:05:47.520Z', - updatedAt: '2023-01-18T18:05:47.520Z', - person: null, - donation: { - amount: 3000, - currency: 'BGN', - }, - }, - ], - totalCount: 4, - } + // const wishList = { + // items: [ + // { + // id: 'c7f50140-0f5e-4df0-8d4b-760e78655147', + // message: '<3', + // campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', + // personId: '0bb9f7f2-1cb8-4f13-bee3-0b1ddc096f57', + // donationId: '80f1dce8-735c-4e5a-9ac8-6f4d3fedefd9', + // createdAt: '2023-08-14T12:51:40.082Z', + // updatedAt: '2023-08-14T12:51:40.082Z', + // person: { + // id: '0bb9f7f2-1cb8-4f13-bee3-0b1ddc096f57', + // firstName: 'Евгения', + // lastName: 'Врабчева', + // }, + // donation: { + // amount: 2000, + // currency: 'BGN', + // }, + // }, + // { + // id: '5bec2524-593b-4bd5-ac5c-a988615db312', + // message: 'Uspeh!\nПрекрасна инициатива!', + // campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', + // personId: '8ff079dd-1895-4846-b53e-aefdb9f9deca', + // donationId: 'a1bfc657-9fef-43a0-adc0-38ff47d1a053', + // createdAt: '2023-07-20T17:18:39.760Z', + // updatedAt: '2023-07-20T17:18:39.760Z', + // person: { + // id: '8ff079dd-1895-4846-b53e-aefdb9f9deca', + // firstName: 'Бендис', + // lastName: 'Йода', + // }, + // donation: { + // amount: 2420, + // currency: 'BGN', + // }, + // }, + // { + // id: '387dc820-7d96-4b00-8255-ef0b37f493d2', + // message: 'Традициите, културата, фолклор - това сме ние. Нека не го губим.', + // campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', + // personId: '8ff079dd-1895-4846-b53e-aefdb9f9deca', + // donationId: 'e2ec8d82-7292-448c-b9d4-ec3f958419cb', + // createdAt: '2023-02-03T10:03:23.579Z', + // updatedAt: '2023-02-03T10:03:23.579Z', + // person: { + // id: '8ff079dd-1895-4846-b53e-aefdb9f9deca', + // firstName: 'Бендис', + // lastName: 'Йода', + // }, + // donation: { + // amount: 50000, + // currency: 'BGN', + // }, + // }, + // { + // id: '8d4b43ba-9b0c-4671-aa40-3189cdbf50f7', + // message: 'Успех, любима алтруистке! ', + // campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', + // personId: '8ff079dd-1895-4846-b53e-aefdb9f9deca', + // donationId: '555b0d97-a1f8-4d37-ab35-01916d998911', + // createdAt: '2023-01-18T18:05:47.520Z', + // updatedAt: '2023-01-18T18:05:47.520Z', + // person: { + // id: '8ff079dd-1895-4846-b53e-aefdb9f9deca', + // firstName: 'Бендис', + // lastName: 'Йода', + // }, + // donation: { + // amount: 3000, + // currency: 'BGN', + // }, + // }, + // ], + // totalCount: 4, + // } + + const { data: wishList } = useDonationWishesList( + campaignId, + { pageIndex: 0, pageSize }, + { sortBy: 'createdAt', sortOrder: 'desc' }, + '', + ) const wishesDisplay = ( <> - - {wishList?.items && wishList?.items?.length !== 0 ? ( - - {`${page * wishList?.totalCount + 1}-${wishList?.totalCount} ${t( - 'campaigns:of', - )} ${wishList?.items?.length}`} - setPage((index) => index - 1)}> - - - setPage((index) => index + 1)}> - - - - ) : null} + {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', + }, + }} + /> + )} ) From 46c73c2c13b1baea6b7c2668a9e0260068e1f808 Mon Sep 17 00:00:00 2001 From: Kalina Zhecheva Date: Fri, 27 Oct 2023 15:39:12 +0300 Subject: [PATCH 4/6] fix: InfoIcon align --- src/components/client/campaigns/InlineDonation.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index 0b7a4a486..a987f45be 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -212,7 +212,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', }, From 52f8b1a06fc8500d1e3f4a648b3650b38a8eda61 Mon Sep 17 00:00:00 2001 From: Kalina Zhecheva Date: Fri, 27 Oct 2023 16:36:24 +0300 Subject: [PATCH 5/6] fix: shuffle wishes array --- .../client/campaigns/DonationWishesInline.tsx | 7 +- .../client/campaigns/InlineDonation.tsx | 78 ------------------- 2 files changed, 5 insertions(+), 80 deletions(-) diff --git a/src/components/client/campaigns/DonationWishesInline.tsx b/src/components/client/campaigns/DonationWishesInline.tsx index 0aee9f54c..bac420eb4 100644 --- a/src/components/client/campaigns/DonationWishesInline.tsx +++ b/src/components/client/campaigns/DonationWishesInline.tsx @@ -83,8 +83,11 @@ export default function DonationsWishesInline({ } const wishListSortByMsgLengthAndCreateDate = wishList?.items - ?.map((item) => ({ ...item, msgLength: item.message.length })) - ?.sort((a, b) => (a.msgLength > b.msgLength ? -1 : 1)) + ?.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)) diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index a987f45be..5cbc661ce 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -332,84 +332,6 @@ export default function InlineDonation({ campaign }: Props) { ) - // const wishList = { - // items: [ - // { - // id: 'c7f50140-0f5e-4df0-8d4b-760e78655147', - // message: '<3', - // campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', - // personId: '0bb9f7f2-1cb8-4f13-bee3-0b1ddc096f57', - // donationId: '80f1dce8-735c-4e5a-9ac8-6f4d3fedefd9', - // createdAt: '2023-08-14T12:51:40.082Z', - // updatedAt: '2023-08-14T12:51:40.082Z', - // person: { - // id: '0bb9f7f2-1cb8-4f13-bee3-0b1ddc096f57', - // firstName: 'Евгения', - // lastName: 'Врабчева', - // }, - // donation: { - // amount: 2000, - // currency: 'BGN', - // }, - // }, - // { - // id: '5bec2524-593b-4bd5-ac5c-a988615db312', - // message: 'Uspeh!\nПрекрасна инициатива!', - // campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', - // personId: '8ff079dd-1895-4846-b53e-aefdb9f9deca', - // donationId: 'a1bfc657-9fef-43a0-adc0-38ff47d1a053', - // createdAt: '2023-07-20T17:18:39.760Z', - // updatedAt: '2023-07-20T17:18:39.760Z', - // person: { - // id: '8ff079dd-1895-4846-b53e-aefdb9f9deca', - // firstName: 'Бендис', - // lastName: 'Йода', - // }, - // donation: { - // amount: 2420, - // currency: 'BGN', - // }, - // }, - // { - // id: '387dc820-7d96-4b00-8255-ef0b37f493d2', - // message: 'Традициите, културата, фолклор - това сме ние. Нека не го губим.', - // campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', - // personId: '8ff079dd-1895-4846-b53e-aefdb9f9deca', - // donationId: 'e2ec8d82-7292-448c-b9d4-ec3f958419cb', - // createdAt: '2023-02-03T10:03:23.579Z', - // updatedAt: '2023-02-03T10:03:23.579Z', - // person: { - // id: '8ff079dd-1895-4846-b53e-aefdb9f9deca', - // firstName: 'Бендис', - // lastName: 'Йода', - // }, - // donation: { - // amount: 50000, - // currency: 'BGN', - // }, - // }, - // { - // id: '8d4b43ba-9b0c-4671-aa40-3189cdbf50f7', - // message: 'Успех, любима алтруистке! ', - // campaignId: '0be9cf3f-d6b1-420d-ac9c-3bf91bbc1604', - // personId: '8ff079dd-1895-4846-b53e-aefdb9f9deca', - // donationId: '555b0d97-a1f8-4d37-ab35-01916d998911', - // createdAt: '2023-01-18T18:05:47.520Z', - // updatedAt: '2023-01-18T18:05:47.520Z', - // person: { - // id: '8ff079dd-1895-4846-b53e-aefdb9f9deca', - // firstName: 'Бендис', - // lastName: 'Йода', - // }, - // donation: { - // amount: 3000, - // currency: 'BGN', - // }, - // }, - // ], - // totalCount: 4, - // } - const { data: wishList } = useDonationWishesList( campaignId, { pageIndex: 0, pageSize }, From 42e97672f4dddcdac75c2ca4b9791c647fc1f09d Mon Sep 17 00:00:00 2001 From: Kalina Zhecheva Date: Fri, 27 Oct 2023 16:41:36 +0300 Subject: [PATCH 6/6] fix: clear unused classes --- src/components/client/campaigns/InlineDonation.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index 5cbc661ce..587ac3063 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -50,7 +50,6 @@ const classes = { reachedAndTargetMoneyWrapper: `${PREFIX}-reachedAndTargetMoneyWrapper`, moneyUnit: `${PREFIX}-moneyUnit`, moneyFraction: `${PREFIX}-moneyFraction`, - donorsSharesCount: `${PREFIX}-donorsSharesCount`, donorsWishesTabs: `${PREFIX}-donorsWishesTabs`, donorsWishesTab: `${PREFIX}-donorsWishesTab`, selected: `${PREFIX}-selected`, @@ -106,13 +105,6 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ margin: theme.spacing(0.25, 0, 0, 0.25), }, - [`& .${classes.donorsSharesCount}`]: { - textTransform: 'capitalize', - margin: theme.spacing(1.7, 0), - fontSize: theme.typography.pxToRem(14), - color: theme.palette.common.black, - }, - [`& .${classes.donorsWishesTabs}`]: { display: 'rowflex', flexDirection: 'row',