From 4d1662b6eea3e5dc7bb46b5972b9249d6d35cfe1 Mon Sep 17 00:00:00 2001 From: Eugene Fox Date: Wed, 21 Aug 2024 12:12:29 +0000 Subject: [PATCH] fix: CLARITY_ID and CLARITY_CONSENT variables are baked in on build time --- .env.development | 20 ++++++++++---------- app/_components/CookieBanner.tsx | 6 +++--- app/_components/RevokeConsentButton.tsx | 1 - app/_utils/analytics/client.ts | 2 -- app/_utils/analytics/server.ts | 17 ++++++++++++++++- app/layout.tsx | 4 ++-- 6 files changed, 31 insertions(+), 19 deletions(-) diff --git a/.env.development b/.env.development index 2484a94..e1af66c 100644 --- a/.env.development +++ b/.env.development @@ -2,14 +2,14 @@ # Copy this file to .env, .env.local, or .env.production and fill in the values # Mail credentials for redirecting form inquiries (see app/_utils/sendInquiry.ts) -SMTP_HOST=mailserver # Address of your SMTP server -SMTP_PORT=port # Port of your SMTP server -SMTP_USER=username # Username of your email bot account (usually same, as email address) -SMTP_PASSWORD=password # Password of your email bot account -SMTP_FROM_EMAIL=email # Email address which will be displayed in "From" field -SMTP_TO_EMAIL=email # Email to which emails will be sent +SMTP_HOST=mailserver # Address of your SMTP server +SMTP_PORT=port # Port of your SMTP server +SMTP_USER=username # Username of your email bot account (usually same, as email address) +SMTP_PASSWORD=password # Password of your email bot account +SMTP_FROM_EMAIL=email # Email address which will be displayed in "From" field +SMTP_TO_EMAIL=email # Email to which emails will be sent -DOMAIN_NAME=example.com # Your domain name -RESUME_URL=URL # Location of the resume PDF -CLARITY_ID=string # Clarity Analytics ID (optional, remove to disable) -NEXT_PUBLIC_CLARITY_CONSENT=1 # 1 if you need to request explicit consent from user, 0 if not (requires CLARITY_ID) +DOMAIN_NAME=example.com # Your domain name +RESUME_URL=URL # Location of the resume PDF +CLARITY_ID=string # Clarity Analytics ID (optional, remove to disable) +CLARITY_CONSENT=1 # 1 if you need to request explicit consent from user, 0 if not (requires CLARITY_ID) diff --git a/app/_components/CookieBanner.tsx b/app/_components/CookieBanner.tsx index d913166..5743828 100644 --- a/app/_components/CookieBanner.tsx +++ b/app/_components/CookieBanner.tsx @@ -1,12 +1,12 @@ "use client"; -import { acceptCookies, dismissCookies, getCookieChoice, rejectCookies, requireExcplicitConsent } from "@/_utils/analytics/client"; +import { acceptCookies, dismissCookies, getCookieChoice, rejectCookies } from "@/_utils/analytics/client"; import { Dismiss24Regular } from "@fluentui/react-icons"; import React, { useCallback, useEffect, useState } from "react"; import Button from "./Button"; import cls from "./CookieBanner.module.scss"; -const CookieBanner: React.FC = () => +const CookieBanner: React.FC<{ askForConsent: boolean; }> = props => { const [visible, setVisible] = useState(false); @@ -56,7 +56,7 @@ const CookieBanner: React.FC = () =>

- { requireExcplicitConsent ? + { props.askForConsent ?
diff --git a/app/_components/RevokeConsentButton.tsx b/app/_components/RevokeConsentButton.tsx index 63f6eeb..c3df29d 100644 --- a/app/_components/RevokeConsentButton.tsx +++ b/app/_components/RevokeConsentButton.tsx @@ -10,7 +10,6 @@ const RevokeConsentButton: React.FC = () => useEffect(() => { - console.log("getCookieChoice", getCookieChoice()); setHasConsent(getCookieChoice() === "accepted"); }, []); diff --git a/app/_utils/analytics/client.ts b/app/_utils/analytics/client.ts index ad645ca..e32fccd 100644 --- a/app/_utils/analytics/client.ts +++ b/app/_utils/analytics/client.ts @@ -17,8 +17,6 @@ export const dismissCookies = (): void => setCookie("CC", "", 1209600); // 14 days }; -export const requireExcplicitConsent: boolean = process.env.NEXT_PUBLIC_CLARITY_CONSENT === "1"; - export const getCookieChoice = (): "accepted" | "rejected" | "acknowledged" | "none" => { switch (getCookie("CC")) diff --git a/app/_utils/analytics/server.ts b/app/_utils/analytics/server.ts index bfd93cf..b781d7e 100644 --- a/app/_utils/analytics/server.ts +++ b/app/_utils/analytics/server.ts @@ -1,10 +1,25 @@ +import { unstable_noStore } from "next/cache"; import { headers } from "next/headers"; /** * Check if Clarity is enabled * @returns true if Clarity is enabled */ -export const analyticsEnabled = (): boolean => !!process.env.CLARITY_ID; +export const analyticsEnabled = (): boolean => +{ + unstable_noStore(); + return !!process.env.CLARITY_ID; +}; + +/** + * Check if Clarity requires explicit consent + * @returns true if Clarity requires explicit consent + */ +export const requireExcplicitConsent = (): boolean => +{ + unstable_noStore(); + return process.env.CLARITY_CONSENT === "1"; +}; /** * Check if Clarity is enabled and the browser didn't send a DNT signal diff --git a/app/layout.tsx b/app/layout.tsx index 2d28ecf..7dc1a17 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,7 +5,7 @@ import { PropsWithChildren } from "react"; import CookieBanner from "./_components/CookieBanner"; import Footer from "./_components/Footer"; import Header from "./_components/Header"; -import { canLoadAnalytics } from "./_utils/analytics/server"; +import { canLoadAnalytics, requireExcplicitConsent } from "./_utils/analytics/server"; import fonts from "./fonts"; import "./globals.scss"; @@ -28,7 +28,7 @@ export default function RootLayout(props: PropsWithChildren)