From 4713bd2487e7b4d37362cb46f4c60ad8aa5c82d9 Mon Sep 17 00:00:00 2001
From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com>
Date: Tue, 3 Dec 2024 12:11:34 +0100
Subject: [PATCH] fix: [IOBP-1037] Remove asterisks from card transaction info
 (#6484)

## Short description
This pull request add a new utility function and its integration into
the `PaymentsBizEventsTransactionInfoSection` component to handle the
removal of asterisks from payment information


## List of changes proposed in this pull request
- Add `removeAsterisks` function that replaces asterisks in a given
string with an empty string
- Apply the new `removeAsterisks` utility function to the wallet
information to remove asterisks from the blurred number display

## How to test
- Mock a `blurredNumber` with some `*` and the card number at the end
- Verify that `*` are not render
---
 .../PaymentsBizEventsTransactionInfoSection.tsx        | 10 ++++++----
 .../payments/bizEventsTransaction/utils/index.ts       |  3 +++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx
index f0d6c12bc32..fb193ca0d20 100644
--- a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx
+++ b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx
@@ -25,7 +25,7 @@ import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard";
 import { format } from "../../../../utils/dates";
 import { capitalizeTextName } from "../../../../utils/strings";
 import { WalletTransactionReceiptDivider } from "../../transaction/components/WalletTransactionReceiptDivider";
-import { getPayerInfoLabel } from "../utils";
+import { getPayerInfoLabel, removeAsterisks } from "../utils";
 
 type PaymentsBizEventsTransactionInfoSectionProps = {
   transaction?: NoticeDetailResponse;
@@ -196,13 +196,15 @@ const renderPaymentMethod = (walletInfo: WalletInfo) => {
     return (
       <ListItemInfo
         label={I18n.t("transaction.details.info.paymentMethod")}
-        value={`${capitalize(walletInfo.brand)} •••• ${
+        value={`${capitalize(walletInfo.brand)} •••• ${removeAsterisks(
           walletInfo.blurredNumber
-        }`}
+        )}`}
         accessibilityLabel={I18n.t("wallet.methodDetails.a11y.credit.hpan", {
           circuit: walletInfo.brand,
           // we space the hpan to make the screen reader read it digit by digit
-          spacedHpan: walletInfo.blurredNumber.split("").join(" ")
+          spacedHpan: removeAsterisks(walletInfo.blurredNumber)
+            .split("")
+            .join(" ")
         })}
         paymentLogoIcon={walletInfo.brand as IOLogoPaymentType}
       />
diff --git a/ts/features/payments/bizEventsTransaction/utils/index.ts b/ts/features/payments/bizEventsTransaction/utils/index.ts
index e534609d895..22922dba7d6 100644
--- a/ts/features/payments/bizEventsTransaction/utils/index.ts
+++ b/ts/features/payments/bizEventsTransaction/utils/index.ts
@@ -141,3 +141,6 @@ export const restoreTransactionAtIndex = (
     restoreItem,
     ...transactions.slice(index)
   ]);
+
+export const removeAsterisks = (text: string): string =>
+  text.replace(/\*/g, "");