Node/npm version(s): 8.3.1

Package(s) version(s):

    @porscheofficial/cookie-consent-banner-react@<2.1.3>

Browser(s) version(s): lastest Chrome

Description of the issue/feature: Getting an TS error: Module '"@porscheofficial/cookie-consent-banner-react"' has no exported member 'triggerCookieConsentBanner'.

Some example to reproduce the issue: based on demo code

Use cases:

Node/npm version(s):

Package(s) version(s):

    @porscheofficial/[email protected]

Browser(s) version(s):
Chrome/Any

Description of the issue/feature:
Largest Contentful Paint (LCP) slows down by ~2.2 seconds when the cookie banner is shown.
Once the cookies are accepted and the banner does not pop up anymore the speed is improved by ~2.2 seconds.

Some example to reproduce the issue:
Using Google Lighthouse in Dev tools or https://pagespeed.web.dev/report.
Use cases:

Node/npm version(s):
8.19.2

Package(s) version(s):
3.0.1 (React)

Browser(s) version(s):
Version 1.46.153 Chromium: 108.0.5359.128 (Official Build) (64-bit)

Description of the issue/feature:
Maybe there is a way of doing this already but I haven't found it yet.

A new property for CategoryItem, startChecked.

With the purpose of allowing the developer to get all/some of the cookie categories checked and allow the users to uncheck them if they wish to. As opposed to how it behaves now.

Right now it appears to only "pre" check the mandatory categories, which is great, but it would be good to have the option to pre-check optional categories as well.

Regards

    @porscheofficial/cookie-consent-banner-react@<3.1.2>

Browser(s) version(s):
Version 111.0.5563.64 (Official Build) (64-bit)

Description of the issue/feature:
isMandatory checkbox is disabled but not checked

Node/npm version(s):
Node v18.13.0
NPM 8.19.3

Package(s) version(s):

    @porscheofficial/[email protected]

Browser(s) version(s):
Chrome 111.0.5563.64

Description of the issue/feature:
Consent banner does not open when cookie is absent, only when cookie is present, but set to the empty string. The cause of this is the following code (source):

const cookieValueString =
    `; ${document.cookie}`.split(`; ${this.cookieName}=`).pop() ??
    "".split(";").shift();

const cookieValues = cookieValueString ? cookieValueString.split(",") : [];

This code does not work properly if this.cookieName does not occur in document.cookie.

The first template string (`; ${document.cookie}`) can never be the empty string. Even if there are no cookies set at all and document.cookie is the empty string, `; ${document.cookie}` will be '; '. Calling split on a non-empty string will never produce an empty array, as such the following pop call will always return a value. As such anything past the ?? is never executed.
Now, if document.cookie doesn't contain this.cookieName, then the result of pop will just be the entire document.cookie with ; prepended to it. This is then assumed to be the contents of the cookie and the code assumes a consent decision has already been made.

Node/npm version(s):
v14.7.3

Package(s) version(s):

    @porscheofficial/cookie-consent-banner-react": "^2.1.1

Description of the issue/feature:
Module import error

Some example to reproduce the issue:
import { CookieConsentBanner } from "@porscheofficial/cookie-consent-banner-react";

Use cases:

Module parse failed: Unexpected token (13:61)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const acceptedCategoriesListener = event => {
|     if (isCustomEvent(event)) {
>       setAcceptedCategories(event.detail.acceptedCategories ?? []);
|     }
|   };```

Node/npm version(s):
Node v14.18.0 / npm v6.14.15

Package(s) version(s):

    @porscheofficial/[email protected]

Browser(s) version(s):
Safari iOS 12.4

Description of the issue/feature:
Instantiating the component CookieConsentBanner results in an error:

I suppose it comes from a js feature that is not supported by old browsers.

Some example to reproduce the issue:
Unfortunately I am unable to reproduce the issue on codesandbox, sorry :/
To reproduce the issue, try to load the component in an old version of safari (ie. safari for iOS v12.4). You can use the iOS simulator for that.

Use cases:

Dark patterns are present in the example image.

• 2. Pre-ticked checkboxes
• 4. Deceptive button contrast colors

I did not check to see how the banner is actively being used in the wild and that might differ.

Node/npm version(s):

NodeJS 19.6.0
Pnpm 7.27.0

Package(s) version(s):

@porscheofficial/[email protected]

Browser(s) version(s):

Arc Version 0.110.1 (39837)
Chromium Engine Version 114.0.5735.198

Description of the issue/feature:

Allow button styling. Be able to change button size, padding, font, font weight...

Maybe allowing to pass our own button component to keep the same button style.

Another option could be to add css parts (https://stenciljs.com/docs/styling#css-parts) to be able to stylise the shadow DOM element using ::part() pseudo selector (https://developer.mozilla.org/en-US/docs/Web/CSS/::part)

Use cases:

Have a better design integration of the component

Node/npm version(s): v18.16.1

Package(s) version(s): ^3.1.3

Description of the issue/feature: The package cannot be imported into the app, which always returns the same error (I have also tried with the new version but nothing changes)

package.json

    {
  "name": "react_",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@porscheofficial/cookie-consent-banner-react": "^3.1.3",
    "@statuspage/status-widget": "^1.0.4",
    "@stripe/react-stripe-js": "^2.1.0",
    "@stripe/stripe-js": "^1.54.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "aos": "^2.3.4",
    "firebase": "^8.6.8",
    "history": "^5.3.0",
    "i18next": "^23.2.11",
    "i18next-browser-languagedetector": "^7.1.0",
    "i18next-http-backend": "^2.2.1",
    "lottie-react": "^2.4.0",
    "lottie-web": "^5.12.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-ga4": "^2.1.0",
    "react-i18next": "^13.0.2",
    "react-owl-carousel": "^2.3.3",
    "react-router-dom": "^6.4.3",
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "^5.0.1",
    "react-scrollspy": "^3.4.3",
    "shebang-regex": "^4.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}

Error

ERROR in ./src/component/GDPR_Banner/Main.js 4:0-118
Module not found: Error: Can't resolve '@porscheofficial/cookie-consent-banner-react@^3.1.3' in '/Volumes/SSD/shoppup_site/client/src/component/GDPR_Banner'

Import Statement

import {CookieConsentBanner, triggerCookieConsentBanner} from '@porscheofficial/cookie-consent-banner-react';

Node/npm version(s):

Package(s) version(s):

    @porscheofficial/cookie-consent-banner@<version>
    @porscheofficial/cookie-consent-banner-react@<version>

Browser(s) version(s):

Description of the issue/feature:

Add an new property called expirationDate in order to customize the cookie life time.

Some example to reproduce the issue:

Use cases:

Some industries require to a specific lifetimes of cookies. At the moment I do not see an option to customize the cookies' expiration date.

Node/npm version(s):
Node v18.7.0
npm v8.15.0

Package(s) version(s):

 @porscheofficial/[email protected]
 @porscheofficial/[email protected]

Browser(s) version(s):
Brave browser: Version 1.41.100 Chromium: 103.0.5060.134 (Official Build) (x86_64)

Description of the issue/feature:
I installed the package with yarn (v1.22.19). I imported it and tried to set up the basic example.
I get the following e

rrors in the browser console and banner is not rendered (the rest of the application compiles & renders):

Some example to reproduce the issue:

• Install porsche cookie consent banner in a basic Vite react project (bootstrapped with TS).
• Check the dev console.

Node/npm version(s):
Node: 14.18.0
npm: 6.14.15

Package(s) version(s):

    @porscheofficial/[email protected]
    @porscheofficial/[email protected]

Browser(s) version(s):
Google Chrome: 97.0.4692.71

Description of the issue/feature:
When accepting all the cookies, then showing the banner again, and clicking on "Continue with technically required cookies only", all the cookies previously set are still set.

For example, on my first visit, I select marketing cookies, and save my preferences. Then, I want to update my choices, so I show the banner, I click on "Continue with technically required cookies only", but the marketing cookies are still set.

Some example to reproduce the issue:
https://codesandbox.io/s/issue-cookie-consent-banner-g48uu

Steps to reproduce the issue:

• Click "Agree and continue" to select all the cookie types
• Click on "Show Cookies Banner" button to show the banner
• Click "Continue with technically required cookies only"
• The optional cookies are still set

Node/npm version(s):
v16.13.0

Package(s) version(s):

    @porscheofficial/[email protected]
    @porscheofficial/[email protected]

Browser(s) version(s):
Chrome 100.0.4896.127

Description of the issue/feature:
Component is not rendered and the stack trace shows:

Uncaught (in promise) Error: Cannot find module './cookie-consent-banner.entry.js'
    at newRequire (index.2d3ace14.js:61:19)
    at newRequire (index.2d3ace14.js:45:18)
    at localRequire (index.2d3ace14.js:84:35)
    at loadModule (index-6c3638be.js:1108:12)
    at initializeComponent (index-6c3638be.js:869:20)
    at connectedCallback (index-6c3638be.js:964:17)
    at index-6c3638be.js:1044:39
    at Object.jmp (index-6c3638be.js:12:17)
    at HostElement.connectedCallback (index-6c3638be.js:1044:29)
    at appendChildToContainer (react-dom.development.js:11040:16)

Node/npm version(s): v19.7.0

Package(s) version(s):

    @porscheofficial/[email protected]

Browser(s) version(s): Chrome Version 111.0.5563.110

Description of the issue/feature:
The consent banner is only shown if no cookies are set. But it should be shown as long as long as the consent state cookie is not set or empty. This was also brought up here: #12 (comment)

Some example to reproduce the issue:

• clear cookies
• load page -> cookie consent is shown
• without accepting anything, navigate to another page or reload
• the cookie consent is not shown anymore

Use cases:

• the cookie consent should be shown as long as the user has not actively accepted anything.