Add/Remove UBOs sign-off and pr comments (#2915)

* feat(*): added the ability to add and remove ubos

* refactor(*): pr review changes

* chore(*): updated packages

* fix(workflow-service): fixed path to definition

* chore(workflows-service): no longer importing from data-migrations

* removed unused import

* fixed failing test

* refactor(*): pR comments and sign-off changes

* chore(*): updated packages/ui

* fix(backoffice-v2): fixed bug caused by prettier

* fix(backoffice-vs): no longer closing ubos dialog after creating a ubo

Author: Omri-Levy

apps/backoffice-v2/src/domains/ui-definition/fetchers.ts

@@ -8,12 +8,14 @@ import { z } from 'zod';
 export const translateUiDefinition = async ({
   id,
   partialUiDefinition,
+  locale,
 }: {
   id: string;
   partialUiDefinition: Record<string, unknown>;
+  locale: string;
 }) => {
   const [data, error] = await apiClient({
-    endpoint: `../case-management/ui-definition/${id}/translate/en`,
+    endpoint: `../case-management/ui-definition/${id}/translate/${locale}`,
     method: Method.POST,
     body: {
       partialUiDefinition,

apps/backoffice-v2/src/domains/ui-definition/hooks/queries/useTranslateUiDefinitionQuery/useTranslateUiDefinitionQuery.tsx

@@ -5,12 +5,14 @@ import { uiDefinitionQueryKeys } from '@/domains/ui-definition/query-keys';
 export const useTranslateUiDefinitionQuery = ({
   id,
   partialUiDefinition,
+  locale,
 }: {
   id: string;
   partialUiDefinition: Record<string, unknown>;
+  locale: string;
 }) => {
   return useQuery({
-    ...uiDefinitionQueryKeys.translate({ id, partialUiDefinition }),
+    ...uiDefinitionQueryKeys.translate({ id, partialUiDefinition, locale }),
     enabled: !!partialUiDefinition && !!id,
   });
 };

apps/backoffice-v2/src/domains/ui-definition/query-keys.ts

@@ -5,18 +5,21 @@ export const uiDefinitionQueryKeys = createQueryKeys('ui-definition', {
   translate: ({
     id,
     partialUiDefinition,
+    locale,
   }: {
     id: string;
     partialUiDefinition: Record<string, unknown>;
+    locale: string;
   }) => {
     return {
       queryKey: [
         {
           id,
           partialUiDefinition,
+          locale,
         },
       ],
-      queryFn: () => translateUiDefinition({ id, partialUiDefinition }),
+      queryFn: () => translateUiDefinition({ id, partialUiDefinition, locale }),
     };
   },
 });

apps/backoffice-v2/src/domains/workflow-definitions/fetchers.ts

@@ -56,6 +56,15 @@ export const WorkflowDefinitionConfigSchema = z
           .optional(),
       })
       .optional(),
+    ubos: z
+      .object({
+        create: z
+          .object({
+            enabled: z.boolean().optional(),
+          })
+          .optional(),
+      })
+      .optional(),
   })
   .passthrough()
   .nullable();

apps/backoffice-v2/src/lib/blocks/components/KycBlock/hooks/useKycBlock/useKycBlock.tsx

@@ -373,19 +373,6 @@ export const useKycBlock = ({
             className: 'mt-0',
           },
         })
-        .addCell({
-          type: 'callToAction',
-          value: {
-            text: 'Initiate KYC',
-            onClick: onInitiateKyc,
-            props: {
-              className:
-                'justify-self-end px-2 py-0 text-xs aria-disabled:pointer-events-none aria-disabled:opacity-50',
-              variant: 'outline',
-              disabled: !event,
-            },
-          },
-        })
         .build()
         .flat(1),
     })
@@ -564,6 +551,19 @@ export const useKycBlock = ({
                             className: 'py-4 text-slate-500',
                           },
                         })
+                        .addCell({
+                          type: 'callToAction',
+                          value: {
+                            text: 'Initiate KYC',
+                            onClick: onInitiateKyc,
+                            props: {
+                              className:
+                                'px-2 py-0 text-xs aria-disabled:pointer-events-none aria-disabled:opacity-50 ms-3',
+                              variant: 'outline',
+                              disabled: !event,
+                            },
+                          },
+                        })
                         .buildFlat(),
                 })
                 .addCell({

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

@@ -25,24 +25,40 @@ import { transformErrors } from '@/pages/Entities/components/CaseCreation/compon
 import { useTranslateUiDefinitionQuery } from '@/domains/ui-definition/hooks/queries/useTranslateUiDefinitionQuery/useTranslateUiDefinitionQuery';
 import { useDeleteUbosByIdsMutation } from '@/domains/workflows/hooks/mutations/useDeleteUbosByIdsMutation/useDeleteUbosByIdsMutation';
 import { useCreateUboMutation } from '@/domains/workflows/hooks/mutations/useCreateUboMutation/useCreateUboMutation';
+import { useLocale } from '@/common/hooks/useLocale/useLocale';
 
-export const useManageUbosBlock = () => {
+export const useManageUbosBlock = ({
+  create,
+}: {
+  create: {
+    enabled: boolean;
+  };
+}) => {
   const { data: workflow } = useCurrentCaseQuery();
   const { data: workflowDefinition } = useWorkflowDefinitionByIdQuery({
     workflowDefinitionId: workflow?.workflowDefinition?.id ?? '',
   });
   const uiDefinition = workflowDefinition?.uiDefinitions?.find(
     uiDefinition => uiDefinition.uiContext === 'collection_flow',
   );
+  const locale = useLocale();
   const { data: translatedUbos } = useTranslateUiDefinitionQuery({
     id: uiDefinition?.id ?? '',
     partialUiDefinition: ubosFormJsonDefinition,
+    locale,
   });
   const { formSchema, uiSchema } = createFormSchemaFromUIElements(translatedUbos ?? {});
   const [isAddingUbo, _toggleIsAddingUbo, toggleOnIsAddingUbo, toggleOffIsAddingUbo] = useToggle();
+  const [isManageUbosOpen, toggleIsManageUbosOpen] = useToggle();
   const { mutate: mutateCreateUbo } = useCreateUboMutation({
     workflowId: workflow?.id,
-    onSuccess: toggleOffIsAddingUbo,
+    onSuccess: () => {
+      if (!isAddingUbo) {
+        return;
+      }
+
+      toggleOffIsAddingUbo();
+    },
   });
   const { mutate: mutateDeleteUbosByIds } = useDeleteUbosByIdsMutation({
     workflowId: workflow?.id,
@@ -107,6 +123,7 @@ export const useManageUbosBlock = () => {
             <Dialog
               trigger={
                 <Button
+                  type={'button'}
                   variant={'ghost'}
                   size={'icon'}
                   className={'aria-disabled:pointer-events-none aria-disabled:opacity-50'}
@@ -119,7 +136,7 @@ export const useManageUbosBlock = () => {
               description={
                 <p className={`text-sm`}>
                   Are you sure you want to remove this UBO? This action will be logged, and the
-                  UBO&apos;s data will be removed from the case and webhooks.
+                  UBO&apos;s data will be removed from the case.
                 </p>
               }
               content={null}
@@ -191,8 +208,11 @@ export const useManageUbosBlock = () => {
       type: 'node',
       value: (
         <Dialog
+          open={isManageUbosOpen}
+          onOpenChange={toggleIsManageUbosOpen}
           trigger={
             <Button
+              type={'button'}
               variant="outline"
               className={
                 'ms-auto px-2 py-0 text-xs aria-disabled:pointer-events-none aria-disabled:opacity-50'
@@ -204,7 +224,7 @@ export const useManageUbosBlock = () => {
           }
           content={
             <div className={'flex flex-col justify-between space-y-4'}>
-              {!isAddingUbo && (
+              {(!create.enabled || !isAddingUbo) && (
                 <div className={'flex flex-col gap-4'}>
                   <h2 className={'text-lg font-semibold'}>Manage UBOs</h2>
                   <UrlDataTable
@@ -216,34 +236,51 @@ export const useManageUbosBlock = () => {
                     }}
                     props={{
                       scroll: {
-                        className: 'h-[73vh]',
+                        className: '[&>div]:max-h-[73vh]',
                       },
                     }}
                   />
-                  <Button
-                    className={'ms-auto aria-disabled:pointer-events-none aria-disabled:opacity-50'}
-                    onClick={toggleOnIsAddingUbo}
-                    aria-disabled={!caseState.writeEnabled}
-                  >
-                    Add
-                  </Button>
+                  {create.enabled && (
+                    <Button
+                      type={'button'}
+                      className={
+                        'ms-auto aria-disabled:pointer-events-none aria-disabled:opacity-50'
+                      }
+                      onClick={toggleOnIsAddingUbo}
+                      aria-disabled={!caseState.writeEnabled}
+                    >
+                      Add UBO
+                    </Button>
+                  )}
                 </div>
               )}
-              {isAddingUbo && (
-                <div className={'flex flex-col gap-4'}>
-                  <Button variant={'ghost'} onClick={toggleOffIsAddingUbo} className={'me-auto'}>
-                    <ArrowLeft className={'text-muted-foreground'} size={14} />
+              {create.enabled && isAddingUbo && (
+                <>
+                  <Button
+                    type={'button'}
+                    variant={'ghost'}
+                    onClick={toggleOffIsAddingUbo}
+                    className={
+                      'absolute left-4 top-4 rounded-sm p-0 opacity-70 transition-opacity d-4 hover:bg-transparent hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800'
+                    }
+                  >
+                    <ArrowLeft className={'d-4'} />
                   </Button>
-                  <ScrollArea orientation={'vertical'} className={'h-[73vh]'}>
-                    <DynamicForm
-                      schema={formSchema}
-                      uiSchema={uiSchema}
-                      onSubmit={onSubmit}
-                      layouts={layouts as typeof baseLayouts}
-                      transformErrors={transformErrors}
-                    />
-                  </ScrollArea>
-                </div>
+
+                  <div className={'flex flex-col gap-4'}>
+                    <h2 className={'text-lg font-semibold'}>Add UBO</h2>
+                    <ScrollArea orientation={'vertical'} className={'h-[73vh]'}>
+                      <DynamicForm
+                        schema={formSchema}
+                        uiSchema={uiSchema}
+                        onSubmit={onSubmit}
+                        layouts={layouts as typeof baseLayouts}
+                        transformErrors={transformErrors}
+                        className={'[&>div>fieldset>div:first-of-type]:py-0 [&>div]:py-0'}
+                      />
+                    </ScrollArea>
+                  </div>
+                </>
               )}
             </div>
           }

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

@@ -339,7 +339,12 @@ export const useDefaultBlocksLogic = () => {
     isRequestTimedOut: workflow?.context?.pluginsOutput?.ubo?.isRequestTimedOut,
   });
 
-  const manageUbosBlock = useManageUbosBlock();
+  const manageUbosBlock = useManageUbosBlock({
+    create: {
+      ...workflow?.workflowDefinition?.config?.ubos?.create,
+      enabled: workflow?.workflowDefinition?.config?.ubos?.create?.enabled ?? false,
+    },
+  });
 
   const directorsUserProvidedBlock = useDirectorsUserProvidedBlock(directorsUserProvided);
 

apps/kyb-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # kyb-app
 
+## 0.3.98
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.55
+
 ## 0.3.97
 
 ### Patch Changes

apps/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.97",
+  "version": "0.3.98",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.30",
     "@ballerine/common": "^0.9.60",
-    "@ballerine/ui": "0.5.54",
+    "@ballerine/ui": "0.5.55",
     "@ballerine/workflow-browser-sdk": "0.6.79",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",

packages/react-pdf-toolkit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.55
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.55
+
 ## 1.2.54
 
 ### Patch Changes