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

package/src/components/listitems/ListItemTransaction.tsx

@@ -1,3 +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 Placeholder from "rn-placeholder";
@@ -12,6 +14,8 @@ 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";
@@ -69,20 +73,14 @@ export type ListItemTransaction = WithTestID<
     accessible?: boolean;
   } & (
       | {
-          transaction: {
-            amount: string;
-            amountAccessibilityLabel: string;
-            status: ListItemTransactionStatusWithoutBadge;
-          };
+          transactionStatus: ListItemTransactionStatusWithoutBadge;
           badgeText?: string;
+          transactionAmount: string;
         }
       | {
-          transaction: {
-            amount?: string;
-            amountAccessibilityLabel?: string;
-            status: ListItemTransactionStatusWithBadge;
-          };
+          transactionStatus: ListItemTransactionStatusWithBadge;
           badgeText: string;
+          transactionAmount?: string;
         }
     )
 >;
@@ -121,15 +119,20 @@ export const ListItemTransaction = ({
   subtitle,
   testID,
   title,
-  transaction: { amount, amountAccessibilityLabel, status = "success" },
+  transactionAmount,
   badgeText,
+  transactionStatus = "success",
   numberOfLines = 2,
   accessible
 }: ListItemTransaction) => {
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
-  const maybeBadgeText = badgeText ?? "-";
+  const maybeBadgeText = pipe(
+    badgeText,
+    O.fromNullable,
+    O.getOrElse(() => "-")
+  );
 
   if (isLoading) {
     return <SkeletonComponent />;
@@ -144,25 +147,25 @@ export const ListItemTransaction = ({
 
   const ListItemTransactionContent = () => {
     const TransactionAmountOrBadgeComponent = () => {
-      switch (status) {
+      switch (transactionStatus) {
         case "success":
           return (
             <H6
-              accessibilityLabel={amountAccessibilityLabel}
+              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
               color={hasChevronRight ? interactiveColor : amountColor}
               numberOfLines={numberOfLines}
             >
-              {amount || ""}
+              {transactionAmount || ""}
             </H6>
           );
         case "refunded":
           return (
             <H6
-              accessibilityLabel={amountAccessibilityLabel}
+              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
               color={hasChevronRight ? interactiveColor : successColor}
               numberOfLines={numberOfLines}
             >
-              {amount || ""}
+              {transactionAmount || ""}
             </H6>
           );
         case "failure":
@@ -214,30 +217,33 @@ export const ListItemTransaction = ({
     );
   };
 
-  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.listItemInner}>
-          <ListItemTransactionContent />
+  return pipe(
+    onPress,
+    O.fromNullable,
+    O.fold(
+      () => (
+        <View
+          style={IOListItemStyles.listItem}
+          testID={testID}
+          accessible={accessible}
+          accessibilityLabel={accessibilityLabel}
+        >
+          <View style={IOListItemStyles.listItemInner}>
+            <ListItemTransactionContent />
+          </View>
         </View>
-      </View>
-    );
-  }
+      ),
+      onPress => (
+        <PressableListItemBase
+          onPress={onPress}
+          testID={testID}
+          accessibilityLabel={accessibilityLabel}
+        >
+          <ListItemTransactionContent />
+        </PressableListItemBase>
+      )
+    )
+  );
 };
 
 const SkeletonComponent = () => (

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

@@ -187,6 +187,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
     />
     <Image
       accessibilityIgnoresInvertColors={true}
+      source={
+        {
+          "uri": "undefined",
+        }
+      }
       style={
         {
           "height": 30,
@@ -1879,6 +1884,11 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
     />
     <Image
       accessibilityIgnoresInvertColors={true}
+      source={
+        {
+          "uri": "undefined",
+        }
+      }
       style={
         {
           "height": 30,

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

@@ -80,11 +80,8 @@ describe("Test List Item Components", () => {
       <ListItemTransaction
         title="TITLE"
         subtitle="subtitle"
-        transaction={{
-          status: "success",
-          amount: "€ 1.000,00",
-          amountAccessibilityLabel: "€ 1.000,00"
-        }}
+        transactionStatus="success"
+        transactionAmount="€ 1.000,00"
         isLoading={true}
         onPress={onButtonPress}
       />
@@ -183,11 +180,8 @@ describe("Test List Item Components - Experimental Enabled ", () => {
       <ListItemTransaction
         title="TITLE"
         subtitle="subtitle"
-        transaction={{
-          status: "success",
-          amount: "€ 1.000,00",
-          amountAccessibilityLabel: "€ 1.000,00"
-        }}
+        transactionStatus="success"
+        transactionAmount="€ 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, StyleSheet } from "react-native";
-import { addCacheTimestampToUri } from "../../utils/image";
+import { Image, ImageSourcePropType, Platform, StyleSheet } from "react-native";
 import {
   IOListItemLogoMargin,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { IOText } from "../typography";
 import {
   PressableModuleBase,
@@ -28,6 +28,12 @@ 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,
@@ -41,8 +47,11 @@ export const ModuleIDP = ({
   const { isExperimental } = useIOExperimentalDesign();
 
   // eslint-disable-next-line no-console
-  const urlLogoIDP = localLogo ? localLogo : addCacheTimestampToUri(logo);
-
+  const urlLogoIDP = localLogo
+    ? localLogo
+    : {
+        uri: `${logo}${androidIdpLogoForcedRefreshed()}`
+      };
   return (
     <PressableModuleBase
       onPress={onPress}

package/src/components/modules/ModulePaymentNotice.tsx

@@ -2,6 +2,7 @@ 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";
@@ -28,19 +29,13 @@ export type ModulePaymentNoticeProps = WithTestID<
     onPress: (event: GestureResponderEvent) => void;
   } & (
     | {
-        paymentNotice: {
-          status: Extract<PaymentNoticeStatus, "default">;
-          amount: string;
-          amountAccessibilityLabel: string;
-        };
+        paymentNoticeStatus: Extract<PaymentNoticeStatus, "default">;
+        paymentNoticeAmount: string;
         badgeText?: never;
       }
     | {
-        paymentNotice: {
-          status: Exclude<PaymentNoticeStatus, "default">;
-          amount?: string;
-          amountAccessibilityLabel?: string;
-        };
+        paymentNoticeStatus: Exclude<PaymentNoticeStatus, "default">;
+        paymentNoticeAmount?: never;
         badgeText: string;
       }
   )
@@ -57,21 +52,22 @@ const styles = StyleSheet.create({
 const ModulePaymentNoticeContent = ({
   title,
   subtitle,
-  paymentNotice: { status, amount, amountAccessibilityLabel },
+  paymentNoticeStatus,
+  paymentNoticeAmount,
   badgeText = ""
 }: Omit<ModulePaymentNoticeProps, "isLoading" | "onPress" | "testID">) => {
   const theme = useIOTheme();
 
   const AmountOrBadgeComponent = () => {
-    switch (status) {
+    switch (paymentNoticeStatus) {
       case "default":
         return (
           <H6
-            accessibilityLabel={amountAccessibilityLabel}
+            accessibilityLabel={getAccessibleAmountText(paymentNoticeAmount)}
             color={theme["interactiveElem-default"]}
             numberOfLines={1}
           >
-            {amount}
+            {paymentNoticeAmount}
           </H6>
         );
       case "paid":

package/src/components/tag/Tag.tsx

@@ -1,3 +1,5 @@
+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 {
@@ -146,16 +148,23 @@ export const Tag = ({
 
   return (
     <View testID={testID} style={styles.tag}>
-      {variantProps && (
-        <View style={styles.iconWrapper}>
-          <Icon
-            name={variantProps.iconName}
-            color={variantProps.iconColor}
-            size={IOTagIconSize}
-            accessible={!!iconAccessibilityLabel}
-            accessibilityLabel={iconAccessibilityLabel}
-          />
-        </View>
+      {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 && text && <View style={styles.spacer} />}
       {text && (

package/src/core/IODSExperimentalContextProvider.tsx

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

package/src/core/IOThemeContextProvider.tsx

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

package/src/utils/accessibility.ts

@@ -1,6 +1,23 @@
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import I18n from "i18n-js";
 import { useEffect, useState } from "react";
 import { AccessibilityInfo, Platform } from "react-native";
 
+/**
+ * This function is used to get the text that will be read by the screen reader
+ * with the correct minus symbol pronunciation.
+ */
+export const getAccessibleAmountText = (amount?: string) =>
+  pipe(
+    amount,
+    O.fromNullable,
+    O.map(amount =>
+      amount.replace("-", I18n.t("global.accessibility.minusSymbol"))
+    ),
+    O.getOrElseW(() => undefined)
+  );
+
 /**
  * Query whether a bold text is currently enabled. The result is true
  * when bold text is enabled and false otherwise.

package/src/utils/dates.ts

@@ -0,0 +1,18 @@
+import I18n from "i18n-js";
+
+export const localeDateFormat = (date: Date, format: string): string =>
+  isNaN(date.getTime())
+    ? I18n.t("global.date.invalid")
+    : I18n.strftime(date, format);
+
+/**
+ * Generates a locale formatted timestamp,
+ * used to force the refresh of the Image component cache for Android devices
+ * every 24 hours.
+ * @returns the actual locale date short format without slashes.
+ */
+export const toAndroidCacheTimestamp = () =>
+  localeDateFormat(
+    new Date(),
+    I18n.t("global.dateFormats.shortFormat").replace(/\//g, "")
+  );

package/src/utils/image.ts

@@ -1,4 +1,9 @@
-import { ImageSourcePropType, Platform } from "react-native";
+import { pipe } from "fp-ts/lib/function";
+import { ImageURISource, Platform } from "react-native";
+import * as B from "fp-ts/boolean";
+import * as T from "io-ts";
+import * as E from "fp-ts/Either";
+import { toAndroidCacheTimestamp } from "./dates";
 
 /**
  * Adds a locale timestamp to the image URI to invalidate cache on the following day if the current platform is Android.
@@ -7,32 +12,27 @@ import { ImageSourcePropType, Platform } from "react-native";
  * @returns a new source with a modified URI which includes the actual timestamp in the locale format without slashes
  * if the platform is Android and the source contains an URI. The same source otherwise.
  */
-export const addCacheTimestampToUri = (source: ImageSourcePropType) => {
-  // If the platform is not Android, return the source as is
-  if (Platform.OS !== "android") {
-    return source;
-  }
+export const addCacheTimestampToUri = (source: ImageURISource) => {
+  const UriSource = T.type({
+    uri: T.string
+  });
 
-  // If the source is a number, it's a local image return as is
-  if (typeof source === "number") {
-    return source;
-  }
-
-  // This invalidates the cache on the following day
-  const cacheBurstParam = new Date()
-    .toISOString()
-    .split("T")[0]
-    .replace(/-/g, "");
-
-  if (Array.isArray(source)) {
-    return source.map(image =>
-      image.uri
-        ? { ...image, uri: `${image.uri}?ts=${cacheBurstParam}` }
-        : image
-    );
-  } else {
-    return source.uri
-      ? { ...source, uri: `${source.uri}?ts=${cacheBurstParam}` }
-      : source;
-  }
+  return pipe(
+    Platform.OS === "android",
+    B.fold(
+      () => source,
+      () =>
+        pipe(
+          source,
+          UriSource.decode,
+          E.fold(
+            () => source,
+            () => ({
+              ...source,
+              uri: `${source.uri}?ts=${toAndroidCacheTimestamp()}`
+            })
+          )
+        )
+    )
+  );
 };

package/src/utils/object.ts

@@ -1,13 +1,12 @@
-// Function to find the first case-insensitive logo
-export const findFirstCaseInsensitive = <T>(
-  obj: { [key: string]: T },
-  key: string
-) => {
-  const lowerKey = key.toLowerCase();
-  for (const [k] of Object.entries(obj)) {
-    if (k.toLowerCase() === lowerKey) {
-      return k;
-    }
-  }
-  return null;
-};
+import * as A from "fp-ts/Array";
+import * as O from "fp-ts/Option";
+import { pipe } from "fp-ts/lib/function";
+
+export const findFirstCaseInsensitive =
+  <T>(obj: { [key: string]: T }) =>
+  (key: string): O.Option<[string, T]> =>
+    pipe(
+      obj,
+      Object.entries,
+      A.findFirst(([k, _]) => k.toLowerCase() === key.toLowerCase())
+    );