Add Beneficiary to campaign details (#1563)

* Add beneficiary to campaign details page - inital changes

* Update beneficiary info

* Update organizer info

* Update responsive styles

* Update Campaign info status

* Update responsive styles

* Rearrange components

* Update beneficiary and organizer wrapper

* Update campaign info status

---------

Co-authored-by: ani-kalpachka <[email protected]>

public/locales/bg/campaigns.json

@@ -144,6 +144,7 @@
     },
     "beneficiary": {
       "name": "Бенефициент",
+      "label": "Бенефициент:",
       "add": "Добави бенефициент",
       "create": "Създай бенефициент"
     },
@@ -157,6 +158,7 @@
       "add": "Добавете организатор",
       "create": "Създайте организатор"
     },
+    "image-of": "Изображение на",
     "podkrepi-bg-operator": "Подкрепи.бг Оператор:",
     "have-a-question": "Имате въпрос?",
     "btn-connect": "Пишете ни",

public/locales/en/campaigns.json

@@ -131,6 +131,7 @@
     },
     "beneficiary": {
       "name": "Beneficiary",
+      "label": "Beneficiary:",
       "add": "Add beneficiary",
       "create": "Create beneficiary"
     },
@@ -144,6 +145,7 @@
       "add": "Add organizer",
       "create": "Create organizer"
     },
+    "image-of": "Image of",
     "podkrepi-bg-operator": "Podkrepi.bg Operator:",
     "have-a-question": "Have a question?",
     "btn-connect": "Write to us",

src/components/client/campaigns/CampaignDetails.tsx

@@ -13,7 +13,7 @@ import { styled } from '@mui/material/styles'
 
 import DonationWishes from './DonationWishes'
 import CampaignSlider from './CampaignSlider'
-import CampaignInfo from './CampaignInfo'
+import CampaignInfo from './CampaignInfo/CampaignInfo'
 import CampaignInfoGraphics from './CampaignInfoGraphics'
 import CampaignInfoOperator from './CampaignInfoOperator'
 import LinkButton from 'components/common/LinkButton'

src/components/client/campaigns/CampaignInfo/CampaignInfo.styled.tsx

@@ -0,0 +1,83 @@
+import Image from 'next/image'
+
+import { styled } from '@mui/material/styles'
+import { Button, Stack, Typography } from '@mui/material'
+
+import theme from 'common/theme'
+
+export const BeneficiaryOrganizerWrapper = styled(Stack)(() => ({
+  marginBottom: theme.spacing(5),
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  gap: theme.spacing(5),
+
+  [theme.breakpoints.up('md')]: {
+    flexDirection: 'row',
+  },
+}))
+
+export const BeneficiaryOrganizerRoot = styled(Stack)(() => ({
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  gap: theme.spacing(3),
+  width: '100%',
+
+  [theme.breakpoints.up('md')]: {
+    flexDirection: 'row',
+    width: '50%',
+  },
+}))
+
+export const Avatar = styled(Image)(() => ({
+  borderRadius: '50%',
+}))
+
+export const Label = styled(Typography)(() => ({
+  fontWeight: 600,
+  fontSize: theme.spacing(1.6),
+  margin: 0,
+}))
+
+export const EmailButton = styled(Button)(() => ({
+  color: theme.palette.primary.main,
+  textDecoration: 'underline',
+  fontSize: theme.spacing(1.75),
+  padding: 0,
+  paddingLeft: 2,
+
+  '&:hover': {
+    backgroundColor: 'unset',
+    textDecoration: 'underline',
+  },
+}))
+
+export const InfoStatusWrapper = styled(Stack)(() => ({
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  marginBottom: theme.spacing(6),
+
+  [theme.breakpoints.up('md')]: {
+    flexDirection: 'row',
+    gap: theme.spacing(5),
+  },
+}))
+
+export const RowWrapper = styled(Stack)(() => ({
+  flexDirection: 'row',
+}))
+
+export const StatusLabel = styled(Typography)(() => ({
+  fontSize: theme.typography.pxToRem(14),
+  fontWeight: 700,
+  marginRight: theme.spacing(1),
+}))
+
+export const StatusText = styled('span')(() => ({
+  fontSize: theme.typography.pxToRem(14),
+}))
+
+export const ExpensesButton = styled(Button)(() => ({
+  fontSize: theme.typography.pxToRem(14),
+  justifyContent: 'left',
+  marginBottom: theme.spacing(1),
+}))

src/components/client/campaigns/CampaignInfo/CampaignInfo.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { CampaignResponse } from 'gql/campaigns'
+
+import { Grid } from '@mui/material'
+
+import CampaignInfoBeneficiary from './CampaignInfoBeneficiary'
+import CampaignInfoOrganizer from './CampaignInfoOrganizer'
+import CampaignInfoStatus from './CampaignInfoStatus'
+import { BeneficiaryOrganizerWrapper } from './CampaignInfo.styled'
+
+type Props = {
+  campaign: CampaignResponse
+  showExpensesLink: boolean
+}
+
+export default function CampaignInfo({ campaign }: Props) {
+  return (
+    <Grid mb={5}>
+      <CampaignInfoStatus showExpensesLink campaign={campaign} />
+      <BeneficiaryOrganizerWrapper>
+        <CampaignInfoBeneficiary campaign={campaign} />
+        <CampaignInfoOrganizer campaign={campaign} />
+      </BeneficiaryOrganizerWrapper>
+    </Grid>
+  )
+}

src/components/client/campaigns/CampaignInfo/CampaignInfoBeneficiary.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { CampaignResponse } from 'gql/campaigns'
+import { useTranslation } from 'next-i18next'
+
+import { Stack, Typography } from '@mui/material'
+
+import { beneficiaryCampaignPictureUrl } from 'common/util/campaignImageUrls'
+import { BeneficiaryType } from 'components/admin/beneficiary/BeneficiaryTypes'
+
+import { Avatar, BeneficiaryOrganizerRoot, Label } from './CampaignInfo.styled'
+
+type Props = {
+  campaign: CampaignResponse
+}
+
+export default function CampaignInfoBeneficiary({ campaign }: Props) {
+  const beneficiaryAvatarSource = beneficiaryCampaignPictureUrl(campaign)
+  const { t } = useTranslation('campaigns')
+
+  return (
+    <BeneficiaryOrganizerRoot>
+      <Stack direction="column">
+        <Label variant="body2">{t('campaign.beneficiary.label')}</Label>
+        <Typography variant="subtitle2" component="p">
+          {campaign.beneficiary.type === BeneficiaryType.individual
+            ? campaign.beneficiary.person?.firstName + ' ' + campaign.beneficiary.person?.lastName
+            : campaign.beneficiary.company.companyName}
+        </Typography>
+      </Stack>
+      <Avatar
+        src={beneficiaryAvatarSource}
+        alt={`${t('campaign.image-of')} ${
+          campaign.beneficiary.type === BeneficiaryType.individual
+            ? campaign.beneficiary.person?.firstName + ' ' + campaign.beneficiary.person?.lastName
+            : campaign.beneficiary.company.companyName
+        }`}
+        width={100}
+        height={100}
+      />
+    </BeneficiaryOrganizerRoot>
+  )
+}

src/components/client/campaigns/CampaignInfo/CampaignInfoOrganizer.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { CampaignResponse } from 'gql/campaigns'
+import { useTranslation } from 'next-i18next'
+
+import { Grid, Stack, Typography } from '@mui/material'
+import EmailIcon from '@mui/icons-material/Email'
+
+import { organizerCampaignPictureUrl } from 'common/util/campaignImageUrls'
+
+import { Avatar, BeneficiaryOrganizerRoot, EmailButton, Label } from './CampaignInfo.styled'
+
+type Props = {
+  campaign: CampaignResponse
+}
+
+export default function CampaignInfoOrganizer({ campaign }: Props) {
+  const { t } = useTranslation()
+  const organizerAvatarSource = organizerCampaignPictureUrl(campaign)
+
+  return (
+    <BeneficiaryOrganizerRoot>
+      <Grid>
+        <Label variant="subtitle2">{t('campaigns:campaign.organizer.name')}</Label>
+        <Typography variant="subtitle2" component="p">
+          {campaign.organizer?.person.firstName || ''} {campaign.organizer?.person.lastName || ''}
+        </Typography>
+        <EmailButton
+          startIcon={<EmailIcon color="action" />}
+          href={
+            'mailto:' +
+            campaign?.organizer?.person.email +
+            '?subject=Question about: ' +
+            campaign.title
+          }>
+          {campaign?.organizer?.person.email}
+        </EmailButton>
+      </Grid>
+      <Avatar
+        src={organizerAvatarSource}
+        alt={`${t('campaign.image-of')}  ${campaign.organizer?.person.firstName} ${
+          campaign.organizer?.person.lastName
+        }`}
+        width={100}
+        height={100}
+      />
+    </BeneficiaryOrganizerRoot>
+  )
+}