@hashicorp/react-components 0.0.0

package/packages/consent-manager/dialog.js

@@ -0,0 +1,286 @@
+/*
+  dialog.js
+  Managing preferences dialog
+*/
+
+import { Component } from 'react'
+import getIntegrations from './integrations'
+import Button from '@hashicorp/react-button'
+import Toggle from '@hashicorp/react-toggle'
+import CloseButton from './icn_close'
+
+export default class ConsentPreferences extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      version: props.version || 0,
+      showConfirmationDialog: false,
+      groupedIntegrations: {}, // Integrations object grouped by category
+      consent: props.preferences, // Consent preferences object
+      categories: props.categories.reduce((obj, category) => {
+        obj[category.name] = category.description
+        return obj
+      }, {}), // Transform categories description array to object
+      showCategories: {}, // Category toggle state object
+    }
+
+    this.handleFold = this.handleFold.bind(this)
+    this.getCategoryToggle = this.getCategoryToggle.bind(this)
+  }
+
+  componentDidMount() {
+    // Set up integrations
+    getIntegrations(
+      this.props.segmentServices,
+      this.props.additionalServices,
+      this.props.segmentWriteKey,
+      this.props.utilServerRoot
+    ).then((groupedIntegrations) => {
+      this.setState({ groupedIntegrations })
+    })
+  }
+
+  // Handler for when user toggles a category or individual integration
+  handleToggle(integrationName, integrationOrigin, newValue) {
+    let currentConsent = this.state.consent || {}
+
+    // If user has { loadAll: true } and they toggle, make sure to preserve
+    // the loadAll settings by setting everything to true first. This setting
+    // gets reset at the end of the function.
+    if (currentConsent.loadAll) {
+      Object.keys(this.state.groupedIntegrations).forEach((category) => {
+        this.state.groupedIntegrations[category].forEach((tool) => {
+          currentConsent[tool.origin] = currentConsent[tool.origin] || {}
+          currentConsent[tool.origin][tool.name] = true
+        })
+      })
+    }
+
+    if (integrationOrigin === 'categories') {
+      // User toggled a category toggle
+      // Go through list of groupedIntegrations
+      this.state.groupedIntegrations[integrationName].forEach((tool) => {
+        currentConsent[tool.origin] = currentConsent[tool.origin] || {}
+        currentConsent[tool.origin][tool.name] = newValue
+      })
+    } else {
+      // User toggled an individual tool toggle
+      currentConsent[integrationOrigin] =
+        currentConsent[integrationOrigin] || {}
+      currentConsent[integrationOrigin][integrationName] = newValue
+    }
+
+    delete currentConsent.loadAll
+
+    this.setState({ consent: currentConsent })
+  }
+
+  // Handler for folding categories
+  handleFold(categoryName) {
+    const categories = this.state.showCategories
+    categories[categoryName] = !categories[categoryName]
+    this.setState({ showCategories: categories })
+  }
+
+  // Calculate value of category toggle
+  getCategoryToggle(category) {
+    return this.state.groupedIntegrations[category].some((tool) => {
+      return (
+        this.state.consent &&
+        this.state.consent.hasOwnProperty(tool.origin) &&
+        this.state.consent[tool.origin].hasOwnProperty(tool.name) &&
+        this.state.consent[tool.origin][tool.name]
+      )
+    })
+  }
+
+  // Build each individual category and integration row
+  buildCategory(items, name) {
+    const categoryItems = items.map((item) => {
+      return (
+        <div className="category-item flex-column" key={item.name}>
+          <div className="item-title">{item.name}</div>
+          <div className="flex-centered-row">
+            <div className="item-description">{item.description}</div>
+            <div className="consent-toggle">
+              <Toggle
+                onChange={this.handleToggle.bind(this, item.name, item.origin)}
+                enabled={Boolean(
+                  this.state.consent.loadAll ||
+                    (this.state.consent &&
+                      this.state.consent[item.origin] &&
+                      this.state.consent[item.origin][item.name])
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      )
+    })
+
+    return (
+      <div className="category" key={name}>
+        <div className="category-title">{name}</div>
+        <div className="flex-centered-row">
+          <div className="category-description">
+            {this.state.categories[name]}
+          </div>
+          <div className="consent-toggle">
+            {!this.state.showCategories[name] && (
+              <Toggle
+                onChange={this.handleToggle.bind(this, name, 'categories')}
+                enabled={
+                  this.state.consent.loadAll || this.getCategoryToggle(name)
+                }
+              />
+            )}
+          </div>
+        </div>
+        <div className="category-fold">
+          <a
+            onClick={() => {
+              this.handleFold(name)
+            }}
+          >
+            {!this.state.showCategories[name] && 'See more'}
+            {this.state.showCategories[name] && 'See less'}
+            <svg
+              width="14"
+              height="8"
+              xmlns="http://www.w3.org/2000/svg"
+              className={!this.state.showCategories[name] ? 'down' : 'up'}
+            >
+              <path
+                d="M12.293.293L7 5.586 1.707.293A1 1 0 1 0 .293 1.707l6 6a.997.997 0 0 0 1.414 0l6-6A1 1 0 0 0 12.293.293"
+                fill="#1563FF"
+                fillRule="evenodd"
+              />
+            </svg>
+          </a>
+        </div>
+        {this.state.showCategories[name] && (
+          <div className="category-items flex-column">{categoryItems}</div>
+        )}
+      </div>
+    )
+  }
+
+  render() {
+    let categories = Object.keys(this.state.groupedIntegrations)
+    categories = categories.map((category) => {
+      return this.buildCategory(
+        this.state.groupedIntegrations[category],
+        category
+      )
+    })
+
+    return (
+      <div className="g-consent-dialog" data-testid="consent-mgr-dialog">
+        {/* Manage preferences dialog */}
+        {!this.state.showConfirmationDialog && (
+          <div className="g-consent-visible-dialog flex-column">
+            <div className="dialog-title flex-centered-row">
+              <span>Data Collection Preferences</span>
+              <div
+                className="clickable flex-centered-row"
+                onClick={() => {
+                  this.setState({ showConfirmationDialog: true })
+                }}
+              >
+                <CloseButton />
+              </div>
+            </div>
+            <div className="dialog-body">
+              <p>
+                HashiCorp uses data collected by cookies and JavaScript
+                libraries to improve your browsing experience, analyze site
+                traffic, and increase the overall performance of our site. By
+                using our website, you’re agreeing to our{' '}
+                <a
+                  href={this.props.privacyPolicyLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  data-testid="privacy-policy-link"
+                >
+                  Privacy Policy
+                </a>
+                .
+              </p>
+              <p>
+                The categories below outline which companies and tools we use
+                for collecting data. To opt out of a category of data
+                collection, set the toggle to “Off” and save your preferences.
+              </p>
+              <div id="outline">{categories}</div>
+            </div>
+            <div className="dialog-footer">
+              <Button
+                title="Cancel"
+                className="button-cancel"
+                theme={{
+                  variant: 'secondary',
+                  brand: 'neutral',
+                  background: 'light',
+                }}
+                onClick={() => {
+                  this.setState({ showConfirmationDialog: true })
+                }}
+              />
+              <Button
+                className="button-save"
+                title="Save Preferences"
+                onClick={() => {
+                  this.props.saveAndLoadAnalytics(this.state.consent)
+                }}
+              />
+            </div>
+          </div>
+        )}
+        {/* Cancellation confirmation dialog */}
+        {this.state.showConfirmationDialog && (
+          <div className="g-consent-visible-dialog">
+            <div className="dialog-title flex-centered-row">
+              <span>Are you sure?</span>
+            </div>
+            <div className="dialog-body">
+              <p>
+                Your preferences have not been saved. To continue using our
+                website, you must either set individual preferences or agree to{' '}
+                <a
+                  href={this.props.privacyPolicyLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  our privacy policy
+                </a>
+                .
+              </p>
+            </div>
+            <div className="dialog-footer">
+              <Button
+                title="Back to Preferences"
+                theme={{
+                  variant: 'secondary',
+                  brand: 'neutral',
+                  background: 'light',
+                }}
+                className="button-cancel"
+                onClick={() => {
+                  this.setState({ showConfirmationDialog: false })
+                }}
+              />
+              <Button
+                title="Agree & Close"
+                className="button-save"
+                onClick={() => {
+                  this.props.saveAndLoadAnalytics({ loadAll: true })
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+}

package/packages/consent-manager/icn_close.js

@@ -0,0 +1,19 @@
+export default function CloseIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Close Button</title>
+      <path
+        d="M1.778 1.778l12.541 12.541m-.097-12.541L1.681 14.319"
+        stroke="#FFF"
+        strokeWidth="2"
+        fill="none"
+        strokeLinecap="square"
+      />
+    </svg>
+  )
+}

package/packages/consent-manager/index.js

@@ -0,0 +1,119 @@
+import { Component } from 'react'
+import { render } from 'react-dom'
+import EventEmitter from 'events'
+import inEU from '@segment/in-eu'
+import ConsentBanner from './banner'
+import ConsentPreferences from './dialog'
+import { loadPreferences, savePreferences } from './cookies'
+import loadAnalytics from './load'
+
+const emitter = new EventEmitter()
+
+// TODO: remove this
+export function init(props) {
+  render(<ConsentManager {...props} />, document.querySelector(props.container))
+}
+
+export function open() {
+  emitter.emit('openDialog')
+}
+
+export default class ConsentManager extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showDialog: props.showDialog || false,
+      showBanner: false,
+      preferences: loadPreferences() || {},
+    }
+    this.saveAndLoadAnalytics = this.saveAndLoadAnalytics.bind(this)
+    this.openDialog = this.openDialog.bind(this)
+  }
+
+  saveAndLoadAnalytics(preferences) {
+    if (typeof preferences === 'undefined') {
+      preferences = { All: false, 'Segment.io': false }
+    }
+    savePreferences(preferences, this.props.version)
+
+    loadAnalytics(
+      preferences,
+      this.props.segmentWriteKey,
+      this.props.additionalServices
+    )
+
+    // Close all dialogs
+    document.body.classList.remove('g-noscroll')
+    this.setState({
+      showDialog: false,
+      showBanner: false,
+      preferences: loadPreferences(),
+    })
+  }
+
+  shouldRequireConsent() {
+    // 1. Check cookies
+    if (
+      this.state.preferences &&
+      this.state.preferences.version === this.props.version
+    ) {
+      // Load segment and custom integrations
+      loadAnalytics(
+        this.state.preferences,
+        this.props.segmentWriteKey,
+        this.props.additionalServices
+      )
+      return false
+    }
+    // 2. Check inEU. If in-eu, show consent. If not, show nothing. Load all.
+    if (inEU() || this.props.forceShow) {
+      return true
+    } else {
+      // Load all analytics
+      this.saveAndLoadAnalytics({ loadAll: true })
+      return false
+    }
+  }
+
+  componentDidMount() {
+    this.setState({ showBanner: this.shouldRequireConsent() })
+    emitter.on('openDialog', this.openDialog)
+  }
+
+  openDialog() {
+    document.body.classList.add('g-noscroll')
+    this.setState({ showDialog: true, showBanner: false })
+  }
+
+  render() {
+    return (
+      <div id="g-consent-manager">
+        {/*  Consent banner at the bottom */}
+        {this.state.showBanner && (
+          <ConsentBanner
+            privacyPolicyLink={this.props.privacyPolicyLink}
+            onManagePreferences={this.openDialog}
+            onAccept={() => {
+              this.saveAndLoadAnalytics({ loadAll: true })
+            }}
+          />
+        )}
+        {/*  Consent manager preferences dialog */}
+        {this.state.showDialog && (
+          <ConsentPreferences
+            version={this.props.version}
+            segmentWriteKey={this.props.segmentWriteKey}
+            utilServerRoot={this.props.utilServerRoot}
+            segmentServices={this.props.segmentServices}
+            additionalServices={this.props.additionalServices}
+            preferences={this.state.preferences}
+            categories={this.props.categories}
+            privacyPolicyLink={this.props.privacyPolicyLink}
+            saveAndLoadAnalytics={this.saveAndLoadAnalytics}
+          />
+        )}
+      </div>
+    )
+  }
+}

package/packages/consent-manager/integrations.js

@@ -0,0 +1,92 @@
+/*
+  integrations.js
+  Fetches integrations from Segment given write key and applies user-defined
+  overrides. Combines with custom scripts to give a complete view into
+  scripts that the site is trying to load. Finally, groups it all by category.
+*/
+
+export default function getIntegrations(
+  segmentServices,
+  additionalServices,
+  segmentWriteKey,
+  utilServerRoot
+) {
+  return fetchIntegrationsFromSegment(segmentWriteKey, utilServerRoot)
+    .then(zipIntegrations.bind(this, segmentServices, additionalServices))
+    .then(groupByCategory)
+}
+
+// Get integrations from Segment by write key
+function fetchIntegrationsFromSegment(segmentWriteKey, utilServerRoot) {
+  return fetch(`${utilServerRoot}/seg_integrations/${segmentWriteKey}`).then(
+    (res) => {
+      if (!res.ok) {
+        throw new Error(
+          `Failed to fetch integrations: HTTP ${res.status} ${res.statusText}`
+        )
+      }
+
+      return res.json()
+    }
+  )
+}
+
+// Include developer overrides for fetched Segment integrations
+function zipIntegrations(
+  segmentOverrides,
+  additionalServices,
+  segmentOriginated
+) {
+  // Create Segment integration object with name as key for quick retrieval
+  let segmentObj = segmentOriginated.reduce((obj, segment) => {
+    obj[segment.name] = segment
+    obj[segment.name].origin = 'segment'
+    return obj
+  }, {})
+
+  // Go through each developer-defined segment service and update
+  // segmentObj with any overrides
+  for (var i = 0; i < segmentOverrides.length; i++) {
+    if (segmentObj.hasOwnProperty(segmentOverrides[i].name)) {
+      segmentObj[segmentOverrides[i].name] = Object.assign(
+        segmentObj[segmentOverrides[i].name],
+        segmentOverrides[i]
+      )
+    } else {
+      /* eslint-disable-next-line */
+      console.warn(
+        `Unmatched integration config for ${segmentOverrides[i].name}`
+      )
+    }
+  }
+
+  // Include additional (non-Segment) services
+  let allIntegrations = additionalServices
+    ? additionalServices.map((integration) => {
+        integration.origin = 'custom'
+        return integration
+      })
+    : []
+
+  for (const key in segmentObj) {
+    allIntegrations.push(segmentObj[key])
+  }
+
+  // Returns array with all integrations, with origin key (segment or custom)
+  return allIntegrations
+}
+
+// Group by category for display purposes
+function groupByCategory(integrations) {
+  let grouped = {}
+
+  integrations.forEach((integration) => {
+    if (grouped.hasOwnProperty(integration.category)) {
+      grouped[integration.category].push(integration)
+    } else {
+      grouped[integration.category] = [integration]
+    }
+  })
+
+  return grouped
+}

package/packages/consent-manager/load.js

@@ -0,0 +1,139 @@
+/*
+  load.js
+  Responsible for loading scripts, whether they are Segment-originated or
+  custom defined.
+*/
+
+export default function loadAnalytics(
+  preferences,
+  segmentWriteKey,
+  additionalServices
+) {
+  // If analytics have already been added to page, it's likely you're updating your preferences
+  // We reload the page to re-initiate the script with the updated integrations
+  // TODO: Investigate alternatives to full page reload approach
+  if (window.analytics && window.analytics.initialized) {
+    window.location.reload()
+    return
+  }
+
+  if (preferences.loadAll) {
+    loadSegment(segmentWriteKey, { All: true })
+    loadCustom(additionalServices)
+    return
+  }
+
+  if (preferences.segment) {
+    loadSegment(segmentWriteKey, preferences.segment)
+  }
+
+  if (preferences.custom) {
+    loadCustom(additionalServices, preferences.custom)
+  }
+}
+
+function loadSegment(writeKey, userPreferences = {}) {
+  const integrations = Object.assign(
+    { All: false, 'Segment.io': true },
+    userPreferences
+  )
+
+  // Exit early if Segment snippet is already present on page
+  if (window.analytics) return
+
+  // Otherwise, construct and append script to <body>
+  insertScript({
+    body: constructSegmentSnippet(writeKey, integrations),
+    addToBody: true,
+  })
+}
+
+function loadCustom(services, userPreferences) {
+  if (!services || services.length === 0) return
+
+  if (userPreferences) {
+    // Load according to user preferences
+    const integrationNames = Object.keys(userPreferences)
+    let service
+    integrationNames.forEach((name) => {
+      service = services.find((service) => {
+        return userPreferences[name] && service.name === name
+      })
+      if (service) {
+        insertScript(service)
+      }
+    })
+  } else {
+    // Load everything
+    services.forEach((service) => {
+      insertScript(service)
+    })
+  }
+}
+
+function insertScript(script) {
+  const scriptElement = document.createElement('script')
+  scriptElement.type = 'text/javascript'
+
+  if (script.async) {
+    scriptElement.setAttribute('async', '')
+  }
+
+  if (script.dataAttrs) {
+    script.dataAttrs.forEach((attr) => {
+      scriptElement.dataset[attr.name] = attr.value
+    })
+  }
+
+  if (script.body) {
+    scriptElement.text = script.body
+  } else if (script.url) {
+    scriptElement.src = script.url
+  }
+
+  if (script.addToBody) {
+    document.body.appendChild(scriptElement)
+  } else {
+    document.head.appendChild(scriptElement)
+  }
+}
+
+function constructSegmentSnippet(writeKey, integrations) {
+  // Define a function that's responsible for sending Segment-related properties to Heap
+  // We pass this callback function to Segment's ready method (https://segment.com/docs/sources/website/analytics.js/#ready)
+  const readyCb = function passSegmentKeysToHeap() {
+    if (!window.heap) return
+
+    // Send XID
+    if (!localStorage.getItem('seg_heap_xid')) {
+      const xId = localStorage.getItem('seg_xid')
+
+      if (xId) {
+        window.heap.addUserProperties({
+          'Segment Cross Origin ID': JSON.parse(xId),
+        })
+        localStorage.setItem('seg_heap_xid', Date.now())
+      }
+    }
+
+    // Send Anonymous ID
+    if (!localStorage.getItem('seg_heap_anonymous_id')) {
+      const anonId = localStorage.getItem('ajs_anonymous_id')
+
+      if (anonId) {
+        window.heap.addUserProperties({
+          'Segment Dotcom Anonymous ID': JSON.parse(anonId),
+        })
+        localStorage.setItem('seg_heap_anonymous_id', Date.now())
+      }
+    }
+  }
+
+  return `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
+analytics.load("${writeKey}", ${
+    integrations ? JSON.stringify({ integrations }) : {}
+  });
+analytics.page();
+analytics.ready(${readyCb});
+}}();`
+}

package/packages/consent-manager/package-lock.json

@@ -0,0 +1,45 @@
+{
+  "name": "@hashicorp/react-consent-manager",
+  "version": "3.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@hashicorp/react-button": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.3.0.tgz",
+      "integrity": "sha512-1C6V8OxadkdDAkwgItDfNxx7ns9EB6znK39V94RBiPvElmsNLCEG7zujcQX71V2n+HMSv1JPgDvXp4WLICzK+Q==",
+      "requires": {
+        "@hashicorp/react-inline-svg": "^1.0.0",
+        "slugify": "^1.3.6"
+      }
+    },
+    "@hashicorp/react-inline-svg": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.2.tgz",
+      "integrity": "sha512-AAFnBslSTgnEr++dTbMn3sybAqvn7myIj88ijGigF6u11eSRiV64zqEcyYLQKWTV6dF4AvYoxiYC6GSOgiM0Yw=="
+    },
+    "@segment/in-eu": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@segment/in-eu/-/in-eu-0.2.1.tgz",
+      "integrity": "sha512-7JKBw/l3S9J0ldo/n6XPfd3sT89f300KOCvmZsd8sryVZOWlE4L2LMKT538I34bjRdaOd1aJ52TsOAZUOLqxiQ==",
+      "requires": {
+        "jstz": "^2.0.0"
+      }
+    },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
+    "jstz": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/jstz/-/jstz-2.1.1.tgz",
+      "integrity": "sha512-8hfl5RD6P7rEeIbzStBz3h4f+BQHfq/ABtoU6gXKQv5OcZhnmrIpG7e1pYaZ8hS9e0mp+bxUj08fnDUbKctYyA=="
+    },
+    "slugify": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
+      "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
+    }
+  }
+}