rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize cookie banner configuration pages

Browse Source 
Move JS snippet (CodeSnippets) into Settings, move category
sorting (CategoryList) into the renamed Display page, remove
the blocking-scripts step, and rename the Snippet tab to Display.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-27 12:04:48 +04:00
parent bdb16d4abe
commit 4b08a465d4
9 changed files with 66 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx
View File

@@ -247,9 +247,9 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi
<IconGlobe size={20} />
{__("Translations")}
</TabLink>
<TabLink to={`/organizations/${organizationId}/cookie-banners/${cookieBannerId}/snippet`}>
<TabLink to={`/organizations/${organizationId}/cookie-banners/${cookieBannerId}/display`}>
<IconPageTextLine size={20} />
{__("JS / CSS snippets")}
{__("Display")}
</TabLink>
</Tabs>

19
apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx
View File

@@ -15,7 +15,6 @@
import { formatError, type GraphQLError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Badge, Button, Card, IconArrowDown, IconArrowUp, useConfirm, useToast } from "@probo/ui";
import { useState } from "react";
import { useFragment, useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -23,8 +22,6 @@ import type { CategoryList_cookieBanner$key } from "#/__generated__/core/Categor
import type { CategoryListDeleteMutation } from "#/__generated__/core/CategoryListDeleteMutation.graphql";
import type { CategoryListReorderMutation } from "#/__generated__/core/CategoryListReorderMutation.graphql";
import { CategoryDialog } from "./CategoryDialog";
const categoryListFragment = graphql`
fragment CategoryList_cookieBanner on CookieBanner {
id
@@ -88,7 +85,6 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
const { __ } = useTranslate();
const { toast } = useToast();
const confirm = useConfirm();
const [showCreateDialog, setShowCreateDialog] = useState(false);
const banner = useFragment(categoryListFragment, cookieBannerKey);
const connectionId = banner.categories.__id;
@@ -156,12 +152,7 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="font-medium">{__("Categories Sorting")}</h3>
<Button variant="secondary" onClick={() => setShowCreateDialog(true)}>
{__("Add Category")}
</Button>
</div>
<h3 className="font-medium">{__("Categories Sorting")}</h3>
<p className="text-sm text-txt-secondary">
{__("Categories will be displayed in your cookie banner in the same order as below.")}
</p>
@@ -210,14 +201,6 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) {
))}
</Card>
{showCreateDialog && (
<CategoryDialog
cookieBannerId={banner.id}
connectionId={connectionId}
nextRank={sorted.length > 0 ? sorted[sorted.length - 1].rank + 1 : 0}
onOpenChange={setShowCreateDialog}
/>
)}
</div>
);
}

52
apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPage.tsx Normal file
View File

@@ -0,0 +1,52 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { graphql } from "relay-runtime";
import type { CookieBannerDisplayPageQuery } from "#/__generated__/core/CookieBannerDisplayPageQuery.graphql";
import { CategoryList } from "../_components/CategoryList";
import { ThemePreview } from "./_components/ThemePreview";
export const cookieBannerDisplayPageQuery = graphql`
query CookieBannerDisplayPageQuery($cookieBannerId: ID!) {
node(id: $cookieBannerId) @required(action: THROW) {
__typename
... on CookieBanner {
...CategoryList_cookieBanner
...ThemePreview_cookieBanner
}
}
}
`;
interface CookieBannerDisplayPageProps {
queryRef: PreloadedQuery<CookieBannerDisplayPageQuery>;
}
export default function CookieBannerDisplayPage({ queryRef }: CookieBannerDisplayPageProps) {
const data = usePreloadedQuery(cookieBannerDisplayPageQuery, queryRef);
if (data.node.__typename !== "CookieBanner") {
throw new Error("invalid type for node");
}
return (
<div className="space-y-8">
<CategoryList cookieBannerKey={data.node} />
<ThemePreview cookieBannerKey={data.node} />
</div>
);
}

10
apps/console/src/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPageLoader.tsx → apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPageLoader.tsx
View File

@@ -16,14 +16,14 @@ import { Suspense, useEffect } from "react";
import { useQueryLoader } from "react-relay";
import { useParams } from "react-router";
import type { CookieBannerSnippetPageQuery } from "#/__generated__/core/CookieBannerSnippetPageQuery.graphql";
import type { CookieBannerDisplayPageQuery } from "#/__generated__/core/CookieBannerDisplayPageQuery.graphql";
import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
import CookieBannerSnippetPage, { cookieBannerSnippetPageQuery } from "./CookieBannerSnippetPage";
import CookieBannerDisplayPage, { cookieBannerDisplayPageQuery } from "./CookieBannerDisplayPage";
export default function CookieBannerSnippetPageLoader() {
export default function CookieBannerDisplayPageLoader() {
const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
const [queryRef, loadQuery] = useQueryLoader<CookieBannerSnippetPageQuery>(cookieBannerSnippetPageQuery);
const [queryRef, loadQuery] = useQueryLoader<CookieBannerDisplayPageQuery>(cookieBannerDisplayPageQuery);
useEffect(() => {
if (cookieBannerId) {
@@ -37,7 +37,7 @@ export default function CookieBannerSnippetPageLoader() {
return (
<Suspense fallback={<PageSkeleton />}>
<CookieBannerSnippetPage queryRef={queryRef} />
<CookieBannerDisplayPage queryRef={queryRef} />
</Suspense>
);
}

3
apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx → apps/console/src/pages/organizations/cookie-banners/configuration/display/_components/ThemePreview.tsx
View File

@@ -157,8 +157,6 @@ export function ThemePreview({ cookieBannerKey }: ThemePreviewProps) {
</div>
</Card>
<h3 className="font-medium text-lg">{__("Preview")}</h3>
<Card className="border overflow-hidden">
<div
className="relative flex items-end justify-center bg-[repeating-conic-gradient(#e5e7eb_0%_25%,transparent_0%_50%)] bg-size-[20px_20px] p-8"
@@ -169,7 +167,6 @@ export function ThemePreview({ cookieBannerKey }: ThemePreviewProps) {
</Card>
<div className="flex items-center justify-between">
<h3 className="font-medium text-lg">{__("CSS Snippet")}</h3>
<Button variant="secondary" onClick={handleCopyCSS}>
{__("Copy")}
</Button>

6
apps/console/src/pages/organizations/cookie-banners/configuration/settings/CookieBannerSettingsPage.tsx
View File

@@ -18,7 +18,8 @@ import { graphql } from "relay-runtime";
import type { CookieBannerSettingsPageQuery } from "#/__generated__/core/CookieBannerSettingsPageQuery.graphql";
import { BannerSettingsForm } from "../_components/BannerSettingsForm";
import { CategoryList } from "../_components/CategoryList";
import { CodeSnippets } from "./_components/CodeSnippets";
export const cookieBannerSettingsPageQuery = graphql`
query CookieBannerSettingsPageQuery($cookieBannerId: ID!) {
@@ -26,7 +27,6 @@ export const cookieBannerSettingsPageQuery = graphql`
__typename
... on CookieBanner {
...BannerSettingsForm_cookieBanner
...CategoryList_cookieBanner
}
}
}
@@ -48,7 +48,7 @@ export default function CookieBannerSettingsPage({
return (
<div className="space-y-8">
<BannerSettingsForm cookieBannerKey={data.node} />
<CategoryList cookieBannerKey={data.node} />
<CodeSnippets />
</div>
);
}

1
apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/CodeSnippets.tsx → apps/console/src/pages/organizations/cookie-banners/configuration/settings/_components/CodeSnippets.tsx
View File

@@ -51,6 +51,7 @@ export function CodeSnippets() {
return (
<div className="space-y-3">
<h3 className="font-medium">{__("JS snippet")}</h3>
<Card className="rounded-lg border">
<div className="flex items-center justify-end border-b border-border-low px-1 py-1">
<Button variant="secondary" onClick={handleCopy}>

129
apps/console/src/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPage.tsx
View File

@@ -1,129 +0,0 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Card } from "@probo/ui";
import type { ReactNode } from "react";
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { graphql } from "relay-runtime";
import type { CookieBannerSnippetPageQuery } from "#/__generated__/core/CookieBannerSnippetPageQuery.graphql";
import { CodeSnippets } from "./_components/CodeSnippets";
import { ThemePreview } from "./_components/ThemePreview";
export const cookieBannerSnippetPageQuery = graphql`
query CookieBannerSnippetPageQuery($cookieBannerId: ID!) {
node(id: $cookieBannerId) @required(action: THROW) {
__typename
... on CookieBanner {
...ThemePreview_cookieBanner
}
}
}
`;
interface CookieBannerSnippetPageProps {
queryRef: PreloadedQuery<CookieBannerSnippetPageQuery>;
}
export default function CookieBannerSnippetPage({ queryRef }: CookieBannerSnippetPageProps) {
const { __ } = useTranslate();
const data = usePreloadedQuery(cookieBannerSnippetPageQuery, queryRef);
if (data.node.__typename !== "CookieBanner") {
throw new Error("invalid type for node");
}
return (
<div className="space-y-10">
<Step
number={1}
title={__("Add the cookie banner snippet")}
description={__("Include the Probo cookie banner on your website by adding one of the following snippets. The banner will automatically appear and collect visitor consent.")}
>
<CodeSnippets />
</Step>
<Step
number={2}
title={__("Customize the theme")}
description={__("Adjust colors, fonts, and spacing to match your brand. The generated CSS snippet can be added to your website to override the default banner styles.")}
>
<ThemePreview cookieBannerKey={data.node} />
</Step>
<Step
number={3}
title={__("Tag third-party elements with consent categories")}
description={__("Mark scripts, iframes, and other third-party resources with a data-cookie-consent attribute so they only load after the visitor grants consent for the corresponding category. Replace src with data-src (or href with data-href) to prevent the browser from loading the resource before consent is given.")}
>
<div className="space-y-4">
<Card className="border">
<pre className="overflow-x-auto p-4 text-sm font-mono text-invert bg-accent rounded-lg">
<code>
{`<!-- Before: loads immediately -->
<script src="https://analytics.example.com/tracker.js"></script>
<!-- After: loads only when "analytics" consent is granted -->
<script
type="text/plain"
data-cookie-consent="analytics"
data-src="https://analytics.example.com/tracker.js"
></script>`}
</code>
</pre>
</Card>
<p className="text-sm text-txt-secondary">
{__("The same approach works for iframes, images, stylesheets, and other elements.")}
{" "}
<a
href="https://docs.getprobo.com/docs/product/cookie-banner/blocking-resources.html"
target="_blank"
rel="noopener noreferrer"
className="text-txt-primary underline hover:no-underline"
>
{__("See our documentation for the full list of supported elements and detailed integration guides.")}
</a>
</p>
</div>
</Step>
</div>
);
}
interface StepProps {
number: number;
title: string;
description: string;
children: ReactNode;
}
function Step({ number, title, description, children }: StepProps) {
return (
<div className="flex gap-4">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-semibold text-invert">
{number}
</div>
<div className="min-w-0 flex-1 space-y-4">
<div>
<h3 className="text-lg font-medium">{title}</h3>
<p className="mt-1 text-sm text-txt-secondary">{description}</p>
</div>
{children}
</div>
</div>
);
}

4
apps/console/src/pages/organizations/cookie-banners/routes.ts
View File

@@ -60,9 +60,9 @@ export const cookieBannerRoutes = [
Component: lazy(() => import("#/pages/organizations/cookie-banners/configuration/translations/CookieBannerTranslationsPageLoader")),
},
{
path: "snippet",
path: "display",
Fallback: LinkCardSkeleton,
Component: lazy(() => import("#/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPageLoader")),
Component: lazy(() => import("#/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPageLoader")),
},
],
},