feat: implemented redirects handling (#2715)

* feat: implemented redirects handling

* fix: removed debugger & added loading screen to failed

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

@@ -12,6 +12,7 @@ import posthog from 'posthog-js';
 
 export const fetchUser = async (): Promise<TUser> => {
   const user = await request.get('collection-flow/user').json<TUser>();
+
   if (user) {
     try {
       posthog.identify(user.id, {
@@ -21,6 +22,7 @@ export const fetchUser = async (): Promise<TUser> => {
       console.error('Error identifying user in PostHog:', error);
     }
   }
+
   return user;
 };
 

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

@@ -59,7 +59,7 @@ export interface Document {
     revisionReason?: string;
     rejectionReason?: string;
   };
-  pages?: { ballerineFileId: string }[];
+  pages?: Array<{ ballerineFileId: string }>;
 }
 
 export interface UBO {
@@ -126,7 +126,7 @@ export interface UIPage {
   name: string;
   number: number;
   stateName: string;
-  elements: UIElement<AnyObject>[];
+  elements: Array<UIElement<AnyObject>>;
   actions: Action[];
   pageValidation?: Rule[];
 }
@@ -136,6 +136,13 @@ export interface UISchemaConfig {
   supportedLanguages: string[];
 }
 
+export interface UIOptions {
+  redirectUrls?: {
+    success?: string;
+    failure?: string;
+  };
+}
+
 export interface UISchema {
   id: string;
   config: UISchemaConfig;
@@ -147,6 +154,7 @@ export interface UISchema {
     definition: AnyObject;
     extensions: AnyObject;
   };
+  uiOptions?: UIOptions;
 }
 
 export * from './ui-schema.types';

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

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

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

@@ -0,0 +1,13 @@
+import { useLanguage } from '@/hooks/useLanguage';
+import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
+import { useEffect } from 'react';
+
+export const useUIOptionsRedirect = (state: 'success' | 'failure') => {
+  const { data } = useUISchemasQuery(useLanguage());
+
+  useEffect(() => {
+    if (data?.uiOptions?.redirectUrls?.[state]) {
+      location.href = data.uiOptions.redirectUrls?.[state] as string;
+    }
+  }, [data, state]);
+};

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

@@ -22,7 +22,9 @@ import { useFlowContextQuery } from '@/hooks/useFlowContextQuery';
 import { useLanguageParam } from '@/hooks/useLanguageParam/useLanguageParam';
 import { withSessionProtected } from '@/hooks/useSessionQuery/hocs/withSessionProtected';
 import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
+import { LoadingScreen } from '@/pages/CollectionFlow/components/atoms/LoadingScreen';
 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 { AnyObject } from '@ballerine/ui';
@@ -78,6 +80,9 @@ export const useCompleteLastStep = () => {
   }, [elements, refetch, state, stateApi]);
 };
 
+const isSuccess = (state: string) => state === 'success' || state === 'finish';
+const isFailed = (state: string) => state === 'failed';
+
 export const CollectionFlow = withSessionProtected(() => {
   const { language } = useLanguageParam();
   const { data: schema } = useUISchemasQuery(language);
@@ -102,6 +107,7 @@ export const CollectionFlow = withSessionProtected(() => {
       filteredNonEmptyErrors?.[0]?.stateName ||
       context?.flowConfig?.appState ||
       elements?.at(0)?.stateName;
+
     if (!appState) return null;
 
     return {
@@ -131,6 +137,7 @@ export const CollectionFlow = withSessionProtected(() => {
   }, [customer?.logoImageUri]);
 
   if (initialContext?.flowConfig?.appState === 'approved') return <Approved />;
+
   if (initialContext?.flowConfig?.appState == 'rejected') return <Rejected />;
 
   return definition && context ? (
@@ -142,10 +149,15 @@ export const CollectionFlow = withSessionProtected(() => {
         extensions={schema?.definition.extensions}
         definition={definition as State}
       >
-        {({ state, stateApi }) =>
-          state === 'finish' ? (
-            <Success />
-          ) : (
+        {({ state, stateApi }) => {
+          // Temp state, has to be resolved to success or failure by plugins
+          if (state === 'done') return <LoadingScreen />;
+
+          if (isSuccess(state)) return <Success />;
+
+          if (isFailed(state)) return <Failed />;
+
+          return (
             <DynamicUI.PageResolver state={state} pages={elements ?? []}>
               {({ currentPage }) => {
                 return currentPage ? (
@@ -244,8 +256,8 @@ export const CollectionFlow = withSessionProtected(() => {
                 ) : null;
               }}
             </DynamicUI.PageResolver>
-          )
-        }
+          );
+        }}
       </DynamicUI.StateManager>
     </DynamicUI>
   ) : null;

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

@@ -0,0 +1,8 @@
+import { LoadingScreen } from '@/common/components/molecules/LoadingScreen';
+import { useUIOptionsRedirect } from '@/hooks/useUIOptionsRedirect';
+
+export const Failed = () => {
+  useUIOptionsRedirect('failure');
+
+  return <LoadingScreen />;
+};

apps/kyb-app/src/pages/CollectionFlow/components/pages/Failed/index.ts

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

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useCustomer } from '@/components/providers/CustomerProvider';
 import { useAppExit } from '@/hooks/useAppExit/useAppExit';
 import { withSessionProtected } from '@/hooks/useSessionQuery/hocs/withSessionProtected';
+import { useUIOptionsRedirect } from '@/hooks/useUIOptionsRedirect';
 import { Button, Card } from '@ballerine/ui';
 
 export const Success = withSessionProtected(() => {
@@ -12,6 +13,8 @@ export const Success = withSessionProtected(() => {
 
   const { exit, isExitAvailable } = useAppExit();
 
+  useUIOptionsRedirect('success');
+
   return (
     <div className="flex h-full items-center justify-center">
       <Card className="w-full max-w-[646px] p-12">

services/workflows-service/src/collection-flow/collection-flow.service.ts

@@ -103,6 +103,7 @@ export class CollectionFlowService {
     return {
       id: workflowDefinition.id,
       config: workflowDefinition.config,
+      uiOptions: uiDefintion.uiOptions,
       uiSchema: {
         // @ts-expect-error - error from Prisma types fix
         elements: this.traverseUiSchema(