Feature/implement ocr button (#2731)

* updated ocr button logic of the backend

* generated fetcher for backoffice functionality

* feat: generated ocr request in workflow service backoffice

* updated logic of pressing on the OCR button

* feat: added OCR button for OCR

* feat: update values from OCR logic

* feat: finalized process of ocr to creation

* removed unnecessary blocks logic

* feat: fixed comments over OCR logic

* feat: fixed coderabit comments

* feat: fixed tests

* updated mime type

* feat: updated naming of fetch document

* feat: fixed PR comments

* feat: fixed comments over ocr logic

* fixed tests ovr cron logic

* removed unnecessary code

* removed unnecessary code

* removed unnecessary css

Author: Blokh

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(
+      '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;
 }