diff --git a/src/components/KycCaseOverview/KycCaseOverview.tsx b/src/components/KycCaseOverview/KycCaseOverview.tsx new file mode 100644 index 0000000..aef4d95 --- /dev/null +++ b/src/components/KycCaseOverview/KycCaseOverview.tsx @@ -0,0 +1,27 @@ + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import React from 'react'; +import {KycCaseModel} from "../../models"; +import {Stack} from "../Stack"; + +export interface KycCaseOverviewProps { + currentCase: KycCaseModel; +} + +export const KycCaseOverview: React.FunctionComponent = (props: KycCaseOverviewProps) => { + + return ( +
+ +
Customer name: {props.currentCase.customer.name}
+
Country: {props.currentCase.customer.countryOfResidence}
+
Entity type: {props.currentCase.customer.entityType}
+
Industry type: {props.currentCase.customer.industryType}
+
Customer outreach: {props.currentCase.customerOutreach || 'N/A'}
+
Counterparty name: {props.currentCase.counterparty.name}
+
Counterparty country: {props.currentCase.counterparty.countryOfResidence}
+
+
+ ) +} diff --git a/src/components/KycCaseOverview/index.ts b/src/components/KycCaseOverview/index.ts new file mode 100644 index 0000000..44db848 --- /dev/null +++ b/src/components/KycCaseOverview/index.ts @@ -0,0 +1,2 @@ + +export * from './KycCaseOverview'; diff --git a/src/components/KycCaseResult/KycCaseResult.tsx b/src/components/KycCaseResult/KycCaseResult.tsx new file mode 100644 index 0000000..0067314 --- /dev/null +++ b/src/components/KycCaseResult/KycCaseResult.tsx @@ -0,0 +1,71 @@ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import React, {ComponentType} from 'react'; +import {Error, Pending} from "@carbon/icons-react"; +import {Tab, TabList, TabPanel, TabPanels, Tabs} from "@carbon/react"; +import {useMediaQuery} from "usehooks-ts"; + +import {CustomerRisk} from "../CustomerRisk"; +import {KycSummary} from "../KycSummary"; +import {NegativeNews} from "../NegativeNews"; +import {KycCaseModel} from "../../models"; + +export interface KycCaseResultProps { + currentCase: KycCaseModel; +} + +export const KycCaseResult: React.FunctionComponent = (props: KycCaseResultProps) => { + const printMode = useMediaQuery('print') + + const getIcon = (data?: {error?: string}): ComponentType<{size: number}> => { + + if (!data) { + return Pending as never; + } + + if (data.error) { + return Error as never; + } + + return undefined + } + + const isDisabled = (data?: {error?: string}): boolean => { + return !data; + } + + const tabProps = (data: {error?: string}) => { + return { + renderIcon: getIcon(data), + disabled: isDisabled(data), + } + } + + if (printMode) { + return ( + <> + + + + + + ) + } + + return ( + + + Customer Risk + Negative News - Party + Negative News - Counterparty + KYC Summary + + + + + + + + + ) +} diff --git a/src/components/KycCaseResult/index.ts b/src/components/KycCaseResult/index.ts new file mode 100644 index 0000000..0a83d91 --- /dev/null +++ b/src/components/KycCaseResult/index.ts @@ -0,0 +1,2 @@ + +export * from './KycCaseResult' diff --git a/src/components/index.ts b/src/components/index.ts index eca53ca..b92bd42 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -14,3 +14,5 @@ export * from './AtomSelect' export * from './CustomerRisk' export * from './NegativeNews' export * from './KycSummary' +export * from './KycCaseOverview' +export * from './KycCaseResult' diff --git a/src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx b/src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx index 5f4cb1c..ff64b26 100644 --- a/src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx +++ b/src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx @@ -1,14 +1,13 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore -import React, {ComponentType} from 'react'; +import React from 'react'; import {useNavigate} from "react-router-dom"; -import {Button, Tab, TabList, TabPanel, TabPanels, Tabs} from "@carbon/react"; +import {Button} from "@carbon/react"; import {useSetAtom} from "jotai"; -import {Error, Pending} from "@carbon/icons-react"; import './KYCCasePending.scss'; import {selectedKycCaseAtom} from "../../../../atoms"; -import {CustomerRisk, DocumentList, KycSummary, NegativeNews, Stack} from "../../../../components"; +import {DocumentList, KycCaseOverview, KycCaseResult, Stack} from "../../../../components"; import {KycCaseModel} from "../../../../models"; import {kycCaseManagementApi} from "../../../../services"; @@ -32,59 +31,12 @@ export const KYCCasePending: React.FunctionComponent = (pro .catch(err => console.error('Error processing case: ', {err})) } - const getIcon = (data?: {error?: string}): ComponentType<{size: number}> => { - - if (!data) { - return Pending as never; - } - - if (data.error) { - return Error as never; - } - - return undefined - } - - const isDisabled = (data?: {error?: string}): boolean => { - return !data; - } - - const tabProps = (data: {error?: string}) => { - return { - renderIcon: getIcon(data), - disabled: isDisabled(data), - } - } - return ( - +

Pending information

-
- -
Customer name: {props.currentCase.customer.name}
-
Country: {props.currentCase.customer.countryOfResidence}
-
Entity type: {props.currentCase.customer.entityType}
-
Industry type: {props.currentCase.customer.industryType}
-
Customer outreach: {props.currentCase.customerOutreach || 'N/A'}
-
Counterparty name: {props.currentCase.counterparty.name}
-
Counterparty country: {props.currentCase.counterparty.countryOfResidence}
-
-
+ - - - Customer Risk - Negative News - Party - Negative News - Counterparty - KYC Summary - - - - - - - - +
)