feat: implemented redirects using context.config (#2755)

* feat: implemented redirects using context.config

* fix(vscode): submodule search issue

* chore(docs): webhooks schema

---------

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

Author: chesterkmr

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ballerine/backoffice-v2
 
+## 0.7.54
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/react-pdf-toolkit@1.2.37
+  - @ballerine/workflow-browser-sdk@0.6.51
+  - @ballerine/workflow-node-sdk@0.6.51
+  - @ballerine/blocks@0.2.23
+  - @ballerine/common@0.9.39
+  - @ballerine/ui@0.5.37
+
+## 0.7.53
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/common@0.9.38
+  - @ballerine/blocks@0.2.22
+  - @ballerine/react-pdf-toolkit@1.2.36
+  - @ballerine/ui@0.5.36
+  - @ballerine/workflow-browser-sdk@0.6.50
+  - @ballerine/workflow-node-sdk@0.6.50
+
 ## 0.7.52
 
 ### Patch Changes

apps/backoffice-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.52",
+  "version": "0.7.54",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "repository": {
@@ -50,12 +50,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ballerine/blocks": "0.2.21",
-    "@ballerine/common": "0.9.37",
-    "@ballerine/react-pdf-toolkit": "^1.2.35",
-    "@ballerine/ui": "^0.5.35",
-    "@ballerine/workflow-browser-sdk": "0.6.49",
-    "@ballerine/workflow-node-sdk": "0.6.49",
+    "@ballerine/blocks": "0.2.23",
+    "@ballerine/common": "0.9.39",
+    "@ballerine/react-pdf-toolkit": "^1.2.37",
+    "@ballerine/ui": "^0.5.37",
+    "@ballerine/workflow-browser-sdk": "0.6.51",
+    "@ballerine/workflow-node-sdk": "0.6.51",
     "@botpress/webchat": "^2.1.10",
     "@botpress/webchat-generator": "^0.2.9",
     "@fontsource/inter": "^4.5.15",
@@ -126,8 +126,8 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "@ballerine/config": "^1.1.19",
-    "@ballerine/eslint-config-react": "^2.0.19",
+    "@ballerine/config": "^1.1.21",
+    "@ballerine/eslint-config-react": "^2.0.21",
     "@cspell/cspell-types": "^6.31.1",
     "@faker-js/faker": "^7.6.0",
     "@playwright/test": "^1.32.1",

apps/kyb-app/CHANGELOG.md

@@ -1,5 +1,16 @@
 # kyb-app
 
+## 0.3.64
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/workflow-browser-sdk@0.6.51
+  - @ballerine/blocks@0.2.23
+  - @ballerine/common@0.9.39
+  - @ballerine/ui@0.5.37
+
 ## 0.3.63
 
 ### Patch Changes

apps/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.63",
+  "version": "0.3.64",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,10 +14,10 @@
     "test:dev": "vitest"
   },
   "dependencies": {
-    "@ballerine/blocks": "0.2.21",
-    "@ballerine/common": "^0.9.37",
-    "@ballerine/ui": "0.5.36",
-    "@ballerine/workflow-browser-sdk": "0.6.49",
+    "@ballerine/blocks": "0.2.23",
+    "@ballerine/common": "^0.9.39",
+    "@ballerine/ui": "0.5.37",
+    "@ballerine/workflow-browser-sdk": "0.6.51",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",
@@ -62,8 +62,8 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@ballerine/config": "^1.1.19",
-    "@ballerine/eslint-config-react": "^2.0.19",
+    "@ballerine/config": "^1.1.21",
+    "@ballerine/eslint-config-react": "^2.0.21",
     "@jest/globals": "^29.7.0",
     "@sentry/vite-plugin": "^2.9.0",
     "@testing-library/jest-dom": "^6.1.4",

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

@@ -15,6 +15,7 @@ export const StateManager = ({
   children,
   workflowId,
   initialContext,
+  config,
 }: StateManagerProps) => {
   const machine = useMemo(() => {
     const initialMachineState = {
@@ -31,6 +32,7 @@ export const StateManager = ({
     );
 
     machine.overrideContext(initialMachineState);
+
     return machine;
   }, []);
 
@@ -60,13 +62,16 @@ export const StateManager = ({
       },
       state,
       payload: contextPayload,
+      config,
       isPluginLoading: isPluginLoading,
     };
+
     return ctx;
   }, [
     state,
     contextPayload,
     isPluginLoading,
+    config,
     getState,
     sendEvent,
     invokePlugin,

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

@@ -1,5 +1,8 @@
 import { StateMachineAPI } from '@/components/organisms/DynamicUI/StateManager/hooks/useMachineLogic';
-import { CollectionFlowContext } from '@/domains/collection-flow/types/flow-context.types';
+import {
+  CollectionFlowConfig,
+  CollectionFlowContext,
+} from '@/domains/collection-flow/types/flow-context.types';
 import { AnyChildren, AnyObject } from '@ballerine/ui';
 import { MachineConfig } from 'xstate';
 
@@ -9,6 +12,7 @@ export interface StateManagerContext {
   stateApi: StateMachineAPI;
   state: string;
   payload: AnyObject;
+  config?: CollectionFlowConfig;
   isPluginLoading: boolean;
 }
 
@@ -21,4 +25,5 @@ export interface StateManagerProps {
   extensions: AnyObject;
   children: AnyChildren | StateManagerChildCallback;
   initialContext: CollectionFlowContext | null;
+  config?: CollectionFlowConfig;
 }

apps/kyb-app/src/domains/collection-flow/collection-flow.api.ts

@@ -7,7 +7,11 @@ import {
   TUser,
   UISchema,
 } from '@/domains/collection-flow/types';
-import { CollectionFlowContext } from '@/domains/collection-flow/types/flow-context.types';
+import {
+  CollectionFlowConfig,
+  CollectionFlowContext,
+  CollectionFlowContextData,
+} from '@/domains/collection-flow/types/flow-context.types';
 import posthog from 'posthog-js';
 
 export const fetchUser = async (): Promise<TUser> => {
@@ -64,8 +68,12 @@ export const fetchCustomer = async (): Promise<TCustomer> => {
   return await request.get('collection-flow/customer').json<TCustomer>();
 };
 
-export const fetchFlowContext = async (): Promise<CollectionFlowContext> => {
+export const fetchFlowContext = async (): Promise<CollectionFlowContextData> => {
   const result = await request.get('collection-flow/context');
+  const resultJson = await result.json<{
+    context: CollectionFlowContext;
+    config: CollectionFlowConfig;
+  }>();
 
-  return (await result.json<{ context: CollectionFlowContext }>()).context || {};
+  return resultJson;
 };

apps/kyb-app/src/domains/collection-flow/types/flow-context.types.ts

@@ -1,3 +1,5 @@
+import { UIOptions } from '@/domains/collection-flow/types';
+
 export interface FlowConfig {
   apiUrl: string;
   tokenId: string;
@@ -9,3 +11,11 @@ export interface FlowConfig {
 export type CollectionFlowContext = Record<string, unknown> & {
   flowConfig?: FlowConfig;
 };
+
+export interface CollectionFlowConfig {
+  uiOptions?: UIOptions;
+}
+export interface CollectionFlowContextData {
+  context: CollectionFlowContext;
+  config: CollectionFlowConfig;
+}

apps/kyb-app/src/hooks/useUIOptionsRedirect/useUIOptionsRedirect.ts

@@ -1,13 +1,33 @@
+import { useStateManagerContext } from '@/components/organisms/DynamicUI/StateManager/components/StateProvider';
+import { UIOptions } from '@/domains/collection-flow';
 import { useLanguage } from '@/hooks/useLanguage';
 import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 export const useUIOptionsRedirect = (state: 'success' | 'failure') => {
   const { data } = useUISchemasQuery(useLanguage());
+  const { config } = useStateManagerContext();
+
+  const uiOptions: UIOptions | null = useMemo(() => {
+    // Config has priority over uiOptions in data
+    if (config?.uiOptions?.redirectUrls) return config.uiOptions;
+
+    if (data?.uiOptions?.redirectUrls) return data.uiOptions;
+
+    return null;
+  }, [data, config]);
+
+  const redirectUrls: UIOptions['redirectUrls'] | null = useMemo(() => {
+    if (!uiOptions) return null;
+
+    return uiOptions.redirectUrls;
+  }, [uiOptions]);
 
   useEffect(() => {
-    if (data?.uiOptions?.redirectUrls?.[state]) {
-      location.href = data.uiOptions.redirectUrls?.[state] as string;
+    if (redirectUrls?.[state]) {
+      const redirectUrl = redirectUrls[state] as string;
+      console.info(`Collection Flow resolved to ${state}. Redirecting to ${redirectUrl}`);
+      location.href = redirectUrls[state] as string;
     }
-  }, [data, state]);
+  }, [redirectUrls, state]);
 };

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

@@ -62,20 +62,25 @@ export const useCompleteLastStep = () => {
   const isPendingSync = useRef(false);
 
   useEffect(() => {
-    (async () => {
+    void (async () => {
       if (state !== 'finish') return;
 
-      const { data: context } = await refetch();
+      const { data: contextData } = await refetch();
 
       if (
-        !context ||
-        context?.flowConfig?.stepsProgress?.[elements?.at(-1)?.stateName ?? '']?.isCompleted ||
+        !contextData ||
+        contextData?.context?.flowConfig?.stepsProgress?.[elements?.at(-1)?.stateName ?? '']
+          ?.isCompleted ||
         isPendingSync.current
       ) {
         return;
       }
 
-      set(context, `flowConfig.stepsProgress.${elements?.at(-1)?.stateName}.isCompleted`, true);
+      set(
+        contextData.context,
+        `flowConfig.stepsProgress.${elements?.at(-1)?.stateName}.isCompleted`,
+        true,
+      );
       await stateApi.invokePlugin('sync_workflow_runtime');
       isPendingSync.current = true;
     })();
@@ -88,15 +93,15 @@ const isFailed = (state: string) => state === 'failed';
 export const CollectionFlow = withSessionProtected(() => {
   const { language } = useLanguageParam();
   const { data: schema } = useUISchemasQuery(language);
-  const { data: context } = useFlowContextQuery();
+  const { data: contextData } = useFlowContextQuery();
   const { customer } = useCustomer();
   const { t } = useTranslation();
   const { themeDefinition } = useTheme();
 
   const elements = schema?.uiSchema?.elements;
   const definition = schema?.definition.definition;
 
-  const pageErrors = usePageErrors(context ?? {}, elements || []);
+  const pageErrors = usePageErrors(contextData ?? {}, elements || []);
   const isRevision = useMemo(
     () => pageErrors.some(error => error.errors?.some(error => error.type === 'warning')),
     [pageErrors],
@@ -108,24 +113,24 @@ export const CollectionFlow = withSessionProtected(() => {
   const initialContext: CollectionFlowContext | null = useMemo(() => {
     const appState =
       filteredNonEmptyErrors?.[0]?.stateName ||
-      context?.flowConfig?.appState ||
+      contextData?.context?.flowConfig?.appState ||
       elements?.at(0)?.stateName;
 
     if (!appState) return null;
 
     return {
-      ...context,
+      ...contextData?.context,
       flowConfig: {
-        ...context?.flowConfig,
+        ...contextData?.context?.flowConfig,
         appState,
       },
       state: appState,
     };
-  }, [context, elements, filteredNonEmptyErrors]);
+  }, [contextData, elements, filteredNonEmptyErrors]);
 
   const initialUIState = useMemo(() => {
-    return prepareInitialUIState(elements || [], context || {}, isRevision);
-  }, [elements, context, isRevision]);
+    return prepareInitialUIState(elements || [], contextData?.context || {}, isRevision);
+  }, [elements, contextData, isRevision]);
 
   // Breadcrumbs now using scrollIntoView method to make sure that breadcrumb is always in viewport.
   // Due to dynamic dimensions of logo it doesnt work well if scroll happens before logo is loaded.
@@ -143,14 +148,15 @@ export const CollectionFlow = withSessionProtected(() => {
 
   if (initialContext?.flowConfig?.appState == 'rejected') return <Rejected />;
 
-  return definition && context ? (
+  return definition && contextData ? (
     <DynamicUI initialState={initialUIState}>
       <DynamicUI.StateManager
         initialContext={initialContext}
         workflowId="1"
         definitionType={schema?.definition.definitionType}
         extensions={schema?.definition.extensions}
         definition={definition as State}
+        config={contextData?.config}
       >
         {({ state, stateApi }) => {
           // Temp state, has to be resolved to success or failure by plugins