[#173353526] Fix transaction details crash

ts/components/wallet/PaymentSummaryComponent.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Image, ImageSourcePropType, StyleSheet } from "react-native";
 import I18n from "../../i18n";
 import customVariables from "../../theme/variables";
+import { isNullyOrEmpty } from "../../utils/strings";
 import ItemSeparatorComponent from "../ItemSeparatorComponent";
 import { BadgeComponent } from "../screens/BadgeComponent";
 
@@ -59,17 +60,22 @@ const styles = StyleSheet.create({
  * This component displays the transaction details
  */
 export const PaymentSummaryComponent = (props: Props) => {
-  const renderItem = (label: string, value: string) => (
-    <React.Fragment>
-      <Text small={true} style={props.dark && styles.lighterGray}>
-        {label}
-      </Text>
-      <Text bold={true} dark={!props.dark} white={props.dark}>
-        {value}
-      </Text>
-      <View spacer={true} />
-    </React.Fragment>
-  );
+  const renderItem = (label: string, value?: string) => {
+    if (isNullyOrEmpty(value)) {
+      return null;
+    }
+    return (
+      <React.Fragment>
+        <Text small={true} style={props.dark && styles.lighterGray}>
+          {label}
+        </Text>
+        <Text bold={true} dark={!props.dark} white={props.dark}>
+          {value}
+        </Text>
+        <View spacer={true} />
+      </React.Fragment>
+    );
+  };
 
   const paymentStatus = props.paymentStatus && (
     <React.Fragment>
@@ -103,16 +109,14 @@ export const PaymentSummaryComponent = (props: Props) => {
 
       <View style={styles.row}>
         <View style={styles.column}>
-          {props.recipient &&
-            renderItem(I18n.t("wallet.recipient"), props.recipient)}
+          {renderItem(I18n.t("wallet.recipient"), props.recipient)}
 
-          {props.description &&
-            renderItem(
-              I18n.t("wallet.firstTransactionSummary.object"),
-              props.description
-            )}
+          {renderItem(
+            I18n.t("wallet.firstTransactionSummary.object"),
+            props.description
+          )}
 
-          {props.iuv && renderItem(I18n.t("payment.IUV"), props.iuv)}
+          {renderItem(I18n.t("payment.IUV"), props.iuv)}
         </View>
 
         {props.image !== undefined && <Image source={props.image} />}

ts/utils/__tests__/string.test.ts

@@ -1,4 +1,4 @@
-import { capitalize } from "../strings";
+import { capitalize, isNullyOrEmpty } from "../strings";
 
 describe("capitalize", () => {
   it("should return a string where each word has first char in uppercase-1", () => {
@@ -21,3 +21,25 @@ describe("capitalize", () => {
     expect(capitalize("   hello,world   ", ",")).toEqual("   Hello,World   ");
   });
 });
+
+describe("null or empty", () => {
+  it("should return true", () => {
+    expect(isNullyOrEmpty(undefined)).toBeTruthy();
+  });
+
+  it("should return false", () => {
+    expect(isNullyOrEmpty("hello")).toBeFalsy();
+  });
+
+  it("should return true", () => {
+    expect(isNullyOrEmpty("    ")).toBeTruthy();
+  });
+
+  it("should return true", () => {
+    expect(isNullyOrEmpty("")).toBeTruthy();
+  });
+
+  it("should return true", () => {
+    expect(isNullyOrEmpty(null)).toBeTruthy();
+  });
+});

ts/utils/strings.ts

@@ -66,3 +66,11 @@ export const formatTextRecipient = (e: EnteBeneficiario): string => {
 ${address}${civicNumber}\n
 ${cap}${city}${province}`.trim();
 };
+
+/**
+ * determine if the text is undefined or empty (or composed only by blanks)
+ * @param text
+ */
+export const isNullyOrEmpty = (text: string | undefined | null) => {
+  return (text || "").trim().length === 0;
+};