feat(Bonus Pagamenti Digitali): [#175797741] Cashback milestone compo…

…nent (#2408) * [#175797741] Creates cashback milestone component * [#175797741] Missing files * [#175797741] Fixes lint Co-authored-by: Fabrizio <[email protected]>
pagopa · Nov 24, 2020 · 6d07afc · 6d07afc
1 parent b5e4772
commit 6d07afc
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 12 deletions.
diff --git a/img/bonus/bpd/fireworks.png b/img/bonus/bpd/fireworks.png
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -1777,6 +1777,9 @@ bonus:
                 other: "{{count}} valid transactions "
               text4: "and earned "
               text5: "a cashback of "
+            milestone:
+              title: "Congratulation, you earned {{cashbackValue}}"
+              body: "You have reached the maximum refund foreseen in this period. Continue to accumulate valid transactions to climb the ranking!"
           title: "Detail of the transaction"
           paymentCircuit: "Payment circuit"
           transactionAmount: "Transaction amount"

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -1809,6 +1809,9 @@ bonus:
                 other: "{{count}} transazioni valide "
               text4: "e maturato "
               text5: "un cashback di "
+            milestone:
+              title: "Complimenti, hai ottenuto {{cashbackValue}}"
+              body: "Hai raggiunto il rimborso massimo previsto in questo periodo. Continua ad accumulare transazioni valide per salire in classifica!"
           title: "Dettaglio della transazione"
           paymentCircuit: "Circuito di pagamento"
           transactionAmount: "Importo transazione"

diff --git a/ts/features/bonus/bpd/screens/details/transaction/BpdCashbackMilestoneComponent.tsx b/ts/features/bonus/bpd/screens/details/transaction/BpdCashbackMilestoneComponent.tsx
@@ -0,0 +1,47 @@
+import { View } from "native-base";
+import * as React from "react";
+import { Image, StyleSheet } from "react-native";
+import { IOColors } from "../../../../../../components/core/variables/IOColors";
+import fireworksIcon from "../../../../../../../img/bonus/bpd/fireworks.png";
+import { formatNumberAmount } from "../../../../../../utils/stringBuilder";
+import { H4 } from "../../../../../../components/core/typography/H4";
+import { IOStyles } from "../../../../../../components/core/variables/IOStyles";
+import I18n from "../../../../../../i18n";
+
+type Props = {
+  cashbackValue: number;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: IOColors.blue,
+    paddingVertical: 16
+  },
+  image: { width: 32, height: 32, resizeMode: "cover" },
+  textPadding: {
+    paddingHorizontal: 16
+  }
+});
+const BpdCashbackMilestoneComponent: React.FunctionComponent<Props> = (
+  props: Props
+) => (
+  <View style={[styles.container, IOStyles.horizontalContentPadding]}>
+    <Image source={fireworksIcon} style={styles.image} />
+    <View style={styles.textPadding}>
+      <H4 color={"white"} weight={"SemiBold"}>
+        {I18n.t(
+          "bonus.bpd.details.transaction.detail.summary.milestone.title",
+          { cashbackValue: formatNumberAmount(props.cashbackValue, true) }
+        )}
+      </H4>
+      <H4 color={"white"} weight={"Regular"}>
+        {I18n.t("bonus.bpd.details.transaction.detail.summary.milestone.body")}
+      </H4>
+    </View>
+  </View>
+);
+
+export default BpdCashbackMilestoneComponent;
diff --git a/ts/features/bonus/bpd/screens/details/transaction/BpdTransactionsScreen.tsx b/ts/features/bonus/bpd/screens/details/transaction/BpdTransactionsScreen.tsx
@@ -27,7 +27,7 @@ import {
 import { bpdAmountForSelectedPeriod } from "../../../store/reducers/details/amounts";
 import { bpdDisplayTransactionsSelector } from "../../../store/reducers/details/combiner";
 import { bpdSelectedPeriodSelector } from "../../../store/reducers/details/selectedPeriod";
-import { IOColors } from "../../../../../../components/core/variables/IOColors";
+import BpdCashbackMilestoneComponent from "./BpdCashbackMilestoneComponent";
 
 export type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
@@ -158,12 +158,14 @@ const getTransactionsByDaySections = (
 const renderSectionHeader = (info: {
   section: SectionListData<EnhancedBpdTransaction | TotalCashbackPerDate>;
 }): React.ReactNode => (
-  <BaseDailyTransactionHeader
-    date={info.section.title}
-    transactionsNumber={
-      [...info.section.data].filter(i => !isTotalCashback(i)).length
-    }
-  />
+  <View style={{ paddingHorizontal: 16 }}>
+    <BaseDailyTransactionHeader
+      date={info.section.title}
+      transactionsNumber={
+        [...info.section.data].filter(i => !isTotalCashback(i)).length
+      }
+    />
+  </View>
 );
 
 /**
@@ -187,12 +189,19 @@ const BpdTransactionsScreen: React.FunctionComponent<Props> = props => {
       // PLACEHOLDER component waiting for story
       // https://www.pivotaltracker.com/story/show/175271516
       return (
-        <View style={{ backgroundColor: IOColors.blue }}>
-          <H1 color={"white"}>CASHBACK!</H1>
-        </View>
+        <BpdCashbackMilestoneComponent
+          cashbackValue={fromNullable(props.selectedPeriod).fold(
+            0,
+            p => p.maxPeriodCashback
+          )}
+        />
       );
     }
-    return <BpdTransactionItem transaction={info.item} />;
+    return (
+      <View style={{ paddingHorizontal: 16 }}>
+        <BpdTransactionItem transaction={info.item} />
+      </View>
+    );
   };
 
   return (
@@ -218,7 +227,6 @@ const BpdTransactionsScreen: React.FunctionComponent<Props> = props => {
         </View>
         {props.selectedPeriod && (
           <SectionList
-            style={{ paddingHorizontal: 16 }}
             renderSectionHeader={renderSectionHeader}
             scrollEnabled={true}
             stickySectionHeadersEnabled={true}