feat(Bonus Pagamenti Digitali): [#176191528,#176269223] Supercashback graphical component and textual summary update

[fabriziofff]

Short description

This pr adds the Supercashback graphical component and update the textual summary conditions for the Active state.

export const ActiveTextualSummary: React.FunctionComponent<Props> = props => {
  // active period but still not enough transaction
  if (
    props.period.amount.transactionNumber < props.period.minTransactionNumber &&
    props.period.amount.totalCashback > 0
  ) {
    return <Warning period={props.period} />;
  }
  if (
    props.period.amount.transactionNumber >= props.period.minTransactionNumber
  ) {
    // The user is in the supercashback ranking atm
    if (
      isBpdRankingReady(props.period.ranking) &&
      props.period.ranking.ranking <= props.period.minPosition
    ) {
      return (
        <SuperCashback superCashbackAmount={props.period.superCashbackAmount} />
      );
    }
    // The max cashback amount is reached
    {
      if (props.period.amount.totalCashback >= props.period.maxPeriodCashback) {
        return <MaxAmount name={props.name} />;
      }
    }
    // Cashback unlocked! visible for the next 10 transaction only
    if (
      props.period.amount.transactionNumber <=
      props.period.minTransactionNumber + 10
    ) {
      return <Unlock {...props} />;
    }
  }
  return null;
};

Warning && transactionNumber==0	Warning && transactionNumber > 0	Unlock

MaxAmount	SuperCashback

No Supercashback available

List of changes proposed in this pull request

• Added missing field superCashbackAmount in BpdPeriod
• Changed BpdSummaryComponent in order to display the supercashback ranking preview item SuperCashbackRankingSummary
• Deprecated PercentageTransactionsSummary
• Refactoring of TextualSummary and added new textual states
• Added formatIntegerNumber to format an integer with delimiter

How to test

• run ts/features/bonus/bpd/screens/details/components/summary/__test__/bpdSummaryComponent.test.tsx
• run the application with different period / amount / ranking

[pagopa-github-bot]

Affected stories

• 🌟 #176191528: Come CIT voglio visualizzare le mie statistiche generali sulla posizione in classifica con un componente d'anteprima
• 🌟 #176269223: Come CIT voglio visualizzare l'icona della clessidra per l'infobox del graceperiod

Generated by 🚫 dangerJS against 993b375

[codecov]

Codecov Report

Merging #2633 (993b375) into master (063e09d) will increase coverage by 0.11%.
The diff coverage is 98.00%.

@@            Coverage Diff             @@
##           master    #2633      +/-   ##
==========================================
+ Coverage   50.93%   51.05%   +0.11%     
==========================================
  Files         716      720       +4     
  Lines       20456    20515      +59     
  Branches     3613     3940     +327     
==========================================
+ Hits        10420    10473      +53     
- Misses       9992     9998       +6     
  Partials       44       44              

Impacted Files	Coverage Δ
ts/features/bonus/bpd/saga/networking/periods.ts	63.15% <ø> (ø)
...eens/details/components/summary/base/ShadowBox.tsx	100.00% <ø> (ø)
...details/components/summary/BpdSummaryComponent.tsx	92.00% <90.00%> (-2.74%)	⬇️
...components/summary/SuperCashbackRankingSummary.tsx	95.65% <95.65%> (ø)
...omponents/summary/TransactionsGraphicalSummary.tsx	87.50% <100.00%> (-8.50%)	⬇️
...ts/summary/textualSummary/ActiveTextualSummary.tsx	100.00% <100.00%> (ø)
...ts/summary/textualSummary/ClosedTextualSummary.tsx	100.00% <100.00%> (ø)
.../summary/textualSummary/InactiveTextualSummary.tsx	100.00% <100.00%> (ø)
...mponents/summary/textualSummary/TextualSummary.tsx	100.00% <100.00%> (ø)
ts/utils/stringBuilder.ts	90.00% <100.00%> (+1.11%)	⬆️
... and 6 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 063e09d...993b375. Read the comment docs.

[debiff]

Can you add some test here?

[fabriziofff]

Added in e2b97cc

[debiff]

What you think about use React.ReactElement as return type?

[fabriziofff]

Sure, added in 1b961af

[debiff]

What you think about use React.ReactElement as return type?

[fabriziofff]

Added in 1b961af

[debiff]

Why this curly brackets are needed?

[fabriziofff]

removed in 1b961af