@swan-io/shared-business 8.14.0 → 8.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "8.14.0",
+  "version": "8.14.2",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/InlineDatePicker.d.ts

@@ -5,6 +5,5 @@ export type InlineDatePickerProps = {
     onValueChange: (value: ExtractedDate) => void;
     error?: string;
     onBlur?: () => void;
-    order: "day-month-year" | "month-day-year";
 };
-export declare const InlineDatePicker: ({ value, label, onValueChange, error, onBlur, order, }: InlineDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineDatePicker: ({ value, label, onValueChange, error, onBlur, }: InlineDatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/InlineDatePicker.js

@@ -5,10 +5,12 @@ import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
 import { LakeSelect } from "@swan-io/lake/src/components/LakeSelect";
 import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
 import { Stack } from "@swan-io/lake/src/components/Stack";
-import { colors } from "@swan-io/lake/src/constants/design";
+import { breakpoints, colors } from "@swan-io/lake/src/constants/design";
+import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
 import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
 import { StyleSheet, View } from "react-native";
-import { t } from "../utils/i18n";
+import { match } from "ts-pattern";
+import { getCountry, t } from "../utils/i18n";
 const months = [
     { value: "01", name: t("datePicker.month.january") },
     { value: "02", name: t("datePicker.month.february") },
@@ -24,10 +26,18 @@ const months = [
     { value: "12", name: t("datePicker.month.december") },
 ];
 const styles = StyleSheet.create({
+    dayMobile: {
+        maxWidth: 70,
+        flexGrow: 0,
+    },
     day: {
         maxWidth: 90,
         flexGrow: 0,
     },
+    yearMobile: {
+        maxWidth: 80,
+        flexGrow: 0,
+    },
     year: {
         maxWidth: 120,
         flexGrow: 0,
@@ -36,9 +46,16 @@ const styles = StyleSheet.create({
         borderColor: colors.negative[400],
     },
 });
-export const InlineDatePicker = ({ value = { day: "", month: "", year: "" }, label, onValueChange, error, onBlur, order, }) => {
+// https://en.wikipedia.org/wiki/List_of_date_formats_by_country
+const order = match(getCountry().cca2)
+    .returnType()
+    .with("US", () => "MDY")
+    .with("CN", "JP", "KR", "KP", "TW", "HU", "MN", "LT", "BT", () => "YMD")
+    .otherwise(() => "DMY");
+export const InlineDatePicker = ({ value = { day: "", month: "", year: "" }, label, onValueChange, error, onBlur, }) => {
+    const { desktop } = useResponsive(breakpoints.small);
     return (_jsx(LakeLabel, { label: label, render: id => {
-            const day = (_jsx(View, { style: styles.day, children: _jsx(LakeTextInput, { id: id, style: isNotNullish(error) && styles.error, placeholder: t("datePicker.day"), value: value.day, onBlur: onBlur, hideErrors: true, onChangeText: day => {
+            const day = (_jsx(View, { style: desktop ? styles.day : styles.dayMobile, children: _jsx(LakeTextInput, { id: id, style: isNotNullish(error) && styles.error, placeholder: t("datePicker.day"), value: value.day, onBlur: onBlur, hideErrors: true, onChangeText: day => {
                         onValueChange({
                             day,
                             month: value.month,
@@ -52,11 +69,11 @@ export const InlineDatePicker = ({ value = { day: "", month: "", year: "" }, lab
                         year: value.year,
                     });
                 } }));
-            const year = (_jsx(View, { style: styles.year, children: _jsx(LakeTextInput, { value: value.year, style: isNotNullish(error) && styles.error, placeholder: t("datePicker.year"), onBlur: onBlur, hideErrors: true, onChangeText: year => onValueChange({
+            const year = (_jsx(View, { style: desktop ? styles.year : styles.yearMobile, children: _jsx(LakeTextInput, { value: value.year, style: isNotNullish(error) && styles.error, placeholder: t("datePicker.year"), onBlur: onBlur, hideErrors: true, onChangeText: year => onValueChange({
                         day: value.day,
                         month: value.month,
                         year,
                     }), pattern: "[0-9]", maxLength: 4, autoComplete: "bday-year" }) }));
-            return (_jsxs(Box, { children: [order === "day-month-year" ? (_jsxs(Stack, { direction: "row", space: 12, children: [day, " ", month, " ", year] })) : (_jsxs(Stack, { direction: "row", space: 12, children: [month, " ", day, " ", year] })), _jsx(InputError, { message: error })] }));
+            return (_jsxs(Box, { children: [order === "DMY" ? (_jsxs(Stack, { direction: "row", space: 4, children: [day, " ", month, " ", year] })) : (_jsxs(Stack, { direction: "row", space: 4, children: [month, " ", day, " ", year] })), _jsx(InputError, { message: error })] }));
         } }));
 };

package/src/locales/en.json

@@ -297,6 +297,6 @@
   "transactionStatement.title.debtor": "Debtor information",
   "transactionStatement.title.document": "Transaction confirmation",
   "transactionStatement.title.information": "Information",
-  "validation.invalidBirthDate": "Invalid birthdate",
+  "validation.invalidBirthDate": "Please enter your complete and valid birth date: month, day, and year",
   "validation.birthdateCannotBeFuture": "Birthdate cannot be in the future"
 }

package/src/utils/i18n.d.ts

@@ -1,6 +1,7 @@
 import { RifmProps } from "@swan-io/lake/src/utils/rifm";
 import { ReactElement, ReactNode } from "react";
 import type { DateFormat } from "../components/DatePicker";
+import { Country } from "../constants/countries";
 import translationEN from "../locales/en.json";
 declare const supportedLanguages: readonly ["en", "es", "de", "fr", "it", "nl", "pt", "fi"];
 type SupportedLanguage = (typeof supportedLanguages)[number];
@@ -21,4 +22,5 @@ export declare const formatNestedMessage: (key: TranslationKey, params: Record<s
 export declare const rifmDateProps: RifmProps;
 export declare const isTranslationKey: (value: unknown) => value is TranslationKey;
 export declare const translateError: (error: unknown) => string;
+export declare const getCountry: () => Country;
 export {};

package/src/utils/i18n.js

@@ -1,4 +1,5 @@
 import { createIntl, createIntlCache } from "@formatjs/intl";
+import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
 import { getRifmProps } from "@swan-io/lake/src/utils/rifm";
 import { BadStatusError } from "@swan-io/request";
 import dayjs from "dayjs";
@@ -16,6 +17,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import utc from "dayjs/plugin/utc";
 import { cloneElement, isValidElement } from "react";
 import { P, match } from "ts-pattern";
+import { countries, france } from "../constants/countries";
 import translationDE from "../locales/de.json";
 import translationEN from "../locales/en.json";
 import translationES from "../locales/es.json";
@@ -138,3 +140,17 @@ export const translateError = (error) => {
         .otherwise(() => "error.generic");
     return t(isTranslationKey(key) ? key : "error.generic");
 };
+export const getCountry = () => {
+    const navigatorCountries = navigator.languages
+        .map(language => language.split("-")[1])
+        .filter(isNotNullish);
+    for (let index = 0; index < navigatorCountries.length; index++) {
+        const navigatorCountry = navigatorCountries[index];
+        const country = countries.find(({ cca2 }) => cca2 === navigatorCountry);
+        if (isNotNullish(country)) {
+            return country;
+        }
+    }
+    // fallback to france when no valid country found in navigator locales
+    return france;
+};

package/src/utils/validation.js

@@ -106,7 +106,7 @@ export const validateIban = (iban) => {
 };
 export const validateBirthdate = (value) => {
     const date = dayjs.utc(formatExtractedDate(value), "YYYY-MM-DD", true);
-    const isBirthdateOver150years = date.isBefore(dayjs.utc().subtract(150, "years"));
+    const isBirthdateOver150years = date.isBefore(dayjs.utc().subtract(100, "years"));
     const isBirthdateWithin4years = date.isAfter(dayjs.utc().subtract(4, "years"));
     if (!date.isValid() || isBirthdateOver150years || isBirthdateWithin4years) {
         return t("validation.invalidBirthDate");