@pagopa/io-app-design-system 2.1.2 → 3.0.0

package/src/components/listitems/ListItemTransaction.tsx

@@ -1,7 +1,5 @@
-import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/lib/function";
-import React from "react";
-import { ImageURISource, StyleSheet, View } from "react-native";
+import React, { ReactNode } from "react";
+import { ImageURISource, View } from "react-native";
 import Placeholder from "rn-placeholder";
 
 import {
@@ -14,8 +12,6 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-
-import { getAccessibleAmountText } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { isImageUri } from "../../utils/url";
 import { Avatar } from "../avatar/Avatar";
@@ -24,38 +20,26 @@ import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
+import { HStack } from "../stack";
 import { H6, LabelSmall } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
 } from "./PressableListItemsBase";
 
-export type ListItemTransactionStatus =
-  | "success"
-  | "failure"
-  | "pending"
-  | "cancelled"
-  | "refunded"
-  | "reversal";
-
-export type ListItemTransactionStatusWithoutBadge = Extract<
-  ListItemTransactionStatus,
-  "success" | "refunded"
->;
-
-export type ListItemTransactionStatusWithBadge = Exclude<
-  ListItemTransactionStatus,
-  "success" | "refunded"
->;
+export type ListItemTransactionBadge = {
+  text: string;
+  variant: Badge["variant"];
+};
 
 export type ListItemTransactionLogo =
   | IOLogoPaymentType
   | ImageURISource
-  | React.ReactNode;
+  | ReactNode;
 
 export type ListItemTransaction = WithTestID<
   PressableBaseProps & {
-    hasChevronRight?: boolean;
+    showChevron?: boolean;
     isLoading?: boolean;
     /**
      * A logo that will be displayed on the left of the list item.
@@ -73,29 +57,35 @@ export type ListItemTransaction = WithTestID<
     accessible?: boolean;
   } & (
       | {
-          transactionStatus: ListItemTransactionStatusWithoutBadge;
-          badgeText?: string;
-          transactionAmount: string;
+          transaction: {
+            amount: string;
+            amountAccessibilityLabel: string;
+            badge?: never;
+            refund?: boolean;
+          };
         }
       | {
-          transactionStatus: ListItemTransactionStatusWithBadge;
-          badgeText: string;
-          transactionAmount?: string;
+          transaction: {
+            amount?: string;
+            amountAccessibilityLabel?: string;
+            badge: ListItemTransactionBadge;
+            refund?: never;
+          };
         }
     )
 >;
 
-type LeftComponentProps = {
-  logoIcon: ListItemTransactionLogo;
-};
-
 const CARD_LOGO_SIZE: IOIconSizeScale = 24;
 const MUNICIPALITY_LOGO_SIZE = 44;
 // this is the <Avatar/>'s "small" size,
 // since it is bigger than the card logos, we use
 // it as a base size for homogeneous sizing via container size.
 
-const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
+const StartComponent = ({
+  logoIcon
+}: {
+  logoIcon: ListItemTransactionLogo;
+}) => {
   if (isImageUri(logoIcon)) {
     return <Avatar logoUri={logoIcon} size="small" />;
   }
@@ -112,28 +102,20 @@ const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
 
 export const ListItemTransaction = ({
   accessibilityLabel,
-  hasChevronRight = false,
+  showChevron = false,
   isLoading = false,
   paymentLogoIcon,
   onPress,
   subtitle,
   testID,
   title,
-  transactionAmount,
-  badgeText,
-  transactionStatus = "success",
+  transaction: { amount, amountAccessibilityLabel, badge, refund },
   numberOfLines = 2,
   accessible
 }: ListItemTransaction) => {
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
-  const maybeBadgeText = pipe(
-    badgeText,
-    O.fromNullable,
-    O.getOrElse(() => "-")
-  );
-
   if (isLoading) {
     return <SkeletonComponent />;
   }
@@ -142,56 +124,28 @@ export const ListItemTransaction = ({
     ? theme["interactiveElem-default"]
     : "blue";
 
-  const amountColor: IOColors = theme["textBody-default"];
-  const successColor: IOColors = theme.successText;
+  const amountColorDefault: IOColors = theme["textBody-default"];
+  const amountColorRefund: IOColors = theme.successText;
 
-  const ListItemTransactionContent = () => {
-    const TransactionAmountOrBadgeComponent = () => {
-      switch (transactionStatus) {
-        case "success":
-          return (
-            <H6
-              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
-              color={hasChevronRight ? interactiveColor : amountColor}
-              numberOfLines={numberOfLines}
-            >
-              {transactionAmount || ""}
-            </H6>
-          );
-        case "refunded":
-          return (
-            <H6
-              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
-              color={hasChevronRight ? interactiveColor : successColor}
-              numberOfLines={numberOfLines}
-            >
-              {transactionAmount || ""}
-            </H6>
-          );
-        case "failure":
-        case "cancelled":
-          return <Badge variant="error" text={maybeBadgeText} />;
-        case "reversal":
-          return <Badge variant="lightBlue" text={maybeBadgeText} />;
-        case "pending":
-          return <Badge variant="info" text={maybeBadgeText} />;
-      }
-    };
+  const amountColor = refund ? amountColorRefund : amountColorDefault;
 
-    return (
-      <>
+  const ListItemTransactionContent = () => (
+    <>
+      <HStack
+        space={IOListItemLogoMargin}
+        style={{ alignItems: "center", flexShrink: 1 }}
+      >
         {paymentLogoIcon && (
           <View
             style={{
-              marginRight: IOListItemLogoMargin,
               width: MUNICIPALITY_LOGO_SIZE,
               alignItems: "center"
             }}
           >
-            <LeftComponent logoIcon={paymentLogoIcon} />
+            <StartComponent logoIcon={paymentLogoIcon} />
           </View>
         )}
-        <View style={IOStyles.flex}>
+        <View style={{ flexShrink: 1 }}>
           <LabelSmall
             numberOfLines={numberOfLines}
             color={theme["textBody-default"]}
@@ -203,47 +157,59 @@ export const ListItemTransaction = ({
             {subtitle}
           </LabelSmall>
         </View>
-        <View style={Styles.rightSection}>
-          <TransactionAmountOrBadgeComponent />
-          {hasChevronRight && (
-            <Icon
-              name="chevronRightListItem"
-              color={interactiveColor}
-              size={IOListItemVisualParams.chevronSize}
-            />
-          )}
-        </View>
-      </>
-    );
-  };
+      </HStack>
+      <HStack style={{ alignItems: "center" }}>
+        {badge ? (
+          <Badge variant={badge?.variant} text={badge?.text} />
+        ) : (
+          <H6
+            accessibilityLabel={amountAccessibilityLabel}
+            color={showChevron ? interactiveColor : amountColor}
+            numberOfLines={numberOfLines}
+          >
+            {amount}
+          </H6>
+        )}
+        {showChevron && (
+          <Icon
+            name="chevronRightListItem"
+            color={interactiveColor}
+            size={IOListItemVisualParams.chevronSize}
+          />
+        )}
+      </HStack>
+    </>
+  );
 
-  return pipe(
-    onPress,
-    O.fromNullable,
-    O.fold(
-      () => (
+  if (onPress) {
+    return (
+      <PressableListItemBase
+        onPress={onPress}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <ListItemTransactionContent />
+      </PressableListItemBase>
+    );
+  } else {
+    return (
+      <View
+        style={IOListItemStyles.listItem}
+        testID={testID}
+        accessible={accessible}
+        accessibilityLabel={accessibilityLabel}
+      >
         <View
-          style={IOListItemStyles.listItem}
-          testID={testID}
-          accessible={accessible}
-          accessibilityLabel={accessibilityLabel}
-        >
-          <View style={IOListItemStyles.listItemInner}>
-            <ListItemTransactionContent />
-          </View>
-        </View>
-      ),
-      onPress => (
-        <PressableListItemBase
-          onPress={onPress}
-          testID={testID}
-          accessibilityLabel={accessibilityLabel}
+          style={[
+            IOListItemStyles.listItemInner,
+            { columnGap: IOListItemVisualParams.iconMargin }
+          ]}
         >
           <ListItemTransactionContent />
-        </PressableListItemBase>
-      )
-    )
-  );
+        </View>
+      </View>
+    );
+  }
 };
 
 const SkeletonComponent = () => (
@@ -268,12 +234,3 @@ const SkeletonComponent = () => (
     </View>
   </View>
 );
-
-const Styles = StyleSheet.create({
-  rightSection: {
-    marginLeft: IOListItemVisualParams.iconMargin,
-    flexDirection: "row",
-    alignItems: "center",
-    height: "100%"
-  }
-});

package/src/components/listitems/PressableListItemsBase.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";
-import { IOListItemStyles } from "../../core";
+import { IOListItemStyles, IOListItemVisualParams } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { useListItemSpringAnimation } from "./hooks/useListItemSpringAnimation";
 
@@ -40,7 +40,11 @@ export const PressableListItemBase = ({
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            { columnGap: IOListItemVisualParams.iconMargin },
+            animatedScaleStyle
+          ]}
         >
           {children}
         </Animated.View>

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -187,11 +187,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
     />
     <Image
       accessibilityIgnoresInvertColors={true}
-      source={
-        {
-          "uri": "undefined",
-        }
-      }
       style={
         {
           "height": 30,
@@ -925,6 +920,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -1074,13 +1072,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           }
         }
       >
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
@@ -1313,6 +1304,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -1362,13 +1356,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           }
         }
       >
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
@@ -1683,6 +1670,9 @@ exports[`Test List Item Components - Experimental Enabled  PressableListItemsBas
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -1884,11 +1874,6 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
     />
     <Image
       accessibilityIgnoresInvertColors={true}
-      source={
-        {
-          "uri": "undefined",
-        }
-      }
       style={
         {
           "height": 30,
@@ -2622,6 +2607,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -2771,13 +2759,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
           }
         }
       >
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <Text
           allowFontScaling={false}
           dynamicTypeRamp="headline"
@@ -3010,6 +2991,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -3059,13 +3043,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
           }
         }
       >
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <Text
           allowFontScaling={false}
           dynamicTypeRamp="headline"
@@ -3380,6 +3357,9 @@ exports[`Test List Item Components PressableListItemsBase Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {

package/src/components/listitems/__test__/listitem.test.tsx

@@ -80,8 +80,10 @@ describe("Test List Item Components", () => {
       <ListItemTransaction
         title="TITLE"
         subtitle="subtitle"
-        transactionStatus="success"
-        transactionAmount="€ 1.000,00"
+        transaction={{
+          amount: "€ 1.000,00",
+          amountAccessibilityLabel: "€ 1.000,00"
+        }}
         isLoading={true}
         onPress={onButtonPress}
       />
@@ -180,8 +182,10 @@ describe("Test List Item Components - Experimental Enabled ", () => {
       <ListItemTransaction
         title="TITLE"
         subtitle="subtitle"
-        transactionStatus="success"
-        transactionAmount="€ 1.000,00"
+        transaction={{
+          amount: "€ 1.000,00",
+          amountAccessibilityLabel: "€ 1.000,00"
+        }}
         isLoading={true}
         onPress={onButtonPress}
       />

package/src/components/modules/ModuleIDP.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { Image, ImageSourcePropType, Platform, StyleSheet } from "react-native";
+import { Image, ImageSourcePropType, StyleSheet } from "react-native";
+import { addCacheTimestampToUri } from "../../utils/image";
 import {
   IOListItemLogoMargin,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { IOText } from "../typography";
 import {
   PressableModuleBase,
@@ -28,12 +28,6 @@ const styles = StyleSheet.create({
   }
 });
 
-// https://github.com/facebook/react-native/issues/12606
-// Image cache forced refresh for Android by appending
-// the `ts` query parameter as DDMMYYYY to simulate a 24h TTL.
-const androidIdpLogoForcedRefreshed = () =>
-  Platform.OS === "android" ? `?ts=${toAndroidCacheTimestamp()}` : "";
-
 export const ModuleIDP = ({
   name,
   localLogo,
@@ -47,11 +41,8 @@ export const ModuleIDP = ({
   const { isExperimental } = useIOExperimentalDesign();
 
   // eslint-disable-next-line no-console
-  const urlLogoIDP = localLogo
-    ? localLogo
-    : {
-        uri: `${logo}${androidIdpLogoForcedRefreshed()}`
-      };
+  const urlLogoIDP = localLogo ? localLogo : addCacheTimestampToUri(logo);
+
   return (
     <PressableModuleBase
       onPress={onPress}

package/src/components/modules/ModulePaymentNotice.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
 import { IOListItemVisualParams, IOSpacer, useIOTheme } from "../../core";
-import { getAccessibleAmountText } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
@@ -29,13 +28,19 @@ export type ModulePaymentNoticeProps = WithTestID<
     onPress: (event: GestureResponderEvent) => void;
   } & (
     | {
-        paymentNoticeStatus: Extract<PaymentNoticeStatus, "default">;
-        paymentNoticeAmount: string;
+        paymentNotice: {
+          status: Extract<PaymentNoticeStatus, "default">;
+          amount: string;
+          amountAccessibilityLabel: string;
+        };
         badgeText?: never;
       }
     | {
-        paymentNoticeStatus: Exclude<PaymentNoticeStatus, "default">;
-        paymentNoticeAmount?: never;
+        paymentNotice: {
+          status: Exclude<PaymentNoticeStatus, "default">;
+          amount?: string;
+          amountAccessibilityLabel?: string;
+        };
         badgeText: string;
       }
   )
@@ -52,22 +57,21 @@ const styles = StyleSheet.create({
 const ModulePaymentNoticeContent = ({
   title,
   subtitle,
-  paymentNoticeStatus,
-  paymentNoticeAmount,
+  paymentNotice: { status, amount, amountAccessibilityLabel },
   badgeText = ""
 }: Omit<ModulePaymentNoticeProps, "isLoading" | "onPress" | "testID">) => {
   const theme = useIOTheme();
 
   const AmountOrBadgeComponent = () => {
-    switch (paymentNoticeStatus) {
+    switch (status) {
       case "default":
         return (
           <H6
-            accessibilityLabel={getAccessibleAmountText(paymentNoticeAmount)}
+            accessibilityLabel={amountAccessibilityLabel}
             color={theme["interactiveElem-default"]}
             numberOfLines={1}
           >
-            {paymentNoticeAmount}
+            {amount}
           </H6>
         );
       case "paid":

package/src/components/tag/Tag.tsx

@@ -1,5 +1,3 @@
-import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import {
@@ -148,23 +146,16 @@ export const Tag = ({
 
   return (
     <View testID={testID} style={styles.tag}>
-      {pipe(
-        variantProps,
-        O.fromNullable,
-        O.fold(
-          () => null,
-          ({ iconColor, iconName }) => (
-            <View style={styles.iconWrapper}>
-              <Icon
-                name={iconName}
-                color={iconColor}
-                size={IOTagIconSize}
-                accessible={!!iconAccessibilityLabel}
-                accessibilityLabel={iconAccessibilityLabel}
-              />
-            </View>
-          )
-        )
+      {variantProps && (
+        <View style={styles.iconWrapper}>
+          <Icon
+            name={variantProps.iconName}
+            color={variantProps.iconColor}
+            size={IOTagIconSize}
+            accessible={!!iconAccessibilityLabel}
+            accessibilityLabel={iconAccessibilityLabel}
+          />
+        </View>
       )}
       {variantProps && text && <View style={styles.spacer} />}
       {text && (

package/src/core/IODSExperimentalContextProvider.tsx

@@ -1,4 +1,3 @@
-import { constVoid } from "fp-ts/function";
 import React from "react";
 
 type IOExperimentalContextType = {
@@ -11,7 +10,7 @@ type IOExperimentalContextType = {
 export const IOExperimentalDesignContext =
   React.createContext<IOExperimentalContextType>({
     isExperimental: false,
-    setExperimental: constVoid
+    setExperimental: () => void 0
   });
 
 export const useIOExperimentalDesign = () =>

package/src/core/IOThemeContextProvider.tsx

@@ -1,4 +1,3 @@
-import { constVoid } from "fp-ts/function";
 import React, { useMemo } from "react";
 import { Appearance } from "react-native";
 import {
@@ -24,7 +23,7 @@ export const IOThemeContext: React.Context<IOThemeContextType> =
     themeType: Appearance.getColorScheme() === "dark" ? "dark" : "light",
     theme:
       Appearance.getColorScheme() === "dark" ? IOThemes.dark : IOThemes.light,
-    setTheme: constVoid
+    setTheme: () => void 0
   });
 
 export const useIOThemeContext = () => React.useContext(IOThemeContext);