ballerine-io · Omri-Levy · Jan 21, 2025 · Jan 21, 2025
diff --git a/apps/backoffice-v2/package.json b/apps/backoffice-v2/package.json
@@ -116,13 +116,16 @@
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.1.1",
+    "jspdf": "^2.5.2",
+    "jspdf-autotable": "^3.8.4",
     "leaflet": "^1.9.4",
     "libphonenumber-js": "^1.10.49",
     "lodash-es": "^4.17.21",
     "lowlight": "^3.1.0",
     "lucide-react": "0.445.0",
     "match-sorter": "^6.3.1",
     "msw": "^1.0.0",
+    "papaparse": "^5.5.1",
     "posthog-js": "^1.154.2",
     "qs": "^6.11.2",
     "react": "^18.2.0",
@@ -172,6 +175,7 @@
     "@types/leaflet": "^1.9.3",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.11.13",
+    "@types/papaparse": "^5.3.15",
     "@types/qs": "^6.9.7",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",

diff --git a/apps/backoffice-v2/src/common/components/molecules/ImageEditor/ImageEditor.tsx b/apps/backoffice-v2/src/common/components/molecules/ImageEditor/ImageEditor.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponentWithChildren } from '@/common/types';
 import { ctw } from '@/common/utils/ctw/ctw';
+import { isCsv } from '@/common/utils/is-csv/is-csv';
 import { isPdf } from '@/common/utils/is-pdf/is-pdf';
 import { ComponentProps } from 'react';
 import ReactCrop, { Crop } from 'react-image-crop';
@@ -30,7 +31,7 @@ export const ImageEditor: FunctionComponentWithChildren<IImageEditorProps> = ({
       <TransformComponent
         wrapperClass={`d-full max-w-[600px] max-h-[600px] h-full`}
         contentClass={ctw({
-          'hover:cursor-move': !isPdf(image),
+          'hover:cursor-move': !isPdf(image) && !isCsv(image),
         })}
         wrapperStyle={{
           width: '100%',
@@ -41,15 +42,15 @@ export const ImageEditor: FunctionComponentWithChildren<IImageEditorProps> = ({
         contentStyle={{
           width: '100%',
           height: '100%',
-          display: !isPdf(image) ? 'block' : 'flex',
+          display: !isPdf(image) && !isCsv(image) ? 'block' : 'flex',
         }}
       >
         <ReactCrop
           crop={crop}
           onChange={onCrop}
-          disabled={!isCropping || isPdf(image) || isRotatedOrTransformed}
+          disabled={!isCropping || isPdf(image) || isCsv(image) || isRotatedOrTransformed}
           className={ctw('h-full w-full overflow-hidden [&>div]:!w-full', {
-            'flex flex-row [&>div]:min-h-[600px]': isPdf(image),
+            'flex flex-row [&>div]:min-h-[600px]': isPdf(image) || isCsv(image),
           })}
         >
           <div

diff --git a/...koffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx b/...koffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx
@@ -1,11 +1,12 @@
-import { useFiltersQuery } from '@/domains/filters/hooks/queries/useFiltersQuery/useFiltersQuery';
-import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
-import { useCallback, useMemo } from 'react';
 import { Building, Goal, Home, MonitorDot, Users } from 'lucide-react';
-import { TRoutes, TRouteWithChildren } from '@/Router/types';
+import { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
+
+import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
 import { useLocale } from '@/common/hooks/useLocale/useLocale';
+import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
+import { useFiltersQuery } from '@/domains/filters/hooks/queries/useFiltersQuery/useFiltersQuery';
+import { TRoutes, TRouteWithChildren } from '@/Router/types';
 
 export const useNavbarLogic = () => {
   const { data: filters } = useFiltersQuery();

diff --git a/apps/backoffice-v2/src/common/components/organisms/ImageViewer/ImageViewer.SelectedImage.tsx b/apps/backoffice-v2/src/common/components/organisms/ImageViewer/ImageViewer.SelectedImage.tsx
@@ -1,3 +1,4 @@
+import { isCsv } from '@/common/utils/is-csv/is-csv';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { ctw } from '../../../utils/ctw/ctw';
 import { isPdf } from '../../../utils/is-pdf/is-pdf';
@@ -31,10 +32,10 @@ export const SelectedImage = forwardRef<HTMLImageElement | HTMLIFrameElement, TS
       setIsError(false);
     }, [isError, selectedImage?.imageUrl]);
 
-    if (isPdf(selectedImage)) {
+    if (isPdf(selectedImage) || isCsv(selectedImage)) {
       return (
         <iframe
-          src={selectedImage?.imageUrl + '#toolbar=0&navpanes=0'}
+          src={`${selectedImage?.imageUrl}#toolbar=0&navpanes=0`}
           ref={ref}
           className={ctw(className, `d-full mx-auto`, {
             'h-[600px] w-[600px]': isPlaceholder,
@@ -60,3 +61,5 @@ export const SelectedImage = forwardRef<HTMLImageElement | HTMLIFrameElement, TS
     );
   },
 );
+
+SelectedImage.displayName = 'SelectedImage';
diff --git a/apps/backoffice-v2/src/common/components/organisms/ImageViewer/ImageViewer.ZoomModal.tsx b/apps/backoffice-v2/src/common/components/organisms/ImageViewer/ImageViewer.ZoomModal.tsx
@@ -1,10 +1,11 @@
+import { isCsv } from '@/common/utils/is-csv/is-csv';
 import { FunctionComponent } from 'react';
-import { useImageViewerContext } from './hooks/useImageViewerContext/useImageViewerContext';
-import { IZoomModalProps } from './interfaces';
-import { Modal } from '../Modal/Modal';
-import { BallerineImage } from '../../atoms/BallerineImage';
 import { ctw } from '../../../utils/ctw/ctw';
 import { isPdf } from '../../../utils/is-pdf/is-pdf';
+import { BallerineImage } from '../../atoms/BallerineImage';
+import { Modal } from '../Modal/Modal';
+import { useImageViewerContext } from './hooks/useImageViewerContext/useImageViewerContext';
+import { IZoomModalProps } from './interfaces';
 
 /**
  * @description To be used by {@link ImageViewer}. Uses the {@link Modal} component with default styling to display an enlarged version of the selected image.
@@ -33,14 +34,14 @@ export const ZoomModal: FunctionComponent<IZoomModalProps> = ({
       hideTitle
       {...rest}
     >
-      {isPdf(selectedImage) && (
+      {(isPdf(selectedImage) || isCsv(selectedImage)) && (
         <iframe
-          src={selectedImage?.imageUrl}
+          src={`${selectedImage?.imageUrl}${isCsv(selectedImage) ? '#toolbar=0&navpanes=0' : ''}`}
           className={ctw(`d-full`, imageClassName)}
           {...restImage}
         />
       )}
-      {!isPdf(selectedImage) && (
+      {!isPdf(selectedImage) && !isCsv(selectedImage) && (
         <BallerineImage
           withPlaceholder
           src={selectedImage?.imageUrl}

diff --git a/apps/backoffice-v2/src/common/components/organisms/UrlDataTable/UrlDataTable.tsx b/apps/backoffice-v2/src/common/components/organisms/UrlDataTable/UrlDataTable.tsx
@@ -1,19 +1,24 @@
-import { ComponentProps, FunctionComponent } from 'react';
-import { useSort } from '@/common/hooks/useSort/useSort';
-import { useSelect } from '@/common/hooks/useSelect/useSelect';
 import { DataTable } from '@ballerine/ui';
+import { ComponentProps, FunctionComponent } from 'react';
 import { PartialDeep } from 'type-fest';
 
+import { usePersistentScroll } from '@/common/hooks/usePersistentScroll/usePersistentScroll';
+import { useSelect } from '@/common/hooks/useSelect/useSelect';
+import { useSort } from '@/common/hooks/useSort/useSort';
+
 export const UrlDataTable: FunctionComponent<
   Omit<ComponentProps<typeof DataTable>, 'sort' | 'select'> &
     PartialDeep<Pick<ComponentProps<typeof DataTable>, 'sort' | 'select'>>
 > = props => {
   const { sortDir, sortBy, onSort } = useSort();
   const { selected, onSelect } = useSelect();
+  const { ref, handleScroll } = usePersistentScroll();
 
   return (
     <DataTable
       {...props}
+      ref={ref}
+      handleScroll={handleScroll}
       sort={{
         sortBy,
         sortDir,

diff --git a/apps/backoffice-v2/src/common/constants.ts b/apps/backoffice-v2/src/common/constants.ts
@@ -1,6 +1,4 @@
 export const DOWNLOAD_ONLY_MIME_TYPES = [
-  'application/csv',
-  'text/csv',
   // xls
   'application/vnd.ms-excel',
   // xlsx

diff --git a/apps/backoffice-v2/src/common/hooks/usePersistentScroll/usePersistentScroll.tsx b/apps/backoffice-v2/src/common/hooks/usePersistentScroll/usePersistentScroll.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+
+export const usePersistentScroll = () => {
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+  const resetScrollPosition = () => {
+    sessionStorage.removeItem('scrollPosition');
+  };
+
+  const restoreScrollPosition = () => {
+    const savedPosition = sessionStorage.getItem('scrollPosition');
+
+    if (savedPosition && scrollAreaRef.current) {
+      scrollAreaRef.current.scroll(0, parseInt(savedPosition, 10));
+    }
+  };
+
+  useEffect(() => {
+    if (scrollAreaRef.current?.scrollTop === 0) {
+      return restoreScrollPosition();
+    }
+  }, []);
+
+  const handleScroll = () => {
+    const scrollTop = scrollAreaRef.current?.scrollTop ?? 0;
+    sessionStorage.setItem('scrollPosition', scrollTop.toString());
+  };
+
+  return { ref: scrollAreaRef, handleScroll };
+};
diff --git a/...-v2/src/common/utils/convert-csv-to-pdf-base64-string/convert-csv-to-pdf-base64-string.ts b/...-v2/src/common/utils/convert-csv-to-pdf-base64-string/convert-csv-to-pdf-base64-string.ts
@@ -0,0 +1,36 @@
+import { jsPDF } from 'jspdf';
+import 'jspdf-autotable';
+import Papa from 'papaparse';
+
+interface jsPDFWithPlugin extends jsPDF {
+  autoTable: any;
+}
+
+export const convertCsvToPdfBase64String = (csvBase64: string) => {
+  // Extract base64 data from data URI
+  const base64Data = csvBase64.split(',')[1] || csvBase64;
+
+  // Decode base64 to string
+  const csvString = atob(base64Data);
+
+  // Parse CSV string to array using PapaParse
+  const { data } = Papa.parse(csvString, {
+    header: true,
+    skipEmptyLines: true,
+  });
+
+  // Create new PDF document
+  const doc = new jsPDF() as jsPDFWithPlugin;
+
+  // Add table to PDF using autoTable
+  doc.autoTable({
+    head: [Object.keys(data[0] as object)], // Column headers
+    body: data.map(row => Object.values(row as object)), // Row data
+    startY: 10,
+    margin: { top: 10 },
+    styles: { fontSize: 8 },
+    headStyles: { fillColor: [66, 66, 66] },
+  });
+
+  return doc.output('datauristring');
+};
diff --git a/apps/backoffice-v2/src/common/utils/is-csv/is-csv.ts b/apps/backoffice-v2/src/common/utils/is-csv/is-csv.ts
@@ -0,0 +1,2 @@
+export const isCsv = <T extends { fileType: string }>(document: T) =>
+  document?.fileType === 'text/csv' || document?.fileType === 'application/csv';
diff --git a/...fice-v2/src/domains/notes/hooks/mutations/useCreateNoteMutation/useCreateNoteMutation.tsx b/...fice-v2/src/domains/notes/hooks/mutations/useCreateNoteMutation/useCreateNoteMutation.tsx
@@ -9,8 +9,10 @@ import { TNoteableType } from '@/domains/notes/types';
 
 export const useCreateNoteMutation = ({
   onSuccess,
+  disableToast = false,
 }: {
   onSuccess?: <TData>(data: TData) => void;
+  disableToast: boolean;
 }) => {
   const queryClient = useQueryClient();
 
@@ -41,7 +43,9 @@ export const useCreateNoteMutation = ({
     onSuccess: data => {
       void queryClient.invalidateQueries();
 
-      toast.success(t(`toast:note_created.success`));
+      if (!disableToast) {
+        toast.success(t(`toast:note_created.success`));
+      }
 
       onSuccess?.(data);
     },

diff --git a/...toringBlocks/hooks/useWebsiteMonitoringReportBlock/WebsiteMonitoringBusinessReportTab.tsx b/...toringBlocks/hooks/useWebsiteMonitoringReportBlock/WebsiteMonitoringBusinessReportTab.tsx
@@ -9,6 +9,10 @@ import { TabsContent } from '@/common/components/organisms/Tabs/Tabs.Content';
 import { useWebsiteMonitoringBusinessReportTab } from '@/lib/blocks/variants/WebsiteMonitoringBlocks/hooks/useWebsiteMonitoringReportBlock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab';
 import { BusinessReportSummary } from '@ballerine/ui';
 import { RiskIndicatorLink } from '@/domains/business-reports/components/RiskIndicatorLink/RiskIndicatorLink';
+import {
+  MERCHANT_REPORT_TYPES,
+  MERCHANT_REPORT_TYPES_MAP,
+} from '@/domains/business-reports/constants';
 
 export const WebsiteMonitoringBusinessReportTab = ({
   businessReport,
@@ -34,6 +38,7 @@ export const WebsiteMonitoringBusinessReportTab = ({
     <div className={'grid gap-y-4'}>
       <BusinessReportSummary
         summary={summary}
+        isOnboarding={businessReport.reportType === MERCHANT_REPORT_TYPES_MAP.MERCHANT_REPORT_T1}
         ongoingMonitoringSummary={ongoingMonitoringSummary}
         riskLevels={riskLevels}
         riskIndicators={riskIndicators}

diff --git a/...ock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab.tsx b/...ock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab.tsx
@@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { createReportAdapter, useReportTabs } from '@ballerine/ui';
 import { RiskIndicatorLink } from '@/domains/business-reports/components/RiskIndicatorLink/RiskIndicatorLink';
 import { UnknownRecord } from 'type-fest';
+import { MERCHANT_REPORT_TYPES_MAP } from '@/domains/business-reports/constants';
 
 export const useWebsiteMonitoringBusinessReportTab = ({
   businessReport,
@@ -14,6 +15,7 @@ export const useWebsiteMonitoringBusinessReportTab = ({
   const { tabs: tabsWithSummary, riskIndicators: originalRiskIndicators } = useReportTabs({
     reportVersion: businessReport?.workflowVersion,
     report: businessReport?.data ?? {},
+    isOnboarding: businessReport?.reportType === MERCHANT_REPORT_TYPES_MAP.MERCHANT_REPORT_T1,
     companyName:
       (businessReport?.data?.websiteCompanyAnalysis as UnknownRecord | undefined)?.companyName ??
       '',

diff --git a/...ponents/CaseCreationForm/hooks/useCaseCreationForm/utils/create-context-from-form-data.ts b/...ponents/CaseCreationForm/hooks/useCaseCreationForm/utils/create-context-from-form-data.ts
@@ -2,11 +2,9 @@ import { TWorkflowById } from '@/domains/workflows/fetchers';
 import { AnyObject } from '@ballerine/ui';
 
 export const createContextFromFormData = (formData: AnyObject): TWorkflowById['context'] => {
-  const context = {
-    entity: formData, // For backward compatibility
+  return {
+    entity: {},
     documents: [],
     ...formData,
   };
-
-  return context;
 };
diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.Toolbar.tsx b/apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.Toolbar.tsx
@@ -4,6 +4,7 @@ import { FunctionComponent } from 'react';
 import { ImageOCR } from '@/common/components/molecules/ImageOCR/ImageOCR';
 import { ImageViewer } from '@/common/components/organisms/ImageViewer/ImageViewer';
 import { ctw } from '@/common/utils/ctw/ctw';
+import { isCsv } from '@/common/utils/is-csv/is-csv';
 import { isPdf } from '@/common/utils/is-pdf/is-pdf';
 import { useDocumentsToolbarLogic } from '@/pages/Entity/components/Case/hooks/useDocumentsToolbarLogic/useDocumentsToolbarLogic';
 
@@ -55,7 +56,7 @@ export const DocumentsToolbar: FunctionComponent<{
           <ExternalLinkIcon className={`p-0.5`} />
         </button>
       )}
-      {!isPdf(image) && !isLoading && (
+      {!isPdf(image) && !isCsv(image) && !isLoading && (
         <>
           <button
             type={`button`}

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
@@ -5,6 +5,7 @@ import { DownloadFile } from '@/common/components/molecules/DownloadFile/Downloa
 import { ImageEditor } from '@/common/components/molecules/ImageEditor/ImageEditor';
 import { ImageViewer } from '@/common/components/organisms/ImageViewer/ImageViewer';
 import { ctw } from '@/common/utils/ctw/ctw';
+import { isCsv } from '@/common/utils/is-csv/is-csv';
 import { keyFactory } from '@/common/utils/key-factory/key-factory';
 import { DocumentsToolbar } from '@/pages/Entity/components/Case/Case.Documents.Toolbar';
 import { useDocumentsLogic } from './hooks/useDocuments/useDocumentsLogic';
@@ -100,17 +101,21 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
           ? skeletons.map(index => (
               <ImageViewer.SkeletonItem key={`image-viewer-skeleton-${index}`} />
             ))
-          : documents?.map(({ imageUrl, title, fileType, fileName, id }) => (
-              <ImageViewer.Item
-                id={id}
-                key={keyFactory(id, title, fileName, fileType, imageUrl)}
-                src={imageUrl}
-                fileType={fileType}
-                fileName={fileName}
-                alt={title}
-                caption={title}
-              />
-            ))}
+          : documents?.map(document => {
+              const { imageUrl, title, fileType, fileName, id } = document;
+
+              return !isCsv(document) ? (
+                <ImageViewer.Item
+                  id={id}
+                  key={keyFactory(id, title, fileName, fileType, imageUrl)}
+                  src={imageUrl}
+                  fileType={fileType}
+                  fileName={fileName}
+                  alt={title}
+                  caption={title}
+                />
+              ) : null;
+            })}
       </ImageViewer.List>
       <ImageViewer.ZoomModal />
     </ImageViewer>

diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/helpers.ts b/apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/helpers.ts
@@ -0,0 +1,13 @@
+import { isCsv } from '@/common/utils/is-csv/is-csv';
+import { convertCsvToPdfBase64String } from '../../../../../../common/utils/convert-csv-to-pdf-base64-string/convert-csv-to-pdf-base64-string';
+import { IDocumentsProps } from '../../interfaces';
+
+export const convertCsvDocumentsToPdf = (documents: IDocumentsProps['documents']) => {
+  return documents.map(document => {
+    if (isCsv(document)) {
+      return { ...document, imageUrl: convertCsvToPdfBase64String(document.imageUrl) };
+    }
+
+    return document;
+  });
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const isCsv = <T extends { fileType: string }>(document: T) =>
		document?.fileType === 'text/csv' \|\| document?.fileType === 'application/csv';