Adding Campaign Page Chips to Sections

public/locales/bg/campaigns.json

@@ -97,7 +97,7 @@
       "classic": "Предишен"
     },
     "amount": "Необходима сума",
-    "type": "Тип кампания",
+    "type": "Тип кампания:",
     "state": "Статус",
     "from": "от",
     "noCommissionInfo": "Подкрепи.бг работи с 0% комисиона. Заплащат се единствено банкови такси, които изрично се упоменават преди да направите дарението си.",
@@ -120,6 +120,7 @@
     "financial-report": "Финансови отчети",
     "report-campaign": "Докладвайте кампанията",
     "feedback": "Обратна връзка",
+    "altImageText": "Снимка на",
     "images": {
       "add": "Добави снимки",
       "add-more": "Добави още",
@@ -172,7 +173,17 @@
     "end-date": "Крайна дата:",
     "indefinite": "Безсрочна",
     "tag": "Таг:",
-    "date": "Дата:"
+    "date": "Дата:",
+    "chipLabels": {
+      "categories": {
+        "aboutCampaign": "За кампанията",
+        "transparency": "Прозрачност"
+      },
+      "news": "Новини",
+      "reports": "Отчети",
+      "experts": "Експертен съвет",
+      "guarantor": "Гарант"
+    }
   },
   "info-graphics": {
     "donation-title": "100% от дарението отива при нуждаещите се",

public/locales/en/campaigns.json

@@ -17,7 +17,7 @@
   "coordinator": "Coordinator",
   "organizer": "Organizer",
   "beneficiary": "Beneficiary",
-  "campaignType": "Campaign type",
+  "campaignType": "Campaign type:",
   "description": "Description",
   "targetAmount": "Target amount",
   "donationsAmount": "Donations amount",
@@ -103,6 +103,8 @@
     "financial-report": "Financial report",
     "report-campaign": "Report the campaign",
     "feedback": "Feedback",
+    "altImageText": "Image of",
+
     "images": {
       "add": "Add image",
       "add-more": "Add more",
@@ -158,7 +160,17 @@
     "start-date": "Start date:",
     "end-date": "End date:",
     "tag": "Tag:",
-    "date": "Date:"
+    "date": "Date:",
+    "chipLabels": {
+      "categories": {
+        "aboutCampaign": "About campaign",
+        "transparency": "Transparency"
+      },
+      "news": "News",
+      "reports": "Reports",
+      "experts": "Our expert members",
+      "guarantor": "Guarantor"
+    }
   },
   "info-graphics": {
     "donation-title": "100% of the donation goes to those in need",

src/components/client/campaigns/CampaignDetails.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 
 import { CampaignResponse } from 'gql/campaigns'
 
@@ -26,6 +27,7 @@ import { routes } from 'common/routes'
 import { useCanEditCampaign } from 'common/hooks/campaigns'
 import { moneyPublic } from 'common/util/money'
 import ReceiptLongIcon from '@mui/icons-material/ReceiptLong'
+import CampaignDetailsChip from './CampaignDetailsChip'
 
 const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
 const CampaignNewsSection = dynamic(() => import('./CampaignNewsSection'), { ssr: false })
@@ -101,6 +103,27 @@ export default function CampaignDetails({ campaign }: Props) {
   const canEditCampaign = useCanEditCampaign(campaign.slug)
   const { data: expensesList } = useCampaignApprovedExpensesList(campaign.slug)
   const totalExpenses = expensesList?.reduce((acc, expense) => acc + expense.amount, 0)
+  const router = useRouter()
+
+  const chipLabelsCampaign = {
+    experts: t('campaigns:campaign.chipLabels.experts'),
+    guarantor: t('campaigns:campaign.chipLabels.guarantor'),
+  }
+  const chipLabelsTransparency = {
+    news: t('campaigns:campaign.chipLabels.news'),
+    reports: t('campaigns:campaign.chipLabels.reports'),
+  }
+
+  const scrollToSection = (sectionId: string) => {
+    const target = document.getElementById(sectionId)
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
+  const redirectToExperts = () => {
+    router.push('https://podkrepi.bg/blog/ekspertni-saveti')
+  }
 
   return (
     <StyledGrid item xs={12} md={8}>
@@ -112,21 +135,44 @@ export default function CampaignDetails({ campaign }: Props) {
         showExpensesLink={(expensesList && expensesList?.length > 0) || canEditCampaign}
       />
       <Grid container spacing={8}>
-        <Grid item xs={12}>
-          <ReactQuill readOnly theme="bubble" value={campaign.description} />
+        <Grid container item xs={12}>
+          <Grid item xs={12} display="flex" alignItems="center" marginBottom="8px">
+            <Typography component="p" marginRight="10px">
+              {t('campaigns:campaign.chipLabels.categories.aboutCampaign')}
+            </Typography>
+            {Object.entries(chipLabelsCampaign).map(([id, label]) => (
+              <CampaignDetailsChip
+                key={id}
+                chip={label}
+                onClick={id === 'experts' ? redirectToExperts : () => scrollToSection(id)}
+              />
+            ))}
+          </Grid>
+          <Grid item xs={12} display="flex" alignItems="center">
+            <Typography component="p" marginRight="10px">
+              {t('campaigns:campaign.chipLabels.categories.transparency')}
+            </Typography>
+            {Object.entries(chipLabelsTransparency).map(([id, label]) => (
+              <CampaignDetailsChip key={id} chip={label} onClick={() => scrollToSection(id)} />
+            ))}
+          </Grid>
+          <Grid item xs={12}>
+            <ReactQuill readOnly theme="bubble" value={campaign.description} />
+          </Grid>
         </Grid>
         <Grid item xs={12}>
           <CampaignSlider sliderImages={sliderImages} />
         </Grid>
         <Grid item xs={12}>
           <Divider />
         </Grid>
+
         <Grid item xs={12}>
           <CampaignInfoOperator campaign={campaign} />
         </Grid>
         <CampaignInfoGraphics />
         {expensesList?.length || canEditCampaign ? (
-          <Grid item xs={12} id="expenses">
+          <Grid item xs={12} id="reports">
             <Grid item xs={12}>
               <Typography variant="h4" component="h4" my={4}>
                 {t('campaigns:campaign.financial-report')} <Assessment />

src/components/client/campaigns/CampaignDetailsChip.tsx

@@ -0,0 +1,13 @@
+import { Chip } from '@mui/material'
+
+interface CampaingDetailsChipProps {
+  chip: string
+  onClick: () => void
+}
+
+const CampaignDetailsChip: React.FC<CampaingDetailsChipProps> = ({ chip, onClick }) => {
+  return (
+    <Chip label={chip} sx={{ marginX: '2px' }} onClick={onClick} color="primary" size="small" />
+  )
+}
+export default CampaignDetailsChip

src/components/client/campaigns/CampaignInfo.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+
+import { useTranslation } from 'next-i18next'
+
+import { CampaignResponse } from 'gql/campaigns'
+
+import { bg, enUS } from 'date-fns/locale'
+
+import { Button, Grid, Typography, Divider } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import { getExactDate } from 'common/util/date'
+import CampaignInfoOrganizer from './CampaignInfoOrganizer'
+import { Assessment } from '@mui/icons-material'
+import CampaignInfoBeneficiary from './CampaignInfoBeneficiary'
+
+const PREFIX = 'CampaignInfo'
+
+const classes = {
+  personWrapper: `${PREFIX}-personWrapper`,
+  infoBlockWrapper: `${PREFIX}-infoBlockWrapper`,
+  infoDetailsWrapper: `${PREFIX}-infoDetailsWrapper`,
+  campaignTextWithIcon: `${PREFIX}-campaignTextWithIcon`,
+  divider: `${PREFIX}-divider`,
+}
+
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  [`& .${classes.infoBlockWrapper}`]: {
+    flexWrap: 'wrap',
+    flexDirection: 'column',
+    rowSpacing: theme.spacing(5),
+    gap: theme.spacing(2),
+
+    [theme.breakpoints.up('lg')]: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'initial',
+      gap: 0,
+    },
+  },
+
+  [`& .${classes.divider}`]: {
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+    margin: 0,
+
+    [theme.breakpoints.up('lg')]: {
+      borderRightWidth: 1,
+      margin: theme.spacing(0, 5, 0, 0),
+    },
+  },
+
+  [`& .${classes.infoDetailsWrapper}`]: {
+    flexDirection: 'column',
+  },
+
+  [`& .${classes.campaignTextWithIcon}`]: {
+    flexWrap: 'wrap',
+    fontSize: theme.typography.pxToRem(11),
+    lineHeight: '150%',
+    fontWeight: 700,
+  },
+}))
+
+type Props = {
+  campaign: CampaignResponse
+  showExpensesLink: boolean
+}
+
+export default function CampaignInfo({ campaign, showExpensesLink }: Props) {
+  const { t, i18n } = useTranslation()
+  const locale = i18n.language == 'bg' ? bg : enUS
+
+  return (
+    <StyledGrid mb={5}>
+      <Grid container spacing={2} alignItems="center" marginBottom="15px">
+        <Grid item xs={12} md={3}>
+          <Typography
+            variant="subtitle2"
+            component="span"
+            fontWeight={700}
+            className={classes.campaignTextWithIcon}>
+            {t('campaigns:campaign.type')} {campaign.campaignType.name}
+          </Typography>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Typography variant="subtitle2" component="p" className={classes.campaignTextWithIcon}>
+            {t('campaigns:campaign.start-date')} {getExactDate(campaign.startDate, locale)}
+          </Typography>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Typography variant="subtitle2" component="p" className={classes.campaignTextWithIcon}>
+            {t('campaigns:campaign.end-date')}{' '}
+            {campaign.endDate
+              ? getExactDate(campaign.endDate, locale)
+              : t('campaigns:campaign.indefinite')}
+          </Typography>
+        </Grid>
+        <Grid item xs={12} md={3}>
+          <Typography variant="subtitle2" component="p" className={classes.campaignTextWithIcon}>
+            {t('campaigns:campaign.status')} {t(`campaigns:campaign-status.${campaign.state}`)}
+          </Typography>
+        </Grid>
+      </Grid>
+      <Grid container item xs={12} className={classes.infoBlockWrapper}>
+        <Grid item container xs={12} lg={5} spacing={0} className={classes.infoDetailsWrapper}>
+          <Grid item>
+            <CampaignInfoBeneficiary campaign={campaign} />
+          </Grid>
+          {/* {showExpensesLink && (
+            <Grid item>
+              <Button
+                startIcon={<Assessment />}
+                href={'#expenses'}
+                className={classes.campaignTextWithIcon}>
+                {t('campaigns:campaign.financial-report')}
+              </Button>
+            </Grid>
+          )} */}
+        </Grid>
+        <Divider className={classes.divider} />
+        <Grid item xs={12} lg={7}>
+          <CampaignInfoOrganizer campaign={campaign} />
+        </Grid>
+      </Grid>
+    </StyledGrid>
+  )
+}