diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/translations/CookieBannerTranslationsPage.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/translations/CookieBannerTranslationsPage.tsx index 0f7c84ea3..58c6cfab8 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/translations/CookieBannerTranslationsPage.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/translations/CookieBannerTranslationsPage.tsx @@ -41,6 +41,8 @@ export const cookieBannerTranslationsPageQuery = graphql` node { id name + slug + description kind } } @@ -79,30 +81,44 @@ export default function CookieBannerTranslationsPage({ t => t.language === selectedLanguage, ); - const translationJson = useMemo(() => { - if (!selectedTranslation) return null; + const { uiStrings, categoryTranslations } = useMemo(() => { + if (!selectedTranslation) { + return { uiStrings: null, categoryTranslations: null }; + } try { - return JSON.parse(selectedTranslation.translations) as Record< - string, - string - >; + const raw = JSON.parse(selectedTranslation.translations) as Record; + const ui: Record = {}; + let cats: Record | null = null; + + for (const [k, v] of Object.entries(raw)) { + if (k === "categories" && typeof v === "object" && v !== null) { + cats = v as Record; + } else if (typeof v === "string") { + ui[k] = v; + } + } + + return { uiStrings: ui, categoryTranslations: cats }; } catch { - return null; + return { uiStrings: null, categoryTranslations: null }; } }, [selectedTranslation]); - const categoryNames = useMemo( + const categories = useMemo( () => banner.categories.edges.map(e => ({ + id: e.node.id, name: e.node.name, + slug: e.node.slug, + description: e.node.description, kind: e.node.kind, - })) ?? [], + })), [banner.categories], ); const necessaryCategoryName = useMemo( - () => categoryNames.find(c => c.kind === "NECESSARY")?.name ?? "Necessary", - [categoryNames], + () => categories.find(c => c.kind === "NECESSARY")?.name ?? "Necessary", + [categories], ); return ( @@ -129,9 +145,10 @@ export default function CookieBannerTranslationsPage({ key={selectedLanguage} cookieBannerId={banner.id} language={selectedLanguage} - existingTranslations={translationJson} + existingTranslations={uiStrings} + existingCategoryTranslations={categoryTranslations} showBranding={banner.showBranding} - categoryNames={categoryNames.map(c => c.name)} + categories={categories} necessaryCategoryName={necessaryCategoryName} /> diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/translations/_components/PanelPreview.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/translations/_components/PanelPreview.tsx index ea958f59d..d9bd0e70d 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/translations/_components/PanelPreview.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/translations/_components/PanelPreview.tsx @@ -12,19 +12,29 @@ // OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR // PERFORMANCE OF THIS SOFTWARE. +interface CategoryPreview { + name: string; + description: string; + isNecessary: boolean; +} + interface PanelPreviewProps { panelTitle: string; panelDescription: string; + buttonAcceptAll: string; + buttonRejectAll: string; buttonSave: string; - categoryNames: string[]; + categories: CategoryPreview[]; necessaryCategoryName: string; } export function PanelPreview({ panelTitle, panelDescription, + buttonAcceptAll, + buttonRejectAll, buttonSave, - categoryNames, + categories, necessaryCategoryName, }: PanelPreviewProps) { const descriptionParts = panelDescription.split( @@ -46,7 +56,7 @@ export function PanelPreview({ lineHeight: 1.5, maxWidth: 380, width: "100%", - padding: "24px", + padding: "24px 24px 12px 24px", }} >

- {categoryNames.map(name => ( + {categories.map(cat => (
- {name} +
+ {cat.name} + {cat.description && ( + + {cat.description} + + )} +
@@ -122,11 +145,19 @@ export function PanelPreview({ ))}
-
+
+ +