Resource Details (#107)

* use gateway endlpoint for resource details * added cost and plan name * fix boolean display; skeleton loading
manifoldco · Apr 29, 2019 · 6390768 · 6390768
1 parent 1d88bd9
commit 6390768
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 49 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -655,19 +655,19 @@ export namespace Components {
     */
     'connection': Connection;
     /**
-    * ID of resource
+    * Which resource does this belong to?
     */
-    'resourceId': string;
+    'resourceName': string;
   }
   interface ManifoldResourceDetailsAttributes extends StencilHTMLAttributes {
     /**
     * _(hidden)_ Passed by `<manifold-connection>`
     */
     'connection'?: Connection;
     /**
-    * ID of resource
+    * Which resource does this belong to?
     */
-    'resourceId'?: string;
+    'resourceName'?: string;
   }
 
   interface ManifoldResourceStatus {

diff --git a/src/components/manifold-resource-details/components/CustomFeature.tsx b/src/components/manifold-resource-details/components/CustomFeature.tsx
@@ -38,7 +38,7 @@ export const CustomFeature: FunctionalComponent<CustomFeatureProps> = ({
   const locked = !feature.upgradable || !feature.downgradable;
 
   if (numberLocked || locked) {
-    return <LockedFeature>{getCustomValue(feature, value)}</LockedFeature>;
+    return <LockedFeature value={getCustomValue(feature, value)} />;
   }
 
   switch (feature.type) {

diff --git a/src/components/manifold-resource-details/components/FeatureDisplay.tsx b/src/components/manifold-resource-details/components/FeatureDisplay.tsx
@@ -1,7 +1,11 @@
 import { FunctionalComponent } from '@stencil/core';
 import { check } from '@manifoldco/icons';
 
-export const FeatureDisplay: FunctionalComponent = (_, value) => {
+interface FeatureDisplayProps {
+  value?: boolean | number | string;
+}
+
+export const FeatureDisplay: FunctionalComponent<FeatureDisplayProps> = ({ value }) => {
   return (
     <span class="value" data-value={value}>
       <manifold-icon class="icon" icon={check} marginRight />

diff --git a/src/components/manifold-resource-details/components/FeatureValue.tsx b/src/components/manifold-resource-details/components/FeatureValue.tsx
@@ -21,5 +21,22 @@ export const FeatureValue: FunctionalComponent<FeatureValueProps> = ({
   if (feature.measurable) {
     return <MeasurableFeatureUsageDisplay feature={feature} />;
   }
-  return <FeatureDisplay>{feature.value_string}</FeatureDisplay>;
+
+  let displayValue;
+
+  switch (feature.type) {
+    case 'boolean':
+      // HACK: The display values doesn't exist in this version of the feature object.
+      displayValue = feature.value_string === 'true' ? 'Yes' : 'No';
+      break;
+    case 'number':
+      displayValue = feature.value_string && parseFloat(feature.value_string).toLocaleString();
+      break;
+    default:
+    case 'string':
+      displayValue = feature.value_string;
+      break;
+  }
+  console.log({ displayValue });
+  return <FeatureDisplay value={displayValue} />;
 };
diff --git a/src/components/manifold-resource-details/components/LockedFeature.tsx b/src/components/manifold-resource-details/components/LockedFeature.tsx
@@ -1,12 +1,16 @@
 import { FunctionalComponent } from '@stencil/core';
 import { lock } from '@manifoldco/icons';
 
-export const LockedFeature: FunctionalComponent = (_, children) => {
+interface LockedFeatureProps {
+  value?: boolean | number | string;
+}
+
+export const LockedFeature: FunctionalComponent<LockedFeatureProps> = ({ value }) => {
   return (
     <manifold-tooltip labelText="Feature cannot be changed from current plan">
-      <span class="value" data-value={children} data-locked>
+      <span class="value" data-value={value} data-locked>
         <manifold-icon class="icon" icon={lock} marginRight />
-        {children}
+        {value}
       </span>
     </manifold-tooltip>
   );

diff --git a/src/components/manifold-resource-details/manifold-resource-details.tsx b/src/components/manifold-resource-details/manifold-resource-details.tsx
@@ -1,11 +1,12 @@
-import { Component, Prop, Element, State } from '@stencil/core';
+import { Component, Prop, Element, State, Watch } from '@stencil/core';
 
 import Tunnel from '../../data/connection';
 import { withAuth } from '../../utils/auth';
 import { Connection, connections } from '../../utils/connections';
 
 import { FeatureName } from './components/FeatureName';
 import { FeatureValue } from './components/FeatureValue';
+import { $ } from '../../utils/currency';
 
 @Component({
   tag: 'manifold-resource-details',
@@ -16,48 +17,94 @@ export class ManifoldResourceDetails {
   @Element() el: HTMLElement;
   /** _(hidden)_ Passed by `<manifold-connection>` */
   @Prop() connection: Connection = connections.prod;
-  /** ID of resource */
-  @Prop() resourceId: string;
-  @State() resource?: Marketplace.Resource;
-  @State() plan?: Catalog.ExpandedPlan;
+  /** Which resource does this belong to? */
+  @Prop() resourceName: string;
+  @State() resource?: Gateway.Resource;
+  @Watch('resourceName') resourceChange(newName: string) {
+    this.fetchResource(newName);
+  }
 
-  async componentWillLoad() {
-    // get resource data
-    const resourceResponse = await fetch(
-      `${this.connection.marketplace}/resources/${this.resourceId}`,
-      withAuth()
-    );
-    const resource = await resourceResponse.json();
-    this.resource = resource;
+  fetchResource(resourceName: string) {
+    return fetch(`${this.connection.gateway}/resources/me/${resourceName}`, withAuth())
+      .then(response => response.json())
+      .then((resource: Gateway.Resource) => {
+        this.resource = resource;
+      });
+  }
 
-    // get plan data
-    if (this.resource) {
-      const planResponse = await fetch(
-        `${this.connection.catalog}/plans/${this.resource.body.plan_id}`,
-        withAuth()
-      );
-      const plan = await planResponse.json();
-      this.plan = plan;
-    }
+  async componentWillLoad() {
+    return this.fetchResource(this.resourceName);
   }
 
   render() {
-    if (!this.resource || !this.plan) return null;
+    if (this.resource) {
+      const { expanded_features, name } = this.resource.plan as Gateway.ResolvedPlan;
+      const { estimated_cost, features: customFeatures = [] } = this.resource;
+      return (
+        <div class="container">
+          <h3 class="heading">Plan Features</h3>
+          <div class="details">
+            {estimated_cost && [
+              <span class="amount">{$(estimated_cost.cost)}</span>,
+              <span class="suffix">/mo</span>,
+            ]}
+            <p class="plan-name">{name}</p>
+          </div>
+          <dl class="features">
+            {expanded_features.map(feature => {
+              const customFeature = customFeatures.find(({ label }) => label === feature.label);
+              const customValue = customFeature && customFeature.value.value;
 
-    const { expanded_features = [] } = this.plan.body;
-    const { features: customFeatures } = this.resource.body;
+              return [
+                <dt class="feature-name">
+                  <FeatureName feature={feature} />
+                </dt>,
+                <dd class="feature-value">
+                  <FeatureValue feature={feature} value={customValue} />
+                </dd>,
+              ];
+            })}
+          </dl>
+        </div>
+      );
+    }
 
+    // 💀
     return (
-      <dl class="features">
-        {expanded_features.map(feature => [
+      <div class="container">
+        <h3 class="heading">Plan Features</h3>
+        <div class="details">
+          <span class="amount">
+            <manifold-skeleton-text>0.00/mo</manifold-skeleton-text>
+          </span>
+          <p class="plan-name">
+            <manifold-skeleton-text>Plan Name</manifold-skeleton-text>
+          </p>
+        </div>
+        <dl class="features">
+          <dt class="feature-name">
+            <manifold-skeleton-text>Feature Name</manifold-skeleton-text>
+          </dt>
+          <dd class="feature-value">
+            <manifold-skeleton-text>Feature Value</manifold-skeleton-text>
+          </dd>
+
+          <dt class="feature-name">
+            <manifold-skeleton-text>
+              The greatest and best feature in the world
+            </manifold-skeleton-text>
+          </dt>
+          <dd class="feature-value">
+            <manifold-skeleton-text>Tribute</manifold-skeleton-text>
+          </dd>
           <dt class="feature-name">
-            <FeatureName feature={feature} />
-          </dt>,
+            <manifold-skeleton-text>Another Feature Name</manifold-skeleton-text>
+          </dt>
           <dd class="feature-value">
-            <FeatureValue feature={feature} value={customFeatures[feature.label]} />
-          </dd>,
-        ])}
-      </dl>
+            <manifold-skeleton-text>Another Feature Value</manifold-skeleton-text>
+          </dd>
+        </dl>
+      </div>
     );
   }
 }

diff --git a/src/components/manifold-resource-details/readme.md b/src/components/manifold-resource-details/readme.md
@@ -13,10 +13,10 @@ The resource details component displays a table of features belonging to a resou
 
 ## Properties
 
-| Property     | Attribute     | Description                                  | Type         | Default            |
-| ------------ | ------------- | -------------------------------------------- | ------------ | ------------------ |
-| `connection` | --            | _(hidden)_ Passed by `<manifold-connection>` | `Connection` | `connections.prod` |
-| `resourceId` | `resource-id` | ID of resource                               | `string`     | `undefined`        |
+| Property       | Attribute       | Description                                  | Type         | Default            |
+| -------------- | --------------- | -------------------------------------------- | ------------ | ------------------ |
+| `connection`   | --              | _(hidden)_ Passed by `<manifold-connection>` | `Connection` | `connections.prod` |
+| `resourceName` | `resource-name` | Which resource does this belong to?          | `string`     | `undefined`        |
 
 
 ----------------------------------------------

diff --git a/src/components/manifold-resource-details/style.css b/src/components/manifold-resource-details/style.css
@@ -1,8 +1,43 @@
+.container {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-areas:
+    'heading features'
+    'details features';
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+}
+
+.heading {
+  grid-area: heading;
+  margin: 0;
+  color: var(--mf-c-gray);
+  font-size: var(--mf-font-d2);
+  text-transform: uppercase;
+}
+
+.details {
+  margin-right: 10vw;
+}
+
+.amount {
+  font-size: var(--mf-font-u2);
+}
+
+.suffix {
+  color: var(--mf-c-gray);
+}
+
+.plan-name {
+  font-size: var(--mf-font-d1);
+}
+
 .features {
   display: grid;
+  grid-area: features;
   grid-template-columns: 1fr 1fr;
-  margin-top: 1rem;
-  margin-bottom: 0;
+  align-self: start;
+  margin: 0;
   font-size: var(--mf-font-d1);
 }
 
@@ -17,6 +52,7 @@
   font-weight: 600;
 }
 
+/* TODO refactor to use feature table */
 .feature-value {
   display: flex;