Fix print for summary information

closes #70 Signed-off-by: Sean Sundberg <[email protected]>
ibm-ecosystem-engineering · Sep 23, 2023 · aff3959 · aff3959
1 parent 6eac456
commit aff3959
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 54 deletions.
diff --git a/src/components/KycCaseOverview/KycCaseOverview.tsx 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<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>
+    )
+}
diff --git a/src/components/KycCaseOverview/index.ts 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
@@ -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>
+    )
+}
diff --git a/src/components/KycCaseResult/index.ts 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
@@ -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
@@ -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<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>
     )