feat: reworked final submission & added step resolution for edit & revision

Author: chesterkmr

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

@@ -25,7 +25,7 @@ export const Navigation = () => {
     ) + 1;
 
   const isFirstStep = currentPageNumber === 1;
-  const isDisabled = uiState.isFinalSubmitted || uiState.isSyncing;
+  const isDisabled = uiState.isSyncing;
 
   const onPrevious = useCallback(async () => {
     if (!isFirstStep) {

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

@@ -6,7 +6,36 @@ import {
   StateManagerContext,
   StateManagerProps,
 } from '@/components/organisms/DynamicUI/StateManager/types';
-import { useMemo } from 'react';
+import { WorkflowBrowserSDK } from '@ballerine/workflow-browser-sdk';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+const initializeStateMachine = ({
+  workflowId,
+  definition,
+  definitionType,
+  extensions,
+  additionalContext,
+  initialContext,
+  initialState,
+}: Omit<StateManagerProps, 'children'> & { initialState: string }) => {
+  const initialMachineState = {
+    ...initialContext,
+    state: initialState,
+  };
+
+  const machine = createStateMachine(
+    workflowId,
+    definition,
+    definitionType,
+    extensions,
+    initialMachineState,
+    additionalContext,
+  );
+
+  machine.overrideContext(initialMachineState);
+
+  return machine;
+};
 
 export const StateManager = ({
   definition,
@@ -18,27 +47,75 @@ export const StateManager = ({
   config,
   additionalContext,
 }: StateManagerProps) => {
-  const machine = useMemo(() => {
-    const initialMachineState = {
-      ...initialContext,
-      state: initialContext?.collectionFlow?.state?.currentStep,
-    };
-
-    const machine = createStateMachine(
+  const [stateMachine, setStateMachine] = useState<WorkflowBrowserSDK>(() =>
+    initializeStateMachine({
       workflowId,
       definition,
       definitionType,
       extensions,
-      initialMachineState,
       additionalContext,
-    );
+      initialContext,
+      initialState: initialContext?.collectionFlow?.state?.currentStep!,
+    }),
+  );
+
+  const prevAdditionalContextRef = useRef(additionalContext);
+
+  useEffect(() => {
+    if (prevAdditionalContextRef.current !== additionalContext) {
+      setStateMachine(prev =>
+        initializeStateMachine({
+          workflowId,
+          definition,
+          definitionType,
+          extensions,
+          additionalContext,
+          initialContext: prev.getSnapshot().context,
+          initialState: prev.getSnapshot().value,
+        }),
+      );
+
+      prevAdditionalContextRef.current = additionalContext;
+    }
+  }, [
+    prevAdditionalContextRef,
+    additionalContext,
+    stateMachine,
+    workflowId,
+    definition,
+    definitionType,
+    extensions,
+    initialContext,
+  ]);
 
-    machine.overrideContext(initialMachineState);
+  const reinitializeStateMachineWithNewState = useCallback(
+    (newState: string) => {
+      setStateMachine(prev => {
+        const prevContext = prev.getSnapshot().context;
 
-    return machine;
-  }, [additionalContext]);
+        return initializeStateMachine({
+          workflowId,
+          definition,
+          definitionType,
+          extensions,
+          additionalContext,
+          initialContext: prevContext,
+          initialState: newState,
+        });
+      });
+    },
+    [
+      additionalContext,
+      stateMachine,
+      workflowId,
+      definition,
+      definitionType,
+      extensions,
+      initialContext,
+    ],
+  );
 
-  const { machineApi } = useMachineLogic(machine, additionalContext);
+  const { machineApi } = useMachineLogic(stateMachine, additionalContext);
   const {
     contextPayload,
     isPluginLoading,
@@ -61,6 +138,7 @@ export const StateManager = ({
         setContext,
         getContext,
         getState,
+        setCollectionFlowState: reinitializeStateMachineWithNewState,
       },
       state,
       payload: contextPayload,
@@ -79,6 +157,7 @@ export const StateManager = ({
     invokePlugin,
     setContext,
     getContext,
+    reinitializeStateMachineWithNewState,
   ]);
 
   const child = useMemo(

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

@@ -21,6 +21,15 @@ export const useStateLogic = (machineApi: StateMachineAPI, initialContext = {})
   const contextRef = useRef<State>(contextPayload);
   const { helpers } = useDynamicUIContext();
 
+  useEffect(() => {
+    setState(prev => ({
+      ...prev,
+      machineState: machineApi.getState(),
+      payload: machineApi.getContext() as CollectionFlowContext,
+    }));
+    console.log('new state', machineApi.getState());
+  }, [machineApi]);
+
   useEffect(() => {
     const ctx = machineApi.getContext();
 

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

@@ -10,7 +10,9 @@ import { MachineConfig } from 'xstate';
 export type State = MachineConfig<AnyObject, AnyObject, any>;
 
 export interface StateManagerContext {
-  stateApi: StateMachineAPI;
+  stateApi: StateMachineAPI & {
+    setCollectionFlowState: (state: string) => void;
+  };
   state: string;
   payload: CollectionFlowContext;
   config?: CollectionFlowConfig;

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

@@ -3,6 +3,5 @@ import { UIElementsState } from '@/components/organisms/DynamicUI/hooks/useUISta
 export interface UIState {
   isLoading: boolean;
   isRevision?: boolean;
-  isFinalSubmitted?: boolean;
   elements: UIElementsState;
 }