@pagopa/io-app-design-system 1.9.2 → 1.10.0

package/src/components/layout/HeaderSecondLevel.tsx

@@ -6,37 +6,62 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle
 } from "react-native-reanimated";
-import { IOColors, hexToRgba } from "../../core/IOColors";
-
 import {
   IOStyles,
   IOVisualCostants,
-  iconBtnSizeSmall
-} from "../../core/IOStyles";
+  iconBtnSizeSmall,
+  IOColors,
+  hexToRgba,
+  useIOExperimentalDesign
+} from "../../core";
 import { HSpacer } from "../spacer";
 import type { IOSpacer } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { makeFontStyleObject } from "../../utils/fonts";
 
-export type HeaderSecondLevel = WithTestID<{
-  scrollValues: ScrollValues;
+type ActionProp = Pick<
+  React.ComponentProps<typeof IconButton>,
+  "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint"
+>;
+
+type ScrollValues = {
+  contentOffsetY: Animated.SharedValue<number>;
+  triggerOffset: number;
+};
+
+type CommonProps = WithTestID<{
+  scrollValues?: ScrollValues;
   title: string;
   goBack: () => void;
   backAccessibilityLabel: string;
-  // Accepted components: IconButton
-  // Don't use any components other than this, please.
-  firstAction?: React.ReactNode;
-  secondAction?: React.ReactNode;
-  thirdAction?: React.ReactNode;
   // Visual attributes
   transparent?: boolean;
 }>;
 
-type ScrollValues = {
-  contentOffsetY: Animated.SharedValue<number>;
-  triggerOffset: number;
-};
+interface Base extends CommonProps {
+  type: "base";
+}
+
+interface OneAction extends CommonProps {
+  type: "singleAction";
+  firstAction: ActionProp;
+}
+
+interface TwoActions extends CommonProps {
+  type: "twoActions";
+  firstAction: ActionProp;
+  secondAction: ActionProp;
+}
+
+interface ThreeActions extends CommonProps {
+  type: "threeActions";
+  firstAction: ActionProp;
+  secondAction: ActionProp;
+  thirdAction: ActionProp;
+}
+
+export type HeaderSecondLevel = Base | OneAction | TwoActions | ThreeActions;
 
 const HEADER_BG_COLOR: IOColors = "white";
 const borderColorDisabled = hexToRgba(IOColors["grey-100"], 0);
@@ -54,98 +79,124 @@ const styles = StyleSheet.create({
     justifyContent: "space-between"
   },
   headerTitle: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
     fontSize: 14,
     textAlign: "center",
     flexGrow: 1,
     flexShrink: 1,
     marginHorizontal: titleHorizontalMargin
+  },
+  headerTitleFont: {
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  headerTitleLegacyFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
   }
 });
 
-export const HeaderSecondLevel = ({
-  scrollValues,
-  goBack,
-  backAccessibilityLabel,
-  title,
-  firstAction,
-  secondAction,
-  thirdAction,
-  transparent = false,
-  testID
-}: HeaderSecondLevel) => {
+/**
+ * HeaderSecondLevel component is used to display the header on pages on the second level of navigation.
+ * @param {HeaderSecondLevel} props - The props of the component
+ * @returns React Element
+ */
+export const HeaderSecondLevel = (props: HeaderSecondLevel) => {
+  const {
+    scrollValues = undefined,
+    goBack,
+    backAccessibilityLabel,
+    title,
+    type,
+    transparent = false,
+    testID
+  } = props;
+  const { isExperimental } = useIOExperimentalDesign();
   const insets = useSafeAreaInsets();
 
   const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: transparent
+    backgroundColor:
+      transparent && scrollValues
+        ? interpolateColor(
+            scrollValues.contentOffsetY.value,
+            [0, scrollValues.triggerOffset],
+            [headerTransparent, IOColors[HEADER_BG_COLOR]]
+          )
+        : IOColors[HEADER_BG_COLOR],
+    borderColor: scrollValues
       ? interpolateColor(
           scrollValues.contentOffsetY.value,
           [0, scrollValues.triggerOffset],
-          [headerTransparent, IOColors[HEADER_BG_COLOR]]
+          [borderColorDisabled, IOColors["grey-100"]]
         )
-      : undefined,
-    borderColor: interpolateColor(
-      scrollValues.contentOffsetY.value,
-      [0, scrollValues.triggerOffset],
-      [borderColorDisabled, IOColors["grey-100"]]
-    )
+      : "transparent"
   }));
 
   const titleAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      scrollValues.contentOffsetY.value,
-      [0, scrollValues.triggerOffset],
-      [0, 1]
-    )
+    opacity: scrollValues
+      ? interpolate(
+          scrollValues.contentOffsetY.value,
+          [0, scrollValues.triggerOffset],
+          [0, 1]
+        )
+      : 1
   }));
 
   return (
     <Animated.View
       accessibilityRole="header"
-      testID={testID}
-      style={[
-        { marginTop: insets.top },
-        styles.headerInner,
+      style={
         transparent
           ? { borderBottomWidth: 0 }
-          : { backgroundColor: IOColors[HEADER_BG_COLOR] },
-        headerWrapperAnimatedStyle
-      ]}
+          : { backgroundColor: IOColors[HEADER_BG_COLOR] }
+      }
     >
-      <IconButton
-        icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
-        color="neutral"
-        onPress={goBack}
-        accessibilityLabel={backAccessibilityLabel}
-      />
-      <Animated.Text
-        numberOfLines={1}
-        style={[styles.headerTitle, titleAnimatedStyle]}
+      <Animated.View
+        testID={testID}
+        style={[
+          { marginTop: insets.top },
+          styles.headerInner,
+          headerWrapperAnimatedStyle
+        ]}
       >
-        {title}
-      </Animated.Text>
-      <View style={[IOStyles.row, { flexShrink: 0 }]}>
-        {firstAction ? (
-          firstAction
-        ) : (
-          <HSpacer size={iconBtnSizeSmall as IOSpacer} />
-        )}
-        {secondAction && (
-          <>
-            {/* Ideally, with the "gap" flex property,
+        <IconButton
+          icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
+          color="neutral"
+          onPress={goBack}
+          accessibilityLabel={backAccessibilityLabel}
+        />
+        <Animated.Text
+          numberOfLines={1}
+          style={[
+            styles.headerTitle,
+            isExperimental
+              ? styles.headerTitleFont
+              : styles.headerTitleLegacyFont,
+            titleAnimatedStyle
+          ]}
+        >
+          {title}
+        </Animated.Text>
+        <View style={[IOStyles.row, { flexShrink: 0 }]}>
+          {type !== "base" ? (
+            <IconButton {...props.firstAction} color="neutral" />
+          ) : (
+            <HSpacer size={iconBtnSizeSmall as IOSpacer} />
+          )}
+          {(type === "twoActions" || type === "threeActions") && (
+            <>
+              {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
-            <HSpacer size={16} />
-            {secondAction}
-          </>
-        )}
-        {thirdAction && (
-          <>
-            {/* Same as above */}
-            <HSpacer size={16} />
-            {thirdAction}
-          </>
-        )}
-      </View>
+              <HSpacer size={16} />
+              <IconButton {...props.secondAction} color="neutral" />
+            </>
+          )}
+          {type === "threeActions" && (
+            <>
+              {/* Same as above */}
+              <HSpacer size={16} />
+              <IconButton {...props.thirdAction} color="neutral" />
+            </>
+          )}
+        </View>
+      </Animated.View>
     </Animated.View>
   );
 };

package/src/components/layout/index.tsx

@@ -3,3 +3,4 @@ export * from "./GradientBottomActions";
 export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
 export * from "./FooterWithButtons";
+export * from "./BlockButtons";

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { GestureResponderEvent, Switch, View } from "react-native";
+import {
+  ActivityIndicator,
+  GestureResponderEvent,
+  Switch,
+  View
+} from "react-native";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
@@ -10,6 +15,7 @@ import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
 import { H6, LabelSmall, LabelLink } from "../typography";
 import { NativeSwitch } from "../switch/NativeSwitch";
+import { Badge } from "../badge";
 
 type Props = {
   label: string;
@@ -17,6 +23,8 @@ type Props = {
   description?: string;
   icon?: IOIcons;
   action?: SwitchAction;
+  isLoading?: boolean;
+  badge?: Badge;
 };
 
 export type SwitchAction = {
@@ -37,6 +45,8 @@ export const ListItemSwitch = React.memo(
     value,
     disabled,
     action,
+    isLoading,
+    badge,
     onSwitchValueChange
   }: OwnProps) => {
     const theme = useIOTheme();
@@ -59,7 +69,7 @@ export const ListItemSwitch = React.memo(
             { alignItems: "center" }
           ]}
         >
-          <View style={{ flexShrink: 1 }}>
+          <View style={{ flex: 1 }}>
             <View style={[IOStyles.row, { flexShrink: 1 }]}>
               {icon && (
                 <View
@@ -74,9 +84,34 @@ export const ListItemSwitch = React.memo(
                   />
                 </View>
               )}
-              <H6 color={"black"} style={{ flexShrink: 1 }}>
-                {label}
-              </H6>
+              <View
+                style={{
+                  flex: 1,
+                  flexDirection: "row",
+                  alignContent: "space-between"
+                }}
+              >
+                <H6 color={"black"} style={{ flex: 1 }}>
+                  {label}
+                </H6>
+                <HSpacer size={8} />
+                <View>
+                  {badge && (
+                    <Badge
+                      text={badge.text}
+                      variant={badge.variant}
+                      testID={badge.testID}
+                    />
+                  )}
+                  {isLoading && <ActivityIndicator color={"black"} />}
+                  {!isLoading && !badge && (
+                    <NativeSwitch
+                      value={value}
+                      onValueChange={onSwitchValueChange}
+                    />
+                  )}
+                </View>
+              </View>
             </View>
             {description && (
               <>
@@ -97,11 +132,6 @@ export const ListItemSwitch = React.memo(
               </>
             )}
           </View>
-
-          <HSpacer size={8} />
-          <View style={{ flexShrink: 0, alignSelf: "flex-start" }}>
-            <NativeSwitch value={value} onValueChange={onSwitchValueChange} />
-          </View>
         </View>
       </View>
     );

package/src/components/modules/ModulePaymentNotice.tsx

@@ -0,0 +1,229 @@
+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 Placeholder from "rn-placeholder";
+import { WithTestID } from "../../utils/types";
+import { getAccessibleAmountText } from "../../utils/accessibility";
+import { H6, LabelSmall } from "../typography";
+import { Badge } from "../badge";
+import { Icon } from "../icons";
+import {
+  IOColors,
+  IOListItemVisualParams,
+  IOScaleValues,
+  IOSpringValues,
+  IOStyles,
+  useIOExperimentalDesign
+} from "../../core";
+import { VSpacer } from "../spacer";
+
+export type PaymentNoticeStatus =
+  | "default"
+  | "payed"
+  | "error"
+  | "expired"
+  | "revoked"
+  | "canceled";
+
+type Props = WithTestID<
+  {
+    isLoading?: boolean;
+    accessibilityLabel?: string;
+    title?: string;
+    subtitle: string;
+    onPress: (event: GestureResponderEvent) => void;
+  } & (
+    | {
+        paymentNoticeStatus: Extract<PaymentNoticeStatus, "default">;
+        paymentNoticeAmount: string;
+        badgeText?: never;
+      }
+    | {
+        paymentNoticeStatus: Exclude<PaymentNoticeStatus, "default">;
+        paymentNoticeAmount?: never;
+        badgeText: string;
+      }
+  )
+>;
+
+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",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+});
+
+const ModulePaymentNoticeContent = ({
+  title,
+  subtitle,
+  paymentNoticeStatus,
+  paymentNoticeAmount,
+  badgeText = ""
+}: Omit<Props, "isLoading" | "onPress" | "testID">) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const AmountOrBadgeComponent = () => {
+    switch (paymentNoticeStatus) {
+      case "default":
+        return (
+          <H6
+            accessibilityLabel={getAccessibleAmountText(paymentNoticeAmount)}
+            color={isExperimental ? "blueIO-500" : "blue"}
+          >
+            {paymentNoticeAmount}
+          </H6>
+        );
+      case "payed":
+        return <Badge variant="success" text={badgeText} />;
+      case "error":
+        return <Badge variant="error" text={badgeText} />;
+      case "expired":
+        return <Badge variant="default" text={badgeText} />;
+      case "revoked":
+        return <Badge variant="default" text={badgeText} />;
+      case "canceled":
+        return <Badge variant="default" text={badgeText} />;
+    }
+  };
+
+  return (
+    <>
+      <View style={{ flexGrow: 1, flexShrink: 1 }}>
+        {title && (
+          <LabelSmall numberOfLines={1} weight="Regular" color="bluegrey">
+            {title}
+          </LabelSmall>
+        )}
+        <LabelSmall
+          weight="SemiBold"
+          font={isExperimental ? "ReadexPro" : "TitilliumWeb"}
+          color={isExperimental ? "blueIO-500" : "bluegrey"}
+        >
+          {subtitle}
+        </LabelSmall>
+      </View>
+      <View style={[styles.rightSection, { flexShrink: 1 }]}>
+        <AmountOrBadgeComponent />
+        <Icon
+          name="chevronRightListItem"
+          color={isExperimental ? "blueIO-500" : "blue"}
+          size={IOListItemVisualParams.chevronSize}
+        />
+      </View>
+    </>
+  );
+};
+
+/**
+ * The `ModulePaymentNotice` component is a custom button component with an extended outline style.
+ * It provides an animated scaling effect when pressed.
+ *
+ * @param {boolean} isLoading - If true, displays a skeleton loading component.
+ * @param {function} onPress - The function to be executed when the item is pressed.
+ * @param {string} title - The title text to display.
+ * @param {string} subtitle - The subtitle text to display.
+ * @param {string} testID - The test ID for testing purposes.
+ * @param {string} paymentNoticeAmount - The payment notice amount to display.
+ * @param {string} paymentNoticeStatus - The status of the payment notice.
+ */
+export const ModulePaymentNotice = ({
+  isLoading = false,
+  testID,
+  accessibilityLabel,
+  onPress,
+  ...rest
+}: Props) => {
+  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}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={true}
+      accessibilityRole={"button"}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <Animated.View style={[styles.button, animatedStyle]}>
+        <ModulePaymentNoticeContent {...rest} />
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const SkeletonComponent = () => (
+  <View style={styles.button} accessible={false}>
+    <View style={IOStyles.flex}>
+      <Placeholder.Box animate="fade" radius={8} width={179} height={16} />
+      <VSpacer size={4} />
+      <Placeholder.Box animate="fade" radius={8} width={121} height={13} />
+    </View>
+    <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+      <Placeholder.Box animate="fade" radius={8} width={62} height={16} />
+    </View>
+  </View>
+);

package/src/components/modules/index.tsx

@@ -1 +1,2 @@
 export * from "./ModuleIDP";
+export * from "./ModulePaymentNotice";