allow banner id changes

This commit is contained in:
Pas 2025-07-11 16:15:48 -06:00
parent b81685a9b0
commit 102c228f3c
2 changed files with 15 additions and 10 deletions

View file

@ -31,6 +31,7 @@ interface Config {
AD_CONTENT_URL: string;
TRACK_SCRIPT: string;
BANNER_MESSAGE: string;
BANNER_ID: string;
}
export interface RuntimeConfig {
@ -58,6 +59,7 @@ export interface RuntimeConfig {
AD_CONTENT_URL: string[];
TRACK_SCRIPT: string | null;
BANNER_MESSAGE: string | null;
BANNER_ID: string | null;
}
const env: Record<keyof Config, undefined | string> = {
@ -88,6 +90,7 @@ const env: Record<keyof Config, undefined | string> = {
AD_CONTENT_URL: import.meta.env.VITE_AD_CONTENT_URL,
TRACK_SCRIPT: import.meta.env.VITE_TRACK_SCRIPT,
BANNER_MESSAGE: import.meta.env.VITE_BANNER_MESSAGE,
BANNER_ID: import.meta.env.VITE_BANNER_ID,
};
function coerceUndefined(value: string | null | undefined): string | undefined {
@ -161,5 +164,6 @@ export function conf(): RuntimeConfig {
.filter((v) => v.length > 0),
TRACK_SCRIPT: getKey("TRACK_SCRIPT"),
BANNER_MESSAGE: getKey("BANNER_MESSAGE"),
BANNER_ID: getKey("BANNER_ID"),
};
}

View file

@ -22,7 +22,7 @@ export function Banner(props: {
};
useEffect(() => {
const hideBannerFlag = sessionStorage.getItem("hideBanner");
const hideBannerFlag = sessionStorage.getItem(`hideBanner-${props.id}`);
if (hideBannerFlag) {
hideBanner(props.id, true);
}
@ -44,7 +44,7 @@ export function Banner(props: {
className="absolute right-4 hover:cursor-pointer"
onClick={() => {
hideBanner(props.id, true);
sessionStorage.setItem("hideBanner", "true");
sessionStorage.setItem(`hideBanner-${props.id}`, "true");
}}
>
<Icon icon={Icons.X} />
@ -73,21 +73,22 @@ export function BannerLocation(props: { location?: string }) {
}, [setLocation, loc]);
useEffect(() => {
const customMessage = conf().BANNER_MESSAGE;
const config = conf();
const customMessage = config.BANNER_MESSAGE;
const bannerId = config.BANNER_ID || "custom-message";
const shouldShow = customMessage && loc === null;
if (shouldShow) {
showBanner("custom-message");
showBanner(bannerId);
}
}, [loc, showBanner]);
if (currentLocation !== loc) return null;
const hideBannerFlag = sessionStorage.getItem("hideBanner");
if (hideBannerFlag) return null;
const customMessage = conf().BANNER_MESSAGE;
const hasCustomBanner = banners.some((b) => b.id === "custom-message");
const config = conf();
const customMessage = config.BANNER_MESSAGE;
const bannerId = config.BANNER_ID || "custom-message";
const hasCustomBanner = banners.some((b) => b.id === bannerId);
return (
<div>
@ -97,7 +98,7 @@ export function BannerLocation(props: { location?: string }) {
</Banner>
) : null}
{hasCustomBanner && customMessage ? (
<Banner id="custom-message" type="info">
<Banner id={bannerId} type="info">
{customMessage}
</Banner>
) : null}