Skip to content

Commit a09c510

Browse files
jimmyfaganjimmyfagan
authored
BB2-3391: Adjust C4DIC FE sample client (#79)
* First pass of edits * Render logo and bcg * Fix layout, add contact, addl info, etc * Remove some unneeded data fields * Adjustments from self-review
1 parent 644ec1e commit a09c510

File tree

7 files changed

+271
-3223
lines changed

7 files changed

+271
-3223
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ sandbox.env
2222

2323
config.py
2424
config.json
25-
.bluebutton-config.json
25+
.bluebutton-config.json*
2626

2727
# Generic
2828
*.pyc

‎client/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function App() {
1212
return (
1313
<div className="ds-l-container ds-u-margin-bottom--7 ds-u-padding-bottom--7">
1414
<Router>
15-
<div className="bb-c-c4dic-card-png default-card">
15+
<div className="bb-c-c4dic-card default-card">
1616
<InsuranceCard />
1717
</div>
1818
</Router>
@@ -60,7 +60,7 @@ function App() {
6060
</TabPanel>
6161
<TabPanel id="dic-new-design" tab="Insurance Card">
6262
<a href='/card_only' target="_blank">Show in new window</a>
63-
<div className="bb-c-c4dic-card-png default-card">
63+
<div className="bb-c-c4dic-card default-card">
6464
<InsuranceCard />
6565
</div>
6666
</TabPanel>

‎client/src/components/c4dic.tsx‎

Lines changed: 166 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,37 @@ import React, { useEffect, useState } from 'react';
44
// From C4DIC Patient extract:
55
// 1. identifier mbi, e.g. 1S00EU7JH47
66
// 2. name, e.g. Johnie C
7-
// 3. gender, e.g. male
8-
// 4. dob, e.g. 1990-08-14
97
// From C4DIC Coverage extract:
108
// 1. coverage class: by Coverage resource 'class': "Part A"
119
// 2. status: active or not active
1210
// 3. period, start date: e.g. 2014-02-06
13-
// 4. relationship to insured: e.g. self
14-
// 5. payor: CMS
15-
// 6. contract number: e.g. Part D , Part C: ptc_cntrct_id_01...12
16-
// 7. reference year: e.g. Part A: 2025, Part B: 2025, etc.
17-
// 8. other info such as: DIB, ESRD etc. can be added as needed
11+
// 4. payor: CMS
12+
// 5. contract number: e.g. Part D , Part C: ptc_cntrct_id_01...12
13+
// 6. reference year: e.g. Part A: 2025, Part B: 2025, etc.
14+
// 7. other info such as: DIB, ESRD etc. can be added as needed
1815

1916
export type CoverageInfo = {
20-
clazz: string,
17+
coverageClass: string,
2118
contractId: string,
2219
startDate: string,
2320
endDate: string,
2421
payer: string,
22+
payerId: string,
2523
status: string,
26-
relationship: string, // self, spouse etc.
24+
medicaidEligibility: string,
2725
referenceYear: string,
28-
cardImage: {
29-
description: string,
30-
label: string,
31-
image: {
32-
type: string,
33-
data: string
34-
}
35-
},
36-
colorPallette: {
26+
colorPalette: {
3727
foreground: string,
3828
background: string,
3929
highlight: string
4030
},
41-
c4dicSupportingImageSrc: string
31+
logo: string,
32+
addlCardInfo: string,
33+
contacts: string[]
4234
}
4335

4436
export type InsuranceInfo = {
4537
name: string,
46-
gender: string,
47-
dob: string,
4838
identifier: string, // mbi
4939
coverages: CoverageInfo[] // e.g. Part A, Part B, Part C, Part D
5040
}
@@ -68,36 +58,29 @@ export default function InsuranceCard() {
6858
if (insuranceData.insData) {
6959
const coveragesList: CoverageInfo[] = insuranceData.insData?.coverages.map((c: any) => {
7060
return {
71-
clazz: c.clazz,
61+
coverageClass: c.coverageClass,
7262
payer: c.payer,
63+
payerId: c.payerId,
7364
contractId: c.contractId,
7465
startDate: c.startDate,
7566
endDate: c.endDate,
7667
status: c.active,
77-
relationship: c.relationship,
68+
medicaidEligibility: c.medicaidEligibility,
7869
referenceYear: c.referenceYear,
79-
cardImage: {
80-
description: c.cardImage.description,
81-
label: c.cardImage.label,
82-
image: {
83-
type: c.cardImage.image.type,
84-
data: c.cardImage.image.data
85-
}
86-
},
87-
colorPallette: {
88-
foreground: c.colorPallette.foreground,
89-
background: c.colorPallette.background,
90-
highlight: c.colorPallette.highlight
70+
colorPalette: {
71+
foreground: c.colorPalette.foreground,
72+
background: c.colorPalette.background,
73+
highlight: c.colorPalette.highlight
9174
},
92-
c4dicSupportingImageSrc: `data:image/png;base64,${c.cardImage.image.data}`
75+
logo: c.logo,
76+
addlCardInfo: c.addlCardInfo,
77+
contacts: c.contacts
9378
}
9479
});
9580

9681
setInsInfo(
9782
{
9883
name: insuranceData.insData.name,
99-
gender: insuranceData.insData.gender,
100-
dob: insuranceData.insData.dob,
10184
identifier: insuranceData.insData.identifier,
10285
coverages: coveragesList
10386
}
@@ -136,52 +119,155 @@ export default function InsuranceCard() {
136119
</div>
137120
);
138121
} else {
122+
var backgroundColor = insInfo?.coverages[0]?.colorPalette.background
123+
var highlightColor = insInfo?.coverages[0]?.colorPalette.highlight
124+
var textColor = insInfo?.coverages[0]?.colorPalette.foreground
125+
const primaryStyle = {
126+
backgroundColor: backgroundColor,
127+
color: textColor
128+
}
129+
const highlightStyle = {
130+
backgroundColor: highlightColor,
131+
color: textColor
132+
}
139133
return (
140-
<div className="content-wrapper">
141-
<div className="ins-c4dic-card">
142-
<div className="pii-sec bb-c-c4dic-card-pii-area">
143-
<pre className="ins-fld-text">Full Name: {insInfo?.name||""} Gender: {insInfo?.gender||""} DOB: {insInfo?.dob||""}</pre>
144-
<pre className="ins-fld-text">MBI: {insInfo?.identifier||""}</pre>
134+
<div className="ins-c4dic-card" style={primaryStyle}>
135+
<div className="bb-c-c4dic-card-header">
136+
<img src={insInfo?.coverages[0]?.logo} alt="C4DIC Logo" height="48px"/>
137+
<h3>{insInfo?.coverages[0]?.payer}</h3>
138+
</div>
139+
<div className="pii-sec bb-c-c4dic-card-pii-area">
140+
<div className="ins-fld-text patient-name">
141+
<div>
142+
<text className="field-label">NAME</text>
143+
<br/>
144+
<text className="field-value">{insInfo?.name||""}</text>
145+
</div>
145146
</div>
147+
<div className="ins-fld-text patient-info">
148+
<div>
149+
<text className="field-label">MEDICARE NUMBER</text>
150+
<br/>
151+
<text className="field-value">{insInfo?.identifier||""}</text>
152+
</div>
153+
<div>
154+
<text className="field-label">PAYER ID</text>
155+
<br/>
156+
<text className="field-value">{insInfo?.coverages[0]?.payerId||""}</text>
157+
</div>
158+
<div>
159+
<text className="field-label">MEDICAID ELIGIBILITY</text>
160+
<br/>
161+
<text className="field-value">{insInfo?.coverages[0]?.medicaidEligibility||"TBD"}</text>
162+
</div>
163+
</div>
164+
</div>
146165

147-
<div className="coverage-sec bb-c-c4dic-card-coverages-area">
148-
{insInfo?.coverages.map(c => {
149-
const coverageColorStyle = {
150-
backgroundColor: c?.colorPallette?.highlight,
151-
color: c?.colorPallette?.foreground,
152-
};
153-
154-
return (
155-
<div>
156-
<pre className="ins-fld-text" style={coverageColorStyle}>
157-
Coverage Type: {c.clazz}
158-
</pre>
159-
<pre className="ins-fld-text">
160-
Payer: {c.payer}
161-
</pre>
162-
<pre className="ins-fld-text" style={coverageColorStyle}>
163-
Contract Number: {c.contractId}
164-
</pre>
165-
<pre className="ins-fld-text">
166-
Start Date: {c.startDate}
167-
</pre>
168-
<pre className="ins-fld-text" style={coverageColorStyle}>
169-
End Date: {c.endDate}
170-
</pre>
171-
<pre className="ins-fld-text">
172-
Status: {c.status}
173-
</pre>
174-
<pre className="ins-fld-text" style={coverageColorStyle}>
175-
Relationship to insured: {c.relationship||""}
176-
</pre>
177-
<pre className="ins-fld-text">
178-
Reference Year: {c.referenceYear}
179-
</pre>
180-
<img className="bb-c-card-img" src={c.c4dicSupportingImageSrc} alt="cardImage"></img>
181-
</div>
182-
)
183-
})}
166+
<div className="coverage-sec bb-c-c4dic-card-coverages-area">
167+
<hr/>
168+
<h6>Benefits</h6>
169+
{insInfo?.coverages.map(c => {
170+
switch (c.coverageClass) {
171+
case "Part A":
172+
return (
173+
<div className="bb-c-c4dic-coverage">
174+
<div>
175+
<text className="field-label">COVERAGE</text>
176+
<br/>
177+
<text className="field-value">{c.coverageClass}</text>
178+
</div>
179+
<div>
180+
<text className="field-label">START DATE</text>
181+
<br/>
182+
<text className="field-value">{c.startDate}??? ?, ????</text>
183+
</div>
184+
<div>
185+
<text className="field-label">ENTITLEMENT REASON</text>
186+
<br/>
187+
<text className="field-value">{c.contractId}</text>
188+
</div>
189+
</div>
190+
)
191+
case "Part B":
192+
return (
193+
<div className="bb-c-c4dic-coverage" style={highlightStyle}>
194+
<div>
195+
<text className="field-label">COVERAGE</text>
196+
<br/>
197+
<text className="field-value">{c.coverageClass}</text>
198+
</div>
199+
<div>
200+
<text className="field-label">START DATE</text>
201+
<br/>
202+
<text className="field-value">{c.startDate}??? ?, ????</text>
203+
</div>
204+
</div>
205+
)
206+
case "Part C":
207+
return (
208+
<div className="bb-c-c4dic-coverage">
209+
<div>
210+
<text className="field-label">COVERAGE</text>
211+
<br/>
212+
<text className="field-value">{c.coverageClass}</text>
213+
<br/>
214+
<text className="field-label">TYPE</text>
215+
<br/>
216+
<text className="field-value">{c.coverageClass}</text>
217+
</div>
218+
<div>
219+
<text className="field-label">PLAN #</text>
220+
<br/>
221+
<text className="field-value">{c.contractId}</text>
222+
<br/>
223+
<text className="field-label">ORGANIZATION</text>
224+
<br/>
225+
<text className="field-value">{c.payer}</text>
226+
</div>
227+
</div>
228+
)
229+
case "Part D":
230+
return (
231+
<div className="bb-c-c4dic-coverage" style={highlightStyle}>
232+
<div>
233+
<text className="field-label">COVERAGE</text>
234+
<br/>
235+
<text className="field-value">{c.coverageClass}</text>
236+
</div>
237+
<div>
238+
<text className="field-label">START DATE</text>
239+
<br/>
240+
<text className="field-value">{c.startDate}??? ?, ????</text>
241+
<br/>
242+
<text className="field-label">PLAN #</text>
243+
<br/>
244+
<text className="field-value">{c.contractId}</text>
245+
</div>
246+
<div>
247+
<text className="field-label">COST SHARE</text>
248+
<br/>
249+
<text className="field-value">{c.contractId}</text>
250+
</div>
251+
</div>
252+
)
253+
}
254+
})}
255+
</div>
256+
<div className="bb-c-c4dic-card-org-contact">
257+
<hr/>
258+
<h6>Contact</h6>
259+
260+
<text className="field-label">CUSTOMER SERVICE</text>
261+
<br/>
262+
<div className="contact-list">
263+
{insInfo?.coverages[0]?.contacts.map(contact => {
264+
return <text className="field-value">{contact}</text>
265+
})}
184266
</div>
267+
<br/>
268+
</div>
269+
<div className="bb-c-c4dic-card-additional-card-info">
270+
<text>{insInfo?.coverages[0]?.addlCardInfo}</text>
185271
</div>
186272
</div>
187273
);

‎client/src/images/medicare-card-figma.png‎

-142 KB
Binary file not shown.

0 commit comments

Comments
 (0)