feat: [ALPHA-4037] add cookie disclaimer (#60)

packages/frontend/src/api/types/primitives.ts

@@ -93,6 +93,6 @@ export type TCryptoAccount = {
 
 export enum ECookieChoice {
     RejectAll,
-    AccpetEssential,
+    AcceptEssential,
     AcceptAll,
 }

packages/frontend/src/components/cookie-disclaimer/CookieDisclaimer.tsx

@@ -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&apos;d like
+                to use other cookies to improve and personalize your visit and
+                to analyze our website&apos;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;

packages/frontend/src/containers/cookie-disclaimer/CookieDisclaimerContainer.tsx

@@ -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;

packages/frontend/src/pages/index.tsx

@@ -28,6 +28,7 @@ import { Logger } from "src/api/utils/logging";
 import { EToastRole, toast } from "src/api/utils/toastUtils";
 import CONFIG from "src/config/config";
 import ModuleWrapper from "src/containers/base/ModuleWrapper";
+import CookieDisclaimerContainer from "src/containers/cookie-disclaimer/CookieDisclaimerContainer";
 import WalletConnectionDialogContainer from "src/containers/dialogs/WalletConnectionDialogContainer";
 import MainLayout from "src/layout/MainLayout";
 
@@ -339,6 +340,7 @@ function BasePage() {
                     ))}
                 </div>
             </DragDropContext>
+            <CookieDisclaimerContainer />
             <WalletConnectionDialogContainer />
         </MainLayout>
     );

packages/ui-kit/index.ts

@@ -55,6 +55,7 @@ import { ErrorModal } from "./src/components/modal/ErrorModal";
 import { Modal } from "./src/components/modal/Modal";
 import { ModulePreview } from "./src/components/module-preview/ModulePreview";
 import { ModuleLoader } from "./src/components/moduleLoader/ModuleLoader";
+import { Overlay } from "./src/components/overlay/Overlay";
 import { ScrollBar } from "./src/components/scrollbar/ScrollBar";
 import { SearchBar } from "./src/components/search/Searchbar";
 import { ChannelSkeleton } from "./src/components/skeletons/ChannelSkeleton";
@@ -130,4 +131,5 @@ export {
     ChannelSkeleton,
     ItemSkeleton,
     Skeleton,
+    Overlay,
 };

packages/ui-kit/src/components/overlay/Overlay.tsx

@@ -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>
+    );
+};