Split up ConsentBannerAndConsentManagment into multiple files

Author: garronej

src/gdpr/ConsentBannerAndConsentManagement/ConsentBanner.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import { fr } from "../../fr";
+import type { RegisteredLinkProps } from "../../link";
+import type { ProcessConsentChanges } from "../processConsentChanges";
+import { isBrowser } from "../../tools/isBrowser";
+import { useTranslation } from "./translation";
+
+export function createConsentBanner<Finality extends string>(params: {
+    personalDataPolicyLinkProps: RegisteredLinkProps | undefined;
+    processConsentChanges: ProcessConsentChanges<Finality>;
+    consentModalButtonProps: {
+        "aria-controls": string;
+        "data-fr-opened": boolean;
+    };
+}) {
+    const { personalDataPolicyLinkProps, processConsentChanges, consentModalButtonProps } = params;
+
+    function ConsentBanner() {
+        const { t } = useTranslation();
+
+        const [hostname, setHostname] = useState("");
+
+        const [isProcessingChanges, setIsProcessingChanges] = useState(false);
+
+        useEffect(() => {
+            if (!isBrowser) {
+                return;
+            }
+
+            setHostname(location.host);
+        }, []);
+
+        return (
+            <>
+                <div className={fr.cx("fr-consent-banner")}>
+                    <h2 className={fr.cx("fr-h6")}>{t("about cookies", { hostname })}</h2>
+                    <div /*className={fr.cx("fr-consent-banner__content")}*/>
+                        <p className={fr.cx("fr-text--sm")}>
+                            {t("welcome message", { personalDataPolicyLinkProps })}
+                        </p>
+                    </div>
+                    <ul
+                        className={fr.cx(
+                            "fr-consent-banner__buttons",
+                            "fr-btns-group",
+                            "fr-btns-group--right",
+                            "fr-btns-group--inline-reverse",
+                            "fr-btns-group--inline-sm"
+                        )}
+                    >
+                        <li>
+                            <button
+                                className={fr.cx("fr-btn")}
+                                title={t("accept all - title")}
+                                onClick={async () => {
+                                    setIsProcessingChanges(true);
+                                    await processConsentChanges({ "type": "grantAll" });
+                                    setIsProcessingChanges(false);
+                                }}
+                                disabled={isProcessingChanges}
+                            >
+                                {t("accept all")}
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                className={fr.cx("fr-btn")}
+                                title={t("refuse all - title")}
+                                onClick={() => {
+                                    setIsProcessingChanges(true);
+                                    processConsentChanges({ "type": "denyAll" });
+                                    setIsProcessingChanges(false);
+                                }}
+                                disabled={isProcessingChanges}
+                            >
+                                {t("refuse all")}
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                className={fr.cx("fr-btn", "fr-btn--secondary")}
+                                title={t("customize cookies - title")}
+                                disabled={isProcessingChanges}
+                                {...consentModalButtonProps}
+                            >
+                                {t("customize")}
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </>
+        );
+    }
+
+    return { ConsentBanner };
+}

src/gdpr/ConsentBannerAndConsentManagement/ConsentBannerAndConsentManagement.tsx

@@ -0,0 +1,140 @@
+import React, { useReducer, useEffect, type ReactNode } from "react";
+import type { RegisteredLinkProps } from "../../link";
+import type { ExtractFinalityFromFinalityDescription, FinalityConsent } from "../types";
+import type { ProcessConsentChanges } from "../processConsentChanges";
+import { FooterBottomItem } from "../../Footer";
+import { createConsentBanner } from "./ConsentBanner";
+import { createConsentManagement } from "./ConsentConsentManagement";
+import { useTranslation } from "./translation";
+
+export function createConsentBannerAndConsentManagement<
+    FinalityDescription extends Record<
+        string,
+        { title: ReactNode; description?: ReactNode; subFinalities?: Record<string, ReactNode> }
+    >
+>(params: {
+    finalityDescription: ((params: { lang: string }) => FinalityDescription) | FinalityDescription;
+    useFinalityConsent: () =>
+        | FinalityConsent<ExtractFinalityFromFinalityDescription<FinalityDescription>>
+        | undefined;
+    processConsentChanges: ProcessConsentChanges<
+        ExtractFinalityFromFinalityDescription<FinalityDescription>
+    >;
+    personalDataPolicyLinkProps?: RegisteredLinkProps;
+    finalities: ExtractFinalityFromFinalityDescription<FinalityDescription>[];
+}) {
+    const {
+        finalityDescription,
+        useFinalityConsent,
+        processConsentChanges,
+        personalDataPolicyLinkProps,
+        finalities
+    } = params;
+
+    const { ConsentManagement, consentModalButtonProps, useIsConsentManagementOpen } =
+        createConsentManagement({
+            finalityDescription,
+            personalDataPolicyLinkProps,
+            useFinalityConsent,
+            processConsentChanges,
+            finalities
+        });
+
+    const { ConsentBanner } = createConsentBanner({
+        personalDataPolicyLinkProps,
+        processConsentChanges,
+        consentModalButtonProps
+    });
+
+    const { FooterConsentManagementItem } = createFooterConsentManagementItem({
+        consentModalButtonProps
+    });
+
+    function ConsentBannerAndConsentManagement() {
+        const [isHydrated, setIsHydrated] = useReducer(() => true, false);
+
+        useEffect(() => {
+            processConsentChanges({ "type": "no changes but trigger consent callbacks" });
+
+            setIsHydrated();
+        }, []);
+
+        const finalityConsent = useFinalityConsent();
+
+        const isConsentManagementOpen = useIsConsentManagementOpen();
+
+        if (!isHydrated) {
+            return null;
+        }
+
+        return (
+            <>
+                {finalityConsent === undefined && !isConsentManagementOpen && <ConsentBanner />}
+                <ConsentManagement />
+            </>
+        );
+    }
+
+    const { FooterPersonalDataPolicyItem } = createFooterPersonalDataPolicyItem({
+        personalDataPolicyLinkProps
+    });
+
+    return {
+        ConsentBannerAndConsentManagement,
+        FooterConsentManagementItem,
+        FooterPersonalDataPolicyItem
+    };
+}
+
+function createFooterConsentManagementItem(params: {
+    consentModalButtonProps: {
+        "aria-controls": string;
+        "data-fr-opened": boolean;
+    };
+}) {
+    const { consentModalButtonProps } = params;
+
+    function FooterConsentManagementItem() {
+        const { t } = useTranslation();
+
+        return (
+            <FooterBottomItem
+                bottomItem={{
+                    "buttonProps": consentModalButtonProps,
+                    "text": t("cookies management")
+                }}
+            />
+        );
+    }
+
+    return { FooterConsentManagementItem };
+}
+
+function createFooterPersonalDataPolicyItem(params: {
+    personalDataPolicyLinkProps: RegisteredLinkProps | undefined;
+}) {
+    const { personalDataPolicyLinkProps } = params;
+
+    function FooterPersonalDataPolicyItem() {
+        const { t } = useTranslation();
+
+        if (personalDataPolicyLinkProps === undefined) {
+            throw new Error(
+                [
+                    "You should provide a personalDataPolicyLinkProps to createGdprApi if",
+                    "you want to add a link to the personal data policy in the footer"
+                ].join(" ")
+            );
+        }
+
+        return (
+            <FooterBottomItem
+                bottomItem={{
+                    "text": t("personal data"),
+                    "linkProps": personalDataPolicyLinkProps
+                }}
+            />
+        );
+    }
+    return { FooterPersonalDataPolicyItem };
+}