feat: updated cf status persistance logic & updated events for iframe (#2818)

* feat: updated cf status persistance logic & updated events for iframe

* fix: fixed redirects override

* feat: refactor

* feat: added test

* feat: added tst for ui options redirect

* fix: refactor

---------

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

Author: chesterkmr

apps/kyb-app/public/locales/en/translation.json

@@ -19,6 +19,10 @@
     "header": "Thank you!<br /> We’re reviewing your application",
     "content": "We will inform you by email once your account is ready."
   },
+  "failed": {
+    "header": "Submission failed.",
+    "content": "Please contact {{companyName}} for support."
+  },
   "industries": [
     "Adult Entertainment and Products",
     "Aerospace Engineering",

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

@@ -34,27 +34,29 @@ export const LanguagePicker = () => {
   }
 
   return (
-    <DropdownInput
-      value={language}
-      name="languagePicker"
-      options={supportedLanguages}
-      props={{
-        item: { variant: 'inverted' },
-        content: { className: 'w-[204px] p-1', align: 'start' },
-        trigger: {
-          icon: (
-            <span className="text-primary-foreground">
-              <GlobeIcon />
-            </span>
-          ),
-          className: 'px-3 gap-x-2 bg-primary text-primary-foreground',
-        },
-      }}
-      onChange={selectedLanguage => {
-        updateLanguage(selectedLanguage);
-        i18next.changeLanguage(selectedLanguage);
-        setLanguage(selectedLanguage);
-      }}
-    />
+    <div>
+      <DropdownInput
+        value={language}
+        name="languagePicker"
+        options={supportedLanguages}
+        props={{
+          item: { variant: 'inverted' },
+          content: { className: 'w-[204px] p-1', align: 'start' },
+          trigger: {
+            icon: (
+              <span className="text-primary-foreground">
+                <GlobeIcon />
+              </span>
+            ),
+            className: 'px-3 gap-x-2 bg-primary text-primary-foreground',
+          },
+        }}
+        onChange={selectedLanguage => {
+          updateLanguage(selectedLanguage);
+          i18next.changeLanguage(selectedLanguage);
+          setLanguage(selectedLanguage);
+        }}
+      />
+    </div>
   );
 };

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

@@ -43,15 +43,15 @@ export const Navigation = () => {
 
   return (
     <button
-      className={ctw('cursor-pointer select-none', {
+      className={ctw('flex cursor-pointer select-none flex-row flex-nowrap items-center', {
         'pointer-events-none opacity-50': isDisabled,
       })}
       aria-disabled={isDisabled}
       onClick={onPrevious}
       type={'button'}
     >
-      <ArrowLeft className="inline" />
-      <span className="pl-2 align-middle text-sm font-bold">
+      <ArrowLeft size={24} className="flex-shrink-0" />
+      <span className="flex flex-nowrap pl-2 align-middle text-sm font-bold">
         {isFirstStep && customer
           ? t('backToPortal', { companyName: customer.displayName })
           : t('back')}

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

@@ -71,6 +71,7 @@ export const Page = ({ page, children }: PageProps) => {
       pageErrors: pageErrors.reduce((map, pageError) => {
         map[pageError.stateName] = pageError.errors.reduce((map, error) => {
           map[error.fieldId] = error;
+
           return map;
         }, {} as PageContext['pageErrors'][string]);
 

apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/DocumentField/DocumentField.tsx

@@ -226,8 +226,6 @@ export const DocumentField = (
     [stateApi, options, definition, inputIndex, sendEvent],
   );
 
-  console.log('IS LOADING', elementState.isLoading);
-
   return (
     <div className="flex flex-col gap-2">
       <FileUploaderField

apps/kyb-app/src/components/organisms/UIRenderer/elements/SubmitButton/SubmitButton.tsx

@@ -11,12 +11,7 @@ import { useUIElementHandlers } from '@/components/organisms/UIRenderer/hooks/us
 import { useUIElementState } from '@/components/organisms/UIRenderer/hooks/useUIElementState';
 import { UIElementComponent } from '@/components/organisms/UIRenderer/types';
 import { UIPage } from '@/domains/collection-flow';
-import { useFlowTracking } from '@/hooks/useFlowTracking';
-import {
-  CollectionFlowStatusesEnum,
-  getCollectionFlowState,
-  setStepCompletionState,
-} from '@ballerine/common';
+import { getCollectionFlowState, setStepCompletionState } from '@ballerine/common';
 import { Button } from '@ballerine/ui';
 import { useCallback, useMemo } from 'react';
 
@@ -63,8 +58,6 @@ export const SubmitButton: UIElementComponent<{ text: string }> = ({ definition
     [helpers, errors],
   );
 
-  const { trackFinish } = useFlowTracking();
-
   const handleClick = useCallback(() => {
     setPageElementsTouched(
       // @ts-ignore
@@ -79,7 +72,6 @@ export const SubmitButton: UIElementComponent<{ text: string }> = ({ definition
       const collectionFlow = getCollectionFlowState(context);
 
       if (collectionFlow) {
-        collectionFlow.status = CollectionFlowStatusesEnum.completed;
         setStepCompletionState(context, {
           stepName: currentPage?.stateName as string,
           completed: true,
@@ -90,20 +82,7 @@ export const SubmitButton: UIElementComponent<{ text: string }> = ({ definition
     }
 
     onClickHandler();
-
-    if (isFinishPage && isValid) {
-      trackFinish();
-    }
-  }, [
-    currentPage,
-    pages,
-    state,
-    isValid,
-    stateApi,
-    setPageElementsTouched,
-    onClickHandler,
-    trackFinish,
-  ]);
+  }, [currentPage, pages, state, isValid, stateApi, setPageElementsTouched, onClickHandler]);
 
   return (
     <Button

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

@@ -7,7 +7,10 @@ import {
   TUser,
   UISchema,
 } from '@/domains/collection-flow/types';
-import { CollectionFlowContext } from '@/domains/collection-flow/types/flow-context.types';
+import {
+  CollectionFlowConfig,
+  CollectionFlowContext,
+} from '@/domains/collection-flow/types/flow-context.types';
 import posthog from 'posthog-js';
 
 export const fetchUser = async (): Promise<TUser> => {
@@ -64,10 +67,15 @@ export const fetchCustomer = async (): Promise<TCustomer> => {
   return await request.get('collection-flow/customer').json<TCustomer>();
 };
 
-export const fetchFlowContext = async (): Promise<CollectionFlowContext> => {
+export interface FlowContextResponse {
+  context: CollectionFlowContext;
+  config: CollectionFlowConfig;
+}
+
+export const fetchFlowContext = async (): Promise<FlowContextResponse> => {
   try {
     const result = await request.get('collection-flow/context');
-    const resultJson = await result.json<CollectionFlowContext>();
+    const resultJson = await result.json<FlowContextResponse>();
 
     if (!resultJson || typeof resultJson !== 'object') {
       throw new Error('Invalid flow context');

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

@@ -3,18 +3,20 @@ import { useFlowTracking } from '@/hooks/useFlowTracking';
 import { useLanguage } from '@/hooks/useLanguage';
 import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
 import { useCallback } from 'react';
+import { CollectionFlowEvents } from '../useFlowTracking/enums';
 
 export const useAppExit = () => {
   const appLanguage = useLanguage();
   const { data: uiSchema } = useUISchemasQuery(appLanguage);
-  const { trackExit } = useFlowTracking();
   const { customer } = useCustomerQuery();
+  const { trackEvent } = useFlowTracking();
 
   const kybOnExitAction = uiSchema?.config?.kybOnExitAction || 'send-event';
 
   const exit = useCallback(() => {
     if (kybOnExitAction === 'send-event') {
-      trackExit();
+      trackEvent(CollectionFlowEvents.USER_EXITED);
+
       return;
     }
 
@@ -23,11 +25,10 @@ export const useAppExit = () => {
         location.href = customer?.websiteUrl;
       }
     }
-  }, [trackExit, customer]);
+  }, [trackEvent, customer]);
 
   return {
     exit,
-    isExitAvailable:
-      uiSchema?.config?.kybOnExitAction === 'send-event' ? true : !!customer?.websiteUrl,
+    isExitAvailable: kybOnExitAction === 'send-event' ? true : !!customer?.websiteUrl,
   };
 };

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

@@ -0,0 +1,8 @@
+export const CollectionFlowEvents = {
+  USER_EXITED: 'user-exited',
+  FLOW_COMPLETED: 'flow-completed',
+  FLOW_FAILED: 'flow-failed',
+} as const;
+
+export type TCollectionFlowEvents =
+  (typeof CollectionFlowEvents)[keyof typeof CollectionFlowEvents];

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

@@ -1,21 +1,28 @@
 import { useCallback } from 'react';
+import { TCollectionFlowEvents } from './enums';
 
-export const useFlowTracking = () => {
-  const trackExit = useCallback(() => {
-    const event = 'ballerine.collection-flow.back-button-pressed';
-    console.log(`Sending event: ${event}`);
-    window.parent.postMessage(event, '*');
-  }, []);
+const DEFAULT_PREFIX = 'ballerine.collection-flow';
 
-  const trackFinish = useCallback(() => {
-    const event = 'ballerine.collection-flow.finish-button-pressed';
-    console.log(`Sending event: ${event}`);
+interface IUseFlowTracking {
+  prefix?: string;
+}
 
-    window.parent.postMessage('ballerine.collection-flow.finish-button-pressed', '*');
-  }, []);
+const formatEventName = (prefix: string, event: string) => `${prefix}.${event}`;
+
+export const useFlowTracking = (
+  { prefix = DEFAULT_PREFIX }: IUseFlowTracking = { prefix: DEFAULT_PREFIX },
+) => {
+  const trackEvent = useCallback(
+    (event: TCollectionFlowEvents) => {
+      const formattedEvent = formatEventName(prefix, event);
+
+      console.log(`Sending event: ${formattedEvent}`);
+      window.parent.postMessage(formattedEvent, '*');
+    },
+    [prefix],
+  );
 
   return {
-    trackExit,
-    trackFinish,
+    trackEvent,
   };
 };