diff --git a/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx b/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx index 168c78997..66dccda5b 100644 --- a/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx +++ b/app/frontend/src/javascript/components/machines/propose-packs-modal.tsx @@ -61,6 +61,15 @@ export const ProposePacksModal: React.FC = ({ 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 = ({ isOpen, to {formatDuration(pack.minutes)} {formatPrice(pack.amount)} {pack.amount < normalPrice && {formatPrice(normalPrice)}} + {formatValidity(pack)} }> {t('app.logged.propose_packs_modal.buy_this_pack')} diff --git a/app/frontend/src/javascript/models/prepaid-pack.ts b/app/frontend/src/javascript/models/prepaid-pack.ts index a4c21c9cb..80537ca60 100644 --- a/app/frontend/src/javascript/models/prepaid-pack.ts +++ b/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, } diff --git a/app/frontend/src/stylesheets/modules/machines/propose-packs-modal.scss b/app/frontend/src/stylesheets/modules/machines/propose-packs-modal.scss index 4cef216bf..f93199784 100644 --- a/app/frontend/src/stylesheets/modules/machines/propose-packs-modal.scss +++ b/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; diff --git a/app/views/api/prepaid_packs/_pack.json.jbuilder b/app/views/api/prepaid_packs/_pack.json.jbuilder index c8f48cb14..43700b59c 100644 --- a/app/views/api/prepaid_packs/_pack.json.jbuilder +++ b/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 diff --git a/app/views/api/prepaid_packs/index.json.jbuilder b/app/views/api/prepaid_packs/index.json.jbuilder index 26d38f919..b3858ddcf 100644 --- a/app/views/api/prepaid_packs/index.json.jbuilder +++ b/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 diff --git a/config/locales/app.logged.en.yml b/config/locales/app.logged.en.yml index ffb9cb9c0..c648c1a56 100644 --- a/config/locales/app.logged.en.yml +++ b/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"