Merge branch 'master' into feature-campaign-profile-page

manifests/overlays/production/kustomization.yaml

@@ -7,12 +7,12 @@ resources:
   - ../../base
 
 patches:
-  - path: secrets-web.local.yaml
+#  - path: secrets-web.local.yaml
   - path: keycloak-config-web.patch.yaml
   - path: deployment.patch.yaml
 
 images:
   - name: ghcr.io/podkrepi-bg/frontend
-    newTag: v0.9.8
+    newTag: v0.9.9
   - name: ghcr.io/podkrepi-bg/frontend/maintenance
     newTag: master

public/locales/bg/one-time-donation.json

@@ -14,7 +14,7 @@
     "info-end": "Данните ви няма да бъдат споделяни с никой."
   },
   "first-step": {
-    "wish": "Искате ли да пожелаете нещо на бенефициента:",
+    "wish": "Искате ли да пожелаете нещо на бенефициента?",
     "message": "Вашето послание",
     "check-box-label": "Анонимно дарение",
     "info-anonymous": "Анонимно дарение означава, че организатора и бенефициент на кампания няма да се известени за вашата идентичност",

public/locales/en/one-time-donation.json

@@ -14,7 +14,7 @@
     "info-end": "Your data would not be shared with anyone"
   },
   "first-step": {
-    "wish": "Would you like to wish something to the beneficiary:",
+    "wish": "Would you like to wish something to the beneficiary?",
     "message": "Your wish",
     "check-box-label": "Anonymous donation",
     "info-anonymous": "Anonymous donation means that the organisator and beneficiery would not be aware of your identity",

src/components/admin/navigation/AdminLayout.tsx

@@ -6,13 +6,13 @@ import { IconButton, List, Box, Button, Typography } from '@mui/material'
 import { Notifications, Settings, MenuOpen, ChevronRight, GppGood } from '@mui/icons-material'
 
 import Snackbar from 'components/layout/Snackbar'
-import PrivateMenu from 'components/layout/nav/PrivateMenu'
 
 import { items } from './adminMenu'
 import HoverMenu from './HoverMenu'
 import PanelFooter from './PanelFooter'
 import CustomListItem from './CustomListItem'
 import { AdminAppBar } from './AdminAppBar'
+import AdminMenu from 'components/layout/nav/AdminMenu'
 
 const PREFIX = 'AdminLayout'
 const drawerWidth = 200
@@ -120,7 +120,7 @@ export default function AdminLayout({ children }: Props) {
             <IconButton>
               <Notifications color="info" />
             </IconButton>
-            <PrivateMenu />
+            <AdminMenu />
           </Box>
         </Box>
       </AdminAppBar>

src/components/campaigns/CampaignInfo.tsx

@@ -93,7 +93,7 @@ export default function CampaignInfo({ campaign }: Props) {
             <FavoriteIcon color="action" sx={{ mb: '-6px', mr: '6px', ml: '-2px' }} />
             <strong>
               {t('campaigns:filters.' + `${campaign.campaignType.category}`)}/{' '}
-              {t('campaigns:campaign.types.' + `${campaign.campaignType?.slug}`)}
+              {campaign.campaignType.name}
             </strong>
           </Typography>
           {/* TODO: Dynamic campaign tagging is needed here based on activity (urgent, hot, the long-shot, etc) 

src/components/campaigns/CampaignTypeSelect.tsx

@@ -9,8 +9,6 @@ export default function CampaignTypeSelect({ name = 'campaignTypeId' }) {
   const { data } = useCampaignTypesList()
   const [field, meta] = useField(name)
 
-  console.log(data)
-
   const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
   return (
     <FormControl
@@ -25,7 +23,7 @@ export default function CampaignTypeSelect({ name = 'campaignTypeId' }) {
         </MenuItem>
         {data?.map((campaignType, index) => (
           <MenuItem key={index} value={campaignType.id}>
-            {t('campaigns:campaign.types.' + `${campaignType.slug}`)}
+            {campaignType.name}
           </MenuItem>
         ))}
       </Select>

src/components/campaigns/grid/CampaignGrid.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link'
 import { bg, enUS } from 'date-fns/locale'
 import { UseQueryResult } from 'react-query'
 import { useTranslation } from 'next-i18next'
@@ -10,7 +9,7 @@ import { DataGrid, GridColDef, GridColumns, GridRenderCellParams } from '@mui/x-
 import { routes } from 'common/routes'
 import { money } from 'common/util/money'
 import { AdminCampaignResponse } from 'gql/campaigns'
-import ExternalLink from 'components/common/ExternalLink'
+import Link from 'components/common/Link'
 import { useCampaignAdminList } from 'common/hooks/campaigns'
 import { getExactDateTime, getRelativeDate } from 'common/util/date'
 import { GridCellExpand } from 'components/common/GridCellExpand'
@@ -110,9 +109,7 @@ export default function CampaignGrid() {
       align: 'left',
       width: 350,
       renderCell: (cellValues: GridRenderCellParams) => (
-        <ExternalLink href={`/campaigns/${cellValues.row.slug}`}>
-          {cellValues.row.title}
-        </ExternalLink>
+        <Link href={`/campaigns/${cellValues.row.slug}`}>{cellValues.row.title}</Link>
       ),
     },
     {
@@ -158,9 +155,7 @@ export default function CampaignGrid() {
       ...commonProps,
       align: 'left',
       width: 250,
-      renderCell: (cellValues: GridRenderCellParams) => (
-        <>{t('campaigns:campaign.types.' + `${cellValues.row.campaignType.slug}`)}</>
-      ),
+      renderCell: (cellValues: GridRenderCellParams) => <>{cellValues.row.campaignType.name}</>,
     },
     {
       field: 'description',
@@ -177,9 +172,9 @@ export default function CampaignGrid() {
       align: 'right',
       width: 200,
       renderCell: (cellValues: GridRenderCellParams) => (
-        <ExternalLink href={`/admin/donations?campaignId=${cellValues.row.id}`}>
+        <Link href={`/admin/donations?campaignId=${cellValues.row.id}`}>
           <DisplayReachedAmount params={cellValues} />
-        </ExternalLink>
+        </Link>
       ),
     },
     {
@@ -275,7 +270,7 @@ export default function CampaignGrid() {
           justifyContent: 'space-between',
           height: '64px',
         }}>
-        <Link href={routes.admin.campaigns.create} passHref>
+        <Link href={routes.admin.campaigns.create}>
           <Button variant="outlined" endIcon={<AddIcon />}>
             <Typography>Създай нова кампания</Typography>
           </Button>

src/components/campaigns/grid/modals/DetailsModal.tsx

@@ -41,9 +41,7 @@ export default function DetailsModal({ campaign, onClose }: Props) {
           </Typography>
           <Typography variant="body1">Крайна Дата: {getExactDateTime(campaign.endDate)}</Typography>
           <Typography variant="body1">Същество: {campaign.essence}</Typography>
-          <Typography variant="body1">
-            Тип на кампанията: {t('campaigns:campaign.types.' + `${campaign.campaignType.slug}`)}
-          </Typography>
+          <Typography variant="body1">Тип на кампанията: {campaign.campaignType.name}</Typography>
           <Typography variant="body1">
             Бенефициент: {campaign.beneficiary.person.firstName}{' '}
             {campaign.beneficiary.person.lastName}

src/components/layout/AppNavBar.tsx

@@ -22,6 +22,7 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) {
   const { locale } = useRouter()
   const { status } = useSession()
   const shrink = useScrollTrigger()
+
   return (
     <AppBar
       position="fixed"

src/components/layout/nav/AdminMenu.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { useRouter } from 'next/router'
-import { Typography, lighten } from '@mui/material'
+import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
+import { Avatar, Grid, IconButton, lighten, Menu, Typography } from '@mui/material'
 
+import theme from 'common/theme'
 import { routes } from 'common/routes'
 import LinkMenuItem from 'components/common/LinkMenuItem'
-
-import GenericMenu from './GenericMenu'
+import { useRouter } from 'next/router'
 
 const PREFIX = 'AdminMenu'
 
@@ -16,7 +16,7 @@ const classes = {
   dropdownLinkText: `${PREFIX}-dropdownLinkText`,
 }
 
-const StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({
+const StyledGrid = styled(Grid)(({ theme }) => ({
   [`& .${classes.dropdownLinkButton}`]: {
     '&:hover': {
       backgroundColor: lighten(theme.palette.primary.main, 0.9),
@@ -39,41 +39,77 @@ type NavItem = {
   enabled?: boolean
 }
 
-const allNavItems: NavItem[] = [
+const adminItems: NavItem[] = [
   {
-    href: routes.admin.index,
-    label: 'nav.admin.index',
+    href: routes.profile.index,
+    label: 'nav.profile',
   },
   {
-    href: routes.admin.infoRequests,
-    label: 'nav.admin.info-requests',
+    href: routes.admin.index,
+    label: 'nav.admin.index',
   },
   {
-    href: routes.admin.supporters,
-    label: 'nav.admin.supporters',
+    href: routes.logout,
+    label: 'nav.logout',
   },
 ]
 
-export const navItems = allNavItems.filter((el) => typeof el.enabled === 'undefined' ?? el.enabled)
-
-export default function DevelopmentMenu() {
+export default function AdminMenu() {
   const { t } = useTranslation()
+  const { data: session } = useSession()
   const router = useRouter()
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null)
+
+  const handleMenu = (event: React.MouseEvent) => setAnchorEl(event.currentTarget)
+  const handleClose = () => setAnchorEl(null)
+
+  if (!session) {
+    return null
+  }
+
+  const title = `${session.name}\n(${session.email})`
+  const lettersAvatar = `${session.user?.given_name.charAt(0)}${session.user?.family_name.charAt(
+    0,
+  )}`.toUpperCase()
 
   return (
-    <StyledGenericMenu label={t('nav.admin.index')}>
-      {navItems.map(({ href, label, target }, key) => (
-        <LinkMenuItem
-          href={href}
-          selected={router.asPath === href}
-          key={key}
-          target={target}
-          className={classes.dropdownLinkButton}>
-          <Typography variant="button" className={classes.dropdownLinkText}>
-            {t(label)}
-          </Typography>
-        </LinkMenuItem>
-      ))}
-    </StyledGenericMenu>
+    <StyledGrid item>
+      <IconButton onClick={handleMenu} size="large">
+        {session?.user?.picture ? (
+          <Avatar title={title} alt={title} src={session?.user?.picture} />
+        ) : (
+          <Avatar
+            sx={{
+              bgcolor: theme.palette.success.light,
+              height: theme.spacing(4.5),
+              width: theme.spacing(4.5),
+              fontSize: '1rem',
+            }}>
+            {lettersAvatar}
+          </Avatar>
+        )}
+      </IconButton>
+      <Menu
+        keepMounted
+        id="menu-appbar"
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        open={Boolean(anchorEl)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
+        {adminItems.map(({ href, label, target }, key) => (
+          <LinkMenuItem
+            href={href}
+            selected={router.asPath === href}
+            key={key}
+            target={target}
+            className={classes.dropdownLinkButton}>
+            <Typography variant="button" className={classes.dropdownLinkText}>
+              {t(label)}
+            </Typography>
+          </LinkMenuItem>
+        ))}
+      </Menu>
+    </StyledGrid>
   )
 }

src/components/layout/nav/DevelopmentMenu.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { Typography, lighten } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 
-import { routes, staticUrls } from 'common/routes'
+import { staticUrls } from 'common/routes'
 import LinkMenuItem from 'components/common/LinkMenuItem'
 
 import GenericMenu from './GenericMenu'
@@ -55,11 +55,11 @@ const allNavItems: NavItem[] = [
     label: 'nav.dev.open-source',
     target: '_blank',
   },
-  {
-    href: routes.dev.openData,
-    label: 'nav.dev.open-data',
-    target: '_blank',
-  },
+  // {
+  //   href: routes.dev.openData,
+  //   label: 'nav.dev.open-data',
+  //   target: '_blank',
+  // },
 ]
 
 export const navItems = allNavItems.filter((el) => typeof el.enabled === 'undefined' ?? el.enabled)

src/components/layout/nav/MainNavMenu.tsx

@@ -1,19 +1,15 @@
 import React from 'react'
-import { useSession } from 'next-auth/react'
 import { Button, Grid } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 
 import { staticUrls } from 'common/routes'
-import { isAdmin } from 'common/util/roles'
 
 import DonationMenu from './DonationMenu'
 import ProjectMenu from './ProjectMenu'
-import AdminMenu from './AdminMenu'
 import DevelopmentMenu from './DevelopmentMenu'
 
 export default function MainNavMenu({ children }: { children?: React.ReactNode }) {
   const { t } = useTranslation()
-  const { data: session, status } = useSession()
 
   return (
     <Grid container direction="row" wrap="nowrap" alignItems="baseline" spacing={1}>
@@ -26,11 +22,6 @@ export default function MainNavMenu({ children }: { children?: React.ReactNode }
       <Grid item>
         <DevelopmentMenu />
       </Grid>
-      {status === 'authenticated' && isAdmin(session) && (
-        <Grid item>
-          <AdminMenu />
-        </Grid>
-      )}
       <Grid item>
         <Button
           variant="text"