fix: [IOBP-462] Missing transaction details data (#5393)

## Short description fix of a small bug which didn't make a part of the screen render <img src="https://github.com/pagopa/io-app/assets/60693085/e7920c0d-8d62-474c-9438-97e298e042da" width=200/> ## List of changes proposed in this pull request - removed dead code - small logic fix - addition of I18n keys for when there is no PSP name - small refactors ## How to test with the `dev-server` active, navigate to wallet, then down to the transaction history. done that, open up a transaction's details and make sure that a. the screen is correctly rendered b. there is a "fee" info in the top part as in the screenshot (in case it does not render, try opening another op's details, since it is expected to be *possibly* missing sometimes c. the screen correctly displays in a loading state when loading --------- Co-authored-by: Federico Mastrini <[email protected]>
pagopa · Jan 15, 2024 · 09eab9b · 09eab9b
1 parent febfc01
commit 09eab9b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 38 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -3953,6 +3953,7 @@ transaction:
     totalAmount: Totale
     totalFee: Il totale comprende
     totalFeePsp: di commissione, applicata da {{pspName}}
+    totalFeeNoPsp: "di commissione, applicata dal gestore della transazione (PSP)."
     info:
       title: Informazioni sulla transazione
       pspName: Gestore della transazione (PSP)

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -3953,6 +3953,7 @@ transaction:
     totalAmount: Totale
     totalFee: Il totale comprende
     totalFeePsp: di commissione, applicata da {{pspName}}
+    totalFeeNoPsp: "di commissione, applicata dal gestore della transazione (PSP)."
     info:
       title: Informazioni sulla transazione
       pspName: Gestore della transazione (PSP)

diff --git a/ts/features/walletV3/transaction/components/WalletTransactionHeadingSection.tsx b/ts/features/walletV3/transaction/components/WalletTransactionHeadingSection.tsx
@@ -18,13 +18,13 @@ import { WalletTransactionDetailsList } from "./WalletTransactionDetailsList";
 type Props = {
   transaction?: Transaction;
   psp?: Psp;
-  loading: boolean;
+  isLoading: boolean;
 };
 
 export const WalletTransactionHeadingSection = ({
   transaction,
   psp,
-  loading
+  isLoading
 }: Props) => {
   const navigation = useNavigation<WalletTransactionStackNavigation>();
 
@@ -42,7 +42,17 @@ export const WalletTransactionHeadingSection = ({
   };
 
   const FeeAmountSection = () => {
-    if (psp && transaction?.fee && !loading) {
+    if (isLoading) {
+      return (
+        <View style={IOStyles.flex}>
+          <VSpacer size={4} />
+          <Placeholder.Line width="100%" animate="fade" />
+          <VSpacer size={8} />
+          <Placeholder.Line width="50%" animate="fade" />
+        </View>
+      );
+    }
+    if (transaction?.fee !== undefined) {
       const formattedFee = formatNumberCentsToAmount(
         transaction.fee.amount,
         true,
@@ -52,23 +62,16 @@ export const WalletTransactionHeadingSection = ({
         <Body>
           {I18n.t("transaction.details.totalFee")}{" "}
           <Body weight="Medium">{formattedFee}</Body>{" "}
-          {I18n.t("transaction.details.totalFeePsp", {
-            pspName: psp.businessName || ""
-          })}
+          {psp?.businessName
+            ? // we want to make sure no empty string is passed either
+              I18n.t("transaction.details.totalFeePsp", {
+                pspName: psp.businessName
+              })
+            : I18n.t("transaction.details.totalFeeNoPsp")}
           .
         </Body>
       );
     }
-    if (loading) {
-      return (
-        <View style={IOStyles.flex}>
-          <VSpacer size={4} />
-          <Placeholder.Line width="100%" animate="fade" />
-          <VSpacer size={8} />
-          <Placeholder.Line width="50%" animate="fade" />
-        </View>
-      );
-    }
     return <></>;
   };
 
@@ -77,12 +80,12 @@ export const WalletTransactionHeadingSection = ({
       <VSpacer size={16} />
       <WalletTransactionDetailsList
         transaction={transaction}
-        loading={loading}
+        loading={isLoading}
         onPress={handlePressTransactionDetails}
       />
       <VSpacer size={8} />
       <WalletTransactionTotalAmount
-        loading={loading}
+        loading={isLoading}
         totalAmount={transaction?.grandTotal.amount}
       />
       <VSpacer size={8} />

diff --git a/ts/features/walletV3/transaction/screens/WalletTransactionDetailsScreen.tsx b/ts/features/walletV3/transaction/screens/WalletTransactionDetailsScreen.tsx
@@ -10,10 +10,7 @@ import FocusAwareStatusBar from "../../../../components/ui/FocusAwareStatusBar";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
 import { walletTransactionDetailsGet } from "../store/actions";
-import {
-  walletTransactionDetailsPotSelector,
-  walletTransactionDetailsSelector
-} from "../store";
+import { walletTransactionDetailsPotSelector } from "../store";
 import { fetchPsp } from "../../../../store/actions/wallet/transactions";
 import { Psp } from "../../../../types/pagopa";
 import WalletTransactionInfoSection from "../components/WalletTransactionInfoSection";
@@ -49,6 +46,7 @@ const styles = StyleSheet.create({
 });
 
 const WalletTransactionDetailsScreen = () => {
+  const [transactionPsp, setTransactionPsp] = React.useState<Psp | undefined>();
   const dispatch = useIODispatch();
   const route = useRoute<WalletTransactionDetailsScreenProps>();
   const { transactionId } = route.params;
@@ -57,17 +55,14 @@ const WalletTransactionDetailsScreen = () => {
   );
 
   const isLoading = pot.isLoading(transactionDetailsPot);
-
-  const [transactionPsp, setTransactionPsp] = React.useState<Psp | undefined>();
-
-  const transactionDetails = useIOSelector(walletTransactionDetailsSelector);
+  const transactionDetails = pot.toUndefined(transactionDetailsPot);
 
   useOnFirstRender(() => {
     dispatch(walletTransactionDetailsGet.request({ transactionId }));
   });
 
   React.useEffect(() => {
-    if (transactionDetails && transactionDetails.idPsp) {
+    if (transactionDetails?.idPsp !== undefined) {
       dispatch(
         fetchPsp.request({
           idPsp: transactionDetails.idPsp,
@@ -93,7 +88,7 @@ const WalletTransactionDetailsScreen = () => {
         <WalletTransactionHeadingSection
           transaction={transactionDetails}
           psp={transactionPsp}
-          loading={isLoading}
+          isLoading={isLoading}
         />
         <WalletTransactionInfoSection
           transaction={transactionDetails}

diff --git a/ts/features/walletV3/transaction/store/index.ts b/ts/features/walletV3/transaction/store/index.ts
@@ -55,14 +55,4 @@ export const walletTransactionDetailsPotSelector = createSelector(
   transaction => transaction.details
 );
 
-export const walletTransactionDetailsSelector = createSelector(
-  walletTransactionDetailsPotSelector,
-  details => pot.toUndefined(pot.map(details, el => el))
-);
-
-export const isLoadingTransactionDetailsSelector = createSelector(
-  walletTransactionDetailsPotSelector,
-  details => pot.isLoading(details)
-);
-
 export default walletTransactionReducer;