Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/implement ocr button #2731

Open
wants to merge 15 commits into
base: dev
Choose a base branch
from
Open

Feature/implement ocr button #2731

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
42bc8eb
updated ocr button logic of the backend
Blokh Sep 23, 2024
29fa3e4
generated fetcher for backoffice functionality
Blokh Sep 23, 2024
456522c
feat: generated ocr request in workflow service backoffice
Blokh Sep 24, 2024
6408f95
updated logic of pressing on the OCR button
Blokh Sep 24, 2024
d205e97
feat: added OCR button for OCR
Blokh Sep 25, 2024
783bf7e
feat: update values from OCR logic
Blokh Sep 25, 2024
67b6ce2
feat: finalized process of ocr to creation
Blokh Sep 25, 2024
9df1bfc
removed unnecessary blocks logic
Blokh Sep 26, 2024
4c4f013
Merge branch 'feature/implement_ocr_button' of github.com:ballerine-i…
Blokh Sep 29, 2024
a5a8a1a
feat: fixed comments over OCR logic
Blokh Sep 29, 2024
96cae03
feat: fixed coderabit comments
Blokh Sep 29, 2024
ca3d26e
feat: fixed tests
Blokh Sep 29, 2024
8096d8f
Merge branch 'dev' into feature/implement_ocr_button
Blokh Sep 30, 2024
3d651de
updated mime type
Blokh Sep 30, 2024
2ed1587
feat: updated naming of fetch document
Blokh Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/backoffice-v2/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions apps/backoffice-v2/public/locales/en/toast.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
33 changes: 33 additions & 0 deletions apps/backoffice-v2/src/common/components/molecules/ImageOCR/ImageOCR.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { ctw } from '@/common/utils/ctw/ctw';
import { ComponentProps, FunctionComponent } from 'react';
import { Loader2, ScanTextIcon } from 'lucide-react';

export interface IImageOCR extends ComponentProps<'div'> {
onOcrPressed?: () => void;
isOcrDisabled: boolean;
isLoadingOCR?: boolean;
documentId: string;
}

export const ImageOCR: FunctionComponent<IImageOCR> = ({
isOcrDisabled,
onOcrPressed,
documentId,
className,
isLoadingOCR,
...props
}) => (
<button
type="button"
className={ctw(
'btn btn-circle btn-ghost btn-sm bg-base-300/70 text-[0.688rem] focus:outline-primary',
isLoadingOCR,
className,
)}
onClick={() => !isLoadingOCR && onOcrPressed?.()}
disabled={isOcrDisabled || isLoadingOCR}
{...props}
>
{isLoadingOCR ? <Loader2 className="animate-spin stroke-foreground" /> : <ScanTextIcon />}
</button>
);
1 change: 1 addition & 0 deletions apps/backoffice-v2/src/domains/customer/fetchers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Inconsistent Default Value for isDocumentOcrEnabled

The property isDocumentOcrEnabled is defined with a default value of false in fetchers.ts. However, in useDocumentsLogic.tsx, it is used with a fallback to true:

shouldOCR: customer?.features?.isDocumentOcrEnabled || true, // TODO remove default true after review

This inconsistency can lead to shouldOCR being true even when it should default to false, potentially causing unintended behavior.

Recommendations:

  • Remove the fallback to true in useDocumentsLogic.tsx to align with the schema default.
  • Address the TODO comment to ensure consistency across the codebase.
🔗 Analysis chain

LGTM: New OCR feature flag added correctly

The new isDocumentOcrEnabled property has been added appropriately to the features object within the CustomerSchema. It's correctly defined as an optional boolean with a default value of false, which aligns with best practices for feature flags.

A few points to consider:

  1. The naming is clear and follows the existing naming conventions in the schema.
  2. The default value of false ensures backwards compatibility with existing data.
  3. The property is optional, which is appropriate for a feature flag.

To ensure this change doesn't introduce any unexpected behavior, let's verify its usage:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any existing usage of isDocumentOcrEnabled
# Expected: No results if this is a new feature

rg --type typescript 'isDocumentOcrEnabled'

Length of output: 78

Script:

#!/bin/bash
# Description: Check for any existing usage of isDocumentOcrEnabled in TypeScript files
# Expected: No results if this is a new feature

rg 'isDocumentOcrEnabled' -g '*.ts' -g '*.tsx'

Length of output: 364

Script:

#!/bin/bash
# Description: Extract surrounding lines for the usage of isDocumentOcrEnabled in useDocumentsLogic.tsx
# Expected: Contextual code to assess the implementation and TODO comment

rg 'isDocumentOcrEnabled' -A 5 -B 5 apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/useDocumentsLogic.tsx

Length of output: 394

})
.nullable(),
config: z
Expand Down
30 changes: 30 additions & 0 deletions apps/backoffice-v2/src/domains/entities/hooks/mutations/useDocumentOcr/useDocumentOcr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
});
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Ensure consistency in parameter naming

The mutation function uses workflowDefinitionId, but the hook receives workflowId as a parameter. This inconsistency could lead to confusion.

Consider one of the following options:

  1. Rename the parameter to match the usage:
-export const useDocumentOcr = ({ workflowId }: { workflowId: string }) => {
+export const useDocumentOcr = ({ workflowDefinitionId }: { workflowDefinitionId: string }) => {
  // ... (update all occurrences of workflowId to workflowDefinitionId)
  1. Or, if workflowId is the correct term, update the fetch function call:
  return fetchWorkflowDocumentOCRResult({
-   workflowDefinitionId: workflowId,
+   workflowId,
    documentId,
  });

Choose the option that best aligns with your project's terminology and the actual purpose of this ID.

Committable suggestion was skipped due to low confidence.

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'));
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Refine error handling approach

While the current error handling provides user feedback and logs the error, there are a couple of points to consider:

  1. Invalidating queries on error might not be necessary and could potentially cause issues by triggering unnecessary refetches.
  2. The error details are not utilized in the user-facing error message.

Consider the following improvements:

-    onError: (_error, _variables) => {
-      console.error(_error);
-      void queryClient.invalidateQueries(workflowsQueryKeys._def);
-      toast.error(t('toast:document_ocr.error'));
+    onError: (error, variables) => {
+      console.error('OCR error:', error, 'for document:', variables.documentId);
+      toast.error(t('toast:document_ocr.error', { documentId: variables.documentId }));
     },

This change:

  1. Removes the query invalidation on error, as it's likely unnecessary.
  2. Improves error logging by including context (document ID).
  3. Potentially enriches the error message with the document ID (update your i18n file accordingly).

Also, consider adding more specific error handling if the fetchWorkflowDocumentOCRResult function provides structured error responses.

Committable suggestion was skipped due to low confidence.

});
};
18 changes: 18 additions & 0 deletions apps/backoffice-v2/src/domains/workflows/fetchers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PATCH?

url: `${getOriginUrl(
env.VITE_API_URL,
)}/api/v1/internal/workflows/${workflowDefinitionId}/documents/${documentId}/run-ocr`,
schema: z.any(),
});

return handleZodError(error, workflow);
};
1 change: 0 additions & 1 deletion ...onents/CallToActionLegacy/hooks/useCallToActionLegacyLogic/useCallToActionLegacyLogic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 2 additions & 0 deletions apps/backoffice-v2/src/lib/blocks/components/Details/Details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export const Details: FunctionComponent<ExtractCellProps<'details'>> = ({
workflowId,
documents = [],
onSubmit,
isSaveDisabled,
props,
}) => {
if (!value.data?.length) {
Expand All @@ -38,6 +39,7 @@ export const Details: FunctionComponent<ExtractCellProps<'details'>> = ({
documents={documents}
title={value?.title}
data={sortedData}
isSaveDisabled={isSaveDisabled}
contextUpdateMethod={contextUpdateMethod}
onSubmit={onSubmit}
/>
Expand Down
7 changes: 6 additions & 1 deletion apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
documents,
title,
workflowId,
isSaveDisabled,
contextUpdateMethod = 'base',
onSubmit: onSubmitCallback,
}) => {
Expand Down Expand Up @@ -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>
)}
Expand Down
1 change: 1 addition & 0 deletions apps/backoffice-v2/src/lib/blocks/components/EditableDetails/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export interface IEditableDetails {
documents: IEditableDetailsDocument[];
title: string;
workflowId: string;
isSaveDisabled?: boolean;
contextUpdateMethod?: 'base' | 'director';
onSubmit?: (document: AnyObject) => void;
}
7 changes: 6 additions & 1 deletion apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/MultiDocuments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ 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}
isLoadingOCR={value?.isLoadingOCR}
/>
</div>
);
};
2 changes: 2 additions & 0 deletions apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
export interface IMultiDocumentsProps {
value: {
isLoading: boolean;
onOcrPressed: () => void;
isLoadingOCR: boolean;
data: Array<{
imageUrl: string;
title: string;
Expand Down
1 change: 1 addition & 0 deletions apps/backoffice-v2/src/lib/blocks/create-blocks-typed/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export type TDetailsCell = {
hideSeparator?: boolean;
documents?: IEditableDetailsDocument[];
contextUpdateMethod?: 'base' | 'director';
isSaveDisabled?: boolean;
value: {
id: string;
title: string;
Expand Down
35 changes: 28 additions & 7 deletions apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
});

Comment on lines +83 to +90
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Inconsistent Variable Naming: Use CamelCase for mutateOCRDocument and isLoadingOCRDocument

The variables mutateOCRDocument and isLoadingOCRDocument use an uppercase OCR in the middle of their names, which is inconsistent with camelCase conventions used elsewhere in the codebase (e.g., useDocumentOcr). For consistency and readability, consider renaming these variables to mutateOcrDocument and isLoadingOcrDocument.

Apply this diff to rename the variables:

 const {
-  mutate: mutateOCRDocument,
-  isLoading: isLoadingOCRDocument,
+  mutate: mutateOcrDocument,
+  isLoading: isLoadingOcrDocument,
   data: ocrResult,
 } = useDocumentOcr({
   workflowId: workflow?.id,
 });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const {
mutate: mutateOCRDocument,
isLoading: isLoadingOCRDocument,
data: ocrResult,
} = useDocumentOcr({
workflowId: workflow?.id,
});
const {
mutate: mutateOcrDocument,
isLoading: isLoadingOcrDocument,
data: ocrResult,
} = useDocumentOcr({
workflowId: workflow?.id,
});

const { isLoading: isLoadingRejectTaskById } = useRejectTaskByIdMutation(workflow?.id);

const { comment, onClearComment, onCommentChange } = useCommentInputLogic();
Expand Down Expand Up @@ -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];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In React its more important not to make mutations. Just pass the value to the right instead of formattedValue.

}

return [title, formattedValue];
});
Comment on lines +370 to +381
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Avoid Mutating formattedValue Directly

The current implementation directly mutates formattedValue by setting formattedValue.value. This could lead to unintended side effects if formattedValue is used elsewhere. Instead, consider using an immutable approach to create a new object with the updated value.

Apply this diff to prevent direct mutation:

 ).map(([title, formattedValue]) => {
   if (isObject(formattedValue)) {
-    formattedValue.value ||= ocrResult?.parsedData?.[title];
+    formattedValue = {
+      ...formattedValue,
+      value: formattedValue.value || ocrResult?.parsedData?.[title],
+    };
   }

   return [title, formattedValue];
 });

This change ensures that you are not modifying the original formattedValue object but creating a new one with the updated value.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const documentEntries = Object.entries(
{
...additionalProperties,
...propertiesSchema?.properties,
} ?? {},
).map(([title, formattedValue]) => {
if (isObject(formattedValue)) {
formattedValue.value ||= ocrResult?.parsedData?.[title];
}
return [title, formattedValue];
});
const documentEntries = Object.entries(
{
...additionalProperties,
...propertiesSchema?.properties,
} ?? {},
).map(([title, formattedValue]) => {
if (isObject(formattedValue)) {
formattedValue = {
...formattedValue,
value: formattedValue.value || ocrResult?.parsedData?.[title],
};
}
return [title, formattedValue];
});


const detailsCell = createBlocksTyped()
.addBlock()
.addCell({
Expand All @@ -370,12 +392,7 @@ export const useDocumentBlocks = ({
value: {
id,
title: `${category} - ${docType}`,
data: Object.entries(
{
...additionalProperties,
...propertiesSchema?.properties,
} ?? {},
)?.map(
data: documentEntries?.map(
([
title,
{
Expand Down Expand Up @@ -436,6 +453,7 @@ export const useDocumentBlocks = ({
),
},
workflowId: workflow?.id,
isSaveDisabled: isLoadingOCRDocument,
documents: workflow?.context?.documents,
})
.addCell(decisionCell)
Expand All @@ -448,8 +466,11 @@ export const useDocumentBlocks = ({
.addBlock()
.addCell({
type: 'multiDocuments',

value: {
isLoading: storageFilesQueryResult?.some(({ isLoading }) => isLoading),
onOcrPressed: () => mutateOCRDocument({ documentId: id }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Inconsistent Function Name: Rename mutateOCRDocument to mutateOcrDocument

The function mutateOCRDocument is being called here. To maintain consistency with the corrected variable names and camelCase conventions, consider renaming it to mutateOcrDocument.

Apply this diff to update the function name:

 onOcrPressed: () => mutateOCRDocument({ documentId: id }),
+onOcrPressed: () => mutateOcrDocument({ documentId: id }),

Committable suggestion was skipped due to low confidence.

isLoadingOCR: isLoadingOCRDocument,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix typo in OCR mutation function name

The OCR functionality is correctly implemented, but there's a typo in the function name.

Apply this diff to fix the typo:

-  onOcrPressed: () => mutateOCRDocument({ documentId: id }),
+  onOcrPressed: () => mutateOcrDocument({ documentId: id }),
   isLoadingOCR: isLoadingOCRDocument,

The rest of the changes look good. The isLoadingOCR property is correctly set to isLoadingOCRDocument.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onOcrPressed: () => mutateOCRDocument({ documentId: id }),
isLoadingOCR: isLoadingOCRDocument,
onOcrPressed: () => mutateOcrDocument({ documentId: id }),
isLoadingOCR: isLoadingOCRDocument,

data:
documents?.[docIndex]?.pages?.map(
({ type, fileName, metadata, ballerineFileId }, pageIndex) => ({
Expand Down
16 changes: 16 additions & 0 deletions apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand All @@ -13,14 +14,20 @@ export const DocumentsToolbar: FunctionComponent<{
onRotateDocument: () => void;
onOpenDocumentInNewTab: (id: string) => void;
shouldDownload: boolean;
onOcrPressed?: () => void;
shouldOCR: boolean;
isLoadingOCR: boolean;
fileToDownloadBase64: string;
}> = ({
image,
isLoading,
hideOpenExternalButton,
onRotateDocument,
onOpenDocumentInNewTab,
onOcrPressed,
shouldDownload,
isLoadingOCR,
shouldOCR,
fileToDownloadBase64,
}) => {
const { onOpenInNewTabClick } = useDocumentsToolbarLogic({
Expand All @@ -31,6 +38,15 @@ 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}
isLoadingOCR={isLoadingOCR}
/>
</div>
)}
{!hideOpenExternalButton && !isLoading && image?.id && (
<button
type={`button`}
Expand Down
13 changes: 8 additions & 5 deletions apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -24,19 +24,19 @@ import { IDocumentsProps } from './interfaces';
*/
export const Documents: FunctionComponent<IDocumentsProps> = ({
documents,
onOcrPressed,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Ensure 'onOcrPressed' is defined in 'IDocumentsProps'

You've added onOcrPressed to the component props. Please ensure that onOcrPressed is defined in the IDocumentsProps interface to maintain type safety and prevent potential TypeScript errors.

isLoading,
isLoadingOCR,
hideOpenExternalButton,
}) => {
const {
crop,
onCrop,
onCancelCrop,
isCropping,
onOcr,
selectedImageRef,
initialImage,
skeletons,
isLoadingOCR,
selectedImage,
onSelectImage,
documentRotation,
Expand All @@ -45,8 +45,9 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
onTransformed,
isRotatedOrTransformed,
shouldDownload,
shouldOCR,
fileToDownloadBase64,
} = useDocuments(documents);
} = useDocumentsLogic(documents);

return (
<ImageViewer selectedImage={selectedImage} onSelectImage={onSelectImage}>
Expand Down Expand Up @@ -88,8 +89,10 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
onOpenDocumentInNewTab={onOpenDocumentInNewTab}
// isRotatedOrTransformed={isRotatedOrTransformed}
shouldDownload={shouldDownload}
shouldOCR={shouldOCR}
onOcrPressed={onOcrPressed}
// isCropping={isCropping}
// isLoadingOCR={isLoadingOCR}
isLoadingOCR={isLoadingOCR}
// onCancelCrop={onCancelCrop}
fileToDownloadBase64={fileToDownloadBase64}
/>
Expand Down
Loading
Loading