fhir-react 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

package/src/components/resources/ExplanationOfBenefit/ExplanationOfBenefit.js

@@ -14,6 +14,7 @@ import {
 import CareTeam from './CareTeam';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Coding from '../../datatypes/Coding';
+import Quantity from '../../datatypes/Quantity';
 import Date from '../../datatypes/Date';
 import Diagnosis from './Diagnosis';
 import Identifier from '../../datatypes/Identifier/Identifier';
@@ -80,9 +81,10 @@ const stu3DTO = fhirResource => {
     services.map(serviceItem => {
       const coding = _get(serviceItem, 'service.coding.0');
       const servicedDate = _get(serviceItem, 'servicedDate');
+      const servicedPeriod = _get(serviceItem, 'servicedPeriod');
       const quantity = _get(serviceItem, 'quantity.value');
       const itemCost = _get(serviceItem, 'net');
-      return { coding, servicedDate, quantity, itemCost };
+      return { coding, servicedDate, servicedPeriod, quantity, itemCost };
     });
 
   return {
@@ -126,9 +128,10 @@ const r4DTO = fhirResource => {
     services.map(serviceItem => {
       const coding = _get(serviceItem, 'productOrService.coding.0');
       const servicedDate = _get(serviceItem, 'servicedDate');
+      const servicedPeriod = _get(serviceItem, 'servicedPeriod');
       const quantity = _get(serviceItem, 'quantity.value');
       const itemCost = _get(serviceItem, 'net');
-      return { coding, servicedDate, quantity, itemCost };
+      return { coding, servicedDate, servicedPeriod, quantity, itemCost };
     });
 
   return {
@@ -453,11 +456,12 @@ const ExplanationOfBenefit = props => {
                             <Coding fhirData={serviceItem.coding} />
                           </TableCell>
                           <TableCell data-testid="explanation.servicedDate">
-                            {serviceItem.servicedDate ? (
+                            {(serviceItem.servicedDate && (
                               <Date fhirData={serviceItem.servicedDate} />
-                            ) : (
-                              <MissingValue />
-                            )}
+                            )) ||
+                              (serviceItem.servicedPeriod && (
+                                <Period fhirData={serviceItem.servicedPeriod} />
+                              )) || <MissingValue />}
                           </TableCell>
                           <TableCell data-testid="explanation.quantity">
                             {Number.isFinite(Number(serviceItem.quantity)) ? (
@@ -501,7 +505,14 @@ const ExplanationOfBenefit = props => {
                         informationItem,
                         'category.coding.0',
                       );
-                      const infoStatus = _get(informationItem, 'code.coding.0');
+                      const infoKey = Object.keys(informationItem).filter(
+                        key => {
+                          return key !== 'sequence' && key !== 'category';
+                        },
+                      );
+                      const infoStatus = _get(informationItem, infoKey);
+                      const StatusComponent =
+                        infoKey.toString() === 'timingDate' ? Date : Quantity;
 
                       return (
                         <TableRow key={`serviceItem-${i}`}>
@@ -514,7 +525,7 @@ const ExplanationOfBenefit = props => {
                           </TableCell>
                           <TableCell>
                             {infoStatus ? (
-                              <Coding fhirData={infoStatus} />
+                              <StatusComponent fhirData={infoStatus} />
                             ) : (
                               <MissingValue />
                             )}

package/src/components/resources/ExplanationOfBenefit/ExplanationOfBenefit.test.js

@@ -200,13 +200,18 @@ describe('should render ExplanationOfBenefit component properly', () => {
       'Condition/88bd5ac6-175b-5906-a4ee-6eedd667b0cc',
     );
     expect(getByTestId('diagnosisType').textContent).toContain('principal');
-    expect(getByTestId('supportingInfo.category').textContent).toContain(
+    expect(getByTestId('supportingInfo.0.category').textContent).toContain(
       'clmrecvddate',
     );
-    expect(getByTestId('supportingInfo.timingDate').textContent).toEqual(
+    expect(getByTestId('supportingInfo.0.timingDate').textContent).toEqual(
       '1/5/2017',
     );
-
+    expect(getByTestId('supportingInfo.1.category').textContent).toContain(
+      'dayssupply',
+    );
+    expect(getByTestId('supportingInfo.1.valueQuantity').textContent).toContain(
+      '30',
+    );
     // checking if text content of each header cell is equal to mocked data
     const headerCells = getAllByRole('columnheader')
       .slice(0, 4)

package/src/components/resources/ExplanationOfBenefit/SupportingInfo.js

@@ -4,6 +4,7 @@ import _get from 'lodash/get';
 import { ValueSection, Value } from '../../ui/index';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Date from '../../datatypes/Date';
+import Quantity from '../../datatypes/Quantity';
 
 const SupportingInfo = ({ fhirData }) => {
   return fhirData.map((supportingInfo, index) => {
@@ -11,6 +12,7 @@ const SupportingInfo = ({ fhirData }) => {
     const category = _get(supportingInfo, 'category');
     const code = _get(supportingInfo, 'code	');
     const timingDate = _get(supportingInfo, 'timingDate');
+    const valueQuantity = _get(supportingInfo, 'valueQuantity');
     const timingPeriodStart = _get(supportingInfo, 'timingPeriod.start');
     const timingPeriodEnd = _get(supportingInfo, 'timingPeriod.end');
 
@@ -18,20 +20,24 @@ const SupportingInfo = ({ fhirData }) => {
       <div key={`total-${index}`}>
         <ValueSection
           label={`Supporting information ${sequence}.`}
-          data-testid="supportingInfo"
+          data-testid={`supportingInfo.${index}`}
           marginTop
         >
           {category && (
             <Value
               dirColumn
               label="Category"
-              data-testid="supportingInfo.category"
+              data-testid={`supportingInfo.${index}.category`}
             >
               <CodeableConcept fhirData={category} />
             </Value>
           )}
           {code && (
-            <Value dirColumn label="Code" data-testid="supportingInfo.code">
+            <Value
+              dirColumn
+              label="Code"
+              data-testid={`supportingInfo.${index}.category`}
+            >
               <CodeableConcept fhirData={code} />
             </Value>
           )}
@@ -39,16 +45,25 @@ const SupportingInfo = ({ fhirData }) => {
             <Value
               dirColumn
               label="Date"
-              data-testid="supportingInfo.timingDate"
+              data-testid={`supportingInfo.${index}.timingDate`}
             >
               <Date fhirData={timingDate} />
             </Value>
           )}
+          {valueQuantity && (
+            <Value
+              dirColumn
+              label="Quantity"
+              data-testid={`supportingInfo.${index}.valueQuantity`}
+            >
+              <Quantity fhirData={valueQuantity} />
+            </Value>
+          )}
           {timingPeriodStart && (
             <Value
               dirColumn
               label="Start date"
-              data-testid="supportingInfo.timingPeriodStart"
+              data-testid={`supportingInfo.${index}.timingPeriodStart`}
             >
               <Date fhirData={timingPeriodStart} />
             </Value>
@@ -57,7 +72,7 @@ const SupportingInfo = ({ fhirData }) => {
             <Value
               dirColumn
               label="End date"
-              data-testid="supportingInfo.timingPeriodEnd"
+              data-testid={`supportingInfo.${index}.timingPeriodEnd`}
             >
               <Date fhirData={timingPeriodEnd} />
             </Value>

package/src/fixtures/r4/resources/explanationOfBenefit/c4bbExample.json

@@ -148,13 +148,29 @@
       "category": {
         "coding": [
           {
+            "code": "clmrecvddate",
             "system": "http://hl7.org/fhir/us/carin-bb/CodeSystem/C4BBSupportingInfoType",
-            "code": "clmrecvddate"
+            "display": "Claim Received Date"
           }
         ]
       },
       "timingDate": "2017-01-05"
-    }
+    },
+    {
+      "sequence": 2,
+      "category": {
+          "coding": [
+              {
+                  "code": "dayssupply",
+                  "system": "http://hl7.org/fhir/us/carin-bb/CodeSystem/C4BBSupportingInfoType",
+                  "display": "Days Supply"
+              }
+          ]
+      },
+      "valueQuantity": {
+          "value": 30
+      }
+  }
   ],
   "diagnosis": [
     {