WIP: plan description

app/controllers/api/plans_controller.rb

@@ -68,7 +68,7 @@ class API::PlansController < API::ApiController
 
       @parameters = @parameters.require(:plan)
                                .permit(:base_name, :type, :group_id, :amount, :interval, :interval_count, :is_rolling,
-                                       :training_credit_nb, :ui_weight, :disabled, :monthly_payment,
+                                       :training_credit_nb, :ui_weight, :disabled, :monthly_payment, :description,
                                        plan_file_attributes: %i[id attachment _destroy],
                                        prices_attributes: %i[id amount])
     end

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

@@ -71,6 +71,12 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, userId, subscribedPlanId, ope
   const hasAttachment = (): boolean => {
     return !!plan.plan_file_url;
   }
+  /**
+   * Check if the plan has a description
+   */
+  const hasDescription = (): boolean => {
+    return !!plan.description;
+  }
   /**
    * Check if the plan is allowing a monthly payment schedule
    */
@@ -100,6 +106,8 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, userId, subscribedPlanId, ope
           </div>
         </div>}
       </div>
+      {hasDescription() && <div className="plan-description" dangerouslySetInnerHTML={{__html: plan.description}}/>}
+      {hasAttachment() && <a className="info-link" href={ plan.plan_file_url } target="_blank">{ t('app.public.plans.more_information') }</a>}
       {canSubscribeForMe() && <div className="cta-button">
         {!hasSubscribedToThisPlan() && <button className={`subscribe-button ${isSelected ? 'selected-card' : ''}`}
                                                onClick={handleSelectPlan}
@@ -118,7 +126,6 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, userId, subscribedPlanId, ope
           <span>{ t('app.public.plans.i_choose_that_plan') }</span>
         </button>
       </div>}
-      {hasAttachment() && <a className="info-link" href={ plan.plan_file_url } target="_blank">{ t('app.public.plans.more_information') }</a>}
     </div>
   );
 }

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

@@ -269,6 +269,7 @@
 
 .pricing-panel {
   border: 1px solid $border-color;
+  height: 391px;
 
   &:first-child {
     border-right: none;
@@ -347,6 +348,11 @@
     }
   }
 
+  .plan-description {
+    max-height: 5.2em;
+    overflow: hidden;
+  }
+
   .cta-button {
     margin: 20px 0;
 
@@ -800,3 +806,15 @@ input[type=date].form-control {
     margin-left: 1em;
   }
 }
+
+.medium-editor-input {
+  display: table-cell;
+  border: 1px solid #c0c0c0;
+  border-radius: 0.2em;
+  padding: 0.5em;
+  width: 100%;
+
+  p {
+    margin-bottom: 0;
+  }
+}

app/frontend/templates/admin/plans/_form.html

@@ -127,6 +127,17 @@
   <span class="help-block" translate>{{ 'app.shared.plan.monthly_payment_info' }}</span>
 </div>
 
+<div class="input-group m-t-md">
+  <label for="plan[description]" class="control-label m-r-md" translate>{{ 'app.shared.plan.description' }}</label>
+  <div class="medium-editor-input">
+    <div ng-model="plan.description" medium-editor options='{"placeholder": "{{ "app.shared.plan.type_a_short_description" | translate }}",
+                        "buttons": ["bold", "italic", "anchor", "unorderedlist", "header2" ]
+                        }'>
+    </div>
+  </div>
+  <input type="hidden" id="plan[description]" name="plan[description]" value="{{plan.description}}" />
+</div>
+
 <!-- PDF description attachement -->
 <input type="hidden" ng-model="plan.plan_file_attributes.id" name="plan[plan_file_attributes][id]" ng-value="plan.plan_file_attributes.id" />
 <input type="hidden" ng-model="plan.plan_file_attributes._destroy" name="plan[plan_file_attributes][_destroy]" ng-value="plan.plan_file_attributes._destroy"/>

config/locales/app.shared.en.yml

@@ -192,6 +192,8 @@ en:
         otherwise_it_will_begin_as_soon_as_it_is_bought: "Otherwise, it will begin as soon as it is bought."
         monthly_payment: "Monthly payment?"
         monthly_payment_info: "If monthly payment is enabled, the members will be able to choose between a one-time payment or a payment schedule staged each months."
+        description: "Description"
+        type_a_short_description: "Type a short description"
         information_sheet: "Information sheet"
         attach_an_information_sheet: "Attach an information sheet"
         notified_partner: "Notified partner"

config/locales/app.shared.fr.yml

@@ -192,6 +192,8 @@ fr:
         otherwise_it_will_begin_as_soon_as_it_is_bought: "Dans le cas contraire, il prendra effet dès sa date d'achat."
         monthly_payment: "Paiement mensuel ?"
         monthly_payment_info: "Si le paiement mensuel est activé, les membres pourront choisir entre un paiement unique ou un échéancier de paiement échelonné chaque mois."
+        description: "Description"
+        type_a_short_description: "Saisir une courte description"
         information_sheet: "Fiche descriptive"
         attach_an_information_sheet: "Joindre une fiche descriptive"
         notified_partner: "Partenaire notifié"