Skip to content

Commit

Permalink
Extract AnalyticsDialogLayout into a component
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukaw3d
lukaw3d committed Mar 13, 2024
1 parent 7e2d9ed commit 6f779fd
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 107 deletions.
46 changes: 46 additions & 0 deletions src/app/components/AnalyticsConsent/AnalyticsDialogLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import Snackbar from '@mui/material/Snackbar'
import Typography from '@mui/material/Typography'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardActions from '@mui/material/CardActions'
import { useScreenSize } from 'app/hooks/useScreensize'

export const AnalyticsDialogLayout = (props: {
isOpen: boolean
message: React.ReactNode
actions: React.ReactNode
}) => {
const { isMobile } = useScreenSize()
return (
<>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
sx={{
maxWidth: '450px',
}}
open={props.isOpen}
>
<Card elevation={4}>
<CardContent>
<Typography
fontSize="14px"
sx={{
paddingBottom: '12px',
lineHeight: '1.25',
}}
align="center"
>
{props.message}
</Typography>
</CardContent>
<CardActions sx={{ justifyContent: 'center', paddingBottom: isMobile ? '16px' : '32px' }}>
{props.actions}
</CardActions>
</Card>
</Snackbar>
</>
)
}
81 changes: 28 additions & 53 deletions src/app/components/AnalyticsConsent/AnalyticsIsBlocked.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import Snackbar from '@mui/material/Snackbar'
import Typography from '@mui/material/Typography'
import { styled } from '@mui/material/styles'
import Button from '@mui/material/Button'
import Link from '@mui/material/Link'
import { Trans, useTranslation } from 'react-i18next'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardActions from '@mui/material/CardActions'
import { useScreenSize } from 'app/hooks/useScreensize'
import { legalDocuments } from '../../utils/externalLinks'
import { AnalyticsDialogLayout } from './AnalyticsDialogLayout'

const StyledButton = styled(Button)(({ theme }) => ({
paddingLeft: theme.spacing(5),
Expand All @@ -17,54 +12,34 @@ const StyledButton = styled(Button)(({ theme }) => ({

export const AnalyticsIsBlocked = (props: { isOpen: boolean; onReload: () => void; onClose: () => void }) => {
const { t } = useTranslation()
const { isMobile } = useScreenSize()
return (
<>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
sx={{
maxWidth: '450px',
}}
open={props.isOpen}
>
<Card elevation={4}>
<CardContent>
<Typography
fontSize="14px"
sx={{
paddingBottom: '12px',
lineHeight: '1.25',
}}
align="center"
>
<Trans
i18nKey="analyticsConsent.blockedText"
t={t}
components={{
PrivacyPolicyLink: (
<Link
href={legalDocuments.privacyPolicy}
target="_blank"
sx={{ fontWeight: 400, textDecoration: 'underline' }}
/>
),
}}
<AnalyticsDialogLayout
isOpen={props.isOpen}
message={
<Trans
i18nKey="analyticsConsent.blockedText"
t={t}
components={{
PrivacyPolicyLink: (
<Link
href={legalDocuments.privacyPolicy}
target="_blank"
sx={{ fontWeight: 400, textDecoration: 'underline' }}
/>
</Typography>
</CardContent>
<CardActions sx={{ justifyContent: 'center', paddingBottom: isMobile ? '16px' : '32px' }}>
<StyledButton onClick={() => props.onReload()} color="secondary" variant="outlined">
{t('analyticsConsent.reloadButtonLabel')}
</StyledButton>
<StyledButton onClick={() => props.onClose()} color="secondary" variant="outlined">
{t('analyticsConsent.closeButtonLabel')}
</StyledButton>
</CardActions>
</Card>
</Snackbar>
</>
),
}}
/>
}
actions={
<>
<StyledButton onClick={() => props.onReload()} color="secondary" variant="outlined">
{t('analyticsConsent.reloadButtonLabel')}
</StyledButton>
<StyledButton onClick={() => props.onClose()} color="secondary" variant="outlined">
{t('analyticsConsent.closeButtonLabel')}
</StyledButton>
</>
}
/>
)
}
83 changes: 29 additions & 54 deletions src/app/components/AnalyticsConsent/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
/* eslint-disable react-hooks/rules-of-hooks -- REACT_APP_ENABLE_OASIS_MATOMO_ANALYTICS can't change in runtime */
import { createContext, useContext, useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import Snackbar from '@mui/material/Snackbar'
import Typography from '@mui/material/Typography'
import { styled } from '@mui/material/styles'
import Button from '@mui/material/Button'
import Link from '@mui/material/Link'
import { Trans, useTranslation } from 'react-i18next'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardActions from '@mui/material/CardActions'
import { useScreenSize } from 'app/hooks/useScreensize'
import * as matomo from './initializeMatomo'
import { legalDocuments } from '../../utils/externalLinks'
import { ThemeByNetwork } from '../ThemeByNetwork'
import { Network } from '../../../types/network'
import { AnalyticsIsBlocked } from './AnalyticsIsBlocked'
import { AnalyticsDialogLayout } from './AnalyticsDialogLayout'

const AnalyticsContext = createContext<{
reopenAnalyticsConsent: () => void
Expand Down Expand Up @@ -115,55 +110,35 @@ export const AnalyticsConsentView = (props: {
onDecline: () => void
}) => {
const { t } = useTranslation()
const { isMobile } = useScreenSize()
return (
<>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
sx={{
maxWidth: '450px',
}}
open={props.isOpen}
>
<Card elevation={4}>
<CardContent>
<Typography
fontSize="14px"
sx={{
paddingBottom: '12px',
lineHeight: '1.25',
}}
align="center"
>
<Trans
i18nKey="analyticsConsent.text"
t={t}
components={{
PrivacyPolicyLink: (
<Link
href={legalDocuments.privacyPolicy}
target="_blank"
sx={{ fontWeight: 400, textDecoration: 'underline' }}
/>
),
}}
values={{ acceptButtonLabel: t('analyticsConsent.acceptButtonLabel') }}
<AnalyticsDialogLayout
isOpen={props.isOpen}
message={
<Trans
i18nKey="analyticsConsent.text"
t={t}
components={{
PrivacyPolicyLink: (
<Link
href={legalDocuments.privacyPolicy}
target="_blank"
sx={{ fontWeight: 400, textDecoration: 'underline' }}
/>
</Typography>
</CardContent>
<CardActions sx={{ justifyContent: 'center', paddingBottom: isMobile ? '16px' : '32px' }}>
<StyledButton onClick={() => props.onAccept()} color="primary" variant="contained">
{t('analyticsConsent.acceptButtonLabel')}
</StyledButton>
<StyledButton onClick={() => props.onDecline()} color="secondary" variant="outlined">
{t('analyticsConsent.declineButtonLabel')}
</StyledButton>
</CardActions>
</Card>
</Snackbar>
</>
),
}}
values={{ acceptButtonLabel: t('analyticsConsent.acceptButtonLabel') }}
/>
}
actions={
<>
<StyledButton onClick={() => props.onAccept()} color="primary" variant="contained">
{t('analyticsConsent.acceptButtonLabel')}
</StyledButton>
<StyledButton onClick={() => props.onDecline()} color="secondary" variant="outlined">
{t('analyticsConsent.declineButtonLabel')}
</StyledButton>
</>
}
/>
)
}

0 comments on commit 6f779fd

Please sign in to comment.