show link to pdf in component

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

@@ -56,6 +56,12 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, user, operator, onSelectPlan,
   const hasSubscribedToThisPlan = (): boolean => {
     return user?.subscription?.plan?.id === plan.id;
   }
+  /**
+   * Check if the plan has an attached file
+   */
+  const hasAttachment = (): boolean => {
+    return !!plan.plan_file_url;
+  }
   /**
    * Callback triggered when the user select the plan
    */
@@ -91,6 +97,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, user, operator, onSelectPlan,
           <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>
   );
 }
@@ -98,7 +105,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, user, operator, onSelectPlan,
 const PlanCardWrapper: React.FC<PlanCardProps> = ({ plan, user, operator, onSelectPlan, isSelected, $filter }) => {
   const loading = (
     <div className="fa-3x">
-      <i className="fas fa-circle-notch fa-spin"></i>
+      <i className="fas fa-circle-notch fa-spin" />
     </div>
   );
   return (

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

@@ -37,5 +37,6 @@ export interface Plan {
         id: number,
         attachment_identifier: string
     },
+    plan_file_url: string,
     partners: Array<Partner>
 }

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

@@ -348,6 +348,9 @@
       outline: 0;
     }
   }
+  .info-link {
+    margin-top: 1em;
+  }
 }
 
 .well {

app/frontend/templates/plans/index.html

@@ -37,9 +37,6 @@
                            on-select-plan="selectPlan"
                            is-selected="isSelected(plan)">
                 </plan-card>
-
-                <br ng-show="!plan.plan_file_url">  <!-- TODO Refacto with CSS -->
-                <a ng-href="{{ plan.plan_file_url }}" ng-show="plan.plan_file_url" target="_blank" translate>{{ 'app.public.plans.more_information' }}</a>
             </div>
           </div>
 

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

@@ -9,6 +9,7 @@ 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)