unkeyed · BurnedChris · Nov 26, 2024 · Jan 17, 2025 · Jan 17, 2025 · Jan 17, 2025
@@ -1,7 +1,10 @@
+import { ConsentCustomizationDialog } from "@/components/consent/consent-customization-dialog";
+import CookieBanner from "@/components/consent/cookie-banner";
 import { Footer } from "@/components/footer/footer";
 import { Navigation } from "@/components/navbar/navigation";
 import { env } from "@/lib/env";
 import { PHProvider } from "@/providers/posthog/PostHogProvider";
+import { ConsentManagerProvider } from "@koroflow/core-react";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
@@ -49,26 +52,32 @@ export default function RootLayout({
       lang="en"
       className={`[color-scheme:dark] scroll-smooth ${GeistSans.variable} ${GeistMono.variable}`}
     >
-      <PHProvider>
-        <body className="min-h-screen overflow-x-hidden antialiased bg-black text-pretty">
-          <PostHogPageView />
-          <div className="relative overflow-x-clip">
-            <Navigation />
-            {children}
-            {process.env.NODE_ENV !== "production" ? (
-              <div className="fixed bottom-0 right-0 flex items-center justify-center w-6 h-6 p-3 m-8 font-mono text-xs text-black bg-white rounded-lg pointer-events-none ">
-                <div className="block sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden">al</div>
-                <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
-                <div className="hidden sm:hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
-                <div className="hidden sm:hidden md:hidden lg:block xl:hidden 2xl:hidden">lg</div>
-                <div className="hidden sm:hidden md:hidden lg:hidden xl:block 2xl:hidden">xl</div>
-                <div className="hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:block">2xl</div>
-              </div>
-            ) : null}
-          </div>
-          <Footer />
-        </body>
-      </PHProvider>
+      <ConsentManagerProvider initialGdprTypes={["necessary", "measurement"]}>
+        <PHProvider>
+          <body className="min-h-screen overflow-x-hidden antialiased bg-black text-pretty">
+            <PostHogPageView />
+            <div className="relative overflow-x-clip">
+              <Navigation />
+              {children}
+              {process.env.NODE_ENV !== "production" ? (
+                <div className="fixed bottom-0 right-0 flex items-center justify-center w-6 h-6 p-3 m-8 font-mono text-xs text-black bg-white rounded-lg pointer-events-none ">
+                  <div className="block sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden">al</div>
+                  <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
+                  <div className="hidden sm:hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
+                  <div className="hidden sm:hidden md:hidden lg:block xl:hidden 2xl:hidden">lg</div>
+                  <div className="hidden sm:hidden md:hidden lg:hidden xl:block 2xl:hidden">xl</div>
+                  <div className="hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:block">
+                    2xl
+                  </div>
+                </div>
+              ) : null}
+            </div>
+            <Footer />
+            <CookieBanner />
+            <ConsentCustomizationDialog />
+          </body>
+        </PHProvider>
+      </ConsentManagerProvider>
     </html>
   );
 }
diff --git a/apps/www/components/button.tsx b/apps/www/components/button.tsx
@@ -8,6 +8,8 @@ type Props = {
   label: string;
   IconRight?: LucideIcon;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;
   shiny?: boolean;
 };
 
@@ -18,9 +20,11 @@ export const PrimaryButton: React.FC<Props> = ({
   label,
   IconRight,
   shiny = false,
+  ...props
 }) => {
   return (
-    <div className="relative group/button">
+    //@ts-expect-error added props spread to add onClick, onKeyDown, onKeyUp
+    <div className="relative group/button" {...props}>
       <div
         aria-hidden
         className="absolute -inset-0.5 bg-white rounded-lg blur-2xl group-hover/button:opacity-30 transition duration-300  opacity-0 "
@@ -50,34 +54,44 @@ export const PrimaryButton: React.FC<Props> = ({
   );
 };
 
-export const SecondaryButton: React.FC<Props> = ({ className, IconLeft, label, IconRight }) => {
+export const SecondaryButton: React.FC<Props> = ({
+  className,
+  IconLeft,
+  label,
+  IconRight,
+  ...props
+}) => {
   return (
-    <div
+    <button
       className={cn(
         "items-center gap-2 px-4 duration-500 text-white/70 hover:text-white h-10 flex",
         className,
       )}
+      type="button"
+      {...props}
     >
       {IconLeft ? <IconLeft className="w-4 h-4" /> : null}
       {label}
       {IconRight ? <IconRight className="w-4 h-4" /> : null}
-    </div>
+    </button>
   );
 };
 
-export const RainbowDarkButton: React.FC<Props> = ({ className, label, IconRight }) => {
+export const RainbowDarkButton: React.FC<Props> = ({ className, label, IconRight, ...props }) => {
   return (
-    <div
+    <button
+      type="button"
       className={cn(
         "p-[.75px] hero-hiring-gradient rounded-full w-fit mx-auto relative z-50 group",
         className,
       )}
+      {...props}
     >
       <div className="items-center gap-4 bg-black/90 group-hover:bg-black/70 duration-500 px-4 py-2 text-white rounded-full flex flex-block ">
         <SparkleIcon className="text-white" />
         {label}
         {IconRight ? <IconRight className="w-4 h-4" /> : null}
       </div>
-    </div>
+    </button>
   );
 };
diff --git a/apps/www/components/consent/consent-customization-dialog.tsx b/apps/www/components/consent/consent-customization-dialog.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import { Overlay } from "@/components/consent/overlay";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useConsentManager } from "@koroflow/core-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { X } from "lucide-react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import ConsentCustomizationWidget from "./consent-customization-widget";
+import { usePostHog } from "posthog-js/react";
+
+export interface ConsentCustomizationDialogProps {
+  children?: React.ReactNode;
+  triggerClassName?: string;
+  showCloseButton?: boolean;
+  asChild?: boolean;
+}
+
+const dialogVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+const contentVariants = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: { type: "spring", stiffness: 300, damping: 30 },
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    transition: { duration: 0.2 },
+  },
+};
+
+const ConsentCustomizationCard = ({
+  onClose,
+  showCloseButton,
+  handleSave,
+  ref,
+}: {
+  onClose: () => void;
+  showCloseButton: boolean;
+  handleSave: () => void;
+  ref: React.RefObject<HTMLDivElement>;
+}) => {
+  const onSaveWrapper = React.useCallback(() => {
+    handleSave();
+  }, [handleSave]);
+
+  const onCloseWrapper = React.useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Card
+      className="w-full relative border bg-gradient-to-b from-[#111111] to-black border-t-[.75px] border-white/20 overflow-hidden"
+      ref={ref}
+    >
+      <CardHeader className="space-y-2 pb-0 border-white/10 editor-top-gradient">
+        {showCloseButton && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-2 top-2"
+            onClick={onCloseWrapper}
+            aria-label="Close privacy settings"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+        <CardTitle id="privacy-settings-title">Privacy Settings</CardTitle>
+        <CardDescription>
+          Customize your privacy settings here. You can choose which types of
+          cookies and tracking technologies you allow.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ConsentCustomizationWidget onSave={onSaveWrapper} />
+      </CardContent>
+    </Card>
+  );
+};
+
+export const ConsentCustomizationDialog = React.forwardRef<
+  HTMLDivElement,
+  ConsentCustomizationDialogProps
+>(({ showCloseButton = false }, ref) => {
+  const posthog = usePostHog();
+
+  const { isPrivacyDialogOpen, setIsPrivacyDialogOpen, saveConsents } =
+    useConsentManager();
+  const [isMounted, setIsMounted] = React.useState(false);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+
+  const handleSave = React.useCallback(() => {
+    saveConsents("custom");
+    posthog.capture("consent", {
+      consent: "custom",
+    });
+    setIsPrivacyDialogOpen(false);
+  }, [setIsPrivacyDialogOpen, saveConsents, posthog]);
+
+  const handleClose = React.useCallback(() => {
+    setIsPrivacyDialogOpen(false);
+  }, [setIsPrivacyDialogOpen]);
+
+  const dialogContent = (
+    <AnimatePresence mode="wait">
+      {isPrivacyDialogOpen && (
+        <>
+          <Overlay show={isPrivacyDialogOpen} />
+          <motion.dialog
+            className="fixed inset-0 z-50 flex items-center justify-center"
+            variants={dialogVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            aria-modal="true"
+            aria-labelledby="privacy-settings-title"
+            onClick={(e) => {
+              // Close dialog when clicking outside
+              if (e.target === e.currentTarget) {
+                handleClose();
+              }
+            }}
+          >
+            <motion.div
+              ref={contentRef}
+              className="z-50 w-full max-w-md mx-auto"
+              variants={contentVariants}
+              initial="hidden"
+              animate="visible"
+              exit="exit"
+            >
+              <ConsentCustomizationCard
+                ref={ref as React.RefObject<HTMLDivElement>}
+                onClose={handleClose}
+                showCloseButton={showCloseButton}
+                handleSave={handleSave}
+              />
+            </motion.div>
+          </motion.dialog>
+        </>
+      )}
+    </AnimatePresence>
+  );
+
+  return isMounted && createPortal(dialogContent, document.body);
+});
+
+ConsentCustomizationDialog.displayName = "ConsentCustomizationDialog";