-
Notifications
You must be signed in to change notification settings - Fork 88
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Notifications Subscriptions -> Full Implementation (#1555)
* Add subscribe boxes * Added footer-subcsribe, subscribe confirmation route * addd notifications tab to logged user page * add campaign news notify check-box * Refactor button to link * fix broken import * final fixes
- Loading branch information
1 parent
578c4fb
commit e7e1208
Showing
35 changed files
with
1,648 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "subscribe": { | ||
| "thank-you-msg": "Абонирането за получаване на известия e успешно! Благодарим ❤️", | ||
| "subscription-fail": "Възникна проблем при потвърджаването на абонамента за известия 🙄", | ||
| "cta": "Към сайта", | ||
| "cta-retry": "Опитай пак" | ||
| }, | ||
| "unsubscribe": { | ||
| "thank-you-msg": "Успешно деактивирахте абонамента си за известия!", | ||
| "subscription-fail": "Възникна проблем при деактивирането на абонамента за известия 🙄", | ||
| "cta": "Към сайта", | ||
| "cta-retry": "Опитай пак" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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), | ||
| }, | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
src/components/client/auth/profile/MyCampaignNotificationsTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| )} | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.