@pagopa/io-app-design-system 2.0.0-1 → 2.0.1

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../types";
+
+const IconCieLetter = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconCieLetter;

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

@@ -0,0 +1,22 @@
+import React from "react";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore (ignore Path unused component)
+import { Path, Svg } from "react-native-svg";
+import { SVGIconProps } from "../types";
+
+// The `generateNewIcons.js`s script uses this template to generate
+// the new `Icon…` component. Don't edit this file to avoid
+// adding breaking changes to the process.
+
+const IconSwitchCard = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.47364 6.80676C3.58714 5.35067 4.61099 4 6.1079 4H17.8904C19.3873 4 20.4112 5.35067 20.5247 6.80676H21.1C22.7027 6.80676 24 8.17682 24 9.86438C24 11.5542 22.7006 12.922 21.1 12.922H20.5352V15.924C20.5352 17.4783 19.4793 19 17.8904 19H6.1079C4.51903 19 3.46313 17.4783 3.46313 15.924V15.0689H5.36002V15.924C5.36002 16.6639 5.82216 17 6.1079 17H17.8904C18.1761 17 18.6383 16.6639 18.6383 15.924V12.922H13.3412V10.922H18.6383V7.07602C18.6383 6.33611 18.1761 6 17.8904 6H6.1079C5.82216 6 5.36002 6.33611 5.36002 7.07602V10.922H8.69395L7.53674 9.70924C7.16523 9.3199 7.16342 8.68673 7.53269 8.29503C7.90196 7.90333 8.50248 7.90142 8.87399 8.29076L11.7193 11.2727C12.0893 11.6604 12.0929 12.2903 11.7274 12.6826L8.9161 15.7007C8.54907 16.0947 7.94857 16.1004 7.57485 15.7135C7.20113 15.3265 7.19571 14.6933 7.56275 14.2993L8.84568 12.922H2.89999C1.29943 12.922 0 11.5542 0 9.86438C0 8.17682 1.29728 6.80676 2.89999 6.80676H3.47364ZM3.46313 8.80676H2.89999C2.34574 8.80676 1.89689 9.28051 1.89689 9.86438C1.89689 10.4488 2.34622 10.922 2.89999 10.922H3.46313V8.80676ZM20.5352 10.922H21.1C21.6538 10.922 22.1031 10.4488 22.1031 9.86438C22.1031 9.28051 21.6543 8.80676 21.1 8.80676H20.5352V10.922Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconSwitchCard;

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z" fill="#0B3EE3"/></svg>

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.47364 6.80676C3.58714 5.35067 4.61099 4 6.1079 4H17.8904C19.3873 4 20.4112 5.35067 20.5247 6.80676H21.1C22.7027 6.80676 24 8.17682 24 9.86438C24 11.5542 22.7006 12.922 21.1 12.922H20.5352V15.924C20.5352 17.4783 19.4793 19 17.8904 19H6.1079C4.51903 19 3.46313 17.4783 3.46313 15.924V15.0689H5.36002V15.924C5.36002 16.6639 5.82216 17 6.1079 17H17.8904C18.1761 17 18.6383 16.6639 18.6383 15.924V12.922H13.3412V10.922H18.6383V7.07602C18.6383 6.33611 18.1761 6 17.8904 6H6.1079C5.82216 6 5.36002 6.33611 5.36002 7.07602V10.922H8.69395L7.53674 9.70924C7.16523 9.3199 7.16342 8.68673 7.53269 8.29503C7.90196 7.90333 8.50248 7.90142 8.87399 8.29076L11.7193 11.2727C12.0893 11.6604 12.0929 12.2903 11.7274 12.6826L8.9161 15.7007C8.54907 16.0947 7.94857 16.1004 7.57485 15.7135C7.20113 15.3265 7.19571 14.6933 7.56275 14.2993L8.84568 12.922H2.89999C1.29943 12.922 0 11.5542 0 9.86438C0 8.17682 1.29728 6.80676 2.89999 6.80676H3.47364ZM3.46313 8.80676H2.89999C2.34574 8.80676 1.89689 9.28051 1.89689 9.86438C1.89689 10.4488 2.34622 10.922 2.89999 10.922H3.46313V8.80676ZM20.5352 10.922H21.1C21.6538 10.922 22.1031 10.4488 22.1031 9.86438C22.1031 9.28051 21.6543 8.80676 21.1 8.80676H20.5352V10.922Z" fill="#BBC2D6"/>
+</svg>

package/src/components/layout/HeaderFirstLevel.tsx

@@ -1,12 +1,24 @@
 import * as React from "react";
+import { useEffect, useLayoutEffect } from "react";
 import {
   AccessibilityInfo,
+  findNodeHandle,
   StyleSheet,
-  View,
-  findNodeHandle
+  View
 } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { IOColors, IOStyles, IOVisualCostants, useIOTheme } from "../../core";
+import {
+  alertEdgeToEdgeInsetTransitionConfig,
+  IOColors,
+  IOStyles,
+  IOVisualCostants,
+  useIOTheme
+} from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import { HSpacer } from "../spacer";
@@ -17,6 +29,7 @@ type CommonProps = WithTestID<{
   title: string;
   // This Prop will be removed once all the screens on the first level routing will be refactored
   backgroundColor?: "light" | "dark";
+  ignoreSafeAreaMargin?: boolean;
 }>;
 
 interface Base extends CommonProps {
@@ -67,6 +80,7 @@ export const HeaderFirstLevel = ({
   type,
   testID,
   backgroundColor = "light",
+  ignoreSafeAreaMargin = false,
   firstAction,
   secondAction,
   thirdAction
@@ -74,23 +88,38 @@ export const HeaderFirstLevel = ({
   const titleRef = React.createRef<View>();
   const insets = useSafeAreaInsets();
   const theme = useIOTheme();
+  const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const reactNode = findNodeHandle(titleRef.current);
     if (reactNode !== null) {
       AccessibilityInfo.setAccessibilityFocus(reactNode);
     }
   });
 
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    paddingTop.value = withTiming(
+      ignoreSafeAreaMargin ? 0 : insets.top,
+      alertEdgeToEdgeInsetTransitionConfig
+    );
+  }, [ignoreSafeAreaMargin, insets.top, paddingTop]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    paddingTop: paddingTop.value
+  }));
+
   return (
-    <View
-      style={{
-        paddingTop: insets.top,
-        backgroundColor:
-          backgroundColor === "light"
-            ? IOColors[theme["appBackground-primary"]]
-            : IOColors[HEADER_BG_COLOR_DARK]
-      }}
+    <Animated.View
+      style={[
+        {
+          backgroundColor:
+            backgroundColor === "light"
+              ? IOColors[theme["appBackground-primary"]]
+              : IOColors[HEADER_BG_COLOR_DARK]
+        },
+        animatedStyle
+      ]}
       accessibilityRole="header"
       testID={testID}
     >
@@ -136,7 +165,7 @@ export const HeaderFirstLevel = ({
           )}
         </View>
       </View>
-    </View>
+    </Animated.View>
   );
 };
 

package/src/components/layout/HeaderSecondLevel.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentProps } from "react";
+import { ComponentProps, useEffect, useLayoutEffect } from "react";
 import {
   AccessibilityInfo,
   ColorValue,
@@ -9,15 +9,24 @@ import {
   findNodeHandle
 } from "react-native";
 import Animated, {
+  AnimatedRef,
+  SharedValue,
   interpolate,
   interpolateColor,
-  useAnimatedStyle
+  useAnimatedStyle,
+  useDerivedValue,
+  useScrollViewOffset,
+  useSharedValue,
+  withSpring,
+  withTiming
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   IOColors,
+  IOSpringValues,
   IOStyles,
   IOVisualCostants,
+  alertEdgeToEdgeInsetTransitionConfig,
   hexToRgba,
   iconBtnSizeSmall,
   useIOExperimentalDesign,
@@ -31,10 +40,20 @@ import { IOText } from "../typography";
 import { ActionProp } from "./common";
 
 type ScrollValues = {
-  contentOffsetY: Animated.SharedValue<number>;
+  contentOffsetY: SharedValue<number>;
   triggerOffset: number;
 };
 
+type DiscreteTransitionProps =
+  | {
+      enableDiscreteTransition: true;
+      animatedRef: AnimatedRef<Animated.ScrollView>;
+    }
+  | {
+      enableDiscreteTransition?: false;
+      animatedRef?: never;
+    };
+
 type BackProps =
   | {
       goBack: () => void;
@@ -54,7 +73,7 @@ type CommonProps = WithTestID<{
   transparent?: boolean;
   variant?: "neutral" | "contrast";
   backgroundColor?: string;
-  isModal?: boolean;
+  ignoreSafeAreaMargin?: boolean;
 }>;
 
 interface Base extends CommonProps {
@@ -86,6 +105,7 @@ interface ThreeActions extends CommonProps {
 }
 
 export type HeaderSecondLevel = BackProps &
+  DiscreteTransitionProps &
   (Base | OneAction | TwoActions | ThreeActions);
 
 const titleHorizontalMargin: IOSpacingScale = 16;
@@ -121,18 +141,24 @@ export const HeaderSecondLevel = ({
   variant = "neutral",
   backgroundColor,
   transparent = false,
-  isModal = false,
+  ignoreSafeAreaMargin = false,
+  enableDiscreteTransition = false,
+  animatedRef,
   testID,
   firstAction,
   secondAction,
   thirdAction
 }: HeaderSecondLevel) => {
+  const scrollOffset = useScrollViewOffset(
+    animatedRef as AnimatedRef<Animated.ScrollView>
+  );
   const titleRef = React.createRef<View>();
 
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
   const insets = useSafeAreaInsets();
   const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
+  const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
   const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
@@ -148,7 +174,10 @@ export const HeaderSecondLevel = ({
 
   const headerBgColorTransparentState = backgroundColor
     ? hexToRgba(backgroundColor, 0)
-    : hexToRgba(IOColors[HEADER_DEFAULT_BG_COLOR], 0);
+    : transparent
+    ? hexToRgba(IOColors[HEADER_DEFAULT_BG_COLOR], 0)
+    : IOColors[HEADER_DEFAULT_BG_COLOR];
+
   const headerBgColorSolidState =
     backgroundColor ?? IOColors[HEADER_DEFAULT_BG_COLOR];
 
@@ -157,7 +186,7 @@ export const HeaderSecondLevel = ({
     : hexToRgba(IOColors["grey-100"], 0);
   const borderColorSolidState = backgroundColor ?? IOColors["grey-100"];
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (isTitleAccessible) {
       const reactNode = findNodeHandle(titleRef.current);
       if (reactNode !== null) {
@@ -166,15 +195,43 @@ export const HeaderSecondLevel = ({
     }
   });
 
+  const bgColorDiscreteTransition = useDerivedValue(() =>
+    withSpring(scrollOffset.value > 0 ? 1 : 0, IOSpringValues.header)
+  );
+
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    paddingTop.value = withTiming(
+      ignoreSafeAreaMargin ? 0 : insets.top,
+      alertEdgeToEdgeInsetTransitionConfig
+    );
+  }, [ignoreSafeAreaMargin, insets.top, paddingTop]);
+
+  const animatedPaddingStyle = useAnimatedStyle(() => ({
+    marginTop: paddingTop.value
+  }));
+
   const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: scrollValues
+    backgroundColor: enableDiscreteTransition
+      ? interpolateColor(
+          bgColorDiscreteTransition.value,
+          [0, 1],
+          [headerBgColorTransparentState, headerBgColorSolidState]
+        )
+      : scrollValues
       ? interpolateColor(
           scrollValues.contentOffsetY.value,
           [0, scrollValues.triggerOffset],
           [headerBgColorTransparentState, headerBgColorSolidState]
         )
       : headerBgColorSolidState,
-    borderColor: scrollValues
+    borderColor: enableDiscreteTransition
+      ? interpolateColor(
+          bgColorDiscreteTransition.value,
+          [0, 1],
+          [borderColorTransparentState, borderColorSolidState]
+        )
+      : scrollValues
       ? interpolateColor(
           scrollValues.contentOffsetY.value,
           [0, scrollValues.triggerOffset],
@@ -184,7 +241,9 @@ export const HeaderSecondLevel = ({
   }));
 
   const titleAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: scrollValues
+    opacity: enableDiscreteTransition
+      ? interpolate(bgColorDiscreteTransition.value, [0, 1], [0, 1])
+      : scrollValues
       ? interpolate(
           scrollValues.contentOffsetY.value,
           [0, scrollValues.triggerOffset],
@@ -198,14 +257,14 @@ export const HeaderSecondLevel = ({
       accessibilityRole="header"
       style={[
         { borderBottomWidth: 1, borderColor: borderColorTransparentState },
-        isModal ? { borderColor: borderColorSolidState } : {},
+        ignoreSafeAreaMargin ? { borderColor: borderColorSolidState } : {},
         !transparent ? { backgroundColor: headerBgColorSolidState } : {},
         headerWrapperAnimatedStyle
       ]}
     >
       <Animated.View
         testID={testID}
-        style={[isModal ? {} : { marginTop: insets.top }, styles.headerInner]}
+        style={[animatedPaddingStyle, styles.headerInner]}
       >
         {goBack ? (
           <IconButton

package/src/components/listitems/ListItemInfo.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, useCallback, useMemo } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
@@ -81,17 +81,7 @@ export const ListItemInfo = ({
 
   const itemInfoTextComponent = useMemo(
     () => (
-      <View
-        accessible={endElement === undefined ? true : false}
-        importantForAccessibility={
-          endElement !== undefined && endElement.type !== "badge"
-            ? "no-hide-descendants"
-            : "yes"
-        }
-        accessibilityElementsHidden={
-          endElement !== undefined && endElement.type !== "badge"
-        }
-      >
+      <View accessible={Platform.OS === "ios"}>
         <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
           {label}
         </LabelSmall>
@@ -104,7 +94,7 @@ export const ListItemInfo = ({
         )}
       </View>
     ),
-    [label, value, numberOfLines, theme, endElement]
+    [label, value, numberOfLines, theme]
   );
 
   const listItemInfoAction = useCallback(() => {
@@ -113,7 +103,9 @@ export const ListItemInfo = ({
 
       switch (type) {
         case "buttonLink":
-          const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+          const buttonLinkAccessibilityLabel = `${
+            componentProps.accessibilityLabel ?? componentProps.label
+          }`;
 
           return (
             <ButtonLink
@@ -122,7 +114,7 @@ export const ListItemInfo = ({
             />
           );
         case "iconButton":
-          const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+          const iconButtonAccessibilityLabel = `${componentProps.accessibilityLabel}`;
           return (
             <IconButton
               {...componentProps}
@@ -136,7 +128,7 @@ export const ListItemInfo = ({
       }
     }
     return <></>;
-  }, [endElement, listItemAccessibilityLabel]);
+  }, [endElement]);
 
   return (
     <View

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

@@ -234,9 +234,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
       }
     >
       <View
-        accessibilityElementsHidden={false}
         accessible={true}
-        importantForAccessibility="yes"
       >
         <Text
           allowFontScaling={true}
@@ -1933,9 +1931,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={false}
         accessible={true}
-        importantForAccessibility="yes"
       >
         <Text
           allowFontScaling={false}

package/src/components/modules/ModuleAttachment.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback } from "react";
-import { GestureResponderEvent, PressableProps, View } from "react-native";
+import { GestureResponderEvent, PressableProps } from "react-native";
 import Placeholder from "rn-placeholder";
 import { IOListItemVisualParams, useIOTheme } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
-import { VSpacer } from "../spacer";
+import { HStack, VStack } from "../stack";
 import { LabelSmallAlt } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
@@ -61,21 +61,21 @@ const ModuleAttachmentContent = ({
   };
 
   return (
-    <>
-      <View style={{ alignItems: "flex-start", flexShrink: 1 }}>
+    <HStack space={8} style={{ alignItems: "center" }}>
+      <VStack
+        space={4}
+        style={{ alignItems: "flex-start", flexShrink: 1, flexGrow: 1 }}
+      >
         <LabelSmallAlt
           numberOfLines={2}
           color={theme["interactiveElem-default"]}
         >
           {title}
         </LabelSmallAlt>
-        <VSpacer size={4} />
         <Badge text={format.toUpperCase()} variant="default" />
-      </View>
-      <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-        <IconOrActivityIndicatorComponent />
-      </View>
-    </>
+      </VStack>
+      <IconOrActivityIndicatorComponent />
+    </HStack>
   );
 };
 
@@ -151,11 +151,10 @@ export const ModuleAttachment = ({
 const ModuleAttachmentSkeleton = () => (
   <ModuleStatic
     startBlock={
-      <View>
-        <Placeholder.Box animate="fade" radius={8} width={107} height={16} />
-        <VSpacer size={4} />
-        <Placeholder.Box animate="fade" radius={16} width={44} height={20} />
-      </View>
+      <VStack space={4}>
+        <Placeholder.Box animate="fade" radius={8} width={114} height={16} />
+        <Placeholder.Box animate="fade" radius={16} width={42} height={20} />
+      </VStack>
     }
   />
 );

package/src/components/modules/ModuleCheckout.tsx

@@ -14,7 +14,7 @@ import {
 } from "../../core";
 import { ButtonLink } from "../buttons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
-import { HSpacer, VSpacer } from "../spacer";
+import { HStack, VStack } from "../stack";
 import { H6, LabelSmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
@@ -42,33 +42,32 @@ export type ModuleCheckoutProps = LoadingProps | BaseProps;
 export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   const theme = useIOTheme();
 
+  const imageMargin: IOSpacingScale = 12;
+
   if (props.isLoading) {
     return <ModuleCheckoutSkeleton />;
   }
 
   const { paymentLogo, image, title, subtitle, ctaText, onPress } = props;
 
-  const imageComponent = (
-    <>
-      {paymentLogo && (
-        <View style={styles.imageWrapper}>
-          <LogoPayment name={paymentLogo} />
-        </View>
-      )}
-      {image && (
-        <Image
-          source={image}
-          style={[styles.imageWrapper, styles.image]}
-          accessibilityIgnoresInvertColors={true}
-        />
-      )}
-    </>
+  const paymentLogoComponent = paymentLogo && (
+    <LogoPayment name={paymentLogo} />
+  );
+
+  const imageComponent = image && (
+    <Image
+      source={image}
+      style={styles.image}
+      accessibilityIgnoresInvertColors={true}
+    />
   );
 
   const ModuleBaseContent = () => (
-    <>
-      {imageComponent}
-      <View style={styles.content}>
+    <HStack space={imageMargin} style={{ alignItems: "center", flexShrink: 1 }}>
+      {/* Graphical elements */}
+      {paymentLogoComponent ?? imageComponent}
+
+      <View style={{ flexGrow: 1, flexShrink: 1 }}>
         <H6 color={theme["textBody-default"]}>{title}</H6>
         {subtitle && (
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
@@ -76,20 +75,21 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
           </LabelSmall>
         )}
       </View>
-    </>
+    </HStack>
   );
 
   return ctaText ? (
     <PressableModuleBase onPress={onPress}>
-      <ModuleBaseContent />
-      <HSpacer size={4} />
-      <View
-        pointerEvents="none"
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
-      >
-        <ButtonLink label={ctaText} onPress={() => null} />
-      </View>
+      <HStack space={4} style={{ alignItems: "center" }}>
+        <ModuleBaseContent />
+        <View
+          pointerEvents="none"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
+          <ButtonLink label={ctaText} onPress={() => null} />
+        </View>
+      </HStack>
     </PressableModuleBase>
   ) : (
     <ModuleStatic>
@@ -101,16 +101,13 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
 const ModuleCheckoutSkeleton = () => (
   <ModuleStatic
     startBlock={
-      <React.Fragment>
-        {/* Rewrite it using HStack and VStack */}
+      <HStack space={8} style={{ alignItems: "center" }}>
         <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
-        <HSpacer size={8} />
-        <View>
+        <VStack space={8}>
           <Placeholder.Box animate="fade" radius={8} height={20} width={170} />
-          <VSpacer size={8} />
-          <Placeholder.Box animate="fade" radius={8} height={16} width={116} />
-        </View>
-      </React.Fragment>
+          <Placeholder.Box animate="fade" radius={8} height={16} width={110} />
+        </VStack>
+      </HStack>
     }
     endBlock={
       <Placeholder.Box animate="fade" width={64} height={16} radius={8} />
@@ -118,19 +115,10 @@ const ModuleCheckoutSkeleton = () => (
   />
 );
 
-const imageMarginRight: IOSpacingScale = 12;
-
 const styles = StyleSheet.create({
-  imageWrapper: {
-    marginRight: imageMarginRight
-  },
   image: {
     width: IOSelectionListItemVisualParams.iconSize,
     height: IOSelectionListItemVisualParams.iconSize,
     resizeMode: "contain"
-  },
-  content: {
-    flexGrow: 1,
-    flexShrink: 1
   }
 });