feat(Bonus Pagamenti Digitali): [#175266102] Add summary (graphical and textual) for period transactions and amount component #2332
Conversation
…374-bpd-details-organization
…374-bpd-details-organization
…741-iban-component
…74848741-iban-component
…ransaction-screen-stub
…onent' into 174848741-iban-component
fabriziofff
requested review from
CrisTofani,
francescopersico and
Undermaken
as code owners
fabriziofff
changed the title
…75266374-bpd-details-organization
…hub.com:pagopa/io-app into 174848741-iban-component
…74848741-iban-component
…gopa/io-app into 175515542-transaction-screen-stub
Co-authored-by: Matteo Boschi <[email protected]>
…on-screen-stub' into 175515542-transaction-screen-stub
…5266102-transaction-component
…75515542-transaction-screen-stub
…ub.com:pagopa/io-app into 175266102-transaction-component
…75515542-transaction-screen-stub
…ub.com:pagopa/io-app into 175266102-transaction-component # Conflicts: # ts/components/core/typography/H2.tsx
ts/features/bonus/bpd/screens/details/components/summary/BpdSummaryComponent.tsx
Outdated
Show resolved
Hide resolved
| const today = new Date(); | ||
| const endGracePeriod = new Date(); | ||
| endGracePeriod.setDate( | ||
| props.period.endDate.getDate() + props.period.gracePeriod |
There was a problem hiding this comment.
if props.period.gracePeriod express the days, perhaps should it be converted in millisecond?
props.period.endDate.getDate() + props.period.gracePeriod * 1000 * 60 * 60 * 24
There was a problem hiding this comment.
This should be right according to the documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate
There was a problem hiding this comment.
My fault! I didn't test it and I confused getDate with getTime
| @@ -69,6 +69,7 @@ export const bpdEnabledSelector = ( | |||
|
|
|||
| /** | |||
| * Return the Iban that the user has entered to receive the cashback amount | |||
| * @return {RemoteValue<string | undefined, Error>} | |||
| */ | |||
| export const bpdIbanSelector = createSelector( | |||
There was a problem hiding this comment.
Expressing the type of generics accepted by createSelector you can inform typescript about the value type returned
Although it is more verbose, as a developer I prefer to know immediately what is the type returned by the selector
export const bpdIbanSelector = createSelector<
GlobalState,
RemoteValue<string | undefined, Error>,
RemoteValue<string | undefined, Error>
>There was a problem hiding this comment.
Sure better! changed in d230fa3
…mmaryComponent.tsx Co-authored-by: Matteo Boschi <[email protected]>
…on-component' into 175266102-transaction-component
This pr depends on #2330
Short description
This pr adds the
BpdSummaryComponentthat displays information related to the selected period and amount.Component architecture
Description
A concise description of the component architecture:
ShadowBox: A box with a shadowBpdBaseShadowBoxLayout: The layout of the graphical componentProgressBar: A simple progress barTransactionsGraphicalSummary: A graphical component that represents graphically the transaction in the periodTextualSummary: A summary with textual information related to the period and amount.BpdSummaryComponent: The general component that displays textual + graphical information.Each component implements some rules in order to display the appropriate graphic state.
Composition
ShadowBox<---use--BpdBaseShadowBoxLayout+ProgressBar<--use--TransactionsGraphicalSummaryShadowBox<---use--BpdBaseShadowBoxLayout<--use--TextualSummaryTransactionsGraphicalSummary+TextualSummary<--use--BpdSummaryComponentTransactionsGraphicalSummarygraphical statestransactions === 0transactions < minTransactionNumbertransactions >= minTransactionNumberBpdSummaryComponentgraphical statesstatus === closed && totalCashback >= maxPeriodCashback && transactionNumber >= minTransactionNumberstatus === closed && totalCashback < maxPeriodCashback && transactionNumber >= minTransactionNumberstatus === closed && transactionNumber < minTransactionNumberstatus === current && transactionNumber < minTransactionNumber && totalCashback > 0status === closed && today <= endGracePeriod && today >= period.endDatestatus === inactiveList of changes proposed in this pull request
bluecolor toH2core typography component.prefetchBpdDatasaga (and related trigger actionbpdDetailsLoadAllas single entrypoint to load all the informations related to bpd.profileNameSelectorto select the name of the profile.