feat: backoffice ui improvements (#2827)

Author: tomer-shvadron

apps/backoffice-v2/src/common/hooks/useSearchParamsByEntity/validation-schemas.ts

@@ -39,8 +39,8 @@ export const MonitoringReportsTabs = [
 
 export const CaseTabs = [
   'summary',
-  'companyInformation',
-  'storeInfo',
+  'company',
+  'store',
   'documents',
   'ubos',
   'associatedCompanies',

apps/backoffice-v2/src/lib/blocks/hooks/useAssociatedCompaniesInformationBlock/useAssociatedCompaniesInformationBlock.tsx

@@ -40,7 +40,7 @@ export const useAssociatedCompaniesInformationBlock = (workflows: TWorkflowById[
               type: 'details',
               hideSeparator: true,
               value: {
-                title: 'Company Information',
+                title: 'Company',
                 data: Object.entries(entityData)?.map(([title, value]) => ({
                   title,
                   value,

apps/backoffice-v2/src/lib/blocks/hooks/useStoreInfoBlock/useStoreInfoBlock.tsx

@@ -16,7 +16,7 @@ export const useStoreInfoBlock = ({ storeInfo, workflow }) => {
           .addBlock()
           .addCell({
             type: 'heading',
-            value: 'Store Info',
+            value: 'Store',
           })
           .addCell({
             type: 'subheading',

apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/hooks/useCaseBlocksLogic/utils/get-tabs-block-map.tsx

@@ -67,7 +67,7 @@ export const getTabsToBlocksMap = ({
         ? merchantScreeningBlock
         : []),
     ],
-    [Tab.COMPANY_INFORMATION]: [
+    [Tab.COMPANY]: [
       ...entityInfoBlock,
       // ...mapBlock,
       ...addressWithContainerBlock,
@@ -76,11 +76,7 @@ export const getTabsToBlocksMap = ({
       ...companySanctionsBlock,
       ...bankingDetailsBlock,
     ],
-    [Tab.STORE_INFO]: [
-      ...storeInfoBlock,
-      ...processingDetailsBlock,
-      ...websiteBasicRequirementBlock,
-    ],
+    [Tab.STORE]: [...storeInfoBlock, ...processingDetailsBlock, ...websiteBasicRequirementBlock],
     [Tab.DOCUMENTS]: [...parentDocumentBlocks],
     [Tab.UBOS]: [
       ...ubosUserProvidedBlock,

apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/hooks/useCaseBlocksLogic/utils/get-variant-tabs.ts

@@ -5,8 +5,8 @@ import { WorkflowDefinitionConfigThemeEnum } from '@ballerine/common';
 
 export const Tab = {
   SUMMARY: 'SUMMARY',
-  COMPANY_INFORMATION: 'COMPANY_INFORMATION',
-  STORE_INFO: 'STORE_INFO',
+  COMPANY: 'COMPANY',
+  STORE: 'STORE',
   DOCUMENTS: 'DOCUMENTS',
   UBOS: 'UBOS',
   ASSOCIATED_COMPANIES: 'ASSOCIATED_COMPANIES',
@@ -28,14 +28,14 @@ export const getVariantTabs = (
         disabled: !tabBlocks[Tab.SUMMARY]?.length,
       },
       {
-        name: Tab.COMPANY_INFORMATION,
-        displayName: 'Company Information',
-        disabled: !tabBlocks[Tab.COMPANY_INFORMATION]?.length,
+        name: Tab.COMPANY,
+        displayName: 'Company',
+        disabled: !tabBlocks[Tab.COMPANY]?.length,
       },
       {
-        name: Tab.STORE_INFO,
-        displayName: 'Store Info',
-        disabled: !tabBlocks[Tab.STORE_INFO]?.length,
+        name: Tab.STORE,
+        displayName: 'Store',
+        disabled: !tabBlocks[Tab.STORE]?.length,
       },
       {
         name: Tab.DOCUMENTS,

apps/backoffice-v2/src/pages/Entities/components/Cases/Cases.Item.tsx

@@ -76,7 +76,7 @@ export const Item: FunctionComponent<IItemProps> = ({
           </motion.div>
           <Avatar
             src={entityAvatarUrl}
-            className="text-sm d-8"
+            className="text-base font-semibold d-8"
             alt={`${fullName}'s avatar`}
             placeholder={entityInitials}
             style={{

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@ballerine/ui';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useMemo } from 'react';
 import { StateTag } from '@ballerine/common';
 
 import { tagToBadgeData } from './consts';
@@ -10,6 +10,9 @@ import { useCaseActionsLogic } from './hooks/useCaseActionsLogic/useCaseActionsL
 import { AssignDropdown } from '@/common/components/atoms/AssignDropdown/AssignDropdown';
 import { CaseOptions } from '@/pages/Entity/components/Case/components/CaseOptions/CaseOptions';
 import { ActionsVariant } from '@/pages/Entity/components/Case/actions-variants/ActionsVariant/ActionsVariant';
+import { Avatar } from '@/common/components/atoms/Avatar';
+import { stringToRGB } from '@/common/utils/string-to-rgb/string-to-rgb';
+import { createInitials } from '@/common/utils/create-initials/create-initials';
 
 /**
  * @description To be used by {@link Case}. Displays the entity's full name, avatar, and handles the reject/approve mutation.
@@ -26,6 +29,7 @@ import { ActionsVariant } from '@/pages/Entity/components/Case/actions-variants/
 export const Actions: FunctionComponent<IActionsProps> = ({
   id,
   fullName,
+  workflow,
   numberOfNotes,
   showResolutionButtons,
 }) => {
@@ -40,6 +44,9 @@ export const Actions: FunctionComponent<IActionsProps> = ({
     isWorkflowCompleted,
   } = useCaseActionsLogic({ workflowId: id, fullName });
 
+  const entityInitials = createInitials(fullName);
+  const rgb = useMemo(() => stringToRGB(fullName), [fullName]);
+
   return (
     <div className={`col-span-2 space-y-2 bg-base-100 px-4 pt-4`}>
       <div className={`mb-8 flex flex-row justify-between space-x-3.5`}>
@@ -56,14 +63,26 @@ export const Actions: FunctionComponent<IActionsProps> = ({
       </div>
       <div className={`min-h-20 flex justify-between gap-4`}>
         <div className={`flex flex-col space-y-3`}>
-          <h2
-            className={ctw(`w-full max-w-[35ch] break-all text-4xl font-semibold leading-9`, {
-              'h-8 w-full max-w-[24ch] animate-pulse rounded-md bg-gray-200 theme-dark:bg-neutral-focus':
-                isLoadingCase,
-            })}
-          >
-            {fullName}
-          </h2>
+          <div className={`flex space-x-4`}>
+            <Avatar
+              src={workflow?.entity?.avatarUrl || ''}
+              className="text-base font-semibold d-8"
+              alt={`${fullName}'s avatar`}
+              placeholder={entityInitials}
+              style={{
+                color: `rgb(${rgb})`,
+                backgroundColor: `rgba(${rgb}, 0.2)`,
+              }}
+            />
+            <h2
+              className={ctw(`w-full max-w-[35ch] break-all text-2xl font-semibold leading-9`, {
+                'h-8 w-full max-w-[24ch] animate-pulse rounded-md bg-gray-200 theme-dark:bg-neutral-focus':
+                  isLoadingCase,
+              })}
+            >
+              {fullName}
+            </h2>
+          </div>
           <div className={`flex items-center space-x-6`}>
             {tag && (
               <div className={`flex space-x-2`}>

services/workflows-service/src/workflow/workflow.service.ts

@@ -128,6 +128,11 @@ const COLLECTION_FLOW_EVENTS_WHITELIST: readonly CollectionFlowEvent[] = [
   'revision',
 ] as const;
 
+const getAvatarUrl = (website: string | undefined | null) =>
+  website
+    ? `https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${website}&size=40`
+    : null;
+
 @Injectable()
 export class WorkflowService {
   constructor(
@@ -281,8 +286,8 @@ export class WorkflowService {
         return {
           id: workflow?.business?.id,
           name: workflow?.business?.companyName,
-          avatarUrl: null,
           approvalState: workflow?.business?.approvalState,
+          avatarUrl: getAvatarUrl(workflow?.business?.website),
         };
       }
 
@@ -562,6 +567,8 @@ export class WorkflowService {
     return workflows.map(workflow => {
       const isIndividual = 'endUser' in workflow;
 
+      const businessWebsiteUrl = !isIndividual && getAvatarUrl(workflow?.business?.website);
+
       return {
         id: workflow?.id,
         status: workflow?.status,
@@ -571,7 +578,7 @@ export class WorkflowService {
           name: isIndividual
             ? `${String(workflow?.endUser?.firstName)} ${String(workflow?.endUser?.lastName)}`
             : workflow?.business?.companyName,
-          avatarUrl: isIndividual ? workflow?.endUser?.avatarUrl : null,
+          avatarUrl: isIndividual ? workflow?.endUser?.avatarUrl : businessWebsiteUrl,
           approvalState: isIndividual
             ? workflow?.endUser?.approvalState
             : workflow?.business?.approvalState,
@@ -2140,6 +2147,25 @@ export class WorkflowService {
         });
       });
 
+      service.subscribe('PERSIST_WEBSITE', async ({ payload = {} }) => {
+        if (!payload.website) {
+          return;
+        }
+
+        const typedPayload = payload as {
+          website: string;
+        };
+
+        await this.businessService.updateById(
+          workflowRuntimeData.context.entity.ballerineEntityId,
+          {
+            data: {
+              website: typedPayload.website,
+            },
+          },
+        );
+      });
+
       if (!service.getSnapshot().nextEvents.includes(type)) {
         throw new BadRequestException(
           `Event ${type} does not exist for workflow ${workflowDefinition.id}'s state: ${workflowRuntimeData.state}`,