Skip to content

Commit

Permalink
Signed-off-by: Sean Sundberg <[email protected]> (#78)
Browse files Browse the repository at this point in the history
- Use media query to determine if using print media
- Update dependencies to fix vulnerability

closes #70

Signed-off-by: Sean Sundberg <[email protected]>
  • Loading branch information
seansund authored Sep 23, 2023
1 parent 1d0a98c commit a909136
Show file tree
Hide file tree
Showing 8 changed files with 149 additions and 78 deletions.
56 changes: 35 additions & 21 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
},
"dependencies": {
"@apollo/client": "^3.8.4",
"@carbon/charts-react": "^1.13.1",
"@carbon/charts-react": "^1.13.3",
"@carbon/grid": "^11.20.0",
"@carbon/icons-react": "^11.27.0",
"@carbon/react": "^1.38.0",
Expand All @@ -23,7 +23,8 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"rxjs": "^7.8.1",
"set-value": "^4.1.0"
"set-value": "^4.1.0",
"usehooks-ts": "^2.9.1"
},
"devDependencies": {
"@types/carbon__icons-react": "^11.26.1",
Expand All @@ -36,7 +37,7 @@
"@typescript-eslint/parser": "^6.7.2",
"@vitejs/plugin-react-swc": "^3.3.2",
"axios": "^1.5.0",
"eslint": "^8.49.0",
"eslint": "^8.50.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.2.2",
Expand Down
27 changes: 27 additions & 0 deletions src/components/KycCaseOverview/KycCaseOverview.tsx
Original file line number Diff line number Diff line change
@@ -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<KycCaseOverviewProps> = (props: KycCaseOverviewProps) => {

return (
<div className="infoBox">
<Stack gap={3}>
<div><span className="label">Customer name:</span> {props.currentCase.customer.name}</div>
<div><span className="label">Country:</span> {props.currentCase.customer.countryOfResidence}</div>
<div><span className="label">Entity type:</span> {props.currentCase.customer.entityType}</div>
<div><span className="label">Industry type:</span> {props.currentCase.customer.industryType}</div>
<div><span className="label">Customer outreach:</span> {props.currentCase.customerOutreach || 'N/A'}</div>
<div><span className="label">Counterparty name:</span> {props.currentCase.counterparty.name}</div>
<div><span className="label">Counterparty country:</span> {props.currentCase.counterparty.countryOfResidence}</div>
</Stack>
</div>
)
}
2 changes: 2 additions & 0 deletions src/components/KycCaseOverview/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

export * from './KycCaseOverview';
71 changes: 71 additions & 0 deletions src/components/KycCaseResult/KycCaseResult.tsx
Original file line number Diff line number Diff line change
@@ -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<KycCaseResultProps> = (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 (
<>
<CustomerRisk customerRisk={props.currentCase.customerRiskAssessment} />
<NegativeNews type="Party" news={props.currentCase.negativeScreening} />
<NegativeNews type="Counterparty" news={props.currentCase.counterpartyNegativeScreening} />
<KycSummary kycSummary={props.currentCase.caseSummary} />
</>
)
}

return (
<Tabs>
<TabList aria-label="List of tabs">
<Tab {...tabProps(props.currentCase.customerRiskAssessment)}>Customer Risk</Tab>
<Tab {...tabProps(props.currentCase.negativeScreening)}>Negative News - Party</Tab>
<Tab {...tabProps(props.currentCase.counterpartyNegativeScreening)}>Negative News - Counterparty</Tab>
<Tab {...tabProps(props.currentCase.caseSummary)}>KYC Summary</Tab>
</TabList>
<TabPanels>
<TabPanel><CustomerRisk hideTitle={true} customerRisk={props.currentCase.customerRiskAssessment} /></TabPanel>
<TabPanel><NegativeNews hideTitle={true} type="Party" news={props.currentCase.negativeScreening} /></TabPanel>
<TabPanel><NegativeNews hideTitle={true} type="Counterparty" news={props.currentCase.counterpartyNegativeScreening} /></TabPanel>
<TabPanel><KycSummary hideTitle={true} kycSummary={props.currentCase.caseSummary} /></TabPanel>
</TabPanels>
</Tabs>
)
}
2 changes: 2 additions & 0 deletions src/components/KycCaseResult/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

export * from './KycCaseResult'
2 changes: 2 additions & 0 deletions src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@ export * from './AtomSelect'
export * from './CustomerRisk'
export * from './NegativeNews'
export * from './KycSummary'
export * from './KycCaseOverview'
export * from './KycCaseResult'
60 changes: 6 additions & 54 deletions src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -32,59 +31,12 @@ export const KYCCasePending: React.FunctionComponent<KYCCasePendingProps> = (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 (
<Stack gap={7}>
<Stack gap={5}>
<h2>Pending information</h2>
<div className="infoBox">
<Stack gap={3}>
<div><span className="label">Customer name:</span> {props.currentCase.customer.name}</div>
<div><span className="label">Country:</span> {props.currentCase.customer.countryOfResidence}</div>
<div><span className="label">Entity type:</span> {props.currentCase.customer.entityType}</div>
<div><span className="label">Industry type:</span> {props.currentCase.customer.industryType}</div>
<div><span className="label">Customer outreach:</span> {props.currentCase.customerOutreach || 'N/A'}</div>
<div><span className="label">Counterparty name:</span> {props.currentCase.counterparty.name}</div>
<div><span className="label">Counterparty country:</span> {props.currentCase.counterparty.countryOfResidence}</div>
</Stack>
</div>
<KycCaseOverview currentCase={props.currentCase} />
<DocumentList documents={props.currentCase.documents} />
<Tabs>
<TabList aria-label="List of tabs">
<Tab {...tabProps(props.currentCase.customerRiskAssessment)}>Customer Risk</Tab>
<Tab {...tabProps(props.currentCase.negativeScreening)}>Negative News - Party</Tab>
<Tab {...tabProps(props.currentCase.counterpartyNegativeScreening)}>Negative News - Counterparty</Tab>
<Tab {...tabProps(props.currentCase.caseSummary)}>KYC Summary</Tab>
</TabList>
<TabPanels>
<TabPanel><CustomerRisk hideTitle={true} customerRisk={props.currentCase.customerRiskAssessment} /></TabPanel>
<TabPanel><NegativeNews hideTitle={true} type="Party" news={props.currentCase.negativeScreening} /></TabPanel>
<TabPanel><NegativeNews hideTitle={true} type="Counterparty" news={props.currentCase.counterpartyNegativeScreening} /></TabPanel>
<TabPanel><KycSummary hideTitle={true} kycSummary={props.currentCase.caseSummary} /></TabPanel>
</TabPanels>
</Tabs>
<KycCaseResult currentCase={props.currentCase} />
<div><Button kind="tertiary" onClick={handleCancel}>Return</Button> <Button onClick={handleRefresh}>Refresh</Button></div>
</Stack>
)
Expand Down

0 comments on commit a909136

Please sign in to comment.