feat(*): now passing file name from the collection flow and until the…

… download button
ballerine-io · Nov 30, 2023 · 340d9d4 · 340d9d4
1 parent 9cd124a
commit 340d9d4
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 7 deletions.
diff --git a/.changeset/long-cherries-design.md b/.changeset/long-cherries-design.md
@@ -0,0 +1,5 @@
+---
+'@ballerine/common': patch
+---
+
+added xlsx and xls to file type schema
diff --git a/apps/backoffice-v2/src/common/components/atoms/icons/index.tsx b/apps/backoffice-v2/src/common/components/atoms/icons/index.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, FunctionComponent, SVGProps } from 'react';
+import React, { ComponentProps, FunctionComponent, SVGProps } from 'react';
 import { ctw } from '../../../utils/ctw/ctw';
 
 /**
@@ -627,3 +627,56 @@ export const WarningFilledSvg: FunctionComponent<ComponentProps<'svg'>> = props
     </svg>
   );
 };
+export const DownloadFileSvg: FunctionComponent<ComponentProps<'svg'>> = props => (
+  <svg
+    width="80"
+    height="92"
+    viewBox="0 0 80 92"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={`mb-2.5`}
+    {...props}
+  >
+    <circle cx="39" cy="53" r="39" fill="#D9D9D9" />
+    <path
+      d="M6 37C6 35.3431 7.34315 34 9 34H68C69.6569 34 71 35.3431 71 37V82C71 83.6569 69.6569 85 68 85H9C7.34315 85 6 83.6569 6 82V37Z"
+      fill="#D9D9D9"
+      stroke="#9B9B9B"
+      strokeWidth="2"
+    />
+    <path
+      d="M46 1L48.5 1.5L57 9L65 16.5L66 19H50C47.7909 19 46 17.2091 46 15V1Z"
+      fill="#B8B8B8"
+      fillOpacity="0.6"
+    />
+    <path
+      d="M11 5C11 2.79086 12.7909 1 15 1H46.4717C47.4559 1 48.4055 1.36281 49.1389 2.01903L57.5 9.5L64.7415 16.3155C65.5446 17.0714 66 18.1254 66 19.2283V61.5C66 63.7091 64.2091 65.5 62 65.5H15C12.7909 65.5 11 63.7091 11 61.5V5Z"
+      fill="white"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <path
+      d="M14.961 43.3841C15.2524 41.9949 16.4776 41 17.8971 41H46.6816C47.3157 41 47.9335 41.2009 48.4462 41.5739L52.4826 44.5096L53.0708 43.7009L52.4826 44.5096C53.3373 45.1312 54.3668 45.466 55.4236 45.466H62.4561H75.1177C77.0116 45.466 78.4317 47.1993 78.0591 49.0562L71.3309 82.5902C71.0497 83.9916 69.8189 85 68.3895 85H9.92611C8.02149 85 6.599 83.2482 6.99001 81.3841L14.961 43.3841Z"
+      fill="white"
+      stroke="#9B9B9B"
+      strokeWidth="2"
+    />
+    <path
+      d="M60 18.5V34C60 35.1046 59.1046 36 58 36H19C17.8954 36 17 35.1046 17 34V17C17 15.8954 17.8954 15 19 15L46 15"
+      stroke="#9B9B9B"
+      strokeWidth="2"
+    />
+    <path d="M18 22H59" stroke="#9B9B9B" strokeWidth="2" />
+    <path d="M18 29H59" stroke="#9B9B9B" strokeWidth="2" />
+    <path d="M28 16L28 35" stroke="#9B9B9B" strokeWidth="2" />
+    <path d="M39 16L39 35" stroke="#9B9B9B" strokeWidth="2" />
+    <path d="M49 18L49 35" stroke="#9B9B9B" strokeWidth="2" />
+    <path
+      d="M46 5V14C46 16.2091 47.7909 18 50 18H62"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
diff --git a/apps/backoffice-v2/src/common/components/molecules/DownloadFile/DownloadFile.stories.tsx b/apps/backoffice-v2/src/common/components/molecules/DownloadFile/DownloadFile.stories.tsx
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DownloadFile } from './DownloadFile';
+
+const meta: Meta<typeof DownloadFile> = {
+  component: DownloadFile,
+};
+
+export default meta;
+type Story = StoryObj<typeof DownloadFile>;
+
+export const Default: Story = {
+  args: {
+    heading: 'Bank statement aug 10 2023.xlsx',
+  },
+};
diff --git a/apps/backoffice-v2/src/common/components/molecules/DownloadFile/DownloadFile.tsx b/apps/backoffice-v2/src/common/components/molecules/DownloadFile/DownloadFile.tsx
@@ -0,0 +1,21 @@
+import { ctw } from '@/common/utils/ctw/ctw';
+import React, { ComponentProps, FunctionComponent } from 'react';
+import { DownloadFileSvg } from '@/common/components/atoms/icons';
+
+export interface IDownloadFile extends ComponentProps<'div'> {
+  heading: string;
+}
+
+export const DownloadFile: FunctionComponent<IDownloadFile> = ({
+  heading,
+  className,
+  ...props
+}) => (
+  <div
+    {...props}
+    className={ctw(`d-full flex flex-col items-center rounded-lg bg-gray-50 px-4 py-6`, className)}
+  >
+    <DownloadFileSvg />
+    <h4 className={`mb-3.5 font-bold`}> {heading}</h4>
+  </div>
+);
diff --git a/apps/backoffice-v2/src/common/constants.ts b/apps/backoffice-v2/src/common/constants.ts
@@ -0,0 +1,7 @@
+export const DOWNLOAD_ONLY_MIME_TYPES = [
+  'text/csv',
+  // xls
+  'application/vnd.ms-excel',
+  // xlsx
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+] as const;
diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.tsx b/apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.tsx
@@ -68,7 +68,7 @@ const ImageEditor: FunctionComponentWithChildren<IImageEditorProps> = ({
 };
 
 const ImageToolbar: FunctionComponent<{
-  image: { imageUrl: string; fileType: string; id: string };
+  image: { id: string; imageUrl: string; fileType: string; fileName: string };
   isLoading?: boolean;
   hideOpenExternalButton?: boolean;
   onRotateDocument: () => void;
@@ -77,6 +77,7 @@ const ImageToolbar: FunctionComponent<{
   shouldDownload: boolean;
   // isCropping: boolean;
   // isLoadingOCR: boolean;
+  fileToDownloadBase64: string;
 }> = ({
   image,
   isLoading,
@@ -156,7 +157,7 @@ const ImageToolbar: FunctionComponent<{
             'pointer-events-none opacity-50': !shouldDownload,
           },
         )}
-        download={image?.imageUrl}
+        download={image?.fileName}
         href={fileToDownloadBase64}
       >
         <Download className={`p-0.5`} />
@@ -255,12 +256,13 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
             <ImageViewer.SkeletonItem key={`image-viewer-skeleton-${index}`} />
           ))}
         {!isLoading &&
-          documents?.map(({ imageUrl, title, fileType, id }) => (
+          documents?.map(({ imageUrl, title, fileType, fileName, id }) => (
             <ImageViewer.Item
               id={id}
               key={`${imageUrl}-${title}`}
               src={imageUrl}
               fileType={fileType}
+              fileName={fileName}
               alt={title}
               caption={title}
             />

diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/useDocuments.tsx b/apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/useDocuments.tsx
@@ -99,7 +99,6 @@ export const useDocuments = (documents: IDocumentsProps['documents']) => {
 
     window.open(url, '_blank');
   }, []);
-  console.log(selectedImage?.fileType);
   const shouldDownload = DOWNLOAD_ONLY_MIME_TYPES.includes(selectedImage?.fileType);
   const { data: fileToDownloadBase64 } = useStorageFileByIdQuery(selectedImage?.id, {
     isEnabled: shouldDownload,

diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts b/apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts
@@ -43,6 +43,7 @@ export interface IDocumentsProps {
     id: string;
     imageUrl: string;
     fileType: string;
+    fileName: string;
     title: string;
   }>;
   isLoading?: boolean;

diff --git a/...ponents/organisms/UIRenderer/elements/JSONForm/components/DocumentField/DocumentField.tsx b/...ponents/organisms/UIRenderer/elements/JSONForm/components/DocumentField/DocumentField.tsx
@@ -14,6 +14,7 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { getDocumentFileTypePath } from '@/components/organisms/UIRenderer/elements/JSONForm/components/DocumentField/helpers/getDocumentFileTypePath';
+import { getDocumentFileNamePath } from '@/components/organisms/UIRenderer/elements/JSONForm/components/DocumentField/helpers/getDocumentFileNamePath';
 
 interface DocumentFieldParams {
   documentData: Partial<Document>;
@@ -96,6 +97,7 @@ export const DocumentField = (
 
       const fileIdPath = getDocumentFileIdPath(definition);
       const fileTypePath = getDocumentFileTypePath(definition);
+      const fileNamePath = getDocumentFileNamePath(definition);
 
       try {
         const uploadResult = await uploadFile({ file });
@@ -104,6 +106,8 @@ export const DocumentField = (
         set(document, fileIdPath, uploadResult.id);
         // @ts-ignore
         set(document, fileTypePath, file.type);
+        // @ts-ignore
+        set(document, fileNamePath, file.name);
         set(document, 'decision', {});
 
         stateApi.setContext(context);

diff --git a/.../UIRenderer/elements/JSONForm/components/DocumentField/helpers/getDocumentFileNamePath.ts b/.../UIRenderer/elements/JSONForm/components/DocumentField/helpers/getDocumentFileNamePath.ts
@@ -0,0 +1,6 @@
+import { UIElement } from '@/domains/collection-flow';
+
+export const getDocumentFileNamePath = (definition: UIElement) =>
+  definition.valueDestination
+    ?.replace(/documents\[\d+\]\./g, '')
+    .replace('ballerineFileId', 'fileName');
diff --git a/packages/common/src/schemas/documents/default-context-schema.ts b/packages/common/src/schemas/documents/default-context-schema.ts
@@ -105,6 +105,10 @@ export const defaultContextSchema = Type.Object({
                 type: Type.Optional(
                   Type.String({
                     enum: [
+                      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+                      'application/vnd.ms-excel',
+                      'text/csv',
+                      'application/csv',
                       'application/pdf',
                       'image/png',
                       'image/jpg',
@@ -116,6 +120,7 @@ export const defaultContextSchema = Type.Object({
                     ],
                   }),
                 ),
+                fileName: Type.Optional(Type.String()),
               },
               { additionalProperties: false },
             ),
@@ -127,6 +132,10 @@ export const defaultContextSchema = Type.Object({
                 type: Type.Optional(
                   Type.String({
                     enum: [
+                      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+                      'application/vnd.ms-excel',
+                      'text/csv',
+                      'application/csv',
                       'application/pdf',
                       'image/png',
                       'image/jpg',
@@ -138,6 +147,7 @@ export const defaultContextSchema = Type.Object({
                     ],
                   }),
                 ),
+                fileName: Type.Optional(Type.String()),
                 data: Type.Optional(Type.String()),
                 metadata: Type.Optional(
                   Type.Object(

diff --git a/...s/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx b/...s/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx
@@ -51,7 +51,7 @@ export const FileInputAdapter: RJSFInputAdapter<File> = ({
         placeholder={uiSchema?.['ui:placeholder']}
         //@ts-ignore
         onChange={handleChange}
-        accept="image/jpeg, image/png, application/pdf, .docx"
+        accept="image/jpeg, image/png, application/pdf, .docx, .csv, .xlsx, .xls"
         className="line-1 flex items-center"
         disabled={disabled}
         onBlur={handleBlur}

diff --git a/services/workflows-service/src/storage/file-filter.ts b/services/workflows-service/src/storage/file-filter.ts
@@ -2,7 +2,7 @@ import { formatBytes } from '@/common/utils/bytes';
 import { UnprocessableEntityException } from '@nestjs/common';
 import { MulterOptions } from '@nestjs/platform-express/multer/interfaces/multer-options.interface';
 
-export const SUPPORTED_FILE_EXT_REGEX = /\.(jpg|jpeg|svg|png|pdf|gif|txt)$/;
+export const SUPPORTED_FILE_EXT_REGEX = /\.(jpg|jpeg|svg|png|pdf|gif|txt|csv|xlsx|xls)$/;
 
 export const FILE_MAX_SIZE_IN_KB = 1024;
 export const FILE_MAX_SIZE_IN_BYTE = 10 * FILE_MAX_SIZE_IN_KB * 1024; // 10 MB