Update transaction statements (#539)

swan-io · Sep 11, 2024 · e812213 · e812213
1 parent 6259f0a
commit e812213
Show file tree

Hide file tree

Showing 12 changed files with 155 additions and 26 deletions.
diff --git a/packages/lake/__stories__/TransactionStatement.stories.tsx b/packages/lake/__stories__/TransactionStatement.stories.tsx
@@ -17,11 +17,14 @@ export const Default = () => {
           partnerLogoUrl="https://s3.eu-west-1.amazonaws.com/data.master.oina.ws/7a90851b-40f8-479d-9e0e-86d12fb001b5/SANDBOX/logo-749a2fb5-230b-4ae6-98bd-65bdb3c987c9.png"
           generationDate="08/12/2024"
           executionDate="03/28/2024"
-          type="International credit transfer sent"
-          amount="12.00 EUR"
-          targetTransferAmount="10.25 GBP"
-          exchangeRate="1 EUR = 0,8548 GBP"
-          fees="1 EUR"
+          type="InternalCreditTransferOut"
+          amount={{ value: "12.00", currency: "EUR" }}
+          targetTransferAmount={{ value: "10.25", currency: "GBP" }}
+          exchangeRate={[
+            { value: "1.00", currency: "EUR" },
+            { value: "0.8548", currency: "GBP" },
+          ]}
+          fees={{ value: "1.00", currency: "EUR" }}
           label="Transfer to Alexandra ERZINGOVIVOVA"
           reference="12345-EIHJDKB-2849986398698-HLKHSFT"
           debtorName="Green co"

diff --git a/packages/lake/src/components/Separator.tsx b/packages/lake/src/components/Separator.tsx
@@ -1,19 +1,20 @@
 import { ReactNode } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
-import { colors } from "../constants/design";
 import { isNotNullish, isNullishOrEmpty } from "../utils/nullish";
 import { LakeText } from "./LakeText";
 import { Space, SpacingValue } from "./Space";
 
+const BACKGROUND_IMAGE = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAAD5Ip3+AAAADElEQVQIHWN48fwFAAVyArgPjAd5AAAAAElFTkSuQmCC")`;
+
 const styles = StyleSheet.create({
   horizontal: {
-    backgroundColor: colors.gray[100],
+    backgroundImage: BACKGROUND_IMAGE,
     width: 1,
     alignSelf: "stretch",
   },
   vertical: {
-    backgroundColor: colors.gray[100],
+    backgroundColor: BACKGROUND_IMAGE,
     height: 1,
     alignSelf: "stretch",
   },

diff --git a/packages/shared-business/src/components/TransactionStatement.tsx b/packages/shared-business/src/components/TransactionStatement.tsx
@@ -5,11 +5,11 @@ import { Space } from "@swan-io/lake/src/components/Space";
 import { Stack } from "@swan-io/lake/src/components/Stack";
 import { SwanLogo } from "@swan-io/lake/src/components/SwanLogo";
 import { colors, fonts, interFontStyle } from "@swan-io/lake/src/constants/design";
-import { isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
+import { isNotNullish, isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
 import { CSSProperties } from "react";
 import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from "react-native";
 import { match } from "ts-pattern";
-import { t } from "../utils/i18n";
+import { formatCurrency, t } from "../utils/i18n";
 
 const LOGO_MAX_HEIGHT = 24;
 const LOGO_MAX_WIDTH = 150;
@@ -24,9 +24,9 @@ const getTextStyle = (type: "sans" | "mono", fontSize: number): TextStyle => ({
 
 const styles = StyleSheet.create({
   container: {
-    height: 842,
-    width: 595,
-    padding: 42,
+    height: 1050,
+    width: 793,
+    padding: 56,
   },
   partnershipText: {
     ...getTextStyle("sans", 12),
@@ -83,18 +83,33 @@ const Line = ({ name, value }: EntryProps) => (
   </Box>
 );
 
+type Amount = {
+  value: string;
+  currency: string;
+};
+
+type TransactionType =
+  | "SepaCreditTransferIn"
+  | "SepaCreditTransferOut"
+  | "SepaInstantCreditTransferIn"
+  | "SepaInstantCreditTransferOut"
+  | "InternalCreditTransferIn"
+  | "InternalCreditTransferOut"
+  | "InternationalCreditTransferIn"
+  | "InternationalCreditTransferOut";
+
 type TransactionStatementV1Props = {
   version: "v1";
 
   partnerLogoUrl?: string;
   generationDate: string;
 
   executionDate: string;
-  type: string;
-  amount: string;
-  targetTransferAmount?: string;
-  exchangeRate?: string;
-  fees?: string;
+  type: TransactionType;
+  amount: Amount;
+  targetTransferAmount?: Amount;
+  exchangeRate?: [Amount, Amount];
+  fees?: Amount;
   label: string;
   reference: string;
 
@@ -166,22 +181,65 @@ export const TransactionStatementV1 = ({
 
       <Stack space={8}>
         <Line name={t("transactionStatement.information.executionDate")} value={executionDate} />
-        <Line name={t("transactionStatement.information.type")} value={type} />
-        <Line name={t("transactionStatement.information.amount")} value={amount} />
 
-        {isNotNullishOrEmpty(targetTransferAmount) && (
+        <Line
+          name={t("transactionStatement.information.type")}
+          value={match(type)
+            .with("SepaCreditTransferIn", () => t("transactionStatement.type.SepaCreditTransferIn"))
+            .with("SepaCreditTransferOut", () =>
+              t("transactionStatement.type.SepaCreditTransferOut"),
+            )
+            .with("SepaInstantCreditTransferIn", () =>
+              t("transactionStatement.type.SepaInstantCreditTransferIn"),
+            )
+            .with("SepaInstantCreditTransferOut", () =>
+              t("transactionStatement.type.SepaInstantCreditTransferOut"),
+            )
+            .with("InternalCreditTransferIn", () =>
+              t("transactionStatement.type.InternalCreditTransferIn"),
+            )
+            .with("InternalCreditTransferOut", () =>
+              t("transactionStatement.type.InternalCreditTransferOut"),
+            )
+            .with("InternationalCreditTransferIn", () =>
+              t("transactionStatement.type.InternationalCreditTransferIn"),
+            )
+            .with("InternationalCreditTransferOut", () =>
+              t("transactionStatement.type.InternationalCreditTransferOut"),
+            )
+            .exhaustive()}
+        />
+
+        <Line
+          name={t("transactionStatement.information.amount")}
+          value={formatCurrency(Number(amount.value), amount.currency)}
+        />
+
+        {isNotNullish(targetTransferAmount) && (
           <Line
             name={t("transactionStatement.information.targetTransferAmount")}
-            value={targetTransferAmount}
+            value={formatCurrency(
+              Number(targetTransferAmount.value),
+              targetTransferAmount.currency,
+            )}
           />
         )}
 
-        {isNotNullishOrEmpty(exchangeRate) && (
-          <Line name={t("transactionStatement.information.exchangeRate")} value={exchangeRate} />
+        {isNotNullish(exchangeRate) && (
+          <Line
+            name={t("transactionStatement.information.exchangeRate")}
+            value={`${formatCurrency(
+              Number(exchangeRate[0].value),
+              exchangeRate[0].currency,
+            )} : ${formatCurrency(Number(exchangeRate[1].value), exchangeRate[1].currency)}`}
+          />
         )}
 
-        {isNotNullishOrEmpty(fees) && (
-          <Line name={t("transactionStatement.information.fees")} value={fees} />
+        {isNotNullish(fees) && (
+          <Line
+            name={t("transactionStatement.information.fees")}
+            value={formatCurrency(Number(fees.value), fees.currency)}
+          />
         )}
 
         <Line name="Label" value={label} />

diff --git a/packages/shared-business/src/locales/de.json b/packages/shared-business/src/locales/de.json
@@ -297,6 +297,14 @@
   "transactionStatement.title.debtor": "Informationen zum Zahlungspflichtigen",
   "transactionStatement.title.document": "Transaktionsbestätigung",
   "transactionStatement.title.information": "Informationen",
+  "transactionStatement.type.InternalCreditTransferIn": "Interne Überweisung erhalten",
+  "transactionStatement.type.InternalCreditTransferOut": "Interne Überweisung gesendet",
+  "transactionStatement.type.InternationalCreditTransferIn": "Internationale Überweisung erhalten",
+  "transactionStatement.type.InternationalCreditTransferOut": "Internationale Überweisung gesendet",
+  "transactionStatement.type.SepaCreditTransferIn": "SEPA-Überweisung erhalten",
+  "transactionStatement.type.SepaCreditTransferOut": "SEPA-Überweisung gesendet",
+  "transactionStatement.type.SepaInstantCreditTransferIn": "SEPA Sofortüberweisung erhalten",
+  "transactionStatement.type.SepaInstantCreditTransferOut": "SEPA Sofortüberweisung gesendet",
   "validation.birthdateCannotBeFuture": "Geburtsdatum kann nicht in der Zukunft liegen.",
   "validation.invalidBirthDate": "Bitte geben Sie ein gültiges Geburtsdatum ein."
 }
diff --git a/packages/shared-business/src/locales/en.json b/packages/shared-business/src/locales/en.json
@@ -297,6 +297,14 @@
   "transactionStatement.title.debtor": "Debtor information",
   "transactionStatement.title.document": "Transaction confirmation",
   "transactionStatement.title.information": "Information",
+  "transactionStatement.type.SepaCreditTransferIn": "SEPA Credit Transfer received",
+  "transactionStatement.type.SepaCreditTransferOut": "SEPA Credit Transfer sent",
+  "transactionStatement.type.SepaInstantCreditTransferIn": "SEPA Instant Credit Transfer received",
+  "transactionStatement.type.SepaInstantCreditTransferOut": "SEPA Instant Credit Transfer sent",
+  "transactionStatement.type.InternalCreditTransferIn": "Internal Credit Transfer received",
+  "transactionStatement.type.InternalCreditTransferOut": "Internal Credit Transfer sent",
+  "transactionStatement.type.InternationalCreditTransferIn": "International Credit Transfer received",
+  "transactionStatement.type.InternationalCreditTransferOut": "International Credit Transfer sent",
   "validation.birthdateCannotBeFuture": "Birthdate cannot be in the future",
   "validation.invalidBirthDate": "Please enter a valid birth date."
 }
diff --git a/packages/shared-business/src/locales/es.json b/packages/shared-business/src/locales/es.json
@@ -297,6 +297,14 @@
   "transactionStatement.title.debtor": "Información del Deudor",
   "transactionStatement.title.document": "Confirmación de la transacción",
   "transactionStatement.title.information": "Información",
+  "transactionStatement.type.InternalCreditTransferIn": "Transferencia interna recibida",
+  "transactionStatement.type.InternalCreditTransferOut": "Transferencia interna enviada",
+  "transactionStatement.type.InternationalCreditTransferIn": "Transferencia internacional recibida",
+  "transactionStatement.type.InternationalCreditTransferOut": "Transferencia internacional enviada",
+  "transactionStatement.type.SepaCreditTransferIn": "Transferencia SEPA recibida",
+  "transactionStatement.type.SepaCreditTransferOut": "Transferencia SEPA enviada",
+  "transactionStatement.type.SepaInstantCreditTransferIn": "Transferencia SEPA Instantánea recibida",
+  "transactionStatement.type.SepaInstantCreditTransferOut": "Transferencia SEPA Instantánea enviada",
   "validation.birthdateCannotBeFuture": "La fecha de nacimiento no puede estar en el futuro",
   "validation.invalidBirthDate": "Por favor, introduce una fecha de nacimiento válida."
 }
diff --git a/packages/shared-business/src/locales/fi.json b/packages/shared-business/src/locales/fi.json
@@ -297,6 +297,14 @@
   "transactionStatement.title.debtor": "Velallisen tiedot",
   "transactionStatement.title.document": "Transaction confirmation",
   "transactionStatement.title.information": "Tiedot",
+  "transactionStatement.type.InternalCreditTransferIn": "Vastaanotettu sisäinen tilisiirto",
+  "transactionStatement.type.InternalCreditTransferOut": "Lähetetty sisäinen tilisiirto",
+  "transactionStatement.type.InternationalCreditTransferIn": "Vastaanotettu kansainvälinen tilisiirto",
+  "transactionStatement.type.InternationalCreditTransferOut": "Lähetetty kansainvälinen tilisiirto",
+  "transactionStatement.type.SepaCreditTransferIn": "Vastaanotettu SEPA-tilisiirto",
+  "transactionStatement.type.SepaCreditTransferOut": "Lähetetty SEPA-tilisiirto",
+  "transactionStatement.type.SepaInstantCreditTransferIn": "Vastaanotettu SEPA Instant -tilisiirto",
+  "transactionStatement.type.SepaInstantCreditTransferOut": "Lähetetty SEPA Instant -tilisiirto",
   "validation.birthdateCannotBeFuture": "Syntymäpäivä ei voi olla tulevaisuudessa",
   "validation.invalidBirthDate": "Syötä kelvollinen syntymäpäivä."
 }
diff --git a/packages/shared-business/src/locales/fr.json b/packages/shared-business/src/locales/fr.json
@@ -297,6 +297,14 @@
   "transactionStatement.title.debtor": "Informations sur le débiteur",
   "transactionStatement.title.document": "Confirmation de transaction",
   "transactionStatement.title.information": "Informations",
+  "transactionStatement.type.InternalCreditTransferIn": "Virement interne reçu",
+  "transactionStatement.type.InternalCreditTransferOut": "Virement interne envoyé",
+  "transactionStatement.type.InternationalCreditTransferIn": "Virement international reçu",
+  "transactionStatement.type.InternationalCreditTransferOut": "Virement international envoyé",
+  "transactionStatement.type.SepaCreditTransferIn": "Virement SEPA reçu",
+  "transactionStatement.type.SepaCreditTransferOut": "Virement SEPA envoyé",
+  "transactionStatement.type.SepaInstantCreditTransferIn": "Virement SEPA instantané reçu",
+  "transactionStatement.type.SepaInstantCreditTransferOut": "Virement SEPA instantané envoyé",
   "validation.birthdateCannotBeFuture": "La date de naissance ne peut pas être future",
   "validation.invalidBirthDate": "Veuillez saisir une date de naissance valide."
 }
diff --git a/packages/shared-business/src/locales/it.json b/packages/shared-business/src/locales/it.json
@@ -297,6 +297,14 @@
   "transactionStatement.title.debtor": "Informazioni debitore",
   "transactionStatement.title.document": "Conferma della transazione",
   "transactionStatement.title.information": "Informazioni",
+  "transactionStatement.type.InternalCreditTransferIn": "Bonifico interno ricevuto",
+  "transactionStatement.type.InternalCreditTransferOut": "Bonifico interno inviato",
+  "transactionStatement.type.InternationalCreditTransferIn": "Bonifico internazionale ricevuto",
+  "transactionStatement.type.InternationalCreditTransferOut": "Bonifico internazionale inviato",
+  "transactionStatement.type.SepaCreditTransferIn": "Bonifico SEPA ricevuto",
+  "transactionStatement.type.SepaCreditTransferOut": "Bonifico SEPA inviato",
+  "transactionStatement.type.SepaInstantCreditTransferIn": "Bonifico SEPA istantaneo ricevuto",
+  "transactionStatement.type.SepaInstantCreditTransferOut": "Bonifico SEPA istantaneo inviato",
   "validation.birthdateCannotBeFuture": "La data di nascita non può essere nel futuro",
   "validation.invalidBirthDate": "Inserisci una data di nascita valida."
 }
diff --git a/packages/shared-business/src/locales/nl.json b/packages/shared-business/src/locales/nl.json
@@ -297,6 +297,14 @@
   "transactionStatement.title.debtor": "Informatie over Debiteur",
   "transactionStatement.title.document": "Transactiebevestiging",
   "transactionStatement.title.information": "Informatie",
+  "transactionStatement.type.InternalCreditTransferIn": "Interne Overschrijving ontvangen",
+  "transactionStatement.type.InternalCreditTransferOut": "Interne Overschrijving verzonden",
+  "transactionStatement.type.InternationalCreditTransferIn": "Internationale Overschrijving ontvangen",
+  "transactionStatement.type.InternationalCreditTransferOut": "Internationale Overschrijving verzonden",
+  "transactionStatement.type.SepaCreditTransferIn": "SEPA Overschrijving ontvangen",
+  "transactionStatement.type.SepaCreditTransferOut": "SEPA Overschrijving verzonden",
+  "transactionStatement.type.SepaInstantCreditTransferIn": "SEPA Directe Overschrijving ontvangen",
+  "transactionStatement.type.SepaInstantCreditTransferOut": "SEPA Directe Overschrijving verzonden",
   "validation.birthdateCannotBeFuture": "Geboortedatum kan niet in de toekomst liggen",
   "validation.invalidBirthDate": "Voer alstublieft een geldige geboortedatum in."
 }
diff --git a/packages/shared-business/src/locales/pt.json b/packages/shared-business/src/locales/pt.json
@@ -297,6 +297,14 @@
   "transactionStatement.title.debtor": "Informações do devedor",
   "transactionStatement.title.document": "Confirmação da transação",
   "transactionStatement.title.information": "Informação",
+  "transactionStatement.type.InternalCreditTransferIn": "Transferência de crédito interna recebida",
+  "transactionStatement.type.InternalCreditTransferOut": "Transferência de crédito interna enviada",
+  "transactionStatement.type.InternationalCreditTransferIn": "Transferência de crédito internacional recebida",
+  "transactionStatement.type.InternationalCreditTransferOut": "Transferência de crédito internacional enviada",
+  "transactionStatement.type.SepaCreditTransferIn": "Transferência de crédito SEPA recebida",
+  "transactionStatement.type.SepaCreditTransferOut": "Transferência de crédito SEPA enviada",
+  "transactionStatement.type.SepaInstantCreditTransferIn": "Transferência de crédito instantânea SEPA recebida",
+  "transactionStatement.type.SepaInstantCreditTransferOut": "Transferência de crédito instantânea SEPA enviada",
   "validation.birthdateCannotBeFuture": "A data de nascimento não pode estar no futuro",
   "validation.invalidBirthDate": "Por favor, insira uma data de nascimento válida."
 }
diff --git a/packages/shared-business/src/utils/i18n.ts b/packages/shared-business/src/utils/i18n.ts
@@ -142,6 +142,9 @@ const intl = createIntl(
 export const t = (key: TranslationKey, params?: TranslationParams) =>
   intl.formatMessage({ id: key, defaultMessage: translationEN[key] }, params).toString();
 
+export const formatCurrency = (value: number, currency: string) =>
+  intl.formatNumber(value, { style: "currency", currency });
+
 export const formatNestedMessage = (
   key: TranslationKey,
   params: Record<string, string | number | ReactElement | ((children: ReactNode) => ReactNode)>,