Skip to content
This repository has been archived by the owner on Apr 3, 2024. It is now read-only.

Commit

Permalink
🙅🏻‍♀️No longer imply consent on interaction (#47)
Browse files Browse the repository at this point in the history
* No longer imply consent on interaction
* Add example
  • Loading branch information
nettofarah authored Oct 8, 2019
1 parent 322fea3 commit 6d2e409
Show file tree
Hide file tree
Showing 10 changed files with 196 additions and 26 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
20 changes: 20 additions & 0 deletions src/__tests__/consent-manager-builder/index.todo.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
12 changes: 5 additions & 7 deletions src/consent-manager/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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}
Expand All @@ -85,7 +83,7 @@ export default class ConsentManager extends PureComponent<ConsentManagerProps, {
cancelDialogTitle={cancelDialogTitle}
cancelDialogContent={cancelDialogContent}
/>
)}
}}
</ConsentManagerBuilder>
)
}
Expand Down
8 changes: 4 additions & 4 deletions stories/0-consent-manager.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -67,7 +68,6 @@ const ConsentManagerExample = () => {
otherWriteKeys={['vMRS7xbsjH97Bb2PeKbEKvYDvgMm5T3l']}
bannerContent={bannerContent}
bannerSubContent={bannerSubContent}
implyConsentOnInteraction={false}
preferencesDialogTitle={preferencesDialogTitle}
preferencesDialogContent={preferencesDialogContent}
cancelDialogTitle={cancelDialogTitle}
Expand Down Expand Up @@ -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 />)
62 changes: 62 additions & 0 deletions stories/ImplyConsentOnInteraction.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
56 changes: 56 additions & 0 deletions stories/common-react.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
1 change: 0 additions & 1 deletion stories/standalone-custom.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
container: '#consent-manager',
writeKey: 'mA3XTMcavCUOQo5DL56VIHWcJMsyhAI7',
shouldRequireConsent: () => true,
implyConsentOnInteraction: false,
bannerContent,
bannerSubContent,
preferencesDialogTitle,
Expand Down
1 change: 0 additions & 1 deletion stories/standalone.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
src="./standalone/consent-manager.js"
crossorigin="anonymous"
defer
implyConsentOnInteraction="false"
data-container="#consent-manager"
data-writeKey="mA3XTMcavCUOQo5DL56VIHWcJMsyhAI7"
data-otherWriteKeys="vMRS7xbsjH97Bb2PeKbEKvYDvgMm5T3l"
Expand Down
58 changes: 47 additions & 11 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 6d2e409

Please sign in to comment.