chore: [IOBP-695] Add banner of service to payments home screen

locales/en/index.yml

@@ -3063,6 +3063,8 @@ features:
   payments:
     title: Payments
     cta: Paga un avviso
+    remoteAlert:
+      cta: Scopri di più
     methods:
       title: Metodi di pagamento
       button: Aggiungi

locales/it/index.yml

@@ -3063,6 +3063,8 @@ features:
   payments:
     title: Pagamenti
     cta: Paga un avviso
+    remoteAlert:
+      cta: Scopri di più
     methods:
       title: Metodi di pagamento
       button: Aggiungi

package.json

@@ -3,7 +3,7 @@
   "version": "2.62.0-rc.2",
   "io_backend_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.39.1-RELEASE/api_backend.yaml",
   "io_public_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.39.1-RELEASE/api_public.yaml",
-  "io_content_specs": "https://raw.githubusercontent.com/pagopa/io-services-metadata/1.0.32/definitions.yml",
+  "io_content_specs": "https://raw.githubusercontent.com/pagopa/io-services-metadata/1.0.33/definitions.yml",
   "io_cgn_specs": "https://raw.githubusercontent.com/pagopa/io-backend/v13.39.1-RELEASE/api_cgn.yaml",
   "io_cgn_merchants_specs": "https://raw.githubusercontent.com/pagopa/io-backend/v13.39.1-RELEASE/api_cgn_operator_search.yaml",
   "api_fci": "https://raw.githubusercontent.com/pagopa/io-backend/v13.39.1-RELEASE/api_io_sign.yaml",

ts/features/payments/common/utils/index.ts

@@ -19,6 +19,8 @@ import { findFirstCaseInsensitive } from "../../../../utils/object";
 import { WalletCard } from "../../../newWallet/types";
 import { contentRepoUrl } from "../../../../config";
 import { TransactionListItem } from "../../../../../definitions/pagopa/biz-events/TransactionListItem";
+import { LevelEnum } from "../../../../../definitions/content/SectionStatus";
+import { AlertVariant } from "./types";
 
 export const TRANSACTION_LOGO_CDN = `${contentRepoUrl}/logos/organizations`;
 
@@ -194,3 +196,20 @@ export const mapWalletsToCards = (
  */
 export const formatPaymentNoticeNumber = (noticeNumber: string) =>
   noticeNumber.replace(/(\d{4})/g, "$1  ").trim();
+
+/**
+ * Function that returns the alert variant based on the given LevelEnum provided
+ * by the backend config file
+ */
+export const getAlertVariant = (level: LevelEnum): AlertVariant => {
+  switch (level) {
+    case LevelEnum.critical:
+      return "error";
+    case LevelEnum.normal:
+      return "info";
+    case LevelEnum.warning:
+      return "warning";
+    default:
+      return "info";
+  }
+};

ts/features/payments/common/utils/types.ts

@@ -0,0 +1 @@
+export type AlertVariant = "error" | "success" | "warning" | "info";

ts/features/payments/home/components/PaymentsAlertStatus.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { constVoid } from "fp-ts/lib/function";
+import { Alert } from "@pagopa/io-app-design-system";
+import Animated, { FadeIn, FadeOut, Layout } from "react-native-reanimated";
+import { GestureResponderEvent } from "react-native";
+import I18n from "../../../../i18n";
+import { useIOSelector } from "../../../../store/hooks";
+import { sectionStatusSelector } from "../../../../store/reducers/backendStatus";
+import { getFullLocale } from "../../../../utils/locale";
+import { openWebUrl } from "../../../../utils/url";
+import { getAlertVariant } from "../../common/utils";
+
+export const PaymentsAlertStatus = () => {
+  const alertInfo = useIOSelector(sectionStatusSelector("payments"));
+  if (!alertInfo || !alertInfo.is_visible) {
+    return null;
+  }
+
+  const actionLabel = alertInfo.web_url
+    ? I18n.t("features.payments.remoteAlert.cta")
+    : undefined;
+
+  const handleOnPressAlertStatusInfo = (_: GestureResponderEvent) => {
+    if (alertInfo && alertInfo.web_url && alertInfo.web_url[getFullLocale()]) {
+      openWebUrl(alertInfo.web_url[getFullLocale()]);
+    }
+  };
+
+  return (
+    <Animated.View
+      entering={FadeIn.duration(200)}
+      exiting={FadeOut.duration(200)}
+      layout={Layout.duration(200)}
+    >
+      <Alert
+        content={alertInfo.message[getFullLocale()]}
+        variant={getAlertVariant(alertInfo.level)}
+        action={actionLabel}
+        onPress={
+          alertInfo.web_url ? handleOnPressAlertStatusInfo : () => constVoid
+        }
+      />
+    </Animated.View>
+  );
+};

ts/features/payments/home/screens/PaymentsHomeScreen.tsx

@@ -1,5 +1,6 @@
 import { GradientScrollView } from "@pagopa/io-app-design-system";
 import * as React from "react";
+import Animated, { Layout } from "react-native-reanimated";
 import { ScrollView } from "react-native";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
@@ -13,6 +14,7 @@ import {
   isPaymentsSectionEmptySelector,
   isPaymentsSectionLoadingSelector
 } from "../store/selectors";
+import { PaymentsAlertStatus } from "../components/PaymentsAlertStatus";
 
 const PaymentsHomeScreen = () => {
   const navigation = useIONavigation();
@@ -28,6 +30,15 @@ const PaymentsHomeScreen = () => {
     });
   };
 
+  const AnimatedPaymentsHomeScreenContent = React.useCallback(
+    () => (
+      <Animated.View layout={Layout.duration(200)}>
+        <PaymentsHomeScreenContent />
+      </Animated.View>
+    ),
+    []
+  );
+
   if (isTransactionsEmpty) {
     return (
       <ScrollView
@@ -36,7 +47,8 @@ const PaymentsHomeScreen = () => {
           flexGrow: 1
         }}
       >
-        <PaymentsHomeScreenContent />
+        <PaymentsAlertStatus />
+        <AnimatedPaymentsHomeScreenContent />
       </ScrollView>
     );
   }
@@ -57,7 +69,8 @@ const PaymentsHomeScreen = () => {
       }
       excludeSafeAreaMargins={true}
     >
-      <PaymentsHomeScreenContent />
+      <PaymentsAlertStatus />
+      <AnimatedPaymentsHomeScreenContent />
     </GradientScrollView>
   );
 };