DOC-74 Plan availability grid

js/hoverhelp/index.js

@@ -0,0 +1,34 @@
+const COMPONENT_NAME = 'data-hoverhelp'
+const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
+const BODY_SELECTOR = 'data-hoverhelp-body'
+const TRIGGER_SELECTOR = '[data-hoverhelp-target]'
+
+export default function () {
+  const components = document.querySelectorAll(COMPONENT_SELECTOR)
+
+  for (let i = 0; i < components.length; i++) {
+    const triggers = components[i].querySelectorAll(TRIGGER_SELECTOR)
+
+    for (let i = 0; i < triggers.length; i++) {
+      triggers[i].addEventListener('mouseover', e => {
+        e.preventDefault()
+
+        const targetBody = document.querySelector(`[${BODY_SELECTOR}=${e.target.dataset.hoverhelpTarget}]`)
+
+        components[i].classList.toggle(components[i].dataset.activeClass)
+      })
+    }
+
+    document.addEventListener('mouseover', e => {
+      if (components[i].classList.contains(components[i].dataset.activeClass)) {
+        const hoverhelpBody = components[i].querySelector(`[${BODY_SELECTOR}]`)
+
+        for (let i = 0; i < triggers.length; i++) {
+          if (!hoverhelpBody.contains(e.target) && e.target !== triggers[i]) {
+            components[i].classList.remove(components[i].dataset.activeClass)
+          }
+        }
+      }
+    })
+  }
+}

js/index.js

@@ -9,6 +9,7 @@ import dropdownMenu from './dropdown-menu'
 import anchorsIndicator from './anchors-indicator'
 import codeExample from './code-example'
 import popover from './popover'
+import hoverhelp from './hoverhelp'
 import menuPanels from './menu-panels'
 import searchBar404 from './search-bar-404'
 import backScrolling from './back-scrolling'
@@ -30,6 +31,7 @@ dropdownMenu()
 anchorsIndicator()
 codeExample()
 popover()
+hoverhelp()
 searchBar404()
 backScrolling()
 navigation()

src/_data/products.yml

@@ -0,0 +1,92 @@
+items:
+- product_display_name: Personas
+  slug: personas
+  plan-note: "Personas is available as an add-on for Business plans only."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: true
+- product_display_name: Personas Identity Graph
+  slug: personas-id
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: true
+- product_display_name: Protocols
+  slug: protocols
+  plan-note: "Protocols is available as an add-on for Business plans only."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: true
+- product_display_name: Advanced Access Management
+  slug: iam
+  plan-note: "Advanced Access Management is available for all Business plans."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Replay
+  slug: replay
+  plan-note: "Replay is available to all Business plans."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Privacy Portal
+  slug: privacy
+  plans:
+    free: true
+    team: true
+    business: true
+    add-on: false
+- product_display_name: Warehouses
+  slug: warehouses
+  plan-note: "Free and Team plan workspaces can have 1 warehouse. Business plans can have more than one, and include custom sync schedules and filtering."
+  plans:
+    free: true
+    team: trues
+    business: true
+    add-on: false
+- product_display_name: Warehouse custom sync
+  slug: warehouse-sync
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: true
+- product_display_name: Data Lakes
+  slug: data-lakes
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Audit Trail
+  slug: audit-trail
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Single Sign-on
+  slug: sso
+  plan-note: "Single Sign-on is only available in Business plan workspaces."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Multi-factor authentication
+  slug: mfa
+  plan-note: "MFA is available to all Segment plans, but cannot be used with SSO."
+  plans:
+    free: true
+    team: true
+    business: true
+    add-on: false

src/_includes/content/plan-grid.md

@@ -0,0 +1,43 @@
+{% assign thisProduct = include.name %}
+{% assign productData = site.data.products.items | where: "slug", thisProduct | first %}
+<!-- The line below hides the grid if there's no matching data in products.yml-->
+{% if productData %}
+
+{% assign productPlans = productData.plans %}
+
+
+<div class="popover" data-popover data-active-class="popover--active">
+<div class="flex flex--wrap waffle" style="margin-top: -25px;margin-bottom: 40px;" >
+
+{% for item in productPlans %}
+{% if item[1] == true %}
+<div class="flex__column flex__column--shrink">
+        <span class="badge badge--{% if item[0] == 'add-on' %}success{% else %}primary{%endif%}"> {{item[0] | capitalize }} ✓ </span>
+</div>
+{% else %}
+<div class="flex__column flex__column--shrink">
+        <span class="badge badge--gray" style="opacity:0.2"> {{item[0] | capitalize }} x </span>
+        </div>
+{% endif %}
+
+{% endfor %}
+<div class="flex__column flex__column--shrink" style="padding-top:0px">
+  <a class="recent-contributor__button button-link" href="#" data-popover-target="contributors">?</a>
+</div>
+</div>
+
+
+
+<div class="popover__body" data-popover-body="contributors">
+{% if productData.plan-note %}
+<p style="font-size:12px">{{productData.plan-note}}
+{% elsif productData.plans.add-on and productData.plans.business == false%}
+<p style="font-size:12px">{{productData.product_display_name}} is available as an add-on for the displayed plans only.</p>
+{% elsif productData.plans.add-on and productData.plans.business %}
+<p style="font-size:12px">{{productData.product_display_name}} is available as an add-on for Business plans only.
+{% else %}
+<p style="font-size:12px">{{productData.product_display_name}} is available for the listed account plans only.
+{% endif %}
+<br>See the <a href="https://segment.com/pricing">available plans</a>, or <a href="https://segment.com/help/contact/">contact us</a>.</p></div>
+</div>
+{% endif %}

src/_sass/components/_hoverhelp.scss

@@ -0,0 +1,28 @@
+.hoverhelp {
+  $this: &;
+
+  position: relative;
+
+  &__body {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    margin-top: 10px;
+    padding: 15px;
+    opacity: 0;
+    visibility: hidden;
+    border: 1px solid color(gray-400);
+    border-radius: 4px;
+    background: color(white);
+    transition: 200ms ease;
+  }
+
+  &--active {
+    #{$this}__body {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}

src/_sass/segment.scss

@@ -84,6 +84,7 @@
 @import "components/integration-header";
 @import "components/code-example";
 @import "components/popover";
+@import "components/hoverhelp";
 @import "components/avatars-list";
 @import "components/mobile-menu-side";
 @import "components/gloss";

src/connections/storage/catalog/data-lakes/index.md

@@ -2,6 +2,8 @@
 title: Set Up Segment Data Lakes
 redirect_from: '/connections/destinations/catalog/data-lakes/'
 ---
+{% include content/plan-grid.md name="data-lakes" %}
+
 
 Segment Data Lakes provide a way to collect large quantities of data in a format that's optimized for targeted data science and data analytics workflows. You can read [more information about Data Lakes](/docs/connections/storage/data-lakes/) and learn [how they differ from Warehouses](/docs/connections/storage/data-lakes/comparison/) in our documentation.
 
@@ -158,4 +160,4 @@ Replace:
 - [glue_db_name] = The Glue database created by Data Lakes which is named after the source slug
 - [spectrum_schema_name] = The schema name in Redshift you want to map to
 {% endfaqitem %}
-{% endfaq %}
+{% endfaq %}

src/connections/storage/data-lakes/comparison.md

@@ -1,6 +1,8 @@
 ---
 title: Comparing Data Lakes and Warehouses
 ---
+{% include content/plan-grid.md name="data-lakes" %}
+
 
 As Segment builds new data storage products, each product evolves from prior products to best support the needs of customers. Segment Data Lakes is an evolution of the Warehouses product that meets the changing needs of customers.
 

src/connections/storage/data-lakes/data-lakes-manual-setup.md

@@ -2,6 +2,8 @@
 hidden: true
 title: Configure the Data Lakes AWS Environment
 ---
+{% include content/plan-grid.md name="data-lakes" %}
+
 
 The instructions below will guide you through the process required to configure the environment required to begin loading data into your Segment Data Lake. For a more automated process, see [Step 1 - Configure AWS Resources](#step-1---configure-aws-resources) above.
 

src/connections/storage/data-lakes/index.md

@@ -3,6 +3,8 @@ title: Segment Data Lakes Overview
 redirect_from: '/connections/destinations/catalog/data-lakes/'
 ---
 
+{% include content/plan-grid.md name="data-lakes" %}
+
 Segment Data Lakes sends Segment data to a cloud data store (for example AWS S3) in a format optimized to reduce processing for data analytics and data science workloads. Segment data is great for building machine learning models for personalization and recommendations, and for other large scale advanced analytics. Data Lakes can reduce the amount of processing required to get real value out of your data.
 
 > info ""

src/connections/storage/data-lakes/sync-reports.md

@@ -1,6 +1,8 @@
 ---
-title: Sync Reports and Errors
+title: Data Lakes Sync Reports and Errors
 ---
+{% include content/plan-grid.md name="data-lakes" %}
+
 
 Segment Data Lakes generates reports with operational metrics about each sync to your data lake so you can monitor sync performance. These sync reports are stored in your S3 bucket and Glue Data Catalog. This means you have access to the raw data, so you can query it to answer questions and set up alerting and monitoring tools.
 
@@ -243,4 +245,4 @@ However, Warehouse sync information is only available in the Segment app: on the
 {% faqitem What happens if a sync is partly successful? %}
 Sync reports are currently generated only when a sync completes, or when it fails. Partial failure reporting is not currently supported.
 {% endfaqitem %}
-{% endfaq %}
+{% endfaq %}

src/connections/storage/warehouses/index.md

@@ -3,6 +3,7 @@ title: Data Warehouses
 redirect_from: '/connections/warehouses/'
 ---
 
+{% include content/plan-grid.md name="warehouses" %}
 
 ## What's a Warehouse?
 

src/personas/audiences/account-audiences.md

@@ -2,6 +2,8 @@
 title: Account-level Audiences
 ---
 
+
+
 Account-level audiences are Personas audiences for businesses that sell to other businesses. They return the set of accounts which match a combination of account-level traits, user-level traits, and user events. You can sync these accounts and associated users with downstream destinations.
 
 > info ""
@@ -98,7 +100,7 @@ For example, you may wish to create an audience which selects all admin-level us
 
 ## Known limitations of account-level audiences
 
-- Account-level audiences do not respect the `context.groupId` property on track calls. If users are associated with multiple accounts (through multiple group calls), the entire collection of a user’s events is considered when evaluating user-level event conditions (not just those events which are tagged with a matching `groupId`). This can lead to unexpected results where a user’s events triggered in the context of one account lead to another account incorrectly matching an account-level audience. 
+- Account-level audiences do not respect the `context.groupId` property on track calls. If users are associated with multiple accounts (through multiple group calls), the entire collection of a user’s events is considered when evaluating user-level event conditions (not just those events which are tagged with a matching `groupId`). This can lead to unexpected results where a user’s events triggered in the context of one account lead to another account incorrectly matching an account-level audience.
 - The identity breakdown report (displayed in the audience builder for user-level audiences) is not available for account-level audiences.
 
 If you find that these limitations impede your ability to use account-level audiences, contact [friends@segment.com](mailto:friends@segment.com) with details about your use-case.

src/personas/audiences/index.md

@@ -2,6 +2,9 @@
 title: Personas Audiences Overview
 ---
 
+
+
+
 Audiences allow you to define cohorts of users or accounts based on their event behavior and traits that Segment then keeps up-to-date over time. Audiences can be built from your core **tracking events**, **traits**, or **computed traits**. These audiences can then be synced to hundreds of destinations and are available using the [Profile API](/docs/personas/profile-api).
 
 ## Building an Audience

src/personas/computed-traits.md

@@ -2,6 +2,8 @@
 title: Personas Computed Traits
 ---
 
+
+
 Computed Traits allow you to quickly create user or account-level calculations that Segment keeps up-to-date over time. These can be computations like the `total_num_orders` a customer has completed, the `lifetime_revenue` of a customer, the `most_frequent_user` to determine which user is most active in an account, or the `unique_visitors_count` to assess how many visitors from a single domain. These computations are based on your events and event properties that you are sending through Segment on the [page](/docs/connections/spec/page/) and [track](/docs/connections/spec/track) calls.
 
 ## Types of Computed Traits

src/personas/faqs.md

@@ -2,6 +2,8 @@
 title: Personas Frequently Asked Questions
 ---
 
+
+
 ## Can I use the Profile API on the client-side?
 For security reasons, we require the Profile API only be used server-side. The Profile API allows you to look up data about any user given an identifier (e.g. email, `anonymousId`, or `userId`) and an authorized access secret. While this enables powerful personalization workflows, it could also let your customers' data fall into the wrong hands if the access secret were exposed on the client.
 

src/personas/identity-resolution/ecommerce-example.md

@@ -1,6 +1,10 @@
 ---
 title: Identity Resolution eCommerce Example
 ---
+
+
+
+
 The Personas Identity Resolution feature helps to create a unified view of the user across devices, apps, and unique identifiers.
 
 Let's take the example of a sneaker company called SegmentKicks which has an eCommerce app called SegKicks as well as a running app called SegRuns. We'll follow Jane Doe throughout her entire customer journey from an anonymous user to a registered buyer on one app, SegKicks, to her use of the same app on a different device, and finally to her use of a different app belonging to the same company, SegRuns.

src/personas/identity-resolution/identity-resolution-onboarding.md

@@ -1,6 +1,10 @@
 ---
 title: Identity Resolution Onboarding
 ---
+
+
+
+
 > note ""
 > **NOTE:** The steps in this guide pertain to spaces created after **October 5th, 2020**. For spaces created before **October 5th, 2020**, please refer to [Identity Resolution Settings](/docs/personas/identity-resolution/identity-resolution-settings).
 
@@ -123,7 +127,7 @@ For example, consider a Personas space with the following Identity Resolution co
 | email        | 5     | 2        |
 | anonymous_id | 5     | 3        |
 
-A profile already exists with `user_id` **abc123** and `email` **jane@example1.com**. A new event comes in with new `user_id` **abc456** but the same `email` **jane@example1.com**. 
+A profile already exists with `user_id` **abc123** and `email` **jane@example1.com**. A new event comes in with new `user_id` **abc456** but the same `email` **jane@example1.com**.
 
 If this event maps to this profile, the resulting profile would then contain two `user_id` values and one `email`. Given that `user_id` has a limit of 1, this exceeds the limit of that identifier. As a result, Segment checks the priority of the `user_id` identifier. Because `email` and `user_id` are the two identifiers on the event and `email` ranks lower than `user_id`, Segment demotes `email` as an identifier on the incoming event and tries again.
 

src/personas/identity-resolution/identity-resolution-settings.md

@@ -2,6 +2,10 @@
 title: Identity Resolution Settings
 redirect_from: '/personas/identity-resolution/identity-graph-rules/'
 ---
+
+
+
+
 > note ""
 > **NOTE:** The steps in this guide pertain to spaces created before September 27th, 2020. For spaces created after September 27th, 2020, please refer to the onboarding guide [here](/docs/personas/identity-resolution/identity-resolution-onboarding/).
 
@@ -151,7 +155,7 @@ For example, consider a Personas space with the following Identity Resolution co
 | email        | 5     | 2        |
 | anonymous_id | 5     | 3        |
 
-A profile already exists with `user_id` **abc123** and `email` **jane@example1.com**. A new event comes in with new `user_id` **abc456** but the same `email` **jane@example1.com**. 
+A profile already exists with `user_id` **abc123** and `email` **jane@example1.com**. A new event comes in with new `user_id` **abc456** but the same `email` **jane@example1.com**.
 
 If this event maps to this profile, the resulting profile would then contain two `user_id` values and one `email`. Given that `user_id` has a limit of 1, this exceeds the limit of that identifier. As a result, Segment checks the priority of the `user_id` identifier. Because `email` and `user_id` are the two identifiers on the event and `email` ranks lower than `user_id`, Segment demotes `email` as an identifier on the incoming event and tries again.
 

src/personas/identity-resolution/identity-warehouse.md

@@ -2,6 +2,9 @@
 title: Identity Warehouse (Limited Availability)
 ---
 
+
+
+
 > warning ""
 > **Note:** The Identity warehouse currently has limited availability, and does not support GDPR deletion requests. Contact your Segment customer success manager to enable this feature.