@swan-io/shared-business 5.2.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "5.2.0",
+  "version": "7.0.0",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -31,7 +31,9 @@
   "dependencies": {
     "@formatjs/intl": "^2.10.0",
     "@placekit/client-js": "^2.3.0",
-    "@swan-io/boxed": "^2.0.1",
+    "@swan-io/boxed": "^2.1.0-beta",
+    "@swan-io/request": "^1.0.1",
+    "@swan-io/use-form": "^2.0.0-rc.2",
     "dayjs": "^1.11.10",
     "iban": "^0.0.14",
     "react": "^18.2.0",
@@ -39,7 +41,6 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-native-web": "^0.19.10",
-    "@swan-io/use-form": "^2.0.0-rc.2",
     "rifm": "^0.12.1",
     "ts-pattern": "^5.0.8",
     "urql": "^4.0.6",

package/src/components/DatePicker.js

@@ -477,7 +477,7 @@ export const DatePicker = ({ label, value, error, format, firstWeekDay, isSelect
     const ref = useRef(null);
     const [isOpened, { open, close }] = useDisclosure(false);
     const popoverId = useId();
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", alignItems: "end", children: _jsx(LakeLabel, { label: label, style: styles.label, actions: _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open, ariaLabel: t("common.open") }), render: id => (_jsx(Rifm, { value: value !== null && value !== void 0 ? value : "", onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onChange: onChange, ariaExpanded: isOpened })) })) }) }), _jsx(Popover, { id: popoverId, role: "dialog", onDismiss: close, referenceRef: ref, visible: isOpened, field: true, children: _jsx(View, { style: desktop ? styles.popoverDesktop : styles.popover, children: _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, desktop: desktop, isSelectable: isSelectable, onChange: onChange }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", alignItems: "end", children: _jsx(LakeLabel, { label: label, style: styles.label, actions: _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open, ariaLabel: t("common.open") }), render: id => (_jsx(Rifm, { value: value !== null && value !== void 0 ? value : "", onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onChange: onChange, ariaExpanded: isOpened })) })) }) }), _jsx(Popover, { id: popoverId, role: "dialog", onDismiss: close, referenceRef: ref, visible: isOpened, children: _jsx(View, { style: desktop ? styles.popoverDesktop : styles.popover, children: _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, desktop: desktop, isSelectable: isSelectable, onChange: onChange }) }) })] }));
 };
 export const DatePickerModal = ({ value, format, firstWeekDay, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDismiss, }) => {
     const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);

package/src/components/FileInput.d.ts

@@ -0,0 +1,20 @@
+import { IconName } from "@swan-io/lake/src/components/Icon";
+type DistFile = {
+    url: string;
+    name?: string;
+};
+type Props = {
+    accept: string[];
+    value?: DistFile | File;
+    disabled?: boolean;
+    layout?: "vertical" | "horizontal";
+    description?: string;
+    error?: string;
+    maxSize?: number;
+    icon?: IconName;
+    onFiles?: (files: File[]) => void;
+    onError?: () => void;
+    onPressRemove?: () => void;
+};
+export declare const FileInput: ({ icon, accept, value, disabled, onPressRemove, onFiles, onError, layout, description, error, maxSize, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/FileInput.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Option, Result } from "@swan-io/boxed";
+import { Icon } from "@swan-io/lake/src/components/Icon";
+import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
+import { LakeHeading } from "@swan-io/lake/src/components/LakeHeading";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
+import { backgroundColor, colors, radii, shadows, spacings, } from "@swan-io/lake/src/constants/design";
+import { useBoolean } from "@swan-io/lake/src/hooks/useBoolean";
+import { getIconNameFromFilename } from "@swan-io/lake/src/utils/file";
+import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
+import { useMemo } from "react";
+import { useDropzone } from "react-dropzone";
+import { StyleSheet, Text, View } from "react-native";
+import { P, match } from "ts-pattern";
+import { formatNestedMessage, t } from "../utils/i18n";
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: backgroundColor.accented,
+        borderWidth: 1,
+        borderColor: colors.gray[200],
+        borderStyle: "dashed",
+        borderRadius: radii[8],
+        padding: spacings[32],
+        cursor: "pointer",
+        alignItems: "center",
+    },
+    disabled: {
+        cursor: "default",
+        backgroundColor: backgroundColor.default,
+    },
+    horizontalContainer: {
+        flexDirection: "row",
+    },
+    icon: {
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    hoveredContainer: {
+        boxShadow: shadows.tile,
+    },
+    activeContainer: {
+        borderColor: colors.current[500],
+        boxShadow: shadows.tile,
+    },
+    browse: {
+        color: colors.current[500],
+    },
+    browseBlock: {
+        flex: 1,
+    },
+    decorativeIconLeft: {
+        position: "absolute",
+        bottom: 0,
+        left: "50%",
+        opacity: 0,
+        transform: "translateX(-50%) scale(0.6)",
+        transitionProperty: "opacity, transform",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    decorativeIconLeftHovered: {
+        opacity: 0.3,
+        transform: "translateX(-50%) translateX(-24px) scale(0.6) rotate(-5deg)",
+    },
+    decorativeIconRight: {
+        position: "absolute",
+        bottom: 0,
+        left: "50%",
+        opacity: 0,
+        transform: "translateX(-50%) scale(0.6)",
+        transitionProperty: "opacity, transform",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    decorativeIconRightHovered: {
+        opacity: 0.3,
+        transform: "translateX(-50%) translateX(24px) scale(0.6) rotate(5deg)",
+    },
+    errorContainer: {
+        borderColor: colors.negative[500],
+    },
+    preview: {
+        aspectRatio: 16 / 5,
+        width: "50%",
+        backgroundPosition: "center",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+    },
+    deleteButton: {
+        position: "absolute",
+        right: spacings[20],
+        top: spacings[20],
+    },
+});
+export const FileInput = ({ icon = "document-regular", accept, value, disabled = false, onPressRemove, onFiles, onError, layout = "vertical", description, error, maxSize, }) => {
+    var _a;
+    const [isHovered, setIsHovered] = useBoolean(false);
+    // We use the `accept` field as a heuristic to know if we can display a preview
+    // to avoid the cost of an extra fetch to extract the actual mimeType.
+    const isImageOnly = useMemo(() => accept.every(value => value.startsWith("image/")), [accept]);
+    const file = useMemo(() => {
+        return match(value)
+            .with(P.nullish, () => Option.None())
+            .with({ url: P.string }, ({ url, name }) => Option.Some({
+            url,
+            name: name !== null && name !== void 0 ? name : Result.fromExecution(() => new URL(url).pathname).getWithDefault("untitled"),
+        }))
+            .with(P.instanceOf(File), file => Option.Some({
+            name: file.name,
+            url: URL.createObjectURL(file),
+        }))
+            .exhaustive();
+    }, [value]);
+    const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+        accept: accept.reduce((acc, item) => ({ ...acc, [item]: [] }), {}),
+        onDropAccepted: onFiles,
+        onDropRejected: onError,
+        disabled,
+        maxSize,
+    });
+    return (_jsx(View, { style: commonStyles.fill, children: _jsx("div", { ...getRootProps(), onMouseEnter: setIsHovered.on, onMouseLeave: setIsHovered.off, children: _jsxs(View, { "aria-errormessage": error !== null && error !== void 0 ? error : (_a = fileRejections[0]) === null || _a === void 0 ? void 0 : _a.errors.join(", "), style: [
+                    styles.container,
+                    disabled && styles.disabled,
+                    layout === "horizontal" && styles.horizontalContainer,
+                    !disabled && isHovered && styles.hoveredContainer,
+                    isDragActive && styles.activeContainer,
+                    (error != null || fileRejections.length > 0) && styles.errorContainer,
+                ], children: [_jsx("input", { ...getInputProps() }), match({ file, isImageOnly })
+                        .with({ file: Option.Some(P.select()), isImageOnly: true }, ({ url }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.preview, { backgroundImage: `url("${url}")` }] }), onPressRemove != null ? (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", onPress: onPressRemove, style: styles.deleteButton, ariaLabel: t("common.remove") })) : null] })))
+                        .with({ file: Option.Some(P.select()), isImageOnly: false }, ({ name }) => (_jsxs(_Fragment, { children: [_jsx(Icon, { name: getIconNameFromFilename(name), size: 48, color: disabled ? colors.gray[200] : colors.current[500] }), _jsx(Space, { width: layout === "horizontal" ? 48 : 16, height: layout === "horizontal" ? 48 : 16 }), _jsxs(View, { style: styles.browseBlock, children: [_jsx(LakeHeading, { level: 5, variant: "h5", align: layout === "horizontal" ? "left" : "center", children: t("fileInput.clickToModify") }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[200], children: name })] }), onPressRemove != null ? (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", style: styles.deleteButton, onPress: onPressRemove, ariaLabel: t("common.remove") })) : null] })))
+                        .otherwise(() => (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.icon, children: [_jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500], style: [
+                                            styles.decorativeIconLeft,
+                                            (isDragActive || isHovered) && styles.decorativeIconLeftHovered,
+                                        ] }), _jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500], style: [
+                                            styles.decorativeIconRight,
+                                            (isDragActive || isHovered) && styles.decorativeIconRightHovered,
+                                        ] }), _jsx(Icon, { name: icon, size: 48, color: disabled ? colors.gray[200] : colors.current[500] })] }), _jsx(Space, { width: layout === "horizontal" ? 48 : 16, height: layout === "horizontal" ? 48 : 16 }), _jsxs(View, { style: styles.browseBlock, children: [_jsx(LakeHeading, { level: 5, variant: "h5", align: layout === "horizontal" ? "left" : "center", color: disabled ? colors.gray[200] : undefined, children: disabled
+                                            ? t("fileInput.noFile")
+                                            : formatNestedMessage("fileInput.dropFile", {
+                                                browse: _jsx(Text, { style: styles.browse, children: t("fileInput.browse") }),
+                                            }) }), isNotNullish(error) ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { color: colors.negative[400], align: layout === "horizontal" ? "left" : "center", children: error })] })) : (!disabled &&
+                                        isNotNullish(description) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { align: layout === "horizontal" ? "left" : "center", children: description })] })))] })] })))] }) }) }));
+};

package/src/components/FileTile.d.ts

@@ -1,10 +1,8 @@
+import { Future } from "@swan-io/boxed";
+import { SwanFile } from "../utils/SwanFile";
 type Props = {
-    variant?: "none" | "pending" | "verified" | "refused";
-    name: string;
-    url?: string;
-    onRemove?: () => void;
-    title?: string;
-    description?: string;
+    file: SwanFile;
+    onRemove?: () => Future<unknown>;
 };
-export declare const FileTile: ({ variant, name, url, onRemove, title, description }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FileTile: ({ file: { statusInfo, name, url }, onRemove }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/FileTile.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "@swan-io/lake/src/components/Box";
 import { LakeAlert } from "@swan-io/lake/src/components/LakeAlert";
 import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
@@ -6,11 +6,12 @@ import { LakeText } from "@swan-io/lake/src/components/LakeText";
 import { Space } from "@swan-io/lake/src/components/Space";
 import { Tag } from "@swan-io/lake/src/components/Tag";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
-import { backgroundColor, colors, shadows, spacings } from "@swan-io/lake/src/constants/design";
+import { backgroundColor, colors, gray75, shadows, spacings, } from "@swan-io/lake/src/constants/design";
 import { getIconNameFromFilename } from "@swan-io/lake/src/utils/file";
 import { isNotNullish, isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
-import { StyleSheet } from "react-native";
-import { match } from "ts-pattern";
+import { useCallback, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { P, match } from "ts-pattern";
 import { t } from "../utils/i18n";
 const styles = StyleSheet.create({
     base: {
@@ -24,15 +25,38 @@ const styles = StyleSheet.create({
         paddingLeft: spacings[20],
         paddingRight: spacings[8],
     },
+    progressBar: {
+        flex: 1,
+        height: 4,
+        borderRadius: 2,
+        backgroundColor: gray75,
+    },
+    progress: {
+        height: 4,
+        transitionProperty: "width",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+        borderRadius: 2,
+        backgroundColor: colors.current[500],
+    },
 });
-export const FileTile = ({ variant = "none", name, url, onRemove, title, description }) => (_jsxs(Box, { style: styles.base, children: [_jsxs(Box, { alignItems: "center", direction: "row", style: styles.content, children: [_jsx(Tag, { icon: getIconNameFromFilename(name), iconSize: 20, color: match(variant)
-                        .with("none", "pending", () => "shakespear")
-                        .with("verified", () => "positive")
-                        .with("refused", () => "negative")
-                        .exhaustive() }), _jsx(Space, { width: 16 }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], style: commonStyles.fill, children: name }), _jsx(Space, { width: 12 }), isNotNullishOrEmpty(url) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "open-filled", onPress: () => {
-                        window.open(url, "_blank");
-                    }, ariaLabel: t("common.open") })), isNotNullish(onRemove) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", onPress: onRemove, ariaLabel: t("common.remove") }))] }), variant !== "none" && (_jsx(LakeAlert, { anchored: true, title: title, variant: match(variant)
-                .with("pending", () => "info")
-                .with("verified", () => "success")
-                .with("refused", () => "error")
-                .exhaustive(), children: description }))] }));
+export const FileTile = ({ file: { statusInfo, name, url }, onRemove }) => {
+    const [isDeleting, setIsDeleting] = useState(false);
+    const onPressRemove = useCallback(() => {
+        if (onRemove != undefined) {
+            setIsDeleting(true);
+            onRemove().tap(() => setIsDeleting(false));
+        }
+    }, [onRemove]);
+    return (_jsxs(Box, { style: styles.base, children: [_jsx(Box, { alignItems: "center", direction: "row", style: styles.content, children: statusInfo.status === "Uploading" ? (_jsxs(_Fragment, { children: [_jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], children: t("fileTile.uploading") }), _jsx(Space, { width: 20 }), _jsx(View, { role: "progressbar", style: styles.progressBar, children: _jsx(View, { style: [styles.progress, { width: `${statusInfo.progress * 100}%` }] }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Tag, { icon: getIconNameFromFilename(name), iconSize: 20, color: match(statusInfo)
+                                .with({ status: P.union("Uploaded", "Pending") }, () => "shakespear")
+                                .with({ status: "Validated" }, () => "positive")
+                                .with({ status: "Refused" }, () => "negative")
+                                .exhaustive() }), _jsx(Space, { width: 16 }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], style: commonStyles.fill, children: name }), _jsx(Space, { width: 12 }), isNotNullishOrEmpty(url) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "open-filled", onPress: () => {
+                                window.open(url, "_blank");
+                            }, ariaLabel: t("common.open") })), isNotNullish(onRemove) && (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", onPress: onPressRemove, loading: isDeleting, ariaLabel: t("common.remove") }))] })) }), match(statusInfo)
+                .with({ status: "Pending" }, () => (_jsx(LakeAlert, { anchored: true, title: t("fileTile.status.Pending"), variant: "info" })))
+                .with({ status: "Validated" }, () => (_jsx(LakeAlert, { anchored: true, title: t("fileTile.status.Validated"), variant: "success" })))
+                .with({ status: "Refused" }, ({ reason }) => (_jsx(LakeAlert, { anchored: true, title: t("fileTile.status.Refused"), variant: "error", children: reason })))
+                .otherwise(() => null)] }));
+};

package/src/components/FilesUploader.d.ts

@@ -0,0 +1,16 @@
+import { Future, Result } from "@swan-io/boxed";
+import { IconName } from "@swan-io/lake/src/components/Icon";
+import { Config } from "../hooks/useFilesUploader";
+import { SwanFile } from "../utils/SwanFile";
+type Props<UploadInput, UploadOutput, GenerateUploadError, UploadFileError> = Config<UploadInput, UploadOutput, GenerateUploadError, UploadFileError> & {
+    getUploadConfig: (file: File) => UploadInput;
+    accept: string[];
+    maxSize: number;
+    icon: IconName;
+    formatAndSizeDescription?: string;
+    onRemoveFile?: (file: SwanFile) => Future<Result<unknown, unknown>>;
+    onChange?: (files: SwanFile[]) => void;
+    canUpload?: boolean;
+};
+export declare const FilesUploader: <UploadInput, UploadOutput, GenerateUploadError, UploadFileError>({ maxSize, accept, icon, getUploadConfig, onRemoveFile, onChange, formatAndSizeDescription, canUpload, ...config }: Props<UploadInput, UploadOutput, GenerateUploadError, UploadFileError>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/FilesUploader.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { Fragment, useEffect, useRef } from "react";
+import { useFilesUploader } from "../hooks/useFilesUploader";
+import { FileInput } from "./FileInput";
+import { FileTile } from "./FileTile";
+export const FilesUploader = ({ maxSize, accept, icon, getUploadConfig, onRemoveFile, onChange, formatAndSizeDescription, canUpload = true, ...config }) => {
+    const { files, upload, remove } = useFilesUploader(config);
+    // Keep the `onChange` callback as a ref to avoid running the effect
+    // every time the function updates
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        // Avoid calling `onChange` on first render
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        const onChange = onChangeRef.current;
+        if (onChange != undefined) {
+            onChange(files);
+        }
+    }, [files]);
+    return (_jsxs(Box, { children: [canUpload ? (_jsxs(_Fragment, { children: [_jsx(FileInput, { layout: "horizontal", onFiles: files => {
+                            files.forEach(file => {
+                                upload(getUploadConfig(file), file);
+                            });
+                        }, accept: accept, icon: icon, description: formatAndSizeDescription, maxSize: maxSize }), _jsx(Space, { height: 12 })] })) : null, files.map((file, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Space, { height: 12 }) : null, _jsx(FileTile, { file: file, onRemove: onRemoveFile != undefined && file.statusInfo.status === "Uploaded"
+                            ? () => onRemoveFile(file).tapOk(() => {
+                                remove(file.id);
+                            })
+                            : undefined })] }, file.id)))] }));
+};

package/src/components/LakeModal.js

@@ -22,6 +22,7 @@ const styles = StyleSheet.create({
     },
     container: {
         ...StyleSheet.absoluteFillObject,
+        position: "fixed",
     },
     inert: {
         pointerEvents: "none",
@@ -32,6 +33,7 @@ const styles = StyleSheet.create({
     },
     overlay: {
         ...StyleSheet.absoluteFillObject,
+        position: "fixed",
         backgroundColor: BACKGROUND_COLOR,
     },
     overlayEnter: {

package/src/components/SupportingDocumentCollection.d.ts

@@ -0,0 +1,39 @@
+import { Future, Result } from "@swan-io/boxed";
+import { ForwardedRef, Ref } from "react";
+import { UploadOutputWithId } from "../hooks/useFilesUploader";
+import { SwanFile } from "../utils/SwanFile";
+export type Document<Purpose extends string> = {
+    purpose: Purpose;
+    file: SwanFile;
+};
+type UploadInput<Purpose extends string> = {
+    fileName: string;
+    purpose: Purpose;
+};
+export type UploadOutput = {
+    url: string;
+    fields: {
+        key: string;
+        value: string;
+    }[];
+};
+type SupportingDocumentCollectionStatus = "WaitingForDocument" | "PendingReview" | "Approved" | "Canceled" | "Rejected";
+type Props<Purpose extends string> = {
+    status: SupportingDocumentCollectionStatus;
+    generateUpload: (input: UploadInput<Purpose>) => Future<Result<UploadOutputWithId<UploadOutput>, unknown>>;
+    documents: Document<Purpose>[];
+    requiredDocumentPurposes: Purpose[];
+    onChange?: (documents: Document<Purpose>[]) => void;
+    onRemoveFile?: (file: SwanFile) => Future<Result<unknown, unknown>>;
+    templateLanguage?: string;
+};
+export declare const getSupportingDocumentPurposeLabel: (purpose: string) => string;
+export declare const getSupportingDocumentPurposeDescriptionLabel: (purpose: string) => string;
+export type SupportingDocumentCollectionRef = {
+    areAllRequiredDocumentsFilled: () => boolean;
+};
+export declare const SupportingDocumentCollectionWithRef: <Purpose extends string>({ documents, generateUpload, requiredDocumentPurposes, templateLanguage, status, onRemoveFile, }: Props<Purpose>, ref: Ref<SupportingDocumentCollectionRef>) => import("react/jsx-runtime").JSX.Element;
+export declare const SupportingDocumentCollection: <I extends string>(props: Props<I> & {
+    ref?: ForwardedRef<SupportingDocumentCollectionRef> | undefined;
+}) => ReturnType<typeof SupportingDocumentCollectionWithRef>;
+export {};

package/src/components/SupportingDocumentCollection.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Array, Option } from "@swan-io/boxed";
+import { Form } from "@swan-io/lake/src/components/Form";
+import { LakeButton, LakeButtonGroup } from "@swan-io/lake/src/components/LakeButton";
+import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { LakeTooltip } from "@swan-io/lake/src/components/LakeTooltip";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
+import { Request, badStatusToError } from "@swan-io/request";
+import { Fragment, forwardRef, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { StyleSheet } from "react-native";
+import { match } from "ts-pattern";
+import { isTranslationKey, locale, t } from "../utils/i18n";
+import { FilesUploader } from "./FilesUploader";
+import { LakeModal } from "./LakeModal";
+const ACCEPTED_FORMATS = ["application/pdf", "image/png", "image/jpeg"];
+const styles = StyleSheet.create({
+    button: {
+        opacity: 1,
+    },
+    buttonWithDefaultCursor: {
+        opacity: 1,
+        cursor: "default",
+    },
+});
+const Help = (props) => {
+    return match(props)
+        .with({ type: "tooltip" }, ({ text, width }) => (_jsx(LakeTooltip, { content: text, width: width, togglableOnFocus: true, placement: "right", children: _jsx(LakeButton, { mode: "tertiary", size: "small", color: "gray", icon: "question-circle-regular", disabled: true, style: [styles.button, styles.buttonWithDefaultCursor], ariaLabel: t("supportingDocuments.help.whatIsThis") }) })))
+        .with({ type: "button" }, ({ label, onPress }) => (_jsx(LakeButton, { mode: "tertiary", size: "small", color: "gray", icon: "question-circle-regular", onPress: onPress, style: styles.button, ariaLabel: t("supportingDocuments.help.whatIsThis"), children: label })))
+        .exhaustive();
+};
+export const getSupportingDocumentPurposeLabel = (purpose) => {
+    const key = `supportingDocuments.purpose.${purpose}`;
+    if (isTranslationKey(key)) {
+        return t(key);
+    }
+    else {
+        return purpose;
+    }
+};
+export const getSupportingDocumentPurposeDescriptionLabel = (purpose) => {
+    const key = `supportingDocuments.purpose.${purpose}.description`;
+    if (isTranslationKey(key)) {
+        return t(key);
+    }
+    else {
+        return "";
+    }
+};
+export const SupportingDocumentCollectionWithRef = ({ documents, generateUpload, requiredDocumentPurposes, templateLanguage = locale.language, status, onRemoveFile, }, ref) => {
+    const [showPowerOfAttorneyModal, setShowPowerOfAttorneyModal] = useState(false);
+    const [showSwornStatementModal, setShowSwornStatementModal] = useState(false);
+    const orderedDocumentPurposes = useMemo(() => {
+        // Get all purposes to display: the required ones and the ones that have at least a document
+        const allPurposes = new Set(requiredDocumentPurposes);
+        documents.forEach(document => allPurposes.add(document.purpose));
+        const documentsByPurpose = new Map([...allPurposes].map(purpose => {
+            const purposeDocuments = documents.filter(document => document.purpose === purpose);
+            return [purpose, purposeDocuments];
+        }));
+        // Map purposes to their priorities (lower priority comes first)
+        // We precompute it to avoid running on each `sort` callback call
+        const allRequiredPurposes = new Set(requiredDocumentPurposes);
+        // Indices:
+        // -> 0: documents aren't empty and all validated
+        // -> 1: purpose is required
+        // -> 2: purpose isn't required
+        const priorityByPurpose = new Map([...allPurposes].map(purpose => {
+            var _a;
+            const purposeDocuments = (_a = documentsByPurpose.get(purpose)) !== null && _a !== void 0 ? _a : [];
+            const areAllPurposeDocumentsValidated = purposeDocuments.length > 0 &&
+                purposeDocuments.every(document => document.file.statusInfo.status === "Validated");
+            const priority = areAllPurposeDocumentsValidated
+                ? 0
+                : allRequiredPurposes.has(purpose)
+                    ? 1
+                    : 2;
+            return [purpose, priority];
+        }));
+        return [...allPurposes]
+            .sort((purposeA, purposeB) => {
+            var _a, _b;
+            const purposeAPriority = (_a = priorityByPurpose.get(purposeA)) !== null && _a !== void 0 ? _a : 2;
+            const purposeBPriority = (_b = priorityByPurpose.get(purposeB)) !== null && _b !== void 0 ? _b : 2;
+            return purposeBPriority > purposeAPriority ? -1 : 1;
+        })
+            .map(purpose => {
+            var _a;
+            const documents = (_a = documentsByPurpose.get(purpose)) !== null && _a !== void 0 ? _a : [];
+            return {
+                purpose,
+                files: documents.map(item => item.file),
+                isRequired: allRequiredPurposes.has(purpose),
+                areAllDocumentsValidated: priorityByPurpose.get(purpose) === 0,
+            };
+        });
+    }, [requiredDocumentPurposes, documents]);
+    const filesByRequiredPurpose = useRef(new Map(Array.filterMap(orderedDocumentPurposes, ({ isRequired, purpose, files }) => isRequired ? Option.Some([purpose, files]) : Option.None())));
+    useImperativeHandle(ref, () => ({
+        areAllRequiredDocumentsFilled: () => {
+            const filesByPurposes = [...filesByRequiredPurpose.current.values()];
+            return filesByPurposes.every(files => files.length > 0);
+        },
+    }));
+    return (_jsxs(Form, { children: [orderedDocumentPurposes.map(({ purpose, files, areAllDocumentsValidated, isRequired }) => {
+                return (_jsxs(Fragment, { children: [_jsx(LakeLabel, { label: getSupportingDocumentPurposeLabel(purpose), help: match(purpose)
+                                .with("PowerOfAttorney", () => (_jsx(Help, { type: "button", label: t("supportingDocuments.help.whatIsThis"), onPress: () => setShowPowerOfAttorneyModal(true) })))
+                                .with("SwornStatement", () => (_jsx(Help, { type: "button", label: t("supportingDocuments.help.whatIsThis"), onPress: () => setShowSwornStatementModal(true) })))
+                                .otherwise(() => {
+                                const label = getSupportingDocumentPurposeDescriptionLabel(purpose);
+                                return isNotNullishOrEmpty(label) ? _jsx(Help, { type: "tooltip", text: label }) : null;
+                            }), render: () => (_jsx(FilesUploader
+                            // Only allow uploading is the Supporting Document Collection awaits for docs
+                            // and that the specific purpose isn't already fully validated
+                            , { 
+                                // Only allow uploading is the Supporting Document Collection awaits for docs
+                                // and that the specific purpose isn't already fully validated
+                                canUpload: status === "WaitingForDocument" && !areAllDocumentsValidated, accept: ACCEPTED_FORMATS, maxSize: 20000000, icon: "document-regular", initialFiles: files, generateUpload: generateUpload, getUploadConfig: file => ({ fileName: file.name, purpose }), uploadFile: ({ upload, file, onLoadStart, onProgress }) => {
+                                    const body = new FormData();
+                                    upload.fields.forEach(({ key, value }) => body.append(key, value));
+                                    body.append("file", file);
+                                    return Request.make({
+                                        url: upload.url,
+                                        onLoadStart,
+                                        onProgress,
+                                        body,
+                                    }).mapOkToResult(badStatusToError);
+                                }, formatAndSizeDescription: t("supportingDocuments.documentTypes", {
+                                    maxSizeMB: 20000000 / 1000000,
+                                }), onRemoveFile: onRemoveFile, onChange: files => {
+                                    if (isRequired) {
+                                        filesByRequiredPurpose.current.set(purpose, files);
+                                    }
+                                } })) }), _jsx(Space, { height: 24 })] }, purpose));
+            }), requiredDocumentPurposes.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeText, { children: t("supportingDocuments.noRequiredDocuments") }), _jsx(Space, { height: 24 })] })) : null, _jsxs(LakeModal, { visible: showPowerOfAttorneyModal, title: t("supportingDocuments.powerOfAttorneyModal.title"), icon: "document-regular", onPressClose: () => setShowPowerOfAttorneyModal(false), children: [_jsx(LakeText, { children: t("supportingDocuments.powerOfAttorneyModal.description") }), _jsx(Space, { height: 16 }), _jsx(LakeButtonGroup, { paddingBottom: 0, children: _jsx(LakeButton, { grow: true, color: "current", onPress: () => window.open(`/power-of-attorney-template/${match(templateLanguage)
+                                .with("fr", () => "fr")
+                                .with("de", () => "de")
+                                .with("es", () => "es")
+                                .otherwise(() => "en")}.pdf`), children: t("supportingDocuments.downloadTemplate") }) })] }), _jsxs(LakeModal, { visible: showSwornStatementModal, title: t("supportingDocuments.purpose.SwornStatement"), icon: "document-regular", onPressClose: () => setShowSwornStatementModal(false), children: [_jsx(LakeText, { children: t("supportingDocuments.purpose.SwornStatement.description") }), _jsx(Space, { height: 16 }), _jsx(LakeButtonGroup, { paddingBottom: 0, children: _jsx(LakeButton, { grow: true, color: "current", onPress: () => window.open("/sworn-statement-template/es.pdf"), children: t("supportingDocuments.downloadTemplate") }) })] })] }));
+};
+export const SupportingDocumentCollection = forwardRef(SupportingDocumentCollectionWithRef);

package/src/components/TaxIdentificationNumberInput.js

@@ -7,9 +7,9 @@ import { colors } from "@swan-io/lake/src/constants/design";
 import { forwardRef } from "react";
 import { t } from "../utils/i18n";
 import { getCompanyTaxNumberHelp, getCompanyTaxNumberPlaceholder, getIndividualTaxNumberHelp, getIndividualTaxNumberPlaceholder, getTaxNumberTooltip, } from "../utils/templateTranslations";
-export const TaxIdentificationNumberInput = forwardRef(({ value, error, valid, disabled, onChange, onBlur, accountCountry, isCompany, required, label = t("beneficiaryForm.beneficiary.taxIdentificationNumber"), }, ref) => {
+export const TaxIdentificationNumberInput = forwardRef(({ value, error, valid, disabled, onChange, onBlur, accountCountry, isCompany, required, label = t("taxIdentificationNumber.label"), }, ref) => {
     const tooltipContents = getTaxNumberTooltip(accountCountry);
-    return (_jsx(LakeLabel, { label: label, optionalLabel: required === true ? undefined : t("common.optional"), help: tooltipContents != null ? (_jsx(LakeTooltip, { content: tooltipContents, placement: "top", width: accountCountry === "DEU" ? 800 : undefined, children: _jsx(Icon, { name: "question-circle-regular", size: 16, color: colors.gray[600] }) })) : null, render: id => (_jsx(LakeTextInput, { id: id, ref: ref, placeholder: isCompany
+    return (_jsx(LakeLabel, { label: label, optionalLabel: required === true ? undefined : t("common.optional"), help: tooltipContents != null ? (_jsx(LakeTooltip, { content: tooltipContents, placement: "right", width: accountCountry === "DEU" ? 800 : undefined, children: _jsx(Icon, { name: "question-circle-regular", size: 16, color: colors.gray[600] }) })) : null, render: id => (_jsx(LakeTextInput, { id: id, ref: ref, placeholder: isCompany
                 ? getCompanyTaxNumberPlaceholder(accountCountry)
                 : getIndividualTaxNumberPlaceholder(accountCountry), help: isCompany
                 ? getCompanyTaxNumberHelp(accountCountry)

package/src/hooks/useFilesUploader.d.ts

@@ -0,0 +1,24 @@
+import { Future, Result } from "@swan-io/boxed";
+import { SwanFile } from "../utils/SwanFile";
+export type UploadFileInput<UploadOutput> = {
+    id: string;
+    upload: UploadOutput;
+    file: File;
+    onLoadStart: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
+    onProgress: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
+};
+export type UploadOutputWithId<UploadOutput> = {
+    id: string;
+    upload: UploadOutput;
+};
+export type Config<UploadInput, UploadOutput, GenerateUploadError, UploadFileError> = {
+    initialFiles: SwanFile[];
+    generateUpload: (config: UploadInput) => Future<Result<UploadOutputWithId<UploadOutput>, GenerateUploadError>>;
+    uploadFile: (config: UploadFileInput<UploadOutput>) => Future<Result<unknown, UploadFileError>>;
+    onError?: (error: GenerateUploadError | UploadFileError) => void;
+};
+export declare const useFilesUploader: <UploadInput, UploadOutput, GenerateUploadError, UploadFileError>(config: Config<UploadInput, UploadOutput, GenerateUploadError, UploadFileError>) => {
+    files: SwanFile[];
+    upload: (uploadInput: UploadInput, file: File) => Future<Result<unknown, GenerateUploadError | UploadFileError>>;
+    remove: (id: string) => void;
+};