mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-26 03:06:49 +02:00
* migrate to Next.js * migrate scripts * generate markdown pages * make all the markdown work * fix profile, fix image loading * git+ssh → git+https, again * bump packages * maybe windows build fix * add public to gitignore Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * Next.js v12! Webpack 5! No build hacks anymore * json import fixes * fixes Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro>
105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import React, { ReactElement, useState } from 'react'
|
|
import { useConsent, CookieConsentStatus } from '@context/CookieConsent'
|
|
import styles from './PrivacyPreferenceCenter.module.css'
|
|
import { useGdprMetadata } from '@hooks/useGdprMetadata'
|
|
import Markdown from '@shared/Markdown'
|
|
import CookieModule from './CookieModule'
|
|
import Button from '@shared/atoms/Button'
|
|
import { useUserPreferences } from '@context/UserPreferences'
|
|
import classNames from 'classnames/bind'
|
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
export default function CookieBanner({
|
|
style
|
|
}: {
|
|
style?: 'small' | 'default'
|
|
}): ReactElement {
|
|
const { resetConsentStatus } = useConsent()
|
|
const cookies = useGdprMetadata()
|
|
const { showPPC, setShowPPC } = useUserPreferences()
|
|
const [smallBanner, setSmallBanner] = useState<boolean>(style === 'small')
|
|
|
|
function closeBanner() {
|
|
setShowPPC(false)
|
|
|
|
// Wait for CSS animations to finish
|
|
setTimeout(() => {
|
|
setSmallBanner(style === 'small')
|
|
}, 300)
|
|
}
|
|
|
|
function handleAllCookies(accepted: boolean) {
|
|
resetConsentStatus(
|
|
accepted ? CookieConsentStatus.APPROVED : CookieConsentStatus.REJECTED
|
|
)
|
|
closeBanner()
|
|
}
|
|
|
|
const styleClasses = cx(styles.wrapper, {
|
|
hidden: !showPPC,
|
|
small: smallBanner // style === 'small'
|
|
})
|
|
|
|
return (
|
|
<div className={styleClasses}>
|
|
<div className={styles.banner}>
|
|
<div className={styles.container}>
|
|
<div className={styles.cookieInfo}>
|
|
<Markdown text={cookies.title} className={styles.header} />
|
|
<Markdown text={cookies.text} />
|
|
</div>
|
|
{cookies.optionalCookies && (
|
|
<>
|
|
<div className={styles.buttons}>
|
|
<Button
|
|
size="small"
|
|
onClick={() => {
|
|
handleAllCookies(true)
|
|
}}
|
|
>
|
|
{cookies.accept || 'Accept all'}
|
|
</Button>
|
|
<Button
|
|
size="small"
|
|
onClick={() => {
|
|
handleAllCookies(false)
|
|
}}
|
|
>
|
|
{cookies.reject || 'Reject all'}
|
|
</Button>
|
|
<Button
|
|
className={styles.configureButton}
|
|
size="small"
|
|
onClick={() => {
|
|
setSmallBanner(false)
|
|
}}
|
|
>
|
|
{cookies.configure || 'Customize'}
|
|
</Button>
|
|
</div>
|
|
<div className={styles.optionals}>
|
|
{cookies.optionalCookies.map((cookie) => {
|
|
return <CookieModule {...cookie} key={cookie.cookieName} />
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
{(!smallBanner || !cookies.optionalCookies) && (
|
|
<Button
|
|
size="small"
|
|
style="primary"
|
|
onClick={() => {
|
|
closeBanner()
|
|
}}
|
|
className={styles.closeButton}
|
|
>
|
|
{cookies.close || 'Save and close'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|