@swan-io/shared-business 5.2.0 → 7.0.0

package/src/components/SupportingDocument.js

@@ -1,204 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Dict } 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, isNullish } from "@swan-io/lake/src/utils/nullish";
-import { useForm } from "@swan-io/use-form";
-import { Fragment, forwardRef, useEffect, useImperativeHandle, useMemo, useState, } from "react";
-import { StyleSheet } from "react-native";
-import { match } from "ts-pattern";
-import { MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE, MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE_MB, } from "../constants/uploads";
-import { isTranslationKey, locale, t } from "../utils/i18n";
-import { LakeModal } from "./LakeModal";
-import { UploadArea } from "./UploadArea";
-const ACCEPTED_FORMATS = ["application/pdf", "image/png", "image/jpeg"];
-const NO_ID_YET = "NO_ID_YET";
-const validateNotEmpty = value => {
-    if (value.length === 0) {
-        return t("error.requiredField");
-    }
-};
-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: "top", 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 "";
-    }
-};
-const SupportingDocumentWithRef = ({ documents, getAwsUrl, onChange, requiredDocumentPurposes, onboardingLanguage = locale.language, }, externalRef) => {
-    const initialValues = useMemo(() => documents.reduce((acc, doc) => {
-        var _a;
-        return {
-            ...acc,
-            [doc.purpose]: [
-                ...((_a = acc[doc.purpose]) !== null && _a !== void 0 ? _a : []),
-                {
-                    status: "finished",
-                    id: doc.id,
-                    name: doc.name,
-                    fileUrl: doc.downloadUrl,
-                },
-            ],
-        };
-    }, {}), [documents]);
-    const [showPowerOfAttorneyModal, setShowPowerOfAttorneyModal] = useState(false);
-    const [showSwornStatementModal, setShowSwornStatementModal] = useState(false);
-    const { Field, setFieldValue, getFieldValue, listenFields, submitForm } = useForm(requiredDocumentPurposes.reduce((acc, purpose) => {
-        var _a;
-        return ({
-            ...acc,
-            [purpose]: {
-                initialValue: (_a = initialValues[purpose]) !== null && _a !== void 0 ? _a : [],
-                validate: validateNotEmpty,
-            },
-        });
-    }, {}));
-    useImperativeHandle(externalRef, () => {
-        return {
-            submit: (callback) => {
-                submitForm({
-                    onSuccess: () => callback(true),
-                    onFailure: () => callback(false),
-                });
-            },
-        };
-    });
-    useEffect(() => {
-        const removeListener = listenFields(requiredDocumentPurposes, state => {
-            let documents = [];
-            Dict.entries(state).forEach(([key, { value: values = [] }]) => {
-                documents = [
-                    ...documents,
-                    ...values.map(v => ({
-                        id: v.id,
-                        name: v.name,
-                        downloadUrl: v.fileUrl,
-                        purpose: key,
-                    })),
-                ];
-            });
-            onChange === null || onChange === void 0 ? void 0 : onChange(documents);
-        });
-        return () => removeListener();
-    }, [listenFields, onChange, requiredDocumentPurposes]);
-    const handleUpload = (files, fieldName) => {
-        const file = files[0];
-        if (isNullish(file)) {
-            return;
-        }
-        getAwsUrl(file, fieldName)
-            .then(({ upload: { url, fields }, id }) => {
-            const xhr = new XMLHttpRequest();
-            xhr.open("POST", url, true);
-            const state = getFieldValue(fieldName);
-            setFieldValue(fieldName, state.map(doc => doc.id === NO_ID_YET
-                ? {
-                    status: "uploading",
-                    progress: 0,
-                    name: file.name,
-                    id,
-                }
-                : doc));
-            xhr.upload.onprogress = event => {
-                const progress = (event.loaded / event.total) * 100;
-                const state = getFieldValue(fieldName);
-                setFieldValue(fieldName, state.map(uploadState => uploadState.id === id ? { ...uploadState, progress } : uploadState));
-            };
-            xhr.onerror = () => {
-                const state = getFieldValue(fieldName);
-                setFieldValue(fieldName, state.map(uploadState => uploadState.id === id
-                    ? {
-                        status: "failed",
-                        id: uploadState.id,
-                        name: uploadState.name,
-                        fileUrl: uploadState.fileUrl,
-                        error: t("supportingDocuments.errorUpload"),
-                    }
-                    : uploadState));
-            };
-            xhr.onload = () => {
-                const state = getFieldValue(fieldName);
-                if (xhr.status !== 200 && xhr.status !== 204) {
-                    setFieldValue(fieldName, state.map(uploadState => uploadState.id === id
-                        ? {
-                            status: "failed",
-                            id: uploadState.id,
-                            name: uploadState.name,
-                            fileUrl: uploadState.fileUrl,
-                            error: t("supportingDocuments.errorUpload"),
-                        }
-                        : uploadState));
-                    return;
-                }
-                setFieldValue(fieldName, state.map(uploadState => uploadState.id === id ? { ...uploadState, status: "finished" } : uploadState));
-            };
-            const formData = new FormData();
-            fields.forEach(({ key, value }) => {
-                formData.append(key, value);
-            });
-            formData.append("file", file);
-            xhr.send(formData);
-        })
-            .catch(() => {
-            const state = getFieldValue(fieldName);
-            setFieldValue(fieldName, state.map(uploadState => uploadState.id === NO_ID_YET
-                ? {
-                    status: "failed",
-                    id: uploadState.id,
-                    name: uploadState.name,
-                    fileUrl: uploadState.fileUrl,
-                    error: t("supportingDocuments.errorUpload"),
-                }
-                : uploadState));
-        });
-    };
-    return (_jsxs(Form, { children: [requiredDocumentPurposes.map(purpose => {
-                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(Field, { name: purpose, children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", error: error, onDropAccepted: files => {
-                                        onChange([...value, { id: NO_ID_YET, status: "uploading", progress: 0 }]);
-                                        handleUpload(files, purpose);
-                                    }, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDocuments.documentTypes", {
-                                        maxSizeMB: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE_MB,
-                                    }), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _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(onboardingLanguage)
-                                .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 SupportingDocument = forwardRef(SupportingDocumentWithRef);

package/src/components/UploadArea.d.ts

@@ -1,33 +0,0 @@
-import { AsyncData } from "@swan-io/boxed";
-import { IconName } from "@swan-io/lake/src/components/Icon";
-import { DropzoneOptions } from "react-dropzone";
-export type UploadFileStatus = ({
-    status: "uploading";
-    progress: number;
-} | {
-    status: "finished";
-} | {
-    status: "failed";
-    error: string;
-}) & {
-    fileUrl?: string;
-    id: string;
-    name?: string;
-};
-type Props = {
-    icon: IconName;
-    documents?: UploadFileStatus[];
-    onRemoveDocument?: (fileId: string) => void;
-    onRemoveFile?: () => void;
-    accept: string[];
-    value?: AsyncData<File>;
-    disabled?: boolean;
-    onDropAccepted?: DropzoneOptions["onDropAccepted"];
-    onDropRejected?: DropzoneOptions["onDropRejected"];
-    layout?: "vertical" | "horizontal";
-    description?: string;
-    error?: string;
-    maxSize?: number;
-};
-export declare const UploadArea: ({ icon, accept, value, documents, disabled, onRemoveFile, onRemoveDocument, onDropAccepted, onDropRejected, layout, description, error, maxSize, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/UploadArea.js

@@ -1,172 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box } from "@swan-io/lake/src/components/Box";
-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 { LoadingView } from "@swan-io/lake/src/components/LoadingView";
-import { Space } from "@swan-io/lake/src/components/Space";
-import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
-import { backgroundColor, colors, gray75, 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 { FileTile } from "@swan-io/shared-business/src/components/FileTile";
-import { Fragment, useMemo } from "react";
-import { useDropzone } from "react-dropzone";
-import { StyleSheet, Text, View } from "react-native";
-import { 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)",
-    },
-    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],
-    },
-    item: {
-        backgroundColor: backgroundColor.accented,
-        borderRadius: 8,
-        boxShadow: shadows.tile,
-        height: 56,
-        paddingHorizontal: spacings[20],
-    },
-    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],
-    },
-});
-const UploadAreaPreview = ({ file }) => {
-    const url = useMemo(() => URL.createObjectURL(file), [file]);
-    return _jsx(View, { style: [styles.preview, { backgroundImage: `url("${url}")` }] });
-};
-export const UploadArea = ({ icon, accept, value, documents = [], disabled = false, onRemoveFile, onRemoveDocument, onDropAccepted, onDropRejected, layout = "vertical", description, error, maxSize, }) => {
-    var _a;
-    const [isHovered, setIsHovered] = useBoolean(false);
-    const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
-        accept: accept.reduce((acc, item) => ({ ...acc, [item]: [] }), {}),
-        onDropAccepted,
-        onDropRejected,
-        disabled,
-        maxSize,
-    });
-    const browseElement = (_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("uploadArea.noValue")
-                            : formatNestedMessage("uploadArea.dropFile", {
-                                browse: _jsx(Text, { style: styles.browse, children: t("uploadArea.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 })] })))] })] }));
-    return (_jsxs(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() }), isNotNullish(value)
-                            ? value.match({
-                                NotAsked: () => browseElement,
-                                Loading: () => _jsx(LoadingView, {}),
-                                Done: value => value.type.startsWith("image/") ? (_jsxs(_Fragment, { children: [_jsx(UploadAreaPreview, { file: value }), onRemoveFile != null ? (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", onPress: onRemoveFile, style: styles.deleteButton, ariaLabel: t("common.remove") })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: getIconNameFromFilename(value.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("uploadArea.droppedFile") }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[200], children: value.name })] }), onRemoveFile != null ? (_jsx(LakeButton, { mode: "tertiary", size: "small", icon: "delete-regular", color: "negative", style: styles.deleteButton, onPress: onRemoveFile, ariaLabel: t("common.remove") })) : null] })),
-                            })
-                            : browseElement] }) }), documents.map(({ ...document }, index) => {
-                return (_jsxs(Fragment, { children: [_jsx(Space, { height: index === 0 ? 8 : 4 }), match(document)
-                            .with({ status: "finished" }, () => {
-                            var _a;
-                            return (_jsx(FileTile, { name: (_a = document.name) !== null && _a !== void 0 ? _a : t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: onRemoveDocument ? () => onRemoveDocument(document.id) : undefined }));
-                        })
-                            .with({ status: "failed" }, ({ error }) => {
-                            var _a;
-                            return (_jsx(FileTile, { name: (_a = document.name) !== null && _a !== void 0 ? _a : t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: onRemoveDocument ? () => onRemoveDocument(document.id) : undefined, variant: "refused", title: error }));
-                        })
-                            .with({ status: "uploading" }, ({ progress }) => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.item, children: [_jsx(LakeText, { numberOfLines: 1, color: colors.gray[700], children: t("uploadArea.uploading") }), _jsx(Space, { width: 20 }), _jsx(View, { role: "progressbar", style: styles.progressBar, children: _jsx(View, { style: [styles.progress, { width: `${progress}%` }] }) })] })))
-                            .exhaustive()] }, document.id));
-            })] }));
-};