feat(Bonus Pagamenti Digitali): [#176191591] Open ranking details when tap on ranking preview

locales/en/index.yml

@@ -1939,12 +1939,19 @@ bonus:
           gracePeriodBody: "This cashback phase ended on {{date}}. We are still waiting for the latest transactions from the banks. Just bear with us: we'll keep you posted here!"
           closedPeriodOKBody: "Congratulations {{name}}! \nYou are entitled to € {{amount}} of Cashback"
           closedPeriodMaxAmount: "it's the highest refund possible!"
+          moneyTransfer: "By {{date}} you will receive the transfer on the IBAN you communicated."
           inactivePeriodBody: "You will be able to start collecting valid transactions starting from {{date}}"
           label:
             one: "1 valid transaction" 
             other: "{{count}} valid transactions"
         ranking:
           title: "Your position"
+          notReady:
+            title: "When will you see the Super Cashback ranking?"
+            body: "The ranking is based on the **number of transactions** made with the payment methods on which you have Cashback enabled.\n\n
+                   Currently, **all participants are in the same position**. As soon as we'll receive the transactions collected so far, your ranking will be displayed.\n\n
+                   Once published, the ranking will **continue to change** depending on the number of transactions among all participants, until the end of the 6 months."
+
       transaction:
         label:
           one: "1 transaction"
@@ -2033,7 +2040,7 @@ bonus:
         rankTitle: "Super Cashback ranking"
         howItWorks:
           title: "How does it work?"
-          body: "The **{{citizens}} citizens** with the highest number of transactions **receive the Super Cashback, a prize of {{amount}}.**\n\n**The ranking changes every day.** The final one will be displayed on {{endDate}}."
+          body: "The **{{citizens}} citizens** with the highest number of transactions **receive the Super Cashback, a prize of {{amount}} €.**\n\n**The ranking changes every day.** The final one will be displayed on {{endDate}}."
       lastUpdate: Updated at {{hour}} on {{date}}
 webView:
   error:

locales/it/index.yml

@@ -1970,12 +1970,18 @@ bonus:
           gracePeriodBody: "Questo periodo del Cashback si è chiuso il {{date}}. Stiamo aspettando di ricevere dalle banche le ultime transazioni. Ancora un po’ di pazienza. Ti avviseremo qui!"
           closedPeriodOKBody: "Complimenti {{name}}! \nHai diritto a € {{amount}} di Cashback"
           closedPeriodMaxAmount: "è il massimo del rimborso possibile!"
+          moneyTransfer: "Entro il {{date}} riceverai il bonifico sull’IBAN che ci hai indicato."
           inactivePeriodBody: "Potrai iniziare a collezionare transazioni valide a partire dal {{date}}"
           label:
             one: "1 transazione valida"
             other: "{{count}} transazioni valide"
         ranking:
           title: "La tua posizione"
+          notReady:
+            title: "Quando vedrai la classifica Super Cashback?"
+            body: "La classifica si basa sul **numero di transazioni** eseguite con i metodi di pagamento su cui hai attivato il Cashback.\n\n
+                   In questo momento **tutti i partecipanti sono nella stessa posizione**. Non appena riceveremo le transazioni effettuate i primi giorni di quest’anno, verrà mostrata la tua posizione in classifica.\n\n
+                   Una volta pubblicata, la classifica **continuerà a cambiare** a seconda del numero di transazioni di tutti i partecipanti, fino alla fine dei 6 mesi."
       transaction:
         label:
           one: "1 transazione"
@@ -2064,7 +2070,7 @@ bonus:
         rankTitle: "Classifica Super Cashback"
         howItWorks:
           title: "Come funziona?"
-          body: "I **{{citizens}} cittadini** con il più alto numero di transazioni **ricevono il Super Cashback, un premio pari a {{amount}}.**\n\n**La classifica cambia ogni giorno.** Quella definitiva sarà visualizzata il {{endDate}}."
+          body: "I **{{citizens}} cittadini** con il più alto numero di transazioni **ricevono il Super Cashback, un premio pari a {{amount}} €.**\n\n**La classifica cambia ogni giorno.** Quella definitiva sarà visualizzata il {{endDate}}."
       lastUpdate: Aggiornato alle {{hour}} del {{date}}
 webView:
   error:

ts/features/bonus/bpd/components/superCashbackRanking/SuperCashbackRanking.tsx

@@ -1,24 +1,27 @@
+import { View } from "native-base";
 import * as React from "react";
 import { connect } from "react-redux";
-import { View } from "native-base";
-import { GlobalState } from "../../../../../store/reducers/types";
-import { bpdSelectedPeriodSelector } from "../../store/reducers/details/selectedPeriod";
-import ItemSeparatorComponent from "../../../../../components/ItemSeparatorComponent";
 import { H3 } from "../../../../../components/core/typography/H3";
-import I18n from "../../../../../i18n";
-import Markdown from "../../../../../components/ui/Markdown";
 import { IOColors } from "../../../../../components/core/variables/IOColors";
+import ItemSeparatorComponent from "../../../../../components/ItemSeparatorComponent";
+import Markdown from "../../../../../components/ui/Markdown";
+import I18n from "../../../../../i18n";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { useIOBottomSheet } from "../../../../../utils/bottomSheet";
+import { localeDateFormat } from "../../../../../utils/locale";
+import {
+  formatIntegerNumber,
+  formatNumberAmount
+} from "../../../../../utils/stringBuilder";
 import {
   BpdPeriodWithInfo,
   isBpdRankingReady
 } from "../../store/reducers/details/periods";
-import { localeDateFormat } from "../../../../../utils/locale";
-import { useIOBottomSheet } from "../../../../../utils/bottomSheet";
-import { formatNumberWithNoDigits } from "../../../../../utils/stringBuilder";
+import { bpdSelectedPeriodSelector } from "../../store/reducers/details/selectedPeriod";
 import { FirstPositionItem } from "./FirstPositionItem";
 import { LastPositionItem } from "./LastPositionItem";
-import UserPositionItem from "./UserPositionItem";
 import SuperCashbackHeader from "./SuperCashbackHeader";
+import UserPositionItem from "./UserPositionItem";
 
 type Props = ReturnType<typeof mapStateToProps>;
 
@@ -95,10 +98,8 @@ const SuperCashbackBottomSheet: React.FunctionComponent<Props> = (
     {props.selectedPeriod && (
       <Markdown cssStyle={CSS_STYLE}>
         {I18n.t("bonus.bpd.details.superCashback.howItWorks.body", {
-          citizens: props.selectedPeriod.minPosition,
-          amount: formatNumberWithNoDigits(
-            props.selectedPeriod.superCashbackAmount
-          ),
+          citizens: formatIntegerNumber(props.selectedPeriod.minPosition),
+          amount: formatNumberAmount(props.selectedPeriod.superCashbackAmount),
           endDate: calculateEndDate(props.selectedPeriod)
         })}
       </Markdown>

ts/features/bonus/bpd/screens/details/components/summary/BpdSummaryComponent.tsx

@@ -8,7 +8,7 @@ import { GlobalState } from "../../../../../../../store/reducers/types";
 import { BpdPeriod } from "../../../../store/actions/periods";
 import { BpdPeriodWithInfo } from "../../../../store/reducers/details/periods";
 import { bpdSelectedPeriodSelector } from "../../../../store/reducers/details/selectedPeriod";
-import SuperCashbackRankingSummary from "./SuperCashbackRankingSummary";
+import SuperCashbackRankingSummary from "./ranking/SuperCashbackRankingSummary";
 import { TextualSummary } from "./textualSummary/TextualSummary";
 import TransactionsGraphicalSummary from "./TransactionsGraphicalSummary";