feat: added rendering of merchant screening input to backoffice

ballerine-io · Jan 22, 2025 · bf5680a · bf5680a
1 parent e1d489e
commit bf5680a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 26 deletions.
diff --git a/apps/backoffice-v2/src/domains/workflows/fetchers.ts b/apps/backoffice-v2/src/domains/workflows/fetchers.ts
@@ -133,6 +133,17 @@ export const BaseWorkflowByIdSchema = z.object({
       })
       .passthrough()
       .optional(),
+    pluginsInput: z
+      .object({
+        merchantScreening: z
+          .object({
+            requestPayload: z.record(z.string(), z.unknown()).optional(),
+          })
+          .passthrough()
+          .optional(),
+      })
+      .passthrough()
+      .optional(),
     metadata: z
       .object({
         collectionFlowUrl: z.string().url().optional(),

diff --git a/apps/backoffice-v2/src/lib/blocks/hooks/useMerchantScreeningBlock/columns.tsx b/apps/backoffice-v2/src/lib/blocks/hooks/useMerchantScreeningBlock/columns.tsx
@@ -1,12 +1,11 @@
-import { createColumnHelper } from '@tanstack/react-table';
 import { Button } from '@/common/components/atoms/Button/Button';
-import { ChevronDown } from 'lucide-react';
-import { ctw } from '@/common/utils/ctw/ctw';
-import { JsonDialog, TextWithNAFallback, WarningFilledSvg } from '@ballerine/ui';
 import { IndicatorCircle } from '@/common/components/atoms/IndicatorCircle/IndicatorCircle';
-import React from 'react';
+import { ctw } from '@/common/utils/ctw/ctw';
 import { IMerchantScreening } from '@/lib/blocks/hooks/useMerchantScreeningBlock/interfaces';
 import { isObject, MatchReasonCode } from '@ballerine/common';
+import { JsonDialog, TextWithNAFallback, WarningFilledSvg } from '@ballerine/ui';
+import { createColumnHelper } from '@tanstack/react-table';
+import { ChevronDown } from 'lucide-react';
 
 const columnHelper = createColumnHelper<IMerchantScreening>();
 
@@ -15,6 +14,7 @@ const summaryColumnHelper = createColumnHelper<{
   numberOfInquiries: number;
   checkDate: string;
   fullJsonData: string;
+  merchantScreeningInput: Record<PropertyKey, unknown>;
 }>();
 
 export const terminatedMatchedMerchantsColumns = [
@@ -123,8 +123,28 @@ export const terminatedMatchedMerchantsSummaryColumns = [
       return <TextWithNAFallback>{checkDate}</TextWithNAFallback>;
     },
   }),
+  summaryColumnHelper.accessor('merchantScreeningInput', {
+    header: 'Checked Properties',
+    cell: info => {
+      const fullJsonData = info.getValue();
+
+      return (
+        <div className={`flex items-end justify-start`}>
+          <JsonDialog
+            buttonProps={{
+              variant: 'link',
+              className: 'p-0 text-blue-500',
+              disabled: !isObject(fullJsonData) && !Array.isArray(fullJsonData),
+            }}
+            dialogButtonText={`View`}
+            json={JSON.stringify(fullJsonData)}
+          />
+        </div>
+      );
+    },
+  }),
   summaryColumnHelper.accessor('fullJsonData', {
-    header: 'Full JSON Data',
+    header: 'Results',
     cell: info => {
       const fullJsonData = info.getValue();
 

diff --git a/...ackoffice-v2/src/lib/blocks/hooks/useMerchantScreeningBlock/useMerchantScreeningBlock.tsx b/...ackoffice-v2/src/lib/blocks/hooks/useMerchantScreeningBlock/useMerchantScreeningBlock.tsx
@@ -1,29 +1,31 @@
-import React, { useMemo } from 'react';
-import { createBlocksTyped } from '@/lib/blocks/create-blocks-typed/create-blocks-typed';
 import { IndicatorCircle } from '@/common/components/atoms/IndicatorCircle/IndicatorCircle';
 import { ReadOnlyDetail } from '@/common/components/atoms/ReadOnlyDetail/ReadOnlyDetail';
+import { createBlocksTyped } from '@/lib/blocks/create-blocks-typed/create-blocks-typed';
+import { useMemo } from 'react';
 
-import { IMerchantScreening } from '@/lib/blocks/hooks/useMerchantScreeningBlock/interfaces';
+import { ctw } from '@/common/utils/ctw/ctw';
 import {
   inquiredMatchedMerchantsColumns,
   terminatedMatchedMerchantsColumns,
   terminatedMatchedMerchantsSummaryColumns,
 } from '@/lib/blocks/hooks/useMerchantScreeningBlock/columns';
-import { toTitleCase } from 'string-ts';
 import { formatValue } from '@/lib/blocks/hooks/useMerchantScreeningBlock/format-value';
+import { IMerchantScreening } from '@/lib/blocks/hooks/useMerchantScreeningBlock/interfaces';
 import { isObject, safeEvery } from '@ballerine/common';
-import { ctw } from '@/common/utils/ctw/ctw';
 import { JsonDialog } from '@ballerine/ui';
+import { toTitleCase } from 'string-ts';
 
 export const useMerchantScreeningBlock = ({
   terminatedMatchedMerchants,
   inquiredMatchedMerchants,
+  merchantScreeningInput,
   logoUrl = 'https://cdn.ballerine.io/logos/Mastercard%20logo.svg',
   rawData,
   checkDate,
 }: {
   terminatedMatchedMerchants: IMerchantScreening[];
   inquiredMatchedMerchants: IMerchantScreening[];
+  merchantScreeningInput: Record<PropertyKey, unknown>;
   logoUrl: string;
   rawData: Record<PropertyKey, unknown>;
   checkDate: string;
@@ -73,6 +75,7 @@ export const useMerchantScreeningBlock = ({
                       terminatedMatches: terminatedMatchedMerchants?.length ?? 0,
                       numberOfInquiries: inquiredMatchedMerchants?.length ?? 0,
                       checkDate,
+                      merchantScreeningInput: merchantScreeningInput ?? {},
                       fullJsonData: rawData ?? {},
                     },
                   ],

diff --git a/...c/lib/blocks/variants/DefaultBlocks/hooks/useDefaultBlocksLogic/useDefaultBlocksLogic.tsx b/...c/lib/blocks/variants/DefaultBlocks/hooks/useDefaultBlocksLogic/useDefaultBlocksLogic.tsx
@@ -1,17 +1,25 @@
 import { MotionButton } from '@/common/components/molecules/MotionButton/MotionButton';
+import { useSearchParamsByEntity } from '@/common/hooks/useSearchParamsByEntity/useSearchParamsByEntity';
 import { ctw } from '@/common/utils/ctw/ctw';
+import { omitPropsFromObjectWhitelist } from '@/common/utils/omit-props-from-object-whitelist/omit-props-from-object-whitelist';
 import { useAuthenticatedUserQuery } from '@/domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery';
 import { useRevisionTaskByIdMutation } from '@/domains/entities/hooks/mutations/useRevisionTaskByIdMutation/useRevisionTaskByIdMutation';
 import { useStorageFilesQuery } from '@/domains/storage/hooks/queries/useStorageFilesQuery/useStorageFilesQuery';
+import { TWorkflowById } from '@/domains/workflows/fetchers';
 import { useEventMutation } from '@/domains/workflows/hooks/mutations/useEventMutation/useEventMutation';
+import { useAmlBlock } from '@/lib/blocks/components/AmlBlock/hooks/useAmlBlock/useAmlBlock';
+import { createBlocksTyped } from '@/lib/blocks/create-blocks-typed/create-blocks-typed';
+import { useAddressBlock } from '@/lib/blocks/hooks/useAddressBlock/useAddressBlock';
 import { useAssociatedCompaniesInformationBlock } from '@/lib/blocks/hooks/useAssociatedCompaniesInformationBlock/useAssociatedCompaniesInformationBlock';
 import { associatedCompanyAdapter } from '@/lib/blocks/hooks/useAssosciatedCompaniesBlock/associated-company-adapter';
+import { associatedCompanyToWorkflowAdapter } from '@/lib/blocks/hooks/useAssosciatedCompaniesBlock/associated-company-to-workflow-adapter';
 import {
   motionButtonProps,
   useAssociatedCompaniesBlock,
 } from '@/lib/blocks/hooks/useAssosciatedCompaniesBlock/useAssociatedCompaniesBlock';
 import { useBankingDetailsBlock } from '@/lib/blocks/hooks/useBankingDetailsBlock/useBankingDetailsBlock';
 import { useCaseInfoBlock } from '@/lib/blocks/hooks/useCaseInfoBlock/useCaseInfoBlock';
+import { useCaseOverviewBlock } from '@/lib/blocks/hooks/useCaseOverviewBlock/useCaseOverviewBlock';
 import { useCompanySanctionsBlock } from '@/lib/blocks/hooks/useCompanySanctionsBlock/useCompanySanctionsBlock';
 import { useDirectorsBlocks } from '@/lib/blocks/hooks/useDirectorsBlocks';
 import { useDirectorsRegistryProvidedBlock } from '@/lib/blocks/hooks/useDirectorsRegistryProvidedBlock/useDirectorsRegistryProvidedBlock';
@@ -24,6 +32,8 @@ import { useKybRegistryInfoBlock } from '@/lib/blocks/hooks/useKybRegistryInfoBl
 import { useMainContactBlock } from '@/lib/blocks/hooks/useMainContactBlock/useMainContactBlock';
 import { useMainRepresentativeBlock } from '@/lib/blocks/hooks/useMainRepresentativeBlock/useMainRepresentativeBlock';
 import { useMapBlock } from '@/lib/blocks/hooks/useMapBlock/useMapBlock';
+import { useMerchantScreeningBlock } from '@/lib/blocks/hooks/useMerchantScreeningBlock/useMerchantScreeningBlock';
+import { useObjectEntriesBlock } from '@/lib/blocks/hooks/useObjectEntriesBlock/useObjectEntriesBlock';
 import { useProcessingDetailsBlock } from '@/lib/blocks/hooks/useProcessingDetailsBlock/useProcessingDetailsBlock';
 import { useRegistryInfoBlock } from '@/lib/blocks/hooks/useRegistryInfoBlock/useRegistryInfoBlock';
 import { useStoreInfoBlock } from '@/lib/blocks/hooks/useStoreInfoBlock/useStoreInfoBlock';
@@ -32,32 +42,22 @@ import { useUbosUserProvidedBlock } from '@/lib/blocks/hooks/useUbosUserProvided
 import { useWebsiteBasicRequirementBlock } from '@/lib/blocks/hooks/useWebsiteBasicRequirementBlock/useWebsiteBasicRequirementBlock';
 import { useWebsiteMonitoringBlock } from '@/lib/blocks/hooks/useWebsiteMonitoringBlock/useWebsiteMonitoringBlock';
 import { useCaseBlocks } from '@/lib/blocks/variants/DefaultBlocks/hooks/useCaseBlocksLogic/useCaseBlocks';
+import { useWebsiteMonitoringReportBlock } from '@/lib/blocks/variants/WebsiteMonitoringBlocks/hooks/useWebsiteMonitoringReportBlock/useWebsiteMonitoringReportBlock';
 import { useCaseDecision } from '@/pages/Entity/components/Case/hooks/useCaseDecision/useCaseDecision';
 import { useCaseState } from '@/pages/Entity/components/Case/hooks/useCaseState/useCaseState';
+import { getAddressDeep } from '@/pages/Entity/hooks/useEntityLogic/utils/get-address-deep/get-address-deep';
 import { selectDirectorsDocuments } from '@/pages/Entity/selectors/selectDirectorsDocuments';
 import { Send } from 'lucide-react';
 import { useMemo } from 'react';
-import { useWebsiteMonitoringReportBlock } from '@/lib/blocks/variants/WebsiteMonitoringBlocks/hooks/useWebsiteMonitoringReportBlock/useWebsiteMonitoringReportBlock';
-import { createBlocksTyped } from '@/lib/blocks/create-blocks-typed/create-blocks-typed';
-import { useAddressBlock } from '@/lib/blocks/hooks/useAddressBlock/useAddressBlock';
-import { getAddressDeep } from '@/pages/Entity/hooks/useEntityLogic/utils/get-address-deep/get-address-deep';
-import { useCaseOverviewBlock } from '@/lib/blocks/hooks/useCaseOverviewBlock/useCaseOverviewBlock';
-import { useSearchParamsByEntity } from '@/common/hooks/useSearchParamsByEntity/useSearchParamsByEntity';
 import { useLocation } from 'react-router-dom';
-import { omitPropsFromObjectWhitelist } from '@/common/utils/omit-props-from-object-whitelist/omit-props-from-object-whitelist';
-import { useObjectEntriesBlock } from '@/lib/blocks/hooks/useObjectEntriesBlock/useObjectEntriesBlock';
-import { useAmlBlock } from '@/lib/blocks/components/AmlBlock/hooks/useAmlBlock/useAmlBlock';
-import { associatedCompanyToWorkflowAdapter } from '@/lib/blocks/hooks/useAssosciatedCompaniesBlock/associated-company-to-workflow-adapter';
-import { useMerchantScreeningBlock } from '@/lib/blocks/hooks/useMerchantScreeningBlock/useMerchantScreeningBlock';
-import { TWorkflowById } from '@/domains/workflows/fetchers';
 
 const registryInfoWhitelist = ['open_corporates'] as const;
 
-import { Button } from '@ballerine/ui';
+import { useManageUbosBlock } from '@/lib/blocks/hooks/useManageUbosBlock/useManageUbosBlock';
 import { useCurrentCaseQuery } from '@/pages/Entity/hooks/useCurrentCaseQuery/useCurrentCaseQuery';
-import { toast } from 'sonner';
+import { Button } from '@ballerine/ui';
 import { useCallback } from 'react';
-import { useManageUbosBlock } from '@/lib/blocks/hooks/useManageUbosBlock/useManageUbosBlock';
+import { toast } from 'sonner';
 
 export const useDefaultBlocksLogic = () => {
   const [{ activeTab }] = useSearchParamsByEntity();
@@ -469,6 +469,8 @@ export const useDefaultBlocksLogic = () => {
     inquiredMatchedMerchants:
       workflow?.context?.pluginsOutput?.merchantScreening?.processed?.inquiredMatchedMerchants ??
       [],
+    merchantScreeningInput:
+      workflow?.context?.pluginsInput?.merchantScreening?.requestPayload || {},
     logoUrl: workflow?.context?.pluginsOutput?.merchantScreening?.logoUrl,
     rawData: workflow?.context?.pluginsOutput?.merchantScreening?.raw,
     checkDate: workflow?.context?.pluginsOutput?.merchantScreening?.processed?.checkDate,