Demo envs changes (#2813)

* wip changes for demo envs * feat(*): changes * fix(backoffice-v2): fixed useCollectionFlowUrlMutation
ballerine-io · Nov 8, 2024 · ac65909 · ac65909
1 parent 1827e32
commit ac65909
Show file tree

Hide file tree

Showing 15 changed files with 164 additions and 60 deletions.
diff --git a/apps/backoffice-v2/public/locales/en/translation.json b/apps/backoffice-v2/public/locales/en/translation.json
@@ -1,5 +1,8 @@
 {
   "home": {
     "greeting": "Welcome"
+  },
+  "business_report_creation": {
+    "is_disabled": "Contact Ballerine for access"
   }
 }
diff --git a/...koffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx b/...koffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx
@@ -1,7 +1,7 @@
 import { useFiltersQuery } from '@/domains/filters/hooks/queries/useFiltersQuery/useFiltersQuery';
 import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
 import { useCallback, useMemo } from 'react';
-import { Building, Goal, Home, Users } from 'lucide-react';
+import { Building, Goal, Home, MonitorDot, Users } from 'lucide-react';
 import { TRoutes, TRouteWithChildren } from '@/Router/types';
 import { useLocation } from 'react-router-dom';
 import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
@@ -28,26 +28,26 @@ export const useNavbarLogic = () => {
       href: `/${locale}/home`,
       key: 'nav-item-Home',
     },
+    ...(customer?.config?.isMerchantMonitoringEnabled
+      ? [
+          {
+            text: 'Merchant Monitoring',
+            icon: <MonitorDot size={20} />,
+            href: `/en/merchant-monitoring`,
+            key: 'nav-item-merchant-monitoring',
+          },
+        ]
+      : []),
     {
       text: 'Businesses',
       icon: <Building size={20} />,
-      children: [
-        ...(customer?.config?.isMerchantMonitoringEnabled
-          ? [
-              {
-                text: 'Merchant Monitoring',
-                href: `/en/merchant-monitoring`,
-                key: 'nav-item-merchant-monitoring',
-              },
-            ]
-          : []),
-        ...(businessesFilters?.map(({ id, name }) => ({
+      children:
+        businessesFilters?.map(({ id, name }) => ({
           filterId: id,
           text: name,
           href: `/${locale}/case-management/entities?filterId=${id}`,
           key: `nav-item-${id}`,
-        })) ?? []),
-      ],
+        })) ?? [],
       key: 'nav-item-businesses',
     },
     {

diff --git a/.../backoffice-v2/src/domains/auth/hooks/mutations/useSignOutMutation/useSignOutMutation.tsx b/.../backoffice-v2/src/domains/auth/hooks/mutations/useSignOutMutation/useSignOutMutation.tsx
@@ -3,11 +3,13 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { ISignInProps } from '../useSignInMutation/interfaces';
 import { authQueryKeys } from '../../../query-keys';
 import { fetchSignOut } from '../../../fetchers';
+import { customerQueryKeys } from '@/domains/customer/query-keys';
 
 export const useSignOutMutation = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const authenticatedUser = authQueryKeys.authenticatedUser();
+  const customer = customerQueryKeys.getCurrent();
   const { state } = useLocation();
 
   return useMutation({
@@ -22,6 +24,7 @@ export const useSignOutMutation = () => {
       queryClient.setQueryData(authenticatedUser.queryKey, {
         user: undefined,
       });
+      queryClient.setQueryData(customer.queryKey, undefined);
 
       if (!callbackUrl || !redirect) return;
 

diff --git a/...ackoffice-v2/src/domains/metrics/hooks/queries/useHomeMetricsQuery/useHomeMetricsQuery.ts b/...ackoffice-v2/src/domains/metrics/hooks/queries/useHomeMetricsQuery/useHomeMetricsQuery.ts
@@ -24,6 +24,26 @@ export const HomeMetricsOutputSchema = z.object({
     inProgress: ReportsByRiskLevelSchema,
     approved: ReportsByRiskLevelSchema,
   }),
+  cases: z.object({
+    all: z.object({
+      low: z.number(),
+      medium: z.number(),
+      high: z.number(),
+      critical: z.number(),
+    }),
+    inProgress: z.object({
+      low: z.number(),
+      medium: z.number(),
+      high: z.number(),
+      critical: z.number(),
+    }),
+    approved: z.object({
+      low: z.number(),
+      medium: z.number(),
+      high: z.number(),
+      critical: z.number(),
+    }),
+  }),
 });
 
 export const fetchHomeMetrics = async () => {

diff --git a/...onitoringBlocks/hooks/useWebsiteMonitoringReportBlock/useWebsiteMonitoringReportBlock.tsx b/...onitoringBlocks/hooks/useWebsiteMonitoringReportBlock/useWebsiteMonitoringReportBlock.tsx
@@ -3,12 +3,17 @@ import React, { useMemo } from 'react';
 import { useCurrentCaseQuery } from '@/pages/Entity/hooks/useCurrentCaseQuery/useCurrentCaseQuery';
 import { WebsiteMonitoringBusinessReportTab } from '@/lib/blocks/variants/WebsiteMonitoringBlocks/hooks/useWebsiteMonitoringReportBlock/WebsiteMonitoringBusinessReportTab';
 import { useBusinessReportByIdQuery } from '@/domains/business-reports/hooks/queries/useBusinessReportByIdQuery/useBusinessReportByIdQuery';
+import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
 
 export const useWebsiteMonitoringReportBlock = () => {
   const { data: workflow } = useCurrentCaseQuery();
-  const { data: businessReport } = useBusinessReportByIdQuery({
+  const { data: customer } = useCustomerQuery();
+  const { data: nonContextBusinessReport } = useBusinessReportByIdQuery({
     id: workflow?.context?.pluginsOutput?.merchantMonitoring?.reportId ?? '',
   });
+  const businessReport = customer?.config?.isDemo
+    ? workflow?.context?.pluginsOutput?.merchantMonitoring
+    : nonContextBusinessReport;
 
   const blocks = useMemo(() => {
     if (!businessReport?.data) {

diff --git a/...ons/copyingCollectionFlowLinkMutation.tsx → ...ion/useCopyCollectionFlowLinkMutation.tsx b/...ons/copyingCollectionFlowLinkMutation.tsx → ...ion/useCopyCollectionFlowLinkMutation.tsx
diff --git a/.../components/Case/components/CaseOptions/hooks/useCaseOptionsLogic/useCaseOptionsLogic.tsx b/.../components/Case/components/CaseOptions/hooks/useCaseOptionsLogic/useCaseOptionsLogic.tsx
@@ -1,7 +1,7 @@
 import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
 import { useCurrentCaseQuery } from '@/pages/Entity/hooks/useCurrentCaseQuery/useCurrentCaseQuery';
 import { useGeneratePDFMutation } from '@/pages/Entity/components/Case/components/CaseOptions/hooks/useCaseOptionsLogic/mutations/useGeneratePDFMutation/useGeneratePDFMutation';
-import { useCopyCollectionFlowLinkMutation } from './mutations/CopyingCollectionFlowLinkMutation';
+import { useCopyCollectionFlowLinkMutation } from './mutations/useCopyCollectionFlowLinkMutation/useCopyCollectionFlowLinkMutation';
 
 export const useCaseOptionsLogic = () => {
   const { data: workflow } = useCurrentCaseQuery();

diff --git a/apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx b/apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx
@@ -9,6 +9,11 @@ import { Plus, Table2 } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { Search } from '@/common/components/molecules/Search';
 import { Skeleton } from '@ballerine/ui';
+import { TooltipProvider } from '@/common/components/atoms/Tooltip/Tooltip.Provider';
+import { Tooltip } from '@/common/components/atoms/Tooltip/Tooltip';
+import { TooltipTrigger } from '@/common/components/atoms/Tooltip/Tooltip.Trigger';
+import { TooltipContent } from '@/common/components/atoms/Tooltip/Tooltip.Content';
+import { t } from 'i18next';
 
 export const MerchantMonitoring: FunctionComponent = () => {
   const {
@@ -32,32 +37,58 @@ export const MerchantMonitoring: FunctionComponent = () => {
     <div className="flex h-full flex-col space-y-4 px-6 pb-6 pt-10">
       <div className={`flex justify-between`}>
         <h1 className="pb-5 text-2xl font-bold">Merchant Monitoring</h1>
-        {createBusinessReport?.enabled && (
-          <div className={`flex space-x-3`}>
-            {createBusinessReportBatch?.enabled && (
-              <Link
-                className={buttonVariants({
-                  variant: 'outline',
-                  className: 'flex items-center justify-start gap-2 font-semibold',
-                })}
-                to={`/${locale}/merchant-monitoring/upload-multiple-merchants`}
-              >
-                <Table2 />
-                <span>Upload Multiple Merchants</span>
-              </Link>
-            )}
-            <Link
-              className={buttonVariants({
-                variant: 'outline',
-                className: 'flex items-center justify-start gap-2 font-semibold',
-              })}
-              to={`/${locale}/merchant-monitoring/create-check`}
-            >
-              <Plus />
-              <span>Create Merchant Check</span>
-            </Link>
-          </div>
-        )}
+        <div className={`flex space-x-3`}>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger className={`flex items-center`} asChild>
+                <div>
+                  <Link
+                    className={buttonVariants({
+                      variant: 'outline',
+                      className:
+                        'flex items-center justify-start gap-2 font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50',
+                    })}
+                    to={`/${locale}/merchant-monitoring/upload-multiple-merchants`}
+                    aria-disabled={!createBusinessReportBatch?.enabled}
+                  >
+                    <Table2 />
+                    <span>Upload Multiple Merchants</span>
+                  </Link>
+                </div>
+              </TooltipTrigger>
+              {!createBusinessReportBatch?.enabled && (
+                <TooltipContent side={'left'} align={'start'}>
+                  {t('business_report_creation.is_disabled')}
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger className={`flex items-center`} asChild>
+                <div>
+                  <Link
+                    className={buttonVariants({
+                      variant: 'outline',
+                      className:
+                        'flex items-center justify-start gap-2 font-semibold aria-disabled:pointer-events-none aria-disabled:opacity-50',
+                    })}
+                    to={`/${locale}/merchant-monitoring/create-check`}
+                    aria-disabled={!createBusinessReport?.enabled}
+                  >
+                    <Plus />
+                    <span>Create Merchant Check</span>
+                  </Link>
+                </div>
+              </TooltipTrigger>
+              {!createBusinessReport?.enabled && (
+                <TooltipContent side={'left'} align={'start'}>
+                  {t('business_report_creation.is_disabled')}
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
+        </div>
       </div>
       {!!businessReports?.length && (
         <div className={`flex`}>

diff --git a/apps/backoffice-v2/src/pages/Statistics/Statistics.page.tsx b/apps/backoffice-v2/src/pages/Statistics/Statistics.page.tsx
@@ -21,7 +21,11 @@ export const Statistics: FunctionComponent = () => {
       <h1 className={'pb-5 text-2xl font-bold'}>Statistics</h1>
       <div className={'flex flex-col space-y-8'}>
         <UserStatistics fullName={'John Doe'} />
-        <PortfolioRiskStatistics riskIndicators={data.riskIndicators} reports={data.reports} />
+        <PortfolioRiskStatistics
+          riskIndicators={data.riskIndicators}
+          reports={data.reports}
+          cases={data.cases}
+        />
         <WorkflowStatistics />
       </div>
     </div>

diff --git a/...ce-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx b/...ce-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx
@@ -19,10 +19,9 @@ import { usePortfolioRiskStatisticsLogic } from '@/pages/Statistics/components/P
 import { z } from 'zod';
 import { HomeMetricsOutputSchema } from '@/domains/metrics/hooks/queries/useHomeMetricsQuery/useHomeMetricsQuery';
 
-export const PortfolioRiskStatistics: FunctionComponent<{
-  riskIndicators: z.infer<typeof HomeMetricsOutputSchema>['riskIndicators'];
-  reports: z.infer<typeof HomeMetricsOutputSchema>['reports'];
-}> = ({ riskIndicators, reports }) => {
+export const PortfolioRiskStatistics: FunctionComponent<
+  z.infer<typeof HomeMetricsOutputSchema>
+> = ({ riskIndicators, reports, cases }) => {
   const {
     riskLevelToFillColor,
     parent,
@@ -36,6 +35,7 @@ export const PortfolioRiskStatistics: FunctionComponent<{
   } = usePortfolioRiskStatisticsLogic({
     riskIndicators,
     reports,
+    cases,
   });
 
   return (
@@ -58,13 +58,13 @@ export const PortfolioRiskStatistics: FunctionComponent<{
                     dominantBaseline="middle"
                     className={'text-lg font-bold'}
                   >
-                    {Object.values(reports.approved).reduce((acc, curr) => acc + curr, 0)}
+                    {Object.values(cases.approved).reduce((acc, curr) => acc + curr, 0)}
                   </text>
                   <text x={92} y={102} textAnchor="middle" dominantBaseline="middle">
                     Merchants
                   </text>
                   <Pie
-                    data={Object.entries(reports.approved).map(([riskLevel, value]) => ({
+                    data={Object.entries(cases.approved).map(([riskLevel, value]) => ({
                       name: `${titleCase(riskLevel)} Risk`,
                       value,
                     }))}
@@ -89,7 +89,7 @@ export const PortfolioRiskStatistics: FunctionComponent<{
                   </Pie>
                 </PieChart>
                 <ul className={'flex w-full max-w-sm flex-col space-y-2'}>
-                  {Object.entries(reports.approved).map(([riskLevel, value]) => (
+                  {Object.entries(cases.approved).map(([riskLevel, value]) => (
                     <li
                       key={riskLevel}
                       className={'flex items-center space-x-4 border-b py-1 text-xs'}

diff --git a/...oRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx b/...oRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx
@@ -11,10 +11,8 @@ import { HomeMetricsOutputSchema } from '@/domains/metrics/hooks/queries/useHome
 export const usePortfolioRiskStatisticsLogic = ({
   riskIndicators,
   reports,
-}: {
-  riskIndicators: z.infer<typeof HomeMetricsOutputSchema>['riskIndicators'];
-  reports: z.infer<typeof HomeMetricsOutputSchema>['reports'];
-}) => {
+  cases,
+}: z.infer<typeof HomeMetricsOutputSchema>) => {
   const [parent] = useAutoAnimate<HTMLTableSectionElement>();
   const [riskIndicatorsSorting, setRiskIndicatorsSorting] = useState<SortDirection>('desc');
   const onSortRiskIndicators = useCallback(
@@ -59,10 +57,10 @@ export const usePortfolioRiskStatisticsLogic = ({
       description: 'Risk levels of all active onboarding cases.',
       entityPlural: 'Cases',
       riskLevels: {
-        low: reports.inProgress.low,
-        medium: reports.inProgress.medium,
-        high: reports.inProgress.high,
-        critical: reports.inProgress.critical,
+        low: cases.inProgress.low,
+        medium: cases.inProgress.medium,
+        high: cases.inProgress.high,
+        critical: cases.inProgress.critical,
       },
     },
   ];

diff --git a/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx b/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx
@@ -229,7 +229,7 @@ export const CollectionFlow = withSessionProtected(() => {
                                       )}
                                       {themeDefinition.ui?.poweredBy !== false && (
                                         <div className="flex flex-col">
-                                          <div className="pb-12 border-b" />
+                                          <div className="border-b pb-12" />
                                           <PoweredByLogo className="mt-8" sidebarRootId="sidebar" />
                                         </div>
                                       )}

diff --git a/services/workflows-service/prisma/data-migrations b/services/workflows-service/prisma/data-migrations
diff --git a/services/workflows-service/src/metrics/schemas/home-metrics.schema.ts b/services/workflows-service/src/metrics/schemas/home-metrics.schema.ts
@@ -19,4 +19,24 @@ export const HomeMetricsSchema = Type.Object({
     inProgress: ReportsByRiskLevelSchema,
     approved: ReportsByRiskLevelSchema,
   }),
+  cases: Type.Object({
+    all: Type.Object({
+      low: Type.Number(),
+      medium: Type.Number(),
+      high: Type.Number(),
+      critical: Type.Number(),
+    }),
+    inProgress: Type.Object({
+      low: Type.Number(),
+      medium: Type.Number(),
+      high: Type.Number(),
+      critical: Type.Number(),
+    }),
+    approved: Type.Object({
+      low: Type.Number(),
+      medium: Type.Number(),
+      high: Type.Number(),
+      critical: Type.Number(),
+    }),
+  }),
 });
diff --git a/services/workflows-service/src/metrics/service/metrics.service.ts b/services/workflows-service/src/metrics/service/metrics.service.ts
@@ -106,6 +106,26 @@ export class MetricsService {
           currentProjectId,
         ),
       },
+      cases: {
+        all: {
+          low: 0,
+          medium: 4,
+          high: 0,
+          critical: 12,
+        },
+        inProgress: {
+          low: 1,
+          medium: 0,
+          high: 2,
+          critical: 14,
+        },
+        approved: {
+          low: 24,
+          medium: 0,
+          high: 12,
+          critical: 0,
+        },
+      },
     };
   }
 }