Repository navigation
fix(marketing): cookie banner no longer covers the hero download button #9218
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 |
|---|---|---|
|
|
@@ -2,16 +2,83 @@ | |
|
|
||
| import { Trans } from "@lingui/react/macro"; | ||
| import { Button } from "@superset/ui/button"; | ||
| import { cn } from "@superset/ui/utils"; | ||
| import { AnimatePresence, m } from "framer-motion"; | ||
| import Link from "next/link"; | ||
| import { useEffect, useLayoutEffect, useRef, useState } from "react"; | ||
|
|
||
| import { declineAnalytics } from "@/lib/analytics/decline"; | ||
| import { withPosthog } from "@/lib/analytics/lazy"; | ||
| import { ANALYTICS_CONSENT_KEY } from "@/lib/constants"; | ||
|
|
||
| /** Elements the banner must never cover, such as the hero download buttons. */ | ||
| export const KEEP_CLEAR_ATTRIBUTE = "data-cookie-banner-keep-clear"; | ||
|
|
||
| // Tried in order; the first one that leaves every keep-clear element | ||
| // uncovered wins. A browser window is often smaller than the screen, so no | ||
| // single fixed position is safe: on a 1000x560 Safari window a bottom bar | ||
| // covers the hero CTA, and on a phone a corner card does. | ||
| const PLACEMENTS = [ | ||
| { | ||
| name: "corner-left", | ||
| container: "bottom-4 left-4 w-72 flex-col items-stretch", | ||
| compact: false, | ||
| }, | ||
| { | ||
| name: "corner-right", | ||
| container: "bottom-4 right-4 w-72 flex-col items-stretch", | ||
| compact: false, | ||
| }, | ||
| { | ||
| name: "bar", | ||
| container: "inset-x-4 bottom-4 flex-col sm:flex-row sm:items-center", | ||
| compact: false, | ||
| }, | ||
| { | ||
| name: "compact-right", | ||
| container: "bottom-2 right-2 flex-row items-center", | ||
| compact: true, | ||
| }, | ||
| { | ||
| name: "compact-left", | ||
| container: "bottom-2 left-2 flex-row items-center", | ||
| compact: true, | ||
| }, | ||
| ] as const; | ||
|
|
||
| function overlaps(a: DOMRect, b: DOMRect): boolean { | ||
| return ( | ||
| a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom | ||
| ); | ||
| } | ||
|
|
||
| function coversKeepClear(banner: HTMLElement): boolean { | ||
| // Measure where the banner sits once its entrance animation ends. | ||
| const rect = banner.getBoundingClientRect(); | ||
| const offsetY = Number.parseFloat( | ||
| getComputedStyle(banner).transform.split(",")[5] ?? "0", | ||
| ); | ||
| const settled = new DOMRect( | ||
| rect.x, | ||
| rect.y - (Number.isFinite(offsetY) ? offsetY : 0), | ||
| rect.width, | ||
| rect.height, | ||
| ); | ||
| for (const element of document.querySelectorAll( | ||
| `[${KEEP_CLEAR_ATTRIBUTE}]`, | ||
| )) { | ||
| const target = element.getBoundingClientRect(); | ||
| if (target.width === 0 || target.height === 0) continue; | ||
| if (overlaps(settled, target)) return true; | ||
| } | ||
| return false; | ||
| } | ||
|
|
||
| export function CookieConsent() { | ||
| const [showBanner, setShowBanner] = useState(false); | ||
| const [placementIndex, setPlacementIndex] = useState(0); | ||
| const [viewport, setViewport] = useState<string | null>(null); | ||
| const bannerRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| const consent = localStorage.getItem(ANALYTICS_CONSENT_KEY); | ||
|
|
@@ -20,6 +87,30 @@ export function CookieConsent() { | |
| } | ||
| }, []); | ||
|
|
||
| // Start over from the preferred placement whenever the window changes size. | ||
| useEffect(() => { | ||
| if (!showBanner) return; | ||
| const onResize = () => | ||
| setViewport(`${window.innerWidth}x${window.innerHeight}`); | ||
| onResize(); | ||
| window.addEventListener("resize", onResize); | ||
| return () => window.removeEventListener("resize", onResize); | ||
| }, [showBanner]); | ||
|
|
||
| // biome-ignore lint/correctness/useExhaustiveDependencies: viewport is the trigger | ||
| useLayoutEffect(() => { | ||
| setPlacementIndex(0); | ||
| }, [viewport]); | ||
|
|
||
| // biome-ignore lint/correctness/useExhaustiveDependencies: re-measure after a resize even when the placement stays the same | ||
| useLayoutEffect(() => { | ||
| const banner = bannerRef.current; | ||
| if (!showBanner || !banner) return; | ||
| if (placementIndex < PLACEMENTS.length - 1 && coversKeepClear(banner)) { | ||
|
Contributor
There was a problem hiding this comment. P1: The final Prompt for AI agents |
||
| setPlacementIndex(placementIndex + 1); | ||
| } | ||
| }, [showBanner, placementIndex, viewport]); | ||
|
Comment on lines
+105
to
+112
Contributor
There was a problem hiding this comment. Recheck placement when marked actions move. If a visitor scrolls while the banner is open, a marked action can move behind the fixed banner without changing any dependency of this effect. Client-side navigation can also replace marked actions while the banner remains mounted in the layout. Recheck overlap when the marked elements move or change; otherwise, a previously safe placement can cover a CTA. (raw.githubusercontent.com)
 |
||
|
|
||
| const handleAccept = () => { | ||
| localStorage.setItem(ANALYTICS_CONSENT_KEY, "accepted"); | ||
| setShowBanner(false); | ||
|
|
@@ -32,36 +123,59 @@ export function CookieConsent() { | |
| setShowBanner(false); | ||
| }; | ||
|
|
||
| const placement = PLACEMENTS[placementIndex] ?? PLACEMENTS[0]; | ||
|
|
||
| return ( | ||
| <AnimatePresence> | ||
| {showBanner && ( | ||
| <m.div | ||
| ref={bannerRef} | ||
| data-placement={placement.name} | ||
| initial={{ y: 20, opacity: 0 }} | ||
| animate={{ y: 0, opacity: 1 }} | ||
| exit={{ y: 20, opacity: 0 }} | ||
| transition={{ type: "spring", damping: 25, stiffness: 300 }} | ||
| className={cn( | ||
| "fixed z-50 flex rounded-lg border border-border bg-card shadow-lg", | ||
| placement.compact ? "gap-2 p-2" : "gap-3 p-3 sm:p-4", | ||
| placement.container, | ||
| )} | ||
| > | ||
| <p | ||
| className={cn( | ||
| "text-muted-foreground", | ||
| placement.compact ? "text-xs" : "text-sm sm:flex-1", | ||
| )} | ||
| > | ||
| {placement.compact ? ( | ||
| <Link | ||
| href="/privacy" | ||
| className="font-medium text-foreground underline-offset-4 hover:underline" | ||
| > | ||
| <Trans>Analytics cookies</Trans> | ||
|
Contributor
There was a problem hiding this comment. P2: Compact mode drops the existing explanation and introduces a new Prompt for AI agents |
||
| </Link> | ||
| ) : ( | ||
| <> | ||
| <Trans> | ||
| We only collect analytics cookies so we can improve your | ||
| experience. | ||
| </Trans>{" "} | ||
| <Link | ||
| href="/privacy" | ||
| className="font-medium text-foreground underline-offset-4 hover:underline" | ||
| > | ||
| <Trans>Privacy policy</Trans> | ||
| </Link> | ||
| </> | ||
| )} | ||
| </p> | ||
| <div className="grid shrink-0 grid-cols-2 gap-2"> | ||
| <Button variant="outline" size="sm" onClick={handleOptOut}> | ||
| <Trans>Opt-out</Trans> | ||
| </Button> | ||
| <Button variant="outline" size="sm" onClick={handleAccept}> | ||
| <Trans>Accept</Trans> | ||
| </Button> | ||
| </div> | ||
| </m.div> | ||
| )} | ||
|
|
||
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 |
|---|---|---|
|
|
@@ -2605,6 +2605,9 @@ msgstr "Đã xảy ra lỗi không xác định" | |
| msgid "An update is ready to install." | ||
| msgstr "Đã có bản cập nhật sẵn sàng để cài đặt." | ||
|
|
||
| msgid "Analytics cookies" | ||
| msgstr "Cookie phân tích" | ||
|
|
||
| msgid "Android is on the way. Be first to know when it ships." | ||
| msgstr "Bản Android đang đến. Hãy là người đầu tiên biết khi nó ra mắt." | ||
|
|
||
|
|
||
This file contains hidden or 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 |
|---|---|---|
|
|
@@ -2605,6 +2605,9 @@ msgstr "发生未知错误" | |
| msgid "An update is ready to install." | ||
| msgstr "更新已准备好安装。" | ||
|
|
||
| msgid "Analytics cookies" | ||
| msgstr "分析 Cookie" | ||
|
|
||
| msgid "Android is on the way. Be first to know when it ships." | ||
| msgstr "Android 版即将到来。发布时第一时间通知你。" | ||
|
|
||
|
|
||
This file contains hidden or 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 |
|---|---|---|
|
|
@@ -2605,6 +2605,9 @@ msgstr "發生未知錯誤" | |
| msgid "An update is ready to install." | ||
| msgstr "更新已準備好安裝。" | ||
|
|
||
| msgid "Analytics cookies" | ||
| msgstr "分析 Cookie" | ||
|
|
||
| msgid "Android is on the way. Be first to know when it ships." | ||
| msgstr "Android 版即將推出。發布時第一時間通知你。" | ||
|
|
||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mark the actions, not the full-width row.
If this row reaches the banner’s height, its flex container can extend across empty space to the right of the buttons. The overlap check then rejects
compact-righteven when it clears both actions. Selection can continue tocompact-left, which may cover the left-aligned download button. Mark each action’s bounds instead of the row’s bounds. (raw.githubusercontent.com)