fhir-react 0.3.4 → 0.3.7

package/src/components/resources/Claim/Diagnosis.js

@@ -0,0 +1,61 @@
+import {
+  MissingValue,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  ValueSection,
+} from '../../ui';
+import Coding from '../../datatypes/Coding';
+import Reference from '../../datatypes/Reference';
+import React from 'react';
+
+const Diagnosis = ({ diagnosis }) => {
+  return (
+    <ValueSection label="Diagnosis" data-testid="diagnosis" marginTop>
+      <Table>
+        <thead>
+          <TableRow>
+            <TableHeader>Diagnosis</TableHeader>
+            <TableHeader>Type</TableHeader>
+            <TableHeader>Package code</TableHeader>
+          </TableRow>
+        </thead>
+        <tbody className="border-top-0">
+          {diagnosis.map((diagnosis, idx) => (
+            <TableRow key={idx}>
+              <TableCell data-testid="diagnosis.diagnosis" className="col-md-4">
+                {diagnosis.coding ? (
+                  <Coding fhirData={diagnosis.coding} />
+                ) : diagnosis.refrence ? (
+                  <Reference fhirData={diagnosis.reference} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+              <TableCell data-testid="diagnosis.type" className="col-md-4">
+                {diagnosis.typeCoding ? (
+                  <Coding fhirData={diagnosis.typeCoding} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+              <TableCell
+                data-testid="diagnosis.packageCode"
+                className="col-md-4"
+              >
+                {diagnosis.packageCodeCoding ? (
+                  <Coding fhirData={diagnosis.packageCodeCoding} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </tbody>
+      </Table>
+    </ValueSection>
+  );
+};
+
+export default Diagnosis;

package/src/components/resources/Claim/Insurance.js

@@ -0,0 +1,58 @@
+import {
+  MissingValue,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  ValueSection,
+} from '../../ui';
+import Reference from '../../datatypes/Reference';
+import React from 'react';
+
+const Insurance = ({ insurance }) => {
+  return (
+    <ValueSection label="Insurance" data-testid="insurance" marginTop>
+      <Table>
+        <thead>
+          <TableRow>
+            <TableHeader>Coverage</TableHeader>
+            <TableHeader>Business Arrangement</TableHeader>
+            <TableHeader>Claim Response</TableHeader>
+          </TableRow>
+        </thead>
+        <tbody className="border-top-0">
+          {insurance.map((insurance, idx) => (
+            <TableRow key={idx}>
+              <TableCell data-testid="insurance.coverage" className="col-md-4">
+                <Reference fhirData={insurance.coverage} />
+                {insurance.focal && ' (focal)'}
+              </TableCell>
+              <TableCell
+                data-testid="insurance.businessArrangement"
+                className="col-md-4"
+              >
+                {insurance.businessArrangement ? (
+                  insurance.businessArrangement
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+              <TableCell
+                data-testid="insurance.claimResponse"
+                className="col-md-4"
+              >
+                {insurance.claimResponse ? (
+                  <Reference fhirData={insurance.claimResponse} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </tbody>
+      </Table>
+    </ValueSection>
+  );
+};
+
+export default Insurance;

package/src/components/resources/Claim/Item.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Chevron, MissingValue, TableCell, TableRow } from '../../ui';
+import Coding from '../../datatypes/Coding';
+import Money from '../../datatypes/Money';
+
+const Item = ({ item, parentSequences, parentId, isCollapse = false }) => {
+  const itemSequences = [...parentSequences, item.sequence];
+  const id = itemSequences.join('.');
+  const collapseId = parentSequences.length ? parentId : item.sequence;
+
+  const [rotate, setRotate] = useState(false);
+  const handleTableExpand = () => setRotate(!rotate);
+
+  const isExpandable =
+    parentSequences.length === 0 && item.subItems.length !== 0;
+
+  return (
+    <>
+      <TableRow
+        className={`${isCollapse ? `collapse item-${parentId}` : ''} ${
+          isExpandable ? 'fw-bold table-expandable-row border-top' : ''
+        }`}
+        data-bs-target={`.item-${collapseId}`}
+        data-bs-toggle={'collapse'}
+        aria-controls={id}
+        aria-expanded="false"
+        onClick={handleTableExpand}
+      >
+        <TableCell data-testid="items.sequence" className="col-md-2">
+          {id}
+        </TableCell>
+        <TableCell data-testid="items.service" className="col-md-2">
+          <Coding fhirData={item.service} />
+        </TableCell>
+        <TableCell data-testid="items.unitPrice" className="col-md-2">
+          {item.unitPrice ? (
+            <Money fhirData={item.unitPrice} />
+          ) : (
+            <MissingValue />
+          )}
+          {item.factor != null ? (
+            <span>&nbsp;&times;&nbsp;{item.factor}</span>
+          ) : null}
+        </TableCell>
+        <TableCell data-testid="items.quantity" className="col-md-2">
+          {item.quantity != null ? item.quantity : <MissingValue />}
+        </TableCell>
+        <TableCell data-testid="items.net" className="col-md-2">
+          {item.net ? <Money fhirData={item.net} /> : <MissingValue />}
+        </TableCell>
+        {isExpandable ? (
+          <TableCell className="col-md-2">
+            <button
+              className="fhir-container__Accordion__header-button w-100 p-0 border-0 rounded-1 collapsed text-dark bg-transparent shadow-none "
+              type="button"
+            >
+              <div className={` ${rotate ? ' header-rotate' : ''}`}>
+                <Chevron strokeColor={rotate ? '#2a6fd7' : '#6f83a9'} />
+              </div>
+            </button>
+          </TableCell>
+        ) : (
+          <TableCell style={{ width: '64px' }} className="col-md-2" />
+        )}
+      </TableRow>
+      {item.subItems.map((subItem, idx) => (
+        <Item
+          key={idx}
+          item={subItem}
+          parentSequences={itemSequences}
+          parentId={collapseId}
+          isCollapse
+        />
+      ))}
+    </>
+  );
+};
+
+export default Item;

package/src/components/resources/Claim/Items.js

@@ -0,0 +1,29 @@
+import { Table, TableHeader, TableRow, ValueSection } from '../../ui';
+import React from 'react';
+import Item from './Item';
+
+const Items = ({ items }) => {
+  return (
+    <ValueSection label="Items" data-testid="items" marginTop>
+      <Table>
+        <thead>
+          <TableRow>
+            <TableHeader>ID</TableHeader>
+            <TableHeader>Service</TableHeader>
+            <TableHeader>Unit price</TableHeader>
+            <TableHeader>Quantity</TableHeader>
+            <TableHeader>Total</TableHeader>
+            <TableHeader></TableHeader>
+          </TableRow>
+        </thead>
+        <tbody className="border-top-0">
+          {items.map((item, idx) => (
+            <Item key={idx} item={item} parentSequences={[]} />
+          ))}
+        </tbody>
+      </Table>
+    </ValueSection>
+  );
+};
+
+export default Items;

package/src/components/resources/Coverage/Coverage.js

@@ -6,8 +6,9 @@ import Reference from '../../datatypes/Reference';
 import Coding from '../../datatypes/Coding';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import { Root, Header, Title, Body, Value } from '../../ui';
+import { Root, Header, Body, Value } from '../../ui';
 import Identifier from '../../datatypes/Identifier';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const identifier = _get(fhirResource, 'identifier.0');
@@ -113,8 +114,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Coverage = props => {
-  const { fhirResource, fhirVersion } = props;
+const Coverage = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -138,74 +138,101 @@ const Coverage = props => {
   } = fhirResourceData;
   const issuerReferenceType = _get(issuer, 'reference');
   const issuerIdentifierType = _get(issuer, 'identifier');
+
+  const tableData = [
+    {
+      label: 'Issuer',
+      testId: 'issuer',
+      data: issuerReferenceType && <Reference fhirData={issuer} />,
+      status: issuerReferenceType,
+    },
+    {
+      label: 'Issuer',
+      testId: 'issuer',
+      data: issuerIdentifierType && <Identifier fhirData={issuer.identifier} />,
+      status: issuerIdentifierType,
+    },
+    {
+      label: 'PlanId',
+      testId: 'planId',
+      data: planId,
+      status: planId,
+    },
+    {
+      label: 'Coverage',
+      testId: '',
+      data: period && (
+        <>
+          {coverageFrom && (
+            <span data-testid="coverageFrom">from: {coverageFrom}</span>
+          )}{' '}
+          {coverageTo && <span data-testid="coverageTo">to: {coverageTo}</span>}
+        </>
+      ),
+      status: period,
+    },
+    {
+      label: 'Type of coverage',
+      testId: 'type',
+      data: type && <Coding fhirData={type} />,
+      status: type,
+    },
+    {
+      label: 'Details',
+      testId: 'details',
+      data: hasDetails && (
+        <>
+          <span>{details.planDescription}</span>
+          {details.classDescription && (
+            <>
+              {' | '}
+              <span>{details.classDescription}</span>
+            </>
+          )}
+        </>
+      ),
+      status: hasDetails,
+    },
+    {
+      label: 'Extension',
+      testId: 'extensions',
+      data:
+        hasExtension &&
+        extension.map((item, i) => {
+          const coding = Array.isArray(item.coding) ? item.coding : [];
+
+          return (
+            <span key={`item-${i}`}>
+              {item.name && <span>{item.name}</span>}
+              {coding.map((code, j) => (
+                <Coding key={`item-${j}`} fhirData={code} />
+              ))}
+            </span>
+          );
+        }),
+      status: hasExtension,
+    },
+  ];
+
   return (
     <Root name="coverage">
-      <Header>
-        {identifier && (
-          <Title>
-            Coverage <Identifier fhirData={identifier} />
-          </Title>
-        )}
-      </Header>
-      <Body>
-        {issuerReferenceType && (
-          <Value label="Issuer" data-testid="issuer">
-            <Reference fhirData={issuer} />
-          </Value>
-        )}
-        {issuerIdentifierType && (
-          <Value label="Issuer" data-testid="issuer">
-            <Identifier fhirData={issuer.identifier} />
-          </Value>
-        )}
-        {planId && (
-          <Value label="PlanId" data-testid="planId">
-            {planId}
-          </Value>
-        )}
-        {period && (
-          <Value label="Coverage">
-            {coverageFrom && (
-              <span data-testid="coverageFrom">from: {coverageFrom}</span>
-            )}{' '}
-            {coverageTo && (
-              <span data-testid="coverageTo">to: {coverageTo}</span>
-            )}
-          </Value>
-        )}
-        {type && (
-          <Value label="Type of coverage" data-testid="type">
-            <Coding fhirData={type} />
-          </Value>
-        )}
-        {hasDetails && (
-          <Value label="Details" data-testid="details">
-            <span>{details.planDescription}</span>
-            {details.classDescription && (
-              <>
-                {' | '}
-                <span>{details.classDescription}</span>
-              </>
-            )}
-          </Value>
-        )}
-        {hasExtension && (
-          <Value label="Extension" data-testid="extensions">
-            {extension.map((item, i) => {
-              const coding = Array.isArray(item.coding) ? item.coding : [];
-
-              return (
-                <span key={`item-${i}`}>
-                  {item.name && <span>{item.name}</span>}
-                  {coding.map((code, j) => (
-                    <Coding key={`item-${j}`} fhirData={code} />
-                  ))}
-                </span>
-              );
-            })}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Coverage"
+            additionalContent={
+              identifier && (
+                <Value label="Identifier">
+                  <Identifier fhirData={identifier} valueOnly noCursive />
+                </Value>
+              )
+            }
+            title="Coverage"
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -9,38 +9,64 @@ import exampleCoverageStu3 from '../../../fixtures/stu3/resources/coverage/examp
 import example2CoverageStu3 from '../../../fixtures/stu3/resources/coverage/example2.json';
 import exampleCoverageR4 from '../../../fixtures/r4/resources/coverage/example1.json';
 import example2CoverageR4 from '../../../fixtures/r4/resources/coverage/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import CoverageIcon from '../../../assets/containers/Coverage/coverage.svg';
 
 export default { title: 'Coverage' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleCoverageDstu2);
   return (
-    <Coverage fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <Coverage
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Coverage/coverage.svg')}
+    />
   );
 };
 
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', exampleCoverageStu3);
   return (
-    <Coverage fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Coverage
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={CoverageIcon}
+    />
   );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', example2CoverageStu3);
   return (
-    <Coverage fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Coverage
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const ExampleOfR4 = () => {
   const fhirResource = object('Resource', exampleCoverageR4);
-  return <Coverage fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Coverage
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={false}
+    />
+  );
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', example2CoverageR4);
-  return <Coverage fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Coverage
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
+    />
+  );
 };
 
 export const ExampleWithoutFhirVersionProperty = () => {

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

@@ -8,8 +8,80 @@ import exampleCoverage from '../../../fixtures/dstu2/resources/coverage/example1
 import exampleCoverageStu3 from '../../../fixtures/stu3/resources/coverage/example1.json';
 import example2CoverageStu3 from '../../../fixtures/stu3/resources/coverage/example2.json';
 import exampleCoverageR4 from '../../../fixtures/r4/resources/coverage/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleCoverage,
+    };
+
+    const { getByAltText } = render(<Coverage {...defaultProps} />);
+    const headerIcon = getByAltText('coverage');
+
+    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: exampleCoverage,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Coverage {...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: exampleCoverage,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Coverage/coverage.svg')}
+          alt="coverage"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Coverage {...defaultProps} />);
+    const headerIcon = getByAltText('coverage');
+
+    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: exampleCoverage,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Coverage {...defaultProps} />);
+    const headerIcon = getByAltText('coverage');
+
+    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: exampleCoverage,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Coverage {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleCoverage,
@@ -18,7 +90,7 @@ describe('should render component correctly', () => {
     const { getByTestId } = render(<Coverage {...defaultProps} />);
 
     expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain(
-      'Coverage Identifier: 12345',
+      'Coverage',
     );
     expect(getByTestId('issuer').textContent).toContain('Organization/2');
     expect(getByTestId('planId').textContent).toContain('CBI35');
@@ -35,7 +107,7 @@ describe('should render component correctly', () => {
     const { getByTestId } = render(<Coverage {...defaultProps} />);
 
     expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain(
-      'Coverage Identifier: 12345',
+      'Coverage',
     );
     expect(getByTestId('issuer').textContent).toContain('Organization/2');
     expect(getByTestId('planId').textContent).toContain('B37FC');
@@ -70,7 +142,7 @@ describe('should render component correctly', () => {
     );
 
     expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain(
-      'Coverage Identifier: 12345',
+      'Coverage',
     );
     expect(getByTestId('issuer').textContent).toContain('Organization/2');
     expect(queryAllByTestId('planId').length).toEqual(0);