@commercetools-frontend/cookie-consent 2.1.9 → 2.2.0

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

@@ -33,6 +33,7 @@ require('@babel/runtime-corejs3/core-js-stable/instance/find');
 require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
 require('@babel/runtime-corejs3/core-js-stable/object/entries');
 require('@babel/runtime-corejs3/core-js-stable/url-search-params');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -111,15 +112,15 @@ const modalMessages = reactIntl.defineMessages({
     description: 'Header for first collapsible content block',
     defaultMessage: 'Strictly necessary cookies'
   },
-  necessaryCookiesDescription: {
-    id: 'CookieConsentModal.primary.necessaryCookiesDescription',
-    description: 'Description of content from first collapsible header',
-    defaultMessage: 'These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.'
+  functionalCookiesHeader: {
+    id: 'CookieConsentModal.primary.functionalCookiesHeader',
+    description: 'Header for first collapsible content block',
+    defaultMessage: 'Functional cookies'
   },
-  necessaryCookiesHeaderState: {
-    id: 'CookieConsentModal.primary.necessaryCookiesHeaderState',
-    description: 'State of the cookies described in the header',
-    defaultMessage: 'Always active'
+  functionalCookiesDescription: {
+    id: 'CookieConsentModal.primary.functionalCookiesDescription',
+    description: 'Description of content from first collapsible header',
+    defaultMessage: 'These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.'
   },
   performanceCookiesHeader: {
     id: 'CookieConsentModal.primary.performanceCookiesHeader',
@@ -210,6 +211,11 @@ const cookieDetailValues = reactIntl.defineMessages({
     description: 'Type of cookie',
     defaultMessage: 'Strictly Necessary Cookies'
   },
+  categoryFunctional: {
+    id: 'CookieConsentModal.cookieDetails.categoryFunctional',
+    description: 'Type of cookie',
+    defaultMessage: 'Functional Cookies'
+  },
   categoryPerformance: {
     id: 'CookieConsentModal.cookieDetails.categoryPerformance',
     description: 'Type of cookie',
@@ -217,20 +223,10 @@ const cookieDetailValues = reactIntl.defineMessages({
   }
 });
 const cookieDetailDescriptions = reactIntl.defineMessages({
-  essentialCookieDescription1: {
-    id: 'CookieConsentModal.cookieDetails.essentialCookieDescription1',
+  functionalCookieDescription1: {
+    id: 'CookieConsentModal.cookieDetails.functionalCookieDescription1',
     description: 'Description of cookie',
-    defaultMessage: 'Identifier for each unique device that interacts with Intercom. It is refreshed on each successful ping, extending it another 9 months. Set by Intercom Messenger within the commercetools Merchant Center.'
-  },
-  essentialCookieDescription2: {
-    id: 'CookieConsentModal.cookieDetails.essentialCookieDescription2',
-    description: 'Description of cookie',
-    defaultMessage: 'Anonymous visitor identifier cookie. Set by Intercom Messenger within the commercetools Merchant Center.'
-  },
-  essentialCookieDescription3: {
-    id: 'CookieConsentModal.cookieDetails.essentialCookieDescription3',
-    description: 'Description of cookie',
-    defaultMessage: 'Identifier for each unique browser session. This session cookie is refreshed on each successfully logged-in ping, extending it one week from this moment. Set by Intercom Messenger within the commercetools Merchant Center.'
+    defaultMessage: 'Set by UserGuiding (Merchant Center). As per UserGuiding Cookie Policy: This cookie contains pages the user has seen. Its purpose is to improve the user guidance experience, like showing guides only once for each user, segmenting based on page view history, etc.'
   },
   performanceCookieDescription1: {
     id: 'CookieConsentModal.cookieDetails.performanceCookieDescription1',
@@ -251,20 +247,26 @@ const cookieDetailDescriptions = reactIntl.defineMessages({
     id: 'CookieConsentModal.cookieDetails.performanceCookieDescription4',
     description: 'Description of cookie',
     defaultMessage: "The 'fs_uid' cookie can be thought of as the capture cookie. When an end-user visits a customer's site, that cookie is used to track the user across sessions and pages. The same user may visit a site multiple times and may navigate to many pages within a single session. This cookie ensures that all captured session traffic is associated with one user. A session cannot be captured without this cookie and the users anonymized visit will not be logged. Set by FullStory within the commercetools Merchant Center."
+  },
+  performanceCookieDescription5: {
+    id: 'CookieConsentModal.cookieDetails.performanceCookieDescription5',
+    description: 'Description of cookie',
+    defaultMessage: "Set by UserGuiding (Merchant Center). As per UserGuiding Cookie Policy: This cookie is for storing in the current browser a long living random unique id, which is created at first load of the UserGuiding snippet. This ID is created randomly based on the timestamp of the first visit and does not relate to the user’s personal information including IP. The stated purpose of the cookie is to track UserGuiding users' monthly active user quota, storing users' usage history to UserGuiding databases, etc."
   }
 });
 
 const COOKIE_CONSENT_LINKS = {
-  PRIVACY_POLICY: 'https://commercetools.com/privacy#website'
+  PRIVACY_POLICY: 'https://commercetools.com/privacy#website',
+  USER_GUIDING_COOKIE_POLICY: 'https://userguiding.com/cookie-policy/'
 };
 
 const HOSTNAME = 'commercetools.com';
-const createCookieLink = cookieName => `https://cookiepedia.co.uk/cookies/${cookieName}`;
-const createEssentialCookieDetails = intl => [{
+const createCookieLink = cookieName => "https://cookiepedia.co.uk/cookies/".concat(cookieName);
+const createFunctionalCookieDetails = intl => [{
   name: {
     label: intl.formatMessage(cookieDetailLabels.nameLabel),
-    value: 'intercom-device-id-b74wbpa8',
-    to: createCookieLink('intercom-device-id-b74wbpa8')
+    value: '__ug__',
+    to: COOKIE_CONSENT_LINKS.USER_GUIDING_COOKIE_POLICY
   },
   host: {
     label: intl.formatMessage(cookieDetailLabels.hostLabel),
@@ -272,7 +274,7 @@ const createEssentialCookieDetails = intl => [{
   },
   duration: {
     label: intl.formatMessage(cookieDetailLabels.durationLabel),
-    value: intl.formatMessage(cookieDetailValues.duration9Months)
+    value: intl.formatMessage(cookieDetailValues.durationSession)
   },
   type: {
     label: intl.formatMessage(cookieDetailLabels.typeLabel),
@@ -280,17 +282,18 @@ const createEssentialCookieDetails = intl => [{
   },
   category: {
     label: intl.formatMessage(cookieDetailLabels.categoryLabel),
-    value: intl.formatMessage(cookieDetailValues.categoryStrictlyNecessary)
+    value: intl.formatMessage(cookieDetailValues.categoryFunctional)
   },
   description: {
     label: intl.formatMessage(cookieDetailLabels.descriptionLabel),
-    value: intl.formatMessage(cookieDetailDescriptions.essentialCookieDescription1)
+    value: intl.formatMessage(cookieDetailDescriptions.functionalCookieDescription1)
   }
-}, {
+}];
+const createPerformanceCookieDetails = intl => [{
   name: {
     label: intl.formatMessage(cookieDetailLabels.nameLabel),
-    value: 'intercom-id-b74wbpa8',
-    to: createCookieLink('intercom-id-b74wbpa8')
+    value: '_fs_tab_id',
+    to: createCookieLink('_fs_tab_id')
   },
   host: {
     label: intl.formatMessage(cookieDetailLabels.hostLabel),
@@ -298,25 +301,25 @@ const createEssentialCookieDetails = intl => [{
   },
   duration: {
     label: intl.formatMessage(cookieDetailLabels.durationLabel),
-    value: intl.formatMessage(cookieDetailValues.duration9Months)
+    value: intl.formatMessage(cookieDetailValues.durationSession)
   },
   type: {
     label: intl.formatMessage(cookieDetailLabels.typeLabel),
-    value: intl.formatMessage(cookieDetailValues.typeFirstParty)
+    value: intl.formatMessage(cookieDetailValues.duration9Months)
   },
   category: {
     label: intl.formatMessage(cookieDetailLabels.categoryLabel),
-    value: intl.formatMessage(cookieDetailValues.categoryStrictlyNecessary)
+    value: intl.formatMessage(cookieDetailValues.categoryPerformance)
   },
   description: {
     label: intl.formatMessage(cookieDetailLabels.descriptionLabel),
-    value: intl.formatMessage(cookieDetailDescriptions.essentialCookieDescription2)
+    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription1)
   }
 }, {
   name: {
     label: intl.formatMessage(cookieDetailLabels.nameLabel),
-    value: 'intercom-session-b74wbpa8',
-    to: createCookieLink('intercom-session-b74wbpa8')
+    value: 'fs_cid',
+    to: createCookieLink('fs_cid')
   },
   host: {
     label: intl.formatMessage(cookieDetailLabels.hostLabel),
@@ -324,52 +327,25 @@ const createEssentialCookieDetails = intl => [{
   },
   duration: {
     label: intl.formatMessage(cookieDetailLabels.durationLabel),
-    value: intl.formatMessage(cookieDetailValues.duration1Week)
+    value: intl.formatMessage(cookieDetailValues.duration1Year)
   },
   type: {
     label: intl.formatMessage(cookieDetailLabels.typeLabel),
     value: intl.formatMessage(cookieDetailValues.typeFirstParty)
   },
-  category: {
-    label: intl.formatMessage(cookieDetailLabels.categoryLabel),
-    value: intl.formatMessage(cookieDetailValues.categoryStrictlyNecessary)
-  },
-  description: {
-    label: intl.formatMessage(cookieDetailLabels.descriptionLabel),
-    value: intl.formatMessage(cookieDetailDescriptions.essentialCookieDescription3)
-  }
-}];
-const createPerformanceCookieDetails = intl => [{
-  name: {
-    label: intl.formatMessage(cookieDetailLabels.nameLabel),
-    value: '_fs_tab_id',
-    to: createCookieLink('_fs_tab_id')
-  },
-  host: {
-    label: intl.formatMessage(cookieDetailLabels.hostLabel),
-    value: HOSTNAME
-  },
-  duration: {
-    label: intl.formatMessage(cookieDetailLabels.durationLabel),
-    value: intl.formatMessage(cookieDetailValues.durationSession)
-  },
-  type: {
-    label: intl.formatMessage(cookieDetailLabels.typeLabel),
-    value: intl.formatMessage(cookieDetailValues.duration9Months)
-  },
   category: {
     label: intl.formatMessage(cookieDetailLabels.categoryLabel),
     value: intl.formatMessage(cookieDetailValues.categoryPerformance)
   },
   description: {
     label: intl.formatMessage(cookieDetailLabels.descriptionLabel),
-    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription1)
+    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription2)
   }
 }, {
   name: {
     label: intl.formatMessage(cookieDetailLabels.nameLabel),
-    value: 'fs_cid',
-    to: createCookieLink('fs_cid')
+    value: 'fs_lua',
+    to: createCookieLink('fs_lua')
   },
   host: {
     label: intl.formatMessage(cookieDetailLabels.hostLabel),
@@ -377,7 +353,7 @@ const createPerformanceCookieDetails = intl => [{
   },
   duration: {
     label: intl.formatMessage(cookieDetailLabels.durationLabel),
-    value: intl.formatMessage(cookieDetailValues.duration1Year)
+    value: intl.formatMessage(cookieDetailValues.duration1Day)
   },
   type: {
     label: intl.formatMessage(cookieDetailLabels.typeLabel),
@@ -389,13 +365,13 @@ const createPerformanceCookieDetails = intl => [{
   },
   description: {
     label: intl.formatMessage(cookieDetailLabels.descriptionLabel),
-    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription2)
+    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription3)
   }
 }, {
   name: {
     label: intl.formatMessage(cookieDetailLabels.nameLabel),
-    value: 'fs_lua',
-    to: createCookieLink('fs_lua')
+    value: 'fs_uid',
+    to: createCookieLink('fs_uid')
   },
   host: {
     label: intl.formatMessage(cookieDetailLabels.hostLabel),
@@ -403,7 +379,7 @@ const createPerformanceCookieDetails = intl => [{
   },
   duration: {
     label: intl.formatMessage(cookieDetailLabels.durationLabel),
-    value: intl.formatMessage(cookieDetailValues.duration1Day)
+    value: intl.formatMessage(cookieDetailValues.duration9Months)
   },
   type: {
     label: intl.formatMessage(cookieDetailLabels.typeLabel),
@@ -415,13 +391,13 @@ const createPerformanceCookieDetails = intl => [{
   },
   description: {
     label: intl.formatMessage(cookieDetailLabels.descriptionLabel),
-    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription3)
+    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription4)
   }
 }, {
   name: {
     label: intl.formatMessage(cookieDetailLabels.nameLabel),
-    value: 'fs_uid',
-    to: createCookieLink('fs_uid')
+    value: '__UGS__uid',
+    to: COOKIE_CONSENT_LINKS.USER_GUIDING_COOKIE_POLICY
   },
   host: {
     label: intl.formatMessage(cookieDetailLabels.hostLabel),
@@ -429,7 +405,7 @@ const createPerformanceCookieDetails = intl => [{
   },
   duration: {
     label: intl.formatMessage(cookieDetailLabels.durationLabel),
-    value: intl.formatMessage(cookieDetailValues.duration9Months)
+    value: intl.formatMessage(cookieDetailValues.durationSession)
   },
   type: {
     label: intl.formatMessage(cookieDetailLabels.typeLabel),
@@ -441,7 +417,7 @@ const createPerformanceCookieDetails = intl => [{
   },
   description: {
     label: intl.formatMessage(cookieDetailLabels.descriptionLabel),
-    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription4)
+    value: intl.formatMessage(cookieDetailDescriptions.performanceCookieDescription5)
   }
 }];
 
@@ -509,8 +485,10 @@ var _ref$1 = {
   styles: "padding-right:10px"
 } ;
 const CookieConsentBodyPrimary = _ref7 => {
-  let toggleValue = _ref7.toggleValue,
-    onToggle = _ref7.onToggle,
+  let togglePerformanceValue = _ref7.togglePerformanceValue,
+    toggleFunctionalValue = _ref7.toggleFunctionalValue,
+    onTogglePerformance = _ref7.onTogglePerformance,
+    onToggleFunctional = _ref7.onToggleFunctional,
     onChangeView = _ref7.onChangeView,
     panelState = _ref7.panelState,
     setPanelState = _ref7.setPanelState;
@@ -533,20 +511,24 @@ const CookieConsentBodyPrimary = _ref7 => {
       scale: "l",
       children: [jsxRuntime.jsx(CollapsiblePanel__default["default"], {
         condensed: true,
-        header: formatMessage(modalMessages.necessaryCookiesHeader),
-        headerControls: jsxRuntime.jsx(Text__default["default"].Detail, {
-          intlMessage: modalMessages.necessaryCookiesHeaderState,
-          tone: "information"
+        header: formatMessage(modalMessages.functionalCookiesHeader),
+        headerControls: jsxRuntime.jsx("div", {
+          css: bumpToggle,
+          children: jsxRuntime.jsx(ToggleInput__default["default"], {
+            isChecked: toggleFunctionalValue,
+            onChange: e => onToggleFunctional(e.target.checked),
+            size: "small"
+          })
         }),
-        isClosed: panelState.essentialCookiesClosed,
+        isClosed: panelState.functionalCookiesClosed,
         onToggle: () => setPanelState(_objectSpread$1(_objectSpread$1({}, panelState), {}, {
-          essentialCookiesClosed: !panelState.essentialCookiesClosed
+          functionalCookiesClosed: !panelState.functionalCookiesClosed
         })),
         theme: "light",
         children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
           scale: "m",
           children: [jsxRuntime.jsx(Text__default["default"].Body, {
-            intlMessage: modalMessages.necessaryCookiesDescription
+            intlMessage: modalMessages.functionalCookiesDescription
           }), jsxRuntime.jsx(NavigationLink, {
             label: formatMessage(modalMessages.cookieInformationLink),
             onClick: () => onChangeView(View.Secondary)
@@ -558,8 +540,8 @@ const CookieConsentBodyPrimary = _ref7 => {
         headerControls: jsxRuntime.jsx("div", {
           css: bumpToggle,
           children: jsxRuntime.jsx(ToggleInput__default["default"], {
-            isChecked: toggleValue,
-            onChange: e => onToggle(e.target.checked),
+            isChecked: togglePerformanceValue,
+            onChange: e => onTogglePerformance(e.target.checked),
             size: "small"
           })
         }),
@@ -588,7 +570,8 @@ const CookieConsentBodyDetails = _ref8 => {
     formatMessage = _useIntl2.formatMessage;
   const scrollRef = /*#__PURE__*/react.createRef();
   react.useEffect(() => {
-    scrollRef.current?.scrollIntoView();
+    var _scrollRef$current;
+    (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || _scrollRef$current.scrollIntoView();
   }, [scrollRef]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
@@ -606,7 +589,7 @@ const CookieConsentBodyDetails = _ref8 => {
           return jsxRuntime.jsx(Grid__default["default"], {
             gridGap: designSystem.designTokens.spacing40,
             gridRowGap: "0px",
-            gridTemplateColumns: `${designSystem.designTokens.constraint2} 1fr`,
+            gridTemplateColumns: "".concat(designSystem.designTokens.constraint2, " 1fr"),
             children: _mapInstanceProperty__default["default"](_context = _Object$values__default["default"](detail)).call(_context, value => jsxRuntime.jsxs(react.Fragment, {
               children: [jsxRuntime.jsx(Grid__default["default"].Item, {
                 children: jsxRuntime.jsx(Text__default["default"].Detail, {
@@ -635,19 +618,23 @@ const CookieConsentModal = modalProps => {
     _useState2 = _slicedToArray(_useState, 2),
     enablePerformanceCookies = _useState2[0],
     setEnablePerformanceCookies = _useState2[1];
-  const _useState3 = react.useState(View.Primary),
+  const _useState3 = react.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    currentView = _useState4[0],
-    setCurrentView = _useState4[1];
-  const _useState5 = react.useState({
-      essentialCookiesClosed: true,
+    enableFunctionalCookies = _useState4[0],
+    setEnableFunctionalCookies = _useState4[1];
+  const _useState5 = react.useState(View.Primary),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentView = _useState6[0],
+    setCurrentView = _useState6[1];
+  const _useState7 = react.useState({
+      functionalCookiesClosed: true,
       performanceCookiesClosed: true
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    panelState = _useState6[0],
-    setPanelState = _useState6[1];
-  const createConsentGroups = performanceConsent => ({
-    essentialCookies: true,
+    _useState8 = _slicedToArray(_useState7, 2),
+    panelState = _useState8[0],
+    setPanelState = _useState8[1];
+  const createConsentGroups = (functionalConsent, performanceConsent) => ({
+    functionalCookies: functionalConsent,
     performanceCookies: performanceConsent
   });
   return jsxRuntime.jsxs(applicationComponents.ConfirmationDialog, {
@@ -656,25 +643,27 @@ const CookieConsentModal = modalProps => {
     labelPrimary: intl.formatMessage(modalMessages.primaryButtonLabel),
     labelSecondary: intl.formatMessage(modalMessages.secondaryButtonLabel),
     onCancel: () => {
-      setConsent(createConsentGroups(enablePerformanceCookies));
+      setConsent(createConsentGroups(enableFunctionalCookies, enablePerformanceCookies));
       modalProps.setBannerClosed(true);
       modalProps.closeModal();
     },
     onClose: modalProps.closeModal,
     onConfirm: () => {
-      setConsent(createConsentGroups(true));
+      setConsent(createConsentGroups(true, true));
       modalProps.setBannerClosed(true);
       modalProps.closeModal();
     },
     title: intl.formatMessage(modalMessages.title),
     children: [currentView === View.Primary && jsxRuntime.jsx(CookieConsentBodyPrimary, {
       onChangeView: view => setCurrentView(view),
-      onToggle: value => setEnablePerformanceCookies(value),
+      onTogglePerformance: value => setEnablePerformanceCookies(value),
+      onToggleFunctional: value => setEnableFunctionalCookies(value),
       panelState: panelState,
       setPanelState: state => setPanelState(state),
-      toggleValue: enablePerformanceCookies
+      togglePerformanceValue: enablePerformanceCookies,
+      toggleFunctionalValue: enableFunctionalCookies
     }), currentView === View.Secondary && jsxRuntime.jsx(CookieConsentBodyDetails, {
-      cookieDetails: createEssentialCookieDetails(intl),
+      cookieDetails: createFunctionalCookieDetails(intl),
       onChangeView: view => setCurrentView(view)
     }), currentView === View.Tertiary && jsxRuntime.jsx(CookieConsentBodyDetails, {
       cookieDetails: createPerformanceCookieDetails(intl),
@@ -730,15 +719,15 @@ const CookieConsentBanner = bannerProps => {
     }),
     setConsent = _useCookieConsent.setConsent,
     hasGivenPerformanceCookieConsent = _useCookieConsent.givenConsent;
-  const _useCookieConsent2 = useCookieConsent('essentialCookies', {
+  const _useCookieConsent2 = useCookieConsent('functionalCookies', {
       skipConsent: bannerProps.skipConsent
     }),
-    hasGivenEssentialCookieConsent = _useCookieConsent2.givenConsent;
+    hasGivenFunctionalCookieConsent = _useCookieConsent2.givenConsent;
   const createConsentGroups = () => ({
-    essentialCookies: true,
+    functionalCookies: true,
     performanceCookies: true
   });
-  if (bannerClosed || hasGivenEssentialCookieConsent || hasGivenPerformanceCookieConsent) return null;
+  if (bannerClosed || hasGivenFunctionalCookieConsent || hasGivenPerformanceCookieConsent) return null;
   return (
     // TODO: use lower z-index, prefer ranges per use-case
     jsxRuntime.jsx("div", {