Feature/implement ocr button

apps/backoffice-v2/package.json

@@ -98,7 +98,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,35 @@
+import { ctw } from '@/common/utils/ctw/ctw';
+import { ComponentProps, FunctionComponent } from 'react';
+import { Loader2, ScanTextIcon } from 'lucide-react';
+
+export interface IImageOCR extends ComponentProps<'button'> {
+  onOcrPressed?: () => void;
+  isOcrDisabled: boolean;
+  isLoadingOCR?: boolean;
+}
+
+export const ImageOCR: FunctionComponent<IImageOCR> = ({
+  isOcrDisabled,
+  onOcrPressed,
+  className,
+  isLoadingOCR,
+  ...props
+}) => (
+  <button
+    {...props}
+    type="button"
+    className={ctw(
+      'disabled: btn btn-circle btn-ghost btn-sm bg-base-300/70 text-[0.688rem] focus:outline-primary disabled:bg-base-300/70',
+      isLoadingOCR,
+      className,
+    )}
+    onClick={() => onOcrPressed?.()}
+    disabled={isOcrDisabled || isLoadingOCR}
+  >
+    {isLoadingOCR ? (
+      <Loader2 className="animate-spin stroke-foreground" />
+    ) : (
+      <ScanTextIcon className={'p-0.5'} />
+    )}
+  </button>
+);

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

@@ -27,6 +27,7 @@ const CustomerSchema = z.object({
       createBusinessReportBatch: z
         .object({ enabled: z.boolean().default(false), options: createBusinessReportOptions })
         .optional(),
+      isDocumentOcrEnabled: z.boolean().default(false).optional(),
     })
     .nullable(),
   config: z

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({
+        workflowRuntimeId: workflowId,
+        documentId,
+      });
+    },
+    onSuccess: (data, variables) => {
+      void queryClient.invalidateQueries(workflowsQueryKeys._def);
+      toast.success(t('toast:document_ocr.success'));
+    },
+    onError: (error, variables) => {
+      console.error('OCR error:', error, 'for document:', variables.documentId);
+      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 ({
+  workflowRuntimeId,
+  documentId,
+}: {
+  workflowRuntimeId: string;
+  documentId: string;
+}) => {
+  const [workflow, error] = await apiClient({
+    method: Method.GET,
+    url: `${getOriginUrl(
+      env.VITE_API_URL,
+    )}/api/v1/internal/workflows/${workflowRuntimeId}/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/Details/Details.tsx

@@ -13,6 +13,7 @@ export const Details: FunctionComponent<ExtractCellProps<'details'>> = ({
   workflowId,
   documents = [],
   onSubmit,
+  isSaveDisabled,
   props,
 }) => {
   if (!value.data?.length) {
@@ -38,6 +39,7 @@ export const Details: FunctionComponent<ExtractCellProps<'details'>> = ({
         documents={documents}
         title={value?.title}
         data={sortedData}
+        isSaveDisabled={isSaveDisabled}
         contextUpdateMethod={contextUpdateMethod}
         onSubmit={onSubmit}
       />

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

@@ -103,6 +103,7 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
   documents,
   title,
   workflowId,
+  isSaveDisabled,
   contextUpdateMethod = 'base',
   onSubmit: onSubmitCallback,
 }) => {
@@ -427,7 +428,11 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
         </div>
         <div className={`flex justify-end`}>
           {data?.some(({ isEditable }) => isEditable) && (
-            <Button type="submit" className={`ms-auto mt-3`}>
+            <Button
+              type="submit"
+              className={`ms-auto mt-3 aria-disabled:pointer-events-none aria-disabled:opacity-50`}
+              aria-disabled={isSaveDisabled}
+            >
               Save
             </Button>
           )}

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

@@ -25,6 +25,7 @@ export interface IEditableDetails {
   documents: IEditableDetailsDocument[];
   title: string;
   workflowId: string;
+  isSaveDisabled?: boolean;
   contextUpdateMethod?: 'base' | 'director';
   onSubmit?: (document: AnyObject) => void;
 }

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

@@ -7,7 +7,13 @@ 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}
+        isDocumentEditable={value?.isDocumentEditable}
+        isLoading={value?.isLoading}
+        onOcrPressed={value?.onOcrPressed}
+        isLoadingOCR={value?.isLoadingOCR}
+      />
     </div>
   );
 };

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

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

apps/backoffice-v2/src/lib/blocks/create-blocks-typed/types.ts

@@ -115,6 +115,7 @@ export type TDetailsCell = {
   hideSeparator?: boolean;
   documents?: IEditableDetailsDocument[];
   contextUpdateMethod?: 'base' | 'director';
+  isSaveDisabled?: boolean;
   value: {
     id: 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,25 @@ export const useDocumentBlocks = ({
           })
           .cellAt(0, 0);
 
+        const documentEntries = Object.entries(
+          {
+            ...additionalProperties,
+            ...propertiesSchema?.properties,
+          } ?? {},
+        ).map(([title, formattedValue]) => {
+          if (isObject(formattedValue)) {
+            return [
+              title,
+              {
+                ...formattedValue,
+                value: formattedValue.value || ocrResult?.parsedData?.[title],
+              },
+            ];
+          }
+
+          return [title, formattedValue];
+        });
+
         const detailsCell = createBlocksTyped()
           .addBlock()
           .addCell({
@@ -370,12 +398,7 @@ export const useDocumentBlocks = ({
                 value: {
                   id,
                   title: `${category} - ${docType}`,
-                  data: Object.entries(
-                    {
-                      ...additionalProperties,
-                      ...propertiesSchema?.properties,
-                    } ?? {},
-                  )?.map(
+                  data: documentEntries?.map(
                     ([
                       title,
                       {
@@ -441,6 +464,7 @@ export const useDocumentBlocks = ({
                   },
                 },
                 workflowId: workflow?.id,
+                isSaveDisabled: isLoadingOCRDocument,
                 documents: workflow?.context?.documents,
               })
               .addCell(decisionCell)
@@ -455,6 +479,9 @@ export const useDocumentBlocks = ({
             type: 'multiDocuments',
             value: {
               isLoading: storageFilesQueryResult?.some(({ isLoading }) => isLoading),
+              onOcrPressed: () => mutateOCRDocument({ documentId: id }),
+              isDocumentEditable: caseState.writeEnabled,
+              isLoadingOCR: isLoadingOCRDocument,
               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,20 @@ export const DocumentsToolbar: FunctionComponent<{
   onRotateDocument: () => void;
   onOpenDocumentInNewTab: (id: string) => void;
   shouldDownload: boolean;
+  onOcrPressed?: () => void;
+  isOCREnabled: boolean;
+  isLoadingOCR: boolean;
   fileToDownloadBase64: string;
 }> = ({
   image,
   isLoading,
   hideOpenExternalButton,
   onRotateDocument,
   onOpenDocumentInNewTab,
+  onOcrPressed,
   shouldDownload,
+  isLoadingOCR,
+  isOCREnabled,
   fileToDownloadBase64,
 }) => {
   const { onOpenInNewTabClick } = useDocumentsToolbarLogic({
@@ -31,6 +38,11 @@ export const DocumentsToolbar: FunctionComponent<{
 
   return (
     <div className={`absolute z-50 flex space-x-2 bottom-right-6`}>
+      <ImageOCR
+        isOcrDisabled={!isOCREnabled}
+        onOcrPressed={onOcrPressed}
+        isLoadingOCR={isLoadingOCR}
+      />
       {!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,19 +24,20 @@ import { IDocumentsProps } from './interfaces';
  */
 export const Documents: FunctionComponent<IDocumentsProps> = ({
   documents,
+  onOcrPressed,
   isLoading,
+  isDocumentEditable,
+  isLoadingOCR,
   hideOpenExternalButton,
 }) => {
   const {
     crop,
     onCrop,
     onCancelCrop,
     isCropping,
-    onOcr,
     selectedImageRef,
     initialImage,
     skeletons,
-    isLoadingOCR,
     selectedImage,
     onSelectImage,
     documentRotation,
@@ -45,8 +46,9 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
     onTransformed,
     isRotatedOrTransformed,
     shouldDownload,
+    isOCREnabled,
     fileToDownloadBase64,
-  } = useDocuments(documents);
+  } = useDocumentsLogic(documents);
 
   return (
     <ImageViewer selectedImage={selectedImage} onSelectImage={onSelectImage}>
@@ -88,8 +90,10 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
             onOpenDocumentInNewTab={onOpenDocumentInNewTab}
             // isRotatedOrTransformed={isRotatedOrTransformed}
             shouldDownload={shouldDownload}
+            isOCREnabled={!!isDocumentEditable && isOCREnabled}
+            onOcrPressed={onOcrPressed}
+            isLoadingOCR={!!isLoadingOCR}
             // isCropping={isCropping}
-            // isLoadingOCR={isLoadingOCR}
             // onCancelCrop={onCancelCrop}
             fileToDownloadBase64={fileToDownloadBase64}
           />