List the beneficiary details through the transfer details

clients/banking/src/components/TransactionDetail.tsx

@@ -26,7 +26,7 @@ import {
  isNotNullishOrEmpty,
  isNullish,
 } from "@swan-io/lake/src/utils/nullish";
-import { CountryCCA3, countries } from "@swan-io/shared-business/src/constants/countries";
+import { getCountryByCCA3, isCountryCCA3 } from "@swan-io/shared-business/src/constants/countries";
 import { printIbanFormat } from "@swan-io/shared-business/src/utils/validation";
 import { printFormat } from "iban";
 import { useState } from "react";
@@ -42,6 +42,7 @@ import {
  getTransactionRejectedReasonLabel,
  getWiseIctLabel,
 } from "../utils/templateTranslations";
+import { concatSepaBeneficiaryAddress } from "./BeneficiaryDetail";
 import { DetailCopiableLine, DetailLine } from "./DetailLine";
 import { ErrorView } from "./ErrorView";
 import {
@@ -52,9 +53,13 @@ import {
 } from "./TransactionListCells";
 
 const styles = StyleSheet.create({
- container: {
+ fill: {
  ...commonStyles.fill,
  },
+ content: {
+ ...commonStyles.fill,
+ paddingVertical: spacings[24],
+ },
  tile: {
  alignItems: "center",
  },
@@ -89,7 +94,7 @@ type Props = {
  canViewAccount: boolean;
 };
 
-type Tab = "Details" | "MerchantInfo";
+type Tab = "details" | "beneficiary" | "merchantInfo";
 
 export const TransactionDetail = ({
  accountMembershipId,
@@ -110,7 +115,7 @@ export const TransactionDetail = ({
  { suspense },
  );
 
- const [activeTab, setActiveTab] = useState<Tab>("Details");
+ const [activeTab, setActiveTab] = useState<Tab>("details");
 
  if (data.isNotAsked() || data.isLoading()) {
  return <LoadingView />;
@@ -128,9 +133,23 @@ export const TransactionDetail = ({
  return <ErrorView />;
  }
 
+ const tabs: { id: Tab; label: string }[] = [
+ { id: "details", label: t("transaction.tabs.details") },
+
+ ...match(transaction)
+ .returnType<typeof tabs>()
+ .with({ __typename: "CardTransaction" }, () => [
+ { id: "merchantInfo", label: t("transaction.tabs.merchantInfo") },
+ ])
+ .with({ beneficiary: P.nonNullable }, () => [
+ { id: "beneficiary", label: t("transaction.tabs.beneficiary") },
+ ])
+ .otherwise(() => []),
+ ];
+
  return (
- <ScrollView contentContainerStyle={large ? commonStyles.fill : undefined}>
- <ListRightPanelContent large={large} style={styles.container}>
+ <ScrollView contentContainerStyle={large ? styles.fill : undefined}>
+ <ListRightPanelContent large={large} style={styles.fill}>
  <Tile
  style={styles.tile}
  footer={match(transaction)
@@ -296,36 +315,22 @@ export const TransactionDetail = ({
  </LakeHeading>
  </Tile>
 
- <Space height={24} />
-
- {match(transaction)
- .with(
- {
- __typename: "CardTransaction",
- },
- () => (
- <>
- <TabView
- activeTabId={activeTab}
- onChange={tab => setActiveTab(tab as Tab)}
- otherLabel={t("common.tabs.other")}
- tabs={
- [
- { id: "Details", label: t("transaction.tabs.details") },
- { id: "MerchantInfo", label: t("transaction.tabs.merchantInfo") },
- ] satisfies { id: Tab; label: string }[]
- }
- />
+ {tabs.length > 1 && (
+ <>
+ <Space height={24} />
 
- <Space height={24} />
- </>
- ),
- )
- .otherwise(() => null)}
+ <TabView
+ activeTabId={activeTab}
+ tabs={tabs}
+ onChange={tab => setActiveTab(tab as Tab)}
+ otherLabel={t("common.tabs.other")}
+ />
+ </>
+ )}
 
  {match(activeTab)
- .with("Details", () => (
- <ScrollView style={commonStyles.fill} contentContainerStyle={commonStyles.fill}>
+ .with("details", () => (
+ <ScrollView style={styles.fill} contentContainerStyle={styles.content}>
  {match(transaction.statusInfo)
  .with({ __typename: "BookedTransactionStatusInfo" }, ({ bookingDate }) => (
  <>
@@ -832,8 +837,56 @@ export const TransactionDetail = ({
  </ReadOnlyFieldList>
  </ScrollView>
  ))
- .with("MerchantInfo", () => (
- <ScrollView style={commonStyles.fill} contentContainerStyle={commonStyles.fill}>
+ .with("beneficiary", () => (
+ <ScrollView style={styles.fill} contentContainerStyle={styles.content}>
+ {match(transaction)
+ .with({ beneficiary: P.select(P.nonNullable) }, beneficiary => (
+ <ReadOnlyFieldList>
+ <DetailLine label={t("beneficiaries.details.name")} text={beneficiary.name} />
+
+ {match(beneficiary)
+ .with(
+ { __typename: "TrustedSepaBeneficiary" },
+ { __typename: "UnsavedSepaBeneficiary" },
+ ({ address, iban }) => (
+ <>
+ <DetailLine
+ label={t("beneficiaries.details.iban")}
+ text={printFormat(iban)}
+ />
+
+ {match(concatSepaBeneficiaryAddress(address))
+ .with(P.nonNullable, address => (
+ <DetailLine
+ label={t("beneficiaries.details.address")}
+ text={address}
+ />
+ ))
+ .otherwise(() => null)}
+ </>
+ ),
+ )
+ .with({ __typename: "TrustedInternationalBeneficiary" }, ({ details }) =>
+ details.map(detail => (
+ <DetailLine
+ key={detail.key}
+ label={getWiseIctLabel(detail.key)}
+ text={match(detail)
+ .with({ key: "IBAN" }, ({ value }) => printFormat(value))
+ .otherwise(({ value }) => value)}
+ />
+ )),
+ )
+ .otherwise(() => null)}
+ </ReadOnlyFieldList>
+ ))
+ .otherwise(() => (
+ <NotFoundPage />
+ ))}
+ </ScrollView>
+ ))
+ .with("merchantInfo", () => (
+ <ScrollView style={styles.fill} contentContainerStyle={styles.content}>
  {match(transaction)
  .with(
  {
@@ -847,14 +900,10 @@ export const TransactionDetail = ({
  const contactEmail = enrichedTransactionInfo.contactEmail;
  const contactPhone = enrichedTransactionInfo.contactPhone;
  const city = enrichedTransactionInfo.city ?? merchantCity;
- const countryCCA3 = (enrichedTransactionInfo.country ?? merchantCountry) as
- | CountryCCA3
- | null
- | undefined;
-
- const countryName = countries.find(
- country => country.cca3 === countryCCA3,
- )?.name;
+
+ const countryName = match(enrichedTransactionInfo.country ?? merchantCountry)
+ .with(P.when(isCountryCCA3), value => getCountryByCCA3(value).name)
+ .otherwise(() => undefined);
 
  return (
  <ReadOnlyFieldList>

clients/banking/src/graphql/partner.gql

@@ -106,6 +106,20 @@ fragment TransactionDetails on Transaction {
  name
  IBAN
  }
+ beneficiary {
+ __typename
+
+ ... on TrustedBeneficiary {
+ ...TrustedBeneficiaryDetails
+ }
+ ... on UnsavedSepaBeneficiary {
+ name
+ iban
+ address {
+ ...AddressDetails
+ }
+ }
+ }
  }
  ... on InternalDirectDebitTransaction {
  reservedAmount {
@@ -205,6 +219,15 @@ fragment TransactionDetails on Transaction {
  value
  }
  }
+ beneficiary {
+ name
+ currency
+ route
+ details {
+ key
+ value
+ }
+ }
  }
  ... on InternalCreditTransfer {
  creditor {
@@ -326,11 +349,7 @@ fragment TrustedBeneficiaryDetails on TrustedBeneficiary {
  ... on TrustedSepaBeneficiary {
  iban
  address {
- addressLine1
- addressLine2
- postalCode
- city
- country
+ ...AddressDetails
  }
  }
 }

clients/banking/src/locales/de.json

@@ -721,6 +721,7 @@
  "recurringTransfer.table.nextExecution": "Nächste Ausführung",
  "recurringTransfer.table.period": "Wiederholung",
  "recurringTransfer.table.recipient": "Empfänger",
+ "sandboxUser.impersonatedAs": "Als dargestellt",
  "supportingDocuments.AdministratorDecisionOfAppointment.description": "Beschluss über die Bestellung des Administrators",
  "supportingDocuments.AdministratorDecisionOfAppointment.title": "Beschluss über die Bestellung des Administrators",
  "supportingDocuments.AssociationRegistration.description": "Dieses Dokument sollte das Datum der Einreichung der Erklärung sowie den Titel, den Grund und die Adresse der Organisation enthalten.",
@@ -950,6 +951,7 @@
  "transaction.reservedUntil": "Reserviert bis",
  "transaction.rlmcKey": "RLMCKey",
  "transaction.subcategory": "Subkategorie",
+ "transaction.tabs.beneficiary": "Begünstigter",
  "transaction.tabs.details": "Details",
  "transaction.tabs.merchantInfo": "Händlerinfo",
  "transaction.website": "Webseite",
@@ -1259,4 +1261,4 @@
  "transfer.transfer": "Überweisung",
  "upcomingTransansactionList.noResults": "Keine bevorstehenden Transaktionen",
  "upcomingTransansactionList.noResultsDescription": "Es sind keine eingehenden oder ausgehenden Transaktionen im Gange."
-}
+}

clients/banking/src/locales/en.json

@@ -897,6 +897,7 @@
  "transaction.reservedUntil": "Reserved until",
  "transaction.rlmcKey": "RLMCKey",
  "transaction.subcategory": "Subcategory",
+ "transaction.tabs.beneficiary": "Beneficiary",
  "transaction.tabs.details": "Details",
  "transaction.tabs.merchantInfo": "Merchant info",
  "transaction.website": "Website",

clients/banking/src/locales/es.json

@@ -721,6 +721,7 @@
  "recurringTransfer.table.nextExecution": "Siguiente ejecución",
  "recurringTransfer.table.period": "Frecuencia",
  "recurringTransfer.table.recipient": "Destinatario",
+ "sandboxUser.impersonatedAs": "Suplantando a",
  "supportingDocuments.AdministratorDecisionOfAppointment.description": "Decisión de nombramiento de Administrador",
  "supportingDocuments.AdministratorDecisionOfAppointment.title": "Decisión de nombramiento de Administrador",
  "supportingDocuments.AssociationRegistration.description": "Este documento debe incluir la fecha en que se presentó la declaración, el nombre de la asociación, el motivo y la dirección de la asociación.",
@@ -950,6 +951,7 @@
  "transaction.reservedUntil": "Reservado hasta",
  "transaction.rlmcKey": "RLMCKey",
  "transaction.subcategory": "Subcategoría",
+ "transaction.tabs.beneficiary": "Beneficiario",
  "transaction.tabs.details": "Detalles",
  "transaction.tabs.merchantInfo": "Información del comerciante",
  "transaction.website": "Sitio web",
@@ -1259,4 +1261,4 @@
  "transfer.transfer": "Transferencia",
  "upcomingTransansactionList.noResults": "No hay operaciones próximas",
  "upcomingTransansactionList.noResultsDescription": "No hay operaciones entrantes ni salientes en curso."
-}
+}

clients/banking/src/locales/fi.json

@@ -721,6 +721,7 @@
  "recurringTransfer.table.nextExecution": "Seuraava suoritus",
  "recurringTransfer.table.period": "Toistuvuus",
  "recurringTransfer.table.recipient": "Vastaanottaja",
+ "sandboxUser.impersonatedAs": "Tekeydytty käyttäjäksi",
  "supportingDocuments.AdministratorDecisionOfAppointment.description": "Päättäjän nimittämispäätös",
  "supportingDocuments.AdministratorDecisionOfAppointment.title": "Päättäjän nimittämispäätös",
  "supportingDocuments.AssociationRegistration.description": "Tämän asiakirjan on sisällettävä ilmoituksen jättämisen päivämäärä sekä järjestön nimi, toimintaperuste ja osoite.",
@@ -950,6 +951,7 @@
  "transaction.reservedUntil": "Varattu seuraavaan päivämäärään asti",
  "transaction.rlmcKey": "RLMCKey",
  "transaction.subcategory": "Alakategoria",
+ "transaction.tabs.beneficiary": "Vastaanottaja",
  "transaction.tabs.details": "Yksityiskohdat",
  "transaction.tabs.merchantInfo": "Kauppiaan tiedot",
  "transaction.website": "Verkkosivusto",
@@ -1259,4 +1261,4 @@
  "transfer.transfer": "Siirto",
  "upcomingTransansactionList.noResults": "Ei tulevia tapahtumia",
  "upcomingTransansactionList.noResultsDescription": "Ei ole käynnissä olevia meneviä tai tulevia tapahtumia."
-}
+}

clients/banking/src/locales/fr.json

@@ -721,6 +721,7 @@
  "recurringTransfer.table.nextExecution": "Exécution suivante",
  "recurringTransfer.table.period": "Récurrence",
  "recurringTransfer.table.recipient": "Destinataire",
+ "sandboxUser.impersonatedAs": "Faites-vous passer pour",
  "supportingDocuments.AdministratorDecisionOfAppointment.description": "Décision de nomination de l'administrateur",
  "supportingDocuments.AdministratorDecisionOfAppointment.title": "Décision de nomination de l'administrateur",
  "supportingDocuments.AssociationRegistration.description": "Ce document doit contenir la date de dépôt de la déclaration, ainsi que le titre, la raison sociale et l'adresse de l'association.",
@@ -950,6 +951,7 @@
  "transaction.reservedUntil": "Réservé jusqu'à",
  "transaction.rlmcKey": "RLMCKey",
  "transaction.subcategory": "Sous-catégorie",
+ "transaction.tabs.beneficiary": "Bénéficiaire",
  "transaction.tabs.details": "Détails",
  "transaction.tabs.merchantInfo": "Infos commerçant",
  "transaction.website": "Site web",
@@ -1259,4 +1261,4 @@
  "transfer.transfer": "Virement",
  "upcomingTransansactionList.noResults": "Aucune transaction à venir",
  "upcomingTransansactionList.noResultsDescription": "Il n’y a pas de transactions entrantes ou sortantes en cours."
-}
+}

clients/banking/src/locales/it.json

@@ -721,6 +721,7 @@
  "recurringTransfer.table.nextExecution": "Prossima esecuzione",
  "recurringTransfer.table.period": "Periodicità",
  "recurringTransfer.table.recipient": "Beneficiario",
+ "sandboxUser.impersonatedAs": "Impersonato come",
  "supportingDocuments.AdministratorDecisionOfAppointment.description": "Decisione di nomina dell'Amministratore",
  "supportingDocuments.AdministratorDecisionOfAppointment.title": "Decisione di nomina dell'Amministratore",
  "supportingDocuments.AssociationRegistration.description": "Questo documento dovrebbe contenere la data di effettuazione della dichiarazione, oltre a titolo, motivo e indirizzo dell'associazione.",
@@ -950,6 +951,7 @@
  "transaction.reservedUntil": "Riservato fino a",
  "transaction.rlmcKey": "RLMCKey",
  "transaction.subcategory": "Sottocategoria",
+ "transaction.tabs.beneficiary": "Beneficiario",
  "transaction.tabs.details": "Dettagli",
  "transaction.tabs.merchantInfo": "Informazioni sul commerciante",
  "transaction.website": "Sito web",
@@ -1259,4 +1261,4 @@
  "transfer.transfer": "Bonifico",
  "upcomingTransansactionList.noResults": "Nessuna transazione in corso",
  "upcomingTransansactionList.noResultsDescription": "Non ci sono transazioni in entrata o in uscita."
-}
+}

clients/banking/src/locales/nl.json

@@ -721,6 +721,7 @@
  "recurringTransfer.table.nextExecution": "Volgende uitvoering",
  "recurringTransfer.table.period": "Herhaling",
  "recurringTransfer.table.recipient": "Begunstigde",
+ "sandboxUser.impersonatedAs": "Geïmpersonaliseerd als",
  "supportingDocuments.AdministratorDecisionOfAppointment.description": "Besluit tot benoeming van de administrateur",
  "supportingDocuments.AdministratorDecisionOfAppointment.title": "Besluit tot benoeming van de administrateur",
  "supportingDocuments.AssociationRegistration.description": "Dit document moet de aangiftedatum bevatten, en de naam van de vereniging, de reden en het adres.",
@@ -950,6 +951,7 @@
  "transaction.reservedUntil": "Gereserveerd tot",
  "transaction.rlmcKey": "RLMCKey",
  "transaction.subcategory": "Subcategorie",
+ "transaction.tabs.beneficiary": "Begunstigde",
  "transaction.tabs.details": "Details",
  "transaction.tabs.merchantInfo": "Winkelinfo",
  "transaction.website": "Website",
@@ -1259,4 +1261,4 @@
  "transfer.transfer": "Overschrijving",
  "upcomingTransansactionList.noResults": "Geen aanstaande transacties",
  "upcomingTransansactionList.noResultsDescription": "Er zijn geen inkomende of uitgaande transacties in behandeling."
-}
+}