ballerine-io · chesterkmr · Jun 20, 2024 · Jun 23, 2024 · Jun 24, 2024 · Jun 25, 2024
diff --git a/apps/backoffice-v2/CHANGELOG.md b/apps/backoffice-v2/CHANGELOG.md
@@ -31,6 +31,8 @@
 
 ### Patch Changes
 
+- @ballerine/workflow-browser-sdk@0.6.15
+- @ballerine/workflow-node-sdk@0.6.15
 - Updated dependencies
   - @ballerine/common@0.9.9
   - @ballerine/workflow-browser-sdk@0.6.15

diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md
@@ -27,6 +27,7 @@
 
 ### Patch Changes
 
+- @ballerine/workflow-browser-sdk@0.6.15
 - Updated dependencies
   - @ballerine/common@0.9.9
   - @ballerine/workflow-browser-sdk@0.6.15

diff --git a/apps/kyb-app/settings.json b/apps/kyb-app/settings.json
diff --git a/apps/kyb-app/src/__tests/providers/TestProvider/TestProvider.tsx b/apps/kyb-app/src/__tests/providers/TestProvider/TestProvider.tsx
@@ -1,11 +1,9 @@
 import { Head } from '@/Head';
-import { SettingsProvider } from '@/common/providers/SettingsProvider/SettingsProvider';
 import { ThemeProvider } from '@/common/providers/ThemeProvider';
 import { queryClient } from '@/common/utils/query-client';
 import { AnyChildren } from '@ballerine/ui';
 import { QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import settingsJson from '../../../../settings.json';
 
 interface TestProviderProps {
   children: AnyChildren;
@@ -16,9 +14,7 @@ export const TestProvider = ({ children }: TestProviderProps) => {
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
         <Head />
-        <SettingsProvider settings={settingsJson}>
-          <ThemeProvider theme={settingsJson.theme}>{children}</ThemeProvider>
-        </SettingsProvider>
+        <ThemeProvider>{children}</ThemeProvider>
       </QueryClientProvider>
     </React.StrictMode>
   );

diff --git a/apps/kyb-app/src/common/icons.tsx b/apps/kyb-app/src/common/icons.tsx
@@ -2,7 +2,7 @@ export const GlobeIcon = () => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M17.0313 10.5C17.3074 10.5 17.5313 10.2761 17.5313 10C17.5313 9.72386 17.3074 9.5 17.0313 9.5V10.5ZM17 10C17 13.866 13.866 17 10 17V18C14.4183 18 18 14.4183 18 10H17ZM10 17C6.13401 17 3 13.866 3 10H2C2 14.4183 5.58172 18 10 18V17ZM3 10C3 6.13401 6.13401 3 10 3V2C5.58172 2 2 5.58172 2 10H3ZM10 3C13.866 3 17 6.13401 17 10H18C18 5.58172 14.4183 2 10 2V3ZM10 17C9.71239 17 9.39897 16.8689 9.07032 16.5511C8.73926 16.2311 8.41829 15.7438 8.13788 15.1029C7.57773 13.8225 7.21875 12.0188 7.21875 10H6.21875C6.21875 12.1234 6.5943 14.0696 7.22173 15.5037C7.53512 16.22 7.92119 16.8311 8.37526 17.2701C8.83173 17.7114 9.38152 18 10 18V17ZM7.21875 10C7.21875 7.98121 7.57773 6.17746 8.13788 4.89711C8.41829 4.25619 8.73926 3.76892 9.07032 3.44886C9.39897 3.13113 9.71239 3 10 3V2C9.38152 2 8.83173 2.2886 8.37526 2.72991C7.92119 3.16889 7.53512 3.77997 7.22173 4.49629C6.5943 5.93041 6.21875 7.87665 6.21875 10H7.21875ZM10 18C10.6185 18 11.1683 17.7114 11.6247 17.2701C12.0788 16.8311 12.4649 16.22 12.7783 15.5037C13.4057 14.0696 13.7812 12.1234 13.7812 10H12.7812C12.7812 12.0188 12.4223 13.8225 11.8621 15.1029C11.5817 15.7438 11.2607 16.2311 10.9297 16.5511C10.601 16.8689 10.2876 17 10 17V18ZM13.7812 10C13.7812 7.87665 13.4057 5.93041 12.7783 4.49629C12.4649 3.77997 12.0788 3.16889 11.6247 2.72991C11.1683 2.2886 10.6185 2 10 2V3C10.2876 3 10.601 3.13113 10.9297 3.44886C11.2607 3.76892 11.5817 4.25619 11.8621 4.89711C12.4223 6.17746 12.7812 7.98121 12.7812 10H13.7812ZM2.5 10.5L17.0313 10.5V9.5L2.5 9.5L2.5 10.5Z"
-      fill="black"
+      fill="currentColor"
     />
   </svg>
 );
diff --git a/apps/kyb-app/src/common/providers/SettingsProvider/SettingsProvider.tsx b/apps/kyb-app/src/common/providers/SettingsProvider/SettingsProvider.tsx
diff --git a/apps/kyb-app/src/common/providers/SettingsProvider/hooks/useSettings.ts b/apps/kyb-app/src/common/providers/SettingsProvider/hooks/useSettings.ts
diff --git a/apps/kyb-app/src/common/providers/SettingsProvider/index.ts b/apps/kyb-app/src/common/providers/SettingsProvider/index.ts
diff --git a/apps/kyb-app/src/common/providers/SettingsProvider/settings-provider.context.ts b/apps/kyb-app/src/common/providers/SettingsProvider/settings-provider.context.ts
diff --git a/apps/kyb-app/src/common/providers/SettingsProvider/settings.schema.ts b/apps/kyb-app/src/common/providers/SettingsProvider/settings.schema.ts
diff --git a/apps/kyb-app/src/common/providers/SettingsProvider/types.ts b/apps/kyb-app/src/common/providers/SettingsProvider/types.ts
diff --git a/apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx b/apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx
@@ -1,18 +1,38 @@
-import { useLayoutEffect } from 'react';
+import { APP_LANGUAGE_QUERY_KEY } from '@/common/consts/consts';
+import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
 import { transformThemeToInlineStyles } from '@/utils/transform-theme-to-inline-styles';
-import { ITheme } from '@/common/types/settings';
+import { useLayoutEffect, useMemo } from 'react';
+import defaultTheme from '../../../../theme.json';
 
 interface Props {
-  theme: ITheme;
   children: React.ReactNode | React.ReactNode[];
 }
 
-export const ThemeProvider = ({ theme, children }: Props) => {
+export const ThemeProvider = ({ children }: Props) => {
+  const language = new URLSearchParams(window.location.search).get(APP_LANGUAGE_QUERY_KEY) || 'en';
+  const { data: uiSchema, isLoading, error } = useUISchemasQuery(language);
+
+  const theme = useMemo(() => {
+    if (isLoading) return null;
+
+    if (error) {
+      console.warn('Failed to load theme', error);
+
+      return defaultTheme.theme;
+    }
+
+    if (!uiSchema?.uiSchema?.theme) return defaultTheme.theme;
+
+    return uiSchema.uiSchema.theme;
+  }, [uiSchema, isLoading, error]);
+
   useLayoutEffect(() => {
+    if (!theme) return;
+
     document
       .getElementsByTagName('html')[0]
       ?.setAttribute('style', transformThemeToInlineStyles(theme));
-  });
+  }, [theme]);
 
   return <>{children}</>;
 };
diff --git a/apps/kyb-app/src/components/layouts/AppShell/AppShell.tsx b/apps/kyb-app/src/components/layouts/AppShell/AppShell.tsx
@@ -1,9 +1,9 @@
-import { Logo } from '@/components/layouts/AppShell/Logo';
 import { Content } from '@/components/layouts/AppShell/Content';
-import { Sidebar } from '@/components/layouts/AppShell/Sidebar';
-import { Navigation } from '@/components/layouts/AppShell/Navigation';
 import { FormContainer } from '@/components/layouts/AppShell/FormContainer';
 import { LanguagePicker } from '@/components/layouts/AppShell/LanguagePicker';
+import { Logo } from '@/components/layouts/AppShell/Logo';
+import { Navigation } from '@/components/layouts/AppShell/Navigation';
+import { Sidebar } from '@/components/layouts/AppShell/Sidebar';
 
 interface Props {
   children: React.ReactNode | React.ReactNode[];

diff --git a/apps/kyb-app/src/components/layouts/AppShell/Content.tsx b/apps/kyb-app/src/components/layouts/AppShell/Content.tsx
@@ -5,5 +5,5 @@ interface Props {
 }
 
 export const Content = ({ children }: Props) => {
-  return <div className="h-full w-[100%] overflow-auto bg-[#F2F5FF] p-4">{children}</div>;
+  return <div className="bg-accent h-full w-[100%] overflow-auto p-4">{children}</div>;
 };
diff --git a/apps/kyb-app/src/components/layouts/AppShell/FormContainer.tsx b/apps/kyb-app/src/components/layouts/AppShell/FormContainer.tsx
@@ -8,7 +8,7 @@ interface Props {
 export const FormContainer = ({ children, header }: Props) => {
   return (
     <ScrollArea orientation="both" className="h-full">
-      <div className="box-content flex flex-col gap-5 pl-40 pt-20">
+      <div className="text-primary-foreground box-content flex flex-col gap-5 pl-40 pt-20">
         {header ? <div>{header}</div> : null}
         <div className="flex-flex-col w-full max-w-[385px]">{children}</div>
       </div>

diff --git a/apps/kyb-app/src/components/layouts/AppShell/LanguagePicker.tsx b/apps/kyb-app/src/components/layouts/AppShell/LanguagePicker.tsx
@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
 import i18next from 'i18next';
+import { useMemo } from 'react';
 
-import { GlobeIcon } from '@/common/icons';
-import { DropdownInput } from '@ballerine/ui';
-import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
 import { LoadingSpinner } from '@/common/components/atoms/LoadingSpinner';
+import { GlobeIcon } from '@/common/icons';
 import { useLanguageParam } from '@/hooks/useLanguageParam/useLanguageParam';
 import { useLanguageQuery } from '@/hooks/useLanguageQuery';
+import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
+import { DropdownInput } from '@ballerine/ui';
 
 const countryCodeToLanguage = {
   en: 'English',
@@ -41,7 +41,14 @@ export const LanguagePicker = () => {
       props={{
         item: { variant: 'inverted' },
         content: { className: 'w-[204px] p-1', align: 'start' },
-        trigger: { icon: <GlobeIcon />, className: 'px-3 gap-x-2 bg-black/5' },
+        trigger: {
+          icon: (
+            <span className="!text-primary-foreground">
+              <GlobeIcon />
+            </span>
+          ),
+          className: 'px-3 gap-x-2 text-primary-foreground bg-primary',
+        },
       }}
       onChange={selectedLanguage => {
         updateLanguage(selectedLanguage);

diff --git a/apps/kyb-app/src/components/layouts/AppShell/Sidebar.tsx b/apps/kyb-app/src/components/layouts/AppShell/Sidebar.tsx
@@ -6,7 +6,7 @@ interface Props {
 
 export const Sidebar = ({ children }: Props) => {
   return (
-    <div className="bg-primary col-span-2 flex h-screen w-[24%] max-w-[418px] flex-col px-14 pb-4 pt-14">
+    <div className="bg-primary text-primary-foreground col-span-2 flex h-screen w-[24%] max-w-[418px] flex-col px-14 pb-4 pt-14">
       {children}
     </div>
   );

diff --git a/apps/kyb-app/src/components/organisms/DynamicUI/rule-engines/json-schema.rule-engine.ts b/apps/kyb-app/src/components/organisms/DynamicUI/rule-engines/json-schema.rule-engine.ts
@@ -48,6 +48,7 @@ export class JsonSchemaRuleEngine implements RuleEngine {
   }
 
   private extractErrorsWithFields(validator: Ajv, definition: UIElement<AnyObject>) {
+    console.log({ errors: validator.errors, definition });
     const result = validator.errors?.map(error => {
       const erroredParams = Object.values(error.params) as string[];
       const uniqueErroredParams = Array.from(new Set(erroredParams));

diff --git a/...ponents/organisms/UIRenderer/elements/JSONForm/components/FieldTemplate/FieldTemplate.tsx b/...ponents/organisms/UIRenderer/elements/JSONForm/components/FieldTemplate/FieldTemplate.tsx
@@ -1,14 +1,14 @@
+import { FieldTemplateProps } from '@rjsf/utils';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FieldTemplateProps } from '@rjsf/utils';
 
-import { UIElement } from '@/domains/collection-flow';
-import { AnyObject, FieldLayout } from '@ballerine/ui';
-import { useRuleExecutor } from '@/components/organisms/DynamicUI/hooks/useRuleExecutor';
-import { useDynamicUIContext } from '@/components/organisms/DynamicUI/hooks/useDynamicUIContext';
 import { useStateManagerContext } from '@/components/organisms/DynamicUI/StateManager/components/StateProvider';
+import { useDynamicUIContext } from '@/components/organisms/DynamicUI/hooks/useDynamicUIContext';
+import { useRuleExecutor } from '@/components/organisms/DynamicUI/hooks/useRuleExecutor';
 import { findDefinitionByName } from '@/components/organisms/UIRenderer/elements/JSONForm/helpers/findDefinitionByName';
 import { useJSONFormDefinition } from '@/components/organisms/UIRenderer/elements/JSONForm/providers/JSONFormDefinitionProvider/useJSONFormDefinition';
+import { UIElement } from '@/domains/collection-flow';
+import { AnyObject, FieldLayout } from '@ballerine/ui';
 
 export const FieldTemplate = (props: FieldTemplateProps) => {
   const { t } = useTranslation();

diff --git a/apps/kyb-app/src/components/organisms/UIRenderer/elements/StepperUI/StepperUI.tsx b/apps/kyb-app/src/components/organisms/UIRenderer/elements/StepperUI/StepperUI.tsx
@@ -1,20 +1,20 @@
 import { Stepper } from '@/components/atoms/Stepper';
+import {
+  BreadcrumbItemInput,
+  Breadcrumbs,
+} from '@/components/atoms/Stepper/components/atoms/Breadcrumbs';
 import { VerticalLayout } from '@/components/atoms/Stepper/layouts/Vertical';
+import { usePageContext } from '@/components/organisms/DynamicUI/Page';
 import { usePageResolverContext } from '@/components/organisms/DynamicUI/PageResolver/hooks/usePageResolverContext';
 import { useStateManagerContext } from '@/components/organisms/DynamicUI/StateManager/components/StateProvider';
 import { useDynamicUIContext } from '@/components/organisms/DynamicUI/hooks/useDynamicUIContext';
-import { useEffect, useMemo, useState } from 'react';
-import { usePageContext } from '@/components/organisms/DynamicUI/Page';
-import { UIPage } from '@/domains/collection-flow';
+import { UIElementState } from '@/components/organisms/DynamicUI/hooks/useUIStateLogic/hooks/useUIElementsStateLogic/types';
 import { ErrorField } from '@/components/organisms/DynamicUI/rule-engines';
+import { UIPage } from '@/domains/collection-flow';
 import { CollectionFlowContext } from '@/domains/collection-flow/types/flow-context.types';
 import { isPageCompleted } from '@/helpers/prepareInitialUIState';
-import { UIElementState } from '@/components/organisms/DynamicUI/hooks/useUIStateLogic/hooks/useUIElementsStateLogic/types';
-import {
-  BreadcrumbItemInput,
-  Breadcrumbs,
-} from '@/components/atoms/Stepper/components/atoms/Breadcrumbs';
 import { ScrollArea, ScrollBar, ctw } from '@ballerine/ui';
+import { useEffect, useMemo, useState } from 'react';
 
 export const StepperUI = () => {
   const { state: uiState } = useDynamicUIContext();
@@ -92,7 +92,7 @@ export const StepperUI = () => {
                   return (
                     <div
                       data-breadcrumb-id={itemProps.active ? itemProps.id : undefined}
-                      className={ctw('last:bg- flex flex-row items-center gap-4 first:bg-white')}
+                      className={ctw('last:bg- flex flex-row items-center gap-4')}
-                      className={ctw('last:bg- flex flex-row items-center gap-4')}
+                      className={ctw('last:bg-blue-500 flex flex-row items-center gap-4')}
-                      className={ctw('last:bg- flex flex-row items-center gap-4')}
+                      className={ctw('last:bg-blue-500 flex flex-row items-center gap-4')}
                       key={itemProps.id}
                     >
                       <Breadcrumbs.Item

diff --git a/apps/kyb-app/src/components/organisms/UIRenderer/elements/SubmitButton/SubmitButton.tsx b/apps/kyb-app/src/components/organisms/UIRenderer/elements/SubmitButton/SubmitButton.tsx
@@ -75,10 +75,10 @@ export const SubmitButton: UIElementComponent<{ text: string }> = ({ definition
 
   return (
     <Button
-      variant="secondary"
       onClick={handleClick}
       disabled={state.isLoading || uiElementState.isLoading}
       data-testid={definition.name}
+      className="text-primary bg-primary-foreground"
     >
       {definition.options.text || 'Submit'}
     </Button>

diff --git a/apps/kyb-app/src/domains/collection-flow/types/index.ts b/apps/kyb-app/src/domains/collection-flow/types/index.ts
@@ -1,3 +1,4 @@
+import { ITheme } from '@/common/types/settings';
 import { Action, Rule, UIElement } from '@/domains/collection-flow/types/ui-schema.types';
 import { AnyObject } from '@ballerine/ui';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
@@ -141,6 +142,7 @@ export interface UISchema {
   config: UISchemaConfig;
   uiSchema: {
     elements: UIPage[];
+    theme?: ITheme;
   };
   definition: {
     definitionType: string;

diff --git a/apps/kyb-app/src/hooks/useAppExit/useAppExit.ts b/apps/kyb-app/src/hooks/useAppExit/useAppExit.ts
@@ -10,6 +10,8 @@ export const useAppExit = () => {
   const { trackExit } = useFlowTracking();
   const { customer } = useCustomerQuery();
 
+  console.log(uiSchema);
+
   const kybOnExitAction = uiSchema?.config?.kybOnExitAction || 'send-event';
 
   const exit = useCallback(() => {

diff --git a/apps/kyb-app/src/main.tsx b/apps/kyb-app/src/main.tsx
@@ -1,6 +1,5 @@
 import '@total-typescript/ts-reset';
 
-import { SettingsProvider } from '@/common/providers/SettingsProvider/SettingsProvider';
 import { ThemeProvider } from '@/common/providers/ThemeProvider/ThemeProvider';
 import { queryClient } from '@/common/utils/query-client';
 import '@ballerine/ui/dist/style.css';
@@ -9,7 +8,6 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
-import settingsJson from '../settings.json';
 import { App } from './App';
 import { Head } from './Head';
 import './i18next';
@@ -60,11 +58,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <HelmetProvider>
       <QueryClientProvider client={queryClient}>
         <Head />
-        <SettingsProvider settings={settingsJson}>
-          <ThemeProvider theme={settingsJson.theme}>
-            <App />
-          </ThemeProvider>
-        </SettingsProvider>
+        <ThemeProvider>
+          <App />
+        </ThemeProvider>
       </QueryClientProvider>
     </HelmetProvider>
   </React.StrictMode>,

diff --git a/apps/kyb-app/tailwind.config.cjs b/apps/kyb-app/tailwind.config.cjs
@@ -1,5 +1,4 @@
 const { fontFamily } = require('tailwindcss/defaultTheme');
-const appSettings = require('./settings.json');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {