diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx deleted file mode 100644 index b4f425ad7..000000000 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx +++ /dev/null @@ -1,161 +0,0 @@ -// Copyright (c) 2026 Probo Inc . -// -// 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 { formatError, type GraphQLError } from "@probo/helpers"; -import { useTranslate } from "@probo/i18n"; -import { - Button, - Dialog, - DialogContent, - DialogFooter, - Field, - Input, - Label, - Option, - Select, - useDialogRef, - useToast, -} from "@probo/ui"; -import { useState } from "react"; -import { useMutation } from "react-relay"; -import { graphql } from "relay-runtime"; - -import type { CookieDialogCreateMutation } from "#/__generated__/core/CookieDialogCreateMutation.graphql"; - -const createCookieMutation = graphql` - mutation CookieDialogCreateMutation($input: CreateCookieInput!) { - createCookie(input: $input) { - cookieEdge { - node { - id - name - duration - description - } - } - cookieBanner { - id - latestVersion { - id - version - state - } - } - } - } -`; - -interface Category { - id: string; - name: string; -} - -interface CookieDialogProps { - categories: ReadonlyArray; - onOpenChange: (open: boolean) => void; -} - -export function CookieDialog({ categories, onOpenChange }: CookieDialogProps) { - const { __ } = useTranslate(); - const { toast } = useToast(); - const dialogRef = useDialogRef(); - - const [createCookie, isCreating] = useMutation(createCookieMutation); - - const [categoryId, setCategoryId] = useState(categories[0]?.id ?? ""); - const [name, setName] = useState(""); - const [duration, setDuration] = useState(""); - const [description, setDescription] = useState(""); - - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - - createCookie({ - variables: { - input: { - cookieCategoryId: categoryId, - name: name.trim(), - duration: duration.trim(), - description: description.trim(), - }, - }, - onCompleted(_response, errors) { - if (errors?.length) { - const isConflict = errors.some( - e => (e as unknown as GraphQLError).extensions?.code === "CONFLICT", - ); - toast({ - title: __("Error"), - description: isConflict - ? __("A cookie with this name already exists in this banner") - : errors[0].message, - variant: "error", - }); - return; - } - toast({ title: __("Success"), description: __("Cookie added"), variant: "success" }); - dialogRef.current?.close(); - }, - onError(error) { - toast({ title: __("Error"), description: formatError(__("Failed to add cookie"), error as GraphQLError), variant: "error" }); - }, - }); - }; - - return ( - onOpenChange(false)} - title={__("Add Cookie")} - className="max-w-lg" - > -
- -
- - -
- - - setName(e.target.value)} required /> - - - - setDuration(e.target.value)} - required - placeholder={__("e.g. 1 year")} - /> - - - - setDescription(e.target.value)} required /> - - - - - - -
- - ); -} 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 68fd26bcd..0077fd772 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 @@ -35,12 +35,12 @@ import { useState } from "react"; import { useFragment, useMutation } from "react-relay"; import { ConnectionHandler, graphql } from "relay-runtime"; -import type { CategorySectionCreateCookieMutation } from "#/__generated__/core/CategorySectionCreateCookieMutation.graphql"; -import type { CategorySectionDeleteCookieMutation } from "#/__generated__/core/CategorySectionDeleteCookieMutation.graphql"; +import type { CategorySectionCreatePatternMutation } from "#/__generated__/core/CategorySectionCreatePatternMutation.graphql"; +import type { CategorySectionDeletePatternMutation } from "#/__generated__/core/CategorySectionDeletePatternMutation.graphql"; import type { CategorySectionFragment$key } from "#/__generated__/core/CategorySectionFragment.graphql"; -import type { CategorySectionMoveCookieMutation } from "#/__generated__/core/CategorySectionMoveCookieMutation.graphql"; -import type { CategorySectionUpdateCookieMutation } from "#/__generated__/core/CategorySectionUpdateCookieMutation.graphql"; +import type { CategorySectionMovePatternMutation } from "#/__generated__/core/CategorySectionMovePatternMutation.graphql"; import type { CategorySectionUpdateMutation } from "#/__generated__/core/CategorySectionUpdateMutation.graphql"; +import type { CategorySectionUpdatePatternMutation } from "#/__generated__/core/CategorySectionUpdatePatternMutation.graphql"; import { AddCookieRow } from "./AddCookieRow"; import { EditCategoryForm } from "./EditCategoryForm"; @@ -61,14 +61,14 @@ export const categorySectionFragment = graphql` kind gcmConsentTypes posthogConsent - cookies(first: 100, orderBy: { field: CREATED_AT, direction: ASC }) - @connection(key: "CategorySection_cookies", filters: []) + cookiePatterns(first: 100, orderBy: { field: CREATED_AT, direction: ASC }) + @connection(key: "CategorySection_cookiePatterns", filters: []) @required(action: THROW) { __id edges { node { id - name + displayName duration description ...EditCookieRowFragment @@ -115,16 +115,16 @@ const updateCategoryMutation = graphql` } `; -const createCookieMutation = graphql` - mutation CategorySectionCreateCookieMutation( - $input: CreateCookieInput! +const createPatternMutation = graphql` + mutation CategorySectionCreatePatternMutation( + $input: CreateCookiePatternInput! $connections: [ID!]! ) { - createCookie(input: $input) { - cookieEdge @appendEdge(connections: $connections) { + createCookiePattern(input: $input) { + cookiePatternEdge @appendEdge(connections: $connections) { node { id - name + displayName duration description ...EditCookieRowFragment @@ -142,14 +142,14 @@ const createCookieMutation = graphql` } `; -const updateCookieMutation = graphql` - mutation CategorySectionUpdateCookieMutation( - $input: UpdateCookieInput! +const updatePatternMutation = graphql` + mutation CategorySectionUpdatePatternMutation( + $input: UpdateCookiePatternInput! ) { - updateCookie(input: $input) { - cookie { + updateCookiePattern(input: $input) { + cookiePattern { id - name + displayName duration description updatedAt @@ -166,13 +166,13 @@ const updateCookieMutation = graphql` } `; -const deleteCookieMutation = graphql` - mutation CategorySectionDeleteCookieMutation( - $input: DeleteCookieInput! +const deletePatternMutation = graphql` + mutation CategorySectionDeletePatternMutation( + $input: DeleteCookiePatternInput! $connections: [ID!]! ) { - deleteCookie(input: $input) { - deletedCookieId @deleteEdge(connections: $connections) + deleteCookiePattern(input: $input) { + deletedCookiePatternId @deleteEdge(connections: $connections) cookieBanner { id latestVersion { @@ -185,14 +185,14 @@ const deleteCookieMutation = graphql` } `; -const moveCookieMutation = graphql` - mutation CategorySectionMoveCookieMutation( - $input: MoveCookieToCategoryInput! +const movePatternMutation = graphql` + mutation CategorySectionMovePatternMutation( + $input: MoveCookiePatternToCategoryInput! ) { - moveCookieToCategory(input: $input) { - cookie { + moveCookiePatternToCategory(input: $input) { + cookiePattern { id - name + displayName duration description cookieCategory { @@ -224,22 +224,22 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) const [updateCategory, isUpdating] = useMutation(updateCategoryMutation); - const [createCookie, isCreating] - = useMutation(createCookieMutation); - const [updateCookie, isUpdatingCookie] - = useMutation(updateCookieMutation); - const [deleteCookie] - = useMutation(deleteCookieMutation); - const [moveCookie] - = useMutation(moveCookieMutation); + const [createPattern, isCreating] + = useMutation(createPatternMutation); + const [updatePattern, isUpdatingPattern] + = useMutation(updatePatternMutation); + const [deletePattern] + = useMutation(deletePatternMutation); + const [movePattern] + = useMutation(movePatternMutation); const [isEditingCategory, setIsEditingCategory] = useState(false); const [editingCookieId, setEditingCookieId] = useState(null); const [isAddingCookie, setIsAddingCookie] = useState(false); - const cookiesConnectionId = category.cookies.__id; - const cookies = category.cookies.edges.map(e => e.node); - const isMutating = isUpdating || isCreating || isUpdatingCookie; + const patternsConnectionId = category.cookiePatterns.__id; + const patterns = category.cookiePatterns.edges.map(e => e.node); + const isMutating = isUpdating || isCreating || isUpdatingPattern; const handleSaveCategory = ( name: string, slug: string, description: string, @@ -287,15 +287,17 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) const handleSaveNewCookie = (cookie: CookieEntry) => { if (!cookie.name.trim()) return; - createCookie({ + createPattern({ variables: { input: { cookieCategoryId: category.id, - name: cookie.name, + pattern: cookie.name, + matchType: "EXACT", + displayName: cookie.name, duration: cookie.duration, description: cookie.description, }, - connections: [cookiesConnectionId], + connections: [patternsConnectionId], }, onCompleted(_response, errors) { if (errors?.length) { @@ -331,13 +333,13 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) }); }; - const handleSaveEditCookie = (cookieId: string, cookie: CookieEntry) => { + const handleSaveEditCookie = (patternId: string, cookie: CookieEntry) => { if (!cookie.name.trim()) return; - updateCookie({ + updatePattern({ variables: { input: { - cookieId, - name: cookie.name, + cookiePatternId: patternId, + displayName: cookie.name, duration: cookie.duration, description: cookie.description, }, @@ -376,11 +378,11 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) }); }; - const handleDeleteCookie = (cookieId: string) => { - deleteCookie({ + const handleDeleteCookie = (patternId: string) => { + deletePattern({ variables: { - input: { cookieId }, - connections: [cookiesConnectionId], + input: { cookiePatternId: patternId }, + connections: [patternsConnectionId], }, onCompleted(_response, errors) { if (errors?.length) { @@ -413,11 +415,11 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) const allCategories = category.cookieBanner.categories.edges.map(e => e.node) ?? []; const siblingCategories = allCategories.filter(c => c.id !== category.id); - const handleMoveCookie = (cookieId: string, targetCategoryId: string) => { - moveCookie({ + const handleMoveCookie = (patternId: string, targetCategoryId: string) => { + movePattern({ variables: { input: { - cookieId, + cookiePatternId: patternId, targetCookieCategoryId: targetCategoryId, }, }, @@ -426,10 +428,10 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) if (sourceCategory) { const sourceConn = ConnectionHandler.getConnection( sourceCategory, - "CategorySection_cookies", + "CategorySection_cookiePatterns", ); if (sourceConn) { - ConnectionHandler.deleteNode(sourceConn, cookieId); + ConnectionHandler.deleteNode(sourceConn, patternId); } } @@ -437,16 +439,16 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) if (targetCategory) { const targetConn = ConnectionHandler.getConnection( targetCategory, - "CategorySection_cookies", + "CategorySection_cookiePatterns", ); if (targetConn) { - const cookieRecord = store.get(cookieId); - if (cookieRecord) { + const patternRecord = store.get(patternId); + if (patternRecord) { const newEdge = ConnectionHandler.createEdge( store, targetConn, - cookieRecord, - "CookieEdge", + patternRecord, + "CookiePatternEdge", ); ConnectionHandler.insertEdgeAfter(targetConn, newEdge); } @@ -573,34 +575,34 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps) - {cookies.map(cookie => - editingCookieId === cookie.id + {patterns.map(pattern => + editingCookieId === pattern.id ? ( handleSaveEditCookie(cookie.id, updated)} + onSave={updated => handleSaveEditCookie(pattern.id, updated)} onCancel={() => setEditingCookieId(null)} /> ) : ( - + - {cookie.name} + {pattern.displayName} - {cookie.duration} + {pattern.duration} - {cookie.description} + {pattern.description}