diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx index b8596d79b..90893b9ec 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx @@ -59,6 +59,7 @@ export const categorySectionFragment = graphql` slug description kind + gcmConsentTypes cookies(first: 100, orderBy: { field: CREATED_AT, direction: ASC }) @connection(key: "CategorySection_cookies", filters: []) @required(action: THROW) { @@ -97,6 +98,7 @@ const updateCategoryMutation = graphql` slug description rank + gcmConsentTypes updatedAt } cookieBanner { @@ -237,7 +239,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) const cookies = category.cookies.edges.map(e => e.node); const isMutating = isUpdating || isCreating || isUpdatingCookie; - const handleSaveCategory = (name: string, slug: string, description: string) => { + const handleSaveCategory = (name: string, slug: string, description: string, gcmConsentTypes: string[]) => { updateCategory({ variables: { input: { @@ -245,6 +247,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) name, slug, description, + gcmConsentTypes, }, }, onCompleted(_response, errors) { @@ -481,6 +484,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) name={category.name} slug={category.slug} description={category.description} + gcmConsentTypes={[...category.gcmConsentTypes]} isUpdating={isUpdating} onSave={handleSaveCategory} onCancel={() => setIsEditingCategory(false)} @@ -525,6 +529,18 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) "

+ {category.gcmConsentTypes.length > 0 && ( +
+ + {__("Google Consent Mode:")} + + {category.gcmConsentTypes.map(type => ( + + {type} + + ))} +
+ )} )} diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCategoryForm.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCategoryForm.tsx index f861357a1..500b569fb 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCategoryForm.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCategoryForm.tsx @@ -16,12 +16,23 @@ import { useTranslate } from "@probo/i18n"; import { Button, Input, Textarea } from "@probo/ui"; import { useState } from "react"; +const GCM_CONSENT_TYPES = [ + "analytics_storage", + "ad_storage", + "ad_user_data", + "ad_personalization", + "functionality_storage", + "personalization_storage", + "security_storage", +] as const; + interface EditCategoryFormProps { name: string; slug: string; description: string; + gcmConsentTypes: string[]; isUpdating: boolean; - onSave: (name: string, slug: string, description: string) => void; + onSave: (name: string, slug: string, description: string, gcmConsentTypes: string[]) => void; onCancel: () => void; } @@ -29,6 +40,7 @@ export function EditCategoryForm({ name, slug, description, + gcmConsentTypes, isUpdating, onSave, onCancel, @@ -37,6 +49,15 @@ export function EditCategoryForm({ const [editName, setEditName] = useState(name); const [editSlug, setEditSlug] = useState(slug); const [editDescription, setEditDescription] = useState(description); + const [editGcmTypes, setEditGcmTypes] = useState(gcmConsentTypes); + + const toggleGcmType = (type: string) => { + setEditGcmTypes(prev => + prev.includes(type) + ? prev.filter(t => t !== type) + : [...prev, type], + ); + }; return (
@@ -57,11 +78,35 @@ export function EditCategoryForm({ placeholder={__("Category description")} rows={2} /> +
+ +

+ {__("Select the Google Consent Mode signals this category controls.")} +

+
+ {GCM_CONSENT_TYPES.map(type => ( + + ))} +
+