feat: refactored app state (#2808)

Author: chesterkmr

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @ballerine/backoffice-v2
 
+## 0.7.61
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/common@0.9.46
+  - @ballerine/workflow-browser-sdk@0.6.58
+  - @ballerine/workflow-node-sdk@0.6.58
+
 ## 0.7.60
 
 ### Patch Changes

apps/backoffice-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.60",
+  "version": "0.7.61",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "repository": {
@@ -51,11 +51,11 @@
   },
   "dependencies": {
     "@ballerine/blocks": "0.2.24",
-    "@ballerine/common": "0.9.45",
+    "@ballerine/common": "0.9.46",
     "@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",
+    "@ballerine/workflow-browser-sdk": "0.6.58",
+    "@ballerine/workflow-node-sdk": "0.6.58",
     "@botpress/webchat": "^2.1.10",
     "@botpress/webchat-generator": "^0.2.9",
     "@fontsource/inter": "^4.5.15",

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

@@ -36,7 +36,7 @@ export class CollectionFlowProcessTracker implements IProcessTracker {
     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(
+    return Object.keys(this.workflow?.context?.collectionFlow?.state?.progressBreakdown ?? {}).sort(
       (a, b) => {
         const orderA = stateOrderMap.get(a) ?? 0;
         const orderB = stateOrderMap.get(b) ?? 0;
@@ -47,7 +47,7 @@ export class CollectionFlowProcessTracker implements IProcessTracker {
   }
 
   private getCollectionFlowStatus(step: string) {
-    if (this.workflow?.context?.collectionFlow?.state?.progress?.[step]?.isCompleted) {
+    if (this.workflow?.context?.collectionFlow?.state?.progressBreakdown?.[step]?.isCompleted) {
       return processStatusToIcon[ProcessStatus.SUCCESS];
     }
 

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

@@ -6,7 +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 { CollectionFlowStatuses } from '@ballerine/common';
 import qs from 'qs';
 import { deepCamelKeys } from 'string-ts';
 import { z } from 'zod';
@@ -123,9 +123,9 @@ export const BaseWorkflowByIdSchema = z.object({
           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() })),
+          currentStep: z.string(),
+          status: z.enum(Object.values(CollectionFlowStatuses) as [string, ...string[]]),
+          progressBreakdown: z.record(z.string(), z.object({ isCompleted: z.boolean() })),
         }),
         additionalInformation: z.record(z.string(), z.unknown()).optional(),
       })

apps/kyb-app/CHANGELOG.md

@@ -1,5 +1,13 @@
 # kyb-app
 
+## 0.3.72
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/common@0.9.46
+  - @ballerine/workflow-browser-sdk@0.6.58
+
 ## 0.3.71
 
 ### Patch Changes

apps/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.71",
+  "version": "0.3.72",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,8 +17,8 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.24",
     "@ballerine/ui": "0.5.40",
-    "@ballerine/common": "^0.9.45",
-    "@ballerine/workflow-browser-sdk": "0.6.57",
+    "@ballerine/common": "^0.9.46",
+    "@ballerine/workflow-browser-sdk": "0.6.58",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",

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?.collectionFlow?.state?.uiState,
+      state: initialContext?.collectionFlow?.state?.currentStep,
     };
 
     const machine = createStateMachine(

apps/kyb-app/src/components/organisms/UIRenderer/elements/SubmitButton/SubmitButton.tsx

@@ -12,7 +12,7 @@ import { useUIElementState } from '@/components/organisms/UIRenderer/hooks/useUI
 import { UIElementComponent } from '@/components/organisms/UIRenderer/types';
 import { UIPage } from '@/domains/collection-flow';
 import { useFlowTracking } from '@/hooks/useFlowTracking';
-import { CollectionFlowManager, CollectionFlowStates } from '@ballerine/common';
+import { CollectionFlowManager, CollectionFlowStatuses } from '@ballerine/common';
 import { Button } from '@ballerine/ui';
 import { useCallback, useMemo } from 'react';
 
@@ -72,7 +72,7 @@ export const SubmitButton: UIElementComponent<{ text: string }> = ({ definition
     if (isFinishPage && isValid) {
       const collectionFlowManager = new CollectionFlowManager(stateApi.getContext());
 
-      collectionFlowManager.state().collectionFlowState = CollectionFlowStates.completed;
+      collectionFlowManager.state().status = CollectionFlowStatuses.completed;
       collectionFlowManager.state().setStepCompletionState(currentPage?.stateName as string, true);
 
       stateApi.setContext(collectionFlowManager.context);

apps/kyb-app/src/helpers/prepareInitialUIState.ts

@@ -24,7 +24,7 @@ export const prepareInitialUIState = (
     elements: {},
   };
 
-  if (pages[0]?.stateName === context.collectionFlow?.state?.uiState) return initialUIState;
+  if (pages[0]?.stateName === context.collectionFlow?.state?.currentStep) return initialUIState;
 
   pages.forEach(page => {
     initialUIState.elements[page.stateName] = {

apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx

@@ -31,7 +31,7 @@ import { Approved } from '@/pages/CollectionFlow/components/pages/Approved';
 import { Failed } from '@/pages/CollectionFlow/components/pages/Failed';
 import { Rejected } from '@/pages/CollectionFlow/components/pages/Rejected';
 import { Success } from '@/pages/CollectionFlow/components/pages/Success';
-import { CollectionFlowManager, CollectionFlowStates } from '@ballerine/common';
+import { CollectionFlowManager, CollectionFlowStatuses } from '@ballerine/common';
 import { AnyObject } from '@ballerine/ui';
 
 const elems = {
@@ -74,7 +74,7 @@ export const CollectionFlow = withSessionProtected(() => {
 
   const pageErrors = usePageErrors(context ?? ({} as CollectionFlowContext), elements || []);
   const isRevision = useMemo(
-    () => context?.collectionFlow?.state?.collectionFlowState === CollectionFlowStates.revision,
+    () => context?.collectionFlow?.state?.status === CollectionFlowStatuses.revision,
     [context],
   );
 
@@ -83,8 +83,8 @@ export const CollectionFlow = withSessionProtected(() => {
 
     if (isRevision) {
       const revisionStateName = getRevisionStateName(pageErrors);
-      collectionFlowManager.state().uiState =
-        revisionStateName || collectionFlowManager.state().uiState;
+      collectionFlowManager.state().currentStep =
+        revisionStateName || collectionFlowManager.state().currentStep;
     }
 
     return collectionFlowManager.context as CollectionFlowContext;
@@ -106,10 +106,10 @@ export const CollectionFlow = withSessionProtected(() => {
     setLogoLoaded(false);
   }, [customer?.logoImageUri]);
 
-  if (initialContext?.collectionFlow?.state?.collectionFlowState === CollectionFlowStates.approved)
+  if (initialContext?.collectionFlow?.state?.status === CollectionFlowStatuses.approved)
     return <Approved />;
 
-  if (initialContext?.collectionFlow?.state?.collectionFlowState === CollectionFlowStates.rejected)
+  if (initialContext?.collectionFlow?.state?.status === CollectionFlowStatuses.rejected)
     return <Rejected />;
 
   return definition && context ? (
@@ -132,16 +132,15 @@ export const CollectionFlow = withSessionProtected(() => {
                 const collectionFlowManager = new CollectionFlowManager(stateApi.getContext());
 
                 const isAnyStepCompleted = Object.values(
-                  collectionFlowManager.state().progress || {},
+                  collectionFlowManager.state().progressBreakdown || {},
                 ).some(step => step.isCompleted);
 
                 collectionFlowManager.state().setStepCompletionState(prevState, true);
-                collectionFlowManager.state().uiState = currentState;
+                collectionFlowManager.state().currentStep = currentState;
 
                 if (!isAnyStepCompleted) {
                   console.log('Collection flow touched, changing state to inprogress');
-                  collectionFlowManager.state().collectionFlowState =
-                    CollectionFlowStates.inprogress;
+                  collectionFlowManager.state().status = CollectionFlowStatuses.inprogress;
 
                   console.log('Updating context to', collectionFlowManager.context);
                 }