-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [ALPHA-4037] add cookie disclaimer (#60)
- Loading branch information
1 parent
00e06b1
commit bea0dc9
Showing
6 changed files
with
233 additions
and
1 deletion.
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
51 changes: 51 additions & 0 deletions
51
packages/frontend/src/components/cookie-disclaimer/CookieDisclaimer.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,51 @@ | ||
import { FC } from "react"; | ||
import { Button, Overlay } from "@alphaday/ui-kit"; | ||
import CONFIG from "src/config"; | ||
|
||
const { Z_INDEX_REGISTRY } = CONFIG.UI; | ||
|
||
export type TCookieChoiceProps = { | ||
key: number; | ||
buttonText: string; | ||
isReject?: boolean; | ||
handler: () => void; | ||
sortOrder: number; | ||
}; | ||
|
||
interface IProps { | ||
choices: Array<TCookieChoiceProps>; | ||
} | ||
const CookieDisclaimer: FC<IProps> = ({ choices }) => ( | ||
<Overlay | ||
isVisible | ||
position="bottom" | ||
style={{ | ||
zIndex: Z_INDEX_REGISTRY.OVERLAY, | ||
}} | ||
> | ||
<div className="p-2 flex flex-col w-full max-w-screen-three-col overflow-hidden items-center three-col:p-5 three-col:flex-row"> | ||
<p className="text-primary mx-auto min-w-[280px] text-center three-col:text-left"> | ||
We use essential cookies to make Alphaday work. We'd like | ||
to use other cookies to improve and personalize your visit and | ||
to analyze our website's performance, but only if you | ||
accept. | ||
</p> | ||
<div className="m-2 flex flex-row justify-end items-end transform scale-[70px] two-col:transform-none [&_*]:ml-4"> | ||
{choices | ||
.sort((a, d) => a.sortOrder - d.sortOrder) | ||
.map((item) => ( | ||
<Button | ||
key={item.key} | ||
onClick={item.handler} | ||
variant="primaryXL" | ||
error={item.isReject} | ||
> | ||
{item.buttonText} | ||
</Button> | ||
))} | ||
</div> | ||
</div> | ||
</Overlay> | ||
); | ||
|
||
export default CookieDisclaimer; |
80 changes: 80 additions & 0 deletions
80
packages/frontend/src/containers/cookie-disclaimer/CookieDisclaimerContainer.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,80 @@ | ||
import React from "react"; | ||
import { useTutorial } from "src/api/hooks"; | ||
import { useGetIpMetadataQuery } from "src/api/services"; | ||
import { setCookieChoice } from "src/api/store"; | ||
import { useAppSelector, useAppDispatch } from "src/api/store/hooks"; | ||
import { ECookieChoice } from "src/api/types"; | ||
import CookieDisclaimer, { | ||
TCookieChoiceProps, | ||
} from "src/components/cookie-disclaimer/CookieDisclaimer"; | ||
import CONFIG from "src/config"; | ||
|
||
const CookieDisclaimerContainer: React.FC = () => { | ||
const dispatch = useAppDispatch(); | ||
const cookieChoice = useAppSelector((state) => state.ui.cookieChoice); | ||
|
||
const { showTutorial } = useTutorial(); | ||
|
||
const setChoice = (choice: ECookieChoice) => { | ||
dispatch(setCookieChoice(choice)); | ||
}; | ||
|
||
const { data: ipMeta, isLoading } = useGetIpMetadataQuery(undefined, { | ||
skip: | ||
cookieChoice !== undefined && | ||
cookieChoice > ECookieChoice.RejectAll, | ||
}); | ||
|
||
// the cookie banner won't be displayed in any of the following situations: | ||
// - a choice different to RejectAll has been made | ||
// - user country doesn't belong to Europe | ||
if ( | ||
isLoading || | ||
(cookieChoice !== undefined && | ||
cookieChoice > ECookieChoice.RejectAll) || | ||
showTutorial || | ||
(ipMeta && !ipMeta.in_eu) | ||
) { | ||
return null; | ||
} | ||
|
||
const choices: Array<TCookieChoiceProps> = [ | ||
{ | ||
key: ECookieChoice.AcceptAll, | ||
buttonText: "Accept All", | ||
handler: () => { | ||
setChoice(ECookieChoice.AcceptAll); | ||
}, | ||
sortOrder: 0, | ||
}, | ||
{ | ||
key: ECookieChoice.AcceptEssential, | ||
buttonText: "Accept Essential", | ||
handler: () => { | ||
setChoice(ECookieChoice.AcceptEssential); | ||
}, | ||
sortOrder: 1, | ||
}, | ||
]; | ||
|
||
if ( | ||
ipMeta?.country_code && | ||
CONFIG.COOKIES.STRICT_COUNTRY_LIST.indexOf(ipMeta.country_code) !== -1 | ||
) { | ||
choices.push({ | ||
key: ECookieChoice.RejectAll, | ||
buttonText: "Reject & Exit", | ||
isReject: true, | ||
handler: () => { | ||
setChoice(ECookieChoice.RejectAll); | ||
// exit app and go to homepage | ||
window.location.href = CONFIG.SEO.DOMAIN; | ||
}, | ||
sortOrder: 2, | ||
}); | ||
} | ||
|
||
return <CookieDisclaimer choices={choices} />; | ||
}; | ||
|
||
export default CookieDisclaimerContainer; |
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,97 @@ | ||
import { HTMLProps, FC } from "react"; | ||
import { twMerge } from "tailwind-merge"; | ||
|
||
interface IOverlayWrapperProps extends HTMLProps<HTMLDivElement> { | ||
/** | ||
* Whether the overlay is visible or not. | ||
*/ | ||
isVisible: boolean; | ||
} | ||
|
||
const OverlayWrapper: FC<IOverlayWrapperProps> = ({ | ||
isVisible, | ||
className, | ||
children, | ||
style, | ||
...props | ||
}) => { | ||
return ( | ||
<div | ||
className={twMerge( | ||
"block fixed overflow-hidden bg-backgroundVariant900 rounded-[5px]", | ||
className | ||
)} | ||
style={{ | ||
display: isVisible ? "block" : "none", | ||
...style, | ||
}} | ||
{...props} | ||
> | ||
<div className="relative flex flex-col flex-wrap items-center justify-center overflow-hidden"> | ||
{children} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
interface IOverlayProps extends IOverlayWrapperProps { | ||
/** | ||
* The position of the overlay. | ||
* | ||
* @default "top" | ||
*/ | ||
position?: "left" | "right" | "top" | "bottom"; | ||
} | ||
|
||
/** | ||
* This component may be used to display sticky overlay containers in either the | ||
* top, bottom, left or right sides of the screen. | ||
* However, it has only been tested in the CookieDisclaimer component (bottom | ||
* layout) so some tweaks maybe needed for other layouts. | ||
* | ||
* The `style` or `className` props can be used to customize the overlay. | ||
*/ | ||
export const Overlay: FC<IOverlayProps> = ({ | ||
position = "top", | ||
isVisible, | ||
children, | ||
className, | ||
...props | ||
}) => { | ||
if (position === "left" || position === "right") { | ||
return ( | ||
<OverlayWrapper | ||
isVisible={isVisible} | ||
className={twMerge( | ||
"w-auto h-full top-0 max-w-[250px]", | ||
className | ||
)} | ||
{...props} | ||
> | ||
{children} | ||
</OverlayWrapper> | ||
); | ||
} | ||
|
||
if (position === "bottom") { | ||
return ( | ||
<OverlayWrapper | ||
isVisible={isVisible} | ||
className={twMerge("w-full h-auto bottom-0", className)} | ||
{...props} | ||
> | ||
{children} | ||
</OverlayWrapper> | ||
); | ||
} | ||
|
||
return ( | ||
<OverlayWrapper | ||
isVisible={isVisible} | ||
className={twMerge("w-full h-auto top-0", className)} | ||
{...props} | ||
> | ||
{children} | ||
</OverlayWrapper> | ||
); | ||
}; |