fhir-react 0.2.1 → 0.3.0

package/src/components/resources/Immunization/Immunization.js

@@ -1,23 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Badge, Body, Header, Root } from '../../ui';
 
-import Reference from '../../datatypes/Reference';
+import Accordion from '../../containers/Accordion';
+import Annotation from '../../datatypes/Annotation';
 import Coding from '../../datatypes/Coding';
+import Date from '../../datatypes/Date';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
-import Date from '../../datatypes/Date';
-import Annotation from '../../datatypes/Annotation';
 import fhirVersions from '../fhirResourceVersions';
-
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-} from '../../ui';
+import { Value } from '../../ui';
 
 const commonDTO = fhirResource => {
   const title =
@@ -111,13 +104,11 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 
 const Immunization = props => {
-  const { fhirVersion, fhirResource } = props;
-
+  const { fhirVersion, fhirResource, fhirIcons } = props;
   const {
     title,
     status,
     providedDate,
-    reported,
     manufacturerText,
     hasLotNumber,
     lotNumber,
@@ -134,84 +125,124 @@ const Immunization = props => {
     note,
   } = resourceDTO(fhirVersion, fhirResource);
 
+  const headerIcon = fhirIcons[_get(fhirResource, 'resourceType')];
+  const tableData = [
+    {
+      label: 'Manufacturer Text',
+      testId: '',
+      data: manufacturerText,
+      status: manufacturerText,
+    },
+    {
+      label: 'Manufacturer Text',
+      testId: 'lotNumber',
+      data: (
+        <>
+          {lotNumber}
+          {lotNumberExpirationDate && (
+            <span>
+              {' '}
+              expires on{' '}
+              <Date
+                testId="lotNumberExpirationDate"
+                fhirData={lotNumberExpirationDate}
+                isBlack
+              />
+            </span>
+          )}
+        </>
+      ),
+      status: hasLotNumber,
+    },
+    {
+      label: 'Dosage',
+      testId: 'doseQuantity',
+      data:
+        doseQuantity &&
+        [
+          _get(doseQuantity, 'value'),
+          _get(doseQuantity, 'unit') || _get(doseQuantity, 'code'),
+        ].join(' '),
+      status: hasDoseQuantity,
+    },
+    {
+      label: 'Patient',
+      testId: 'patient',
+      data: patient && <Reference fhirData={patient} />,
+      status: patient,
+    },
+    {
+      label: 'Requester',
+      testId: 'requester',
+      data: requester && <Reference fhirData={requester} />,
+      status: requester,
+    },
+    {
+      label: 'Performer',
+      testId: 'performer',
+      data: performer && <Reference fhirData={performer} />,
+      status: performer,
+    },
+    {
+      label: 'Note',
+      testId: 'note',
+      data: note && <Annotation fhirData={note} />,
+      status: note,
+    },
+    {
+      label: 'Route',
+      testId: 'route',
+      data: hasRoute && route && (
+        <>
+          {route.map((coding, i) => {
+            return (
+              <div key={`item-${i}`}>
+                <Coding fhirData={coding} />
+              </div>
+            );
+          })}
+        </>
+      ),
+      status: hasRoute,
+    },
+    {
+      label: 'Site',
+      testId: 'site',
+      data: hasSite && site && (
+        <>
+          {site.map((coding, i) => {
+            return (
+              <div key={`item-${i}`}>
+                <Coding fhirData={coding} />
+              </div>
+            );
+          })}
+        </>
+      ),
+      status: hasSite,
+    },
+  ];
+
   return (
     <Root name="Immunization">
-      <Header>
-        <Title data-testid="title">{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {providedDate && (
-          <BadgeSecondary data-testid="providedDate">
-            provided on <Date fhirData={providedDate} />
-            {reported || ''}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {manufacturerText && (
-          <Value label="Manufacturer Text">{manufacturerText}</Value>
-        )}
-        {hasLotNumber && (
-          <Value label="Lot number" data-testid="lotNumber">
-            {lotNumber}
-            {lotNumberExpirationDate && (
-              <span data-testid="lotNumberExpirationDate">
-                {' '}
-                expires on {lotNumberExpirationDate}
-              </span>
-            )}
-          </Value>
-        )}
-        {hasDoseQuantity && (
-          <Value label="Dosage" data-testid="doseQuantity">
-            <div>
-              {_get(doseQuantity, 'value')} &nbsp;
-              {_get(doseQuantity, 'unit') || _get(doseQuantity, 'code')}
-            </div>
-          </Value>
-        )}
-        {patient && (
-          <Value label="Patient" data-testid="patient">
-            <Reference fhirData={patient} />
-          </Value>
-        )}
-        {requester && (
-          <Value label="Requester" data-testid="requester">
-            <Reference fhirData={requester} />
-          </Value>
-        )}
-        {performer && (
-          <Value label="Performer" data-testid="performer">
-            <Reference fhirData={performer} />
-          </Value>
-        )}
-        {note && (
-          <Value label="Note" data-testid="note">
-            <Annotation fhirData={note} />
-          </Value>
-        )}
-        {hasRoute && (
-          <Value label="Route" data-testid="route">
-            {route.map((coding, i) => {
-              return (
-                <div key={`item-${i}`}>
-                  <Coding fhirData={coding} />
-                </div>
-              );
-            })}
-          </Value>
-        )}
-        {hasSite && (
-          <Value label="Site" data-testid="site">
-            {site.map((coding, i) => {
-              return (
-                <div key={`item-${i}`}>
-                  <Coding fhirData={coding} />
-                </div>
-              );
-            })}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Immunization"
+            additionalContent={
+              providedDate && (
+                <Value label="Start date" data-testid="headerStartDate">
+                  <Date fhirData={providedDate} isBlack />
+                </Value>
+              )
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={headerIcon}
+            title={title}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -10,6 +10,7 @@ import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.
 import r4Example1 from '../../../fixtures/r4/resources/immunization/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/immunization/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/immunization/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'Immunization',
@@ -21,6 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Immunization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -31,6 +33,7 @@ export const Example2OfDSTU2 = () => {
     <Immunization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -38,25 +41,41 @@ export const Example2OfDSTU2 = () => {
 export const ExampleSTU3 = () => {
   const fhirResource = object('Resource', stu3Example);
   return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Immunization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example1R4 = () => {
   const fhirResource = object('Resource', r4Example1);
   return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Immunization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example2R4 = () => {
   const fhirResource = object('Resource', r4Example2);
   return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Immunization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example3R4 = () => {
   const fhirResource = object('Resource', r4Example3);
   return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Immunization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };

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

@@ -1,18 +1,20 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import fhirVersions from '../fhirResourceVersions';
 import Immunization from './Immunization';
+import React from 'react';
 import dstu2Example from '../../../fixtures/dstu2/resources/immunization/example1.json';
-import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.json';
+import fhirVersions from '../fhirResourceVersions';
 import r4Example1 from '../../../fixtures/r4/resources/immunization/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/immunization/example2.json';
+import { render } from '@testing-library/react';
+import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.json';
+
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Immunization component properly', () => {
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example,
       fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
     };
 
     const { container, getByTestId } = render(
@@ -23,11 +25,11 @@ describe('should render Immunization component properly', () => {
 
     expect(getByTestId('title').textContent).toContain('Fluvax');
 
-    expect(getByTestId('providedDate').textContent).toContain('on 2013-01-10');
+    expect(getByTestId('providedDate').textContent).toContain('1/10/2013');
 
     expect(getByTestId('lotNumber').textContent).toContain('AAJN11K');
     expect(getByTestId('lotNumberExpirationDate').textContent).toContain(
-      '2015-02-15',
+      '2/15/2015',
     );
 
     expect(getByTestId('doseQuantity').textContent).toContain('5');
@@ -53,6 +55,7 @@ describe('should render Immunization component properly', () => {
     const defaultProps = {
       fhirResource: stu3Example,
       fhirVersion: fhirVersions.STU3,
+      fhirIcons: fhirIcons,
     };
 
     const { container, getByTestId } = render(
@@ -63,11 +66,11 @@ describe('should render Immunization component properly', () => {
 
     expect(getByTestId('title').textContent).toContain('Fluvax');
 
-    expect(getByTestId('providedDate').textContent).toContain('on 2013-01-10');
+    expect(getByTestId('providedDate').textContent).toContain('1/10/2013');
 
     expect(getByTestId('lotNumber').textContent).toContain('AAJN11K');
     expect(getByTestId('lotNumberExpirationDate').textContent).toContain(
-      '2015-02-15',
+      '2/15/2015',
     );
 
     expect(getByTestId('doseQuantity').textContent).toContain('5');
@@ -87,6 +90,7 @@ describe('should render Immunization component properly', () => {
     const defaultProps = {
       fhirResource: r4Example1,
       fhirVersion: fhirVersions.R4,
+      fhirIcons: fhirIcons,
     };
 
     const { container, getByTestId } = render(
@@ -97,11 +101,11 @@ describe('should render Immunization component properly', () => {
 
     expect(getByTestId('title').textContent).toContain('Fluvax');
 
-    expect(getByTestId('providedDate').textContent).toContain('on 2013-01-10');
+    expect(getByTestId('providedDate').textContent).toContain('1/10/2013');
 
     expect(getByTestId('lotNumber').textContent).toContain('AAJN11K');
     expect(getByTestId('lotNumberExpirationDate').textContent).toContain(
-      '2015-02-15',
+      '2/15/2015',
     );
 
     expect(getByTestId('doseQuantity').textContent).toContain('5');
@@ -121,6 +125,7 @@ describe('should render Immunization component properly', () => {
     const defaultProps = {
       fhirResource: r4Example2,
       fhirVersion: fhirVersions.R4,
+      fhirIcons: fhirIcons,
     };
 
     const { container, getByTestId, queryByTestId } = render(
@@ -131,7 +136,7 @@ describe('should render Immunization component properly', () => {
 
     expect(getByTestId('title').textContent).toContain('DTP');
 
-    expect(getByTestId('providedDate').textContent).toContain('on 2013-01-10');
+    expect(getByTestId('providedDate').textContent).toContain('1/10/2013');
 
     expect(getByTestId('patient').textContent).toEqual('Patient/example');
 

package/src/components/resources/List/DrugTierDefinitionExtension.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _get from 'lodash/get';
+import { getExtension } from './utils';
+import { ValueSection, Value } from '../../ui';
+import CodeableConcept from '../../datatypes/CodeableConcept';
+import Money from '../../datatypes/Money';
+
+const DrugTierDefinitionExtension = props => {
+  const dto = drugTierDefinitionExtension => {
+    const extensions = _get(drugTierDefinitionExtension, 'extension', []);
+    const hasExtensions = extensions.length >= 1;
+
+    const drugTierID = _get(
+      getExtension('drugTierID', extensions),
+      'valueCodeableConcept',
+    );
+    const mailOrder = _get(
+      getExtension('mailOrder', extensions),
+      'valueBoolean',
+    );
+    const costSharing = _get(
+      getExtension('costSharing', extensions),
+      'extension',
+      null,
+    );
+
+    const hasConstSharing = costSharing !== null;
+    if (hasConstSharing) {
+      const pharmacyType = _get(
+        getExtension('pharmacyType', costSharing),
+        'valueCodeableConcept',
+      );
+      const copayAmount = _get(
+        getExtension('copayAmount', costSharing),
+        'valueMoney',
+      );
+      const copayOption = _get(
+        getExtension('copayOption', costSharing),
+        'valueCodeableConcept',
+      );
+      const coinsuranceRate = _get(
+        getExtension('coinsuranceRate', costSharing),
+        'valueDecimal',
+      );
+      const coinsuranceOption = _get(
+        getExtension('coinsuranceOption', costSharing),
+        'valueCodeableConcept',
+      );
+
+      return {
+        hasExtensions,
+        drugTierID,
+        mailOrder,
+        hasConstSharing,
+        pharmacyType,
+        copayAmount,
+        copayOption,
+        coinsuranceRate,
+        coinsuranceOption,
+      };
+    }
+
+    return {
+      hasExtensions,
+      drugTierID,
+      mailOrder,
+      hasConstSharing,
+    };
+  };
+
+  const { drugTierDefinitionExtension } = props;
+  const {
+    hasExtensions,
+    drugTierID,
+    mailOrder,
+    hasConstSharing,
+    pharmacyType,
+    copayAmount,
+    copayOption,
+    coinsuranceRate,
+    coinsuranceOption,
+  } = dto(drugTierDefinitionExtension);
+
+  return (
+    hasExtensions && (
+      <ValueSection
+        label="Drug Tier Definition"
+        data-testid="drugTierDefinition"
+      >
+        {drugTierID && (
+          <Value label="Drug Tier ID" data-testid="drugTierID">
+            <CodeableConcept fhirData={drugTierID} />
+          </Value>
+        )}
+        {mailOrder && (
+          <Value label="Mail order" data-testid="mailOrder">
+            {mailOrder ? 'yes' : 'no'}
+          </Value>
+        )}
+        {hasConstSharing && (
+          <ValueSection label="Cost sharing" data-testid="costSharing">
+            {pharmacyType && (
+              <Value label="Pharmacy Type" data-testid="pharmacyType">
+                <CodeableConcept fhirData={pharmacyType} />
+              </Value>
+            )}
+            {copayAmount && (
+              <Value label="Copay Amount" data-testid="copayAmount">
+                <Money fhirData={copayAmount} />
+              </Value>
+            )}
+            {copayOption && (
+              <Value label="Copay Option" data-testid="copayOption">
+                <CodeableConcept fhirData={copayOption} />
+              </Value>
+            )}
+            {(coinsuranceRate === 0 || coinsuranceRate) && (
+              <Value label="Coinsurance Rate" data-testid="coinsuranceRate">
+                {coinsuranceRate}
+              </Value>
+            )}
+            {coinsuranceOption && (
+              <Value label="Coinsurance Option" data-testid="coinsuranceOption">
+                <CodeableConcept fhirData={coinsuranceOption} />
+              </Value>
+            )}
+          </ValueSection>
+        )}
+      </ValueSection>
+    )
+  );
+};
+
+DrugTierDefinitionExtension.propTypes = {
+  drugTierDefinitionExtension: PropTypes.shape({}).isRequired,
+};
+
+export default DrugTierDefinitionExtension;

package/src/components/resources/List/Entries.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import _get from 'lodash/get';
+
+import {
+  ValueSection,
+  Table,
+  TableRow,
+  TableHeader,
+  TableCell,
+  MissingValue,
+} from '../../ui/index';
+import Date from '../../datatypes/Date';
+import CodeableConcept from '../../datatypes/CodeableConcept';
+import Reference from '../../datatypes/Reference';
+
+const Entries = ({ fhirData: items = [] }) => {
+  if (items.length === 0) return null;
+  return (
+    <ValueSection label="Entries" data-testid="entries">
+      <Table>
+        <thead>
+          <TableRow>
+            <TableHeader>Item</TableHeader>
+            <TableHeader>Date</TableHeader>
+            <TableHeader>Is deleted</TableHeader>
+            <TableHeader>Status</TableHeader>
+          </TableRow>
+        </thead>
+        <tbody>
+          {items.map((item, idx) => (
+            <Entry key={idx} item={item} />
+          ))}
+        </tbody>
+      </Table>
+    </ValueSection>
+  );
+};
+
+const Entry = props => {
+  const { item } = props;
+  const flag = _get(item, 'flag');
+  const deleted = _get(item, 'deleted');
+  const date = _get(item, 'date');
+  const entry = _get(item, 'item');
+
+  return (
+    <>
+      <TableRow>
+        <TableCell data-testid="items.entry">
+          <Reference fhirData={entry} />
+        </TableCell>
+        <TableCell data-testid="items.date">
+          {date ? <Date fhirData={date} /> : <MissingValue />}
+        </TableCell>
+        <TableCell data-testid="items.isDeleted">
+          {deleted === true ? 'yes' : 'no'}
+        </TableCell>
+        <TableCell data-testid="items.flag">
+          {flag ? <CodeableConcept fhirData={flag} /> : <MissingValue />}
+        </TableCell>
+      </TableRow>
+    </>
+  );
+};
+
+export default Entries;