@swan-io/shared-business 1.8.0 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"
@@ -26,10 +26,10 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@swan-io/lake": "^1.3.2"
+    "@swan-io/lake": "*"
   },
   "dependencies": {
-    "@formatjs/intl": "^2.7.0",
+    "@formatjs/intl": "^2.7.1",
     "@googlemaps/js-api-loader": "^1.15.1",
     "@swan-io/boxed": "^0.13.0",
     "dayjs": "^1.11.7",
@@ -44,13 +44,13 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@swan-io/lake": "^1.7.0",
+    "@swan-io/lake": "*",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/google.maps": "^3.52.5",
-    "@types/react": "^18.0.35",
+    "@types/google.maps": "^3.52.6",
+    "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
-    "@types/react-native": "^0.71.5",
+    "@types/react-native": "^0.71.6",
     "@types/uuid": "^9.0.1",
     "jsdom": "^21.1.1",
     "vitest": "^0.30.1"

package/src/components/SupportingDocument.js

@@ -52,10 +52,10 @@ export const SupportingDocument = forwardRef(({ documents, getAwsUrl, onChange,
             [doc.purpose]: [
                 ...(acc[doc.purpose] ?? []),
                 {
+                    status: "finished",
                     id: doc.id,
                     name: doc.name,
                     fileUrl: doc.downloadUrl,
-                    finished: true,
                 },
             ],
         };
@@ -133,9 +133,9 @@ export const SupportingDocument = forwardRef(({ documents, getAwsUrl, onChange,
             const state = getFieldState(fieldName).value;
             setFieldValue(fieldName, state.map(doc => doc.id === NO_ID_YET
                 ? {
+                    status: "uploading",
                     progress: 0,
                     name: file.name,
-                    finished: false,
                     id,
                 }
                 : doc));
@@ -144,15 +144,33 @@ export const SupportingDocument = forwardRef(({ documents, getAwsUrl, onChange,
                 const state = getFieldState(fieldName).value;
                 setFieldValue(fieldName, state.map(uploadState => uploadState.id === id ? { ...uploadState, progress } : uploadState));
             };
+            xhr.onerror = () => {
+                const state = getFieldState(fieldName).value;
+                setFieldValue(fieldName, state.map(uploadState => uploadState.id === id
+                    ? {
+                        status: "failed",
+                        id: uploadState.id,
+                        name: uploadState.name,
+                        fileUrl: uploadState.fileUrl,
+                        error: t("supportingDoc.errorUpload"),
+                    }
+                    : uploadState));
+            };
             xhr.onload = () => {
                 const state = getFieldState(fieldName).value;
                 if (xhr.status !== 200 && xhr.status !== 204) {
-                    setFieldValue(fieldName, state.filter(uploadState => (uploadState.id === id ? false : true)));
+                    setFieldValue(fieldName, state.map(uploadState => uploadState.id === id
+                        ? {
+                            status: "failed",
+                            id: uploadState.id,
+                            name: uploadState.name,
+                            fileUrl: uploadState.fileUrl,
+                            error: t("supportingDoc.errorUpload"),
+                        }
+                        : uploadState));
                     return;
                 }
-                setFieldValue(fieldName, state.map(uploadState => uploadState.id === id
-                    ? { ...uploadState, progress: undefined, finished: true }
-                    : uploadState));
+                setFieldValue(fieldName, state.map(uploadState => uploadState.id === id ? { ...uploadState, status: "finished" } : uploadState));
             };
             const formData = new FormData();
             fields.forEach(({ key, value }) => {
@@ -161,28 +179,39 @@ export const SupportingDocument = forwardRef(({ documents, getAwsUrl, onChange,
             formData.append("file", file);
             xhr.send(formData);
         })
-            .catch(console.error);
+            .catch(() => {
+            const state = getFieldState(fieldName).value;
+            setFieldValue(fieldName, state.map(uploadState => uploadState.id === NO_ID_YET
+                ? {
+                    status: "failed",
+                    id: uploadState.id,
+                    name: uploadState.name,
+                    fileUrl: uploadState.fileUrl,
+                    error: t("supportingDoc.errorUpload"),
+                }
+                : uploadState));
+        });
     };
     return (_jsxs(Form, { children: [requiredDocumentTypes.includes("CompanyRegistration") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.companyRegistration"), help: _jsx(Help, { type: "tooltip", text: "supportingDoc.companyRegistration.description" }), render: () => (_jsx(Field, { name: "CompanyRegistration", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", error: error, onDropAccepted: files => {
-                                    onChange([...value, { id: NO_ID_YET }]);
+                                    onChange([...value, { id: NO_ID_YET, status: "uploading", progress: 0 }]);
                                     handleUpload(files, "CompanyRegistration");
                                 }, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.includes("AssociationRegistration") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.associationRegistration"), help: _jsx(Help, { type: "tooltip", text: "supportingDoc.associationRegistration.description" }), render: () => (_jsx(Field, { name: "AssociationRegistration", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
-                                    onChange([...value, { id: NO_ID_YET }]);
+                                    onChange([...value, { id: NO_ID_YET, status: "uploading", progress: 0 }]);
                                     handleUpload(files, "AssociationRegistration");
                                 }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.includes("SignedStatus") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.signedStatus"), help: _jsx(Help, { type: "tooltip", text: "supportingDoc.signedStatus.description" }), render: () => (_jsx(Field, { name: "SignedStatus", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
-                                    onChange([...value, { id: NO_ID_YET }]);
+                                    onChange([...value, { id: NO_ID_YET, status: "uploading", progress: 0 }]);
                                     handleUpload(files, "SignedStatus");
                                 }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.includes("UBODeclaration") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.UBODeclaration"), help: _jsx(Help, { type: "tooltip", text: "supportingDoc.UBODeclaration.description" }), render: () => (_jsx(Field, { name: "UBODeclaration", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
-                                    onChange([...value, { id: NO_ID_YET }]);
+                                    onChange([...value, { id: NO_ID_YET, status: "uploading", progress: 0 }]);
                                     handleUpload(files, "UBODeclaration");
                                 }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.includes("ProofOfIdentity") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.proofOfIdentity"), help: _jsx(Help, { type: "tooltip", width: 600, text: "supportingDoc.proofOfIdentity.description" }), render: () => (_jsx(Field, { name: "ProofOfIdentity", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
-                                    onChange([...value, { id: NO_ID_YET }]);
+                                    onChange([...value, { id: NO_ID_YET, status: "uploading", progress: 0 }]);
                                     handleUpload(files, "ProofOfIdentity");
                                 }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.includes("PowerOfAttorney") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.powerAttornySigned"), help: _jsx(Help, { type: "button", label: t("supportingDoc.whatIsThis"), onPress: () => setShowPowerOfAttorneyModal(true) }), render: () => (_jsx(Field, { name: "PowerOfAttorney", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
-                                    onChange([...value, { id: NO_ID_YET }]);
+                                    onChange([...value, { id: NO_ID_YET, status: "uploading", progress: 0 }]);
                                     handleUpload(files, "PowerOfAttorney");
                                 }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.includes("SwornStatement") && (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: t("supportingDoc.swornStatementDeclaration"), help: _jsx(Help, { type: "button", label: t("supportingDoc.whatIsThis"), onPress: () => setShowSwornStatementModal(true) }), render: () => (_jsx(Field, { name: "SwornStatement", children: ({ value, onChange, error }) => (_jsx(UploadArea, { layout: "horizontal", onDropAccepted: files => {
-                                    onChange([...value, { id: NO_ID_YET }]);
+                                    onChange([...value, { id: NO_ID_YET, status: "uploading", progress: 0 }]);
                                     handleUpload(files, "SwornStatement");
                                 }, error: error, documents: value, accept: ACCEPTED_FORMATS, icon: "document-regular", description: t("supportingDoc.documentTypes"), maxSize: MAX_SUPPORTING_DOCUMENT_UPLOAD_SIZE })) })) }), _jsx(Space, { height: 24 })] })), requiredDocumentTypes.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeText, { children: t("supportingDoc.noRequiredDocuments") }), _jsx(Space, { height: 24 })] })) : null, _jsxs(LakeModal, { visible: showPowerOfAttorneyModal, title: t("supportingDoc.powerAttorney"), icon: "document-regular", onPressClose: () => setShowPowerOfAttorneyModal(false), children: [_jsx(LakeText, { children: t("supportingDoc.powerAttornySigned.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")

package/src/components/UploadArea.d.ts

@@ -1,12 +1,18 @@
 /// <reference types="react" />
 import { IconName } from "@swan-io/lake/src/components/Icon";
 import { DropzoneOptions } from "react-dropzone";
-export type UploadFileStatus = {
+export type UploadFileStatus = ({
+    status: "uploading";
+    progress: number;
+} | {
+    status: "finished";
+} | {
+    status: "failed";
+    error: string;
+}) & {
+    fileUrl?: string;
     id: string;
     name?: string;
-    fileUrl?: string;
-    progress?: number;
-    finished?: boolean;
 };
 type Props = {
     icon: IconName;

package/src/components/UploadArea.js

@@ -9,10 +9,11 @@ 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, isNullish } from "@swan-io/lake/src/utils/nullish";
+import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
 import { Fragment, useLayoutEffect, useRef } 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: {
@@ -154,8 +155,11 @@ export const UploadArea = ({ icon, accept, value, documents = [], disabled = fal
                                                 : 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 })] })))] })] }))] }) }), documents.map(({ finished = false, ...document }, index) => {
-                const progress = Math.max(document.progress ?? 0, 3);
-                return (_jsxs(Fragment, { children: [_jsx(Space, { height: index === 0 ? 8 : 4 }), finished ? (_jsx(FileTile, { name: document.name ?? t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: isNullish(onRemoveFile) ? undefined : () => onRemoveFile(document.id) })) : (_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}%` }] }) })] }))] }, document.id));
+                                            isNotNullish(description) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 4 }), _jsx(LakeText, { align: layout === "horizontal" ? "left" : "center", children: description })] })))] })] }))] }) }), documents.map(({ ...document }, index) => {
+                return (_jsxs(Fragment, { children: [_jsx(Space, { height: index === 0 ? 8 : 4 }), match(document)
+                            .with({ status: "finished" }, () => (_jsx(FileTile, { name: document.name ?? t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: () => onRemoveFile?.(document.id) })))
+                            .with({ status: "failed" }, ({ error }) => (_jsx(FileTile, { name: document.name ?? t("uploadArea.unknownFileName"), url: document.fileUrl, onRemove: () => onRemoveFile?.(document.id), 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));
             })] }));
 };

package/src/locales/en.json

@@ -102,6 +102,7 @@
   "supportingDoc.companyRegistration.description": "Official document proving the legal existence of a company and providing info about its legal personality.\n(< 3 months old)",
   "supportingDoc.documentTypes": "Supported documents: .pdf, .png, .jpg",
   "supportingDoc.downloadTemplate": "Download a template",
+  "supportingDoc.errorUpload": "Failed to upload file",
   "supportingDoc.legalRepresentative": "Legal representative",
   "supportingDoc.noRequiredDocuments": "We don't need any documents from you. You can continue.",
   "supportingDoc.other": "Other",