Update cards on campaigns page - initial changes

podkrepi-bg · Jul 27, 2023 · 34e0074 · 34e0074
1 parent d621e73
commit 34e0074
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 0 deletions.
diff --git a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
@@ -1,6 +1,7 @@
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
+<<<<<<< HEAD
 import { CardActionArea, CardMedia } from '@mui/material'
 
 import { routes } from 'common/routes'
@@ -10,6 +11,16 @@ import { moneyPublic } from 'common/util/money'
 import CampaignProgress from 'components/client/campaigns/CampaignProgress'
 import { CampaignState } from '../helpers/campaign.enums'
 
+=======
+import { Box, CardMedia } from '@mui/material'
+
+import Link from 'components/common/Link'
+import CampaignProgress from 'components/client/campaigns/CampaignProgress'
+import theme from 'common/theme'
+import { routes } from 'common/routes'
+import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
+import { moneyPublic } from 'common/util/money'
+>>>>>>> dd332ce9 (Update cards on campaigns page - initial changes)
 import {
   CampaignTitle,
   DonateButton,
@@ -25,6 +36,7 @@ type Props = { campaign: CampaignResponse; index: number }
 
 export default function ActiveCampaignCard({ campaign, index }: Props) {
   const { t } = useTranslation('campaigns')
+<<<<<<< HEAD
   const {
     id,
     slug,
@@ -34,13 +46,17 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
     state: campaignState,
     allowDonationOnComplete,
   } = campaign
+=======
+  const { id, slug, title, summary, targetAmount: target } = campaign
+>>>>>>> dd332ce9 (Update cards on campaigns page - initial changes)
   const campaignImagesUrl = campaignListPictureUrl(campaign)
 
   const reachedAmount = moneyPublic(campaign.summary.reachedAmount)
   const targetAmount = moneyPublic(campaign.targetAmount)
   const reached = summary ? summary.reachedAmount : 0
 
   return (
+<<<<<<< HEAD
     <Root data-testid={`campaign-card-${index}`}>
       <CardActionArea
         href={routes.campaigns.viewCampaignBySlug(slug)}
@@ -95,5 +111,60 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
         </DonateButton>
       </StyledCardActions>
     </Root>
+=======
+    <>
+      <Root data-testid={`completed-campaign-${index}`}>
+        <Link href={routes.campaigns.viewCampaignBySlug(slug)} sx={{ position: 'relative' }}>
+          <CardMedia
+            component="img"
+            height="100%"
+            image={campaignImagesUrl}
+            alt={title}
+            sx={{
+              maxHeight: theme.spacing(42.5),
+
+              [theme.breakpoints.up('lg')]: {
+                aspectRatio: '2',
+                height: theme.spacing(22.3),
+                maxHeight: 'inherit',
+              },
+
+              [theme.breakpoints.up(1430)]: {
+                height: theme.spacing(27.9),
+              },
+            }}
+          />
+          <StyledContent>
+            <SumWrapper>
+              <Sum>
+                <SumNumber>
+                  {i18n.language === 'bg'
+                    ? reachedAmount.split(',')[0] + ' лв.'
+                    : reachedAmount.split('.')[0]}
+                </SumNumber>
+              </Sum>
+              <Sum>
+                <SumNumber>
+                  {i18n.language === 'bg'
+                    ? targetAmount.split(',')[0] + ' лв.'
+                    : targetAmount.split('.')[0]}
+                </SumNumber>
+              </Sum>
+            </SumWrapper>
+            <CampaignProgress campaignId={id} raised={reached} target={target} />
+            <CampaignTitle>{title}</CampaignTitle>
+          </StyledContent>
+        </Link>
+        <StyledCardActions disableSpacing>
+          <DonateButton
+            href={routes.campaigns.oneTimeDonation(slug)}
+            variant="contained"
+            color="secondary">
+            {t('cta.support')}
+          </DonateButton>
+        </StyledCardActions>
+      </Root>
+    </>
+>>>>>>> dd332ce9 (Update cards on campaigns page - initial changes)
   )
 }
diff --git a/src/components/client/campaigns/CampaignsList.tsx b/src/components/client/campaigns/CampaignsList.tsx
@@ -7,7 +7,25 @@ import { Box, Button, Grid } from '@mui/material'
 
 import theme from 'common/theme'
 import useMobile from 'common/hooks/useMobile'
+<<<<<<< HEAD
 import CampaignCard from './CampaignCard/CampaignCard'
+=======
+
+import CampaignCard from './CampaignCard/CampaignCard'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'next-i18next'
+
+const cardAlignment = (index: number, array: CampaignResponse[]) => {
+  if (index === array.length - 1 && array.length % 2 === 1) {
+    return 'center'
+  }
+  if (index % 2 === 0) {
+    return 'right'
+  } else {
+    return 'left'
+  }
+}
+>>>>>>> dd332ce9 (Update cards on campaigns page - initial changes)
 
 type Props = { campaignToShow: CampaignResponse[] }
 
@@ -69,13 +87,21 @@ export default function CampaignsList({ campaignToShow }: Props) {
         <Box sx={{ my: 10 }}>
           {mobile ? (
             <Image
+<<<<<<< HEAD
               alt="Information artboard mobile"
+=======
+              alt="Informatino artboard mobile"
+>>>>>>> dd332ce9 (Update cards on campaigns page - initial changes)
               src="/img/ArtboardMobile.svg"
               width={300}
               height={300}
             />
           ) : (
+<<<<<<< HEAD
             <Image alt="Information artboard" src="/img/Artboard.png" width={813} height={358} />
+=======
+            <Image alt="Informatino artboard" src="/img/Artboard.png" width={813} height={358} />
+>>>>>>> dd332ce9 (Update cards on campaigns page - initial changes)
           )}
         </Box>
       </Grid>