feat: added v2 adapters for custom fields & updated exports from ui &…

… added tests (#2913)

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/CountryPicker/CountryPicker.tsx

@@ -0,0 +1,29 @@
+import { getCountries } from '@/helpers/countries-data';
+import { useLanguageParam } from '@/hooks/useLanguageParam/useLanguageParam';
+import { IFormElement, ISelectFieldParams, SelectField, TDynamicFormField } from '@ballerine/ui';
+import { useMemo } from 'react';
+
+export const COUNTRY_PICKER_FIELD_TYPE = 'countrypickerfield';
+
+export const CountryPickerField: TDynamicFormField<ISelectFieldParams> = ({ element }) => {
+  const { language } = useLanguageParam();
+
+  const elementDefinitionWithCountryList: IFormElement<
+    typeof COUNTRY_PICKER_FIELD_TYPE,
+    ISelectFieldParams
+  > = useMemo(() => {
+    return {
+      ...element,
+      element: COUNTRY_PICKER_FIELD_TYPE,
+      params: {
+        ...element.params,
+        options: getCountries(language).map(country => ({
+          value: country.const,
+          label: country.title,
+        })),
+      },
+    };
+  }, [element, language]);
+
+  return <SelectField element={elementDefinitionWithCountryList} />;
+};

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/CountryPicker/CountryPicker.unit.test.tsx

@@ -0,0 +1,78 @@
+import { getCountries } from '@/helpers/countries-data';
+import { useLanguageParam } from '@/hooks/useLanguageParam/useLanguageParam';
+import { IFormElement, ISelectFieldParams } from '@ballerine/ui';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { COUNTRY_PICKER_FIELD_TYPE, CountryPickerField } from './CountryPicker';
+
+// Mock dependencies
+vi.mock('@/helpers/countries-data');
+vi.mock('@/hooks/useLanguageParam/useLanguageParam');
+vi.mock('@ballerine/ui', () => ({
+  SelectField: ({ element }: { element: any }) => (
+    <div data-testid="select-field">{JSON.stringify(element)}</div>
+  ),
+}));
+
+describe('CountryPickerField', () => {
+  const mockElement = {
+    params: {},
+  } as IFormElement<typeof COUNTRY_PICKER_FIELD_TYPE, ISelectFieldParams>;
+
+  const mockCountries = [
+    { const: 'US', title: 'United States' },
+    { const: 'GB', title: 'United Kingdom' },
+  ];
+
+  beforeEach(() => {
+    vi.mocked(getCountries).mockReturnValue(mockCountries);
+    vi.mocked(useLanguageParam).mockReturnValue({ language: 'en', setLanguage: vi.fn() });
+  });
+
+  it('renders SelectField with transformed country options', () => {
+    render(<CountryPickerField element={mockElement} />);
+
+    const selectField = screen.getByTestId('select-field');
+    const elementProp = JSON.parse(selectField.textContent || '');
+
+    expect(elementProp).toEqual({
+      element: COUNTRY_PICKER_FIELD_TYPE,
+      params: {
+        options: [
+          { value: 'US', label: 'United States' },
+          { value: 'GB', label: 'United Kingdom' },
+        ],
+      },
+    });
+  });
+
+  it('uses language from useLanguageParam hook to get countries', () => {
+    vi.mocked(useLanguageParam).mockReturnValue({ language: 'cn', setLanguage: vi.fn() });
+
+    render(<CountryPickerField element={mockElement} />);
+
+    expect(getCountries).toHaveBeenCalledWith('cn');
+  });
+
+  it('preserves existing element params while adding options', () => {
+    const elementWithParams = {
+      ...mockElement,
+      params: {
+        placeholder: 'Select a country',
+      },
+    } as IFormElement<typeof COUNTRY_PICKER_FIELD_TYPE, ISelectFieldParams>;
+
+    render(<CountryPickerField element={elementWithParams} />);
+
+    const selectField = screen.getByTestId('select-field');
+    const elementProp = JSON.parse(selectField.textContent || '');
+
+    expect((elementProp as any).params).toEqual({
+      placeholder: 'Select a country',
+      options: [
+        { value: 'US', label: 'United States' },
+        { value: 'GB', label: 'United Kingdom' },
+      ],
+    });
+  });
+});

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/CountryPicker/index.ts

@@ -0,0 +1 @@
+export * from './CountryPicker';

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/IndustriesPicker/IndustriesPicker.tsx

@@ -0,0 +1,30 @@
+import { IFormElement, ISelectFieldParams, SelectField, TDynamicFormField } from '@ballerine/ui';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const INDUSTRIES_PICKER_FIELD_TYPE = 'industriespickerfield';
+
+export const IndustriesPickerField: TDynamicFormField<ISelectFieldParams> = ({ element }) => {
+  const { t } = useTranslation();
+
+  const translatedIndustries = t('industries', { returnObjects: true }) as string[];
+
+  const elementDefinitionWithIndustriesList: IFormElement<
+    typeof INDUSTRIES_PICKER_FIELD_TYPE,
+    ISelectFieldParams
+  > = useMemo(() => {
+    return {
+      ...element,
+      element: INDUSTRIES_PICKER_FIELD_TYPE,
+      params: {
+        ...element.params,
+        options: translatedIndustries.map(industry => ({
+          value: industry,
+          label: industry,
+        })),
+      },
+    };
+  }, [element, translatedIndustries]);
+
+  return <SelectField element={elementDefinitionWithIndustriesList} />;
+};

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/IndustriesPicker/IndustriesPicker.unit.test.tsx

@@ -0,0 +1,62 @@
+import { IFormElement, ISelectFieldParams } from '@ballerine/ui';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { INDUSTRIES_PICKER_FIELD_TYPE, IndustriesPickerField } from './IndustriesPicker';
+
+// Mock dependencies
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: vi.fn().mockReturnValue(['Industry1', 'Industry2']),
+  }),
+}));
+
+vi.mock('@ballerine/ui', () => ({
+  SelectField: ({ element }: { element: any }) => (
+    <div data-testid="select-field">{JSON.stringify(element)}</div>
+  ),
+}));
+
+describe('IndustriesPickerField', () => {
+  const mockElement = {
+    params: {},
+  } as IFormElement<typeof INDUSTRIES_PICKER_FIELD_TYPE, ISelectFieldParams>;
+
+  it('renders SelectField with transformed industry options', () => {
+    render(<IndustriesPickerField element={mockElement} />);
+
+    const selectField = screen.getByTestId('select-field');
+    const elementProp = JSON.parse(selectField.textContent || '');
+
+    expect(elementProp).toEqual({
+      element: INDUSTRIES_PICKER_FIELD_TYPE,
+      params: {
+        options: [
+          { value: 'Industry1', label: 'Industry1' },
+          { value: 'Industry2', label: 'Industry2' },
+        ],
+      },
+    });
+  });
+
+  it('preserves existing element params while adding options', () => {
+    const elementWithParams = {
+      ...mockElement,
+      params: {
+        placeholder: 'Select an industry',
+      },
+    } as IFormElement<typeof INDUSTRIES_PICKER_FIELD_TYPE, ISelectFieldParams>;
+
+    render(<IndustriesPickerField element={elementWithParams} />);
+
+    const selectField = screen.getByTestId('select-field');
+    const elementProp = JSON.parse(selectField.textContent || '');
+
+    expect((elementProp as any).params).toEqual({
+      placeholder: 'Select an industry',
+      options: [
+        { value: 'Industry1', label: 'Industry1' },
+        { value: 'Industry2', label: 'Industry2' },
+      ],
+    });
+  });
+});

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/IndustriesPicker/index.ts

@@ -0,0 +1 @@
+export * from './IndustriesPicker';

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/LocalePicker/LocalePicker.tsx

@@ -0,0 +1,33 @@
+import { IFormElement, ISelectFieldParams, SelectField, TDynamicFormField } from '@ballerine/ui';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const LOCALE_PICKER_FIELD_TYPE = 'localePickerField';
+
+export const LocalePickerField: TDynamicFormField<ISelectFieldParams> = ({ element }) => {
+  const { t } = useTranslation();
+
+  const elementDefinitionWithLocaleList: IFormElement<
+    typeof LOCALE_PICKER_FIELD_TYPE,
+    ISelectFieldParams
+  > = useMemo(() => {
+    return {
+      ...element,
+      element: LOCALE_PICKER_FIELD_TYPE,
+      params: {
+        ...element.params,
+        options: (
+          t('languages', { returnObjects: true }) as Array<{
+            const: string;
+            title: string;
+          }>
+        ).map(locale => ({
+          value: locale.const,
+          label: locale.title,
+        })),
+      },
+    };
+  }, [element, t]);
+
+  return <SelectField element={elementDefinitionWithLocaleList} />;
+};

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/LocalePicker/LocalePicker.unit.test.tsx

@@ -0,0 +1,65 @@
+import { IFormElement, ISelectFieldParams } from '@ballerine/ui';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { LOCALE_PICKER_FIELD_TYPE, LocalePickerField } from './LocalePicker';
+
+// Mock dependencies
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: vi.fn().mockReturnValue([
+      { const: 'en', title: 'English' },
+      { const: 'es', title: 'Spanish' },
+    ]),
+  }),
+}));
+
+vi.mock('@ballerine/ui', () => ({
+  SelectField: ({ element }: { element: any }) => (
+    <div data-testid="select-field">{JSON.stringify(element)}</div>
+  ),
+}));
+
+describe('LocalePickerField', () => {
+  const mockElement = {
+    params: {},
+  } as IFormElement<typeof LOCALE_PICKER_FIELD_TYPE, ISelectFieldParams>;
+
+  it('renders SelectField with transformed locale options', () => {
+    render(<LocalePickerField element={mockElement} />);
+
+    const selectField = screen.getByTestId('select-field');
+    const elementProp = JSON.parse(selectField.textContent || '');
+
+    expect(elementProp).toEqual({
+      element: LOCALE_PICKER_FIELD_TYPE,
+      params: {
+        options: [
+          { value: 'en', label: 'English' },
+          { value: 'es', label: 'Spanish' },
+        ],
+      },
+    });
+  });
+
+  it('preserves existing element params while adding options', () => {
+    const elementWithParams = {
+      ...mockElement,
+      params: {
+        placeholder: 'Select a language',
+      },
+    } as IFormElement<typeof LOCALE_PICKER_FIELD_TYPE, ISelectFieldParams>;
+
+    render(<LocalePickerField element={elementWithParams} />);
+
+    const selectField = screen.getByTestId('select-field');
+    const elementProp = JSON.parse(selectField.textContent || '');
+
+    expect((elementProp as any).params).toEqual({
+      placeholder: 'Select a language',
+      options: [
+        { value: 'en', label: 'English' },
+        { value: 'es', label: 'Spanish' },
+      ],
+    });
+  });
+});

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/LocalePicker/index.ts

@@ -0,0 +1 @@
+export * from './LocalePicker';

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/MCCPicker/MCCPicker.tsx

@@ -0,0 +1,24 @@
+import { MCC } from '@/components/organisms/UIRenderer/elements/JSONForm/components/MCCPicker/options';
+import { IFormElement, ISelectFieldParams, SelectField, TDynamicFormField } from '@ballerine/ui';
+import { useMemo } from 'react';
+
+export const MCC_PICKER_FIELD_TYPE = 'mccpickerfield';
+
+export const MCCPickerField: TDynamicFormField<ISelectFieldParams> = ({ element }) => {
+  const elementWithMccOptions: IFormElement<typeof MCC_PICKER_FIELD_TYPE, ISelectFieldParams> =
+    useMemo(() => {
+      return {
+        ...element,
+        element: MCC_PICKER_FIELD_TYPE,
+        params: {
+          ...element.params,
+          options: MCC.map(item => ({
+            value: item.const,
+            label: `${item.const} - ${item.title}`,
+          })),
+        },
+      };
+    }, [element]);
+
+  return <SelectField element={elementWithMccOptions} />;
+};

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/MCCPicker/MCCPicker.unit.test.tsx

@@ -0,0 +1,63 @@
+import { IFormElement, ISelectFieldParams } from '@ballerine/ui';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MCC_PICKER_FIELD_TYPE, MCCPickerField } from './MCCPicker';
+
+// Mock dependencies
+vi.mock('@/components/organisms/UIRenderer/elements/JSONForm/components/MCCPicker/options', () => ({
+  MCC: [
+    { const: '1234', title: 'Test MCC 1' },
+    { const: '5678', title: 'Test MCC 2' },
+  ],
+}));
+
+vi.mock('@ballerine/ui', () => ({
+  SelectField: ({ element }: { element: any }) => (
+    <div data-testid="select-field">{JSON.stringify(element)}</div>
+  ),
+}));
+
+describe('MCCPickerField', () => {
+  const mockElement = {
+    params: {},
+  } as IFormElement<typeof MCC_PICKER_FIELD_TYPE, ISelectFieldParams>;
+
+  it('renders SelectField with transformed MCC options', () => {
+    render(<MCCPickerField element={mockElement} />);
+
+    const selectField = screen.getByTestId('select-field');
+    const elementProp = JSON.parse(selectField.textContent || '');
+
+    expect(elementProp).toEqual({
+      element: MCC_PICKER_FIELD_TYPE,
+      params: {
+        options: [
+          { value: '1234', label: '1234 - Test MCC 1' },
+          { value: '5678', label: '5678 - Test MCC 2' },
+        ],
+      },
+    });
+  });
+
+  it('preserves existing element params while adding options', () => {
+    const elementWithParams = {
+      ...mockElement,
+      params: {
+        placeholder: 'Select an MCC',
+      },
+    } as IFormElement<typeof MCC_PICKER_FIELD_TYPE, ISelectFieldParams>;
+
+    render(<MCCPickerField element={elementWithParams} />);
+
+    const selectField = screen.getByTestId('select-field');
+    const elementProp = JSON.parse(selectField.textContent || '');
+
+    expect((elementProp as any).params).toEqual({
+      placeholder: 'Select an MCC',
+      options: [
+        { value: '1234', label: '1234 - Test MCC 1' },
+        { value: '5678', label: '5678 - Test MCC 2' },
+      ],
+    });
+  });
+});

apps/kyb-app/src/pages/CollectionFlow/components/form/fields/MCCPicker/index.ts

@@ -0,0 +1 @@
+export * from './MCCPicker';