From f5687f11205ec169c445748d75c07549104486c8 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Wed, 28 Oct 2020 17:02:22 +0100
Subject: [PATCH] WIP: refactoring of plan card

---
 .../src/javascript/components/plan-card.tsx   | 29 +++++++++++++++----
 .../src/javascript/components/switch.ts       |  4 ++-
 .../src/javascript/models/application.ts      |  6 +---
 app/frontend/templates/plans/index.html       | 11 +------
 4 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/app/frontend/src/javascript/components/plan-card.tsx b/app/frontend/src/javascript/components/plan-card.tsx
index 0cd29477b..a5597fcb1 100644
--- a/app/frontend/src/javascript/components/plan-card.tsx
+++ b/app/frontend/src/javascript/components/plan-card.tsx
@@ -4,21 +4,40 @@
 
 import React from 'react';
 import { react2angular } from 'react2angular';
-import Application from '../models/application';
+import { IFilterService } from 'angular';
+import moment from "moment";
+import { IApplication } from '../models/application';
 import { Plan } from '../models/plan';
 
+declare var Application: IApplication;
+
 interface PlanCardProps {
-  plan: Plan
+  plan: Plan,
+  _t: (key: string, interpolation: object) => string,
+  $filter: IFilterService
 }
 
-const PlanCard: React.FC<PlanCardProps> = ({ plan }) => {
+const PlanCard: React.FC<PlanCardProps> = ({ plan, _t, $filter }) => {
+  /**
+   * Return the formatted localized amount of the given plan (eg. 20.5 => "20,50 €")
+   */
+  const amount = () : string => {
+    return $filter('currency')(plan.amount);
+  }
+  /**
+   * Return the formatted localized duration of te given plan (eg. Month/3 => "3 mois")
+   */
+  const duration = (): string => {
+    return moment.duration(plan.interval_count, plan.interval).humanize();
+  }
   return (
     <div>
       <h3 className="title">{plan.base_name}</h3>
       <div className="content">
         <div className="wrap">
           <div className="price">
-              {plan.amount}
+            <div className="amount">{amount()}</div>
+            <span className="period">{duration()}</span>
           </div>
         </div>
       </div>
@@ -26,4 +45,4 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan }) => {
   );
 }
 
-Application.Components.component('planCard', react2angular(PlanCard, ['plan']));
+Application.Components.component('planCard', react2angular(PlanCard, ['plan'], ['_t', '$filter']));
diff --git a/app/frontend/src/javascript/components/switch.ts b/app/frontend/src/javascript/components/switch.ts
index 3888f67e8..660eece53 100644
--- a/app/frontend/src/javascript/components/switch.ts
+++ b/app/frontend/src/javascript/components/switch.ts
@@ -1,5 +1,7 @@
 import Switch from 'react-switch';
 import { react2angular } from 'react2angular';
-import Application from '../models/application';
+import { IApplication } from '../models/application';
+
+declare var Application: IApplication;
 
 Application.Components.component('switch', react2angular(Switch, ['checked', 'onChange', 'id', 'className']));
diff --git a/app/frontend/src/javascript/models/application.ts b/app/frontend/src/javascript/models/application.ts
index bf5357322..44df15c83 100644
--- a/app/frontend/src/javascript/models/application.ts
+++ b/app/frontend/src/javascript/models/application.ts
@@ -1,13 +1,9 @@
 import { IModule } from "angular";
 
-interface IApplication {
+export interface IApplication {
     Components: IModule,
     Services: IModule,
     Controllers: IModule,
     Filters: IModule,
     Directives: IModule
 }
-
-declare var Application: IApplication;
-export default Application;
-
diff --git a/app/frontend/templates/plans/index.html b/app/frontend/templates/plans/index.html
index 74c3abdf5..7d2349301 100644
--- a/app/frontend/templates/plans/index.html
+++ b/app/frontend/templates/plans/index.html
@@ -31,16 +31,7 @@
                  ng-class="{'col-md-12 col-lg-12 b-r':(plansGroup.plans.filter(filterDisabledPlans).length % 2 == 1 && key == plansGroup.plans.filter(filterDisabledPlans).length-1)}"
                  ng-repeat="(key, plan) in plansGroup.plans.filter(filterDisabledPlans) | orderBy: '-ui_weight'">
 
-                <h3 class="title">{{ plan.base_name }}</h3>
-
-                <div class="content">
-                  <div class="wrap">
-                    <div class="price">
-                      <div class="amount" data-fittext>{{plan.amount | currency}}</div>
-                      <span class="period">{{ plan.interval | planIntervalFilter: plan.interval_count }}</span>
-                    </div>
-                  </div>
-                </div>
+                <plan-card plan="plan"></plan-card>
 
                 <div class="cta-button" ng-if="isAuthorized('member') || (isAuthorized('manager') && ctrl.member.id === currentUser.id)">
                   <button class="btn btn-default rounded" ng-click="selectPlan(plan)" ng-if="ctrl.member.subscribed_plan.id != plan.id" ng-disabled="ctrl.member.subscribed_plan" ng-class="{ 'bg-yellow': selectedPlan==plan }">