@commercetools-frontend/cookie-consent 1.0.3 → 1.1.0

package/README.md

@@ -71,6 +71,16 @@ import { useCookieConsent } from '@commercetools-frontend/cookie-consent/react';
 const { givenConsent } = useCookieConsent('performanceCookies');
 ```
 
+Note also that in certain cases (e.g. a staging environment) you may want to skip cookie consent entirely. To do so you can use the `skipConsent` option:
+
+```js
+const { givenConsent } = useCookieConsent('performanceCookies', {
+  skipConsent: true,
+});
+```
+
+The preferred value of `skipConsent` can be determined for instance by an environment variable and read using the `useSkipCookieConsent` hook.
+
 The resulting `givenConsent` value is a boolean which can be passed to any software needing consent for instance FullStory or Intercom. A combination of `@commercetools-frontend/cookie-consent` and `@commercetools-frontend/fullstory` could look like this:
 
 ```js
@@ -101,3 +111,52 @@ const { setConsent } = useCookieConsent('performanceCookies');
   Update cookie consent
 </button>;
 ```
+
+### Showing a consent banner
+
+You can render the `CookieConsentBanner` to show a consent banner.
+
+```jsx
+import { CookieConsentBanner } from '@commercetools-frontend/cookie-consent/react';
+
+<CookieConsentBanner />;
+```
+
+### Showing a consent modal
+
+You can render the `CookieConsentModal` to open a consent modal. Upon interaction with the modal a cookie will be written in accordance with the consent groups selected.
+
+```jsx
+import { CookieConsentModal } from '@commercetools-frontend/cookie-consent/react';
+
+<CookieConsentModal />;
+```
+
+## Local development strategies
+
+Cookies are bound to a domain. In order to test this functionality when developing locally, it's important to spoof a cookie, and also ensure that the domain is localhost when using `cookie-consent` module functionality.
+
+To spoof a cookie in your browser, open Chrome, and enter the following into the console:
+
+```
+document.cookie="OptanonConsent=isGpcEnabled=0&datestamp=Wed+Mar+01+2023+11%3A38%3A38+GMT-0500+(Eastern+Standard+Time)&version=202301.2.0&isIABGlobal=false&hosts=&consentId=1623165b-6d62-4e4a-beae-71598c0756c6&interactionCount=1&landingPath=NotLandingPage&groups=C0001%3A1%2CC0002%3A0%2CC0003%3A1%2CC0004%3A1%2CC0005%3A1&geolocation=US%3BNC&AwaitingReconsent=false; domain=localhost; path=/"
+```
+
+This will create a cookie with all consent values set to false, bound to localhost.
+
+In order to set the domain to localhost when using `cookie-consent`, pass the domain in where appropriate. For example:
+
+```js
+setConsent(
+  {
+    essentialCookies: true,
+    performanceCookies: true,
+    functionalCookies: false,
+    socialMediaCookies: false,
+    targetingCookies: false,
+  },
+  'localhost' // <- the important part
+);
+```
+
+Remember to remove this argument before making a PR.

package/core/dist/commercetools-frontend-cookie-consent-core.cjs.d.ts

@@ -1 +1 @@
-export * from "../../dist/declarations/src/core";
+export * from "../../dist/declarations/src/core/index";

package/core/dist/commercetools-frontend-cookie-consent-core.cjs.dev.js

@@ -64,11 +64,13 @@ var defaultConsentGroups = _Object$fromEntries__default["default"](_mapInstanceP
 function getParsedConsentCookieGroups() {
   var _context3;
   var cookieValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getRawConsentCookie();
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    skipConsent = _ref.skipConsent;
   var parsedConsentCookieGroups = {};
-  var encodedConsentGroupToConsentGroup = _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context3 = _Object$entries__default["default"](COOKIE_CONSENT_GROUPS)).call(_context3, function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      encodedConsentGroupName = _ref2[0],
-      decodedConsentGroupName = _ref2[1];
+  var encodedConsentGroupToConsentGroup = _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context3 = _Object$entries__default["default"](COOKIE_CONSENT_GROUPS)).call(_context3, function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      encodedConsentGroupName = _ref3[0],
+      decodedConsentGroupName = _ref3[1];
     return [decodedConsentGroupName, encodedConsentGroupName];
   }));
   try {
@@ -80,7 +82,7 @@ function getParsedConsentCookieGroups() {
         _consentGroup$split2 = _slicedToArray(_consentGroup$split, 2),
         encodedConsentGroupName = _consentGroup$split2[0],
         consentGroupValue = _consentGroup$split2[1];
-      return [encodedConsentGroupToConsentGroup[encodedConsentGroupName], consentGroupValue === '1'];
+      return [encodedConsentGroupToConsentGroup[encodedConsentGroupName], skipConsent === true ? true : consentGroupValue === '1'];
     });
     parsedConsentCookieGroups = parsedConsentCookieGroupEntries ? _Object$fromEntries__default["default"](parsedConsentCookieGroupEntries) : null;
   } catch (error) {}
@@ -94,19 +96,23 @@ function getParsedConsentCookieGroups() {
 function generateUuid(prefix) {
   return prefix ? ((Number(prefix) ^ Math.random() * 16) >> Number(prefix) / 4).toString(16) : "".concat(1e7, "-", 1e3, "-", 4e3, "-", 8e3, "-", 1e11).replace(/[018]/g, generateUuid);
 }
-function generateConsentCookie(consentGroups) {
+function generateEncodedConsentGroups(consentGroups) {
   var _context5, _context6;
-  var encodedConsentGroups = _filterInstanceProperty__default["default"](_context5 = _mapInstanceProperty__default["default"](_context6 = _Object$entries__default["default"](consentGroups)).call(_context6, function (_ref3) {
+  return _filterInstanceProperty__default["default"](_context5 = _mapInstanceProperty__default["default"](_context6 = _Object$entries__default["default"](consentGroups)).call(_context6, function (_ref4) {
     var _context7;
-    var _ref4 = _slicedToArray(_ref3, 2),
-      consentGroupName = _ref4[0],
-      consentGroupValue = _ref4[1];
+    var _ref5 = _slicedToArray(_ref4, 2),
+      consentGroupName = _ref5[0],
+      consentGroupValue = _ref5[1];
     var encodedConsentGroup = COOKIE_CONSENT_GROUPS[consentGroupName];
     if (!encodedConsentGroup) {
       return null;
     }
     return _concatInstanceProperty__default["default"](_context7 = "".concat(encodedConsentGroup, ":")).call(_context7, consentGroupValue && '1' || '0');
   })).call(_context5, Boolean).join(',');
+}
+function generateConsentCookie(consentGroups) {
+  var existingConsentGroups = getParsedConsentCookieGroups();
+  var encodedConsentGroups = generateEncodedConsentGroups(_objectSpread(_objectSpread({}, existingConsentGroups), consentGroups));
   var consentValues = {
     isGpcEnabled: '0',
     datestamp: new Date().toString(),

package/core/dist/commercetools-frontend-cookie-consent-core.cjs.prod.js

@@ -64,11 +64,13 @@ var defaultConsentGroups = _Object$fromEntries__default["default"](_mapInstanceP
 function getParsedConsentCookieGroups() {
   var _context3;
   var cookieValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getRawConsentCookie();
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    skipConsent = _ref.skipConsent;
   var parsedConsentCookieGroups = {};
-  var encodedConsentGroupToConsentGroup = _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context3 = _Object$entries__default["default"](COOKIE_CONSENT_GROUPS)).call(_context3, function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      encodedConsentGroupName = _ref2[0],
-      decodedConsentGroupName = _ref2[1];
+  var encodedConsentGroupToConsentGroup = _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context3 = _Object$entries__default["default"](COOKIE_CONSENT_GROUPS)).call(_context3, function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      encodedConsentGroupName = _ref3[0],
+      decodedConsentGroupName = _ref3[1];
     return [decodedConsentGroupName, encodedConsentGroupName];
   }));
   try {
@@ -80,7 +82,7 @@ function getParsedConsentCookieGroups() {
         _consentGroup$split2 = _slicedToArray(_consentGroup$split, 2),
         encodedConsentGroupName = _consentGroup$split2[0],
         consentGroupValue = _consentGroup$split2[1];
-      return [encodedConsentGroupToConsentGroup[encodedConsentGroupName], consentGroupValue === '1'];
+      return [encodedConsentGroupToConsentGroup[encodedConsentGroupName], skipConsent === true ? true : consentGroupValue === '1'];
     });
     parsedConsentCookieGroups = parsedConsentCookieGroupEntries ? _Object$fromEntries__default["default"](parsedConsentCookieGroupEntries) : null;
   } catch (error) {}
@@ -94,19 +96,23 @@ function getParsedConsentCookieGroups() {
 function generateUuid(prefix) {
   return prefix ? ((Number(prefix) ^ Math.random() * 16) >> Number(prefix) / 4).toString(16) : "".concat(1e7, "-", 1e3, "-", 4e3, "-", 8e3, "-", 1e11).replace(/[018]/g, generateUuid);
 }
-function generateConsentCookie(consentGroups) {
+function generateEncodedConsentGroups(consentGroups) {
   var _context5, _context6;
-  var encodedConsentGroups = _filterInstanceProperty__default["default"](_context5 = _mapInstanceProperty__default["default"](_context6 = _Object$entries__default["default"](consentGroups)).call(_context6, function (_ref3) {
+  return _filterInstanceProperty__default["default"](_context5 = _mapInstanceProperty__default["default"](_context6 = _Object$entries__default["default"](consentGroups)).call(_context6, function (_ref4) {
     var _context7;
-    var _ref4 = _slicedToArray(_ref3, 2),
-      consentGroupName = _ref4[0],
-      consentGroupValue = _ref4[1];
+    var _ref5 = _slicedToArray(_ref4, 2),
+      consentGroupName = _ref5[0],
+      consentGroupValue = _ref5[1];
     var encodedConsentGroup = COOKIE_CONSENT_GROUPS[consentGroupName];
     if (!encodedConsentGroup) {
       return null;
     }
     return _concatInstanceProperty__default["default"](_context7 = "".concat(encodedConsentGroup, ":")).call(_context7, consentGroupValue && '1' || '0');
   })).call(_context5, Boolean).join(',');
+}
+function generateConsentCookie(consentGroups) {
+  var existingConsentGroups = getParsedConsentCookieGroups();
+  var encodedConsentGroups = generateEncodedConsentGroups(_objectSpread(_objectSpread({}, existingConsentGroups), consentGroups));
   var consentValues = {
     isGpcEnabled: '0',
     datestamp: new Date().toString(),

package/dist/declarations/constants/links.d.ts

@@ -0,0 +1,3 @@
+export declare const COOKIE_CONSENT_LINKS: {
+    PRIVACY_POLICY: string;
+};

package/dist/declarations/src/{core.d.ts → core/index.d.ts}

@@ -7,12 +7,15 @@ declare const COOKIE_CONSENT_GROUPS: {
 };
 type TConsentGroupNames = keyof typeof COOKIE_CONSENT_GROUPS;
 declare function getRawConsentCookie(name?: string): string | undefined;
-declare function getParsedConsentCookieGroups(cookieValue?: string | undefined): {
+type TGetParsedConsentCookieGroupsOptions = {
+    skipConsent?: boolean;
+};
+declare function getParsedConsentCookieGroups(cookieValue?: string | undefined, { skipConsent }?: TGetParsedConsentCookieGroupsOptions): {
     essentialCookies: boolean;
     performanceCookies: boolean;
     functionalCookies: boolean;
     targetingCookies: boolean;
     socialMediaCookies: boolean;
 };
-declare function setConsentCookie(consentGroups: Record<TConsentGroupNames, boolean>, domain?: string): void;
+declare function setConsentCookie(consentGroups: Partial<Record<TConsentGroupNames, boolean>>, domain?: string): void;
 export { getRawConsentCookie, getParsedConsentCookieGroups, setConsentCookie, COOKIE_CONSENT_GROUPS, };

package/dist/declarations/src/react/cookie-consent-banner/cookie-consent-banner.d.ts

@@ -0,0 +1,8 @@
+type ConsentBannerProps = {
+    skipConsent: boolean;
+};
+declare const CookieConsentBanner: {
+    (bannerProps: ConsentBannerProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { CookieConsentBanner };

package/dist/declarations/src/react/cookie-consent-banner/index.d.ts

@@ -0,0 +1 @@
+export { CookieConsentBanner } from './cookie-consent-banner';

package/dist/declarations/src/react/cookie-consent-banner/messages.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    bannerMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    privacyPolicyLink: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    bannerCookiesModalLink: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    buttonLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default _default;

package/dist/declarations/src/react/cookie-consent-modal/cookie-consent-modal.d.ts

@@ -0,0 +1,7 @@
+type ModalStateProps = {
+    isModalOpen: boolean;
+    closeModal: () => void;
+    setBannerClosed: (boolean: boolean) => void;
+};
+declare const CookieConsentModal: (modalProps: ModalStateProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default CookieConsentModal;

package/dist/declarations/src/react/cookie-consent-modal/cookie-details.d.ts

@@ -0,0 +1,19 @@
+import { IntlShape } from 'react-intl';
+type Detail = {
+    label: string;
+    value: string;
+};
+type Link = Detail & {
+    to: string;
+};
+export type CookieDetails = {
+    name: Link;
+    host: Detail;
+    duration: Detail;
+    type: Detail;
+    category: Detail;
+    description: Detail;
+};
+export declare const createEssentialCookieDetails: (intl: IntlShape) => Array<CookieDetails>;
+export declare const createPerformanceCookieDetails: (intl: IntlShape) => Array<CookieDetails>;
+export {};

package/dist/declarations/src/react/cookie-consent-modal/index.d.ts

@@ -0,0 +1 @@
+export { default as CookieConsentModal } from './cookie-consent-modal';

package/dist/declarations/src/react/cookie-consent-modal/messages.d.ts

@@ -0,0 +1,173 @@
+export declare const modalMessages: {
+    title: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    primaryButtonLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    secondaryButtonLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    mainDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    privacyPolicyLink: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    necessaryCookiesHeader: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    necessaryCookiesDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    necessaryCookiesHeaderState: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    performanceCookiesHeader: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    performanceCookiesDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    cookieInformationLink: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    navigateBackLink: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export declare const cookieDetailLabels: {
+    nameLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    hostLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    durationLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    typeLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    categoryLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    descriptionLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export declare const cookieDetailValues: {
+    duration9Months: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    duration1Week: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    durationSession: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    duration1Year: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    duration1Day: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    typeFirstParty: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    categoryStrictlyNecessary: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    categoryPerformance: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export declare const cookieDetailDescriptions: {
+    essentialCookieDescription1: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    essentialCookieDescription2: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    essentialCookieDescription3: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    performanceCookieDescription1: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    performanceCookieDescription2: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    performanceCookieDescription3: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    performanceCookieDescription4: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/declarations/src/react/index.d.ts

@@ -0,0 +1,4 @@
+export { useCookieConsent } from './use-cookie-consent';
+export { useSkipCookieConsent } from './use-skip-cookie-consent';
+export { CookieConsentModal } from './cookie-consent-modal';
+export { CookieConsentBanner } from './cookie-consent-banner';

package/dist/declarations/src/react/use-cookie-consent/index.d.ts

@@ -0,0 +1 @@
+export { useCookieConsent } from './use-cookie-consent';

package/dist/declarations/src/react/use-cookie-consent/use-cookie-consent.d.ts

@@ -0,0 +1,10 @@
+import { setConsentCookie, COOKIE_CONSENT_GROUPS } from '../../core';
+type TConsentOptions = {
+    skipConsent?: boolean;
+    cookieName?: string;
+};
+declare function useCookieConsent(consentGroup: keyof typeof COOKIE_CONSENT_GROUPS, { skipConsent, cookieName }?: TConsentOptions): {
+    givenConsent: boolean;
+    setConsent: typeof setConsentCookie;
+};
+export { useCookieConsent };

package/dist/declarations/src/react/use-skip-cookie-consent/index.d.ts

@@ -0,0 +1 @@
+export { useSkipCookieConsent } from './use-skip-cookie-consent';

package/dist/declarations/src/react/use-skip-cookie-consent/use-skip-cookie-consent.d.ts

@@ -0,0 +1,2 @@
+declare function useSkipCookieConsent(): boolean;
+export { useSkipCookieConsent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/cookie-consent",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A package integrating with OneTrust cookie consent",
   "license": "MIT",
   "main": "dist/commercetools-frontend-cookie-consent.cjs.js",
@@ -18,23 +18,28 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@babel/runtime-corejs3": "^7.21.0"
+    "@babel/runtime-corejs3": "^7.21.0",
+    "@emotion/react": "^11.10.6"
   },
   "devDependencies": {
     "@types/node": "18.14.6",
     "typescript": "4.9.5"
   },
   "peerDependencies": {
+    "@commercetools-frontend/application-components": "21.x",
     "@commercetools-frontend/application-shell": "21.x",
-    "react": "17.x"
+    "@commercetools-frontend/application-shell-connectors": "21.x",
+    "@commercetools-frontend/ui-kit": "15.x",
+    "react": "17.x",
+    "react-intl": "5.x"
   },
   "publishConfig": {
     "access": "public"
   },
   "preconstruct": {
     "entrypoints": [
-      "./core.ts",
-      "./react.ts"
+      "./core/index.ts",
+      "./react/index.ts"
     ]
   }
 }

package/react/dist/commercetools-frontend-cookie-consent-react.cjs.d.ts

@@ -1 +1 @@
-export * from "../../dist/declarations/src/react";
+export * from "../../dist/declarations/src/react/index";