Update campaign donation component

public/locales/bg/campaigns.json

@@ -53,7 +53,6 @@
     "apply": "Кандидатствайте",
     "support": "Дарете",
     "support-cause-today": "Подкрепете кауза днес!",
-    "share": "Сподели",
     "support-now": "Подкрепете сега",
     "see-all": "Разгледайте всички",
     "see-less": "Вижте по-малко",
@@ -84,8 +83,11 @@
     "reached": "събрани",
     "target": "цел",
     "from": "от",
+    "noCommissionInfo": "Подкрепи.бг работи с 0% комисиона. Заплащат се единствено банкови такси, които изрично се упоменават преди да направите дарението си.",
     "donors": "дарители",
-    "shares": "споделяния",
+    "documents": "документи",
+    "guarantor": "гарант",
+    "others": "други",
     "profile": "Профил:",
     "status": "Статус:",
     "messages": "Послания:",

public/locales/bg/common.json

@@ -53,7 +53,6 @@
     "success-deleted": "Успешно изтрито!"
   },
   "close": "Затвори",
-  "support": "Подкрепи",
   "link": "Линк",
   "components": {
     "footer": {

public/locales/en/campaigns.json

@@ -53,7 +53,6 @@
     "apply": "Apply",
     "support": "Donate",
     "support-cause-today": "Support a campaign today!",
-    "share": "Share",
     "support-now": "Support now",
     "see-all": "See all",
     "see-less": "See less",
@@ -83,8 +82,11 @@
     "reached": "reached",
     "target": "target",
     "from": "from",
+    "noCommissionInfo": "Podkrepi.bg works with 0% commission. Only bank charges are paid, which are explicitly mentioned before you make your donation.",
     "donors": "donors",
-    "shares": "shares",
+    "documents": "documents",
+    "guarantor": "guarantor",
+    "others": "others",
     "messages": "Messages:",
     "profile": "Profile:",
     "status": "Status:",

public/locales/en/common.json

@@ -54,7 +54,6 @@
   },
   "close": "Close",
   "link": "Link",
-  "support": "Donate",
   "components": {
     "footer": {
       "donatе": "Donate",

src/common/util/money.ts

@@ -34,7 +34,7 @@ export const moneyPublic = (
     if (currency === 'USD') {
       return `${amount} $`
     }
-    return `${amount} лв.`
+    return `${amount} лева`
   }
   return new Intl.NumberFormat(i18n.language, {
     style: 'currency',

src/components/campaigns/DonationWishes.tsx

@@ -48,6 +48,7 @@ export default function DonationWishes({ campaignId, pageSize = 12 }: Props) {
       <Grid2 container direction="column" rowGap={3}>
         {isSuccess &&
           data &&
+          data.items &&
           data.items.map((wish) => (
             <Grid2
               gap={2}

src/components/campaigns/DonorsAndDonations.tsx

@@ -1,14 +1,17 @@
+import { useMemo, useState } from 'react'
+
+import { useTranslation } from 'next-i18next'
+
+import { CampaignDonation } from 'gql/campaigns'
+
 import AccountCircleIcon from '@mui/icons-material/AccountCircle'
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
-import { Button, Grid, Typography } from '@mui/material'
+import { Grid, Typography } from '@mui/material'
 import { styled } from '@mui/material/styles'
+
 import theme from 'common/theme'
 import { moneyPublic } from 'common/util/money'
 import { formatDistanceStrict, parseISO } from 'date-fns'
 import { bg, enUS } from 'date-fns/locale'
-import { CampaignDonation } from 'gql/campaigns'
-import { useTranslation } from 'next-i18next'
-import { useMemo, useState } from 'react'
 
 const PREFIX = 'DonorsAndDonations'
 
@@ -17,31 +20,52 @@ const classes = {
   donationItemWrapper: `${PREFIX}-donationItemWrapper`,
   donationQuantityAndTimeWrapper: `${PREFIX}-donationQuantityAndTimeWrapper`,
   separatorIcon: `${PREFIX}-separatorIcon`,
+  donatorName: `${PREFIX}-donatorName`,
+  donatorAvatar: `${PREFIX}-donatorAvatar`,
 }
 
 const Root = styled('div')(({ theme }) => ({
   [`& .${classes.donationsWrapper}`]: {
-    marginTop: theme.spacing(5),
     maxHeight: 400,
-    overflowY: 'scroll',
   },
 
   [`& .${classes.donationItemWrapper}`]: {
     display: 'flex',
     gap: theme.spacing(1),
     alignItems: 'center',
-    marginBottom: theme.spacing(2),
+    marginBottom: theme.spacing(1.7),
+    maxHeight: theme.spacing(4.5),
+
+    '&:last-of-type': {
+      marginBottom: 0,
+    },
   },
 
   [`& .${classes.donationQuantityAndTimeWrapper}`]: {
     display: 'flex',
     gap: theme.spacing(1),
-    color: theme.palette.grey[500],
+    color: '#909090',
+    alignItems: 'center',
+    lineHeight: '145%',
+
+    '& p': {
+      fontSize: theme.typography.pxToRem(12),
+    },
   },
 
   [`& .${classes.separatorIcon}`]: {
-    fontSize: theme.spacing(1),
-    alignSelf: 'center',
+    fontSize: theme.typography.pxToRem(21),
+    fontWeight: 200,
+  },
+
+  [`& .${classes.donatorName}`]: {
+    color: theme.palette.common.black,
+  },
+
+  [`& .${classes.donatorAvatar}`]: {
+    width: theme.spacing(4.5),
+    flexBasis: 'fit-content',
+    height: theme.spacing(5.25),
   },
 }))
 
@@ -52,7 +76,7 @@ export default function DonorsAndDonations({
 }) {
   const { t, i18n } = useTranslation()
   const [all, setAll] = useState<boolean>(false)
-  const shownDonationsNumber = 5
+  const shownDonationsNumber = 3
   const donationsToShow = useMemo(() => {
     if (all) {
       return donations
@@ -66,16 +90,16 @@ export default function DonorsAndDonations({
         {donationsToShow && donationsToShow.length !== 0 ? (
           donationsToShow.map(({ person, amount, createdAt, currency }, key) => (
             <Grid key={key} className={classes.donationItemWrapper}>
-              <AccountCircleIcon fontSize="large" color="disabled" />
+              <AccountCircleIcon color="disabled" className={classes.donatorAvatar} />
               <Grid>
-                <Typography>
+                <Typography className={classes.donatorName}>
                   {person
                     ? `${person.firstName} ${person.lastName}`
                     : t('campaigns:donations.anonymous')}
                 </Typography>
                 <Grid className={classes.donationQuantityAndTimeWrapper}>
                   <Typography>{moneyPublic(amount, currency)}</Typography>
-                  <FiberManualRecordIcon className={classes.separatorIcon} />
+                  <span className={classes.separatorIcon}>|</span>
                   <Typography>
                     {formatDistanceStrict(parseISO(createdAt), new Date(), {
                       locale: i18n.language == 'bg' ? bg : enUS,
@@ -92,13 +116,6 @@ export default function DonorsAndDonations({
           </Typography>
         )}
       </Grid>
-      <Grid>
-        {donations && donations.length > shownDonationsNumber && (
-          <Button onClick={() => setAll((prev) => !prev)} variant="outlined">
-            {all ? t('campaigns:cta.see-less') : t('campaigns:cta.see-all')}
-          </Button>
-        )}
-      </Grid>
     </Root>
   )
 }