@pagopa/io-app-design-system 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/avatar/Avatar.tsx

@@ -1,29 +1,40 @@
 // A component to provide organization logo
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
-import { IOVisualCostants, IOColors, hexToRgba } from "../../core";
-import { MultiImage } from "./MultiImage";
+import { Image, ImageURISource, StyleSheet, View } from "react-native";
+import { Icon } from "../../components/icons";
+import {
+  IOColors,
+  IOSpacingScale,
+  IOThemeContext,
+  IOVisualCostants,
+  hexToRgba
+} from "../../core";
+import { addCacheTimestampToUri } from "../../utils/image";
 
 type Avatar = {
   shape: "circle" | "square";
   size: "small" | "medium";
-  logoUri: React.ComponentProps<typeof MultiImage>["source"];
+  logoUri?: ImageURISource;
 };
 
 const avatarBorderLightMode = hexToRgba(IOColors.black, 0.1);
 const internalSpaceDefaultSize: number = 6;
 const internalSpaceLargeSize: number = 9;
 const radiusDefaultSize: number = 8;
+const internalSpacePlaceholderDefaultSize: IOSpacingScale = 12;
+const internalSpacePlaceholderLargeSize: IOSpacingScale = 16;
 
 const dimensionsMap = {
   small: {
     size: IOVisualCostants.avatarSizeSmall,
     internalSpace: internalSpaceDefaultSize,
+    internalSpacePlaceholder: internalSpacePlaceholderDefaultSize,
     radius: radiusDefaultSize
   },
   medium: {
     size: IOVisualCostants.avatarSizeMedium,
     internalSpace: internalSpaceLargeSize,
+    internalSpacePlaceholder: internalSpacePlaceholderLargeSize,
     radius: radiusDefaultSize
   }
 };
@@ -36,8 +47,7 @@ const styles = StyleSheet.create({
     overflow: "hidden",
     resizeMode: "contain",
     borderColor: avatarBorderLightMode,
-    borderWidth: 1,
-    backgroundColor: IOColors.white
+    borderWidth: 1
   },
   avatarImage: {
     height: "100%",
@@ -45,21 +55,50 @@ const styles = StyleSheet.create({
   }
 });
 
-export const Avatar = ({ logoUri, shape, size }: Avatar) => (
-  <View
-    style={[
-      styles.avatarWrapper,
-      {
-        height: dimensionsMap[size].size,
-        width: dimensionsMap[size].size,
-        borderRadius:
-          shape === "circle"
-            ? getAvatarCircleShape(size)
-            : dimensionsMap[size].radius,
-        padding: dimensionsMap[size].internalSpace
-      }
-    ]}
-  >
-    <MultiImage style={styles.avatarImage} source={logoUri} />
-  </View>
-);
+export const Avatar = ({ logoUri, shape, size }: Avatar) => {
+  const theme = React.useContext(IOThemeContext);
+
+  const [imageSource, setImageSource] = React.useState(
+    !logoUri ? undefined : addCacheTimestampToUri(logoUri)
+  );
+
+  const isPlaceholder = !imageSource;
+
+  const onError = () => {
+    setImageSource(undefined);
+  };
+
+  return (
+    <View
+      style={[
+        styles.avatarWrapper,
+        {
+          height: dimensionsMap[size].size,
+          width: dimensionsMap[size].size,
+          borderRadius:
+            shape === "circle"
+              ? getAvatarCircleShape(size)
+              : dimensionsMap[size].radius,
+          backgroundColor: isPlaceholder ? IOColors["grey-50"] : IOColors.white,
+          padding: isPlaceholder
+            ? dimensionsMap[size].internalSpacePlaceholder
+            : dimensionsMap[size].internalSpace
+        }
+      ]}
+    >
+      {isPlaceholder ? (
+        <Icon
+          name="institution"
+          color={theme["icon-decorative"]}
+          size={"100%"}
+        />
+      ) : (
+        <Image
+          source={imageSource}
+          style={styles.avatarImage}
+          onError={onError}
+        />
+      )}
+    </View>
+  );
+};

package/src/components/avatar/__test__/__snapshots__/avatar.test.tsx.snap

@@ -5,13 +5,13 @@ exports[`Test Avatar Components Avatar Snapshot 1`] = `
   style={
     [
       {
-        "backgroundColor": "#FFFFFF",
         "borderColor": "rgba(14,15,19,0.1)",
         "borderWidth": 1,
         "overflow": "hidden",
         "resizeMode": "contain",
       },
       {
+        "backgroundColor": "#FFFFFF",
         "borderRadius": 22,
         "height": 44,
         "padding": 6,
@@ -19,7 +19,20 @@ exports[`Test Avatar Components Avatar Snapshot 1`] = `
       },
     ]
   }
-/>
+>
+  <Image
+    onError={[Function]}
+    source={
+      {
+        "uri": "",
+      }
+    }
+    style={
+      {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  />
+</View>
 `;
-
-exports[`Test Avatar Components MultiImage Snapshot 1`] = `null`;

package/src/components/avatar/__test__/avatar.test.tsx

@@ -1,19 +1,12 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
 import { Avatar } from "../Avatar";
-import { MultiImage } from "../MultiImage";
 
 describe("Test Avatar Components", () => {
   it("Avatar Snapshot", () => {
     const avatar = TestRenderer.create(
-      <Avatar shape={"circle"} size={"small"} logoUri={[]}></Avatar>
+      <Avatar shape={"circle"} size={"small"} logoUri={{ uri: "" }}></Avatar>
     ).toJSON();
     expect(avatar).toMatchSnapshot();
   });
-  it("MultiImage Snapshot", () => {
-    const multiImage = TestRenderer.create(
-      <MultiImage source={[]}></MultiImage>
-    ).toJSON();
-    expect(multiImage).toMatchSnapshot();
-  });
 });

package/src/components/avatar/index.tsx

@@ -1,2 +1 @@
 export * from "./Avatar";
-export * from "./MultiImage";

package/src/components/badge/Badge.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import {
   IOBadgeHSpacing,
@@ -11,6 +11,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 
 export type Badge = WithTestID<{
+  outline?: boolean;
   text: string;
   variant:
     | "default"
@@ -25,12 +26,12 @@ export type Badge = WithTestID<{
     | "contrast";
 }>;
 
-type VariantProps = {
-  foreground: IOColors;
+type SolidVariantProps = {
   background: IOColors;
+  foreground: IOColors;
 };
 
-const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
+const mapVariants: Record<NonNullable<Badge["variant"]>, SolidVariantProps> = {
   default: {
     foreground: "grey-700",
     background: "grey-50"
@@ -73,6 +74,47 @@ const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
   }
 };
 
+type OutlinedVariantProps = {
+  foreground: IOColors;
+  background?: never;
+};
+
+const mapOutlineVariants: Record<
+  NonNullable<Badge["variant"]>,
+  OutlinedVariantProps
+> = {
+  default: {
+    foreground: "grey-700"
+  },
+  info: {
+    foreground: "info-850"
+  },
+  warning: {
+    foreground: "warning-850"
+  },
+  success: {
+    foreground: "success-850"
+  },
+  error: {
+    foreground: "error-850"
+  },
+  purple: {
+    foreground: "hanPurple-850"
+  },
+  lightBlue: {
+    foreground: "blueIO-850"
+  },
+  blue: {
+    foreground: "blueIO-500"
+  },
+  turquoise: {
+    foreground: "turquoise-850"
+  },
+  contrast: {
+    foreground: "grey-850"
+  }
+};
+
 const styles = StyleSheet.create({
   badge: {
     flexDirection: "row",
@@ -106,14 +148,26 @@ const styles = StyleSheet.create({
 /**
  * Official badge component
  */
-export const Badge = ({ text, variant, testID }: Badge) => {
+export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
+  const { background, foreground } = useMemo(
+    () => (outline ? mapOutlineVariants : mapVariants)[variant],
+    [outline, variant]
+  );
+
   return (
     <View
       testID={testID}
       style={[
         styles.badge,
-        { backgroundColor: IOColors[mapVariants[variant].background] }
+        outline
+          ? {
+              borderWidth: 1,
+              borderColor: IOColors[foreground]
+            }
+          : {
+              backgroundColor: background ? IOColors[background] : undefined
+            }
       ]}
     >
       <Text
@@ -122,7 +176,9 @@ export const Badge = ({ text, variant, testID }: Badge) => {
         style={[
           styles.label,
           isExperimental ? styles.labelFont : styles.legacyLabelFont,
-          { color: IOColors[mapVariants[variant].foreground] }
+          {
+            color: IOColors[foreground]
+          }
         ]}
       >
         {text}

package/src/components/icons/svg/IconInstitution.tsx

@@ -5,10 +5,10 @@ import { SVGIconProps } from "../Icon";
 const IconInstitution = ({ size, style, ...props }: SVGIconProps) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
     <Path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M10.402 2.685a2.997 2.997 0 0 1 3.219 0l7.918 5.04a.999.999 0 0 1 .463.842l-.023 1.423H1.999l.022-1.423c0-.342.174-.66.463-.843l7.918-5.039ZM14.693.999A4.995 4.995 0 0 0 9.33 1L1.41 6.04A2.997 2.997 0 0 0 .024 8.566L0 10.989a1 1 0 0 0 .999 1h1v9.99h-1a.999.999 0 1 0 0 1.998H22.978a1 1 0 0 0 0-1.998h-.999v-9.99h1a1 1 0 0 0 .998-1L24 8.567a2.997 2.997 0 0 0-1.388-2.529L14.693 1ZM5.994 21.98H3.996v-9.99h1.998v9.99Zm9.99-9.99v9.99H7.993v-9.99h7.993Zm3.997 9.99h-1.998v-9.99h1.998v9.99ZM13.51 6.471a1.499 1.499 0 1 1-2.997 0 1.499 1.499 0 0 1 2.997 0Z"
       clipRule="evenodd"
-      d="M10.4023 2.68517c.9818-.62476 2.2365-.62476 3.2182 0l7.9187 5.03918a.999.999 0 0 1 .4627.84286l-.0229 1.42337H1.99809l.02288-1.42337a.99903.99903 0 0 1 .46269-.84286l7.91864-5.03918Zm4.291-1.68572c-1.6363-1.04126-3.7274-1.04126-5.36368 0L1.41093 6.03864C.54641 6.58878.02288 7.54248.02288 8.56721L0 10.9896c0 .5518.44729.9991.99905.9991h.99904v9.9905H.99905c-.55176 0-.99905.4473-.99905.999 0 .5518.44729.9991.99905.9991H22.9781c.5517 0 .999-.4473.999-.9991 0-.5517-.4473-.999-.999-.999h-.9991v-9.9905h.9991c.5517 0 .999-.4473.999-.9991L24 8.56721c0-1.02473-.5235-1.97843-1.388-2.52858L14.6933.99945ZM5.99428 21.9792H3.99619v-9.9905h1.99809v9.9905Zm9.99042-9.9905v9.9905H7.99237v-9.9905h7.99233Zm3.9962 9.9905h-1.9981v-9.9905h1.9981v9.9905ZM13.51 6.47125c0 .82764-.6709 1.49857-1.4986 1.49857-.8276 0-1.4985-.67093-1.4985-1.49857 0-.82764.6709-1.49858 1.4985-1.49858.8277 0 1.4986.67094 1.4986 1.49858Z"
-      fill="currentColor"
     />
   </Svg>
 );

package/src/components/icons/svg/originals/IconInstitution.svg

@@ -1,8 +1,3 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M10.4023 2.68517c.9818-.62476 2.2365-.62476 3.2182 0l7.9187 5.03918a.999.999 0 0 1 .4627.84286l-.0229 1.42337H1.99809l.02288-1.42337a.99903.99903 0 0 1 .46269-.84286l7.91864-5.03918Zm4.291-1.68572c-1.6363-1.04126-3.7274-1.04126-5.36368 0L1.41093 6.03864C.54641 6.58878.02288 7.54248.02288 8.56721L0 10.9896c0 .5518.44729.9991.99905.9991h.99904v9.9905H.99905c-.55176 0-.99905.4473-.99905.999 0 .5518.44729.9991.99905.9991H22.9781c.5517 0 .999-.4473.999-.9991 0-.5517-.4473-.999-.999-.999h-.9991v-9.9905h.9991c.5517 0 .999-.4473.999-.9991L24 8.56721c0-1.02473-.5235-1.97843-1.388-2.52858L14.6933.99945ZM5.99428 21.9792H3.99619v-9.9905h1.99809v9.9905Zm9.99042-9.9905v9.9905H7.99237v-9.9905h7.99233Zm3.9962 9.9905h-1.9981v-9.9905h1.9981v9.9905ZM13.51 6.47125c0 .82764-.6709 1.49857-1.4986 1.49857-.8276 0-1.4985-.67093-1.4985-1.49857 0-.82764.6709-1.49858 1.4985-1.49858.8277 0 1.4986.67094 1.4986 1.49858Z"
-    fill="#0E0F13"
-  />
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4023 2.68497C11.3841 2.06021 12.6388 2.06021 13.6205 2.68497L21.5392 7.72414C21.8274 7.90752 22.0019 8.22542 22.0019 8.56699L21.979 9.99037H1.99809L2.02097 8.56699C2.02097 8.22542 2.19548 7.90752 2.48366 7.72414L10.4023 2.68497ZM14.6933 0.999255C13.057 -0.0420089 10.9659 -0.0420063 9.32962 0.999256L1.41093 6.03842C0.54641 6.58857 0.0228809 7.54227 0.0228809 8.56699L0 10.9894C0 11.5412 0.447288 11.9885 0.999047 11.9885H1.99809V21.979H0.999047C0.447288 21.979 0 22.4262 0 22.978C0 23.5298 0.447288 23.9771 0.999047 23.9771H2.99714H6.99333H16.9838H20.98H22.9781C23.5298 23.9771 23.9771 23.5298 23.9771 22.978C23.9771 22.4262 23.5298 21.979 22.9781 21.979H21.979V11.9885H22.9781C23.5298 11.9885 23.9771 11.5412 23.9771 10.9894L24 8.56699C24 7.54227 23.4765 6.58857 22.612 6.03842L14.6933 0.999255ZM5.99428 21.979H3.99619V11.9885H5.99428V21.979ZM15.9847 11.9885V21.979H7.99237V11.9885H15.9847ZM19.9809 21.979H17.9828V11.9885H19.9809V21.979ZM13.51 6.47104C13.51 7.29868 12.8391 7.96961 12.0114 7.96961C11.1838 7.96961 10.5129 7.29868 10.5129 6.47104C10.5129 5.6434 11.1838 4.97247 12.0114 4.97247C12.8391 4.97247 13.51 5.6434 13.51 6.47104Z" fill="#2B2E38"/>
 </svg>

package/src/components/listitems/ListItemTransaction.tsx

@@ -91,7 +91,7 @@ const MUNICIPALITY_LOGO_SIZE = 44;
 
 const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
   if (isImageUri(logoIcon)) {
-    return <Avatar logoUri={[logoIcon]} size="small" shape="circle" />;
+    return <Avatar logoUri={logoIcon} size="small" shape="circle" />;
   }
   if (React.isValidElement(logoIcon)) {
     return <>{logoIcon}</>;

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

@@ -146,7 +146,7 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
           "paddingHorizontal": 16,
           "paddingVertical": 16,
         },
-        undefined,
+        false,
         {
           "transform": [
             {

package/src/components/modules/ModuleIDP.tsx

@@ -1,57 +1,30 @@
 import * as React from "react";
-import { useCallback } from "react";
 import {
-  GestureResponderEvent,
   Image,
   ImageSourcePropType,
   Platform,
-  Pressable,
   StyleSheet,
   Text
 } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
 import {
   IOColors,
-  IOModuleIDPHSpacing,
-  IOModuleIDPRadius,
-  IOModuleIDPSavedVSpacing,
-  IOModuleIDPVSpacing,
   IOListItemLogoMargin,
-  IOScaleValues,
-  IOSpringValues,
   useIOExperimentalDesign
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { makeFontStyleObject } from "../../utils/fonts";
-import { WithTestID } from "../../utils/types";
+import {
+  PressableModuleBase,
+  PressableModuleBaseProps
+} from "./PressableModuleBase";
 
-type ModuleIDP = WithTestID<{
+interface ModuleIDP extends PressableModuleBaseProps {
   name: string;
   localLogo: ImageSourcePropType;
   logo: ImageSourcePropType;
-  saved?: boolean;
-  onPress: (event: GestureResponderEvent) => void;
-}>;
+}
 
 const styles = StyleSheet.create({
-  button: {
-    borderWidth: 1,
-    borderColor: IOColors["grey-100"],
-    borderRadius: IOModuleIDPRadius,
-    backgroundColor: IOColors.white,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: IOModuleIDPVSpacing,
-    paddingHorizontal: IOModuleIDPHSpacing
-  },
   idpName: {
     color: IOColors["grey-700"],
     fontSize: 12,
@@ -84,41 +57,11 @@ export const ModuleIDP = ({
   name,
   localLogo,
   logo,
-  saved,
+  withLooseSpacing = false,
   onPress,
   testID
 }: ModuleIDP) => {
-  const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
-
-  const scaleTraversed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      scaleTraversed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
 
   // eslint-disable-next-line no-console
   const urlLogoIDP = localLogo
@@ -127,34 +70,21 @@ export const ModuleIDP = ({
         uri: `${logo}${androidIdpLogoForcedRefreshed()}`
       };
   return (
-    <Pressable
+    <PressableModuleBase
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onTouchEnd={handlePressOut}
-      accessible={true}
-      accessibilityRole={"button"}
-      accessibilityLabel={name}
       testID={testID}
+      withLooseSpacing={withLooseSpacing}
     >
-      <Animated.View
+      <Text
         style={[
-          styles.button,
-          saved && { paddingVertical: IOModuleIDPSavedVSpacing },
-          animatedStyle
+          styles.idpName,
+          isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
         ]}
       >
-        <Text
-          style={[
-            styles.idpName,
-            isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
-          ]}
-        >
-          {name}
-        </Text>
-        <Image source={urlLogoIDP} style={styles.idpLogo} />
-      </Animated.View>
-    </Pressable>
+        {name}
+      </Text>
+      <Image source={urlLogoIDP} style={styles.idpLogo} />
+    </PressableModuleBase>
   );
 };
 

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,19 +1,5 @@
 import * as React from "react";
-import { useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
 import { WithTestID } from "../../utils/types";
 import { getAccessibleAmountText } from "../../utils/accessibility";
@@ -21,14 +7,13 @@ import { H6, LabelSmall } from "../typography";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import {
-  IOColors,
   IOListItemVisualParams,
-  IOScaleValues,
-  IOSpringValues,
+  IOModuleStyles,
   IOStyles,
   useIOExperimentalDesign
 } from "../../core";
 import { VSpacer } from "../spacer";
+import { PressableModuleBase } from "./PressableModuleBase";
 
 export type PaymentNoticeStatus =
   | "default"
@@ -36,7 +21,8 @@ export type PaymentNoticeStatus =
   | "error"
   | "expired"
   | "revoked"
-  | "canceled";
+  | "canceled"
+  | "in-progress";
 
 export type ModulePaymentNoticeProps = WithTestID<
   {
@@ -60,19 +46,6 @@ export type ModulePaymentNoticeProps = WithTestID<
 >;
 
 const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderRadius: 8,
-    borderColor: IOColors.bluegreyLight,
-    backgroundColor: IOColors.white,
-    borderStyle: "solid",
-    borderWidth: 1
-  },
   rightSection: {
     marginLeft: IOListItemVisualParams.iconMargin,
     flexDirection: "row",
@@ -111,12 +84,14 @@ const ModulePaymentNoticeContent = ({
         return <Badge variant="default" text={badgeText} />;
       case "canceled":
         return <Badge variant="default" text={badgeText} />;
+      case "in-progress":
+        return <Badge variant="info" text={badgeText} />;
     }
   };
 
   return (
     <>
-      <View style={{ flexGrow: 1, flexShrink: 1 }}>
+      <View style={{ flexGrow: 1, flexShrink: 1, paddingEnd: 8 }}>
         {title && (
           <LabelSmall numberOfLines={1} weight="Regular" color="bluegrey">
             {title}
@@ -126,6 +101,7 @@ const ModulePaymentNoticeContent = ({
           weight="SemiBold"
           font={isExperimental ? "ReadexPro" : "TitilliumWeb"}
           color={isExperimental ? "blueIO-500" : "bluegrey"}
+          numberOfLines={2}
         >
           {subtitle}
         </LabelSmall>
@@ -161,62 +137,23 @@ export const ModulePaymentNotice = ({
   onPress,
   ...rest
 }: ModulePaymentNoticeProps) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
-
-  const scaleTraversed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      scaleTraversed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const onPressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-
-  const onPressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
   if (isLoading) {
     return <SkeletonComponent />;
   }
 
   return (
-    <Pressable
-      testID={testID}
+    <PressableModuleBase
       onPress={onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      accessible={true}
-      accessibilityRole={"button"}
       accessibilityLabel={accessibilityLabel}
+      testID={testID}
     >
-      <Animated.View style={[styles.button, animatedStyle]}>
-        <ModulePaymentNoticeContent {...rest} />
-      </Animated.View>
-    </Pressable>
+      <ModulePaymentNoticeContent {...rest} />
+    </PressableModuleBase>
   );
 };
 
 const SkeletonComponent = () => (
-  <View style={styles.button} accessible={false}>
+  <View style={IOModuleStyles.button} accessible={false}>
     <View style={IOStyles.flex}>
       <Placeholder.Box animate="fade" radius={8} width={179} height={16} />
       <VSpacer size={4} />