chore(Bonus Pagamenti Digitali): [#176069568] Why other cards?

locales/en/index.yml

@@ -1944,6 +1944,10 @@ bonus:
           body: "You have added these payment methods to the cashback directly from the channels made available by your bank or payments app. You can activate or deactivate the collection of transactions of these methods also from IO. \n
                  If you want to use some of these methods to pay via IO as well, add them to your wallet! "
           addWallet: "Add to wallet"
+          whyOtherCards:
+            title: "Why am I seeing cards that I don't recognize?"
+            body: "Don't worry, these are virtual versions of your cards that Apple, Google and Samsung use to protect your purchases made through their 'wallets'. We are working with those involved in the initiative to improve the display on the app IO of this type of cards. "
+            cta: "Find out more"
         notActivable:
           header: "Not available or incompatible"
           title: "Method not available"

locales/it/index.yml

@@ -1975,6 +1975,10 @@ bonus:
           body: "Hai aggiunto al Cashback questi metodi di pagamento direttamente dai canali messi a disposizione dalla tua banca o app di pagamenti. Puoi attivare o disattivare la registrazione delle transazioni di questi metodi anche da IO.\n
                  Se vuoi usare alcuni di questi metodi anche per pagare tramite IO, aggiungili al tuo portafoglio!"
           addWallet: "Aggiungi al portafoglio"
+          whyOtherCards:
+            title: "Perché vedo carte che non riconosco?"
+            body: "Non preoccuparti, si tratta delle versioni virtuali delle tue carte che Apple, Google e Samsung utilizzano per proteggere i tuoi acquisti effettuati tramite i loro ‘wallet’. Stiamo lavorando con i soggetti coinvolti nell’iniziativa per migliorare la visualizzazione sull’app IO di questo tipo di carte."
+            cta: "Scopri di più"
         notActivable:
           header: "Non attivabili o non compatibili"
           title: "Metodo non attivabile"

ts/features/bonus/bpd/components/paymentMethodActivationToggle/list/PaymentMethodGroupedList.tsx

@@ -3,11 +3,12 @@ import * as React from "react";
 import { StyleSheet } from "react-native";
 import { Body } from "../../../../../../components/core/typography/Body";
 import { H4 } from "../../../../../../components/core/typography/H4";
+import { Link } from "../../../../../../components/core/typography/Link";
 import I18n from "../../../../../../i18n";
 import { EnableableFunctionsTypeEnum } from "../../../../../../types/pagopa";
-import { PaymentMethodWithActivation } from "../../../store/reducers/details/combiner";
-import { Link } from "../../../../../../components/core/typography/Link";
 import { hasFunctionEnabled } from "../../../../../../utils/walletv2";
+import { useWhyOtherCardsBottomSheet } from "../../../screens/details/components/bottomsheet/WhyOtherCards";
+import { PaymentMethodWithActivation } from "../../../store/reducers/details/combiner";
 import { useOtherChannelInformationBottomSheet } from "../bottomsheet/OtherChannelInformation";
 import { PaymentMethodRawList } from "./PaymentMethodRawList";
 
@@ -40,7 +41,8 @@ const clusterizePaymentMethods = (
 const OtherChannelsSection = (props: {
   paymentMethods: ReadonlyArray<PaymentMethodWithActivation>;
 }) => {
-  const { present } = useOtherChannelInformationBottomSheet();
+  const presentOtherChannel = useOtherChannelInformationBottomSheet().present;
+  const presentWhyOthersCard = useWhyOtherCardsBottomSheet().present;
 
   return (
     <View>
@@ -56,12 +58,18 @@ const OtherChannelsSection = (props: {
             )}
           </H4>
         </Body>
-        <Link onPress={present}>
+        <Link onPress={presentOtherChannel}>
           {I18n.t("global.buttons.info").toLowerCase()}
         </Link>
       </View>
       <View spacer={true} />
       <PaymentMethodRawList paymentList={props.paymentMethods} />
+      <View spacer={true} />
+      <Link onPress={presentWhyOthersCard}>
+        {I18n.t(
+          "bonus.bpd.details.paymentMethods.activateOnOthersChannel.whyOtherCards.title"
+        )}
+      </Link>
     </View>
   );
 };

ts/features/bonus/bpd/screens/details/components/bottomsheet/WhyOtherCards.tsx

@@ -0,0 +1,58 @@
+import { View } from "native-base";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import ButtonDefaultOpacity from "../../../../../../../components/ButtonDefaultOpacity";
+import { Body } from "../../../../../../../components/core/typography/Body";
+import { Link } from "../../../../../../../components/core/typography/Link";
+import { IOColors } from "../../../../../../../components/core/variables/IOColors";
+import I18n from "../../../../../../../i18n";
+import { useIOBottomSheet } from "../../../../../../../utils/bottomSheet";
+import { openWebUrl } from "../../../../../../../utils/url";
+
+const styles = StyleSheet.create({
+  link: {
+    backgroundColor: IOColors.white,
+    borderColor: IOColors.white,
+    paddingRight: 0,
+    paddingLeft: 0
+  }
+});
+
+const findOutMore = "https://io.italia.it/cashback/faq/#n31";
+
+/**
+ * Explains why there are other cards
+ * @constructor
+ */
+export const WhyOtherCards = () => (
+  <View>
+    <View spacer={true} />
+    <View style={{ flex: 1 }}>
+      <Body>
+        {I18n.t(
+          "bonus.bpd.details.paymentMethods.activateOnOthersChannel.whyOtherCards.body"
+        )}
+      </Body>
+      <ButtonDefaultOpacity
+        onPress={() => openWebUrl(findOutMore)}
+        onPressWithGestureHandler={true}
+        style={styles.link}
+      >
+        <Link>
+          {I18n.t(
+            "bonus.bpd.details.paymentMethods.activateOnOthersChannel.whyOtherCards.cta"
+          )}
+        </Link>
+      </ButtonDefaultOpacity>
+    </View>
+  </View>
+);
+
+export const useWhyOtherCardsBottomSheet = () =>
+  useIOBottomSheet(
+    <WhyOtherCards />,
+    I18n.t(
+      "bonus.bpd.details.paymentMethods.activateOnOthersChannel.whyOtherCards.title"
+    ),
+    300
+  );