🙅🏻‍♀️No longer imply consent on interaction

README.md

@@ -177,7 +177,7 @@ Callback function that determines if consent is required before tracking can beg
 ##### implyConsentOnInteraction
 
 Type: `boolean`<br>
-Default: `true`
+Default: `false`
 
 Whether or not consent should be implied if the user interacts with the website (clicks anywhere outside the consent manager banner or dialogs).
 

package.json

@@ -72,7 +72,7 @@
     "@typescript-eslint/parser": "^2.3.3",
     "babel-loader": "^8.0.6",
     "concurrently": "^3.5.1",
-    "enzyme": "^3.3.0",
+    "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.4.0",

src/__tests__/consent-manager-builder/index.todo.js

@@ -149,6 +149,26 @@ describe('ConsentManagerBuilder', () => {
     )
   })
 
+  test('does not imply consent on interacation', done => {
+    nock('https://cdn.segment.com')
+      .get('/v1/projects/123/integrations')
+      .reply(200, [
+        {
+          name: 'Amplitude',
+          creationName: 'Amplitude'
+        }
+      ])
+
+    shallow(
+      <ConsentManagerBuilder writeKey="123">
+        {({ preferences }) => {
+          expect(preferences).toMatchObject({})
+          done()
+        }}
+      </ConsentManagerBuilder>
+    )
+  })
+
   test.todo('loads analytics.js normally when consent isn՚t required')
   test.todo('still applies preferences when consent isn՚t required')
   test.todo('provides a setPreferences() function for setting the preferences')

src/consent-manager/index.tsx

@@ -16,7 +16,7 @@ export default class ConsentManager extends PureComponent<ConsentManagerProps, {
   static defaultProps = {
     otherWriteKeys: [],
     shouldRequireConsent: () => true,
-    implyConsentOnInteraction: true,
+    implyConsentOnInteraction: false,
     onError: undefined,
     cookieDomain: undefined,
     bannerTextColor: '#fff',
@@ -62,18 +62,16 @@ export default class ConsentManager extends PureComponent<ConsentManagerProps, {
           setPreferences,
           resetPreferences,
           saveConsent
-        }) => (
-          <Container
+        }) => {
+          return <Container
             destinations={destinations}
             newDestinations={newDestinations}
             preferences={preferences}
             isConsentRequired={isConsentRequired}
             setPreferences={setPreferences}
             resetPreferences={resetPreferences}
             saveConsent={saveConsent}
-            implyConsentOnInteraction={
-              implyConsentOnInteraction || ConsentManager.defaultProps.implyConsentOnInteraction
-            }
+            implyConsentOnInteraction={implyConsentOnInteraction ?? ConsentManager.defaultProps.implyConsentOnInteraction}
             bannerContent={bannerContent}
             bannerSubContent={bannerSubContent}
             bannerTextColor={bannerTextColor || ConsentManager.defaultProps.bannerTextColor}
@@ -85,7 +83,7 @@ export default class ConsentManager extends PureComponent<ConsentManagerProps, {
             cancelDialogTitle={cancelDialogTitle}
             cancelDialogContent={cancelDialogContent}
           />
-        )}
+        }}
       </ConsentManagerBuilder>
     )
   }

stories/0-consent-manager.stories.tsx

@@ -3,6 +3,7 @@ import cookies from 'js-cookie'
 import { Pane, Heading, Button } from 'evergreen-ui'
 import { ConsentManager, openConsentManager } from '../src'
 import { storiesOf } from '@storybook/react'
+import { ImplyConsentOnInteraction } from './ImplyConsentOnInteraction'
 
 const bannerContent = (
   <span>
@@ -67,7 +68,6 @@ const ConsentManagerExample = () => {
         otherWriteKeys={['vMRS7xbsjH97Bb2PeKbEKvYDvgMm5T3l']}
         bannerContent={bannerContent}
         bannerSubContent={bannerSubContent}
-        implyConsentOnInteraction={false}
         preferencesDialogTitle={preferencesDialogTitle}
         preferencesDialogContent={preferencesDialogContent}
         cancelDialogTitle={cancelDialogTitle}
@@ -112,6 +112,6 @@ const ConsentManagerExample = () => {
   )
 }
 
-storiesOf('React ConsentManager', module).add(`Basic React Component`, () => (
-  <ConsentManagerExample />
-))
+storiesOf('React ConsentManager', module)
+  .add(`Basic React Component`, () => <ConsentManagerExample />)
+  .add(`Basic React Component with implied consent`, () => <ImplyConsentOnInteraction />)

stories/ImplyConsentOnInteraction.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import cookies from 'js-cookie'
+import { Pane, Heading, Button, Paragraph } from 'evergreen-ui'
+import { ConsentManager, openConsentManager } from '../src'
+import {
+  bannerContent,
+  bannerSubContent,
+  preferencesDialogContent,
+  preferencesDialogTitle,
+  cancelDialogContent,
+  cancelDialogTitle
+} from './common-react'
+
+export const ImplyConsentOnInteraction = () => {
+  return (
+    <Pane>
+      <ConsentManager
+        writeKey="mA3XTMcavCUOQo5DL56VIHWcJMsyhAI7"
+        otherWriteKeys={['vMRS7xbsjH97Bb2PeKbEKvYDvgMm5T3l']}
+        bannerContent={bannerContent}
+        bannerSubContent={bannerSubContent}
+        preferencesDialogTitle={preferencesDialogTitle}
+        preferencesDialogContent={preferencesDialogContent}
+        cancelDialogTitle={cancelDialogTitle}
+        cancelDialogContent={cancelDialogContent}
+        implyConsentOnInteraction
+      />
+
+      <Pane marginX={100} marginTop={20}>
+        <Heading> Your website content </Heading>
+        <Paragraph>
+          Clicking anywhere on this page will cause the Consent Manager to imply consent.
+        </Paragraph>
+
+        <Pane display="flex">
+          <iframe
+            src="https://giphy.com/embed/yFQ0ywscgobJK"
+            width="398"
+            height="480"
+            frameBorder="0"
+          />
+        </Pane>
+
+        <div>
+          <Button onClick={openConsentManager}>Data Collection and Cookie Preferences</Button>
+        </div>
+
+        <div>
+          <Heading>to see the banner again:</Heading>
+          <Button
+            onClick={() => {
+              cookies.remove('tracking-preferences')
+              window.location.reload()
+            }}
+          >
+            Clear tracking preferences cookie
+          </Button>
+        </div>
+      </Pane>
+    </Pane>
+  )
+}

stories/common-react.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+export const bannerContent = (
+  <span>
+    We use cookies (and other similar technologies) to collect data to improve your experience on
+    our site. By using our website, you’re agreeing to the collection of data as described in our{' '}
+    <a
+      href="https://segment.com/docs/legal/website-data-collection-policy/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Website Data Collection Policy
+    </a>
+    .
+  </span>
+)
+export const bannerSubContent = 'You can manage your preferences here!'
+export const preferencesDialogTitle = 'Website Data Collection Preferences'
+export const preferencesDialogContent = (
+  <div>
+    <p>
+      Segment uses data collected by cookies and JavaScript libraries to improve your browsing
+      experience, analyze site traffic, deliver personalized advertisements, and increase the
+      overall performance of our site.
+    </p>
+    <p>
+      By using our website, you’re agreeing to our{' '}
+      <a
+        href="https://segment.com/docs/legal/website-data-collection-policy/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Website Data Collection Policy
+      </a>
+      .
+    </p>
+    <p>
+      The table below outlines how we use this data by category. To opt out of a category of data
+      collection, select “No” and save your preferences.
+    </p>
+  </div>
+)
+export const cancelDialogTitle = 'Are you sure you want to cancel?'
+export const cancelDialogContent = (
+  <div>
+    Your preferences have not been saved. By continuing to use our website, you’re agreeing to our{' '}
+    <a
+      href="https://segment.com/docs/legal/website-data-collection-policy/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Website Data Collection Policy
+    </a>
+    .
+  </div>
+)

stories/standalone-custom.html

@@ -39,7 +39,6 @@
           container: '#consent-manager',
           writeKey: 'mA3XTMcavCUOQo5DL56VIHWcJMsyhAI7',
           shouldRequireConsent: () => true,
-          implyConsentOnInteraction: false,
           bannerContent,
           bannerSubContent,
           preferencesDialogTitle,

stories/standalone.html

@@ -15,7 +15,6 @@
       src="./standalone/consent-manager.js"
       crossorigin="anonymous"
       defer
-      implyConsentOnInteraction="false"
       data-container="#consent-manager"
       data-writeKey="mA3XTMcavCUOQo5DL56VIHWcJMsyhAI7"
       data-otherWriteKeys="vMRS7xbsjH97Bb2PeKbEKvYDvgMm5T3l"

yarn.lock

@@ -2788,6 +2788,11 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -6140,27 +6145,32 @@ enzyme-adapter-utils@^1.3.0:
     object.assign "^4.0.4"
     prop-types "^15.6.0"
 
-enzyme@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"
-  integrity sha512-l8csyPyLmtxskTz6pX9W8eDOyH1ckEtDttXk/vlFWCjv00SkjTjtoUrogqp4yEvMyneU9dUJoOLnqFoiHb8IHA==
+enzyme@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.10.0.tgz#7218e347c4a7746e133f8e964aada4a3523452f6"
+  integrity sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==
   dependencies:
+    array.prototype.flat "^1.2.1"
     cheerio "^1.0.0-rc.2"
-    function.prototype.name "^1.0.3"
-    has "^1.0.1"
+    function.prototype.name "^1.1.0"
+    has "^1.0.3"
+    html-element-map "^1.0.0"
     is-boolean-object "^1.0.0"
-    is-callable "^1.1.3"
+    is-callable "^1.1.4"
     is-number-object "^1.0.3"
+    is-regex "^1.0.4"
     is-string "^1.0.4"
     is-subset "^0.1.1"
-    lodash "^4.17.4"
-    object-inspect "^1.5.0"
+    lodash.escape "^4.0.1"
+    lodash.isequal "^4.5.0"
+    object-inspect "^1.6.0"
     object-is "^1.0.1"
     object.assign "^4.1.0"
     object.entries "^1.0.4"
     object.values "^1.0.4"
     raf "^3.4.0"
     rst-selector-parser "^2.2.3"
+    string.prototype.trim "^1.1.2"
 
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
@@ -7252,7 +7262,7 @@ function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-function.prototype.name@^1.0.3, function.prototype.name@^1.1.0:
+function.prototype.name@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
   integrity sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==
@@ -7892,6 +7902,13 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
   integrity sha1-ZouTd26q5V696POtRkswekljYl4=
 
+html-element-map@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.1.0.tgz#e5aab9a834caf883b421f8bd9eaedcaac887d63c"
+  integrity sha512-iqiG3dTZmy+uUaTmHarTL+3/A2VW9ox/9uasKEZC+R/wAtUrTcRlXPSaPqsnWPfIu8wqn09jQNwMRqzL54jSYA==
+  dependencies:
+    array-filter "^1.0.0"
+
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
@@ -9921,6 +9938,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.escape@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
+  integrity sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -9931,6 +9953,11 @@ lodash.get@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
   integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.mapvalues@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
@@ -11021,7 +11048,7 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.5.0, object-inspect@^1.6.0:
+object-inspect@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
   integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==
@@ -14170,6 +14197,15 @@ string.prototype.padstart@^3.0.0:
     es-abstract "^1.4.3"
     function-bind "^1.0.2"
 
+string.prototype.trim@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz#75a729b10cfc1be439543dae442129459ce61e3d"
+  integrity sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.13.0"
+    function-bind "^1.1.1"
+
 string.prototype.trimleft@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"