fix(Bonus Pagamenti Digitali): [#175892077] Fix safearea on trx butto…

…n and scroll no transactions (#2550) * [#175892077] Fix safearea on trx button and scroll no transactions * [#175892077] use getBottomSpace Co-authored-by: Matteo Boschi <[email protected]> Co-authored-by: Fabrizio <[email protected]>
pagopa · Dec 10, 2020 · fa829f8 · fa829f8
1 parent 3984f6a
commit fa829f8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 39 deletions.
diff --git a/ts/features/bonus/bpd/screens/details/transaction/BpdTransactionsScreen.tsx b/ts/features/bonus/bpd/screens/details/transaction/BpdTransactionsScreen.tsx
@@ -6,6 +6,7 @@ import { View } from "native-base";
 import * as React from "react";
 import {
   SafeAreaView,
+  ScrollView,
   SectionList,
   SectionListData,
   SectionListRenderItem
@@ -219,44 +220,57 @@ const BpdTransactionsScreen: React.FunctionComponent<Props> = props => {
       headerTitle={I18n.t("bonus.bpd.title")}
       contextualHelp={emptyContextualHelp}
     >
-      <SafeAreaView style={IOStyles.flex}>
-        <View style={IOStyles.horizontalContentPadding}>
-          <View spacer={true} large={true} />
-          <H1>{I18n.t("bonus.bpd.details.transaction.title")}</H1>
-          <View spacer={true} />
-          {pot.isSome(props.selectedAmount) &&
-            props.selectedPeriod &&
-            maybeLastUpdateDate.isSome() && (
-              <BpdTransactionSummaryComponent
-                lastUpdateDate={localeDateFormat(
-                  maybeLastUpdateDate.value,
-                  I18n.t("global.dateFormats.fullFormatFullMonthLiteral")
-                )}
-                period={props.selectedPeriod}
-                totalAmount={props.selectedAmount.value}
-              />
-            )}
-          {transactions.length === 0 && <BpdEmptyTransactionsList />}
-          <View spacer={true} />
-        </View>
-        {props.selectedPeriod && (
-          <SectionList
-            renderSectionHeader={renderSectionHeader}
-            scrollEnabled={true}
-            stickySectionHeadersEnabled={true}
-            sections={getTransactionsByDaySections(
-              trxSortByDate,
-              props.selectedPeriod.maxPeriodCashback
-            )}
-            renderItem={renderTransactionItem}
-            keyExtractor={t =>
-              isTotalCashback(t)
-                ? `awarded_cashback_item${t.totalCashBack}`
-                : t.keyId
-            }
-          />
-        )}
-      </SafeAreaView>
+      {transactions.length === 0 ? (
+        <SafeAreaView style={IOStyles.flex}>
+          <ScrollView
+            style={[IOStyles.horizontalContentPadding, IOStyles.flex]}
+          >
+            <View spacer={true} />
+            <H1>{I18n.t("bonus.bpd.details.transaction.title")}</H1>
+            <View spacer={true} />
+            <BpdEmptyTransactionsList />
+            <View spacer={true} />
+          </ScrollView>
+        </SafeAreaView>
+      ) : (
+        <SafeAreaView style={IOStyles.flex}>
+          <View style={IOStyles.horizontalContentPadding}>
+            <View spacer={true} />
+            <H1>{I18n.t("bonus.bpd.details.transaction.title")}</H1>
+            <View spacer={true} />
+            {pot.isSome(props.selectedAmount) &&
+              props.selectedPeriod &&
+              maybeLastUpdateDate.isSome() && (
+                <BpdTransactionSummaryComponent
+                  lastUpdateDate={localeDateFormat(
+                    maybeLastUpdateDate.value,
+                    I18n.t("global.dateFormats.fullFormatFullMonthLiteral")
+                  )}
+                  period={props.selectedPeriod}
+                  totalAmount={props.selectedAmount.value}
+                />
+              )}
+            <View spacer={true} />
+          </View>
+          {props.selectedPeriod && (
+            <SectionList
+              renderSectionHeader={renderSectionHeader}
+              scrollEnabled={true}
+              stickySectionHeadersEnabled={true}
+              sections={getTransactionsByDaySections(
+                trxSortByDate,
+                props.selectedPeriod.maxPeriodCashback
+              )}
+              renderItem={renderTransactionItem}
+              keyExtractor={t =>
+                isTotalCashback(t)
+                  ? `awarded_cashback_item${t.totalCashBack}`
+                  : t.keyId
+              }
+            />
+          )}
+        </SafeAreaView>
+      )}
     </BaseScreenComponent>
   );
 };

diff --git a/ts/features/bonus/bpd/screens/details/transaction/GoToTransactions.tsx b/ts/features/bonus/bpd/screens/details/transaction/GoToTransactions.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { getBottomSpace, isIphoneX } from "react-native-iphone-x-helper";
 import ButtonDefaultOpacity from "../../../../../../components/ButtonDefaultOpacity";
 import { Label } from "../../../../../../components/core/typography/Label";
 import IconFont from "../../../../../../components/ui/IconFont";
@@ -19,7 +20,7 @@ const GoToTransactions: React.FunctionComponent<Props> = props => (
     block={true}
     onPress={props.goToTransactions}
     activeOpacity={1}
-    style={{ marginBottom: 23 }}
+    style={isIphoneX() ? { marginBottom: getBottomSpace() } : {}}
   >
     <IconFont name="io-transactions" size={24} color={"white"} />
     <Label color={"white"}>