WIP: plan card

app/frontend/src/javascript/components/my-component.tsx

@@ -1,22 +0,0 @@
-// This is a demonstration of using react components inside an angular.js 1.x app
-// TODO remove this
-
-import React from 'react';
-import { react2angular } from 'react2angular';
-import Application from './application';
-
-interface MyComponentProps {
-  fooBar: number,
-  baz: string
-}
-
-const MyComponent: React.FC<MyComponentProps> = ({ fooBar, baz }) => {
-  return (
-    <div>
-      <p>FooBar: {fooBar}</p>
-      <p>Baz: {baz}</p>
-    </div>
-  );
-}
-
-Application.Components.component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']));

app/frontend/src/javascript/components/plan-card.tsx

@@ -0,0 +1,29 @@
+/**
+ * This component is a "card" publicly presenting the details of a plan
+ */
+
+import React from 'react';
+import { react2angular } from 'react2angular';
+import Application from '../models/application';
+import { Plan } from '../models/plan';
+
+interface PlanCardProps {
+  plan: Plan
+}
+
+const PlanCard: React.FC<PlanCardProps> = ({ plan }) => {
+  return (
+    <div>
+      <h3 className="title">{plan.base_name}</h3>
+      <div className="content">
+        <div className="wrap">
+          <div className="price">
+              {plan.amount}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Application.Components.component('planCard', react2angular(PlanCard, ['plan']));

app/frontend/src/javascript/components/switch.ts

@@ -1,5 +1,5 @@
 import Switch from 'react-switch';
 import { react2angular } from 'react2angular';
-import Application from './application';
+import Application from '../models/application';
 
 Application.Components.component('switch', react2angular(Switch, ['checked', 'onChange', 'id', 'className']));

app/frontend/src/javascript/models/plan.ts

@@ -0,0 +1,41 @@
+import { Price } from './price';
+
+export enum Interval {
+    Year = 'year',
+    Month = 'month',
+    Week = 'week'
+}
+
+export enum PlanType {
+    Plan = 'Plan',
+    PartnerPlan = 'PartnerPlan'
+}
+
+export interface Partner {
+    first_name: string,
+    last_name: string,
+    email: string
+}
+
+export interface Plan {
+    id: number,
+    base_name: string,
+    name: string,
+    interval: Interval,
+    interval_count: number,
+    group_id: number,
+    training_credit_nb: number,
+    is_rolling: boolean,
+    description: string,
+    type: PlanType,
+    ui_weight: number,
+    disabled: boolean,
+    monthly_payment: boolean
+    amount: number
+    prices: Array<Price>,
+    plan_file_attributes: {
+        id: number,
+        attachment_identifier: string
+    },
+    partners: Array<Partner>
+}

app/frontend/src/javascript/models/price.ts

@@ -0,0 +1,8 @@
+export interface Price {
+    id: number,
+    group_id: number,
+    plan_id: number,
+    priceable_type: string,
+    priceable_id: number,
+    amount: number
+}