fhir-react 0.3.2 → 0.3.6

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 {
@@ -225,8 +228,12 @@ const resourceDTO = (fhirVersion, fhirResource, withCarinBBProfile) => {
   }
 };
 
-const ExplanationOfBenefit = props => {
-  const { fhirResource, fhirVersion, withCarinBBProfile = false } = props;
+const ExplanationOfBenefit = ({
+  fhirResource,
+  fhirVersion,
+  withCarinBBProfile = false,
+  fhirIcons,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(
@@ -411,6 +418,7 @@ const ExplanationOfBenefit = props => {
                 </Value>
               )
             }
+            icon={fhirIcons}
           />
         }
         bodyContent={
@@ -453,11 +461,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 +510,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 +530,7 @@ const ExplanationOfBenefit = props => {
                           </TableCell>
                           <TableCell>
                             {infoStatus ? (
-                              <Coding fhirData={infoStatus} />
+                              <StatusComponent fhirData={infoStatus} />
                             ) : (
                               <MissingValue />
                             )}

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

@@ -12,6 +12,9 @@ import example2R4 from '../../../fixtures/r4/resources/explanationOfBenefit/eobF
 import exampleC4BB from '../../../fixtures/r4/resources/explanationOfBenefit/c4bbExample.json';
 import exampleC4BBExtendedDiagnosis from '../../../fixtures/r4/resources/explanationOfBenefit/c4bbExtendedDiagnosis.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import ExplanationOfBenefitIcon from '../../../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg';
+
 export default {
   title: 'ExplanationOfBenefit',
 };
@@ -22,6 +25,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <ExplanationOfBenefit
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg')}
     />
   );
 };
@@ -32,6 +36,7 @@ export const ExampleSTU3 = () => {
     <ExplanationOfBenefit
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={ExplanationOfBenefitIcon}
     />
   );
 };
@@ -41,6 +46,7 @@ export const Example2OfSTU3 = () => {
     <ExplanationOfBenefit
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -50,6 +56,7 @@ export const PersonPrimaryCoverageR4 = () => {
     <ExplanationOfBenefit
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -59,6 +66,7 @@ export const EOBForClaimWithErrorsR4 = () => {
     <ExplanationOfBenefit
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -9,8 +9,80 @@ import exampleC4BBExtendedDiagnosis from '../../../fixtures/r4/resources/explana
 import fhirVersions from '../fhirResourceVersions';
 import { nbspRegex } from '../../../testUtils';
 import { render } from '@testing-library/react';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render ExplanationOfBenefit component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<ExplanationOfBenefit {...defaultProps} />);
+    const headerIcon = getByAltText('explanation of benefit');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<ExplanationOfBenefit {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg.svg')}
+          alt="explanation of benefit"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<ExplanationOfBenefit {...defaultProps} />);
+    const headerIcon = getByAltText('explanation of benefit');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<ExplanationOfBenefit {...defaultProps} />);
+    const headerIcon = getByAltText('explanation of benefit');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<ExplanationOfBenefit {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -200,13 +272,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/components/resources/FamilyMemberHistory/FamilyMemberHistory.js

@@ -1,20 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import Accordion from '../../containers/Accordion/Accordion';
 import Coding from '../../datatypes/Coding';
 import Reference from '../../datatypes/Reference';
 import Annotation from '../../datatypes/Annotation';
 
 import _get from 'lodash/get';
-import {
-  Root,
-  Header,
-  Title,
-  BadgeSecondary,
-  Badge,
-  Body,
-  Value,
-} from '../../ui';
+import { Root, Header, Badge, Body } from '../../ui';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
 import Date from '../../datatypes/Date';
@@ -78,7 +71,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 
 const FamilyMemberHistory = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -97,36 +90,52 @@ const FamilyMemberHistory = props => {
     notes,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Patient',
+      testId: 'patient',
+      data: patient && <Reference fhirData={patient} />,
+      status: patient,
+    },
+    {
+      label: 'Relationship',
+      testId: 'hasRelationship',
+      data:
+        hasRelationship &&
+        relationship.map((item, i) => (
+          <Coding key={`relationship-item-${i}`} fhirData={item} />
+        )),
+      status: hasRelationship,
+    },
+    {
+      label: 'Note',
+      testId: 'noteText',
+      data: hasNotes && <Annotation fhirData={notes} />,
+      status: hasNotes,
+    },
+  ];
+
   return (
     <Root name="FamilyMemberHistory">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {date && (
-          <BadgeSecondary>
-            on <Date fhirData={date} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {patient && (
-          <Value label="Patient" data-testid="patient">
-            <Reference fhirData={patient} />
-          </Value>
-        )}
-        {hasRelationship && (
-          <Value label="Relationship" data-testid="hasRelationship">
-            {relationship.map((item, i) => (
-              <Coding key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {hasNotes && (
-          <Value label="Note" data-testid="noteText">
-            <Annotation fhirData={notes} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="FamilyMemberHistory"
+            additionalContent={
+              date && (
+                <>
+                  <span className="me-2">On</span>
+                  <Date fhirData={date} />
+                </>
+              )
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+            title={title}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

package/src/components/resources/FamilyMemberHistory/FamilyMemberHistory.stories.js

@@ -8,6 +8,8 @@ import example1DSTU2 from '../../../fixtures/dstu2/resources/familyMemberHistory
 
 import example1STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example1.json';
 import example2STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import FamilyMemberHistoryIcon from '../../../assets/containers/FamilyMemberHistory/family-member-history.svg';
 
 export default {
   title: 'FamilyMemberHistory',
@@ -19,6 +21,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/FamilyMemberHistory/family-member-history.svg')}
     />
   );
 };
@@ -29,6 +32,7 @@ export const Example1OfSTU3 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={FamilyMemberHistoryIcon}
     />
   );
 };
@@ -39,6 +43,7 @@ export const Example2OfSTU3 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };

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

@@ -5,8 +5,80 @@ import fhirVersions from '../fhirResourceVersions';
 
 import example1DSTU2 from '../../../fixtures/dstu2/resources/familyMemberHistory/example1.json';
 import example1STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render FamilyMemberHistory component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/FamilyMemberHistory/family-member-history.svg')}
+          alt="family member history"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('DSTU2', () => {
     const defaultProps = {
       fhirResource: example1DSTU2,