Merge pull request #743 from manifoldco/add-plan-type-to-customer-plan-selector-event

Adds features data (free boolean) to manifold-plan-selector custom event

Author: Terry Smith

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

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
 

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,
           },
         })
       );

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);
     }