fix: fixed document cropping & layout fixes (#2866)

* fix: fixed document cropping & layout fixes * feat: layout fixes * feat: layout fixes
ballerine-io · Dec 2, 2024 · accd983 · accd983
1 parent b3ec333
commit accd983
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 65 deletions.
diff --git a/apps/backoffice-v2/src/Router/Router.tsx b/apps/backoffice-v2/src/Router/Router.tsx
@@ -1,35 +1,35 @@
-import React, { FunctionComponent } from 'react';
-import { env } from '@/common/env/env';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { RootError } from '@/pages/Root/Root.error';
-import { Root } from '@/pages/Root/Root.page';
-import { SignIn } from '@/pages/SignIn/SignIn.page';
-import { Entity } from '@/pages/Entity/Entity.page';
-import { Entities } from '@/pages/Entities/Entities.page';
 import { RouteError } from '@/common/components/atoms/RouteError/RouteError';
-import { CaseManagement } from '@/pages/CaseManagement/CaseManagement.page';
-import { rootLoader } from '@/pages/Root/Root.loader';
-import { entitiesLoader } from '@/pages/Entities/Entities.loader';
-import { authenticatedLayoutLoader } from '@/domains/auth/components/AuthenticatedLayout/AuthenticatedLayout.loader';
-import { entityLoader } from '@/pages/Entity/Entity.loader';
+import { RouteErrorWithProviders } from '@/common/components/atoms/RouteError/RouteErrorWithProviders';
+import { env } from '@/common/env/env';
 import { AuthenticatedLayout } from '@/domains/auth/components/AuthenticatedLayout';
+import { authenticatedLayoutLoader } from '@/domains/auth/components/AuthenticatedLayout/AuthenticatedLayout.loader';
 import { UnauthenticatedLayout } from '@/domains/auth/components/UnauthenticatedLayout';
-import { Locale } from '@/pages/Locale/Locale.page';
 import { unauthenticatedLayoutLoader } from '@/domains/auth/components/UnauthenticatedLayout/UnauthenticatedLayout.loader';
+import { MerchantMonitoringLayout } from '@/domains/business-reports/components/MerchantMonitoringLayout/MerchantMonitoringLayout';
+import { CaseManagement } from '@/pages/CaseManagement/CaseManagement.page';
 import { Document } from '@/pages/Document/Document.page';
-import { TransactionMonitoringAlerts } from '@/pages/TransactionMonitoringAlerts/TransactionMonitoringAlerts.page';
-import { TransactionMonitoring } from '@/pages/TransactionMonitoring/TransactionMonitoring';
-import { TransactionMonitoringAlertsAnalysisPage } from '@/pages/TransactionMonitoringAlertsAnalysis/TransactionMonitoringAlertsAnalysis.page';
+import { entitiesLoader } from '@/pages/Entities/Entities.loader';
+import { Entities } from '@/pages/Entities/Entities.page';
+import { entityLoader } from '@/pages/Entity/Entity.loader';
+import { Entity } from '@/pages/Entity/Entity.page';
 import { Home } from '@/pages/Home/Home.page';
-import { Statistics } from '@/pages/Statistics/Statistics.page';
-import { Workflows } from '@/pages/Workflows/Workflows.page';
+import { Locale } from '@/pages/Locale/Locale.page';
 import { MerchantMonitoring } from '@/pages/MerchantMonitoring/MerchantMonitoring.page';
-import { MerchantMonitoringCreateCheckPage } from '@/pages/MerchantMonitoringCreateCheck/MerchantMonitoringCreateCheck.page';
 import { MerchantMonitoringBusinessReport } from '@/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page';
-import { MerchantMonitoringLayout } from '@/domains/business-reports/components/MerchantMonitoringLayout/MerchantMonitoringLayout';
-import { NotFoundRedirectWithProviders } from '@/pages/NotFound/NotFoundRedirectWithProviders';
-import { RouteErrorWithProviders } from '@/common/components/atoms/RouteError/RouteErrorWithProviders';
+import { MerchantMonitoringCreateCheckPage } from '@/pages/MerchantMonitoringCreateCheck/MerchantMonitoringCreateCheck.page';
 import { MerchantMonitoringUploadMultiplePage } from '@/pages/MerchantMonitoringUploadMultiple/MerchantMonitoringUploadMultiple.page';
+import { NotFoundRedirectWithProviders } from '@/pages/NotFound/NotFoundRedirectWithProviders';
+import { RootError } from '@/pages/Root/Root.error';
+import { rootLoader } from '@/pages/Root/Root.loader';
+import { Root } from '@/pages/Root/Root.page';
+import { SignIn } from '@/pages/SignIn/SignIn.page';
+import { Statistics } from '@/pages/Statistics/Statistics.page';
+import { TransactionMonitoring } from '@/pages/TransactionMonitoring/TransactionMonitoring';
+import { TransactionMonitoringAlerts } from '@/pages/TransactionMonitoringAlerts/TransactionMonitoringAlerts.page';
+import { TransactionMonitoringAlertsAnalysisPage } from '@/pages/TransactionMonitoringAlertsAnalysis/TransactionMonitoringAlertsAnalysis.page';
+import { Workflows } from '@/pages/Workflows/Workflows.page';
+import { FunctionComponent } from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 const router = createBrowserRouter([
   {
@@ -176,7 +176,7 @@ const router = createBrowserRouter([
         ],
       },
       {
-        element: <Document />,
+        element: <Document wrapperClassName="justify-center max-w-[600px]" />,
         loader: authenticatedLayoutLoader,
         errorElement: <RouteError />,
         path: '/:locale/case-management/entities/:entityId/document/:documentId',

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,9 +1,9 @@
 import { FunctionComponentWithChildren } from '@/common/types';
-import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { ctw } from '@/common/utils/ctw/ctw';
 import { isPdf } from '@/common/utils/is-pdf/is-pdf';
 import { ComponentProps } from 'react';
 import ReactCrop, { Crop } from 'react-image-crop';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 
 export interface IImageEditorProps {
   onTransformed: NonNullable<ComponentProps<typeof TransformWrapper>['onTransformed']>;
@@ -28,31 +28,39 @@ export const ImageEditor: FunctionComponentWithChildren<IImageEditorProps> = ({
   return (
     <TransformWrapper onTransformed={onTransformed}>
       <TransformComponent
-        wrapperClass={`max-w-[441px]`}
-        contentClass={ctw(`overflow-x-auto`, {
+        wrapperClass={`d-full max-w-[600px] max-h-[600px] h-full`}
+        contentClass={ctw({
           'hover:cursor-move': !isPdf(image),
         })}
         wrapperStyle={{
           width: '100%',
+          maxHeight: '600px',
           height: '100%',
+          overflow: 'hidden',
         }}
         contentStyle={{
           width: '100%',
           height: '100%',
+          display: !isPdf(image) ? 'block' : 'flex',
         }}
       >
         <ReactCrop
           crop={crop}
           onChange={onCrop}
           disabled={!isCropping || isPdf(image) || isRotatedOrTransformed}
-          className={ctw({
-            'd-full [&>div]:d-full': isPdf(image),
-            'rotate-90': imageRotation === 90,
-            'rotate-180': imageRotation === 180,
-            'rotate-[270deg]': imageRotation === 270,
+          className={ctw('h-full w-full overflow-hidden [&>div]:!w-full', {
+            'flex flex-row [&>div]:min-h-[600px]': isPdf(image),
           })}
         >
-          {children}
+          <div
+            className={ctw('flex h-full', {
+              'rotate-90': imageRotation === 90,
+              'rotate-180': imageRotation === 180,
+              'rotate-[270deg]': imageRotation === 270,
+            })}
+          >
+            {children}
+          </div>
         </ReactCrop>
       </TransformComponent>
     </TransformWrapper>

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,9 +1,9 @@
-import { BallerineImage } from '../../atoms/BallerineImage';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { ctw } from '../../../utils/ctw/ctw';
+import { isPdf } from '../../../utils/is-pdf/is-pdf';
+import { BallerineImage } from '../../atoms/BallerineImage';
 import { useSelectedImage } from './hooks/useSelectedImage/useSelectedImage';
 import { TSelectedImageProps } from './interfaces';
-import { isPdf } from '../../../utils/is-pdf/is-pdf';
 
 /**
  * @description To be used by {@link ImageViewer}. Uses {@link BallerineImage} to display the currently selected image with default styling.
@@ -34,10 +34,10 @@ export const SelectedImage = forwardRef<HTMLImageElement | HTMLIFrameElement, TS
     if (isPdf(selectedImage)) {
       return (
         <iframe
-          src={selectedImage?.imageUrl}
+          src={selectedImage?.imageUrl + '#toolbar=0&navpanes=0'}
           ref={ref}
           className={ctw(className, `d-full mx-auto`, {
-            'h-[600px] w-[441px]': isPlaceholder,
+            'h-[600px] w-[600px]': isPlaceholder,
           })}
           {...props}
         />
@@ -50,7 +50,7 @@ export const SelectedImage = forwardRef<HTMLImageElement | HTMLIFrameElement, TS
         src={selectedImage?.imageUrl}
         alt={'Selected image'}
         className={ctw(className, `mx-auto`, {
-          '!h-[600px] !w-[441px]': isPlaceholder,
+          '!h-[600px] !w-[600px]': isPlaceholder,
         })}
         ref={ref}
         isLoading={isLoading}

diff --git a/apps/backoffice-v2/src/lib/blocks/components/BlockCell/BlockCell.tsx b/apps/backoffice-v2/src/lib/blocks/components/BlockCell/BlockCell.tsx
@@ -1,14 +1,15 @@
-import { ctw } from '@/common/utils/ctw/ctw';
-import { CardContent } from '@/common/components/atoms/Card/Card.Content';
 import { Card } from '@/common/components/atoms/Card/Card';
-import { FunctionComponent } from 'react';
-import { Block } from '@ballerine/blocks';
+import { CardContent } from '@/common/components/atoms/Card/Card.Content';
+import { ctw } from '@/common/utils/ctw/ctw';
 import { cells } from '@/lib/blocks/create-blocks-typed/create-blocks-typed';
+import { Block } from '@ballerine/blocks';
+import { FunctionComponent } from 'react';
 
 interface IBlockCellProps {
   value: Block;
   props?: {
     className?: string;
+    contentClassName?: string;
   };
 }
 
@@ -20,9 +21,13 @@ export const BlockCell: FunctionComponent<IBlockCellProps> = ({ value, props })
   return (
     <Card className={ctw('me-4 shadow-[0_4px_4px_0_rgba(174,174,174,0.0625)]', props?.className)}>
       <CardContent
-        className={ctw('grid gap-2', {
-          'grid-cols-2': value?.some(cell => cell?.type === 'multiDocuments'),
-        })}
+        className={ctw(
+          'grid gap-2',
+          {
+            'grid-cols-2': value?.some(cell => cell?.type === 'multiDocuments'),
+          },
+          props?.contentClassName,
+        )}
       >
         {value?.map((cell, index) => {
           const Cell = cells[cell?.type];

diff --git a/apps/backoffice-v2/src/lib/blocks/create-blocks-typed/create-blocks-typed.ts b/apps/backoffice-v2/src/lib/blocks/create-blocks-typed/create-blocks-typed.ts
@@ -5,23 +5,23 @@ import { CallToAction } from '@/lib/blocks/components/CallToAction/CallToAction'
 import { CallToActionLegacy } from '@/lib/blocks/components/CallToActionLegacy/CallToActionLegacy';
 import { CaseCallToActionLegacy } from '@/lib/blocks/components/CaseCallToActionLegacy/CaseCallToActionLegacy';
 import { Container } from '@/lib/blocks/components/Container/Container';
+import { DataTableCell } from '@/lib/blocks/components/DataTableCell/DataTableCell';
 import { Details } from '@/lib/blocks/components/Details/Details';
 import { DialogCell } from '@/lib/blocks/components/DialogCell/DialogCell';
 import { FaceComparison } from '@/lib/blocks/components/FaceComparison/FaceComparison';
 import { Heading } from '@/lib/blocks/components/Heading/Heading';
+import { ImageCell } from '@/lib/blocks/components/ImageCell/ImageCell';
 import { MapCell } from '@/lib/blocks/components/MapCell/MapCell';
 import { MultiDocuments } from '@/lib/blocks/components/MultiDocuments/MultiDocuments';
 import { NestedDetails } from '@/lib/blocks/components/NestedDetails/NestedDetails';
 import { NodeCell } from '@/lib/blocks/components/NodeCell/NodeCell';
 import { PDFViewerCell } from '@/lib/blocks/components/PDFViewerCell/PDFViewer';
 import { Paragraph } from '@/lib/blocks/components/Paragraph/Paragraph';
+import { ReadOnlyDetailsCell } from '@/lib/blocks/components/ReadOnlyDetailsCell/ReadOnlyDetailsCell';
 import { Subheading } from '@/lib/blocks/components/Subheading/Subheading';
 import { TableCell } from '@/lib/blocks/components/TableCell/TableCell';
 import { TCell } from '@/lib/blocks/create-blocks-typed/types';
 import { CellsMap, createBlocks } from '@ballerine/blocks';
-import { DataTableCell } from '@/lib/blocks/components/DataTableCell/DataTableCell';
-import { ReadOnlyDetailsCell } from '@/lib/blocks/components/ReadOnlyDetailsCell/ReadOnlyDetailsCell';
-import { ImageCell } from '@/lib/blocks/components/ImageCell/ImageCell';
 
 export const createBlocksTyped = () => createBlocks<TCell>();
 

diff --git a/apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx b/apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx
@@ -1,7 +1,8 @@
 import { MotionButton } from '@/common/components/molecules/MotionButton/MotionButton';
+import { checkIsIndividual } from '@/common/utils/check-is-individual/check-is-individual';
 import { ctw } from '@/common/utils/ctw/ctw';
-import { CommonWorkflowStates, StateTag, valueOrNA } from '@ballerine/common';
 import { useApproveTaskByIdMutation } from '@/domains/entities/hooks/mutations/useApproveTaskByIdMutation/useApproveTaskByIdMutation';
+import { useDocumentOcr } from '@/domains/entities/hooks/mutations/useDocumentOcr/useDocumentOcr';
 import { useRejectTaskByIdMutation } from '@/domains/entities/hooks/mutations/useRejectTaskByIdMutation/useRejectTaskByIdMutation';
 import { useRemoveDecisionTaskByIdMutation } from '@/domains/entities/hooks/mutations/useRemoveDecisionTaskByIdMutation/useRemoveDecisionTaskByIdMutation';
 import { useStorageFilesQuery } from '@/domains/storage/hooks/queries/useStorageFilesQuery/useStorageFilesQuery';
@@ -22,13 +23,12 @@ import {
 } from '@/pages/Entity/hooks/useEntityLogic/utils';
 import { selectWorkflowDocuments } from '@/pages/Entity/selectors/selectWorkflowDocuments';
 import { getDocumentsSchemas } from '@/pages/Entity/utils/get-documents-schemas/get-documents-schemas';
+import { CommonWorkflowStates, StateTag, valueOrNA } from '@ballerine/common';
 import { Button, TextArea } from '@ballerine/ui';
 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';
-import { checkIsIndividual } from '@/common/utils/check-is-individual/check-is-individual';
 
 export const useDocumentBlocks = ({
   workflow,
@@ -513,6 +513,10 @@ export const useDocumentBlocks = ({
                 isDocumentRevision,
               'bg-warning/10': isDocumentRevision && !workflow?.tags?.includes(StateTag.REVISION),
             }),
+            props: {
+              contentClassName:
+                'grid grid-cols-[1fr_minmax(240px,280px)] md:grid-cols-[1fr_minmax(240px,360px)] lg:grid-cols-[1fr_minmax(240px,441px)] 2xl:grid-cols-[1fr_minmax(240px,600px)] grid-rows-[auto_1fr] gap-4 [&>*:first-child]:col-span-2',
+            },
             value: createBlocksTyped()
               .addBlock()
               .addCell(headerCell)

diff --git a/apps/backoffice-v2/src/pages/Document/Document.page.tsx b/apps/backoffice-v2/src/pages/Document/Document.page.tsx
@@ -1,12 +1,22 @@
-import { Case } from '../Entity/components/Case/Case';
 import { useDocumentLogic } from '@/pages/Document/hooks/useDocumentLogic/useDocumentLogic';
+import { Case } from '../Entity/components/Case/Case';
+
+interface IDocumentProps {
+  wrapperClassName?: string;
+}
 
-export const Document = () => {
+export const Document = ({ wrapperClassName }: IDocumentProps) => {
   const { documents, isLoading } = useDocumentLogic();
 
   if (isLoading) {
     return null;
   }
 
-  return <Case.Documents hideOpenExternalButton documents={documents} />;
+  return (
+    <Case.Documents
+      hideOpenExternalButton
+      documents={documents}
+      wrapperClassName={wrapperClassName}
+    />
+  );
 };
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
@@ -1,11 +1,11 @@
 import { Download, ExternalLinkIcon, FileText } from 'lucide-react';
 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 { 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 };
@@ -37,7 +37,7 @@ export const DocumentsToolbar: FunctionComponent<{
   });
 
   return (
-    <div className={`absolute z-50 flex space-x-2 bottom-right-6`}>
+    <div className={`absolute bottom-4 right-4 z-50 flex space-x-2`}>
       <ImageOCR
         isOcrDisabled={!isOCREnabled}
         onOcrPressed={onOcrPressed}

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
@@ -29,6 +29,7 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
   isDocumentEditable,
   isLoadingOCR,
   hideOpenExternalButton,
+  wrapperClassName,
 }) => {
   const {
     crop,
@@ -52,13 +53,8 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
 
   return (
     <ImageViewer selectedImage={selectedImage} onSelectImage={onSelectImage}>
-      <div className={`flex min-h-[600px] w-full flex-col items-center`}>
-        <div
-          className={ctw(
-            `
-            d-full relative flex justify-center rounded-md`,
-          )}
-        >
+      <div className={`flex w-full flex-col items-center`}>
+        <div className={ctw(`d-full relative flex rounded-md`, wrapperClassName)}>
           {!shouldDownload && (
             <ImageEditor
               image={selectedImage}

diff --git a/.../pages/Entity/components/Case/hooks/useDocumentsToolbarLogic/useDocumentsToolbarLogic.tsx b/.../pages/Entity/components/Case/hooks/useDocumentsToolbarLogic/useDocumentsToolbarLogic.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
-import { BroadcastChannel } from 'broadcast-channel';
 import { CommunicationChannel, CommunicationChannelEvent } from '@/common/enums';
+import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
 import { useWorkflowByIdQuery } from '@/domains/workflows/hooks/queries/useWorkflowByIdQuery/useWorkflowByIdQuery';
+import { BroadcastChannel } from 'broadcast-channel';
 import { useParams } from 'react-router-dom';
-import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
 
 interface IUseDocumentsToolbarProps {
   imageId: string;

diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts b/apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts
@@ -51,6 +51,7 @@ export interface IDocumentsProps {
   isLoadingOCR?: boolean;
   isDocumentEditable?: boolean;
   hideOpenExternalButton?: boolean;
+  wrapperClassName?: string;
 }
 
 export interface IFaceMatchProps extends ComponentProps<'div'> {