feat: reworked exit from app for iframe scenarios

apps/kyb-app/src/App.tsx

@@ -1,4 +1,5 @@
 import { LoadingScreen } from '@/common/components/molecules/LoadingScreen';
+import { APP_LANGUAGE_QUERY_KEY } from '@/common/consts/consts';
 import { CustomerProviderFallback } from '@/components/molecules/CustomerProviderFallback';
 import { AppLoadingContainer } from '@/components/organisms/AppLoadingContainer';
 import { CustomerProvider } from '@/components/providers/CustomerProvider';
@@ -11,7 +12,7 @@ import * as Sentry from '@sentry/react';
 import { RouterProvider } from 'react-router-dom';
 
 export const App = () => {
-  const language = new URLSearchParams(window.location.search).get('lng') || 'en';
+  const language = new URLSearchParams(window.location.search).get(APP_LANGUAGE_QUERY_KEY) || 'en';
 
   const dependancyQueries = [
     useCustomerQuery(),

apps/kyb-app/src/common/consts/consts.ts

@@ -1 +1,2 @@
 export const ARRAY_VALUE_INDEX_PLACEHOLDER = `{INDEX}`;
+export const APP_LANGUAGE_QUERY_KEY = 'lng';

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

@@ -6,7 +6,7 @@ import { usePageResolverContext } from '@/components/organisms/DynamicUI/PageRes
 import { useStateManagerContext } from '@/components/organisms/DynamicUI/StateManager/components/StateProvider';
 import { useDynamicUIContext } from '@/components/organisms/DynamicUI/hooks/useDynamicUIContext';
 import { useCustomer } from '@/components/providers/CustomerProvider';
-import { useFlowTracking } from '@/hooks/useFlowTracking';
+import { useAppExit } from '@/hooks/useAppExit/useAppExit';
 import { ctw } from '@ballerine/ui';
 
 export const Navigation = () => {
@@ -15,7 +15,7 @@ export const Navigation = () => {
   const { stateApi } = useStateManagerContext();
   const { currentPage } = usePageResolverContext();
   const { customer } = useCustomer();
-  const { trackExit } = useFlowTracking();
+  const exitFromApp = useAppExit();
 
   const isFirstStep = currentPage?.number === 1;
   const isDisabled = state.isLoading;
@@ -26,10 +26,9 @@ export const Navigation = () => {
       return;
     }
 
-    trackExit();
-    window.location.href = customer?.websiteUrl!;
+    exitFromApp();
     return;
-  }, [stateApi]);
+  }, [stateApi, exitFromApp]);
 
   return (
     <button

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

@@ -131,9 +131,14 @@ export interface UIPage {
   pageValidation?: Rule[];
 }
 
+export interface UISchemaConfig {
+  kybOnExitAction?: 'send-event' | 'redirect-to-customer-portal';
+  supportedLanguages: string[];
+}
+
 export interface UISchema {
   id: string;
-  config: Record<string, unknown>;
+  config: UISchemaConfig;
   uiSchema: {
     elements: UIPage[];
   };

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

@@ -0,0 +1,29 @@
+import { useCustomerQuery } from '@/hooks/useCustomerQuery';
+import { useFlowTracking } from '@/hooks/useFlowTracking';
+import { useLanguage } from '@/hooks/useLanguage';
+import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
+import { useCallback } from 'react';
+
+export const useAppExit = () => {
+  const appLanguage = useLanguage();
+  const { data: uiSchema } = useUISchemasQuery(appLanguage);
+  const { trackExit } = useFlowTracking();
+  const { customer } = useCustomerQuery();
+
+  const { kybOnExitAction = 'send-event' } = uiSchema?.config || {};
+
+  const exit = useCallback(() => {
+    if (kybOnExitAction === 'send-event') {
+      trackExit();
+      return;
+    }
+
+    if (kybOnExitAction === 'redirect-to-customer-portal') {
+      if (customer?.websiteUrl) {
+        location.href = customer?.websiteUrl;
+      }
+    }
+  }, [trackExit, customer]);
+
+  return exit;
+};

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

@@ -2,10 +2,15 @@ import { useCallback } from 'react';
 
 export const useFlowTracking = () => {
   const trackExit = useCallback(() => {
-    window.parent.postMessage('ballerine.collection-flow.back-button-pressed', '*');
+    const event = 'ballerine.collection-flow.back-button-pressed';
+    console.log(`Sending event: ${event}`);
+    window.parent.postMessage(event, '*');
   }, []);
 
   const trackFinish = useCallback(() => {
+    const event = 'ballerine.collection-flow.finish-button-pressed';
+    console.log(`Sending event: ${event}`);
+
     window.parent.postMessage('ballerine.collection-flow.finish-button-pressed', '*');
   }, []);
 

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

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

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

@@ -0,0 +1,12 @@
+import { APP_LANGUAGE_QUERY_KEY } from '@/common/consts/consts';
+import { useSearchParams } from 'react-router-dom';
+
+const defaultQuery = {
+  lng: 'en',
+};
+
+export const useLanguage = () => {
+  const [location] = useSearchParams(defaultQuery);
+
+  return location.get(APP_LANGUAGE_QUERY_KEY) || defaultQuery.lng;
+};

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

@@ -167,7 +167,7 @@ export const CollectionFlow = withSessionProtected(() => {
                           <AppShell.Sidebar>
                             <div className="flex h-full flex-col">
                               <div className="flex h-full flex-1 flex-col">
-                                <div className="flex flex-row justify-between whitespace-nowrap gap-2 pb-10">
+                                <div className="flex flex-row justify-between gap-2 whitespace-nowrap pb-10">
                                   <AppShell.Navigation />
                                   <div>
                                     <AppShell.LanguagePicker />

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

@@ -2,14 +2,14 @@ import DOMPurify from 'dompurify';
 import { useTranslation } from 'react-i18next';
 
 import { useCustomer } from '@/components/providers/CustomerProvider';
-import { useFlowTracking } from '@/hooks/useFlowTracking';
+import { useAppExit } from '@/hooks/useAppExit/useAppExit';
 import { withSessionProtected } from '@/hooks/useSessionQuery/hocs/withSessionProtected';
 import { Button, Card } from '@ballerine/ui';
 
 export const Approved = withSessionProtected(() => {
   const { t } = useTranslation();
   const { customer } = useCustomer();
-  const { trackExit } = useFlowTracking();
+  const exitFromApp = useAppExit();
 
   return (
     <div className="flex h-full items-center justify-center">
@@ -29,15 +29,9 @@ export const Approved = withSessionProtected(() => {
             {t('approved.content', { companyName: customer?.displayName })}
           </p>
         </div>
-        {customer?.displayName && customer?.websiteUrl && (
+        {customer?.displayName && (
           <div className="flex justify-center">
-            <Button
-              variant="secondary"
-              onClick={() => {
-                trackExit();
-                location.href = customer.websiteUrl;
-              }}
-            >
+            <Button variant="secondary" onClick={exitFromApp}>
               {t('backToPortal', { companyName: customer.displayName })}
             </Button>
           </div>

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

@@ -2,15 +2,15 @@ import DOMPurify from 'dompurify';
 import { useTranslation } from 'react-i18next';
 
 import { useCustomer } from '@/components/providers/CustomerProvider';
-import { useFlowTracking } from '@/hooks/useFlowTracking';
+import { useAppExit } from '@/hooks/useAppExit/useAppExit';
 import { withSessionProtected } from '@/hooks/useSessionQuery/hocs/withSessionProtected';
 import { Button, Card } from '@ballerine/ui';
 
 export const Success = withSessionProtected(() => {
   const { t } = useTranslation();
   const { customer } = useCustomer();
 
-  const { trackExit } = useFlowTracking();
+  const exitFromApp = useAppExit();
 
   return (
     <div className="flex h-full items-center justify-center">
@@ -29,15 +29,9 @@ export const Success = withSessionProtected(() => {
             {t('success.content')}
           </h2>
         </div>
-        {customer?.displayName && customer?.websiteUrl && (
+        {customer?.displayName && (
           <div className="flex justify-center">
-            <Button
-              variant="secondary"
-              onClick={() => {
-                trackExit();
-                location.href = customer.websiteUrl;
-              }}
-            >
+            <Button variant="secondary" onClick={exitFromApp}>
               {t('backToPortal', { companyName: customer.displayName })}
             </Button>
           </div>

services/workflows-service/src/workflow/schemas/zod-schemas.ts

@@ -53,6 +53,7 @@ export const ConfigSchema = z
       .boolean()
       .optional()
       .describe('Indicates if workflow could be created in backoffice'),
+    kybOnExitAction: z.enum(['send-event', 'redirect-to-customer-portal']).optional(),
   })
   .strict()
   .optional();