refactor(components): streamline details component properties access

apps/backoffice-v2/src/lib/blocks/components/Details/Details.tsx

@@ -37,9 +37,9 @@ export const Details: FunctionComponent<ExtractCellProps<'details'>> = ({
         workflowId={workflowId}
         directorId={directorId}
         id={id}
-        valueId={value?.id}
+        valueId={value.id}
         documents={documents}
-        title={value?.title}
+        title={value.title}
         data={sortedData}
         isSaveDisabled={isSaveDisabled}
         contextUpdateMethod={contextUpdateMethod}

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

@@ -1,16 +1,58 @@
 import { useMemo } from 'react';
 
 import { createBlocksTyped } from '@/lib/blocks/create-blocks-typed/create-blocks-typed';
+import { WarningFilledSvg } from '@ballerine/ui';
 
-export const useBankAccountVerificationBlock = ({ pluginsOutput }) => {
+export const useBankAccountVerificationBlock = ({
+  workflowId,
+  pluginsOutput,
+}: {
+  workflowId: string;
+  pluginsOutput: any;
+}) => {
   return useMemo(() => {
-    if (
-      Object.keys(pluginsOutput?.bankAccountVerification?.data?.clientResponsePayload ?? {})
-        .length === 0
-    ) {
+    if (!pluginsOutput?.bankAccountVerification) {
       return [];
     }
 
+    if (!pluginsOutput?.bankAccountVerification?.data) {
+      return createBlocksTyped()
+        .addBlock()
+        .addCell({
+          type: 'block',
+          value: createBlocksTyped()
+            .addBlock()
+            .addCell({
+              id: 'nested-details-heading',
+              type: 'heading',
+              value: 'Bank Account Verification',
+            })
+            .addCell({
+              id: 'nested-details-subheading',
+              type: 'subheading',
+              value: 'Experian-Provided Data',
+              props: {
+                className: 'mb-4',
+              },
+            })
+            .addCell({
+              type: 'paragraph',
+              value: (
+                <span className="flex text-sm text-black/60">
+                  <WarningFilledSvg
+                    className={'me-2 mt-px text-black/20 [&>:not(:first-child)]:stroke-background'}
+                    width={'20'}
+                    height={'20'}
+                  />
+                  <span>No Bank Account Verification data to show.</span>
+                </span>
+              ),
+            })
+            .buildFlat(),
+        })
+        .build();
+    }
+
     const data = {
       ...pluginsOutput.bankAccountVerification.data.responseHeader.overallResponse,
       decisionElements:
@@ -42,10 +84,15 @@ export const useBankAccountVerificationBlock = ({ pluginsOutput }) => {
             id: 'nested-details',
             type: 'details',
             hideSeparator: true,
+            workflowId,
             value: {
+              id: 'nested-details-value-id',
+              title: '',
               data: Object.entries(data)
                 ?.filter(([property]) => !['tenantID', 'clientReferenceId'].includes(property))
                 .map(([title, value]) => ({
+                  type: 'editable-details',
+                  isEditable: false,
                   title,
                   value,
                 })),
@@ -64,8 +111,5 @@ export const useBankAccountVerificationBlock = ({ pluginsOutput }) => {
           .buildFlat(),
       })
       .build();
-  }, [
-    pluginsOutput?.bankAccountVerification?.data?.clientResponsePayload,
-    pluginsOutput?.bankAccountVerification?.data?.responseHeader?.overallResponse,
-  ]);
+  }, [pluginsOutput.bankAccountVerification, workflowId]);
 };

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

@@ -1,13 +1,58 @@
 import { useMemo } from 'react';
 
 import { createBlocksTyped } from '@/lib/blocks/create-blocks-typed/create-blocks-typed';
+import { WarningFilledSvg } from '@ballerine/ui';
 
-export const useCommercialCreditCheckBlock = ({ pluginsOutput }) => {
+export const useCommercialCreditCheckBlock = ({
+  workflowId,
+  pluginsOutput,
+}: {
+  workflowId: string;
+  pluginsOutput: any;
+}) => {
   return useMemo(() => {
-    if (Object.keys(pluginsOutput?.commercialCreditCheck?.data ?? {}).length === 0) {
+    if (!pluginsOutput?.commercialCreditCheck) {
       return [];
     }
 
+    if (!pluginsOutput?.commercialCreditCheck?.data) {
+      return createBlocksTyped()
+        .addBlock()
+        .addCell({
+          type: 'block',
+          value: createBlocksTyped()
+            .addBlock()
+            .addCell({
+              id: 'nested-details-heading',
+              type: 'heading',
+              value: 'Commercial Credit Check',
+            })
+            .addCell({
+              id: 'nested-details-subheading',
+              type: 'subheading',
+              value: 'Experian-Provided Data',
+              props: {
+                className: 'mb-4',
+              },
+            })
+            .addCell({
+              type: 'paragraph',
+              value: (
+                <span className="flex text-sm text-black/60">
+                  <WarningFilledSvg
+                    className={'me-2 mt-px text-black/20 [&>:not(:first-child)]:stroke-background'}
+                    width={'20'}
+                    height={'20'}
+                  />
+                  <span>No Commercial Credit data to show.</span>
+                </span>
+              ),
+            })
+            .buildFlat(),
+        })
+        .build();
+    }
+
     return createBlocksTyped()
       .addBlock()
       .addCell({
@@ -31,9 +76,14 @@ export const useCommercialCreditCheckBlock = ({ pluginsOutput }) => {
             id: 'nested-details',
             type: 'details',
             hideSeparator: true,
+            workflowId,
             value: {
+              id: 'nested-details-value-id',
+              title: '',
               data: Object.entries(pluginsOutput.commercialCreditCheck.data).map(
                 ([title, value]) => ({
+                  type: 'editable-details',
+                  isEditable: false,
                   title,
                   value,
                 }),
@@ -53,5 +103,5 @@ export const useCommercialCreditCheckBlock = ({ pluginsOutput }) => {
           .buildFlat(),
       })
       .build();
-  }, [pluginsOutput?.commercialCreditCheck?.data]);
+  }, [pluginsOutput.commercialCreditCheck, workflowId]);
 };

apps/backoffice-v2/src/lib/blocks/variants/DefaultBlocks/hooks/useDefaultBlocksLogic/useDefaultBlocksLogic.tsx

@@ -166,7 +166,7 @@ export const useDefaultBlocksLogic = () => {
 
   const registryInfoBlock = useRegistryInfoBlock({
     registryInfo,
-    workflowId: workflow?.id,
+    workflowId: workflow?.id || '',
     documents: workflow?.context?.documents,
   });
 
@@ -176,10 +176,12 @@ export const useDefaultBlocksLogic = () => {
   });
 
   const bankAccountVerificationBlock = useBankAccountVerificationBlock({
+    workflowId: workflow?.id || '',
     pluginsOutput: workflow?.context?.pluginsOutput,
   });
 
   const commercialCreditCheckBlock = useCommercialCreditCheckBlock({
+    workflowId: workflow?.id || '',
     pluginsOutput: workflow?.context?.pluginsOutput,
   });