Notifications Subscriptions -> Full Implementation

public/locales/bg/campaigns.json

@@ -54,6 +54,7 @@
     "save": "Запази",
     "submit": "Изпрати",
     "apply": "Кандидатствайте",
+    "subscribe": "Абониране за известия",
     "support": "Дарете",
     "support-cause-today": "Подкрепете кауза днес!",
     "support-now": "Подкрепете сега",
@@ -74,11 +75,18 @@
     "download": "Изтеглете",
     "allow-donation-on-complete": "Разрешете дарения след достигане на сумата"
   },
+  "subscribe": {
+    "confirm-sent": "Благодарим ви! На посочения e-mail адрес беше изпратено съобщение за потвърждение на вашето абониране.",
+    "confirm-subscribe": "Благодарим ви! Абонирахте се успешно.",
+    "subscribe-title": "Абониране за известия и новини от Podkrepi.bg",
+    "subscribe-campaign-title": "Абониране за известия по тази кампания"
+  },
   "campaign": {
     "subheading": "Вашата подкрепа променя света и има значение. Всички подкрепящи чрез Подкрепи.бг са наши партньори в подпомагането на кампании за общността. Като щедър дарител Вие ставате важен партньор в подпомагането на кампания за нечие здраве или за успеха на кауза, която ви е близка до сърцето.",
     "subheading-bold": "Дори и най-малката помощ може да бъде двигател на голяма промяна.",
     "subheading-bold-secondary": "Заедно подкрепяме и насърчаваме дарителската и доброволческата култура в България!",
     "title": "Име на кампанията",
+    "notify": "Изпрати известие до всички абонирани",
     "slug": {
       "name": "Кратко наименование на кампанията",
       "warning": "Редактирането на това поле ще измени линка към кампанията и ще направи текущия невалиден",

public/locales/bg/common.json

@@ -58,6 +58,7 @@
   "link": "Линк",
   "components": {
     "footer": {
+      "subscribe": "Абониране за известия",
       "donatе": "Дарете",
       "about-us": "За нас",
       "resources": "Ресурси",
@@ -94,7 +95,8 @@
     "personId": "Личност",
     "campaignId": "Кампания",
     "sourceCampaignId": "От кампания",
-    "targetCampaignId": "Към кампания"
+    "targetCampaignId": "Към кампания",
+    "email": "Имейл"
   },
   "cta": {
     "read-more": "Прочетете още",

public/locales/bg/notifications.json

@@ -0,0 +1,14 @@
+{
+  "subscribe": {
+    "thank-you-msg": "Абонирането за получаване на известия e успешно! Благодарим ❤️",
+    "subscription-fail": "Възникна проблем при потвърджаването на абонамента за известия 🙄",
+    "cta": "Към сайта",
+    "cta-retry": "Опитай пак"
+  },
+  "unsubscribe": {
+    "thank-you-msg": "Успешно деактивирахте абонамента си за известия!",
+    "subscription-fail": "Възникна проблем при деактивирането на абонамента за известия 🙄",
+    "cta": "Към сайта",
+    "cta-retry": "Опитай пак"
+  }
+}

public/locales/bg/profile.json

@@ -56,6 +56,33 @@
     "noCampaigns": "Вие не сте в роля организатор, координатор или бенефицент към нито една кампания",
     "donatedTo": "Кампании, в които съм дарил"
   },
+  "myNotifications": {
+    "index": "Моите известия",
+    "status-title": "Статус на абонамента за известия",
+    "status-msg": "Абонаментът ви за получаване на известия e",
+    "modal": {
+      "title-subscribe": "Активиране на получаването на известия от Podkrepi.bg?",
+      "title-unsubscribe": "Отписване от получаването на известия от Podkrepi.bg?",
+      "campaign-title-unsubscribe": "Отписване от получаването на известия по тази кампания?",
+      "cta": "Потвърждавам",
+      "subscribe-msg": "Успешно активирахте абонамента си за получаването на известия!",
+      "unsubscribe-msg": "Успешно деактивирахте абонамента си за получаването на известия!",
+      "campaign-unsubscribe-msg": "Успешно се отписахте от получаването на известия по кампанията"
+    },
+    "status": {
+      "active": "Активен",
+      "inactive": "Деактивиран"
+    },
+    "cta": {
+      "activate": "Активирай",
+      "deactivate": "Деактивирай"
+    },
+    "campaign": {
+      "index": "Нотификации по кампании",
+      "noSubscriptions": "Към момента не сте се записали за получаване на известия по конкретни кампании",
+      "cta": "Отписване"
+    }
+  },
   "donationsContract": "Договор дарение",
   "certificates": "Сертификати",
   "birthdateModal": {

public/locales/bg/validation.json

@@ -15,9 +15,11 @@
   "terms-of-service": "Моля, приемете политиката за защита на личните данни",
   "agree-terms": "Съгласявам се с Общите условия",
   "agree-with": "Съгласявам се с",
+  "agree-with-newsletter": "Съгласявам се да получавам известия ",
   "informed-agree-with": "Запознат съм и се съгласявам с",
   "terms-and-conditions": "общите условия",
   "gdpr": "политиката за защита на личните данни",
+  "newsletter": "Моля дайте своето съгласие",
   "legal-entity": "Юридическо лице",
   "unique-field-violation": "Полето `{1}` със тази стойност вече съществува в платформата",
   "payment-reference": "Невалиден формат на кода за плащане",

src/common/hooks/notification.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query'
+import { GetCampaignNotificationSubscriptionsResponse } from 'gql/notification'
+import { useSession } from 'next-auth/react'
+import { endpoints } from 'service/apiEndpoints'
+import { authQueryFnFactory } from 'service/restRequests'
+
+export function useUserCampaignNotificationSubscriptions() {
+  const { data: session } = useSession()
+  return useQuery<GetCampaignNotificationSubscriptionsResponse[]>(
+    [endpoints.notifications.getCampaignNotificationSubscriptions.url],
+    {
+      queryFn: authQueryFnFactory(session?.accessToken),
+    },
+  )
+}

src/common/routes.ts

@@ -115,6 +115,7 @@ export const routes = {
     contractDonation: '/profile/contract-donation',
     myCampaigns: '/profile/my-campaigns',
     recurringDonations: '/profile/recurring-donations',
+    myNotifications: '/profile/my-notifications',
   },
   register: '/register',
   aboutProject: '/about-project',

src/components/client/auth/profile/MyCampaignNotificationsTable.tsx

@@ -0,0 +1,146 @@
+import { useTranslation } from 'next-i18next'
+import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
+import { Button, Box } from '@mui/material'
+
+import Link from 'components/common/Link'
+import { useUserCampaignNotificationSubscriptions } from 'common/hooks/notification'
+
+import { useState } from 'react'
+import { styled } from '@mui/material/styles'
+import RenderCampaignNotificationsConfirmModal from './MyNotificationsCampaignConfirmModal'
+import ContentTypography from 'components/client/faq/contents/ContentTypography'
+import { getRelativeDate } from 'common/util/date'
+
+const PREFIX = 'MyNotificationsTab'
+
+const classes = {
+  h3: `${PREFIX}-h3`,
+  thinFont: `${PREFIX}-thinFont`,
+  smallText: `${PREFIX}-smallText`,
+  boxTitle: `${PREFIX}-boxTitle`,
+  statusBoxRow: `${PREFIX}-statusBoxRow`,
+  notificationsBox: `${PREFIX}-notificationBox`,
+  statusBtn: `${PREFIX}-statusBtn`,
+  statusActive: `${PREFIX}-statusActive`,
+  statusInactive: `${PREFIX}-statusInactive`,
+}
+
+const StyledGrid = styled('div')(({ theme }) => ({
+  [`& .${classes.statusBtn}`]: {
+    fontSize: theme.typography.pxToRem(16),
+    lineHeight: theme.spacing(3),
+    letterSpacing: theme.spacing(0.05),
+    color: theme.palette.common.black,
+    background: `${theme.palette.secondary.main}`,
+    padding: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2.5),
+    width: theme.spacing(20),
+
+    '&:hover': {
+      background: theme.palette.primary.main,
+    },
+    '& svg': {
+      color: '#333232 ',
+    },
+  },
+}))
+
+export default function MyCampaignNotificationsTable() {
+  const { t, i18n } = useTranslation()
+  const { data = [] } = useUserCampaignNotificationSubscriptions()
+
+  const [confirmModalId, setConfirmModalId] = useState('')
+
+  const commonProps: Partial<GridColDef> = {
+    align: 'left',
+    width: 100,
+    headerAlign: 'left',
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'campaign.id',
+      headerName: t('campaigns:actions'),
+      align: 'left',
+      width: 180,
+      headerAlign: 'left',
+      renderCell: (cellValues: GridRenderCellParams) => {
+        return (
+          <StyledGrid>
+            <Button
+              className={classes.statusBtn}
+              onClick={() => {
+                setConfirmModalId(cellValues.row.campaignId)
+              }}>
+              {t('profile:myNotifications.campaign.cta')}
+            </Button>
+          </StyledGrid>
+        )
+      },
+    },
+    {
+      field: 'campaign.title',
+      headerName: t('campaigns:title'),
+      ...commonProps,
+      align: 'left',
+      width: 450,
+      renderCell: (cellValues: GridRenderCellParams) => (
+        <Link href={`/campaigns/${cellValues.row.campaign?.slug}`} fontSize={20}>
+          {cellValues.row.campaign.title}
+        </Link>
+      ),
+    },
+    {
+      field: 'campaign.state',
+      headerName: t('campaigns:status'),
+      ...commonProps,
+      align: 'left',
+      width: 120,
+      renderCell: (cellValues: GridRenderCellParams) => (
+        <ContentTypography fontWeight={500}>{cellValues.row.campaign?.state}</ContentTypography>
+      ),
+    },
+    {
+      field: 'endDate',
+      headerName: t('campaigns:endDate'),
+      ...commonProps,
+      align: 'left',
+      width: 250,
+      renderCell: (cellValues: GridRenderCellParams) => (
+        <ContentTypography fontWeight={500}>
+          {getRelativeDate(cellValues.row.campaign?.endDate, i18n.language)}
+        </ContentTypography>
+      ),
+    },
+  ]
+  return (
+    <>
+      {confirmModalId && (
+        <RenderCampaignNotificationsConfirmModal
+          campaignId={confirmModalId}
+          setOpen={setConfirmModalId}
+        />
+      )}
+      {data.length !== 0 ? (
+        <DataGrid
+          style={{
+            background: 'white',
+            width: 'calc(100% - 48px)',
+            left: '24px',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            borderRadius: '0 0 13px 13px',
+          }}
+          rows={data || []}
+          columns={columns}
+          initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}
+          editMode="row"
+          autoHeight
+        />
+      ) : (
+        <Box sx={{ fontSize: 20 }}>{t('profile:myNotifications.campaign.noSubscriptions')}</Box>
+      )}
+    </>
+  )
+}