(feat) messages if the user cannot buy prepaid packs

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - OpenAPI events endpoint returns category, theme and age_range
 - OpenAPI reservation endpoint will return details for the reserved slots
+- Display info messages if the user cannot buy prepaid packs
 - Fix a bug: some OpenAPI endpoints struggle and expire with timeout
 - Fix a bug: OpenAPI events endpoint documentation does not refect the returned data
 - Fix a bug: members can't change/cancel their reservations

app/frontend/src/javascript/components/dashboard/reservations/prepaid-packs-panel.tsx

@@ -17,6 +17,7 @@ import * as React from 'react';
 import { User } from '../../../models/user';
 import PrepaidPackAPI from '../../../api/prepaid-pack';
 import { PrepaidPack } from '../../../models/prepaid-pack';
+import { HtmlTranslate } from '../../base/html-translate';
 
 interface PrepaidPacksPanelProps {
   user: User,
@@ -159,7 +160,10 @@ const PrepaidPacksPanel: React.FC<PrepaidPacksPanelProps> = ({ user, onError })
                              onDecline={togglePacksModal}
                              onSuccess={onPackBoughtSuccess} />}
       </div>}
-
+      {packs.length === 0 && <p>{t('app.logged.dashboard.reservations_dashboard.prepaid_packs_panel.no_packs')}</p>}
+      {(packsForSubscribers && user.subscribed_plan == null && packs.length > 0) &&
+        <HtmlTranslate trKey={'app.logged.dashboard.reservations_dashboard.prepaid_packs_panel.reserved_for_subscribers_html'} options={{ LINK: '#!/plans' }} />
+      }
     </FabPanel>
   );
 };

config/locales/app.logged.en.yml

@@ -170,6 +170,8 @@ en:
             cta_info: "You can buy prepaid hours packs to book machines and benefit from discounts. Choose a machine to buy a corresponding pack."
             select_machine: "Select a machine"
             cta_button: "Buy a pack"
+            no_packs: "No prepaid packs available for sale"
+            reserved_for_subscribers_html: 'The purchase of prepaid packs is reserved for subscribers. <a href="{LINK}">Subscribe now</a> to benefit.'
       #public profil of a member
       members_show:
         members_list: "Members list"