@swan-io/shared-business 8.13.0 → 8.14.0

package/package.json

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

package/src/components/ChoicePicker.js

@@ -112,11 +112,14 @@ export const ChoicePicker = ({ tile = true, items, getId = identity, large = fal
             return;
         }
         // auto scroll to selected value on mobile
-        const scrollContainer = containerRef.current;
+        const container = containerRef.current;
+        if (container == null) {
+            return;
+        }
         const index = items.findIndex(item => value === item);
-        if (index !== -1 && scrollContainer instanceof HTMLDivElement) {
-            const width = scrollContainer.offsetWidth;
-            scrollContainer.scrollTo({ x: index * width, animated: false });
+        if (index !== -1 && container.element != null) {
+            const width = container.element.offsetWidth;
+            container.scrollTo({ x: index * width, animated: false });
         }
         // if no value is selected, select first item
         if (value == null && items[0] != null) {
@@ -129,10 +132,13 @@ export const ChoicePicker = ({ tile = true, items, getId = identity, large = fal
         if (desktop) {
             return;
         }
-        const scrollContainer = containerRef.current;
-        if (scrollContainer instanceof HTMLDivElement) {
-            const scrollLeft = scrollContainer.scrollLeft;
-            const width = scrollContainer.offsetWidth;
+        const container = containerRef.current;
+        if (container == null) {
+            return;
+        }
+        if (container.element != null) {
+            const scrollLeft = container.element.scrollLeft;
+            const width = container.element.offsetWidth;
             const index = clampValue(0, items.length - 1)(Math.round(scrollLeft / width));
             const item = items[index];
             if (item != null) {
@@ -146,37 +152,43 @@ export const ChoicePicker = ({ tile = true, items, getId = identity, large = fal
     };
     const onPressPrevious = () => {
         var _a;
-        const scrollContainer = containerRef.current;
-        if (scrollContainer instanceof HTMLDivElement) {
-            const scrollLeft = scrollContainer.scrollLeft;
-            const width = scrollContainer.offsetWidth;
+        const container = containerRef.current;
+        if (container == null) {
+            return;
+        }
+        if (container.element != null) {
+            const scrollLeft = container.element.scrollLeft;
+            const width = container.element.offsetWidth;
             const index = Math.round(scrollLeft / width);
             const previousIndex = Math.max(0, index - 1);
             // remove scroll snap during scroll animation to avoid weird behavior on older browsers
-            scrollContainer.style.scrollSnapType = "none";
+            container.element.style.scrollSnapType = "none";
             (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ x: previousIndex * width, animated: true });
-            detectScrollAnimationEnd(scrollContainer).onResolve(() => {
+            detectScrollAnimationEnd(container.element).onResolve(() => {
                 // set back scroll snap
                 // @ts-expect-error
-                scrollContainer.style.scrollSnapType = null;
+                container.element.style.scrollSnapType = null;
             });
         }
     };
     const onPressNext = () => {
         var _a;
-        const scrollContainer = containerRef.current;
-        if (scrollContainer instanceof HTMLDivElement) {
-            const scrollLeft = scrollContainer.scrollLeft;
-            const width = scrollContainer.offsetWidth;
+        const container = containerRef.current;
+        if (container == null) {
+            return;
+        }
+        if (container.element != null) {
+            const scrollLeft = container.element.scrollLeft;
+            const width = container.element.offsetWidth;
             const index = Math.round(scrollLeft / width);
             const nextIndex = Math.min(items.length - 1, index + 1);
             // remove scroll snap during scroll animation to avoid weird behavior on older browsers
-            scrollContainer.style.scrollSnapType = "none";
+            container.element.style.scrollSnapType = "none";
             (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ x: nextIndex * width, animated: true });
-            detectScrollAnimationEnd(scrollContainer).onResolve(() => {
+            detectScrollAnimationEnd(container.element).onResolve(() => {
                 // set back scroll snap
                 // @ts-expect-error
-                scrollContainer.style.scrollSnapType = null;
+                container.element.style.scrollSnapType = null;
             });
         }
     };

package/src/components/InlineDatePicker.d.ts

@@ -0,0 +1,10 @@
+import { ExtractedDate } from "../utils/date";
+export type InlineDatePickerProps = {
+    label: string;
+    value: ExtractedDate | undefined;
+    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;

package/src/components/InlineDatePicker.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { InputError } from "@swan-io/lake/src/components/InputError";
+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 { isNotNullish } from "@swan-io/lake/src/utils/nullish";
+import { StyleSheet, View } from "react-native";
+import { t } from "../utils/i18n";
+const months = [
+    { value: "01", name: t("datePicker.month.january") },
+    { value: "02", name: t("datePicker.month.february") },
+    { value: "03", name: t("datePicker.month.march") },
+    { value: "04", name: t("datePicker.month.april") },
+    { value: "05", name: t("datePicker.month.may") },
+    { value: "06", name: t("datePicker.month.june") },
+    { value: "07", name: t("datePicker.month.july") },
+    { value: "08", name: t("datePicker.month.august") },
+    { value: "09", name: t("datePicker.month.september") },
+    { value: "10", name: t("datePicker.month.october") },
+    { value: "11", name: t("datePicker.month.november") },
+    { value: "12", name: t("datePicker.month.december") },
+];
+const styles = StyleSheet.create({
+    day: {
+        maxWidth: 90,
+        flexGrow: 0,
+    },
+    year: {
+        maxWidth: 120,
+        flexGrow: 0,
+    },
+    error: {
+        borderColor: colors.negative[400],
+    },
+});
+export const InlineDatePicker = ({ value = { day: "", month: "", year: "" }, label, onValueChange, error, onBlur, order, }) => {
+    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 => {
+                        onValueChange({
+                            day,
+                            month: value.month,
+                            year: value.year,
+                        });
+                    }, pattern: "[0-9]", maxLength: 2, autoComplete: "bday-day" }) }));
+            const month = (_jsx(LakeSelect, { value: value.month === "" ? undefined : value.month, style: isNotNullish(error) && styles.error, placeholder: t("datePicker.month"), hideErrors: true, items: months, onValueChange: month => {
+                    onValueChange({
+                        day: value.day,
+                        month,
+                        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({
+                        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 })] }));
+        } }));
+};

package/src/locales/en.json

@@ -40,6 +40,7 @@
   "common.skipToContent": "Skip to content",
   "copyButton.copiedTooltip": "Copied to clipboard",
   "copyButton.copyTooltip": "Click to copy",
+  "datePicker.day": "Day",
   "datePicker.day.friday": "Friday",
   "datePicker.day.monday": "Monday",
   "datePicker.day.saturday": "Saturday",
@@ -47,6 +48,7 @@
   "datePicker.day.thursday": "Thursday",
   "datePicker.day.tuesday": "Tuesday",
   "datePicker.day.wednesday": "Wednesday",
+  "datePicker.month": "Month",
   "datePicker.month.april": "April",
   "datePicker.month.august": "August",
   "datePicker.month.december": "December",
@@ -61,6 +63,7 @@
   "datePicker.month.october": "October",
   "datePicker.month.previous": "Previous month",
   "datePicker.month.september": "September",
+  "datePicker.year": "Year",
   "error.generic": "An error occurred",
   "error.iban.invalid": "This IBAN doesn't look right. Trying entering it again.",
   "error.network.500": "Internal server error",
@@ -293,5 +296,7 @@
   "transactionStatement.title.creditor": "Creditor information",
   "transactionStatement.title.debtor": "Debtor information",
   "transactionStatement.title.document": "Transaction confirmation",
-  "transactionStatement.title.information": "Information"
+  "transactionStatement.title.information": "Information",
+  "validation.invalidBirthDate": "Invalid birthdate",
+  "validation.birthdateCannotBeFuture": "Birthdate cannot be in the future"
 }

package/src/utils/date.d.ts

@@ -1,2 +1,9 @@
 export declare const decodeBirthDate: (value: string) => string;
 export declare const encodeBirthDate: (value: string) => string;
+export type ExtractedDate = {
+    day: string;
+    month: string;
+    year: string;
+};
+export declare const extractDate: (value: string) => ExtractedDate | undefined;
+export declare const formatExtractedDate: (date: ExtractedDate) => string;

package/src/utils/date.js

@@ -1,9 +1,25 @@
 import dayjs from "dayjs";
 export const decodeBirthDate = (value) => {
-    const date = dayjs.utc(value, "YYYY-MM-DD");
+    const date = dayjs.utc(value, "YYYY-MM-DD", true);
     return date.isValid() ? date.format("DD/MM/YYYY") : "";
 };
 export const encodeBirthDate = (value) => {
-    const date = dayjs.utc(value, "DD/MM/YYYY");
+    const date = dayjs.utc(value, "DD/MM/YYYY", true);
     return date.isValid() ? date.format("YYYY-MM-DD") : "";
 };
+export const extractDate = (value) => {
+    const date = dayjs.utc(value, "YYYY-MM-DD", true);
+    if (date.isValid()) {
+        return {
+            day: date.format("DD"),
+            month: date.format("MM"),
+            year: date.format("YYYY"),
+        };
+    }
+};
+export const formatExtractedDate = (date) => {
+    const day = date.day.trim().padStart(2, "0");
+    const month = date.month.trim().padStart(2, "0");
+    const year = date.year.trim().padStart(4, "0");
+    return `${year}-${month}-${day}`;
+};

package/src/utils/validation.d.ts

@@ -1,4 +1,5 @@
 import { Validator } from "@swan-io/use-form";
+import { ExtractedDate } from "./date";
 import { AccountCountry } from "./templateTranslations";
 export declare const isValidVatNumber: (maybeVat: string) => boolean;
 export declare const isValidEmail: (maybeEmail: string) => boolean;
@@ -9,3 +10,4 @@ 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 validateBirthdate: (value: ExtractedDate) => string | undefined;

package/src/utils/validation.js

@@ -1,6 +1,8 @@
 import { noop } from "@swan-io/lake/src/utils/function";
+import dayjs from "dayjs";
 import { isValid as isValidIban } from "iban";
 import { match } from "ts-pattern";
+import { formatExtractedDate } from "./date";
 import { t } from "./i18n";
 const EMAIL_REGEX = /^[A-Z0-9_+.-]*[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i;
 const VAT_NUMBER_REGEX = /^((AT)?U[0-9]{8}|(BE)?0[0-9]{9}|(BG)?[0-9]{9,10}|(CY)?[0-9]{8}L|(CZ)?[0-9]{8,10}|(DE)?[0-9]{9}|(DK)?[0-9]{8}|(EE)?[0-9]{9}|(EL|GR)?[0-9]{9}|(ES)?[0-9A-Z][0-9]{7}[0-9A-Z]|(FI)?[0-9]{8}|(FR)?[0-9A-Z]{2}[0-9]{9}|(GB)?([0-9]{9}([0-9]{3})?|[A-Z]{2}[0-9]{3})|(HU)?[0-9]{8}|(IE)?[0-9]S[0-9]{5}L|(IT)?[0-9]{11}|(LT)?([0-9]{9}|[0-9]{12})|(LU)?[0-9]{8}|(LV)?[0-9]{11}|(MT)?[0-9]{8}|(NL)?[0-9]{9}B[0-9]{2}|(PL)?[0-9]{10}|(PT)?[0-9]{9}|(RO)?[0-9]{2,10}|(SE)?[0-9]{12}|(SI)?[0-9]{8}|(SK)?[0-9]{10})$/;
@@ -102,3 +104,14 @@ export const validateIban = (iban) => {
         return t("error.iban.invalid");
     }
 };
+export const validateBirthdate = (value) => {
+    const date = dayjs.utc(formatExtractedDate(value), "YYYY-MM-DD", true);
+    const isBirthdateOver150years = date.isBefore(dayjs.utc().subtract(150, "years"));
+    const isBirthdateWithin4years = date.isAfter(dayjs.utc().subtract(4, "years"));
+    if (!date.isValid() || isBirthdateOver150years || isBirthdateWithin4years) {
+        return t("validation.invalidBirthDate");
+    }
+    if (date.isAfter(dayjs.utc().add(1, "day"))) {
+        return t("validation.birthdateCannotBeFuture");
+    }
+};