From 2b014304ced733d3c46353864fa20e98f98e05eb Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Wed, 28 Oct 2020 14:23:27 +0100
Subject: [PATCH] WIP: plan card

---
 .../javascript/components/my-component.tsx    | 22 ----------
 .../src/javascript/components/plan-card.tsx   | 29 +++++++++++++
 .../src/javascript/components/switch.ts       |  2 +-
 .../{components => models}/application.ts     |  0
 app/frontend/src/javascript/models/plan.ts    | 41 +++++++++++++++++++
 app/frontend/src/javascript/models/price.ts   |  8 ++++
 6 files changed, 79 insertions(+), 23 deletions(-)
 delete mode 100644 app/frontend/src/javascript/components/my-component.tsx
 create mode 100644 app/frontend/src/javascript/components/plan-card.tsx
 rename app/frontend/src/javascript/{components => models}/application.ts (100%)
 create mode 100644 app/frontend/src/javascript/models/plan.ts
 create mode 100644 app/frontend/src/javascript/models/price.ts

diff --git a/app/frontend/src/javascript/components/my-component.tsx b/app/frontend/src/javascript/components/my-component.tsx
deleted file mode 100644
index 816e577fc..000000000
--- a/app/frontend/src/javascript/components/my-component.tsx
+++ /dev/null
@@ -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']));
diff --git a/app/frontend/src/javascript/components/plan-card.tsx b/app/frontend/src/javascript/components/plan-card.tsx
new file mode 100644
index 000000000..0cd29477b
--- /dev/null
+++ b/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']));
diff --git a/app/frontend/src/javascript/components/switch.ts b/app/frontend/src/javascript/components/switch.ts
index 3c9b467ea..3888f67e8 100644
--- a/app/frontend/src/javascript/components/switch.ts
+++ b/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']));
diff --git a/app/frontend/src/javascript/components/application.ts b/app/frontend/src/javascript/models/application.ts
similarity index 100%
rename from app/frontend/src/javascript/components/application.ts
rename to app/frontend/src/javascript/models/application.ts
diff --git a/app/frontend/src/javascript/models/plan.ts b/app/frontend/src/javascript/models/plan.ts
new file mode 100644
index 000000000..5a63d894f
--- /dev/null
+++ b/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>
+}
diff --git a/app/frontend/src/javascript/models/price.ts b/app/frontend/src/javascript/models/price.ts
new file mode 100644
index 000000000..94c7f80e8
--- /dev/null
+++ b/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
+}