feat: [IOBP-186] Import updated ListItemTransaction component

example/src/pages/ListItem.tsx

@@ -2,6 +2,7 @@ import {
   ButtonLink,
   H2,
   IOThemeContext,
+  Icon,
   IconButton,
   ListItemAction,
   ListItemIDP,
@@ -380,84 +381,94 @@ const renderListItemIDP = () => (
   </>
 );
 
-const renderListItemTransaction = () => (
-  <ComponentViewerBox name="ListItemTransaction">
-    <View>
-      <ListItemTransaction
-        title="TITLE"
-        subtitle="subtitle"
-        transactionStatus="success"
-        transactionAmount="€ 1.000,00"
-        isLoading={true}
-        onPress={onButtonPress}
-      />
-      <ListItemTransaction
-        title="TITLE"
-        subtitle="subtitle"
-        // paymentLogoIcon={"amex"}
-        transactionStatus="failure"
-        onPress={onButtonPress}
-      />
-      <ListItemTransaction
-        title="TITLE"
-        subtitle="subtitle"
-        // paymentLogoIcon={{ uri: organizationLogoURI.imageSource }}
-        transactionStatus="pending"
-        onPress={onButtonPress}
-      />
-      <ListItemTransaction
-        title="TITLE"
-        subtitle="subtitle"
-        transactionStatus="success"
-        transactionAmount="€ 1.000,00"
-        onPress={onButtonPress}
-      />
-      <ListItemTransaction
-        title="TITLE"
-        subtitle="subtitle"
-        transactionStatus="success"
-        transactionAmount="€ 1.000,00"
-        // paymentLogoIcon={"mastercard"}
-        onPress={onButtonPress}
-      />
-      <ListItemTransaction
-        title="TITLE"
-        subtitle="subtitle"
-        transactionStatus="success"
-        transactionAmount="€ 1.000,00"
-        hasChevronRight={true}
-        onPress={onButtonPress}
-      />
-      <ListItemTransaction
-        title="This one is not clickable"
-        subtitle="subtitle"
-        transactionStatus="failure"
-        // paymentLogoIcon={"postepay"}
-      />
-      <ListItemTransaction
-        title="This one is clickable but has a very long title"
-        subtitle="very long subtitle, the kind of subtitle you'd never wish to see in the app, like a very long one"
-        transactionAmount="€ 1.000,00"
-        // paymentLogoIcon={"postepay"}
-        onPress={onButtonPress}
-        transactionStatus="success"
-      />
-      <ListItemTransaction
-        title="Custom icon"
-        subtitle="This one has a custom icon on the left"
-        transactionStatus="success"
-        // paymentLogoIcon={<Icon name="notice" color="red" />}
-        transactionAmount=""
-        onPress={onButtonPress}
-      />
-      <ListItemTransaction
-        title="Refunded transaction"
-        subtitle="This one has a custom icon and transaction amount with a green color"
-        transactionStatus="failure"
-        // paymentLogoIcon={<Icon name="refund" color="bluegrey" />}
-        transactionAmount="€ 100"
-        onPress={onButtonPress}
-      />
-    </View>
-  </ComponentViewerBox>
-);
+const renderListItemTransaction = () => {
+  const cdnPath = "https://assets.cdn.io.italia.it/logos/organizations/";
+  const organizationLogoURI = {
+    imageSource: `${cdnPath}82003830161.png`,
+    name: "Comune di Milano"
+  };
+  return (
+    <ComponentViewerBox name="ListItemTransaction">
+      <View>
+        <ListItemTransaction
+          title="Title"
+          subtitle="subtitle"
+          transactionStatus="success"
+          transactionAmount="€ 1.000,00"
+          isLoading={true}
+          onPress={onButtonPress}
+        />
+        <ListItemTransaction
+          title="Title"
+          subtitle="subtitle"
+          paymentLogoIcon={"amex"}
+          transactionStatus="failure"
+          badgeText="Failed"
+          onPress={onButtonPress}
+        />
+        <ListItemTransaction
+          title="Title"
+          subtitle="subtitle"
+          paymentLogoIcon={{ uri: organizationLogoURI.imageSource }}
+          transactionStatus="pending"
+          badgeText="Ongoing"
+          onPress={onButtonPress}
+        />
+        <ListItemTransaction
+          title="Title"
+          subtitle="subtitle"
+          transactionStatus="success"
+          transactionAmount="€ 1.000,00"
+          onPress={onButtonPress}
+        />
+        <ListItemTransaction
+          title="Title"
+          subtitle="subtitle"
+          transactionStatus="success"
+          transactionAmount="€ 1.000,00"
+          paymentLogoIcon={"mastercard"}
+          onPress={onButtonPress}
+        />
+        <ListItemTransaction
+          title="Title"
+          subtitle="subtitle"
+          transactionStatus="success"
+          transactionAmount="€ 1.000,00"
+          hasChevronRight={true}
+          onPress={onButtonPress}
+        />
+        <ListItemTransaction
+          title="This one is not clickable"
+          subtitle="subtitle"
+          transactionStatus="failure"
+          badgeText="Failed"
+          paymentLogoIcon={"postepay"}
+        />
+        <ListItemTransaction
+          title="This one is clickable but has a very long title"
+          subtitle="very long subtitle, the kind of subtitle you'd never wish to see in the app, like a very long one"
+          transactionAmount="€ 1.000,00"
+          paymentLogoIcon={"postepay"}
+          onPress={onButtonPress}
+          transactionStatus="success"
+        />
+        <ListItemTransaction
+          title="Custom icon"
+          subtitle="This one has a custom icon on the left"
+          transactionStatus="success"
+          paymentLogoIcon={<Icon name="notice" color="red" />}
+          transactionAmount=""
+          onPress={onButtonPress}
+        />
+        <ListItemTransaction
+          title="Refunded transaction"
+          subtitle="This one has a custom icon and transaction amount with a green color"
+          transactionStatus="refunded"
+          paymentLogoIcon={<Icon name="refund" color="bluegrey" />}
+          transactionAmount="€ 100"
+          onPress={onButtonPress}
+        />
+      </View>
+    </ComponentViewerBox>
+  );
+};

src/components/common/LogoPaymentWithFallback.tsx

@@ -0,0 +1,60 @@
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import * as React from "react";
+import { findFirstCaseInsensitive } from "../../utils/object";
+import { IOColors } from "../../core";
+import { IOIconSizeScale, Icon } from "../icons";
+import {
+  IOLogoPaymentExtType,
+  IOLogoPaymentType,
+  IOPaymentExtLogos,
+  IOPaymentLogos,
+  LogoPayment,
+  LogoPaymentExt
+} from "../logos";
+
+export type LogoPaymentWithFallback = {
+  brand?: string;
+  fallbackIconColor?: IOColors;
+  size?: IOIconSizeScale;
+  isExtended?: boolean;
+};
+export type LogoPaymentExtOrDefaultIconProps = {
+  cardIcon?: IOLogoPaymentExtType;
+  fallbackIconColor?: IOColors;
+  size?: IOIconSizeScale;
+};
+/**
+ * This component renders either
+ * - a LogoPayment/LogoPaymentExt component
+ * - a default credit card icon
+ * @param cardIcon: IOLogoPaymentType icon
+ * @param size: the size of the icon (standard is 24/48)
+ * @param fallbackIconColor: default icon color (standard is grey-700)
+ * @param isExtended: if true, renders a LogoPaymentExt component
+ * @returns a LogoPayment/LogopaymentExt component if the cardIcon is supported, a default credit card icon otherwise
+ */
+export const LogoPaymentWithFallback = ({
+  brand,
+  fallbackIconColor = "grey-700",
+  isExtended = false,
+  size = isExtended ? 48 : 24
+}: LogoPaymentWithFallback) => {
+  const logos = isExtended ? IOPaymentExtLogos : IOPaymentLogos;
+
+  return pipe(
+    brand,
+    O.fromNullable,
+    O.chain(findFirstCaseInsensitive(logos)),
+    O.map(([brand]) => brand),
+    O.fold(
+      () => <Icon name="creditCard" size={size} color={fallbackIconColor} />,
+      brand =>
+        isExtended ? (
+          <LogoPaymentExt name={brand as IOLogoPaymentExtType} size={size} />
+        ) : (
+          <LogoPayment name={brand as IOLogoPaymentType} size={size} />
+        )
+    )
+  );
+};