ballerine-io · Omri-Levy · Dec 29, 2024 · Dec 22, 2024 · Dec 22, 2024 · Dec 23, 2024
diff --git a/README.md b/README.md
@@ -143,7 +143,7 @@ Once the process is complete,  _2 tabs_   will open in your browser:
 We appreciate all types of contributions and believe that an active community is the secret to a rich and stable product.
 Here are some of the ways you can contribute:
 
--   Give us feedback in our  [Slack community](https://join.slack.com/t/ballerine-oss/shared_invite/zt-1iu6otkok-OqBF3TrcpUmFd9oUjNs2iw)
+-   Give us feedback in our  [Slack community](https://join.slack.com/t/ballerine-oss/shared_invite/zt-1il7txerq-K0YrXtlzMttGgD3XXYxlfw)
 -   Help with bugs and features on [our Issues page](https://github.com/ballerine-io/ballerine/issues)
 -   Submit a  [feature request](https://github.com/ballerine-io/ballerine/issues/new?assignees=&labels=enhancement%2C+feature&template=feature_request.md)  or  [bug report](https://github.com/ballerine-io/ballerine/issues/new?assignees=&labels=bug&template=bug_report.md)
 

diff --git a/apps/backoffice-v2/.storybook/main.ts b/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;
diff --git a/apps/backoffice-v2/CHANGELOG.md b/apps/backoffice-v2/CHANGELOG.md
@@ -1,5 +1,38 @@
 # @ballerine/backoffice-v2
 
+## 0.7.84
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+
+## 0.7.83
+
+### Patch Changes
+
+- added command.loading
+- Updated dependencies
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+
+## 0.7.82
+
+### Patch Changes
+
+- core
+- Updated dependencies
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+
 ## 0.7.81
 
 ### Patch Changes

diff --git a/apps/backoffice-v2/package.json b/apps/backoffice-v2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.81",
+  "version": "0.7.84",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "type": "module",
@@ -51,12 +51,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ballerine/blocks": "0.2.29",
-    "@ballerine/common": "0.9.58",
-    "@ballerine/react-pdf-toolkit": "^1.2.50",
-    "@ballerine/ui": "^0.5.50",
-    "@ballerine/workflow-browser-sdk": "0.6.77",
-    "@ballerine/workflow-node-sdk": "0.6.77",
+    "@ballerine/blocks": "0.2.30",
+    "@ballerine/common": "0.9.60",
+    "@ballerine/react-pdf-toolkit": "^1.2.54",
+    "@ballerine/ui": "^0.5.54",
+    "@ballerine/workflow-browser-sdk": "0.6.79",
+    "@ballerine/workflow-node-sdk": "0.6.79",
     "@botpress/webchat": "^2.1.10",
     "@botpress/webchat-generator": "^0.2.9",
     "@fontsource/inter": "^4.5.15",
@@ -148,8 +148,8 @@
     "zod": "^3.23.4"
   },
   "devDependencies": {
-    "@ballerine/config": "^1.1.27",
-    "@ballerine/eslint-config-react": "^2.0.27",
+    "@ballerine/config": "^1.1.28",
+    "@ballerine/eslint-config-react": "^2.0.28",
     "@cspell/cspell-types": "^6.31.1",
     "@faker-js/faker": "^7.6.0",
     "@playwright/test": "^1.32.1",

diff --git a/apps/backoffice-v2/public/locales/en/toast.json b/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"
   }
 }
diff --git a/apps/backoffice-v2/src/common/api-client/interfaces.ts b/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;

diff --git a/apps/backoffice-v2/src/common/components/atoms/MultiSelect/MultiSelect.tsx b/apps/backoffice-v2/src/common/components/atoms/MultiSelect/MultiSelect.tsx
@@ -1,4 +1,5 @@
-import { ReactNode, useCallback, useState } from 'react';
+import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons';
+import { ReactNode, useCallback } from 'react';
 import {
   Badge,
   Button,
@@ -8,13 +9,14 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
+  CommandLoading,
   CommandSeparator,
   ctw,
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@ballerine/ui';
-import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons';
+
 import { Separator } from '@/common/components/atoms/Separator/Separator';
 
 interface IMultiSelectProps<
@@ -25,10 +27,24 @@ interface IMultiSelectProps<
   },
 > {
   title: string;
+  isLoading?: boolean;
   selectedValues: Array<TOption['value']>;
   onSelect: (value: Array<TOption['value']>) => void;
   onClearSelect: () => void;
   options: TOption[];
+  props?: {
+    content?: {
+      className?: string;
+    };
+    trigger?: {
+      leftIcon?: JSX.Element;
+      rightIcon?: JSX.Element;
+      className?: string;
+      title?: {
+        className?: string;
+      };
+    };
+  };
 }
 
 export const MultiSelect = <
@@ -39,32 +55,37 @@ export const MultiSelect = <
   },
 >({
   title,
-  selectedValues,
+  isLoading,
+  selectedValues: selected,
   onSelect,
   onClearSelect,
   options,
+  props,
 }: IMultiSelectProps<TOption>) => {
-  const [selected, setSelected] = useState(selectedValues);
-
   const onSelectChange = useCallback(
     (value: TOption['value']) => {
       const isSelected = selected.some(selectedValue => selectedValue === value);
       const nextSelected = isSelected
         ? selected.filter(selectedValue => selectedValue !== value)
         : [...selected, value];
 
-      setSelected(nextSelected);
       onSelect(nextSelected);
     },
     [onSelect, selected],
   );
 
+  const TriggerLeftIcon = props?.trigger?.leftIcon ?? <PlusCircledIcon className="mr-2 h-4 w-4" />;
+
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border">
-          <PlusCircledIcon className="mr-2 h-4 w-4" />
-          {title}
+        <Button
+          variant="outline"
+          size="sm"
+          className={ctw(`h-8 border`, props?.trigger?.className)}
+        >
+          {TriggerLeftIcon}
+          <span className={ctw(props?.trigger?.title?.className)}>{title}</span>
           {selected?.length > 0 && (
             <>
               <Separator orientation="vertical" className="mx-2 h-4" />
@@ -81,9 +102,9 @@ export const MultiSelect = <
                     .filter(option => selected.some(value => value === option.value))
                     .map(option => (
                       <Badge
+                        key={`${option.value}`}
                         variant="secondary"
-                        key={option.value}
-                        className="rounded-sm px-1 font-normal"
+                        className="max-w-[20ch] truncate rounded-sm px-1 font-normal"
                       >
                         {option.label}
                       </Badge>
@@ -92,52 +113,63 @@ export const MultiSelect = <
               </div>
             </>
           )}
+          {props?.trigger?.rightIcon}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
-        <Command>
+      <PopoverContent className={ctw(`w-[200px] p-0`, props?.content?.className)} align="start">
+        <Command filter={(value, search) => (value.includes(search) ? 1 : 0)}>
           <CommandInput placeholder={title} />
           <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.map(option => {
-                const isSelected = selected.some(value => value === option.value);
+            {isLoading && (
+              <CommandLoading className={`flex items-center justify-center pb-3 text-sm`}>
+                Loading...
+              </CommandLoading>
+            )}
+            {!isLoading && options.length === 0 && <CommandEmpty>No results found.</CommandEmpty>}
+            {!isLoading && options.length > 0 && (
+              <CommandGroup>
+                <div className={`max-h-[250px] overflow-y-auto`}>
+                  {options.map(option => {
+                    const isSelected = selected.some(value => value === option.value);
 
-                return (
-                  <CommandItem key={option.value} onSelect={() => onSelectChange(option.value)}>
-                    <div
-                      className={ctw(
-                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                        isSelected
-                          ? 'bg-primary text-primary-foreground'
-                          : 'opacity-50 [&_svg]:invisible',
-                      )}
-                    >
-                      <CheckIcon className={ctw('h-4 w-4')} />
-                    </div>
-                    {option.icon}
-                    <span>{option.label}</span>
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            {selected?.length > 0 && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={() => {
-                      onClearSelect();
-                      setSelected([]);
-                    }}
-                    className="justify-center text-center"
-                  >
-                    Clear filters
-                  </CommandItem>
-                </CommandGroup>
-              </>
+                    return (
+                      <CommandItem
+                        value={option.label}
+                        key={`${option.value}`}
+                        className={`cursor-pointer`}
+                        onSelect={() => onSelectChange(option.value)}
+                      >
+                        <div
+                          className={ctw(
+                            'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                            isSelected
+                              ? 'bg-primary text-primary-foreground'
+                              : 'opacity-50 [&_svg]:invisible',
+                          )}
+                        >
+                          <CheckIcon className={ctw('h-4 w-4')} />
+                        </div>
+                        {option.icon}
+                        <span>{option.label}</span>
+                      </CommandItem>
+                    );
+                  })}
+                </div>
+              </CommandGroup>
             )}
           </CommandList>
+          <CommandSeparator />
+          <CommandGroup>
+            <CommandItem
+              onSelect={onClearSelect}
+              className={ctw(
+                `cursor-pointer justify-center text-center`,
+                selected.length === 0 && 'pointer-events-none opacity-50',
+              )}
+            >
+              Clear filters
+            </CommandItem>
+          </CommandGroup>
         </Command>
       </PopoverContent>
     </Popover>

diff --git a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx
@@ -8,29 +8,35 @@ import { Calendar } from '../../organisms/Calendar/Calendar';
 type TDateRangePickerProps = {
   onChange: NonNullable<ComponentProps<typeof Calendar>['onSelect']>;
   value: NonNullable<ComponentProps<typeof Calendar>['selected']>;
+  placeholder?: string;
   className?: ComponentProps<'div'>['className'];
 };
 
-export const DateRangePicker = ({ onChange, value, className }: TDateRangePickerProps) => {
+export const DateRangePicker = ({
+  onChange,
+  value,
+  placeholder,
+  className,
+}: TDateRangePickerProps) => {
   return (
     <div className={ctw('grid gap-2', className)}>
       <Popover>
         <PopoverTrigger asChild>
           <Button
             id="date"
             variant={'outline'}
-            className={ctw('w-[300px] justify-start text-left font-normal', {
+            className={ctw('h-8 w-[250px] justify-start text-left font-normal', {
               'text-muted-foreground': !value,
             })}
           >
-            <CalendarIcon className="size-4 mr-2" />
+            <CalendarIcon className="mr-2 d-4" />
             {value?.from && value?.to && (
               <>
                 {formatDate(value.from, 'LLL dd, y')} - {formatDate(value.to, 'LLL dd, y')}
               </>
             )}
             {value?.from && !value?.to && formatDate(value.from, 'LLL dd, y')}
-            {!value?.from && !value?.to && <span>Pick a date</span>}
+            {!value?.from && !value?.to && <span>{placeholder ?? 'Pick a date'}</span>}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">