feat: added additional context to workflow core and extended browser-sdk

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @ballerine/backoffice-v2
 
+## 0.7.69
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/workflow-browser-sdk@0.6.65
+  - @ballerine/workflow-node-sdk@0.6.65
+
 ## 0.7.68
 
 ### Patch Changes

apps/backoffice-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.68",
+  "version": "0.7.69",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "type": "module",
@@ -55,8 +55,8 @@
     "@ballerine/common": "0.9.51",
     "@ballerine/react-pdf-toolkit": "^1.2.44",
     "@ballerine/ui": "^0.5.44",
-    "@ballerine/workflow-browser-sdk": "0.6.64",
-    "@ballerine/workflow-node-sdk": "0.6.64",
+    "@ballerine/workflow-browser-sdk": "0.6.65",
+    "@ballerine/workflow-node-sdk": "0.6.65",
     "@botpress/webchat": "^2.1.10",
     "@botpress/webchat-generator": "^0.2.9",
     "@fontsource/inter": "^4.5.15",

apps/kyb-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # kyb-app
 
+## 0.3.80
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/workflow-browser-sdk@0.6.65
+
 ## 0.3.79
 
 ### Patch Changes

apps/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.79",
+  "version": "0.3.80",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,7 +18,7 @@
     "@ballerine/blocks": "0.2.26",
     "@ballerine/ui": "0.5.44",
     "@ballerine/common": "^0.9.51",
-    "@ballerine/workflow-browser-sdk": "0.6.64",
+    "@ballerine/workflow-browser-sdk": "0.6.65",
     "@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

@@ -16,6 +16,7 @@ export const StateManager = ({
   workflowId,
   initialContext,
   config,
+  additionalContext,
 }: StateManagerProps) => {
   const machine = useMemo(() => {
     const initialMachineState = {
@@ -29,14 +30,15 @@ export const StateManager = ({
       definitionType,
       extensions,
       initialMachineState,
+      additionalContext,
     );
 
     machine.overrideContext(initialMachineState);
 
     return machine;
-  }, []);
+  }, [additionalContext]);
 
-  const { machineApi } = useMachineLogic(machine);
+  const { machineApi } = useMachineLogic(machine, additionalContext);
   const {
     contextPayload,
     isPluginLoading,

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

@@ -12,6 +12,7 @@ export class PluginRunnerHandler implements ActionHandler {
 
   async run(_: CollectionFlowContext, action: Action<PluginRunnerParams>, api: StateMachineAPI) {
     await api.invokePlugin(action.params.pluginName);
+
     return api.getContext();
   }
 }

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

@@ -1,11 +1,11 @@
 import { CollectionFlowContext } from '@/domains/collection-flow/types/flow-context.types';
-import { isErrorWithMessage } from '@ballerine/common';
+import { AnyRecord, isErrorWithMessage } from '@ballerine/common';
 import { AnyObject } from '@ballerine/ui';
 import { WorkflowBrowserSDK } from '@ballerine/workflow-browser-sdk';
 import { useCallback, useMemo, useState } from 'react';
 
 export interface StateMachineAPI {
-  invokePlugin: (pluginName: string) => Promise<void>;
+  invokePlugin: (pluginName: string, additionalContext?: AnyRecord) => Promise<void>;
   sendEvent: (eventName: string) => Promise<void>;
   setContext: (newContext: CollectionFlowContext) => CollectionFlowContext;
   getContext: () => CollectionFlowContext;
@@ -14,21 +14,22 @@ export interface StateMachineAPI {
 
 export const useMachineLogic = (
   machine: WorkflowBrowserSDK,
+  additionalContext?: AnyRecord,
 ): { isInvokingPlugin: boolean; machineApi: StateMachineAPI } => {
   const [isInvokingPlugin, setInvokingPlugin] = useState(false);
 
   const invokePlugin = useCallback(
     async (pluginName: string) => {
       setInvokingPlugin(true);
       try {
-        await machine.invokePlugin(pluginName);
+        await machine.invokePlugin(pluginName, additionalContext);
       } catch (error) {
         console.log('Failed to invoke plugin', isErrorWithMessage(error) ? error.message : error);
       } finally {
         setInvokingPlugin(false);
       }
     },
-    [machine],
+    [machine, additionalContext],
   );
 
   const sendEvent = useCallback(

apps/kyb-app/src/components/organisms/DynamicUI/StateManager/state-machine.factory.ts

@@ -1,4 +1,5 @@
 import { State } from '@/components/organisms/DynamicUI/StateManager/types';
+import { AnyRecord } from '@ballerine/common';
 import { AnyObject } from '@ballerine/ui';
 import { createWorkflow } from '@ballerine/workflow-browser-sdk';
 
@@ -8,6 +9,7 @@ export const createStateMachine = (
   definitionType: string,
   extensions: AnyObject,
   workflowContext?: AnyObject,
+  additionalContext?: AnyRecord,
 ) =>
   createWorkflow({
     runtimeId: workflowId,
@@ -16,4 +18,5 @@ export const createStateMachine = (
     definitionType: 'statechart-json',
     extensions: extensions,
     workflowContext: workflowContext,
+    additionalContext: additionalContext,
   });

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

@@ -3,6 +3,7 @@ import {
   CollectionFlowConfig,
   CollectionFlowContext,
 } from '@/domains/collection-flow/types/flow-context.types';
+import { AnyRecord } from '@ballerine/common';
 import { AnyChildren, AnyObject } from '@ballerine/ui';
 import { MachineConfig } from 'xstate';
 
@@ -26,4 +27,5 @@ export interface StateManagerProps {
   children: AnyChildren | StateManagerChildCallback;
   initialContext: CollectionFlowContext | null;
   config?: CollectionFlowConfig;
+  additionalContext?: AnyRecord;
 }

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

@@ -38,6 +38,7 @@ import {
 } from '@ballerine/common';
 import { AnyObject } from '@ballerine/ui';
 import { FailedScreen } from './components/pages/FailedScreen';
+import { useAdditionalWorkflowContext } from './hooks/useAdditionalWorkflowContext';
 
 const elems = {
   h1: Title,
@@ -73,6 +74,7 @@ export const CollectionFlow = withSessionProtected(() => {
   const { customer } = useCustomer();
   const { t } = useTranslation();
   const { themeDefinition } = useTheme();
+  const additionalContext = useAdditionalWorkflowContext();
 
   const elements = schema?.uiSchema?.elements;
   const definition = schema?.definition.definition;
@@ -132,6 +134,8 @@ export const CollectionFlow = withSessionProtected(() => {
   if (getCollectionFlowState(initialContext)?.status === CollectionFlowStatusesEnum.failed)
     return <FailedScreen />;
 
+  console.log('additionalContext', additionalContext);
+
   return definition && collectionFlowData ? (
     <DynamicUI initialState={initialUIState}>
       <DynamicUI.StateManager
@@ -141,6 +145,7 @@ export const CollectionFlow = withSessionProtected(() => {
         extensions={schema?.definition.extensions}
         definition={definition as State}
         config={collectionFlowData?.config}
+        additionalContext={additionalContext}
       >
         {({ state, stateApi }) => {
           return (

apps/kyb-app/src/pages/CollectionFlow/hooks/useAdditionalWorkflowContext/index.ts

@@ -0,0 +1 @@
+export * from './useAdditionalWorkflowContext';

apps/kyb-app/src/pages/CollectionFlow/hooks/useAdditionalWorkflowContext/useAdditionalWorkflowContext.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+export const useAdditionalWorkflowContext = () => {
+  const [searchParams] = useSearchParams();
+
+  const context = useMemo(() => {
+    return {
+      query: {
+        token: searchParams.get('token'),
+      },
+    };
+  }, [searchParams]);
+
+  return context;
+};

examples/headless-example/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ballerine/headless-example
 
+## 0.3.64
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/workflow-browser-sdk@0.6.65
+
 ## 0.3.63
 
 ### Patch Changes

examples/headless-example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/headless-example",
   "private": true,
-  "version": "0.3.63",
+  "version": "0.3.64",
   "type": "module",
   "scripts": {
     "spellcheck": "cspell \"*\"",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@ballerine/common": "0.9.51",
-    "@ballerine/workflow-browser-sdk": "0.6.64",
+    "@ballerine/workflow-browser-sdk": "0.6.65",
     "@felte/reporter-svelte": "^1.1.5",
     "@felte/validator-zod": "^1.0.13",
     "@fontsource/inter": "^4.5.15",

packages/workflow-core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ballerine/workflow-core
 
+## 0.6.65
+
+### Patch Changes
+
+- Added additionalContext
+
 ## 0.6.64
 
 ### Patch Changes

packages/workflow-core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/workflow-core",
   "author": "Ballerine <dev@ballerine.com>",
-  "version": "0.6.64",
+  "version": "0.6.65",
   "description": "workflow-core",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

packages/workflow-core/src/lib/plugins/external-plugin/api-plugin.ts

@@ -41,7 +41,7 @@ export class ApiPlugin {
     this.displayName = pluginParams.displayName;
   }
 
-  async invoke(context: TContext) {
+  async invoke(context: TContext, additionalContext?: AnyRecord) {
     let requestPayload;
 
     try {
@@ -59,7 +59,10 @@ export class ApiPlugin {
         }
       }
 
-      const _url = await this._getPluginUrl(context);
+      const _url = await this._getPluginUrl({
+        ...context,
+        ...additionalContext,
+      });
 
       logger.log('API Plugin - Sending API request', {
         url: _url,
@@ -70,7 +73,10 @@ export class ApiPlugin {
         _url,
         this.method,
         requestPayload,
-        await this.composeRequestHeaders(this.headers!, context),
+        await this.composeRequestHeaders(this.headers!, {
+          ...context,
+          ...additionalContext,
+        }),
       );
 
       logger.log('API Plugin - Received response', {

packages/workflow-core/src/lib/types.ts

@@ -1,9 +1,6 @@
+import { RiskRulePlugin } from '@/lib/plugins/common-plugin/risk-rules-plugin';
+import type { AnyRecord } from '@ballerine/common';
 import type { MachineConfig, MachineOptions } from 'xstate';
-import type { CommonPlugins, HttpPlugins, StatePlugins } from './plugins/types';
-import type {
-  IDispatchEventPluginParams,
-  ISerializableHttpPluginParams,
-} from './plugins/external-plugin/types';
 import type {
   ChildWorkflowPluginParams,
   ISerializableChildPluginParams,
@@ -12,19 +9,22 @@ import type {
   ISerializableRiskRulesPlugin,
   WorkflowTokenPluginParams,
 } from './plugins/common-plugin/types';
+import type { DispatchEventPlugin } from './plugins/external-plugin/dispatch-event-plugin';
+import type {
+  IDispatchEventPluginParams,
+  ISerializableHttpPluginParams,
+} from './plugins/external-plugin/types';
+import type { CommonPlugins, HttpPlugins, StatePlugins } from './plugins/types';
 import type { TContext } from './utils';
 import type { THelperFormatingLogic } from './utils/context-transformers/types';
-import type { AnyRecord } from '@ballerine/common';
-import type { DispatchEventPlugin } from './plugins/external-plugin/dispatch-event-plugin';
-import { RiskRulePlugin } from '@/lib/plugins/common-plugin/risk-rules-plugin';
 
 export type ObjectValues<TObject extends Record<any, any>> = TObject[keyof TObject];
 
 export interface Workflow {
   subscribe: (eventName: string, callback: (event: WorkflowEvent) => Promise<void>) => void;
-  sendEvent: (event: WorkflowEventWithoutState) => Promise<void>;
+  sendEvent: (event: WorkflowEventWithoutState, additionalContext?: AnyRecord) => Promise<void>;
   getSnapshot: () => Record<PropertyKey, any>;
-  invokePlugin: (pluginName: string) => Promise<void>;
+  invokePlugin: (pluginName: string, additionalContext?: AnyRecord) => Promise<void>;
   overrideContext: (context: any) => any;
 }