Illiar/feat/app state (#2796)

* feat: updated types & updated common

* feat: implemented collection flow manager & partially integrated in kyb and wf service

* feat: implemented kyb state handling for backoffice actions

* feat: refactored schemas

* feat: added completed state

* feat: added completed state transition on submit

* fix: fixed build

* fix: updated types

* feat: common bump

* fix: fixed process tracker in backoffice

* fix: fixed kyb seed & process tracker refactor

* feat: added steps order to collection flow config & fixed process tracker in backoffice

* fix: cleanup

* fix: schema

* fix: refactor wf service

* fix: seed fix

* --ammend

* feat: refactor

* feat: refactor

* fix(swagger): default values and bearer indication

---------

Co-authored-by: Alon Peretz <[email protected]>

Author: chesterkmr

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @ballerine/backoffice-v2
 
+## 0.7.60
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/workflow-browser-sdk@0.6.57
+  - @ballerine/workflow-node-sdk@0.6.57
+  - @ballerine/blocks@0.2.24
+  - @ballerine/common@0.9.45
+  - @ballerine/react-pdf-toolkit@1.2.40
+  - @ballerine/ui@0.5.40
+
+## 0.7.59
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/common@0.9.44
+  - @ballerine/workflow-browser-sdk@0.6.56
+  - @ballerine/workflow-node-sdk@0.6.56
+
 ## 0.7.58
 
 ### Patch Changes

apps/backoffice-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.58",
+  "version": "0.7.60",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "repository": {
@@ -50,12 +50,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ballerine/blocks": "0.2.23",
-    "@ballerine/common": "0.9.43",
-    "@ballerine/react-pdf-toolkit": "^1.2.37",
-    "@ballerine/ui": "^0.5.37",
-    "@ballerine/workflow-browser-sdk": "0.6.55",
-    "@ballerine/workflow-node-sdk": "0.6.55",
+    "@ballerine/blocks": "0.2.24",
+    "@ballerine/common": "0.9.45",
+    "@ballerine/react-pdf-toolkit": "^1.2.40",
+    "@ballerine/ui": "^0.5.40",
+    "@ballerine/workflow-browser-sdk": "0.6.57",
+    "@ballerine/workflow-node-sdk": "0.6.57",
     "@botpress/webchat": "^2.1.10",
     "@botpress/webchat-generator": "^0.2.9",
     "@fontsource/inter": "^4.5.15",
@@ -128,8 +128,8 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "@ballerine/config": "^1.1.21",
-    "@ballerine/eslint-config-react": "^2.0.21",
+    "@ballerine/config": "^1.1.22",
+    "@ballerine/eslint-config-react": "^2.0.22",
     "@cspell/cspell-types": "^6.31.1",
     "@faker-js/faker": "^7.6.0",
     "@playwright/test": "^1.32.1",

apps/backoffice-v2/src/common/components/molecules/ProcessTracker/hooks/useProcessTracker/process-tracker-adapters/collection-flow.process-tracker.ts

@@ -28,16 +28,26 @@ export class CollectionFlowProcessTracker implements IProcessTracker {
   }
 
   private getSteps() {
-    return Object.keys(this.workflow?.context?.flowConfig?.stepsProgress ?? {})?.sort((a, b) => {
-      return (
-        (this.workflow?.context?.flowConfig?.stepsProgress?.[a]?.number ?? 0) -
-        (this.workflow?.context?.flowConfig?.stepsProgress?.[b]?.number ?? 0)
-      );
-    });
+    const steps = this.workflow?.context?.collectionFlow?.config?.steps;
+
+    if (!steps?.length) return [];
+
+    // Create a map of stateName to orderNumber for efficient lookup
+    const stateOrderMap = new Map(steps.map(step => [step.stateName, step.orderNumber]));
+
+    // Get progress states and sort them by their corresponding orderNumber
+    return Object.keys(this.workflow?.context?.collectionFlow?.state?.progress ?? {}).sort(
+      (a, b) => {
+        const orderA = stateOrderMap.get(a) ?? 0;
+        const orderB = stateOrderMap.get(b) ?? 0;
+
+        return orderA - orderB;
+      },
+    );
   }
 
   private getCollectionFlowStatus(step: string) {
-    if (this.workflow?.context?.flowConfig?.stepsProgress?.[step]?.isCompleted) {
+    if (this.workflow?.context?.collectionFlow?.state?.progress?.[step]?.isCompleted) {
       return processStatusToIcon[ProcessStatus.SUCCESS];
     }
 

apps/backoffice-v2/src/domains/workflows/fetchers.ts

@@ -6,6 +6,7 @@ import { handleZodError } from '@/common/utils/handle-zod-error/handle-zod-error
 import { WorkflowDefinitionByIdSchema } from '@/domains/workflow-definitions/fetchers';
 import { AmlSchema } from '@/lib/blocks/components/AmlBlock/utils/aml-adapter';
 import { ObjectWithIdSchema } from '@/lib/zod/utils/object-with-id/object-with-id';
+import { CollectionFlowStates } from '@ballerine/common';
 import qs from 'qs';
 import { deepCamelKeys } from 'string-ts';
 import { z } from 'zod';
@@ -115,18 +116,18 @@ export const BaseWorkflowByIdSchema = z.object({
       })
       .passthrough()
       .optional(),
-    flowConfig: z
+    collectionFlow: z
       .object({
-        stepsProgress: z
-          .record(
-            z.string(),
-            z.object({
-              // TODO Until backwards compatibility is handled
-              number: z.number().default(0),
-              isCompleted: z.boolean(),
-            }),
-          )
-          .or(z.undefined()),
+        config: z.object({
+          apiUrl: z.string().url(),
+          steps: z.array(z.object({ stateName: z.string(), orderNumber: z.number() })),
+        }),
+        state: z.object({
+          uiState: z.string(),
+          collectionFlowState: z.enum(Object.values(CollectionFlowStates) as [string, ...string[]]),
+          progress: z.record(z.string(), z.object({ isCompleted: z.boolean() })),
+        }),
+        additionalInformation: z.record(z.string(), z.unknown()).optional(),
       })
       .optional(),
     customData: z.record(z.string(), z.unknown()).optional(),
@@ -150,7 +151,7 @@ export const WorkflowByIdSchema = BaseWorkflowByIdSchema.extend({
         context: true,
       }).extend({
         context: BaseWorkflowByIdSchema.shape.context.omit({
-          flowConfig: true,
+          collectionFlow: true,
         }),
       }),
     )

apps/kyb-app/CHANGELOG.md

@@ -1,5 +1,24 @@
 # kyb-app
 
+## 0.3.71
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/workflow-browser-sdk@0.6.57
+  - @ballerine/blocks@0.2.24
+  - @ballerine/common@0.9.45
+  - @ballerine/ui@0.5.40
+
+## 0.3.70
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/common@0.9.44
+  - @ballerine/workflow-browser-sdk@0.6.56
+
 ## 0.3.69
 
 ### Patch Changes

apps/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.69",
+  "version": "0.3.71",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,10 +15,10 @@
     "test:dev": "vitest"
   },
   "dependencies": {
-    "@ballerine/blocks": "0.2.23",
-    "@ballerine/ui": "0.5.39",
-    "@ballerine/common": "^0.9.43",
-    "@ballerine/workflow-browser-sdk": "0.6.55",
+    "@ballerine/blocks": "0.2.24",
+    "@ballerine/ui": "0.5.40",
+    "@ballerine/common": "^0.9.45",
+    "@ballerine/workflow-browser-sdk": "0.6.57",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",
@@ -63,8 +63,8 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@ballerine/config": "^1.1.21",
-    "@ballerine/eslint-config-react": "^2.0.21",
+    "@ballerine/config": "^1.1.22",
+    "@ballerine/eslint-config-react": "^2.0.22",
     "@jest/globals": "^29.7.0",
     "@sentry/vite-plugin": "^2.9.0",
     "@testing-library/jest-dom": "^6.1.4",

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

@@ -12,12 +12,16 @@ import { ctw } from '@ballerine/ui';
 export const Navigation = () => {
   const { state } = useDynamicUIContext();
   const { t } = useTranslation();
-  const { stateApi } = useStateManagerContext();
+  const { stateApi, payload } = useStateManagerContext();
   const { currentPage } = usePageResolverContext();
   const { customer } = useCustomer();
   const { exit, isExitAvailable } = useAppExit();
 
-  const isFirstStep = currentPage?.number === 1;
+  const currentPageNumber = payload?.collectionFlow?.config?.steps?.find(
+    step => step.stateName === currentPage?.stateName,
+  )?.orderNumber;
+
+  const isFirstStep = currentPageNumber === 1;
   const isDisabled = state.isLoading;
 
   const onPrevious = useCallback(async () => {

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

@@ -1,6 +1,7 @@
 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 { CollectionFlowContext } from '@/domains/collection-flow/types/flow-context.types';
 import { AnyObject } from '@ballerine/ui';
 import { useMemo } from 'react';
 
@@ -22,11 +23,15 @@ export const selectDirectorsDocuments = (context: unknown): Document[] =>
     ?.filter(Boolean)
     ?.flat() || [];
 
-export const usePageErrors = (context: AnyObject, pages: UIPage[]): PageError[] => {
+export const usePageErrors = (context: CollectionFlowContext, pages: UIPage[]): PageError[] => {
   return useMemo(() => {
     const pagesWithErrors: PageError[] = pages.map(page => {
+      const pageNumber = context?.collectionFlow?.config?.steps?.find(
+        step => step.stateName === page.stateName,
+      )?.orderNumber;
+
       const pageErrorBase: PageError = {
-        page: page.number,
+        page: pageNumber ?? page.number,
         pageName: page.name,
         stateName: page.stateName,
         errors: [],

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

@@ -20,7 +20,7 @@ export const StateManager = ({
   const machine = useMemo(() => {
     const initialMachineState = {
       ...initialContext,
-      state: initialContext?.flowConfig?.appState,
+      state: initialContext?.collectionFlow?.state?.uiState,
     };
 
     const machine = createStateMachine(

apps/kyb-app/src/components/organisms/DynamicUI/StateManager/components/ActionsHandler/action-handlers/action-handler.abstract.ts

@@ -1,14 +1,15 @@
 import { StateMachineAPI } from '@/components/organisms/DynamicUI/StateManager/hooks/useMachineLogic';
 import { Action } from '@/domains/collection-flow';
+import { CollectionFlowContext } from '@/domains/collection-flow/types/flow-context.types';
 
 export type ActionHandlerApi = StateMachineAPI;
 
 export abstract class ActionHandler {
   public abstract readonly ACTION_TYPE: string;
 
-  abstract run<TContext>(
-    context: TContext,
+  abstract run(
+    context: CollectionFlowContext,
     action: Action,
     api: ActionHandlerApi,
-  ): Promise<TContext>;
+  ): Promise<CollectionFlowContext>;
 }