Add/Remove UBOs

apps/backoffice-v2/.storybook/main.ts

@@ -18,5 +18,13 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  viteFinal: config => {
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      include: ['@ballerine/ui'],
+    };
+
+    return config;
+  },
 };
 export default config;

apps/backoffice-v2/public/locales/en/toast.json

@@ -104,5 +104,13 @@
   "update_details": {
     "success": "Details updated successfully.",
     "error": "Error occurred while updating details."
+  },
+  "ubo_created": {
+    "success": "UBO successfully added",
+    "error": "Error adding UBO"
+  },
+  "ubo_deleted": {
+    "success": "UBO successfully removed",
+    "error": "Error removing UBO"
   }
 }

apps/backoffice-v2/src/common/api-client/interfaces.ts

@@ -8,7 +8,7 @@ import { z, ZodSchema } from 'zod';
 export interface IApiClient {
   <TBody extends AnyRecord, TZodSchema extends ZodSchema>(params: {
     endpoint: string;
-    method: typeof Method.POST | typeof Method.PUT | typeof Method.PATCH;
+    method: typeof Method.POST | typeof Method.PUT | typeof Method.PATCH | typeof Method.DELETE;
     body?: TBody;
     options?: Omit<RequestInit, 'body'>;
     timeout?: number;
@@ -19,7 +19,7 @@ export interface IApiClient {
 
   <TBody extends AnyRecord, TZodSchema extends ZodSchema>(params: {
     url: string;
-    method: typeof Method.POST | typeof Method.PUT | typeof Method.PATCH;
+    method: typeof Method.POST | typeof Method.PUT | typeof Method.PATCH | typeof Method.DELETE;
     body?: TBody;
     options?: Omit<RequestInit, 'body'>;
     timeout?: number;
@@ -30,7 +30,7 @@ export interface IApiClient {
 
   <TZodSchema extends ZodSchema>(params: {
     endpoint: string;
-    method: typeof Method.GET | typeof Method.DELETE;
+    method: typeof Method.GET;
     options?: Omit<RequestInit, 'body'>;
     timeout?: number;
     schema: TZodSchema;
@@ -39,7 +39,7 @@ export interface IApiClient {
 
   <TZodSchema extends ZodSchema>(params: {
     url: string;
-    method: typeof Method.GET | typeof Method.DELETE;
+    method: typeof Method.GET;
     options?: Omit<RequestInit, 'body'>;
     timeout?: number;
     schema: TZodSchema;

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

@@ -0,0 +1,25 @@
+import { apiClient } from '@/common/api-client/api-client';
+
+import { Method } from '@/common/enums';
+
+import { handleZodError } from '@/common/utils/handle-zod-error/handle-zod-error';
+import { z } from 'zod';
+
+export const translateUiDefinition = async ({
+  id,
+  partialUiDefinition,
+}: {
+  id: string;
+  partialUiDefinition: Record<string, unknown>;
+}) => {
+  const [data, error] = await apiClient({
+    endpoint: `../case-management/ui-definition/${id}/translate/en`,
+    method: Method.POST,
+    body: {
+      partialUiDefinition,
+    },
+    schema: z.record(z.string(), z.unknown()),
+  });
+
+  return handleZodError(error, data);
+};

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

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

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

@@ -0,0 +1,22 @@
+import { createQueryKeys } from '@lukemorales/query-key-factory';
+import { translateUiDefinition } from './fetchers';
+
+export const uiDefinitionQueryKeys = createQueryKeys('ui-definition', {
+  translate: ({
+    id,
+    partialUiDefinition,
+  }: {
+    id: string;
+    partialUiDefinition: Record<string, unknown>;
+  }) => {
+    return {
+      queryKey: [
+        {
+          id,
+          partialUiDefinition,
+        },
+      ],
+      queryFn: () => translateUiDefinition({ id, partialUiDefinition }),
+    };
+  },
+});

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

@@ -77,6 +77,10 @@ export const WorkflowDefinitionByIdSchema = ObjectWithIdSchema.extend({
     })
     .optional()
     .nullable(),
+  uiDefinitions: z
+    .array(z.object({ id: z.string(), uiContext: z.string() }))
+    .optional()
+    .nullable(),
 });
 
 export type TWorkflowDefinitionById = z.infer<typeof WorkflowDefinitionByIdSchema>;

apps/backoffice-v2/src/domains/workflows/hooks/mutations/useCreateUboMutation/useCreateUboMutation.tsx

@@ -0,0 +1,43 @@
+import { apiClient } from '@/common/api-client/api-client';
+
+import { Method } from '@/common/enums';
+
+import { z } from 'zod';
+
+import { handleZodError } from '@/common/utils/handle-zod-error/handle-zod-error';
+
+import { toast } from 'sonner';
+import { useMutation } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { t } from 'i18next';
+
+export const useCreateUboMutation = ({
+  workflowId,
+  onSuccess,
+}: {
+  workflowId: string;
+  onSuccess: () => void;
+}) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (ubo: Record<string, unknown>) => {
+      const [data, error] = await apiClient({
+        endpoint: `../case-management/workflows/${workflowId}/ubos`,
+        method: Method.POST,
+        body: ubo,
+        schema: z.undefined(),
+      });
+
+      return handleZodError(error, data);
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries();
+      toast.success(t('toast:ubo_created.success'));
+      onSuccess();
+    },
+    onError: () => {
+      toast.error(t('toast:ubo_created.error'));
+    },
+  });
+};

apps/backoffice-v2/src/domains/workflows/hooks/mutations/useDeleteUbosByIdsMutation/useDeleteUbosByIdsMutation.tsx

@@ -0,0 +1,36 @@
+import { apiClient } from '@/common/api-client/api-client';
+
+import { z } from 'zod';
+
+import { handleZodError } from '@/common/utils/handle-zod-error/handle-zod-error';
+
+import { toast } from 'sonner';
+import { Method } from '@/common/enums';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { t } from 'i18next';
+
+export const useDeleteUbosByIdsMutation = ({ workflowId }: { workflowId: string }) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (ids: string[]) => {
+      const [data, error] = await apiClient({
+        endpoint: `../case-management/workflows/${workflowId}/ubos`,
+        method: Method.DELETE,
+        body: { ids },
+        schema: z.undefined(),
+      });
+
+      return handleZodError(error, data);
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries();
+
+      toast.success(t('toast:ubo_deleted.success'));
+    },
+    onError: () => {
+      toast.error(t('toast:ubo_deleted.error'));
+    },
+  });
+};

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

@@ -19,7 +19,7 @@ export const BlockCell: FunctionComponent<IBlockCellProps> = ({ value, props })
   }
 
   return (
-    <Card className={ctw('me-4 shadow-[0_4px_4px_0_rgba(174,174,174,0.0625)]', props?.className)}>
+    <Card className={ctw('shadow-[0_4px_4px_0_rgba(174,174,174,0.0625)]', props?.className)}>
       <CardContent
         className={ctw(
           'grid gap-2',