UI changes

e2e/pages/web-pages/campaigns/campaigns.page.ts

@@ -10,18 +10,18 @@ export class CampaignsPage extends HomePage {
   }
 
   private readonly donationGrid = '.InlineDonation-inlineDonationWrapper'
-  private readonly donationSupportButton = this.donationGrid + ' a button'
+  private readonly donationSupportButton = this.donationGrid + ' a.InlineDonation-donateButton'
   private readonly filterButtonsCommonSelector = 'ul button.CampaignFilter-filterButtons'
   // private readonly campaignContainerItem = ".MuiGrid-container .MuiGrid-item";
   private readonly cardActions = '.MuiCardActions-root'
-  private readonly cardActionButtons = this.cardActions + ' button'
+  private readonly cardActionButtons = this.cardActions + ' a'
   // Main headings
   private readonly bgMainCampaignsHeading = bgLocalizationCampaigns.campaigns
   private readonly enMainCampaignsHeading = enLocalizationCampaigns.campaigns
   private readonly bgSupportCauseTodayHeading = bgLocalizationCampaigns.cta['support-cause-today']
   private readonly enSupportCauseTodayHeading = enLocalizationCampaigns.cta['support-cause-today']
-  private readonly bgSupportNowActionButtonText = bgLocalizationCampaigns.cta['support']
-  private readonly enSupportNowActionButtonText = enLocalizationCampaigns.cta['support']
+  private readonly bgLearnMoreActionButtonText = bgLocalizationCampaigns.cta['learn-more']
+  private readonly enLearnMoreActionButtonText = enLocalizationCampaigns.cta['learn-more']
 
   // Summary donors and wishes sections
   private readonly bgDonorsButtonText = bgLocalizationCampaigns.campaign['donors']
@@ -105,9 +105,9 @@ export class CampaignsPage extends HomePage {
   ): Promise<void> {
     let supportButtonText = ''
     if (language === LanguagesEnum.BG) {
-      supportButtonText = this.bgSupportNowActionButtonText
+      supportButtonText = this.bgLearnMoreActionButtonText
     } else if (language === LanguagesEnum.EN) {
-      supportButtonText = this.enSupportNowActionButtonText
+      supportButtonText = this.enLearnMoreActionButtonText
     } else {
       throw new Error('Invalid language!')
     }

e2e/pages/web-pages/header.page.ts

@@ -11,7 +11,7 @@ export class HeaderPage extends BasePage {
   private readonly muiToolbarRootSelector = '.MuiToolbar-root'
   private readonly headerLogo = this.muiToolbarRootSelector + ' .PodkrepiLogo-letters'
   private readonly toolbarCommonButtonsSelector = this.muiToolbarRootSelector + ' button'
-  private readonly toolbarAnchorButtonSelector = this.muiToolbarRootSelector + ' a .MuiButton-root'
+  private readonly toolbarAnchorButtonSelector = this.muiToolbarRootSelector + ' a.MuiButton-root'
   private readonly headerSubmenuLinks = '.MuiMenu-list a span'
 
   // Values from the localization json file

e2e/tests/smoke/smoke-campaigns.spec.ts

@@ -49,8 +49,8 @@ test.describe('Campaigns page smoke tests - BG language version', async () => {
     ).toEqual(12)
   })
 
-  test('Support Now action button navigates to the Donation page for particular campaign', async () => {
+  test('Learn more button navigates to the page for particular campaign', async () => {
     await campaignsPage.clickCampaignCardButtonByIndex(0)
-    await donationPage.checkPageUrlByRegExp()
+    await campaignsPage.checkPageUrlByRegExp()
   })
 })

package.json

@@ -34,7 +34,7 @@
     "@mui/icons-material": "^6.1.1",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^6.1.1",
-    "@mui/material-nextjs": "^6.1.1",
+    "@mui/material-nextjs": "^7.2.0",
     "@mui/styles": "^5.15.19",
     "@mui/x-data-grid": "^6.16.1",
     "@mui/x-date-pickers": "^6.16.1",

public/locales/bg/campaigns.json

@@ -77,6 +77,7 @@
     "see-all": "Вижте всички",
     "see-less": "Вижте по-малко",
     "see-more": "Вижте повече",
+    "learn-more": "Научете повече",
     "donor": "Дарител",
     "add": "Добави",
     "confirm": "Потвърди",
@@ -191,6 +192,10 @@
     "complete": "Успешнa",
     "deleted": "Изтрита"
   },
+  "campaign-progress": {
+    "aria-label": "Прогрес на кампанията: {{state}} - събрани {{raised}} от цел {{target}}",
+    "aria-valuetext": "{{percentage}}% завършено - събрани {{raised}} от цел {{target}}"
+  },
   "campaignTypesFields": {
     "medical": "Лечение и рехабилитация",
     "events": "Култура",
@@ -207,12 +212,12 @@
   "campaign-details-report": {
     "amount-collected": "Събрана сума",
     "available": "Налични",
-    "available-tooltip":"Средства налични по сметката на Podkrepi.bg",
+    "available-tooltip": "Средства налични по сметката на Podkrepi.bg",
     "guaranteed": "Гарантирани",
-    "guaranteed-tooltip":"Дарения от служители или клиенти на компании, които имат вътрешни дарителски инициативи с партньорска интеграция към Подкрепи.бг. При такова дарение сумите се отразяват веднага в платформата като \" гарантирани\" от компанията и се превеждат веднъж в месеца като консолидирана сума към Подкрепи.бг с цел по-лесно управление.",
+    "guaranteed-tooltip": "Дарения от служители или клиенти на компании, които имат вътрешни дарителски инициативи с партньорска интеграция към Подкрепи.бг. При такова дарение сумите се отразяват веднага в платформата като \" гарантирани\" от компанията и се превеждат веднъж в месеца като консолидирана сума към Подкрепи.бг с цел по-лесно управление.",
     "transferred": "Преведени",
-    "transferred-tooltip":"Средства преведени от сметката на Podkrepi.bg към организатора на кампанията",
+    "transferred-tooltip": "Средства преведени от сметката на Podkrepi.bg към организатора на кампанията",
     "accounted": "Отчетени",
-    "accounted-tooltip":"Отчетени разходи"
+    "accounted-tooltip": "Отчетени разходи"
   }
 }

public/locales/en/campaigns.json

@@ -77,6 +77,7 @@
     "see-all": "See all",
     "see-less": "See less",
     "see-more": "See more",
+    "learn-more": "Learn more",
     "donor": "Donor",
     "add": "Add",
     "confirm": "Confirm",
@@ -191,6 +192,10 @@
     "blocked": "Suspended",
     "deleted": "Deleted"
   },
+  "campaign-progress": {
+    "aria-label": "Campaign progress: {{state}} - {{raised}} raised of {{target}} target",
+    "aria-valuetext": "{{percentage}}% complete - {{raised}} raised of {{target}} target"
+  },
   "campaignTypesFields": {
     "medical": "Treatment and rehabilitation",
     "events": "Culture",
@@ -207,12 +212,12 @@
   "campaign-details-report": {
     "amount-collected": "Amount Collected",
     "available": "Аvailable",
-    "available-tooltip":"Available balance in Podkrepi.bg account",
+    "available-tooltip": "Available balance in Podkrepi.bg account",
     "guaranteed": "Guaranteed",
-    "guaranteed-tooltip":"Donations from employees or customers via partner-integrated corporate giving initiatives. These are marked as \"guaranteed\" by the company and transferred monthly as a consolidated amount to Podkrepi.bg for easier management.",
+    "guaranteed-tooltip": "Donations from employees or customers via partner-integrated corporate giving initiatives. These are marked as \"guaranteed\" by the company and transferred monthly as a consolidated amount to Podkrepi.bg for easier management.",
     "transferred": "Transferred",
-    "transferred-tooltip":"Disbursed funds to campaign organizer",
+    "transferred-tooltip": "Disbursed funds to campaign organizer",
     "accounted": "Accounted",
-    "accounted-tooltip":"Recorded expenses"
+    "accounted-tooltip": "Recorded expenses"
   }
 }

src/common/theme.ts

@@ -202,7 +202,14 @@ export const themeOptions: ThemeOptions = {
       fontFamily: montserrat.style.fontFamily,
     },
     h4: { fontFamily: montserrat.style.fontFamily },
-    h5: { fontFamily: montserrat.style.fontFamily },
+    h5: {
+      fontFamily: montserrat.style.fontFamily,
+      fontWeight: 500,
+      fontSize: '1rem', // 16px
+      lineHeight: 1.33, // 133%
+      letterSpacing: '0px',
+      verticalAlign: 'middle',
+    },
 
     body1: {
       fontSize: '0.875rem',

src/components/client/campaigns/CampaignCard/CampaignCard.tsx

@@ -1,7 +1,7 @@
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { Box } from '@mui/material'
+import { Box, CardActions, Grid2, Typography } from '@mui/material'
 
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
@@ -15,7 +15,7 @@ import { CampaignState, canAcceptDonationState } from '../helpers/campaign.enums
 import { Root } from './CampaignCard.styled'
 import {
   CampaignTitle,
-  DonateButton,
+  LearnMoreButton,
   StyledCardActions,
   StyledContent,
   Sum,
@@ -24,6 +24,13 @@ import {
 } from '../../index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled'
 import Image from 'next/image'
 
+import ArrowCircleRightOutlinedIcon from '@mui/icons-material/ArrowCircleRightOutlined'
+import TaskAltIcon from '@mui/icons-material/TaskAlt'
+import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline'
+import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'
+import BackHandOutlinedIcon from '@mui/icons-material/BackHandOutlined'
+import TonalityOutlinedIcon from '@mui/icons-material/TonalityOutlined'
+
 type Props = { campaign: CampaignResponse; index: number }
 
 export default function ActiveCampaignCard({ campaign, index }: Props) {
@@ -45,6 +52,15 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
   const targetAmount = moneyPublic(campaign.targetAmount)
   const percentage = (reached / target) * 100
 
+  const stateIconMap = {
+    [CampaignState.active]: <ArrowCircleRightOutlinedIcon />,
+    [CampaignState.partially_financed]: <TonalityOutlinedIcon />,
+    [CampaignState.paused]: <PauseCircleOutlineIcon />,
+    [CampaignState.complete]: <TaskAltIcon />,
+    [CampaignState.suspended]: <BackHandOutlinedIcon />,
+    [CampaignState.blocked]: <CancelOutlinedIcon />,
+  }
+
   return (
     <Root data-testid={`campaign-card-${index}`}>
       <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
@@ -71,6 +87,26 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
           ''
         )}
         <StyledContent>
+          <Grid2 className="cardcontent--state">
+            <Typography
+              variant="h5"
+              component={'p'}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                fontSize: theme.typography.pxToRem(16),
+              }}>
+              {t('status')}:{' '}
+              <Box
+                component="span"
+                sx={{ fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 1 }}>
+                {t(`campaign-status.${campaignState}`)}
+                {stateIconMap[campaignState as keyof typeof stateIconMap]}
+              </Box>
+            </Typography>
+          </Grid2>
+          <CampaignProgress state={campaignState} raised={reached} target={target} />
           <SumWrapper>
             <Sum>
               <SumNumber>
@@ -87,21 +123,24 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
               </SumNumber>
             </Sum>
           </SumWrapper>
-          <CampaignProgress campaignId={id} raised={reached} target={target} />
           <CampaignTitle>{title}</CampaignTitle>
         </StyledContent>
       </Link>
-      <StyledCardActions disableSpacing>
-        {(campaignState === CampaignState.active ||
-          (canAcceptDonationState.has(campaignState) && allowDonationOnComplete)) && (
-          <DonateButton
-            href={routes.campaigns.oneTimeDonation(slug)}
-            variant="contained"
-            color="secondary">
-            {t('cta.support')}
-          </DonateButton>
-        )}
-      </StyledCardActions>
+      <CardActions
+        disableSpacing
+        sx={{
+          position: 'absolute',
+          bottom: theme.spacing(20.37),
+          right: theme.spacing(0.75),
+          padding: 0,
+        }}>
+        <LearnMoreButton
+          href={routes.campaigns.viewCampaignBySlug(slug)}
+          variant="contained"
+          color="secondary">
+          {t('cta.learn-more')}
+        </LearnMoreButton>
+      </CardActions>
     </Root>
   )
 }