BB2-3555: Final adjustments for C4DIC FE POC (#87)

* Upgrade ds library, adjust contract id for part c/d, minor formatting adjustments

* Revert ds update

* Adjustments to C4DIC POC

* Add default data and adjust spacing for vertical alignment

* Changes from self-review

Author: jimmyfagan

client/src/components/c4dic.tsx

@@ -22,6 +22,7 @@ export type CoverageInfo = {
     status: string,
     medicaidEligibility: string,
     referenceYear: string,
+    entitlementReason: string,
     colorPalette: {
         foreground: string,
         background: string,
@@ -65,6 +66,7 @@ export default function InsuranceCard() {
                             status: c.active,
                             medicaidEligibility: c.medicaidEligibility,
                             referenceYear: c.referenceYear,
+                            entitlementReason: c.entitlementReason,
                             colorPalette: {
                                 foreground: c.colorPalette.foreground,
                                 background: c.colorPalette.background,
@@ -170,7 +172,7 @@ export default function InsuranceCard() {
                     {insInfo?.coverages.map(c => {
                             const startDateDiv = (c.startDate !== null && c.startDate !== "") ?
                                 (
-                                    <div> 
+                                    <div style={{ width: '70px'}}> 
                                         <text className="field-label">Start Date</text>
                                         <br/>
                                         <text className="field-value">{c.startDate}</text>
@@ -180,7 +182,7 @@ export default function InsuranceCard() {
                                 case "Part A":
                                     return (
                                         <div className="bb-c-c4dic-coverage-a">
-                                            <div> 
+                                            <div style={{ width: '60px'}}> 
                                                 <text className="field-label">Coverage</text>
                                                 <br/>
                                                 <text className="field-value">Hospital<br/>{c.coverageClass}</text>
@@ -189,14 +191,14 @@ export default function InsuranceCard() {
                                             <div> 
                                                 <text className="field-label">Entitlement Reason</text>
                                                 <br/>
-                                                <text className="field-value">{c.contractId}</text>
+                                                <text className="field-value">{c.entitlementReason}</text>
                                             </div>
                                         </div>
                                     )
                                 case "Part B":
                                     return (
                                         <div className="bb-c-c4dic-coverage-b">
-                                            <div> 
+                                            <div style={{ width: '60px'}}> 
                                                 <text className="field-label">Coverage</text>
                                                 <br/>
                                                 <text className="field-value">Medical<br/>{c.coverageClass}</text>
@@ -205,37 +207,25 @@ export default function InsuranceCard() {
                                         </div>
                                     )
                                 case "Part C":
-                                    const partCTypeDiv = (c.coverageClass != null) ? 
-                                    (
-                                        <div> 
-                                            <text className="field-label">Type</text>
-                                            <br/>
-                                            <text className="field-value">{c.coverageClass}</text>
-                                        </div>
-                                    ) : null
+                                    
                                     return (
                                         <div className="bb-c-c4dic-coverage-c">
-                                            <div> 
+                                            <div style={{ width: '60px'}}> 
                                                 <text className="field-label">Coverage</text>
                                                 <br/>
-                                                <text className="field-value">Advantage<br/>{c.coverageClass}</text>
-                                                {partCTypeDiv}
+                                                <text className="field-value">{c.coverageClass}</text>
                                             </div>
                                             <div> 
                                                 <text className="field-label">Plan #</text>
                                                 <br/>
                                                 <text className="field-value">{c.contractId}</text>
-                                                <br/>
-                                                <text className="field-label">Organization</text>
-                                                <br/>
-                                                <text className="field-value">{c.payer}</text>
                                             </div>
                                         </div>
                                     )
                                 case "Part D":
                                     return (
                                         <div className="bb-c-c4dic-coverage-d">
-                                            <div> 
+                                            <div style={{ width: '60px'}}> 
                                                 <text className="field-label">Coverage</text>
                                                 <br/>
                                                 <text className="field-value">Rx<br/>{c.coverageClass}</text>

client/src/components/patientData.tsx

@@ -7,14 +7,20 @@ import React, { useState } from 'react';
 export default function PatientData() {
     const [header] = useState('Fetch your Coverage and Medicare Prescription Drug data');
     const [settingsState] = useState<SettingsType>({
-        pkce: true,
-        version: 'v2',
-        env: 'sandbox'
+        useDefaultDataButton: false,
     });
     async function goAuthorize() {
-        const authUrlResponse = await axios.get(`/api/authorize/authurl`, { params: settingsState });
+        const authUrlResponse = await axios.get(`/api/authorize/authurl`);
         window.location.href = authUrlResponse.data || '/';
     }    
+    async function goLoadDefaults() {
+        const loadDefaultsData = await axios.get(`/api/bluebutton/loadDefaults`);
+        window.location.href = loadDefaultsData.data || '/';
+    }  
+    async function goLoadDefaults2() {
+        const loadDefaultsData = await axios.get(`/api/bluebutton/loadDefaults2`);
+        window.location.href = loadDefaultsData.data || '/';
+    }  
 
     /* DEVELOPER NOTES:
     * Here we are hard coding the users information for the sake of saving time
@@ -34,7 +40,21 @@ export default function PatientData() {
                 <div>
                     <h4>{ header }</h4>
                 </div>
-                <Button id="auth_btn" variation="primary" onClick={goAuthorize}>Authorize</Button>
+                <div className='ds-u-margin-top--2'>
+                    <Button id="auth_btn" variation="primary" onClick={goAuthorize}>Authorize</Button>
+                </div>
+                {
+                    settingsState.useDefaultDataButton ?
+                    <div>
+                        <div className='ds-u-margin-top--2'>
+                            <Button id="load_defaults_btn" variation="primary" onClick={goLoadDefaults}>Load default data 1</Button>
+                        </div>
+                        <div className='ds-u-margin-top--2'>
+                            <Button id="load_defaults_btn2" variation="primary" onClick={goLoadDefaults2}>Load default data 2</Button>
+                        </div>
+                    </div> :
+                        null
+                }
             </div>
         </div>
     );

client/src/styles/index.scss

@@ -205,29 +205,37 @@ input[type=number]::-webkit-input-placeholder {
 }
 
 .bb-c-c4dic-coverage-a {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  padding: 10px;
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
 }
 
 .bb-c-c4dic-coverage-b {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  padding: 10px;
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
   border-top: 0.5px solid 
 }
 
 .bb-c-c4dic-coverage-c {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  padding: 10px;
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
   border-top: 0.5px solid 
 }
 
 .bb-c-c4dic-coverage-d {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  padding: 10px;
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
   border-top: 0.5px solid 
 }
 

client/src/types/settings.ts

@@ -1,5 +1,3 @@
 export type SettingsType = {
-    env: 'sandbox' | 'local' | 'production',
-    version: 'v1' | 'v2',
-    pkce: boolean,
+    useDefaultDataButton: boolean,
 }

server/app.py

@@ -14,8 +14,7 @@
 
 C4DIC_LOGO_EXT = "http://hl7.org/fhir/us/insurance-card/StructureDefinition/C4DIC-Logo-extension"
 C4DIC_ADDL_CARD_INFO_EXT = "http://hl7.org/fhir/us/insurance-card/StructureDefinition/C4DIC-AdditionalCardInformation-extension"
-CMS_VAR_PTC_CNTRCT_ID_01 = "https://bluebutton.cms.gov/resources/variables/ptc_cntrct_id_01"
-CMS_VAR_PTD_CNTRCT_ID_01 = "https://bluebutton.cms.gov/resources/variables/ptdcntrct01"
+CMS_VAR_CREC = "https://bluebutton.cms.gov/resources/variables/crec"
 CMS_VAR_REF_YR="https://bluebutton.cms.gov/resources/variables/rfrnc_yr"
 
 BENE_DENIED_ACCESS = "access_denied"
@@ -168,6 +167,29 @@ def get_patient_eob():
     else:
         return {}
 
+
+@app.route('/api/bluebutton/loadDefaults', methods=['GET'])
+def load_default_data():
+    logged_in_user['dicPatientData'] = load_data_file("Dataset 1", "c4dicPatient")
+    logged_in_user['dicCoverageData'] = load_data_file("Dataset 1", "c4dicCoverage")
+    logged_in_user['eobData'] = load_data_file("Dataset 1", "eobData")
+    return get_fe_redirect_url()
+
+
+@app.route('/api/bluebutton/loadDefaults2', methods=['GET'])
+def load_default_data2():
+    logged_in_user['dicPatientData'] = load_data_file("Dataset 2", "c4dicPatient")
+    logged_in_user['dicCoverageData'] = load_data_file("Dataset 2", "c4dicCoverage")
+    logged_in_user['eobData'] = load_data_file("Dataset 2", "eobData")
+    return get_fe_redirect_url()
+
+
+def load_data_file(dataset_name, resource_file_name):
+    response_file = open("./default_datasets/{}/{}.json".format(dataset_name, resource_file_name), 'r')
+    resource = json.load(response_file)
+    response_file.close()
+    return resource
+
 @app.route('/api/data/insurance', methods=['GET'])
 def get_patient_insurance():
     """
@@ -178,7 +200,6 @@ def get_patient_insurance():
     * Coverage (fetched from the BB2 server and cached in logged_in_user), and 
     * sent back to FE to render a CMS insurance 'card'
     """
-
     print_setting()
 
     ## C4DIC patient and coverage where to extract PII and coverage plans & eligibilities
@@ -265,13 +286,13 @@ def get_patient_insurance():
             c_contract_id = "" ## Part A and Part B does not have contract number
             if c_coverageClass == "Part C":
                 c_contract_id = lookup_1_and_get("$.resource.class[?(@.type.coding[0].code=='plan')]", "value", c)
-                # c_contract_id = lookup_1_and_get(f"$.resource.extension[?(@.url=='{CMS_VAR_PTC_CNTRCT_ID_01}')]", "valueCoding", c).get('code')
             if c_coverageClass == "Part D":
                 c_contract_id = lookup_1_and_get("$.resource.class[?(@.type.coding[0].code=='plan')]", "value", c)
-                # c_contract_id = lookup_1_and_get(f"$.resource.extension[?(@.url=='{CMS_VAR_PTD_CNTRCT_ID_01}')]", "valueCoding", c).get('code')
             coverage['contractId'] = c_contract_id
             c_reference_year = lookup_1_and_get(f"$.resource.extension[?(@.url=='{CMS_VAR_REF_YR}')]", "valueDate", c)
             coverage['referenceYear'] = c_reference_year
+            c_entitlement_reason = lookup_1_and_get(f"$.resource.extension[?(@.url=='{CMS_VAR_CREC}')]", "valueCoding", c).get('display')
+            coverage['entitlementReason'] = c_entitlement_reason
             # color palettes extension
             c_color_palette_ext = lookup_by_path(f"$.resource.extension[?(@.url=='{C4DIC_COLOR_PALETTE_EXT}')]", c)
             if c_color_palette_ext[0]: