Feature/implement ocr button

apps/backoffice-v2/package.json

@@ -97,7 +97,7 @@
     "i18next-http-backend": "^2.1.1",
     "leaflet": "^1.9.4",
     "libphonenumber-js": "^1.10.49",
-    "lucide-react": "^0.239.0",
+    "lucide-react": "^0.445.0",
     "match-sorter": "^6.3.1",
     "msw": "^1.0.0",
     "posthog-js": "^1.154.2",

apps/backoffice-v2/public/locales/en/toast.json

@@ -81,6 +81,10 @@
   "pdf_certificate": {
     "error": "Failed to open PDF certificate."
   },
+  "document_ocr": {
+    "success": "OCR performed successfully.",
+    "error": "Failed to perform OCR on the document."
+  },
   "business_report_creation": {
     "success": "Merchant check created successfully.",
     "error": "Error occurred while creating a merchant check.",

apps/backoffice-v2/src/common/components/molecules/ImageOCR/ImageOCR.tsx

@@ -0,0 +1,30 @@
+import { ctw } from '@/common/utils/ctw/ctw';
+import { ComponentProps, FunctionComponent } from 'react';
+import { ScanTextIcon } from 'lucide-react';
+
+export interface IImageOCR extends ComponentProps<'div'> {
+  onOcrPressed?: () => void;
+  isOcrDisabled: boolean;
+  documentId: string;
+}
+
+export const ImageOCR: FunctionComponent<IImageOCR> = ({
+  isOcrDisabled,
+  onOcrPressed,
+  documentId,
+  className,
+  ...props
+}) => (
+  <>
+    <button
+      type={`button`}
+      className={ctw(
+        `btn btn-circle btn-ghost btn-sm bg-base-300/70 text-[0.688rem] focus:outline-primary`,
+      )}
+      onClick={() => onOcrPressed?.()}
+      disabled={isOcrDisabled}
+    >
+      <ScanTextIcon />
+    </button>
+  </>
+);

apps/backoffice-v2/src/domains/entities/hooks/mutations/useDocumentOcr/useDocumentOcr.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { fetchWorkflowDocumentOCRResult } from '@/domains/workflows/fetchers';
+import { toast } from 'sonner';
+import { t } from 'i18next';
+import { workflowsQueryKeys } from '@/domains/workflows/query-keys';
+import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
+
+export const useDocumentOcr = ({ workflowId }: { workflowId: string }) => {
+  const filterId = useFilterId();
+  const workflowById = workflowsQueryKeys.byId({ workflowId, filterId });
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ documentId }: { documentId: string }) => {
+      return fetchWorkflowDocumentOCRResult({
+        workflowDefinitionId: workflowId,
+        documentId,
+      });
+    },
+    onSuccess: (data, variables) => {
+      void queryClient.invalidateQueries(workflowsQueryKeys._def);
+      toast.success(t('toast:document_ocr.success'));
+    },
+    onError: (_error, _variables) => {
+      console.error(_error);
+      void queryClient.invalidateQueries(workflowsQueryKeys._def);
+      toast.error(t('toast:document_ocr.error'));
+    },
+  });
+};

apps/backoffice-v2/src/domains/workflows/fetchers.ts

@@ -298,3 +298,21 @@ export const createWorkflowRequest = async ({
 
   return handleZodError(error, workflow);
 };
+
+export const fetchWorkflowDocumentOCRResult = async ({
+  workflowDefinitionId,
+  documentId,
+}: {
+  workflowDefinitionId: string;
+  documentId: string;
+}) => {
+  const [workflow, error] = await apiClient({
+    method: Method.PATCH,
+    url: `${getOriginUrl(
+      env.VITE_API_URL,
+    )}/api/v1/internal/workflows/${workflowDefinitionId}/documents/${documentId}/run-ocr`,
+    schema: z.any(),
+  });
+
+  return handleZodError(error, workflow);
+};

apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/hooks/useCallToActionLegacyLogic/useCallToActionLegacyLogic.tsx

@@ -1,4 +1,3 @@
-import { CommonWorkflowEvent } from '@ballerine/common';
 import { ComponentProps, FunctionComponent, useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useApproveTaskByIdMutation } from '../../../../../../domains/entities/hooks/mutations/useApproveTaskByIdMutation/useApproveTaskByIdMutation';

apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/MultiDocuments.tsx

@@ -7,7 +7,11 @@ export const MultiDocuments: FunctionComponent<IMultiDocumentsProps> = ({ value
 
   return (
     <div className={`m-2 rounded p-1`}>
-      <Case.Documents documents={documents} isLoading={value?.isLoading} />
+      <Case.Documents
+        documents={documents}
+        isLoading={value?.isLoading}
+        onOcrPressed={value?.onOcrPressed}
+      />
     </div>
   );
 };

apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/interfaces.ts

@@ -1,6 +1,7 @@
 export interface IMultiDocumentsProps {
   value: {
     isLoading: boolean;
+    onOcrPressed: () => void;
     data: Array<{
       imageUrl: string;
       title: string;

apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx

@@ -1,7 +1,7 @@
 import { MotionButton } from '@/common/components/molecules/MotionButton/MotionButton';
 import { checkIsBusiness } from '@/common/utils/check-is-business/check-is-business';
 import { ctw } from '@/common/utils/ctw/ctw';
-import { CommonWorkflowStates, StateTag, valueOrNA } from '@ballerine/common';
+import { CommonWorkflowStates, isObject, StateTag, valueOrNA } from '@ballerine/common';
 import { useApproveTaskByIdMutation } from '@/domains/entities/hooks/mutations/useApproveTaskByIdMutation/useApproveTaskByIdMutation';
 import { useRejectTaskByIdMutation } from '@/domains/entities/hooks/mutations/useRejectTaskByIdMutation/useRejectTaskByIdMutation';
 import { useRemoveDecisionTaskByIdMutation } from '@/domains/entities/hooks/mutations/useRemoveDecisionTaskByIdMutation/useRemoveDecisionTaskByIdMutation';
@@ -29,6 +29,7 @@ import { X } from 'lucide-react';
 import * as React from 'react';
 import { FunctionComponent, useCallback, useMemo } from 'react';
 import { toTitleCase } from 'string-ts';
+import { useDocumentOcr } from '@/domains/entities/hooks/mutations/useDocumentOcr/useDocumentOcr';
 
 export const useDocumentBlocks = ({
   workflow,
@@ -79,6 +80,14 @@ export const useDocumentBlocks = ({
 
   const { mutate: mutateApproveTaskById, isLoading: isLoadingApproveTaskById } =
     useApproveTaskByIdMutation(workflow?.id);
+  const {
+    mutate: mutateOCRDocument,
+    isLoading: isLoadingOCRDocument,
+    data: ocrResult,
+  } = useDocumentOcr({
+    workflowId: workflow?.id,
+  });
+
   const { isLoading: isLoadingRejectTaskById } = useRejectTaskByIdMutation(workflow?.id);
 
   const { comment, onClearComment, onCommentChange } = useCommentInputLogic();
@@ -358,6 +367,19 @@ export const useDocumentBlocks = ({
           })
           .cellAt(0, 0);
 
+        const documentEntries = Object.entries(
+          {
+            ...additionalProperties,
+            ...propertiesSchema?.properties,
+          } ?? {},
+        ).map(([title, formattedValue]) => {
+          if (isObject(formattedValue)) {
+            formattedValue.value ||= ocrResult?.parsedData?.[title];
+          }
+
+          return [title, formattedValue];
+        });
+
         const detailsCell = createBlocksTyped()
           .addBlock()
           .addCell({
@@ -370,12 +392,7 @@ export const useDocumentBlocks = ({
                 value: {
                   id,
                   title: `${category} - ${docType}`,
-                  data: Object.entries(
-                    {
-                      ...additionalProperties,
-                      ...propertiesSchema?.properties,
-                    } ?? {},
-                  )?.map(
+                  data: documentEntries?.map(
                     ([
                       title,
                       {
@@ -450,6 +467,7 @@ export const useDocumentBlocks = ({
             type: 'multiDocuments',
             value: {
               isLoading: storageFilesQueryResult?.some(({ isLoading }) => isLoading),
+              onOcrPressed: () => mutateOCRDocument({ documentId: id }),
               data:
                 documents?.[docIndex]?.pages?.map(
                   ({ type, fileName, metadata, ballerineFileId }, pageIndex) => ({

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.Toolbar.tsx

@@ -5,6 +5,7 @@ import { ImageViewer } from '@/common/components/organisms/ImageViewer/ImageView
 import { ctw } from '@/common/utils/ctw/ctw';
 import { isPdf } from '@/common/utils/is-pdf/is-pdf';
 import { useDocumentsToolbarLogic } from '@/pages/Entity/components/Case/hooks/useDocumentsToolbarLogic/useDocumentsToolbarLogic';
+import { ImageOCR } from '@/common/components/molecules/ImageOCR/ImageOCR';
 
 export const DocumentsToolbar: FunctionComponent<{
   image: { id: string; imageUrl: string; fileType: string; fileName: string };
@@ -13,14 +14,18 @@ export const DocumentsToolbar: FunctionComponent<{
   onRotateDocument: () => void;
   onOpenDocumentInNewTab: (id: string) => void;
   shouldDownload: boolean;
+  onOcrPressed?: () => void;
+  shouldOCR: boolean;
   fileToDownloadBase64: string;
 }> = ({
   image,
   isLoading,
   hideOpenExternalButton,
   onRotateDocument,
   onOpenDocumentInNewTab,
+  onOcrPressed,
   shouldDownload,
+  shouldOCR,
   fileToDownloadBase64,
 }) => {
   const { onOpenInNewTabClick } = useDocumentsToolbarLogic({
@@ -31,6 +36,11 @@ export const DocumentsToolbar: FunctionComponent<{
 
   return (
     <div className={`absolute z-50 flex space-x-2 bottom-right-6`}>
+      {shouldOCR && image && (
+        <div className={`gap-y-50 mb-10 flex h-full flex-col items-center`}>
+          <ImageOCR isOcrDisabled={!shouldOCR} onOcrPressed={onOcrPressed} />
+        </div>
+      )}
       {!hideOpenExternalButton && !isLoading && image?.id && (
         <button
           type={`button`}

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.tsx

@@ -7,7 +7,7 @@ import { ImageViewer } from '@/common/components/organisms/ImageViewer/ImageView
 import { ctw } from '@/common/utils/ctw/ctw';
 import { keyFactory } from '@/common/utils/key-factory/key-factory';
 import { DocumentsToolbar } from '@/pages/Entity/components/Case/Case.Documents.Toolbar';
-import { useDocuments } from './hooks/useDocuments/useDocuments';
+import { useDocumentsLogic } from './hooks/useDocuments/useDocumentsLogic';
 import { IDocumentsProps } from './interfaces';
 
 /**
@@ -24,6 +24,7 @@ import { IDocumentsProps } from './interfaces';
  */
 export const Documents: FunctionComponent<IDocumentsProps> = ({
   documents,
+  onOcrPressed,
   isLoading,
   hideOpenExternalButton,
 }) => {
@@ -32,7 +33,6 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
     onCrop,
     onCancelCrop,
     isCropping,
-    onOcr,
     selectedImageRef,
     initialImage,
     skeletons,
@@ -45,8 +45,9 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
     onTransformed,
     isRotatedOrTransformed,
     shouldDownload,
+    shouldOCR,
     fileToDownloadBase64,
-  } = useDocuments(documents);
+  } = useDocumentsLogic(documents);
 
   return (
     <ImageViewer selectedImage={selectedImage} onSelectImage={onSelectImage}>
@@ -88,6 +89,8 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
             onOpenDocumentInNewTab={onOpenDocumentInNewTab}
             // isRotatedOrTransformed={isRotatedOrTransformed}
             shouldDownload={shouldDownload}
+            shouldOCR={shouldOCR}
+            onOcrPressed={onOcrPressed}
             // isCropping={isCropping}
             // isLoadingOCR={isLoadingOCR}
             // onCancelCrop={onCancelCrop}

apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/useDocuments.tsx → apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/useDocumentsLogic.tsx

@@ -1,5 +1,3 @@
-import { t } from 'i18next';
-import { toast } from 'sonner';
 import { ComponentProps, useCallback, useRef, useState } from 'react';
 
 import { IDocumentsProps } from '../../interfaces';
@@ -11,59 +9,17 @@ import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
 import { useTesseract } from '@/common/hooks/useTesseract/useTesseract';
 import { createArrayOfNumbers } from '@/common/utils/create-array-of-numbers/create-array-of-numbers';
 import { useStorageFileByIdQuery } from '@/domains/storage/hooks/queries/useStorageFileByIdQuery/useStorageFileByIdQuery';
-import { copyToClipboard } from '@/common/utils/copy-to-clipboard/copy-to-clipboard';
+import { useCustomerQuery } from '@/domains/customer/hook/queries/useCustomerQuery/useCustomerQuery';
 
-export const useDocuments = (documents: IDocumentsProps['documents']) => {
+export const useDocumentsLogic = (documents: IDocumentsProps['documents']) => {
   const initialImage = documents?.[0];
-  const {
-    crop,
-    isCropping,
-    onCrop,
-    cropImage,
-    toggleOnIsCropping,
-    toggleOffIsCropping,
-    onCancelCrop,
-  } = useCrop();
+  const { data: customer } = useCustomerQuery();
+  const { crop, isCropping, onCrop, onCancelCrop } = useCrop();
   const [isLoadingOCR, , toggleOnIsLoadingOCR, toggleOffIsLoadingOCR] = useToggle(false);
   const selectedImageRef = useRef<HTMLImageElement>();
   const recognize = useTesseract();
   const filterId = useFilterId();
-  const onOcr = useCallback(async () => {
-    if (!isCropping) {
-      toggleOnIsCropping();
-
-      return;
-    }
-
-    toggleOnIsLoadingOCR();
 
-    try {
-      const croppedBase64 = await cropImage(selectedImageRef.current);
-      const result = await recognize(croppedBase64);
-      const text = result?.data?.text;
-
-      if (!text) {
-        throw new Error('No document OCR text found');
-      }
-
-      await copyToClipboard(text)();
-    } catch (err) {
-      console.error(err);
-
-      toast.error(t('toast:ocr_document_error'));
-    }
-
-    toggleOffIsLoadingOCR();
-    toggleOffIsCropping();
-  }, [
-    isCropping,
-    toggleOnIsLoadingOCR,
-    toggleOffIsLoadingOCR,
-    toggleOffIsCropping,
-    toggleOnIsCropping,
-    cropImage,
-    recognize,
-  ]);
   const skeletons = createArrayOfNumbers(4);
   const [selectedImage, setSelectedImage] = useState<{
     imageUrl: string;
@@ -114,7 +70,7 @@ export const useDocuments = (documents: IDocumentsProps['documents']) => {
     onCrop,
     onCancelCrop,
     isCropping,
-    onOcr,
+    shouldOCR: true,
     selectedImageRef,
     initialImage,
     skeletons,

apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts

@@ -48,6 +48,7 @@ export interface IDocumentsProps {
     fileName: string;
     title: string;
   }>;
+  onOcrPressed: (documentId: string) => void;
   isLoading?: boolean;
   hideOpenExternalButton?: boolean;
 }