Collection Flow V2 - (WIP DO NOT MERGE)

apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx

@@ -23,7 +23,7 @@ export const DateRangePicker = ({ onChange, value, className }: TDateRangePicker
               'text-muted-foreground': !value,
             })}
           >
-            <CalendarIcon className="size-4 mr-2" />
+            <CalendarIcon className="mr-2 size-4" />
             {value?.from && value?.to && (
               <>
                 {formatDate(value.from, 'LLL dd, y')} - {formatDate(value.to, 'LLL dd, y')}

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Actions.tsx

@@ -53,7 +53,7 @@ export const Actions: FunctionComponent<IActionsProps> = ({
         />
         <CaseOptions />
       </div>
-      <div className={`min-h-20 flex justify-between gap-4`}>
+      <div className={`flex min-h-20 justify-between gap-4`}>
         <div className={`flex flex-col space-y-3`}>
           <h2
             className={ctw(`w-full max-w-[35ch] break-all text-4xl font-semibold leading-9`, {

apps/kyb-app/package.json

@@ -35,6 +35,7 @@
     "currency-codes": "^2.1.0",
     "dayjs": "^1.11.6",
     "dompurify": "^3.0.6",
+    "email-validator": "^2.0.4",
     "emblor": "^1.4.6",
     "form-data-encoder": "^3.0.0",
     "i18n-iso-countries": "^7.6.0",
@@ -54,6 +55,7 @@
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.3",
     "react-i18next": "^12.1.4",
+    "react-json-view": "^1.21.3",
     "react-router-dom": "^6.11.2",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.0",

apps/kyb-app/src/App.tsx

@@ -2,6 +2,7 @@ import { LoadingScreen } from '@/common/components/molecules/LoadingScreen';
 import { APP_LANGUAGE_QUERY_KEY } from '@/common/consts/consts';
 import { CustomerProviderFallback } from '@/components/molecules/CustomerProviderFallback';
 import { AppLoadingContainer } from '@/components/organisms/AppLoadingContainer';
+import { VersionResolver } from '@/components/organisms/VersionResolver';
 import { CustomerProvider } from '@/components/providers/CustomerProvider';
 import { useCustomerQuery } from '@/hooks/useCustomerQuery';
 import { useFlowContextQuery } from '@/hooks/useFlowContextQuery';
@@ -29,11 +30,15 @@ export const App = () => {
           loadingPlaceholder={<LoadingScreen />}
           fallback={CustomerProviderFallback}
         >
-          <RouterProvider router={router} />
+          <VersionResolver version={dependancyQueries[1]?.data?.version!}>
+            <RouterProvider router={router} />
+          </VersionResolver>
         </CustomerProvider>
       </AppLoadingContainer>
     </Sentry.ErrorBoundary>
   );
+
+  // return <ValidatorPOC />;
 };
 
 (window as any).toggleDevmode = () => {

apps/kyb-app/src/components/layouts/AppShell/FormContainer.tsx

@@ -10,7 +10,13 @@ export const FormContainer = ({ children, header }: Props) => {
     <ScrollArea orientation="both" className="h-full">
       <div className="text-secondary-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
+          className={`flex-flex-col w-full ${
+            localStorage.getItem('devmode') ? ' w-full' : ' max-w-[385px]'
+          }`}
+        >
+          {children}
+        </div>
       </div>
     </ScrollArea>
   );

apps/kyb-app/src/components/organisms/DynamicUI/Page/Page.tsx

@@ -5,7 +5,7 @@ import { useStateManagerContext } from '@/components/organisms/DynamicUI/StateMa
 import { useDynamicUIContext } from '@/components/organisms/DynamicUI/hooks/useDynamicUIContext';
 import { useRuleExecutor } from '@/components/organisms/DynamicUI/hooks/useRuleExecutor';
 import { ErrorField } from '@/components/organisms/DynamicUI/rule-engines';
-import { UIElement, UIPage } from '@/domains/collection-flow';
+import { UIElementDefinition, UIPage } from '@/domains/collection-flow';
 import { AnyChildren, AnyObject } from '@ballerine/ui';
 import { useMemo } from 'react';
 import { pageContext } from './page.context';
@@ -20,7 +20,7 @@ export interface PageProps {
 export const Page = ({ page, children }: PageProps) => {
   const { pages } = usePageResolverContext();
   const definition = useMemo(() => {
-    const definition: UIElement<AnyObject> = {
+    const definition: UIElementDefinition<AnyObject> = {
       type: 'page',
       name: page.name,
       options: {},

apps/kyb-app/src/components/organisms/DynamicUI/Page/hooks/usePageErrors/usePageErrors.ts

@@ -1,6 +1,6 @@
 import { ErrorField } from '@/components/organisms/DynamicUI/rule-engines';
 import { findDocumentDefinitionById } from '@/components/organisms/UIRenderer/elements/JSONForm/helpers/findDefinitionByName';
-import { Document, UIElement, UIPage } from '@/domains/collection-flow';
+import { Document, UIElementDefinition, UIPage } from '@/domains/collection-flow';
 import { AnyObject } from '@ballerine/ui';
 import { useMemo } from 'react';
 
@@ -9,7 +9,7 @@ export interface PageError {
   pageName: string;
   stateName: string;
   errors: ErrorField[];
-  _elements: UIElement<AnyObject>[];
+  _elements: UIElementDefinition<AnyObject>[];
 }
 
 export const selectDirectors = (context: AnyObject) =>

apps/kyb-app/src/components/organisms/DynamicUI/StateManager/components/ActionsHandler/hooks/useEventEmitterLogic/helpers/getDispatchableActions.ts

@@ -4,14 +4,15 @@ import { DocumentsRuleEngine } from '@/components/organisms/DynamicUI/rule-engin
 import { JmespathRuleEngine } from '@/components/organisms/DynamicUI/rule-engines/jmespath.rule-engine';
 import { JsonLogicRuleEngine } from '@/components/organisms/DynamicUI/rule-engines/json-logic.rule-engine';
 import { JsonSchemaRuleEngine } from '@/components/organisms/DynamicUI/rule-engines/json-schema.rule-engine';
-import { Action, UIElement } from '@/domains/collection-flow';
+import { Action, UIElementDefinition, UIPage } from '@/domains/collection-flow';
 import { AnyObject } from '@ballerine/ui';
 
 export const getDispatchableActions = (
   context: AnyObject,
   actions: Action[],
-  definition: UIElement<AnyObject>,
+  definition: UIElementDefinition<AnyObject>,
   state: UIState,
+  currentPage: UIPage,
 ) => {
   return actions.filter(action => {
     const engineManager = new EngineManager([
@@ -20,6 +21,7 @@ export const getDispatchableActions = (
       new JsonSchemaRuleEngine(),
       new DocumentsRuleEngine(),
       new JmespathRuleEngine(),
+      // new IsStepValidRuleEngine(),
     ]);
 
     if (!action.dispatchOn.rules) return true;
@@ -33,7 +35,7 @@ export const getDispatchableActions = (
               // @ts-ignore
               rule?.type,
             )
-            ?.validate(context, rule, definition, state).isValid,
+            ?.validate(context, rule, definition, state, currentPage).isValid,
       )
     );
   });

apps/kyb-app/src/components/organisms/DynamicUI/StateManager/components/ActionsHandler/hooks/useEventEmitterLogic/useEventEmitter.ts

@@ -1,19 +1,21 @@
+import { usePageResolverContext } from '@/components/organisms/DynamicUI/PageResolver/hooks/usePageResolverContext';
 import { useActionsHandlerContext } from '@/components/organisms/DynamicUI/StateManager/components/ActionsHandler/hooks/useActionsHandlerContext';
 import { getDispatchableActions } from '@/components/organisms/DynamicUI/StateManager/components/ActionsHandler/hooks/useEventEmitterLogic/helpers/getDispatchableActions';
 import { getTriggeredActions } from '@/components/organisms/DynamicUI/StateManager/components/ActionsHandler/hooks/useEventEmitterLogic/helpers/getTriggeredActions';
 import { useActionDispatcher } from '@/components/organisms/DynamicUI/StateManager/components/ActionsHandler/hooks/useEventEmitterLogic/hooks/useActionDispatcher';
 import { UIEventType } from '@/components/organisms/DynamicUI/StateManager/components/ActionsHandler/hooks/useEventEmitterLogic/types';
 import { useStateManagerContext } from '@/components/organisms/DynamicUI/StateManager/components/StateProvider';
 import { useDynamicUIContext } from '@/components/organisms/DynamicUI/hooks/useDynamicUIContext';
-import { UIElement } from '@/domains/collection-flow';
+import { UIElementDefinition } from '@/domains/collection-flow';
 import { AnyObject } from '@ballerine/ui';
 import { useCallback } from 'react';
 
-export const useEventEmitterLogic = (elementDefinition: UIElement<AnyObject>) => {
+export const useEventEmitterLogic = (elementDefinition: UIElementDefinition<AnyObject>) => {
   const { actions, dispatchAction } = useActionsHandlerContext();
   const { stateApi } = useStateManagerContext();
   const { state } = useDynamicUIContext();
   const { getDispatch } = useActionDispatcher(actions, dispatchAction);
+  const { currentPage } = usePageResolverContext();
 
   const emitEvent = useCallback(
     (type: UIEventType) => {
@@ -33,6 +35,7 @@ export const useEventEmitterLogic = (elementDefinition: UIElement<AnyObject>) =>
         triggeredActions,
         elementDefinition,
         state,
+        currentPage!,
       );
 
       console.info(`Dispatchable actions`, {
@@ -52,7 +55,7 @@ export const useEventEmitterLogic = (elementDefinition: UIElement<AnyObject>) =>
         dispatch(action);
       });
     },
-    [elementDefinition, actions, stateApi, state, getDispatch],
+    [elementDefinition, actions, stateApi, state, currentPage, getDispatch],
   );
 
   return emitEvent;

apps/kyb-app/src/components/organisms/DynamicUI/StateManager/hooks/useMachineLogic/useMachineLogic.ts

@@ -1,7 +1,7 @@
+import { isErrorWithMessage } from '@ballerine/common';
 import { AnyObject } from '@ballerine/ui';
 import { WorkflowBrowserSDK } from '@ballerine/workflow-browser-sdk';
 import { useCallback, useMemo, useState } from 'react';
-import { isErrorWithMessage } from '@ballerine/common';
 
 export interface StateMachineAPI {
   invokePlugin: (pluginName: string) => Promise<void>;
@@ -22,7 +22,7 @@ export const useMachineLogic = (
       try {
         await machine.invokePlugin(pluginName);
       } catch (error) {
-        console.log('Failed to invoke plugin', isErrorWithMessage(error) ? error.message : error);
+        console.info('Failed to invoke plugin', isErrorWithMessage(error) ? error.message : error);
       } finally {
         setInvokingPlugin(false);
       }

apps/kyb-app/src/components/organisms/DynamicUI/hooks/useRuleExecutor/useRuleExecutor.ts

@@ -1,68 +1,58 @@
-import { EngineManager } from '@/components/organisms/DynamicUI/StateManager/components/ActionsHandler/helpers/engine-manager';
+import { usePageResolverContext } from '@/components/organisms/DynamicUI/PageResolver/hooks/usePageResolverContext';
 import { UIState } from '@/components/organisms/DynamicUI/hooks/useUIStateLogic/types';
-import { JsonLogicRuleEngine, RuleTestResult } from '@/components/organisms/DynamicUI/rule-engines';
-import { DocumentsRuleEngine } from '@/components/organisms/DynamicUI/rule-engines/documents.rule-engine';
-import { JmespathRuleEngine } from '@/components/organisms/DynamicUI/rule-engines/jmespath.rule-engine';
-import { JsonSchemaRuleEngine } from '@/components/organisms/DynamicUI/rule-engines/json-schema.rule-engine';
-import { Rule, UIElement } from '@/domains/collection-flow';
+import { RuleTestResult } from '@/components/organisms/DynamicUI/rule-engines';
+import { executeRule } from '@/components/organisms/DynamicUI/rule-engines/utils/execute-rules';
+import { Rule, UIElementDefinition } from '@/domains/collection-flow';
 import { AnyObject } from '@ballerine/ui';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 export const useRuleExecutor = (
   context: AnyObject,
   rules: Rule[],
-  definition: UIElement<AnyObject>,
+  definition: UIElementDefinition<AnyObject>,
   uiState: UIState,
 ) => {
   const uiStateRef = useRef(uiState);
+  const { currentPage } = usePageResolverContext();
 
   useEffect(() => {
     uiStateRef.current = uiState;
   }, [uiState]);
 
   const [executionResult, setExecutionResult] = useState<RuleTestResult[]>([]);
 
-  const rulesManager = useMemo(
-    () =>
-      new EngineManager([
-        new JsonLogicRuleEngine(),
-        // @ts-ignore
-        new JsonSchemaRuleEngine(),
-        new JmespathRuleEngine(),
-        new DocumentsRuleEngine(),
-      ]),
-    [],
-  );
-
   const executeRules = useMemo(
     () =>
-      (context: AnyObject, rules: Rule[], definition: UIElement<AnyObject>, uiState: UIState) => {
+      (
+        context: AnyObject,
+        rules: Rule[],
+        definition: UIElementDefinition<AnyObject>,
+        uiState: UIState,
+      ) => {
         const executionResult =
           rules?.map(rule => {
-            const engine = rulesManager.getEngine(rule.type);
-
             const ctx = { ...context };
 
             //This hack is neeeded to filter out `empty`
             //TO DO: Find solution on how to define array items in schemas
             // ctx.documents = ctx?.documents.filter(Boolean);
 
-            return engine?.validate(ctx, rule, definition, uiState);
+            return executeRule(ctx, rule, definition, uiState, currentPage!);
           }) || [];
 
         // @ts-ignore
         setExecutionResult(executionResult);
       },
-    [rulesManager],
+    [currentPage],
   );
 
   useEffect(() => {
     executeRules(context, rules, definition, uiStateRef.current);
-  }, [context, rules, uiStateRef, definition, executeRules]);
+  }, [context, rules, uiStateRef, definition, currentPage, executeRules]);
 
   if (import.meta.env.MODE === 'development') {
     if (executionResult.length && executionResult.every(r => !r.isValid && r.errors?.length)) {
-      console.log('Rules execution result', executionResult);
+      console.info('Rules execution result', executionResult);
     }
   }
 

apps/kyb-app/src/components/organisms/DynamicUI/hooks/useUIStateLogic/hooks/useUIElementsStateLogic/hooks/useUIElementToolsLogic/useUIElementToolsLogic.ts

@@ -27,7 +27,7 @@ export const useUIElementToolsLogic = (elementId: string) => {
   );
 
   const elementState = useMemo(
-    () => state.elements[elementId] || null,
+    () => state?.elements?.[elementId] || null,
     [state.elements, elementId],
   );
 

apps/kyb-app/src/components/organisms/DynamicUI/rule-engines/documents.rule-engine.ts

@@ -6,23 +6,35 @@ import {
   ErrorField,
   RuleEngine,
 } from '@/components/organisms/DynamicUI/rule-engines/rule-engine.abstract';
-import { Document, DocumentsValidatorRule, Rule, UIElement } from '@/domains/collection-flow';
+import {
+  Document,
+  DocumentsValidatorRule,
+  Rule,
+  UIElementDefinition,
+  UIPage,
+} from '@/domains/collection-flow';
 import { AnyObject } from '@ballerine/ui';
 import get from 'lodash/get';
 
 export class DocumentsRuleEngine implements RuleEngine {
   public readonly ENGINE_NAME = 'destination-engine';
   private ruleManager = new EngineManager([new JmespathRuleEngine(), new JsonLogicRuleEngine()]);
 
-  validate(context: AnyObject, rule: unknown, definition: UIElement<AnyObject>, state: UIState) {
+  validate(
+    context: AnyObject,
+    rule: unknown,
+    definition: UIElementDefinition<AnyObject>,
+    state: UIState,
+    page: UIPage,
+  ) {
     if (this.isDestinationValidatorRule(rule)) {
       const errors: ErrorField[] = [];
 
       rule.value.forEach(params => {
         const isRequired = this.isRule(params.required)
           ? this.ruleManager
               ?.getEngine(params.required.type)
-              ?.validate(context, params.required, definition, state).isValid
+              ?.validate(context, params.required, definition, state, page).isValid
           : params.required;
 
         const document = ((context.documents || []) as Document[]).find(

apps/kyb-app/src/components/organisms/DynamicUI/rule-engines/is-step-valid.rule-engine.ts

@@ -0,0 +1,50 @@
+import { UIState } from '@/components/organisms/DynamicUI/hooks/useUIStateLogic/types';
+import {
+  RuleEngine,
+  RuleTestResult,
+} from '@/components/organisms/DynamicUI/rule-engines/rule-engine.abstract';
+import { validate } from '@/components/providers/Validator/hooks/useValidate';
+import { UIElementDefinition, UIPage, ValidContextRule } from '@/domains/collection-flow';
+import { transformV1UIElementsToV2UIElements } from '@/pages/CollectionFlowV2/helpers';
+import { AnyObject } from '@ballerine/ui';
+import jsonLogic from 'json-logic-js';
+
+export class IsStepValidRuleEngine implements RuleEngine {
+  public readonly ENGINE_NAME = 'is-step-valid';
+
+  validate(
+    context: unknown,
+    _: unknown,
+    element: UIElementDefinition<AnyObject>,
+    __: UIState,
+    uiPage: UIPage,
+  ): RuleTestResult {
+    console.info(`Executing rule engine ${this.ENGINE_NAME}`);
+
+    const uiEelemntsV2 = transformV1UIElementsToV2UIElements(uiPage?.elements || []);
+    const validationErrors = validate(uiEelemntsV2, context as AnyObject);
+
+    const result = { isValid: !validationErrors.length, errors: [] };
+
+    console.info(`Result of rule engine ${this.ENGINE_NAME}:`, {
+      isValid: !validationErrors.length,
+      errors: validationErrors,
+    });
+
+    return result;
+  }
+
+  test(context: unknown, rule: unknown) {
+    if (this.isValidContextRule(rule)) {
+      return jsonLogic.apply(rule.value, context as AnyObject) as boolean;
+    }
+
+    throw new Error(`Invalid rule provided to ${this.ENGINE_NAME}`);
+  }
+
+  private isValidContextRule(rule: unknown): rule is ValidContextRule {
+    return (
+      typeof rule === 'object' && rule !== null && 'type' in rule && rule.type === 'json-logic'
+    );
+  }
+}