display monthly price for compatible plans

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

@@ -32,6 +32,13 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, user, operator, onSelectPlan,
   const amount = () : string => {
     return $filter('currency')(plan.amount);
   }
+  /**
+   * Return the formatted localized amount, divided by the number of months (eg. 120 => "10,00 € / month")
+   */
+  const monthlyAmount = (): string => {
+    const monthly = Math.ceil(plan.amount / moment.duration(plan.interval_count, plan.interval).asMonths());
+    return $filter('currency')(monthly);
+  }
   /**
    * Return the formatted localized duration of te given plan (eg. Month/3 => "3 mois")
    */
@@ -62,6 +69,12 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, user, operator, onSelectPlan,
   const hasAttachment = (): boolean => {
     return !!plan.plan_file_url;
   }
+  /**
+   * Check if the plan is allowing a monthly payment schedule
+   */
+  const canBeScheduled = (): boolean => {
+    return plan.monthly_payment;
+  }
   /**
    * Callback triggered when the user select the plan
    */
@@ -72,12 +85,18 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, user, operator, onSelectPlan,
     <div>
       <h3 className="title">{plan.base_name}</h3>
       <div className="content">
-        <div className="wrap">
+        {canBeScheduled() && <div className="wrap-monthly">
+          <div className="price">
+            <div className="amount">{t('app.public.plans.AMOUNT_per_month', {AMOUNT: monthlyAmount()})}</div>
+            <span className="period">{duration()}</span>
+          </div>
+        </div>}
+        {!canBeScheduled() && <div className="wrap">
           <div className="price">
             <div className="amount">{amount()}</div>
             <span className="period">{duration()}</span>
           </div>
-        </div>
+        </div>}
       </div>
       {canSubscribeForMe() && <div className="cta-button">
         {!hasSubscribedToThisPlan() && <button className={`subscribe-button ${isSelected ? 'selected-card' : ''}`}

app/frontend/src/stylesheets/app.components.scss

@@ -300,18 +300,34 @@
       @include border-radius(50%, 50%, 50%, 50%);
 
       border: 3px solid;
+
+      .price {
+        width: 84px;
+
+        @include border-radius(50%, 50%, 50%, 50%);
+      }
     }
 
+    .wrap-monthly {
+      height: 100px;
+      width: 180px;
+      display: inline-block;
+      background: white;
+      border: 3px solid;
+      @include border-radius(25px, 25px, 25px, 25px);
+
+      .price {
+        width: 164px;
+        @include border-radius(20px, 20px, 20px, 20px);
+      }
+    }
     .price {
       position: relative;
       top: 5px;
       left: 5px;
       height: 84px;
-      width: 84px;
       background-color: black;
 
-      @include border-radius(50%, 50%, 50%, 50%);
-
       .amount {
         padding-top: 16px;
         padding-left: 4px;

app/views/api/plans/_plan.json.jbuilder

@@ -9,7 +9,6 @@ if plan.plan_file
     json.id plan.plan_file.id
     json.attachment_identifier plan.plan_file.attachment_identifier
   end
-  json.plan_file_url plan.plan_file.attachment_url
 end
 
 if plan.respond_to?(:partners)

app/views/api/plans/index.json.jbuilder

@@ -2,7 +2,7 @@
 
 json.array!(@plans) do |plan|
   json.extract! plan, :id, :base_name, :name, :interval, :interval_count, :group_id, :training_credit_nb, :description, :type, :ui_weight,
-                :slug, :disabled
+                :slug, :disabled, :monthly_payment
   json.amount plan.amount / 100.00
   json.plan_file_url plan.plan_file.attachment_url if plan.plan_file
 end

app/views/api/plans/shallow_index.json.jbuilder

@@ -1,12 +0,0 @@
-json.array!(@plans) do |plan|
-  json.id plan.id
-  json.ui_weight plan.ui_weight
-  json.group_id plan.group_id
-  json.base_name plan.base_name
-  json.amount plan.amount / 100.00
-  json.interval plan.interval
-  json.interval_count plan.interval_count
-  json.type plan.type
-  json.disabled plan.disabled
-  json.plan_file_url plan.plan_file.attachment_url if plan.plan_file
-end

config/locales/app.public.en.yml

@@ -241,6 +241,7 @@ en:
         more_information: "More information"
         your_subscription_expires_on_the_DATE: "Your subscription expires on the {DATE}"
         no_plans: "No plans are available for your group"
+        AMOUNT_per_month: "{AMOUNT} / month"
         my_group: "My group"
         his_group: "{GENDER, select, male{His} female{Her} other{Its}} group"
         he_wants_to_change_group: "{ROLE, select, member{I want} other{The user wants}} to change group"

config/locales/app.public.fr.yml

@@ -241,6 +241,7 @@ fr:
         more_information: "Plus d'infos"
         your_subscription_expires_on_the_DATE: "Votre abonnement expire au {DATE}"
         no_plans: "Aucun abonnement n'est disponible pour votre groupe"
+        AMOUNT_per_month: "{AMOUNT} / mois"
         my_group: "Mon groupe"
         his_group: "Son groupe"
         he_wants_to_change_group: "{ROLE, select, member{Je veux} other{L'utilisateur veut}} changer de groupe"