display validity for each pack

app/frontend/src/javascript/components/machines/propose-packs-modal.tsx

@@ -61,6 +61,15 @@ export const ProposePacksModal: React.FC<ProposePacksModalProps> = ({ isOpen, to
   const formatDuration = (minutes: number): string => {
     return t('app.logged.propose_packs_modal.pack_DURATION', { DURATION: minutes / 60 });
   }
+
+  /**
+   * Return a user-friendly string for the validity of the provided pack
+   */
+  const formatValidity = (pack: PrepaidPack): string => {
+    const period = t(`app.logged.propose_packs_modal.period.${pack.validity_interval}`, { COUNT: pack.validity_count });
+    return t('app.logged.propose_packs_modal.validity', { COUNT: pack.validity_count, PERIODS: period });
+  }
+
   /**
    * The user has declined to buy a pack
    */
@@ -89,6 +98,7 @@ export const ProposePacksModal: React.FC<ProposePacksModalProps> = ({ isOpen, to
         <span className="duration">{formatDuration(pack.minutes)}</span>
         <span className="amount">{formatPrice(pack.amount)}</span>
         {pack.amount < normalPrice && <span className="crossed-out-price">{formatPrice(normalPrice)}</span>}
+        <span className="validity">{formatValidity(pack)}</span>
         <FabButton className="buy-button" onClick={handleBuyPack(pack)} icon={<i className="fas fa-shopping-cart" />}>
           {t('app.logged.propose_packs_modal.buy_this_pack')}
         </FabButton>

app/frontend/src/javascript/models/prepaid-pack.ts

@@ -15,6 +15,5 @@ export interface PrepaidPack {
   validity_count?: number,
   minutes: number,
   amount: number,
-  usages?: number,
   disabled?: boolean,
 }

app/frontend/src/stylesheets/modules/machines/propose-packs-modal.scss

@@ -2,6 +2,8 @@
   .list-of-packs {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
+
     .pack {
       border-width: 3px;
       border-style: solid;
@@ -33,6 +35,11 @@
         text-decoration: line-through;
       }
 
+      .validity {
+        display: block;
+        font-style: italic;
+      }
+
       .buy-button {
         margin-top: 10px;
         margin-bottom: 5px;

app/views/api/prepaid_packs/_pack.json.jbuilder

@@ -2,4 +2,3 @@
 
 json.extract! pack, :id, :priceable_id, :priceable_type, :group_id, :validity_interval, :validity_count, :minutes, :disabled
 json.amount pack.amount / 100.0
-json.usages pack.statistic_profile_prepaid_packs.count

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

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
 json.array! @packs do |pack|
-  json.extract! pack, :id, :priceable_id, :priceable_type, :group_id, :minutes, :disabled
-  json.amount pack.amount / 100.0
+  json.partial! 'api/prepaid_packs/pack', pack: pack
 end

config/locales/app.logged.en.yml

@@ -184,6 +184,12 @@ en:
         no_thanks: "No, thanks"
         pack_DURATION: "{DURATION} hours"
         buy_this_pack: "Buy this pack"
+        validity: "Usable for {COUNT} {PERIODS}"
+        period:
+          day: "{COUNT, plural, one{day} other{days}}"
+          week: "{COUNT, plural, one{week} other{weeks}}"
+          month: "{COUNT, plural, one{month} other{months}}"
+          year: "{COUNT, plural, one{year} other{years}}"
       #book a training
       trainings_reserve:
         trainings_planning: "Trainings planning"