feat(Bonus Pagamenti Digitali): [#176191591] Open ranking details whe…

…n tap on ranking preview (#2652) * [#176191528] add ranking placeholder * [#176191528] add supercashback representation * [#176191528] update textual summary * [#176191528] add supercashback messages * [#176191528] remove console * [#176191528] refactoring * [#176191528] fix test * [#176191528] add supercashback test * [#176191528] add missing test * [#176191528] refactoring * [#176191528] remove FunctionComponent * [#176191528] remove functionComponent * [#176272983] test * [#176272983] revert * [#176272983] add ranking not ready item * [#176272983] add condition for ranking * [#176272983] add bottomsheet * [#176272983] fix test * [#176272983] add test * [#176272983] renaming * [#176269197] add IbanInformationComponent to BpdClosedPeriod * [#176269197] create common isGracePeriod * [#176269197] add todo * [#176269197] display IbanComponent only with some conditions * [#176269102] wip * [#176269197] add spacer * [#176269102] calculate end transfer day * [#176269102] add comment * [#176191528] fixes * [#176191528] add test for formatIntegerNumber * [#176191591] open SuperCashbackRankingBottomSheet when tap on SuperCashbackRankingSummary * [#176191591] fix format integer & amount * [#176191591] fix typescript * [#176272983] refactoring * Update locales/it/index.yml Co-authored-by: Jacopo Pompilii <[email protected]> * Update locales/en/index.yml Co-authored-by: Jacopo Pompilii <[email protected]> * Update locales/en/index.yml Co-authored-by: Jacopo Pompilii <[email protected]> Co-authored-by: Matteo Boschi <[email protected]> Co-authored-by: Jacopo Pompilii <[email protected]>
pagopa · Dec 29, 2020 · 0f75590 · 0f75590
1 parent f75a91c
commit 0f75590
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 42 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -1939,7 +1939,7 @@ 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."
+          moneyTransfer: "By {{date}} you will receive the transfer on the IBAN you entered."
           inactivePeriodBody: "You will be able to start collecting valid transactions starting from {{date}}"
           label:
             one: "1 valid transaction" 
@@ -2040,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:

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -2070,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:

diff --git a/ts/features/bonus/bpd/components/superCashbackRanking/SuperCashbackRanking.tsx b/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>

diff --git a/...ures/bonus/bpd/screens/details/components/summary/ranking/SuperCashbackRankingSummary.tsx b/...ures/bonus/bpd/screens/details/components/summary/ranking/SuperCashbackRankingSummary.tsx
@@ -12,6 +12,7 @@ import I18n from "../../../../../../../../i18n";
 import { configSelector } from "../../../../../../../../store/reducers/backendStatus";
 import { GlobalState } from "../../../../../../../../store/reducers/types";
 import { formatIntegerNumber } from "../../../../../../../../utils/stringBuilder";
+import { useSuperCashbackRankingBottomSheet } from "../../../../../components/superCashbackRanking/SuperCashbackRanking";
 import {
   BpdPeriodWithInfo,
   BpdRanking,
@@ -47,32 +48,35 @@ const SuperCashbackRankingReady = (props: {
   minRanking: number;
 }): React.ReactElement => {
   const { title, of } = loadLocales();
+  const { present } = useSuperCashbackRankingBottomSheet();
   return (
-    <BpdBaseShadowBoxLayout
-      row1={
-        <H5 testID={"supercashbackSummary.title"} style={styles.title}>
-          {title}
-        </H5>
-      }
-      row2={
-        <H2
-          testID={"supercashbackSummary.ranking"}
-          color={"blue"}
-          style={styles.title}
-        >
-          {formatIntegerNumber(props.ranking)}°
-        </H2>
-      }
-      row3={
-        <H5
-          testID={"supercashbackSummary.minRanking"}
-          color={"bluegrey"}
-          style={styles.title}
-        >
-          {of} {formatIntegerNumber(props.minRanking)}
-        </H5>
-      }
-    />
+    <TouchableOpacity onPress={present} style={IOStyles.flex}>
+      <BpdBaseShadowBoxLayout
+        row1={
+          <H5 testID={"supercashbackSummary.title"} style={styles.title}>
+            {title}
+          </H5>
+        }
+        row2={
+          <H2
+            testID={"supercashbackSummary.ranking"}
+            color={"blue"}
+            style={styles.title}
+          >
+            {formatIntegerNumber(props.ranking)}°
+          </H2>
+        }
+        row3={
+          <H5
+            testID={"supercashbackSummary.minRanking"}
+            color={"bluegrey"}
+            style={styles.title}
+          >
+            {of} {formatIntegerNumber(props.minRanking)}
+          </H5>
+        }
+      />
+    </TouchableOpacity>
   );
 };