Use report_outcomes for report display (#3035)

* fix: table page * wip * fix: formating * wip * fix: small fixes * fix * fix: ui bug * build: new version * fix: validate report metadata * fix: pr comments
ballerine-io · Feb 13, 2025 · fc5dbfd · fc5dbfd
1 parent 36b1b8c
commit fc5dbfd
Show file tree

Hide file tree

Showing 62 changed files with 945 additions and 1,055 deletions.
diff --git a/apps/backoffice-v2/CHANGELOG.md b/apps/backoffice-v2/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @ballerine/backoffice-v2
 
+## 0.7.99
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/common@0.9.71
+  - @ballerine/ui@0.5.75
+  - @ballerine/workflow-browser-sdk@0.6.91
+  - @ballerine/react-pdf-toolkit@1.2.75
+  - @ballerine/workflow-node-sdk@0.6.91
+
 ## 0.7.98
 
 ### Patch Changes

diff --git a/apps/backoffice-v2/package.json b/apps/backoffice-v2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.98",
+  "version": "0.7.99",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "type": "module",
@@ -53,11 +53,11 @@
   },
   "dependencies": {
     "@ballerine/blocks": "0.2.34",
-    "@ballerine/common": "0.9.70",
-    "@ballerine/workflow-browser-sdk": "0.6.90",
-    "@ballerine/workflow-node-sdk": "0.6.90",
-    "@ballerine/react-pdf-toolkit": "^1.2.67",
-    "@ballerine/ui": "^0.5.73",
+    "@ballerine/common": "0.9.71",
+    "@ballerine/workflow-browser-sdk": "0.6.91",
+    "@ballerine/workflow-node-sdk": "0.6.91",
+    "@ballerine/react-pdf-toolkit": "^1.2.75",
+    "@ballerine/ui": "^0.5.75",
     "@botpress/webchat": "^2.1.10",
     "@botpress/webchat-generator": "^0.2.9",
     "@fontsource/inter": "^4.5.15",

diff --git a/apps/backoffice-v2/src/domains/business-reports/constants.ts b/apps/backoffice-v2/src/domains/business-reports/constants.ts
diff --git a/apps/backoffice-v2/src/domains/business-reports/fetchers.ts b/apps/backoffice-v2/src/domains/business-reports/fetchers.ts
@@ -13,53 +13,24 @@ import {
   MERCHANT_REPORT_STATUSES_MAP,
   MERCHANT_REPORT_TYPES,
   MERCHANT_REPORT_VERSIONS,
+  MerchantReportStatus,
   MerchantReportType,
   MerchantReportVersion,
-} from '@/domains/business-reports/constants';
-
-export const BusinessReportSchema = z
-  .object({
-    id: z.string(),
-    reportType: z.enum([MERCHANT_REPORT_TYPES[0]!, ...MERCHANT_REPORT_TYPES.slice(1)]),
-    createdAt: z.string().datetime(),
-    updatedAt: z.string().datetime(),
-    displayDate: z.string().datetime(),
-    riskScore: z.number().nullable(),
-    status: z.enum([MERCHANT_REPORT_STATUSES[0]!, ...MERCHANT_REPORT_STATUSES.slice(1)]),
-    parentCompanyName: z.string().nullable(),
-    merchantId: z.string(),
-    workflowVersion: z.enum([MERCHANT_REPORT_VERSIONS[0]!, ...MERCHANT_REPORT_VERSIONS.slice(1)]),
-    isAlert: z.boolean().nullish(),
-    companyName: z.string().nullish(),
-    monitoringStatus: z.boolean(),
-    website: z.object({
-      id: z.string(),
-      url: z.string().url(),
-      createdAt: z
-        .string()
-        .datetime()
-        .transform(value => new Date(value)),
-      updatedAt: z
-        .string()
-        .datetime()
-        .transform(value => new Date(value)),
-    }),
-    data: z.record(z.string(), z.unknown()).nullish(),
-  })
-  .transform(data => ({
-    ...data,
-    status:
-      data.status === MERCHANT_REPORT_STATUSES_MAP.failed
-        ? MERCHANT_REPORT_STATUSES_MAP['quality-control']
-        : data.status,
-    companyName:
-      data?.companyName ??
-      (data?.data?.websiteCompanyAnalysis as UnknownRecord | undefined)?.companyName ??
-      data?.parentCompanyName,
-    website: data?.website.url,
-    data: data.status === 'completed' ? data?.data : null,
-    riskScore: data.status === 'completed' ? data?.riskScore : null,
-  }));
+  ReportSchema,
+} from '@ballerine/common';
+
+const statusOverrides = {
+  [MERCHANT_REPORT_STATUSES_MAP.failed]: MERCHANT_REPORT_STATUSES_MAP['in-progress'],
+  [MERCHANT_REPORT_STATUSES_MAP['quality-control']]: MERCHANT_REPORT_STATUSES_MAP['in-progress'],
+} as const satisfies Partial<Record<MerchantReportStatus, MerchantReportStatus>>;
+
+export const BusinessReportSchema = ReportSchema.transform(data => ({
+  ...data,
+  status: data.status in statusOverrides ? statusOverrides[data.status] : data.status,
+  website: data.website.url,
+  riskLevel: data.status === MERCHANT_REPORT_STATUSES_MAP.completed ? data.riskLevel : null,
+  data: data.status === MERCHANT_REPORT_STATUSES_MAP.completed ? data?.data : null,
+}));
 
 export const BusinessReportsSchema = z.object({
   data: z.array(BusinessReportSchema),

diff --git a/...toringBlocks/hooks/useWebsiteMonitoringReportBlock/WebsiteMonitoringBusinessReportTab.tsx b/...toringBlocks/hooks/useWebsiteMonitoringReportBlock/WebsiteMonitoringBusinessReportTab.tsx
@@ -9,6 +9,7 @@ import { TabsContent } from '@/common/components/organisms/Tabs/Tabs.Content';
 import { useWebsiteMonitoringBusinessReportTab } from '@/lib/blocks/variants/WebsiteMonitoringBlocks/hooks/useWebsiteMonitoringReportBlock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab';
 import { BusinessReportSummary } from '@ballerine/ui';
 import { RiskIndicatorLink } from '@/domains/business-reports/components/RiskIndicatorLink/RiskIndicatorLink';
+import { MERCHANT_REPORT_TYPES_MAP } from '@ballerine/common';
 
 export const WebsiteMonitoringBusinessReportTab = ({
   businessReport,
@@ -18,27 +19,21 @@ export const WebsiteMonitoringBusinessReportTab = ({
   const {
     activeMonitoringTab,
     riskIndicators,
-    riskLevels,
-    riskScore,
     tabs,
-    summary,
-    ongoingMonitoringSummary,
     getUpdatedSearchParamsWithActiveMonitoringTab,
     search,
-    homepageScreenshotUrl,
   } = useWebsiteMonitoringBusinessReportTab({
     businessReport,
   });
 
   return (
     <div className={'grid gap-y-4'}>
       <BusinessReportSummary
-        summary={summary}
-        ongoingMonitoringSummary={ongoingMonitoringSummary}
-        riskLevels={riskLevels}
+        summary={businessReport.data!.summary!}
+        ongoingMonitoringSummary={businessReport.data!.ongoingMonitoringSummary!}
         riskIndicators={riskIndicators}
-        riskScore={riskScore}
-        homepageScreenshotUrl={homepageScreenshotUrl}
+        riskScore={businessReport.data!.riskScore!}
+        homepageScreenshotUrl={businessReport.data!.homepageScreenshotUrl}
         Link={RiskIndicatorLink}
       />
       <Tabs defaultValue={activeMonitoringTab} className="w-full" key={activeMonitoringTab}>

diff --git a/...ock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab.tsx b/...ock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab.tsx
@@ -2,28 +2,20 @@ import { TBusinessReport } from '@/domains/business-reports/fetchers';
 import { useCallback } from 'react';
 import { useSearchParamsByEntity } from '@/common/hooks/useSearchParamsByEntity/useSearchParamsByEntity';
 import { useLocation } from 'react-router-dom';
-import { createReportAdapter, useReportTabs } from '@ballerine/ui';
+import { useReportTabs } from '@ballerine/ui';
 import { RiskIndicatorLink } from '@/domains/business-reports/components/RiskIndicatorLink/RiskIndicatorLink';
 import { UnknownRecord } from 'type-fest';
+import { MERCHANT_REPORT_TYPES_MAP } from '@ballerine/common';
 
 export const useWebsiteMonitoringBusinessReportTab = ({
   businessReport,
 }: {
   businessReport: TBusinessReport;
 }) => {
-  const { tabs: tabsWithSummary, riskIndicators: originalRiskIndicators } = useReportTabs({
-    reportVersion: businessReport?.workflowVersion,
-    report: businessReport?.data ?? {},
-    companyName:
-      (businessReport?.data?.websiteCompanyAnalysis as UnknownRecord | undefined)?.companyName ??
-      '',
+  const { tabs: tabsWithSummary, sectionsSummary: originalSectionsSummary } = useReportTabs({
+    report: businessReport ?? {},
     Link: RiskIndicatorLink,
   });
-  const adapter = createReportAdapter({
-    reportVersion: businessReport?.workflowVersion,
-  });
-  const { riskLevels, riskScore, summary, ongoingMonitoringSummary, homepageScreenshotUrl } =
-    adapter(businessReport?.data ?? {});
   const tabs = tabsWithSummary?.filter(tab => tab.value !== 'summary');
   const [{ activeMonitoringTab }] = useSearchParamsByEntity();
   const { search } = useLocation();
@@ -37,24 +29,19 @@ export const useWebsiteMonitoringBusinessReportTab = ({
     },
     [],
   );
-  const riskIndicators = originalRiskIndicators?.map(riskIndicator => ({
-    ...riskIndicator,
+  const riskIndicators = originalSectionsSummary?.map(section => ({
+    ...section,
     search: getUpdatedSearchParamsWithActiveMonitoringTab({
-      tab: riskIndicator.search.split('=')[1] ?? '',
+      tab: section.search.split('=')[1] ?? '',
       search,
     }),
   }));
 
   return {
     activeMonitoringTab,
     riskIndicators,
-    riskLevels,
-    riskScore,
     tabs,
-    summary,
-    ongoingMonitoringSummary,
     getUpdatedSearchParamsWithActiveMonitoringTab,
     search,
-    homepageScreenshotUrl,
   };
 };
diff --git a/...backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx b/...backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx
@@ -15,10 +15,10 @@ import { IndicatorCircle } from '@/common/components/atoms/IndicatorCircle/Indic
 import { useEllipsesWithTitle } from '@/common/hooks/useEllipsesWithTitle/useEllipsesWithTitle';
 import { ctw } from '@/common/utils/ctw/ctw';
 import {
+  getSeverityFromRiskScore,
   MERCHANT_REPORT_STATUSES_MAP,
   MERCHANT_REPORT_TYPES_MAP,
-} from '@/domains/business-reports/constants';
-import { getSeverityFromRiskScore } from '@ballerine/common';
+} from '@ballerine/common';
 import {
   Badge,
   CheckCircle,
@@ -65,25 +65,18 @@ export const columns = [
     },
     header: 'Website',
   }),
-  columnHelper.accessor('riskScore', {
+  columnHelper.accessor('riskLevel', {
     cell: info => {
-      const riskScore = info.getValue();
-      const severity = getSeverityFromRiskScore(riskScore);
+      const riskLevel = info.getValue();
 
       return (
         <div className="flex items-center gap-2">
-          {!riskScore && riskScore !== 0 && <TextWithNAFallback className={'py-0.5'} />}
-          {(riskScore || riskScore === 0) && (
-            <Badge
-              className={ctw(
-                severityToClassName[
-                  (severity?.toUpperCase() as keyof typeof severityToClassName) ?? 'DEFAULT'
-                ],
-                'w-20 py-0.5 font-bold',
-              )}
-            >
-              {titleCase(severity ?? '')}
+          {riskLevel ? (
+            <Badge className={ctw(severityToClassName[riskLevel], 'w-20 py-0.5 font-bold')}>
+              {titleCase(riskLevel)}
             </Badge>
+          ) : (
+            <TextWithNAFallback className={'py-0.5'} />
           )}
         </div>
       );
@@ -109,7 +102,7 @@ export const columns = [
               size={18}
               className={`stroke-background`}
               containerProps={{
-                className: 'me-3 bg-success mt-px',
+                className: 'bg-success',
               }}
             />
           ) : (

diff --git a/...MonitoringTable/hooks/useMerchantMonitoringTableLogic/useMerchantMonitoringTableLogic.tsx b/...MonitoringTable/hooks/useMerchantMonitoringTableLogic/useMerchantMonitoringTableLogic.tsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import { useLocale } from '@/common/hooks/useLocale/useLocale';
-import { MERCHANT_REPORT_STATUSES_MAP } from '@/domains/business-reports/constants';
+import { MERCHANT_REPORT_STATUSES_MAP } from '@ballerine/common';
 import { TBusinessReports } from '@/domains/business-reports/fetchers';
 
 export const useMerchantMonitoringTableLogic = () => {

diff --git a/...e-v2/src/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page.tsx b/...e-v2/src/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page.tsx
@@ -46,9 +46,9 @@ import { TabsContent } from '@/common/components/organisms/Tabs/Tabs.Content';
 import { TabsList } from '@/common/components/organisms/Tabs/Tabs.List';
 import { TabsTrigger } from '@/common/components/organisms/Tabs/Tabs.Trigger';
 import { ctw } from '@/common/utils/ctw/ctw';
-import { MERCHANT_REPORT_STATUSES_MAP } from '@/domains/business-reports/constants';
 import { Notes } from '@/domains/notes/Notes';
 import { useMerchantMonitoringBusinessReportLogic } from '@/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic';
+import { MERCHANT_REPORT_STATUSES_MAP } from '@ballerine/common';
 
 const DialogDropdownItem = forwardRef<
   React.ElementRef<typeof DropdownMenuItem>,

diff --git a/...oks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx b/...oks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx
@@ -11,12 +11,15 @@ import { useToggle } from '@/common/hooks/useToggle/useToggle';
 import { useZodSearchParams } from '@/common/hooks/useZodSearchParams/useZodSearchParams';
 import { safeUrl } from '@/common/utils/safe-url/safe-url';
 import { RiskIndicatorLink } from '@/domains/business-reports/components/RiskIndicatorLink/RiskIndicatorLink';
-import { MERCHANT_REPORT_STATUSES_MAP } from '@/domains/business-reports/constants';
 import { useBusinessReportByIdQuery } from '@/domains/business-reports/hooks/queries/useBusinessReportByIdQuery/useBusinessReportByIdQuery';
 import { useCreateNoteMutation } from '@/domains/notes/hooks/mutations/useCreateNoteMutation/useCreateNoteMutation';
 import { useNotesByNoteable } from '@/domains/notes/hooks/queries/useNotesByNoteable/useNotesByNoteable';
 import { useToggleMonitoringMutation } from '@/pages/MerchantMonitoringBusinessReport/hooks/useToggleMonitoringMutation/useToggleMonitoringMutation';
-import { isObject } from '@ballerine/common';
+import {
+  isObject,
+  MERCHANT_REPORT_STATUSES_MAP,
+  MERCHANT_REPORT_TYPES_MAP,
+} from '@ballerine/common';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLocale } from '@/common/hooks/useLocale/useLocale';
 
@@ -88,11 +91,11 @@ export const useMerchantMonitoringBusinessReportLogic = () => {
   });
 
   const onSubmit: SubmitHandler<z.infer<typeof ZodDeboardingSchema>> = async (data, e) => {
-    if (!businessReport?.merchantId) {
-      throw new Error('Merchant ID is missing');
+    if (!businessReport?.business.id) {
+      throw new Error('Business ID is missing');
     }
 
-    return turnOffMonitoringMutation.mutate(businessReport.merchantId);
+    return turnOffMonitoringMutation.mutate(businessReport.business.id);
   };
 
   const { mutateAsync: mutateCreateNote } = useCreateNoteMutation({ disableToast: true });
@@ -101,7 +104,7 @@ export const useMerchantMonitoringBusinessReportLogic = () => {
     onSuccess: () => {
       void mutateCreateNote({
         content: 'Monitoring turned on',
-        entityId: businessReport?.merchantId ?? '',
+        entityId: businessReport?.business.id ?? '',
         entityType: 'Business',
         noteableId: businessReport?.id ?? '',
         noteableType: 'Report',
@@ -131,7 +134,7 @@ export const useMerchantMonitoringBusinessReportLogic = () => {
         .join(' ');
       void mutateCreateNote({
         content,
-        entityId: businessReport?.merchantId ?? '',
+        entityId: businessReport?.business.id ?? '',
         entityType: 'Business',
         noteableId: businessReport?.id ?? '',
         noteableType: 'Report',
@@ -152,9 +155,7 @@ export const useMerchantMonitoringBusinessReportLogic = () => {
   });
 
   const { tabs } = useReportTabs({
-    reportVersion: businessReport?.workflowVersion,
-    report: businessReport?.data ?? {},
-    companyName: businessReport?.companyName,
+    report: businessReport ?? {},
     Link: RiskIndicatorLink,
   });
 

diff --git a/...tionMonitoringAlertsAnalysis/components/AlertAnalysisSheet/ExpandedTransactionDetails.tsx b/...tionMonitoringAlertsAnalysis/components/AlertAnalysisSheet/ExpandedTransactionDetails.tsx
@@ -56,10 +56,9 @@ export const ExpandedTransactionDetails = ({ transaction }: IExpandedTransaction
             </TextWithNAFallback>
             <CopyToClipboardButton textToCopy={transaction.transactionCorrelationId} />
           </div>
-          <TextWithNAFallback>{`${dayjs(transaction.transactionDate)
-            .format('MMM DD, YYYY')} ${dayjs(transaction.transactionDate)
-            .local()
-            .format('hh:mm')}`}</TextWithNAFallback>
+          <TextWithNAFallback>{`${dayjs(transaction.transactionDate).format(
+            'MMM DD, YYYY',
+          )} ${dayjs(transaction.transactionDate).local().format('hh:mm')}`}</TextWithNAFallback>
           <TextWithNAFallback>{titleCase(transaction.transactionStatus ?? '')}</TextWithNAFallback>
           <TextWithNAFallback>{titleCase(transaction.transactionType ?? '')}</TextWithNAFallback>
           <TextWithNAFallback>