From d763a655a058e92e85173f841aeec9c3e9510a25 Mon Sep 17 00:00:00 2001 From: Illia Rudniev Date: Wed, 18 Sep 2024 14:30:05 +0300 Subject: [PATCH] feat: implemented redirects handling (#2715) * feat: implemented redirects handling * fix: removed debugger & added loading screen to failed --- .../collection-flow/collection-flow.api.ts | 2 ++ .../domains/collection-flow/types/index.ts | 12 ++++++++-- .../src/hooks/useUIOptionsRedirect/index.ts | 1 + .../useUIOptionsRedirect.ts | 13 ++++++++++ .../pages/CollectionFlow/CollectionFlow.tsx | 24 ++++++++++++++----- .../components/pages/Failed/Failed.tsx | 8 +++++++ .../components/pages/Failed/index.ts | 1 + .../components/pages/Success/Success.tsx | 3 +++ .../workflows-service/prisma/data-migrations | 2 +- .../collection-flow.service.ts | 1 + 10 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 apps/kyb-app/src/hooks/useUIOptionsRedirect/index.ts create mode 100644 apps/kyb-app/src/hooks/useUIOptionsRedirect/useUIOptionsRedirect.ts create mode 100644 apps/kyb-app/src/pages/CollectionFlow/components/pages/Failed/Failed.tsx create mode 100644 apps/kyb-app/src/pages/CollectionFlow/components/pages/Failed/index.ts diff --git a/apps/kyb-app/src/domains/collection-flow/collection-flow.api.ts b/apps/kyb-app/src/domains/collection-flow/collection-flow.api.ts index 8a6f7bbaf3..fa584693d2 100644 --- a/apps/kyb-app/src/domains/collection-flow/collection-flow.api.ts +++ b/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 => { const user = await request.get('collection-flow/user').json(); + if (user) { try { posthog.identify(user.id, { @@ -21,6 +22,7 @@ export const fetchUser = async (): Promise => { console.error('Error identifying user in PostHog:', error); } } + return user; }; diff --git a/apps/kyb-app/src/domains/collection-flow/types/index.ts b/apps/kyb-app/src/domains/collection-flow/types/index.ts index ba01a9ac47..2d9940ff74 100644 --- a/apps/kyb-app/src/domains/collection-flow/types/index.ts +++ b/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[]; + elements: Array>; 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'; diff --git a/apps/kyb-app/src/hooks/useUIOptionsRedirect/index.ts b/apps/kyb-app/src/hooks/useUIOptionsRedirect/index.ts new file mode 100644 index 0000000000..38d8e3386d --- /dev/null +++ b/apps/kyb-app/src/hooks/useUIOptionsRedirect/index.ts @@ -0,0 +1 @@ +export * from './useUIOptionsRedirect'; diff --git a/apps/kyb-app/src/hooks/useUIOptionsRedirect/useUIOptionsRedirect.ts b/apps/kyb-app/src/hooks/useUIOptionsRedirect/useUIOptionsRedirect.ts new file mode 100644 index 0000000000..cf9669b1fb --- /dev/null +++ b/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]); +}; diff --git a/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx b/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx index 0b5ba81361..8a60222a63 100644 --- a/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx +++ b/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 ; + if (initialContext?.flowConfig?.appState == 'rejected') return ; return definition && context ? ( @@ -142,10 +149,15 @@ export const CollectionFlow = withSessionProtected(() => { extensions={schema?.definition.extensions} definition={definition as State} > - {({ state, stateApi }) => - state === 'finish' ? ( - - ) : ( + {({ state, stateApi }) => { + // Temp state, has to be resolved to success or failure by plugins + if (state === 'done') return ; + + if (isSuccess(state)) return ; + + if (isFailed(state)) return ; + + return ( {({ currentPage }) => { return currentPage ? ( @@ -244,8 +256,8 @@ export const CollectionFlow = withSessionProtected(() => { ) : null; }} - ) - } + ); + }} ) : null; diff --git a/apps/kyb-app/src/pages/CollectionFlow/components/pages/Failed/Failed.tsx b/apps/kyb-app/src/pages/CollectionFlow/components/pages/Failed/Failed.tsx new file mode 100644 index 0000000000..89b3054136 --- /dev/null +++ b/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 ; +}; diff --git a/apps/kyb-app/src/pages/CollectionFlow/components/pages/Failed/index.ts b/apps/kyb-app/src/pages/CollectionFlow/components/pages/Failed/index.ts new file mode 100644 index 0000000000..0c58b6825f --- /dev/null +++ b/apps/kyb-app/src/pages/CollectionFlow/components/pages/Failed/index.ts @@ -0,0 +1 @@ +export * from './Failed'; diff --git a/apps/kyb-app/src/pages/CollectionFlow/components/pages/Success/Success.tsx b/apps/kyb-app/src/pages/CollectionFlow/components/pages/Success/Success.tsx index 720cf2fbb7..041873b1e1 100644 --- a/apps/kyb-app/src/pages/CollectionFlow/components/pages/Success/Success.tsx +++ b/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 (
diff --git a/services/workflows-service/prisma/data-migrations b/services/workflows-service/prisma/data-migrations index 7cb7304757..86f4d309b2 160000 --- a/services/workflows-service/prisma/data-migrations +++ b/services/workflows-service/prisma/data-migrations @@ -1 +1 @@ -Subproject commit 7cb73047572155f4c612e7822a3312b12093e5ab +Subproject commit 86f4d309b228ddb718af09907b6e8e8c8cd1874c diff --git a/services/workflows-service/src/collection-flow/collection-flow.service.ts b/services/workflows-service/src/collection-flow/collection-flow.service.ts index 4539aa4755..e27e365314 100644 --- a/services/workflows-service/src/collection-flow/collection-flow.service.ts +++ b/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(