diff --git a/CHANGELOG.md b/CHANGELOG.md index 0291d19334..c4498b1d2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,14 +19,22 @@ The types of changes are: ## [Unreleased](https://github.com/ethyca/fides/compare/2.14.1...main) ### Added - +- Privacy center can now render its consent values based on Privacy Notices and Privacy Experiences [#3411](https://github.com/ethyca/fides/pull/3411) - Add Google Tag Manager and Privacy Center ENV vars to sample app [#2949](https://github.com/ethyca/fides/pull/2949) - Add `notice_key` field to Privacy Notice UI form [#3403](https://github.com/ethyca/fides/pull/3403) +- Add `identity` query param to the consent reporting API view [#3418](https://github.com/ethyca/fides/pull/3418) +- Use `rollup-plugin-postcss` to bundle and optimize the `fides.js` components CSS [#3411](https://github.com/ethyca/fides/pull/3411) +- Dispatch Fides.js lifecycle events on window (FidesInitialized, FidesUpdated) and cross-publish to Fides.gtm() integration [#3411](https://github.com/ethyca/fides/pull/3411) - Added the ability to use custom CAs with Redis via TLS [#3451](https://github.com/ethyca/fides/pull/3451) - Add default experience configs on startup [#3449](https://github.com/ethyca/fides/pull/3449) - Load default privacy notices on startup [#3401](https://github.com/ethyca/fides/pull/3401) - Add ability for users to pass in additional parameters for application database connection [#3450](https://github.com/ethyca/fides/pull/3450) - Load default privacy notices on startup [#3401](https://github.com/ethyca/fides/pull/3401/files) +- Add ability for `fides-js` to make API calls to Fides [#3411](https://github.com/ethyca/fides/pull/3411) +- `fides-js` banner is now responsive across different viewport widths [#3411](https://github.com/ethyca/fides/pull/3411) +- Add ability to close `fides-js` banner and modal via a button or ESC [#3411](https://github.com/ethyca/fides/pull/3411) +- Add ability to open the `fides-js` modal from a link on the host site [#3411](https://github.com/ethyca/fides/pull/3411) +- GPC preferences are automatically applied via `fides-js` [#3411](https://github.com/ethyca/fides/pull/3411) ### Fixed @@ -34,6 +42,8 @@ The types of changes are: - Fix overlay rendering issue by finding/creating a dedicated parent element for Preact [#3397](https://github.com/ethyca/fides/pull/3397) - Fix the sample app privacy center link to be configurable [#3409](https://github.com/ethyca/fides/pull/3409) - Fix CLI output showing a version warning for Snowflake [#3434](https://github.com/ethyca/fides/pull/3434) +- Flaky custom field Cypress test on systems page [#3408](https://github.com/ethyca/fides/pull/3408) +- Fix NextJS errors & warnings for Cookie House sample app [#3411](https://github.com/ethyca/fides/pull/3411) ### Changed @@ -55,10 +65,6 @@ The types of changes are: - Handle an edge case when generating tags that finds them out of sequence [#3405](https://github.com/ethyca/fides/pull/3405) - Add support for pushing `prerelease` and `rc` tagged images to Dockerhub [#3474](https://github.com/ethyca/fides/pull/3474) -### Fixed - -- Flaky custom field Cypress test on systems page [#3408](https://github.com/ethyca/fides/pull/3408) - ### Removed - Removed the deprecated `system_dependencies` from `System` resources, migrating to `egress` [#3285](https://github.com/ethyca/fides/pull/3285) diff --git a/clients/admin-ui/package.json b/clients/admin-ui/package.json index 36bb5973d7..c1b0538a40 100644 --- a/clients/admin-ui/package.json +++ b/clients/admin-ui/package.json @@ -7,6 +7,7 @@ "analyze:server": "cross-env BUNDLE_ANALYZE=server next build", "build": "next build", "chrome:debug": "BROWSER='google chrome' BROWSER_ARGS='--remote-debugging-port=9222' npm run dev", + "clean": "rm -rf .turbo node_modules", "copy-export": "mkdir -p ../../src/fides/ui-build/static/admin/ && rsync -a --delete out/ ../../src/fides/ui-build/static/admin/", "cy:open": "cypress open", "cy:run": "cypress run", diff --git a/clients/admin-ui/src/types/api/models/ConsentReport.ts b/clients/admin-ui/src/types/api/models/ConsentReport.ts index 0237a30dc5..a120d82ba1 100644 --- a/clients/admin-ui/src/types/api/models/ConsentReport.ts +++ b/clients/admin-ui/src/types/api/models/ConsentReport.ts @@ -13,6 +13,7 @@ export type ConsentReport = { opt_in: boolean; has_gpc_flag?: boolean; conflicts_with_gpc?: boolean; + id: string; identity: IdentityBase; created_at: string; updated_at: string; diff --git a/clients/admin-ui/src/types/api/models/ConsentReportingSchema.ts b/clients/admin-ui/src/types/api/models/ConsentReportingSchema.ts index 35ada0f8e0..94a00c40cb 100644 --- a/clients/admin-ui/src/types/api/models/ConsentReportingSchema.ts +++ b/clients/admin-ui/src/types/api/models/ConsentReportingSchema.ts @@ -33,7 +33,7 @@ export type ConsentReportingSchema = { url_recorded?: string; user_agent?: string; experience_config_history_id?: string; - privacy_experience_history_id?: string; + privacy_experience_id?: string; truncated_ip_address?: string; method?: ConsentMethod; }; diff --git a/clients/admin-ui/src/types/api/models/ExperienceConfigCreate.ts b/clients/admin-ui/src/types/api/models/ExperienceConfigCreate.ts index 12dd1c32cc..c897bbf87e 100644 --- a/clients/admin-ui/src/types/api/models/ExperienceConfigCreate.ts +++ b/clients/admin-ui/src/types/api/models/ExperienceConfigCreate.ts @@ -42,9 +42,12 @@ export type ExperienceConfigCreate = { * Overlay 'Privacy preferences link label' */ privacy_preferences_link_label?: string; + /** + * Regions using this ExperienceConfig + */ + regions?: Array; reject_button_label: string; save_button_label: string; title: string; component: ComponentType; - regions: Array; }; diff --git a/clients/admin-ui/src/types/api/models/ExperienceConfigResponse.ts b/clients/admin-ui/src/types/api/models/ExperienceConfigResponse.ts index bb63eb6825..92bfa2050b 100644 --- a/clients/admin-ui/src/types/api/models/ExperienceConfigResponse.ts +++ b/clients/admin-ui/src/types/api/models/ExperienceConfigResponse.ts @@ -46,6 +46,7 @@ export type ExperienceConfigResponse = { * Overlay 'Privacy preferences link label' */ privacy_preferences_link_label?: string; + regions: Array; /** * Overlay 'Reject button displayed on the Banner and 'Privacy Preferences' of Privacy Center 'Reject button label' */ @@ -64,5 +65,4 @@ export type ExperienceConfigResponse = { version: number; created_at: string; updated_at: string; - regions: Array; }; diff --git a/clients/admin-ui/src/types/api/models/ExperienceConfigUpdate.ts b/clients/admin-ui/src/types/api/models/ExperienceConfigUpdate.ts index 2dd42eedf4..17840b49ed 100644 --- a/clients/admin-ui/src/types/api/models/ExperienceConfigUpdate.ts +++ b/clients/admin-ui/src/types/api/models/ExperienceConfigUpdate.ts @@ -45,6 +45,10 @@ export type ExperienceConfigUpdate = { * Overlay 'Privacy preferences link label' */ privacy_preferences_link_label?: string; + /** + * Regions using this ExperienceConfig + */ + regions?: Array; /** * Overlay 'Reject button displayed on the Banner and 'Privacy Preferences' of Privacy Center 'Reject button label' */ @@ -57,8 +61,4 @@ export type ExperienceConfigUpdate = { * Overlay 'Banner title' or Privacy Center 'title' */ title?: string; - /** - * If None, no edits will be made to regions. If an empty list, all regions will be removed. - */ - regions?: Array; }; diff --git a/clients/admin-ui/src/types/api/models/PrivacyExperienceResponse.ts b/clients/admin-ui/src/types/api/models/PrivacyExperienceResponse.ts index 60de2d013e..6abd50347a 100644 --- a/clients/admin-ui/src/types/api/models/PrivacyExperienceResponse.ts +++ b/clients/admin-ui/src/types/api/models/PrivacyExperienceResponse.ts @@ -13,13 +13,10 @@ import type { PrivacyNoticeResponseWithUserPreferences } from "./PrivacyNoticeRe export type PrivacyExperienceResponse = { region: PrivacyNoticeRegion; component?: ComponentType; - disabled?: boolean; experience_config?: ExperienceConfigResponse; id: string; created_at: string; updated_at: string; - version: number; - privacy_experience_history_id: string; show_banner?: boolean; privacy_notices?: Array; }; diff --git a/clients/admin-ui/src/types/api/models/PrivacyNoticeRegion.ts b/clients/admin-ui/src/types/api/models/PrivacyNoticeRegion.ts index 7acdd0b6ea..797d8482b1 100644 --- a/clients/admin-ui/src/types/api/models/PrivacyNoticeRegion.ts +++ b/clients/admin-ui/src/types/api/models/PrivacyNoticeRegion.ts @@ -83,4 +83,11 @@ export enum PrivacyNoticeRegion { EU_SK = "eu_sk", EU_FI = "eu_fi", EU_SE = "eu_se", + GB_ENG = "gb_eng", + GB_SCT = "gb_sct", + GB_WLS = "gb_wls", + GB_NIR = "gb_nir", + ISL = "isl", + NOR = "nor", + LI = "li", } diff --git a/clients/admin-ui/src/types/api/models/PrivacyPreferencesRequest.ts b/clients/admin-ui/src/types/api/models/PrivacyPreferencesRequest.ts index a907e20baa..618986f031 100644 --- a/clients/admin-ui/src/types/api/models/PrivacyPreferencesRequest.ts +++ b/clients/admin-ui/src/types/api/models/PrivacyPreferencesRequest.ts @@ -15,7 +15,7 @@ export type PrivacyPreferencesRequest = { code?: string; preferences: Array; policy_key?: string; - privacy_experience_history_id?: string; + privacy_experience_id?: string; user_geography?: PrivacyNoticeRegion; method?: ConsentMethod; }; diff --git a/clients/cypress-e2e/cypress/e2e/smoke_test.cy.ts b/clients/cypress-e2e/cypress/e2e/smoke_test.cy.ts index 3f6b4791b2..1c4940120a 100644 --- a/clients/cypress-e2e/cypress/e2e/smoke_test.cy.ts +++ b/clients/cypress-e2e/cypress/e2e/smoke_test.cy.ts @@ -88,26 +88,26 @@ describe("Smoke test", () => { // - Data Sales or Sharing => true // - Email Marketing => true // - Product Analytics => true - cy.getByTestId(`consent-item-card-marketing.advertising`).within(() => { + cy.getByTestId(`consent-item-marketing.advertising`).within(() => { cy.contains("Data Sales or Sharing"); cy.getRadio("true").should("be.checked"); cy.getRadio("false").should("not.be.checked"); }); - cy.getByTestId( - `consent-item-card-marketing.advertising.first_party` - ).within(() => { - cy.contains("Email Marketing"); - cy.getRadio("true").should("be.checked"); - cy.getRadio("false").should("not.be.checked"); - }); - cy.getByTestId(`consent-item-card-improve`).within(() => { + cy.getByTestId(`consent-item-marketing.advertising.first_party`).within( + () => { + cy.contains("Email Marketing"); + cy.getRadio("true").should("be.checked"); + cy.getRadio("false").should("not.be.checked"); + } + ); + cy.getByTestId(`consent-item-improve`).within(() => { cy.contains("Product Analytics"); cy.getRadio("true").should("be.checked"); cy.getRadio("false").should("not.be.checked"); }); // Opt-out of data sales / sharing - cy.getByTestId(`consent-item-card-marketing.advertising`).within(() => { + cy.getByTestId(`consent-item-marketing.advertising`).within(() => { cy.getRadio("false").check({ force: true }); }); cy.contains("Save").click(); @@ -121,7 +121,7 @@ describe("Smoke test", () => { cy.get("input#email").type("jenny@example.com"); cy.get("button").contains("Continue").click(); }); - cy.getByTestId(`consent-item-card-marketing.advertising`).within(() => { + cy.getByTestId(`consent-item-marketing.advertising`).within(() => { cy.getRadio("true").should("not.be.checked"); cy.getRadio("false").should("be.checked"); }); diff --git a/clients/cypress-e2e/package.json b/clients/cypress-e2e/package.json index 474836047f..e9822f3344 100644 --- a/clients/cypress-e2e/package.json +++ b/clients/cypress-e2e/package.json @@ -1,5 +1,6 @@ { "scripts": { + "clean": "rm -rf node_modules", "cy:open": "cypress open", "cy:run": "cypress run", "format": "prettier --write .", diff --git a/clients/fides-js/.eslintrc.json b/clients/fides-js/.eslintrc.json index b8652f2140..e7bb25db27 100644 --- a/clients/fides-js/.eslintrc.json +++ b/clients/fides-js/.eslintrc.json @@ -18,6 +18,8 @@ "curly": ["error", "all"], "nonblock-statement-body-position": ["error", "below"], "import/prefer-default-export": "off", + "react/jsx-props-no-spreading": [0], + "react/require-default-props": "off", "import/extensions": "off", "react/react-in-jsx-scope": "off", "react/prop-types": "off", diff --git a/clients/fides-js/__tests__/lib/cookie.test.ts b/clients/fides-js/__tests__/lib/cookie.test.ts index eb9755ee30..9835335638 100644 --- a/clients/fides-js/__tests__/lib/cookie.test.ts +++ b/clients/fides-js/__tests__/lib/cookie.test.ts @@ -3,12 +3,13 @@ import { CookieKeyConsent, FidesCookie, getOrMakeFidesCookie, - makeConsentDefaults, + isNewFidesCookie, + makeConsentDefaultsLegacy, makeFidesCookie, saveFidesCookie, } from "../../src/lib/cookie"; -import type { ConsentConfig } from "../../src/lib/consent-config"; import type { ConsentContext } from "../../src/lib/consent-context"; +import { LegacyConsentConfig } from "~/lib/consent-types"; // Setup mock date const MOCK_DATE = "2023-01-01T12:00:00.000Z"; @@ -47,6 +48,7 @@ describe("makeFidesCookie", () => { consent: {}, fides_meta: { createdAt: MOCK_DATE, + updatedAt: "", version: "0.9.0", }, identity: { @@ -74,12 +76,14 @@ describe("getOrMakeFidesCookie", () => { const cookie: FidesCookie = getOrMakeFidesCookie(); expect(cookie.consent).toEqual({}); expect(cookie.fides_meta.createdAt).toEqual(MOCK_DATE); + expect(cookie.fides_meta.updatedAt).toEqual(""); expect(cookie.identity.fides_user_device_id).toEqual(MOCK_UUID); }); }); describe("when a saved cookie exists", () => { - const SAVED_DATE = "2022-12-25T12:00:00.000Z"; + const CREATED_DATE = "2022-12-24T12:00:00.000Z"; + const UPDATED_DATE = "2022-12-25T12:00:00.000Z"; const SAVED_UUID = "8a46c3ee-d6c3-4518-9b6c-074528b7bfd0"; const SAVED_CONSENT = { data_sales: false, performance: true }; @@ -87,14 +91,19 @@ describe("getOrMakeFidesCookie", () => { const V090_COOKIE = JSON.stringify({ consent: SAVED_CONSENT, identity: { fides_user_device_id: SAVED_UUID }, - fides_meta: { createdAt: SAVED_DATE, version: "0.9.0" }, + fides_meta: { + createdAt: CREATED_DATE, + updatedAt: UPDATED_DATE, + version: "0.9.0", + }, }); beforeEach(() => mockGetCookie.mockReturnValue(V090_COOKIE)); it("returns the saved cookie", () => { const cookie: FidesCookie = getOrMakeFidesCookie(); expect(cookie.consent).toEqual(SAVED_CONSENT); - expect(cookie.fides_meta.createdAt).toEqual(SAVED_DATE); + expect(cookie.fides_meta.createdAt).toEqual(CREATED_DATE); + expect(cookie.fides_meta.updatedAt).toEqual(UPDATED_DATE); expect(cookie.identity.fides_user_device_id).toEqual(SAVED_UUID); }); }); @@ -117,10 +126,17 @@ describe("getOrMakeFidesCookie", () => { describe("saveFidesCookie", () => { afterEach(() => mockSetCookie.mockClear()); + it("updates the updatedAt date", () => { + const cookie: FidesCookie = getOrMakeFidesCookie(); + expect(cookie.fides_meta.updatedAt).toEqual(""); + saveFidesCookie(cookie); + expect(cookie.fides_meta.updatedAt).toEqual(MOCK_DATE); + }); + it("sets a cookie on the root domain with 1 year expiry date", () => { const cookie: FidesCookie = getOrMakeFidesCookie(); - const expectedCookieString = JSON.stringify(cookie); saveFidesCookie(cookie); + const expectedCookieString = JSON.stringify(cookie); // NOTE: signature of the setCookie fn is: setCookie(name, value, attributes, encoding) expect(mockSetCookie.mock.calls).toHaveLength(1); expect(mockSetCookie.mock.calls[0][0]).toEqual("fides_consent"); // name @@ -171,8 +187,8 @@ describe("saveFidesCookie", () => { }); }); -describe("makeConsentDefaults", () => { - const config: ConsentConfig = { +describe("makeConsentDefaultsLegacy", () => { + const config: LegacyConsentConfig = { options: [ { cookieKeys: ["default_undefined"], @@ -205,7 +221,7 @@ describe("makeConsentDefaults", () => { const context: ConsentContext = {}; it("returns the default consent values by key", () => { - expect(makeConsentDefaults({ config, context })).toEqual({ + expect(makeConsentDefaultsLegacy(config, context, false)).toEqual({ default_true: true, default_false: false, default_true_with_gpc_false: true, @@ -220,7 +236,7 @@ describe("makeConsentDefaults", () => { }; it("returns the default consent values by key", () => { - expect(makeConsentDefaults({ config, context })).toEqual({ + expect(makeConsentDefaultsLegacy(config, context, false)).toEqual({ default_true: true, default_false: false, default_true_with_gpc_false: false, @@ -229,3 +245,34 @@ describe("makeConsentDefaults", () => { }); }); }); + +describe("isNewFidesCookie", () => { + it("returns true for new cookies", () => { + const newCookie: FidesCookie = getOrMakeFidesCookie(); + expect(isNewFidesCookie(newCookie)).toBeTruthy(); + }); + + describe("when a saved cookie exists", () => { + const CREATED_DATE = "2022-12-24T12:00:00.000Z"; + const UPDATED_DATE = "2022-12-25T12:00:00.000Z"; + const SAVED_UUID = "8a46c3ee-d6c3-4518-9b6c-074528b7bfd0"; + const SAVED_CONSENT = { data_sales: false, performance: true }; + const V090_COOKIE = JSON.stringify({ + consent: SAVED_CONSENT, + identity: { fides_user_device_id: SAVED_UUID }, + fides_meta: { + createdAt: CREATED_DATE, + updatedAt: UPDATED_DATE, + version: "0.9.0", + }, + }); + beforeEach(() => mockGetCookie.mockReturnValue(V090_COOKIE)); + + it("returns false for saved cookies", () => { + const savedCookie: FidesCookie = getOrMakeFidesCookie(); + expect(savedCookie.fides_meta.createdAt).toEqual(CREATED_DATE); + expect(savedCookie.fides_meta.updatedAt).toEqual(UPDATED_DATE); + expect(isNewFidesCookie(savedCookie)).toBeFalsy(); + }); + }); +}); diff --git a/clients/fides-js/package.json b/clients/fides-js/package.json index 03a8d80b48..0ef55208cc 100644 --- a/clients/fides-js/package.json +++ b/clients/fides-js/package.json @@ -12,7 +12,7 @@ ], "scripts": { "build": "NODE_ENV=production rollup -c", - "clean": "rm -rf dist .turbo", + "clean": "rm -rf dist .turbo node_modules", "format": "prettier --write .", "format:ci": "prettier --check .", "lint": "eslint . --ext .ts,.tsx", @@ -25,6 +25,7 @@ "directory": "clients/fides-js" }, "dependencies": { + "a11y-dialog": "^7.5.2", "preact": "^10.13.2", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -47,13 +48,14 @@ "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "js-cookie": "^3.0.5", + "postcss": "^8.4.24", "prettier": "^2.8.8", "rollup": "^3.21.3", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-dts": "^5.3.0", "rollup-plugin-esbuild": "^5.0.0", "rollup-plugin-filesize": "^10.0.0", - "rollup-plugin-import-css": "^3.2.1", + "rollup-plugin-postcss": "^4.0.2", "ts-jest": "^29.1.0", "typescript": "^4.9.5", "typescript-plugin-css-modules": "^5.0.1" diff --git a/clients/fides-js/rollup.config.mjs b/clients/fides-js/rollup.config.mjs index a828568394..c4b37af066 100644 --- a/clients/fides-js/rollup.config.mjs +++ b/clients/fides-js/rollup.config.mjs @@ -5,7 +5,7 @@ import dts from "rollup-plugin-dts"; import esbuild from "rollup-plugin-esbuild"; import filesize from "rollup-plugin-filesize"; import nodeResolve from "@rollup/plugin-node-resolve"; -import css from "rollup-plugin-import-css"; +import postcss from "rollup-plugin-postcss"; const name = "fides"; const isDev = process.env.NODE_ENV === "development"; @@ -30,7 +30,9 @@ export default [ plugins: [ alias(preactAliases), nodeResolve(), - css(), + postcss({ + minimize: !isDev, + }), esbuild({ minify: !isDev, }), @@ -42,14 +44,6 @@ export default [ verbose: true, hook: "writeBundle", }), - copy({ - // Automatically add the built css to the privacy center's static files for bundling: - targets: [ - { src: `dist/${name}.css`, dest: "../privacy-center/public/lib/" }, - ], - verbose: true, - hook: "writeBundle", - }), filesize({ reporter: [ "boxen", // default reporter, which prints a nice CLI output @@ -92,7 +86,7 @@ export default [ }, { input: `src/${name}.ts`, - plugins: [alias(preactAliases), nodeResolve(), css(), esbuild()], + plugins: [alias(preactAliases), nodeResolve(), postcss(), esbuild()], output: [ { // Compatible with ES module imports. Apps in this repo may be able to share the code. @@ -104,7 +98,7 @@ export default [ }, { input: `src/${name}.ts`, - plugins: [dts(), css()], + plugins: [dts(), postcss()], output: [ { file: `dist/${name}.d.ts`, diff --git a/clients/fides-js/src/components/Button.tsx b/clients/fides-js/src/components/Button.tsx index 6b7602909f..da77438131 100644 --- a/clients/fides-js/src/components/Button.tsx +++ b/clients/fides-js/src/components/Button.tsx @@ -14,8 +14,8 @@ const Button: FunctionComponent = ({ }) => ( +); + +export default CloseButton; diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx index d3cca6ccc6..fe51654ae6 100644 --- a/clients/fides-js/src/components/ConsentBanner.tsx +++ b/clients/fides-js/src/components/ConsentBanner.tsx @@ -1,99 +1,79 @@ import { h, FunctionComponent } from "preact"; -import { useState, useEffect } from "preact/hooks"; import { ButtonType, ExperienceConfig } from "../lib/consent-types"; import Button from "./Button"; -import "../lib/overlay.module.css"; -import { useHasMounted } from "../lib/hooks"; +import CloseButton from "./CloseButton"; interface BannerProps { experience: ExperienceConfig; onAcceptAll: () => void; onRejectAll: () => void; - waitBeforeShow?: number; - managePreferencesLabel?: string; - onOpenModal: () => void; + onManagePreferences: () => void; + onClose: () => void; + bannerIsOpen: boolean; } const ConsentBanner: FunctionComponent = ({ experience, onAcceptAll, onRejectAll, - waitBeforeShow, - managePreferencesLabel = "Manage preferences", - onOpenModal, + onManagePreferences, + onClose, + bannerIsOpen, }) => { - const [isShown, setIsShown] = useState(false); - const hasMounted = useHasMounted(); const { - banner_title: bannerTitle = "Manage your consent", - banner_description: - bannerDescription = "This website processes your data respectfully, so we require your consent to use cookies.", - confirmation_button_label: confirmationButtonLabel = "Accept All", + title = "Manage your consent", + description = "This website processes your data respectfully, so we require your consent to use cookies.", + accept_button_label: acceptButtonLabel = "Accept All", reject_button_label: rejectButtonLabel = "Reject All", + privacy_preferences_link_label: + privacyPreferencesLabel = "Manage preferences", } = experience; - useEffect(() => { - const delayBanner = setTimeout(() => { - setIsShown(true); - }, waitBeforeShow); - return () => clearTimeout(delayBanner); - }, [setIsShown, waitBeforeShow]); - - const handleManagePreferencesClick = (): void => { - onOpenModal(); - setIsShown(false); - }; - - if (!hasMounted) { - return null; - } - return (