chore: [IOBP-368] Revamp wallet transaction detail page

locales/en/index.yml

@@ -3788,3 +3788,19 @@ fastLogin:
         description: every time a login with SPID or CIE is performed, we'll send you an e-mail to let you know.
 whatsNew:
   title: What's changed?
+transaction:
+  details:
+    title: Dettaglio operazione
+    totalAmount: Totale
+    totalFee: Il totale comprende 
+    totalFeePsp: di commissione, applicata da {{pspName}}
+    info:
+      title: Informazioni sulla transazione
+      pspName: Gestore della transazione (PSP)
+      dateAndHour: Data e ora
+      transactionId: ID transazione
+    operation:
+      amount: Importo
+      creditor: Ente creditore
+      debtor: Debitore
+      iuv: IUV

locales/it/index.yml

@@ -3788,3 +3788,19 @@ fastLogin:
         description: a ogni nuovo accesso con SPID o CIE, ti invieremo un’email.
 whatsNew:
   title: Cosa cambia?
+transaction:
+  details:
+    title: Dettaglio operazione
+    totalAmount: Totale
+    totalFee: Il totale comprende 
+    totalFeePsp: di commissione, applicata da {{pspName}}
+    info:
+      title: Informazioni sulla transazione
+      pspName: Gestore della transazione (PSP)
+      dateAndHour: Data e ora
+      transactionId: ID transazione
+    operation:
+      amount: Importo
+      creditor: Ente creditore
+      debtor: Debitore
+      iuv: IUV

ts/features/walletV3/common/saga/index.ts

@@ -9,6 +9,7 @@ import { isPagoPATestEnabledSelector } from "../../../../store/reducers/persiste
 import { createWalletClient } from "../api/client";
 import { watchWalletOnboardingSaga } from "../../onboarding/saga";
 import { watchWalletDetailsSaga } from "../../details/saga";
+import { watchWalletTransactionSaga } from "../../transaction/saga";
 
 export function* watchWalletV3Saga(bpdToken: string): SagaIterator {
   const isPagoPATestEnabled = yield* select(isPagoPATestEnabledSelector);
@@ -23,4 +24,6 @@ export function* watchWalletV3Saga(bpdToken: string): SagaIterator {
   yield* fork(watchWalletOnboardingSaga, client, token);
 
   yield* fork(watchWalletDetailsSaga, client, token);
+
+  yield* fork(watchWalletTransactionSaga, client, token);
 }

ts/features/walletV3/common/store/actions/index.ts

@@ -1,4 +1,8 @@
 import { WalletDetailsActions } from "../../../details/store/actions";
 import { WalletOnboardingActions } from "../../../onboarding/store/actions";
+import { WalletTransactionActions } from "../../../transaction/store/actions";
 
-export type WalletV3Actions = WalletOnboardingActions | WalletDetailsActions;
+export type WalletV3Actions =
+  | WalletOnboardingActions
+  | WalletDetailsActions
+  | WalletTransactionActions;

ts/features/walletV3/common/store/reducers/index.ts

@@ -5,15 +5,20 @@ import walletOnboardingReducer, {
 import walletDetailsReducer, {
   WalletDetailsState
 } from "../../../details/store";
+import walletTransactionReducer, {
+  WalletTransactionState
+} from "../../../transaction/store";
 
 export type WalletV3State = {
   onboarding: WalletOnboardingState;
   details: WalletDetailsState;
+  transaction: WalletTransactionState;
 };
 
 const walletV3Reducer = combineReducers({
   onboarding: walletOnboardingReducer,
-  details: walletDetailsReducer
+  details: walletDetailsReducer,
+  transaction: walletTransactionReducer
 });
 
 export default walletV3Reducer;

ts/features/walletV3/transaction/components/WalletTransactionDetailsList.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import { View } from "react-native";
+import Placeholder from "rn-placeholder";
+import {
+  HSpacer,
+  IOStyles,
+  ListItemTransaction,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import { Transaction } from "../../../../types/pagopa";
+import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
+import { Dettaglio } from "../../../../../definitions/pagopa/Dettaglio";
+import {
+  cleanTransactionDescription,
+  getTransactionIUV
+} from "../../../../utils/payment";
+
+type Props =
+  | {
+      transaction?: Transaction | null;
+      loading: boolean;
+      onPress: (operationDetails: Dettaglio) => void;
+    }
+  | {
+      transaction?: Transaction | null;
+      loading: true;
+      onPress: (operationDetails: Dettaglio) => void;
+    };
+
+/**
+ * This component renders a list of transaction details which currently is just a single item
+ * TODO: Using the actual information, this component is already arranged to handle a list that will be implemented from the BIZ Event implementation (https://pagopa.atlassian.net/browse/IOBP-440)
+ */
+export const WalletTransactionDetailsList = ({
+  transaction,
+  loading,
+  onPress
+}: Props) => {
+  if (loading) {
+    return <SkeletonTransactionDetailsList />;
+  }
+  if (!transaction) {
+    return <></>;
+  }
+
+  const operationDetails: Dettaglio = {
+    importo: transaction.amount.amount,
+    enteBeneficiario: transaction.merchant,
+    IUV: pipe(getTransactionIUV(transaction.description), O.toUndefined)
+  };
+
+  return (
+    <ListItemTransaction
+      title={cleanTransactionDescription(transaction.description)}
+      subtitle={transaction.merchant}
+      transactionStatus="success"
+      transactionAmount={formatNumberCentsToAmount(
+        transaction.amount.amount,
+        true,
+        "right"
+      )}
+      hasChevronRight
+      onPress={() => onPress?.(operationDetails)}
+    />
+  );
+};
+
+const SkeletonTransactionDetailsList = () => (
+  <View style={[IOStyles.flex, IOStyles.rowSpaceBetween, IOStyles.alignCenter]}>
+    <View style={[IOStyles.flex, { paddingVertical: 12 }]}>
+      <Placeholder.Box height={16} width="90%" radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box height={16} width="30%" radius={4} />
+    </View>
+    <Placeholder.Box height={16} width={48} radius={4} />
+    <HSpacer size={16} />
+    <Placeholder.Box height={16} width={16} radius={4} />
+  </View>
+);

ts/features/walletV3/transaction/components/WalletTransactionHeadingSection.tsx

@@ -0,0 +1,98 @@
+import { useNavigation } from "@react-navigation/native";
+import Placeholder from "rn-placeholder";
+import React from "react";
+import { View } from "react-native";
+import { Body, H1, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
+import { Psp, Transaction } from "../../../../types/pagopa";
+import { Dettaglio } from "../../../../../definitions/pagopa/Dettaglio";
+import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
+import I18n from "../../../../i18n";
+import {
+  WalletTransactionRoutes,
+  WalletTransactionStackNavigation
+} from "../navigation/navigator";
+
+import { WalletTransactionTotalAmount } from "./WalletTransactionTotalAmount";
+import { WalletTransactionDetailsList } from "./WalletTransactionDetailsList";
+
+type Props = {
+  transaction?: Transaction | null;
+  psp?: Psp;
+  loading: boolean;
+};
+
+export const WalletTransactionHeadingSection = ({
+  transaction,
+  psp,
+  loading
+}: Props) => {
+  const navigation = useNavigation<WalletTransactionStackNavigation>();
+
+  const handlePressTransactionDetails = (operationDetails: Dettaglio) => {
+    if (transaction) {
+      navigation.navigate(
+        WalletTransactionRoutes.WALLET_TRANSACTION_OPERATION_DETAILS,
+        {
+          operationDetails,
+          operationName: transaction?.description
+        }
+      );
+    }
+  };
+
+  const FeeAmountSection = () => {
+    if (psp && transaction && transaction.fee && !loading) {
+      const formattedFee = formatNumberCentsToAmount(
+        transaction.fee.amount,
+        true,
+        "right"
+      );
+      return (
+        <Body>
+          {I18n.t("transaction.details.totalFee")}{" "}
+          <Body weight="Medium">{formattedFee}</Body>{" "}
+          {I18n.t("transaction.details.totalFeePsp", {
+            pspName: psp.businessName || ""
+          })}
+          .
+        </Body>
+      );
+    }
+    if (loading) {
+      return (
+        <View style={IOStyles.flex}>
+          <VSpacer size={4} />
+          <Placeholder.Line width="100%" animate="fade" />
+          <VSpacer size={8} />
+          <Placeholder.Line width="50%" animate="fade" />
+        </View>
+      );
+    }
+    return <></>;
+  };
+
+  return (
+    <View
+      style={[
+        IOStyles.horizontalContentPadding,
+        IOStyles.flex,
+        IOStyles.bgWhite
+      ]}
+    >
+      <H1>{I18n.t("transaction.details.title")}</H1>
+      <VSpacer size={16} />
+      <WalletTransactionDetailsList
+        transaction={transaction}
+        loading={loading}
+        onPress={handlePressTransactionDetails}
+      />
+      <WalletTransactionTotalAmount
+        loading={loading}
+        totalAmount={transaction?.amount.amount}
+      />
+      <VSpacer size={8} />
+      <FeeAmountSection />
+      <VSpacer size={8} />
+    </View>
+  );
+};

ts/features/walletV3/transaction/components/WalletTransactionInfoSection.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable functional/immutable-data */
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import Placeholder from "rn-placeholder";
+import {
+  Divider,
+  IOColors,
+  IORadiusScale,
+  IOVisualCostants,
+  ListItemHeader,
+  ListItemInfo,
+  ListItemInfoCopy,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import { IOStyles } from "../../../../components/core/variables/IOStyles";
+import I18n from "../../../../i18n";
+import { Psp, Transaction } from "../../../../types/pagopa";
+import { format } from "../../../../utils/dates";
+import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard";
+import TransactionReceiptDivider from "../../../../../img/features/wallet/transaction-receipt-divider.svg";
+
+type WalletTransactionInfoSectionProps = {
+  transaction?: Transaction | null;
+  psp?: Psp;
+  loading?: boolean;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: IOColors["grey-50"]
+  },
+  contentCard: {
+    borderRadius: IORadiusScale["1"],
+    marginVertical: IOVisualCostants.appMarginDefault
+  }
+});
+
+/**
+ * Component that shows a success message after the wallet onboarding process is completed
+ * TODO: Define the desired design of this component
+ */
+const WalletTransactionInfoSection = ({
+  transaction,
+  psp,
+  loading
+}: WalletTransactionInfoSectionProps) => (
+  <>
+    <TransactionReceiptDivider
+      height={24}
+      width={"100%"}
+      preserveAspectRatio="xMin slice" // Add this property to fit the width to the parent
+    />
+    <View
+      style={[
+        IOStyles.horizontalContentPadding,
+        styles.container,
+        IOStyles.flex
+      ]}
+    >
+      <View
+        style={[
+          styles.contentCard,
+          IOStyles.horizontalContentPadding,
+          IOStyles.bgWhite
+        ]}
+      >
+        <ListItemHeader
+          label={I18n.t("transaction.details.info.title")}
+          accessibilityLabel={I18n.t("transaction.details.info.title")}
+        />
+        {loading && (
+          <>
+            <SkeletonItem />
+            <Divider />
+            <SkeletonItem />
+            <Divider />
+            <SkeletonItem />
+          </>
+        )}
+        {!loading && transaction && (
+          <>
+            {psp?.businessName && (
+              <>
+                <ListItemInfo
+                  accessibilityLabel={I18n.t(
+                    "transaction.details.info.pspName"
+                  )}
+                  label={I18n.t("transaction.details.info.pspName")}
+                  value={psp?.businessName}
+                />
+                <Divider />
+              </>
+            )}
+            <ListItemInfo
+              accessibilityLabel={I18n.t(
+                "transaction.details.info.dateAndHour"
+              )}
+              label={I18n.t("transaction.details.info.dateAndHour")}
+              value={format(transaction.created, "DD MMMM YYYY, HH:mm:ss")}
+            />
+            <Divider />
+            <ListItemInfoCopy
+              onPress={() =>
+                clipboardSetStringWithFeedback(transaction.id.toString())
+              }
+              accessibilityLabel={I18n.t(
+                "transaction.details.info.transactionId"
+              )}
+              label={I18n.t("transaction.details.info.transactionId")}
+              value={transaction.id.toString()}
+            />
+          </>
+        )}
+      </View>
+    </View>
+  </>
+);
+
+const SkeletonItem = () => (
+  <View style={[IOStyles.flex, { paddingVertical: 12 }]}>
+    <Placeholder.Box height={16} width="80%" radius={4} />
+    <VSpacer size={8} />
+    <Placeholder.Box height={16} width="25%" radius={4} />
+  </View>
+);
+
+export default WalletTransactionInfoSection;