Merge pull request #743 from manifoldco/add-plan-type-to-customer-pla…

…n-selector-event Adds features data (free boolean) to manifold-plan-selector custom event
manifoldco · Nov 19, 2019 · 5452852 · 5452852 · vercel · Nov 19, 2019
2 parents 8375bb5 + 42f4322
commit 5452852
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- Free features data to plan selector custom event. (#743)
+
 ## [0.7.0] - 2019-11-19
 
 ### Added

diff --git a/docs/docs/components/manifold-plan-selector.md b/docs/docs/components/manifold-plan-selector.md
@@ -46,18 +46,16 @@ document.addEventListener('manifold-planSelector-change', ({ detail }) => {
 //   planLabel: 'nvidia-1080ti-100gb-ssd',
 //   planName: 'NVIDIA 1080TI',
 //   productLabel: 'zerosix',
-//   features: {
-//     // …
-//   },
+//   freePlan: false
 // }
 ```
 
 The following events are emitted:
 
-| Event Name                     | Description                                                                                                                | Data                                                                                     |
-| :----------------------------- | :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------- |
-| `manifold-planSelector-change` | Fires whenever a user makes a change.                                                                                      | `planID`, `planLabel`, `planName`, `productId`, `productLabel`, `regionId`, `regionName` |
-| `manifold-planSelector-load`   | Identical to `-update` above, but this fires once on DOM mount to set the initial state (i.e. user hasn’t interacted yet). | `planID`, `planLabel`, `planName`, `productId`, `productLabel`, `regionId`, `regionName` |
+| Event Name                     | Description                                                                                                                | Data                                                                                                 |
+| :----------------------------- | :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- |
+| `manifold-planSelector-change` | Fires whenever a user makes a change.                                                                                      | `planID`, `planLabel`, `planName`, `productId`, `productLabel`, `regionId`, `regionName`, `freePlan` |
+| `manifold-planSelector-load`   | Identical to `-update` above, but this fires once on DOM mount to set the initial state (i.e. user hasn’t interacted yet). | `planID`, `planLabel`, `planName`, `productId`, `productLabel`, `regionId`, `regionName`, `freePlan` |
 
 ## Free plans only
 

diff --git a/src/components/manifold-plan-details/manifold-plan-details.spec.ts b/src/components/manifold-plan-details/manifold-plan-details.spec.ts
@@ -49,6 +49,7 @@ describe('<manifold-plan-details>', () => {
             productLabel: product.label,
             regionId: region && region.id,
             regionName: region && region.displayName,
+            freePlan: paidPlan.free,
           },
         })
       );
@@ -77,6 +78,7 @@ describe('<manifold-plan-details>', () => {
             productLabel: product.label,
             regionId: region && region.id,
             regionName: region && region.displayName,
+            freePlan: freePlan.free,
           },
         })
       );

diff --git a/src/components/manifold-plan-details/manifold-plan-details.tsx b/src/components/manifold-plan-details/manifold-plan-details.tsx
@@ -18,6 +18,7 @@ interface EventDetail {
   productLabel: string | undefined;
   regionId?: string;
   regionName?: string;
+  freePlan: boolean;
 }
 
 @Component({
@@ -48,6 +49,7 @@ export class ManifoldPlanDetails {
       productLabel: this.product && this.product.label,
       regionId: defaultRegion && defaultRegion.id,
       regionName: defaultRegion && defaultRegion.displayName,
+      freePlan: newPlan.free,
     };
 
     if (!oldPlan) {
@@ -83,6 +85,7 @@ export class ManifoldPlanDetails {
         productLabel: this.product && this.product.label,
         regionId: defaultRegion && defaultRegion.id,
         regionName: defaultRegion && defaultRegion.displayName,
+        freePlan: this.plan.free,
       };
       this.planLoad.emit(detail);
       // reset features
@@ -103,6 +106,7 @@ export class ManifoldPlanDetails {
         productLabel: this.product.label,
         regionId: defaultRegion && defaultRegion.id,
         regionName: defaultRegion && defaultRegion.displayName,
+        freePlan: this.plan.free,
       };
       this.planUpdate.emit(detail);
     }
@@ -123,6 +127,7 @@ export class ManifoldPlanDetails {
         productLabel: this.product.label,
         regionId: e.detail.value,
         regionName: defaultRegion && defaultRegion.displayName,
+        freePlan: this.plan.free,
       };
       this.planUpdate.emit(detail);
     }