@swan-io/shared-business 13.1.3 → 13.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "13.1.3",
+  "version": "13.1.6",
   "engines": {
     "node": "^22.12.0"
   },
@@ -25,7 +25,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@swan-io/lake": "13.1.3"
+    "@swan-io/lake": "13.1.6"
   },
   "dependencies": {
     "@formatjs/intl": "^3.1.6",
@@ -50,6 +50,6 @@
     "@types/react-dom": "^19.1.7",
     "@types/react-native": "^0.72.8",
     "type-fest": "^4.41.0",
-    "@swan-io/lake": "13.1.3"
+    "@swan-io/lake": "13.1.6"
   }
 }

package/src/components/CreditStatement.d.ts

@@ -1,6 +1,6 @@
 import { StyleProp, ViewStyle } from "react-native";
 import { CountryCCA3 } from "../constants/countries";
-export type TransactionType = "SepaCreditTransfer" | "Fees" | "SepaDirectDebit" | "Card";
+export type TransactionType = "SepaCreditTransfer" | "SepaDirectDebit" | "Card";
 type AddressInfo = {
     addressLine1: string;
     addressLine2?: string;
@@ -20,6 +20,8 @@ type Transaction = {
     transactionType: TransactionType;
     transactionSide: "Credit" | "Debit";
     transactionAmount: Amount;
+    counterparty: string;
+    maskedPan?: string;
 };
 type CreditStatementV1Props = {
     version: "v1";
@@ -32,15 +34,13 @@ type CreditStatementV1Props = {
     bic: string;
     openingDate: string;
     closingDate: string;
-    openingBalance: Amount;
     transactions: Transaction[];
-    totalsCredit: Amount;
-    totalsDebit: Amount;
-    closingBalance: Amount;
-    feesDebit: Amount;
-    feesCredit: Amount;
+    issueDate: string;
+    issuerName: string;
+    siret: string;
+    repaymentDate: string;
 };
-export declare const CreditStatementV1: ({ partnerLogoUrl, accountHolderType, accountHolderName, accountHolderAddress, iban, bic, openingDate, closingDate, openingBalance, transactions, feesDebit, feesCredit, totalsCredit, totalsDebit, closingBalance, }: CreditStatementV1Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CreditStatementV1: ({ partnerLogoUrl, accountHolderType, accountHolderName, accountHolderAddress, iban, bic, openingDate, closingDate, transactions, issueDate, issuerName, siret, repaymentDate, }: CreditStatementV1Props) => import("react/jsx-runtime").JSX.Element;
 export type CreditStatementProps = CreditStatementV1Props;
 export declare const CreditStatement: (props: CreditStatementProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/CreditStatement.js

@@ -1,70 +1,60 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box } from "@swan-io/lake/src/components/Box";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
 import { Separator } from "@swan-io/lake/src/components/Separator";
 import { Space } from "@swan-io/lake/src/components/Space";
 import { SwanLogo } from "@swan-io/lake/src/components/SwanLogo";
-import { colors, fonts, invariantColors, primaryFontStyle, spacings, } from "@swan-io/lake/src/constants/design";
+import { colors, invariantColors, spacings } from "@swan-io/lake/src/constants/design";
 import { isNotNullish, isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
-import { StyleSheet, Text } from "react-native";
+import dayjs from "dayjs";
+import { printFormat } from "iban";
+import { StyleSheet } from "react-native";
 import { match } from "ts-pattern";
 import { getCountryName } from "../constants/countries";
-import { formatCurrencySymbol, t } from "../utils/i18n";
+import { formatNestedMessage, locale, t } from "../utils/i18n";
 const LOGO_MAX_HEIGHT = 24;
 const LOGO_MAX_WIDTH = 150;
-const getTextStyle = (type, fontSize) => ({
-    ...(type === "mono" ? { fontFamily: fonts.iban } : primaryFontStyle),
-    color: colors.gray[900],
-    fontSize,
-    lineHeight: fontSize * 1.25,
-    fontWeight: "400",
-});
 const styles = StyleSheet.create({
     container: {
         width: 793,
         padding: 56,
         backgroundColor: invariantColors.white,
     },
-    partnershipText: {
-        ...getTextStyle("sans", 14),
-        color: colors.gray[500],
+    address: {
+        fontSize: 13,
+    },
+    smallText: {
+        fontSize: 12,
+    },
+    mediumText: {
+        fontSize: 14,
+    },
+    subtitle: {
+        fontSize: 18,
+        fontWeight: "400",
     },
     pageTitle: {
-        ...getTextStyle("sans", 20),
+        fontSize: 20,
         color: colors.swan[500],
         fontWeight: "600",
     },
     sectionTitle: {
-        ...getTextStyle("sans", 14),
+        fontSize: 18,
         color: colors.swan[500],
-        fontWeight: "500",
-        lineHeight: 24,
-    },
-    totalAmount: {
-        ...getTextStyle("sans", 20),
-        lineHeight: 28,
         fontWeight: "600",
+        lineHeight: 24,
     },
     titleColumn: {
-        ...getTextStyle("sans", 15),
-        fontWeight: "500",
+        fontSize: 14,
+        fontWeight: "600",
         paddingVertical: spacings[4],
         minWidth: spacings[96],
         lineHeight: 24,
     },
-    openingBalanceText: {
-        ...getTextStyle("sans", 14),
-        textAlign: "right",
-    },
-    textColumn: {
-        ...getTextStyle("sans", 14),
-        color: "colors.gray[700]",
-        // lineHeight: 20,
-        paddingVertical: spacings[4],
-    },
     text: {
-        ...getTextStyle("sans", 14),
-        color: colors.gray[700],
+        fontSize: 13,
         lineHeight: 24,
+        textAlign: "right",
     },
     row: {
         textAlign: "right",
@@ -72,16 +62,6 @@ const styles = StyleSheet.create({
         fontWeight: "600",
         width: "20%",
     },
-    closingBalanceRow: {
-        ...getTextStyle("sans", 14),
-        backgroundColor: colors.gray[50],
-        width: "50%",
-    },
-    footer: {
-        ...getTextStyle("sans", 10),
-        color: colors.gray[500],
-        fontWeight: "300",
-    },
     defaultLogo: {
         height: LOGO_MAX_HEIGHT,
         width: (45 / 10) * LOGO_MAX_HEIGHT,
@@ -92,18 +72,11 @@ const styles = StyleSheet.create({
         position: "relative",
         top: 0.5,
     },
+    rightColumnContent: { width: "15%", textAlign: "right", fontWeight: "400" },
 });
-const Title = ({ text, align = "left", style, }) => (_jsx(Text, { style: [
-        styles.titleColumn,
-        style,
-        {
-            textAlign: align,
-        },
-    ], children: text }));
 const translateTransaction = (transaction) => {
     return match(transaction)
         .with("Card", () => t("accountStatement.card"))
-        .with("Fees", () => t("accountStatement.fees"))
         .with("SepaCreditTransfer", () => t("accountStatement.creditTransfer"))
         .with("SepaDirectDebit", () => t("accountStatement.directDebit"))
         .exhaustive();
@@ -114,20 +87,21 @@ const logoStyle = {
     objectFit: "contain",
     objectPosition: "left",
 };
-export const CreditStatementV1 = ({ partnerLogoUrl, accountHolderType, accountHolderName, accountHolderAddress, iban, bic, openingDate, closingDate, openingBalance, transactions, feesDebit, feesCredit, totalsCredit, totalsDebit, closingBalance, }) => {
-    return (_jsxs(Box, { style: styles.container, direction: "column", justifyContent: "spaceBetween", children: [_jsxs(Box, { children: [_jsx(Box, { direction: "row", justifyContent: "spaceBetween", children: _jsxs(Box, { direction: "row", alignItems: "center", children: [isNotNullishOrEmpty(partnerLogoUrl) ? (_jsx("img", { src: partnerLogoUrl, style: logoStyle })) : (_jsx(SwanLogo, { style: styles.defaultLogo })), _jsx(Separator, { horizontal: true, space: 8 }), _jsx(Text, { style: styles.partnershipText, children: t("accountStatement.partnership") }), _jsx(Space, { width: 4 }), _jsx(SwanLogo, { color: colors.gray[900], style: styles.swanLogo })] }) }), _jsx(Space, { height: 24 }), _jsx(Text, { style: styles.pageTitle, children: t("creditStatement.titleDocument") }), _jsx(Text, { style: styles.text, children: accountHolderType === "Company"
-                            ? t("accountStatement.titleDocument.companyDescription")
-                            : t("accountStatement.titleDocument.individualDescription") }), _jsx(Space, { height: 12 }), _jsxs(Box, { direction: "column", children: [_jsx(Text, { style: styles.sectionTitle, children: accountHolderName }), _jsx(Text, { style: styles.text, children: accountHolderAddress.addressLine1 }), isNotNullish(accountHolderAddress.addressLine2) && (_jsx(Text, { children: accountHolderAddress.addressLine2 })), _jsx(Text, { style: styles.text, children: `${accountHolderAddress.postalCode} ${accountHolderAddress.city}, ${getCountryName(accountHolderAddress.country)}` })] }), _jsx(Space, { height: 12 }), _jsx(Text, { style: styles.sectionTitle, children: t("accountStatement.iban") }), _jsx(Text, { style: styles.text, children: iban }), _jsx(Space, { height: 4 }), _jsx(Text, { style: styles.sectionTitle, children: t("accountStatement.bic") }), _jsx(Text, { style: styles.text, children: bic }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(Box, { direction: "column", justifyContent: "end", children: _jsx(Text, { style: styles.sectionTitle, children: t("accountStatement.date", { openingDate, closingDate }) }) }), _jsxs(Box, { direction: "column", children: [_jsx(Text, { style: styles.openingBalanceText, children: t("accountStatement.openingBalance") }), _jsx(Text, { style: styles.totalAmount, children: formatCurrencySymbol(Number(openingBalance.value), openingBalance.currency) })] })] }), _jsx(Space, { height: 24 }), _jsxs(_Fragment, { children: [_jsxs(Box, { direction: "row", children: [_jsx(Text, { style: [styles.titleColumn, { width: "15%" }], children: t("accountStatement.column.date") }), _jsx(Text, { style: [styles.titleColumn, { width: "22%" }], children: t("accountStatement.column.type") }), _jsx(Text, { style: [styles.titleColumn, { width: "33%" }], children: t("accountStatement.column.description") }), _jsx(Text, { style: [styles.titleColumn, { width: "15%", textAlign: "right" }], children: t("creditStatement.column.credit") }), _jsx(Text, { style: [styles.titleColumn, { width: "15%", textAlign: "right" }], children: t("creditStatement.column.debit") })] }), _jsx(Box, { direction: "column", children: transactions.map(({ transactionAmount, transactionDate, transactionLabel, transactionSide, transactionType, transactionId, }) => (_jsxs(Box, { direction: "row", children: [_jsx(Text, { style: [styles.textColumn, { width: "15%" }], children: transactionDate }), _jsx(Text, { style: [styles.textColumn, { width: "22%" }], children: translateTransaction(transactionType) }), _jsx(Text, { style: [styles.textColumn, { width: "33%" }], children: transactionLabel }), _jsx(Text, { style: [
-                                                styles.textColumn,
-                                                { width: "15%", textAlign: "right", fontWeight: "600" },
-                                            ], children: transactionSide === "Credit" ? transactionAmount.value : "" }), _jsx(Text, { style: [
-                                                styles.textColumn,
-                                                { width: "15%", textAlign: "right", fontWeight: "600" },
-                                            ], children: transactionSide === "Debit" ? transactionAmount.value : "" })] }, transactionId))) })] }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "column", children: [_jsxs(Box, { direction: "row", justifyContent: "end", children: [_jsx(Text, { style: [styles.row], children: t("accountStatement.column.fees") }), _jsx(Text, { style: [styles.row, { width: "15%" }], children: feesCredit.value }), _jsx(Text, { style: [styles.row, { width: "15%" }], children: feesDebit.value })] }), _jsx(Space, { height: 12 }), _jsxs(Box, { direction: "row", justifyContent: "end", children: [_jsx(Text, { style: styles.row, children: t("accountStatement.column.totals") }), _jsx(Text, { style: [styles.row, { width: "15%" }], children: totalsCredit.value }), _jsx(Text, { style: [styles.row, { width: "15%" }], children: totalsDebit.value })] })] }), _jsx(Space, { height: 12 }), _jsx(Box, { direction: "row", justifyContent: "end", children: _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", style: { width: "50%" }, children: [_jsx(Title, { align: "right", text: t("accountStatement.closingBalance"), style: { width: "40%" } }), _jsx(Title, { text: formatCurrencySymbol(Number(closingBalance.value), closingBalance.currency), style: {
-                                        width: "60%",
-                                        ...getTextStyle("sans", 20),
-                                        fontWeight: "600",
-                                    }, align: "right" })] }) })] }), _jsxs(Box, { children: [_jsx(Separator, { space: 24 }), _jsx(Text, { style: styles.footer, children: t("transactionStatement.footer") })] })] }));
+const formatMaskedPan = (value) => `••${value.slice(-4)}`;
+export const CreditStatementV1 = ({ partnerLogoUrl, accountHolderType, accountHolderName, accountHolderAddress, iban, bic, openingDate, closingDate, transactions, issueDate, issuerName, siret, repaymentDate, }) => {
+    return (_jsxs(Box, { style: styles.container, direction: "column", justifyContent: "spaceBetween", children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "start", children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [isNotNullishOrEmpty(partnerLogoUrl) ? (_jsx("img", { src: partnerLogoUrl, style: logoStyle })) : (_jsx(SwanLogo, { style: styles.defaultLogo })), _jsx(Separator, { horizontal: true, space: 8 }), _jsx(LakeText, { style: styles.mediumText, children: t("accountStatement.partnership") }), _jsx(Space, { width: 4 }), _jsx(SwanLogo, { color: colors.gray[900], style: styles.swanLogo })] }), _jsxs(Box, { children: [_jsx(LakeText, { style: styles.pageTitle, children: t("creditStatement.titleDocument") }), _jsx(LakeText, { style: styles.text, color: colors.gray[700], children: accountHolderType === "Company"
+                                    ? t("accountStatement.titleDocument.companyDescription")
+                                    : t("accountStatement.titleDocument.individualDescription") }), _jsx(LakeText, { align: "right", style: styles.smallText, children: t("creditStatement.issueDate", {
+                                    issueDate: dayjs(issueDate).format(locale.dateFormat),
+                                }) })] })] }), _jsx(Space, { height: 12 }), _jsxs(Box, { direction: "column", children: [_jsx(LakeText, { style: styles.sectionTitle, children: accountHolderName }), _jsx(Space, { height: 16 }), _jsx(LakeText, { style: styles.address, children: accountHolderAddress.addressLine1 }), isNotNullish(accountHolderAddress.addressLine2) && (_jsx(LakeText, { children: accountHolderAddress.addressLine2 })), _jsx(LakeText, { style: styles.address, children: `${accountHolderAddress.postalCode} ${accountHolderAddress.city}, ${getCountryName(accountHolderAddress.country)}` })] }), _jsx(Space, { height: 12 }), _jsxs(Box, { direction: "row", children: [_jsxs(Box, { direction: "column", grow: 1, children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { variant: "semibold", style: styles.mediumText, color: colors.gray[900], children: t("accountStatement.iban") }), _jsx(Space, { width: 4 }), _jsx(LakeText, { color: colors.gray[500], style: styles.mediumText, children: printFormat(iban) })] }), _jsx(Space, { height: 4 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { variant: "semibold", style: styles.mediumText, color: colors.gray[900], children: t("accountStatement.bic") }), _jsx(Space, { width: 4 }), _jsx(LakeText, { color: colors.gray[500], style: styles.mediumText, children: bic })] })] }), _jsxs(Box, { direction: "column", grow: 1, children: [_jsx(LakeText, { variant: "semibold", style: styles.mediumText, color: colors.gray[900], children: issuerName }), _jsx(Space, { height: 4 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { variant: "semibold", style: styles.mediumText, children: t("creditStatement.siret") }), _jsx(Space, { width: 4 }), _jsx(LakeText, { color: colors.gray[500], style: styles.mediumText, children: siret })] })] })] }), _jsx(Space, { height: 24 }), _jsx(LakeText, { color: colors.gray[500], style: styles.smallText, children: formatNestedMessage("creditStatement.additionalDetails", {
+                    bold: chunk => (_jsx(LakeText, { color: colors.gray[900], variant: "semibold", style: { fontSize: 12 }, children: chunk })),
+                    openingDate: dayjs(openingDate).format(locale.dateFormat),
+                    closingDate: dayjs(closingDate).format(locale.dateFormat),
+                    repaymentDate: dayjs(repaymentDate).format(locale.dateFormat),
+                }) }), _jsx(Space, { height: 24 }), _jsx(Box, { direction: "row", justifyContent: "spaceBetween", children: _jsx(Box, { direction: "column", justifyContent: "end", children: _jsx(LakeText, { style: styles.subtitle, color: colors.gray[900], children: t("accountStatement.date", {
+                            openingDate: dayjs(openingDate).format(locale.dateFormat),
+                            closingDate: dayjs(closingDate).format(locale.dateFormat),
+                        }) }) }) }), _jsx(Space, { height: 16 }), _jsxs(_Fragment, { children: [_jsxs(Box, { direction: "row", children: [_jsx(LakeText, { style: [styles.titleColumn, { width: "15%" }], color: colors.gray[700], children: t("accountStatement.column.date") }), _jsx(LakeText, { style: [styles.titleColumn, { width: "55%" }], color: colors.gray[700], children: t("accountStatement.column.description") }), _jsx(LakeText, { style: [styles.titleColumn, { width: "15%", textAlign: "right" }], color: colors.gray[700], children: t("creditStatement.column.debit") }), _jsx(LakeText, { style: [styles.titleColumn, { width: "15%", textAlign: "right" }], color: colors.gray[700], children: t("creditStatement.column.credit") })] }), _jsx(Space, { height: 12 }), _jsx(Box, { direction: "column", children: transactions.map(({ transactionAmount, transactionDate, transactionLabel, transactionSide, transactionType, transactionId, counterparty, maskedPan, }) => (_jsxs(_Fragment, { children: [_jsxs(Box, { direction: "row", children: [_jsx(LakeText, { style: [styles.smallText, { width: "15%" }], color: colors.gray[700], children: dayjs(transactionDate).format(locale.dateFormat) }), _jsxs(Box, { direction: "column", style: { width: "55%" }, children: [_jsx(LakeText, { style: styles.smallText, color: colors.gray[700], children: `${translateTransaction(transactionType)} ${transactionLabel}` }), _jsx(LakeText, { style: styles.smallText, color: colors.gray[500], children: `${counterparty} ${maskedPan ? formatMaskedPan(maskedPan) : ""}` })] }), _jsx(LakeText, { color: colors.gray[700], style: [styles.smallText, styles.rightColumnContent], children: transactionSide === "Debit" ? `- ${transactionAmount.value}` : "" }), _jsx(LakeText, { color: colors.gray[700], style: [styles.smallText, styles.rightColumnContent], children: transactionSide === "Credit" ? transactionAmount.value : "" })] }, transactionId), _jsx(Space, { height: 8 })] }))) })] }), _jsx(Space, { height: 24 })] }));
 };
 export const CreditStatement = (props) => match(props)
     .with({ version: "v1" }, props => _jsx(CreditStatementV1, { ...props }))

package/src/components/InlineDatePicker.js

@@ -15,6 +15,7 @@ import { match } from "ts-pattern";
 import { extractDate, formatExtractedDate } from "../utils/date";
 import { t } from "../utils/i18n";
 import { getMostLikelyUserCountry } from "../utils/localization";
+import { validateDate } from "../utils/validation";
 const months = [
     { value: "01", name: t("datePicker.month.january") },
     { value: "02", name: t("datePicker.month.february") },
@@ -57,7 +58,7 @@ const order = match(getMostLikelyUserCountry().cca2)
     .with("US", () => "MDY")
     .with("CN", "JP", "KR", "KP", "TW", "HU", "MN", "LT", "BT", () => "YMD")
     .otherwise(() => "DMY");
-export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange, validate = () => undefined, error: externalError, style, }) => {
+export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange, validate = validateDate, error: externalError, style, }) => {
     const { desktop } = useResponsive(breakpoints.small);
     // We can't rely on blurred, since 3 inputs / select are mapped on
     // 1 field. The first onBlur update the field internal state from
@@ -65,6 +66,7 @@ export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange
     // validate will not be triggered again since the field has already
     // blurred = true
     const touched = useRef(new Set());
+    const mountWithInitialValue = useRef(value != null);
     const { Field, validateField } = useForm({
         date: {
             initialValue: isNotNullish(value) ? extractDate(value) : undefined,
@@ -89,7 +91,8 @@ export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange
         },
     });
     const validateDate = () => {
-        if (touched.current.has("day") && touched.current.has("month") && touched.current.has("year")) {
+        if (mountWithInitialValue.current ||
+            (touched.current.has("day") && touched.current.has("month") && touched.current.has("year"))) {
             validateField("date");
         }
     };

package/src/locales/de.json

@@ -67,8 +67,11 @@
   "common.skipToContent": "Zum Inhalt springen",
   "copyButton.copiedTooltip": "In die Zwischenablage kopiert",
   "copyButton.copyTooltip": "Zum Kopieren anklicken",
+  "creditStatement.additionalDetails": "Der Kontoauszug vom <bold>{openingDate}</bold> bis <bold>{closingDate}</bold> enthält alle Gebühren und erhaltenen Zahlungen bis zum {closingDate}. Ihre nächste automatische Lastschrift erfolgt ab {repaymentDate}.\n\nIm Falle einer abgelehnten Bankabbuchung aufgrund unzureichender Mittel können wir diese Abbuchung mindestens <bold>3 bis 4 Tage</bold> nach der Benachrichtigung durch Ihre Bank erneut einreichen.",
   "creditStatement.column.credit": "Gutschrift",
   "creditStatement.column.debit": "Lastschrift",
+  "creditStatement.issueDate": "Ausgabedatum {issueDate}",
+  "creditStatement.siret": "SIRET",
   "creditStatement.titleDocument": "Rückzahlungsaufstellung",
   "datePicker.day": "Tag",
   "datePicker.day.friday": "Freitag",
@@ -111,10 +114,10 @@
   "fileTile.status.Refused": "Abgelehnt",
   "fileTile.status.Validated": "Validiert",
   "fileTile.uploading": "Hochladen…",
-  "monthlyPaymentVolume.between10000And50000": "Zwischen 10.000 und 50.000 €",
-  "monthlyPaymentVolume.between50000And100000": "Zwischen 50.000 und 100.000 €",
-  "monthlyPaymentVolume.lessThan10000": "Weniger als 10.000 €",
-  "monthlyPaymentVolume.moreThan100000": "Mehr als 100.000 €",
+  "monthlyPaymentVolume.between10000And50000": "Zwischen 10.000 und 50.000 € pro Monat",
+  "monthlyPaymentVolume.between50000And100000": "Zwischen 50.000 und 100.000 € pro Monat",
+  "monthlyPaymentVolume.lessThan10000": "Weniger als 10.000 € pro Monat",
+  "monthlyPaymentVolume.moreThan100000": "Mehr als 100.000 € pro Monat",
   "registrationPage.defaultNumberLabel": "Registrierungsnummer",
   "registrationPage.withOrganismLabel": "Ist Ihre Firma bereits im {organismName} eingetragen?",
   "registrationPage.withoutOrganismNameLabel": "Sind Sie registriert?",
@@ -407,5 +410,6 @@
   "transactionStatement.type.SepaInstantCreditTransferIn": "SEPA Sofortüberweisung erhalten",
   "transactionStatement.type.SepaInstantCreditTransferOut": "SEPA Sofortüberweisung gesendet",
   "validation.birthdateCannotBeFuture": "Geburtsdatum darf nicht in der Zukunft liegen",
-  "validation.invalidBirthDate": "Bitte geben Sie ein gültiges Geburtsdatum ein."
+  "validation.invalidBirthDate": "Bitte geben Sie ein gültiges Geburtsdatum ein.",
+  "validation.invalidDate": "Bitte geben Sie ein gültiges Datum ein."
 }

package/src/locales/en.json

@@ -24,6 +24,9 @@
   "creditStatement.titleDocument": "Repayment statement",
   "creditStatement.column.credit": "Credit",
   "creditStatement.column.debit": "Debit",
+  "creditStatement.issueDate": "Issue date {issueDate}",
+  "creditStatement.siret": "SIRET",
+  "creditStatement.additionalDetails": "The statement from <bold>{openingDate}</bold> to <bold>{closingDate}</bold> includes all fees and payments received up to {closingDate}. Your next automatic debit will occur starting from {repaymentDate}.\n\nIn the event of a rejected bank withdrawal due to insufficient funds, we may represent this withdrawal at least <bold>3 to 4 days</bold> after the rejection notified by your bank.",
   "addressFormPart.addressLabel": "Type your address",
   "addressFormPart.cityLabel": "City",
   "addressFormPart.placeholder": "Start typing…",
@@ -111,10 +114,10 @@
   "fileTile.status.Refused": "Refused",
   "fileTile.status.Validated": "Validated",
   "fileTile.uploading": "Uploading…",
-  "monthlyPaymentVolume.between10000And50000": "Between €10,000 and €50,000",
-  "monthlyPaymentVolume.between50000And100000": "Between €50,000 and €100,000",
-  "monthlyPaymentVolume.lessThan10000": "Less than €10,000",
-  "monthlyPaymentVolume.moreThan100000": "More than €100,000",
+  "monthlyPaymentVolume.between10000And50000": "Between €10,000 and €50,000 by month",
+  "monthlyPaymentVolume.between50000And100000": "Between €50,000 and €100,000 by month",
+  "monthlyPaymentVolume.lessThan10000": "Less than €10,000 by month",
+  "monthlyPaymentVolume.moreThan100000": "More than €100,000 by month",
   "registrationPage.defaultNumberLabel": "Registration number",
   "registrationPage.withOrganismLabel": "Are you registered to {organismName}?",
   "registrationPage.withoutOrganismNameLabel": "Are you registered?",
@@ -407,5 +410,6 @@
   "transactionStatement.type.SepaInstantCreditTransferIn": "SEPA Instant Credit Transfer received",
   "transactionStatement.type.SepaInstantCreditTransferOut": "SEPA Instant Credit Transfer sent",
   "validation.birthdateCannotBeFuture": "Birthdate cannot be in the future",
-  "validation.invalidBirthDate": "Please enter a valid birth date."
+  "validation.invalidBirthDate": "Please enter a valid birth date.",
+  "validation.invalidDate": "Please enter a valid date."
 }

package/src/locales/es.json

@@ -67,8 +67,11 @@
   "common.skipToContent": "Saltar al contenido",
   "copyButton.copiedTooltip": "Copiado al portapapeles",
   "copyButton.copyTooltip": "Haz clic para copiar",
+  "creditStatement.additionalDetails": "El estado de cuenta desde <bold>{openingDate}</bold> hasta <bold>{closingDate}</bold> incluye todas las comisiones y pagos recibidos hasta el {closingDate}. Tu próximo débito automático se realizará a partir del {repaymentDate}.\n\nEn caso de un rechazo de retiro bancario debido a fondos insuficientes, podemos representar este retiro al menos <bold>3 a 4 días</bold> después del rechazo notificado por tu banco.",
   "creditStatement.column.credit": "Crédito",
   "creditStatement.column.debit": "Débito",
+  "creditStatement.issueDate": "Fecha de emisión {issueDate}",
+  "creditStatement.siret": "SIRET",
   "creditStatement.titleDocument": "Estado de reembolso",
   "datePicker.day": "Día",
   "datePicker.day.friday": "Viernes",
@@ -111,10 +114,10 @@
   "fileTile.status.Refused": "Rechazado",
   "fileTile.status.Validated": "Validado",
   "fileTile.uploading": "Subiendo…",
-  "monthlyPaymentVolume.between10000And50000": "Entre 10 000 y 50 000 euros",
-  "monthlyPaymentVolume.between50000And100000": "Entre 50 000 y 100 000 euros",
-  "monthlyPaymentVolume.lessThan10000": "Menos de 10 000 euros",
-  "monthlyPaymentVolume.moreThan100000": "Más de 100 000 euros",
+  "monthlyPaymentVolume.between10000And50000": "Entre 10 000 y 50 000 euros por mes",
+  "monthlyPaymentVolume.between50000And100000": "Entre 50 000 y 100 000 euros por mes",
+  "monthlyPaymentVolume.lessThan10000": "Menos de 10 000 euros por mes",
+  "monthlyPaymentVolume.moreThan100000": "Más de 100 000 euros por mes",
   "registrationPage.defaultNumberLabel": "Número de registro",
   "registrationPage.withOrganismLabel": "¿Estás registrado en {organismName}?",
   "registrationPage.withoutOrganismNameLabel": "¿Estás registrado?",
@@ -407,5 +410,6 @@
   "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."
+  "validation.invalidBirthDate": "Por favor, introduce una fecha de nacimiento válida.",
+  "validation.invalidDate": "Por favor, introduce una fecha válida."
 }

package/src/locales/fi.json

@@ -67,8 +67,11 @@
   "common.skipToContent": "Ohita ja siirry sisältöön",
   "copyButton.copiedTooltip": "Kopioitu leikepöydälle",
   "copyButton.copyTooltip": "Kopioi napsauttamalla",
+  "creditStatement.additionalDetails": "Tiliote ajalta <bold>{openingDate}</bold> - <bold>{closingDate}</bold> sisältää kaikki maksut ja saapuneet maksut {closingDate} asti. Seuraava automaattinen veloitus tapahtuu {repaymentDate} alkaen.\n\nJos pankkisiirto hylätään riittämättömien varojen vuoksi, voimme edustaa tätä siirtoa vähintään <bold>3-4 päivää</bold> hylkäyksen jälkeen, jonka pankkisi on ilmoittanut.",
   "creditStatement.column.credit": "Hyvitys",
   "creditStatement.column.debit": "Velka",
+  "creditStatement.issueDate": "Päiväys {issueDate}",
+  "creditStatement.siret": "SIRET",
   "creditStatement.titleDocument": "Takaisinmaksuilmoitus",
   "datePicker.day": "Päivä",
   "datePicker.day.friday": "Perjantai",
@@ -111,10 +114,10 @@
   "fileTile.status.Refused": "Hylätty",
   "fileTile.status.Validated": "Vahvistettu",
   "fileTile.uploading": "Ladataan...",
-  "monthlyPaymentVolume.between10000And50000": "10 000 euron ja 50 000 euron välillä",
-  "monthlyPaymentVolume.between50000And100000": "50 000 euron ja 100 000 euron välillä",
-  "monthlyPaymentVolume.lessThan10000": "Vähemmän kuin 10 000 euroa",
-  "monthlyPaymentVolume.moreThan100000": "Enemmän kuin 100 000 euroa",
+  "monthlyPaymentVolume.between10000And50000": "10 000 euron ja 50 000 euron välillä per kuukausi",
+  "monthlyPaymentVolume.between50000And100000": "50 000 euron ja 100 000 euron välillä per kuukausi",
+  "monthlyPaymentVolume.lessThan10000": "Vähemmän kuin 10 000 euroa per kuukausi",
+  "monthlyPaymentVolume.moreThan100000": "Enemmän kuin 100 000 euroa per kuukausi",
   "registrationPage.defaultNumberLabel": "Rekisteröintinumero",
   "registrationPage.withOrganismLabel": "Oletko yrityksesi rekisteröity kohteeseen {organismName}?",
   "registrationPage.withoutOrganismNameLabel": "Onko yrityksesi rekisteröity?",
@@ -407,5 +410,6 @@
   "transactionStatement.type.SepaInstantCreditTransferIn": "SEPA Instant -tilisiirto vastaanotettu",
   "transactionStatement.type.SepaInstantCreditTransferOut": "SEPA Instant -tilisiirto lähetetty",
   "validation.birthdateCannotBeFuture": "Syntymäaika ei voi olla tulevaisuudessa",
-  "validation.invalidBirthDate": "Syötä syntymäaika oikeassa muodossa."
+  "validation.invalidBirthDate": "Syötä syntymäaika oikeassa muodossa.",
+  "validation.invalidDate": "Syötä kelvollinen päivämäärä."
 }

package/src/locales/fr.json

@@ -67,8 +67,11 @@
   "common.skipToContent": "Aller au contenu",
   "copyButton.copiedTooltip": "Copié dans le presse-papier",
   "copyButton.copyTooltip": "Cliquez pour copier",
+  "creditStatement.additionalDetails": "Le relevé du <bold>{openingDate}</bold> au <bold>{closingDate}</bold> inclut tous les frais et paiements reçus jusqu'au {closingDate}. Votre prochain prélèvement automatique débutera à partir du {repaymentDate}.\n\nEn cas de rejet de prélèvement bancaire pour insuffisance de fonds, nous pouvons représenter ce prélèvement au moins <bold>3 à 4 jours</bold> après le rejet notifié par votre banque.",
   "creditStatement.column.credit": "Crédit",
   "creditStatement.column.debit": "Débit",
+  "creditStatement.issueDate": "Date d'émission {issueDate}",
+  "creditStatement.siret": "SIRET",
   "creditStatement.titleDocument": "Relevé de remboursement",
   "datePicker.day": "Jour",
   "datePicker.day.friday": "Vendredi",
@@ -111,10 +114,10 @@
   "fileTile.status.Refused": "Refusé",
   "fileTile.status.Validated": "Validé",
   "fileTile.uploading": "Téléchargement…",
-  "monthlyPaymentVolume.between10000And50000": "Entre 10 000 € et 50 000 €",
-  "monthlyPaymentVolume.between50000And100000": "Entre 50 000 € et 100 000 €",
-  "monthlyPaymentVolume.lessThan10000": "Moins de 10 000 €",
-  "monthlyPaymentVolume.moreThan100000": "Plus de 100 000 €",
+  "monthlyPaymentVolume.between10000And50000": "Entre 10 000 € et 50 000 € par mois",
+  "monthlyPaymentVolume.between50000And100000": "Entre 50 000 € et 100 000 € par mois",
+  "monthlyPaymentVolume.lessThan10000": "Moins de 10 000 € par mois",
+  "monthlyPaymentVolume.moreThan100000": "Plus de 100 000 € par mois",
   "registrationPage.defaultNumberLabel": "Numéro d'immatriculation",
   "registrationPage.withOrganismLabel": "Êtes-vous immatriculé au {organismName}?",
   "registrationPage.withoutOrganismNameLabel": "Êtes-vous immatriculé?",
@@ -407,5 +410,6 @@
   "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 dans le futur",
-  "validation.invalidBirthDate": "Veuillez saisir une date de naissance valide."
+  "validation.invalidBirthDate": "Veuillez saisir une date de naissance valide.",
+  "validation.invalidDate": "Veuillez saisir une date valide."
 }

package/src/locales/it.json

@@ -67,8 +67,11 @@
   "common.skipToContent": "Salta al contenuto",
   "copyButton.copiedTooltip": "Copiato negli appunti",
   "copyButton.copyTooltip": "Clicca per copiare",
+  "creditStatement.additionalDetails": "Il rendiconto dal <bold>{openingDate}</bold> al <bold>{closingDate}</bold> include tutte le commissioni e i pagamenti ricevuti fino al {closingDate}. Il prossimo addebito automatico avverrà a partire dal {repaymentDate}.\n\nIn caso di mancato prelievo bancario a causa di fondi insufficienti, potremmo rappresentare questo prelievo almeno <bold>3 o 4 giorni</bold> dopo il rifiuto comunicato dalla tua banca.",
   "creditStatement.column.credit": "Credito",
   "creditStatement.column.debit": "Addebito",
+  "creditStatement.issueDate": "Data di emissione {issueDate}",
+  "creditStatement.siret": "SIRET",
   "creditStatement.titleDocument": "Riepilogo dei rimborsi",
   "datePicker.day": "Giorno",
   "datePicker.day.friday": "Venerdì",
@@ -111,10 +114,10 @@
   "fileTile.status.Refused": "Rifiutato",
   "fileTile.status.Validated": "Convalidato",
   "fileTile.uploading": "Caricamento…",
-  "monthlyPaymentVolume.between10000And50000": "Tra €10.000 e €50.000",
-  "monthlyPaymentVolume.between50000And100000": "Tra €50.000 e €100.000",
-  "monthlyPaymentVolume.lessThan10000": "Meno di €10.000",
-  "monthlyPaymentVolume.moreThan100000": "Più di €100.000",
+  "monthlyPaymentVolume.between10000And50000": "Tra €10.000 e €50.000 al mese",
+  "monthlyPaymentVolume.between50000And100000": "Tra €50.000 e €100.000 al mese",
+  "monthlyPaymentVolume.lessThan10000": "Meno di €10.000 al mese",
+  "monthlyPaymentVolume.moreThan100000": "Più di €100.000 al mese",
   "registrationPage.defaultNumberLabel": "Numero di registrazione",
   "registrationPage.withOrganismLabel": "È registrato a {organismName}?",
   "registrationPage.withoutOrganismNameLabel": "È registrato?",
@@ -407,5 +410,6 @@
   "transactionStatement.type.SepaInstantCreditTransferIn": "Bonifico istantaneo SEPA ricevuto",
   "transactionStatement.type.SepaInstantCreditTransferOut": "Bonifico istantaneo SEPA inviato",
   "validation.birthdateCannotBeFuture": "La data di nascita non può essere nel futuro",
-  "validation.invalidBirthDate": "Inserisci una data di nascita valida."
+  "validation.invalidBirthDate": "Inserisci una data di nascita valida.",
+  "validation.invalidDate": "Inserisci una data valida."
 }

package/src/locales/nl.json

@@ -67,8 +67,11 @@
   "common.skipToContent": "Doorgaan naar artikel",
   "copyButton.copiedTooltip": "Gekopieerd naar klembord",
   "copyButton.copyTooltip": "Klik om te kopiëren",
+  "creditStatement.additionalDetails": "Het overzicht van <bold>{openingDate}</bold> tot <bold>{closingDate}</bold> omvat alle kosten en ontvangen betalingen tot {closingDate}. Uw volgende automatische incasso zal starten vanaf {repaymentDate}.\n\nBij een geweigerde bankafschrijving wegens onvoldoende saldo, kunnen wij deze afschrijving op zijn vroegst <bold>3 tot 4 dagen</bold> na de melding van uw bank opnieuw aanbieden.",
   "creditStatement.column.credit": "Credit",
   "creditStatement.column.debit": "Debit",
+  "creditStatement.issueDate": "Uitgiftedatum {issueDate}",
+  "creditStatement.siret": "SIRET",
   "creditStatement.titleDocument": "Terugbetalingsverklaring",
   "datePicker.day": "Dag",
   "datePicker.day.friday": "Vrijdag",
@@ -111,10 +114,10 @@
   "fileTile.status.Refused": "Geweigerd",
   "fileTile.status.Validated": "Gevalideerd",
   "fileTile.uploading": "Bezig met uploaden…",
-  "monthlyPaymentVolume.between10000And50000": "€ 10.000,- tot € 50.000,-",
-  "monthlyPaymentVolume.between50000And100000": "€ 50.000,- tot € 100.000,-",
-  "monthlyPaymentVolume.lessThan10000": "Minder dan € 10.000,-",
-  "monthlyPaymentVolume.moreThan100000": "Meer dan € 100.000,-",
+  "monthlyPaymentVolume.between10000And50000": "€ 10.000,- tot € 50.000,- per maand",
+  "monthlyPaymentVolume.between50000And100000": "€ 50.000,- tot € 100.000,- per maand",
+  "monthlyPaymentVolume.lessThan10000": "Minder dan € 10.000,- per maand",
+  "monthlyPaymentVolume.moreThan100000": "Meer dan € 100.000,- per maand",
   "registrationPage.defaultNumberLabel": "Registratienummer",
   "registrationPage.withOrganismLabel": "Bent u geregistreerd bij {organismName}?",
   "registrationPage.withoutOrganismNameLabel": "Bent u geregistreerd?",
@@ -407,5 +410,6 @@
   "transactionStatement.type.SepaInstantCreditTransferIn": "SEPA Instant-overschrijving ontvangen",
   "transactionStatement.type.SepaInstantCreditTransferOut": "SEPA Instant-overschrijving verzonden",
   "validation.birthdateCannotBeFuture": "Geboortedatum kan niet in de toekomst liggen",
-  "validation.invalidBirthDate": "Voer een geldige geboortedatum in."
+  "validation.invalidBirthDate": "Voer een geldige geboortedatum in.",
+  "validation.invalidDate": "Voer alstublieft een geldige datum in."
 }

package/src/locales/pt.json

@@ -67,8 +67,11 @@
   "common.skipToContent": "Saltar para o conteúdo",
   "copyButton.copiedTooltip": "Copiado para a área de transferência",
   "copyButton.copyTooltip": "Clique para copiar",
+  "creditStatement.additionalDetails": "O extrato de <bold>{openingDate}</bold> a <bold>{closingDate}</bold> inclui todas as taxas e pagamentos recebidos até {closingDate}. Seu próximo débito automático ocorrerá a partir de {repaymentDate}.\n\nNo caso de uma retirada bancária rejeitada devido a fundos insuficientes, podemos representar esta retirada pelo menos <bold>3 a 4 dias</bold> após a rejeição notificada pelo seu banco.",
   "creditStatement.column.credit": "Crédito",
   "creditStatement.column.debit": "Débito",
+  "creditStatement.issueDate": "Data de emissão {issueDate}",
+  "creditStatement.siret": "SIRET",
   "creditStatement.titleDocument": "Declaração de reembolso",
   "datePicker.day": "Dia",
   "datePicker.day.friday": "Sexta-feira",
@@ -111,10 +114,10 @@
   "fileTile.status.Refused": "Recusado",
   "fileTile.status.Validated": "Validado",
   "fileTile.uploading": "Carregando…",
-  "monthlyPaymentVolume.between10000And50000": "Entre €10.000 e €50.000",
-  "monthlyPaymentVolume.between50000And100000": "Entre €50.000 e €100.000",
-  "monthlyPaymentVolume.lessThan10000": "Menos de €10.000",
-  "monthlyPaymentVolume.moreThan100000": "Mais de €100.000",
+  "monthlyPaymentVolume.between10000And50000": "Entre €10.000 e €50.000 por mês",
+  "monthlyPaymentVolume.between50000And100000": "Entre €50.000 e €100.000 por mês",
+  "monthlyPaymentVolume.lessThan10000": "Menos de €10.000 por mês",
+  "monthlyPaymentVolume.moreThan100000": "Mais de €100.000 por mês",
   "registrationPage.defaultNumberLabel": "Número de registo",
   "registrationPage.withOrganismLabel": "Está registado no {organismName}?",
   "registrationPage.withoutOrganismNameLabel": "Está registado?",
@@ -407,5 +410,6 @@
   "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, introduza uma data de nascimento válida."
+  "validation.invalidBirthDate": "Por favor, introduza uma data de nascimento válida.",
+  "validation.invalidDate": "Por favor, insira uma data válida."
 }

package/src/utils/validation.d.ts

@@ -10,4 +10,5 @@ export declare const validateIndividualTaxNumber: (accountCountry: AccountCountr
 export declare const validateCompanyTaxNumber: (accountCountry: AccountCountry) => Validator<string | undefined>;
 export { printFormat as printIbanFormat } from "iban";
 export declare const validateIban: (iban: string) => string | undefined;
+export declare const validateDate: (value: ExtractedDate | undefined) => string | undefined;
 export declare const validateBirthdate: (value: ExtractedDate | undefined) => string | undefined;

package/src/utils/validation.js

@@ -111,6 +111,15 @@ export const validateIban = (iban) => {
         return t("error.iban.invalid");
     }
 };
+export const validateDate = (value) => {
+    if (isNullish(value)) {
+        return t("validation.invalidDate");
+    }
+    const date = dayjs.utc(formatExtractedDate(value), "YYYY-MM-DD", true);
+    if (!date.isValid()) {
+        return t("validation.invalidDate");
+    }
+};
 export const validateBirthdate = (value) => {
     if (isNullish(value)) {
         return t("validation.invalidBirthDate");