[IOAPPFD0-161] Export types from ListItemTransaction (#88)

pagopa · Sep 29, 2023 · 03b8e59 · 03b8e59
1 parent 999a2a5
commit 03b8e59
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 97 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -636,7 +636,7 @@ EXTERNAL SOURCES:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
-    :tag: hermes-2023-03-07-RNv0.71.4-31fdcf738940875c9bacf251e149006cf515d763
+    :tag: hermes-2023-03-20-RNv0.72.0-49794cfc7c81fb8f69fd60c3bbf85a7480cc5a77
   RCT-Folly:
     :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:
@@ -780,4 +780,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 3682f715bd91b22067ed6990af779570157f6eb0
 
-COCOAPODS: 1.12.0
+COCOAPODS: 1.12.1
diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
@@ -1,5 +1,6 @@
 import {
   ButtonLink,
+  Divider,
   H2,
   IOThemeContext,
   Icon,
@@ -11,6 +12,8 @@ import {
   ListItemNavAlert,
   ListItemSwitch,
   ListItemTransaction,
+  ListItemTransactionLogo,
+  ListItemTransactionStatusWithBadge,
   VSpacer,
   useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
@@ -325,94 +328,141 @@ const renderListItemInfo = () => (
   </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>
-  );
+/* LIST ITEM TRANSACTION */
+
+/* Mock assets */
+const cdnPath = "https://assets.cdn.io.italia.it/logos/organizations/";
+const organizationLogoURI = {
+  imageSource: `${cdnPath}82003830161.png`,
+  name: "Comune di Milano"
+};
+
+type mockTransactionStatusData = {
+  status: ListItemTransactionStatusWithBadge;
+  asset: ListItemTransactionLogo;
 };
+
+const transactionStatusArray: Array<mockTransactionStatusData> = [
+  {
+    status: "failure",
+    asset: "amex"
+  },
+  {
+    status: "pending",
+    asset: { uri: organizationLogoURI.imageSource }
+  },
+  {
+    status: "cancelled",
+    asset: "unionPay"
+  },
+  {
+    status: "reversal",
+    asset: "applePay"
+  }
+];
+
+const renderListItemTransaction = () => (
+  <ComponentViewerBox name="ListItemTransaction">
+    <View>
+      <ListItemTransaction
+        title="Title"
+        subtitle="subtitle"
+        transactionStatus="success"
+        transactionAmount="€ 1.000,00"
+        isLoading={true}
+        onPress={onButtonPress}
+      />
+
+      <Divider />
+
+      {transactionStatusArray.map(
+        ({ status, asset }: mockTransactionStatusData) => (
+          <React.Fragment key={`transactionStatus-${status}`}>
+            <ListItemTransaction
+              title="Title"
+              subtitle="subtitle"
+              paymentLogoIcon={asset}
+              transactionStatus={status}
+              badgeText={status}
+              onPress={onButtonPress}
+            />
+            <Divider />
+          </React.Fragment>
+        )
+      )}
+
+      <ListItemTransaction
+        title="Title"
+        subtitle="subtitle"
+        transactionStatus="success"
+        transactionAmount="€ 1.000,00"
+        onPress={onButtonPress}
+      />
+
+      <Divider />
+
+      <ListItemTransaction
+        title="Title"
+        subtitle="subtitle"
+        transactionStatus="success"
+        transactionAmount="€ 1.000,00"
+        paymentLogoIcon={"mastercard"}
+        onPress={onButtonPress}
+      />
+
+      <Divider />
+
+      <ListItemTransaction
+        title="Title"
+        subtitle="subtitle"
+        transactionStatus="success"
+        transactionAmount="€ 1.000,00"
+        hasChevronRight={true}
+        onPress={onButtonPress}
+      />
+
+      <Divider />
+
+      <ListItemTransaction
+        title="This one is not clickable"
+        subtitle="subtitle"
+        transactionStatus="failure"
+        badgeText={"Failure"}
+        paymentLogoIcon={"postepay"}
+      />
+
+      <Divider />
+
+      <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"
+      />
+
+      <Divider />
+
+      <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}
+      />
+
+      <Divider />
+
+      <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>
+);
diff --git a/src/components/listitems/ListItemTransaction.tsx b/src/components/listitems/ListItemTransaction.tsx
@@ -37,7 +37,20 @@ export type ListItemTransactionStatus =
   | "refunded"
   | "reversal";
 
-type PaymentLogoIcon = IOLogoPaymentType | ImageURISource | React.ReactNode;
+export type ListItemTransactionStatusWithoutBadge = Extract<
+  ListItemTransactionStatus,
+  "success" | "refunded"
+>;
+
+export type ListItemTransactionStatusWithBadge = Exclude<
+  ListItemTransactionStatus,
+  "success" | "refunded"
+>;
+
+export type ListItemTransactionLogo =
+  | IOLogoPaymentType
+  | ImageURISource
+  | React.ReactNode;
 
 export type ListItemTransaction = WithTestID<
   PressableBaseProps & {
@@ -48,25 +61,25 @@ export type ListItemTransaction = WithTestID<
      *
      * Must be a {@link IOLogoPaymentType} or an {@link ImageURISource} or an {@link Icon}.
      */
-    paymentLogoIcon?: PaymentLogoIcon;
+    paymentLogoIcon?: ListItemTransactionLogo;
     subtitle: string;
     title: string;
   } & (
       | {
-          transactionStatus: "success" | "refunded";
+          transactionStatus: ListItemTransactionStatusWithoutBadge;
           badgeText?: string;
           transactionAmount: string;
         }
       | {
-          transactionStatus: "failure" | "pending" | "cancelled" | "reversal";
+          transactionStatus: ListItemTransactionStatusWithBadge;
           badgeText: string;
           transactionAmount?: string;
         }
     )
 >;
 
 type LeftComponentProps = {
-  logoIcon: PaymentLogoIcon;
+  logoIcon: ListItemTransactionLogo;
 };
 
 const CARD_LOGO_SIZE: IOIconSizeScale = 24;