fhir-react 0.3.5 → 0.3.8

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/ClaimResponse/AddedItem.js

@@ -1,27 +1,62 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { TableCell, TableRow } from '../../ui';
+import { Chevron, TableCell, TableRow } from '../../ui';
 import Coding from '../../datatypes/Coding';
 import Money from '../../datatypes/Money';
 import Item from './Item';
 
-const AddedItem = props => {
-  const { addedItem, parentSequences, level } = props;
-
+const AddedItem = ({
+  addedItem,
+  parentSequences,
+  parentId,
+  isCollapse = false,
+}) => {
   const itemSequences = [...parentSequences, addedItem.sequenceLinkId];
   const id = itemSequences.join('.');
+  const collapseId = parentSequences.length
+    ? parentId
+    : addedItem.sequenceLinkId;
+
+  const [rotate, setRotate] = useState(false);
+  const handleTableExpand = () => setRotate(!rotate);
+
+  const isExpandable =
+    parentSequences.length === 0 && addedItem.subItems.length !== 0;
 
   return (
     <>
-      <TableRow>
-        <TableCell data-testid="addedItems.sequence">{id}</TableCell>
-        <TableCell data-testid="addedItems.service">
+      <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="addedItems.sequence"
+          className="col-md-2"
+          isAlignTop
+        >
+          {id}
+        </TableCell>
+        <TableCell
+          data-testid="addedItems.service"
+          className="col-md-2"
+          isAlignTop
+        >
           {addedItem.service && <Coding fhirData={addedItem.service} />}
         </TableCell>
-        <TableCell data-testid="addedItems.fee">
+        <TableCell data-testid="addedItems.fee" className="col-md-2" isAlignTop>
           {addedItem.fee && <Money fhirData={addedItem.fee} />}
         </TableCell>
-        <TableCell data-testid="addedItems.adjudication">
+        <TableCell
+          data-testid="addedItems.adjudication"
+          className="col-md-2"
+          isAlignTop
+        >
           {addedItem.adjudication.map((adjudication, idx) => (
             <div
               key={idx}
@@ -36,13 +71,28 @@ const AddedItem = props => {
             </div>
           ))}
         </TableCell>
+        {isExpandable ? (
+          <TableCell className="col-md-2" isAlignTop>
+            <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>
       {addedItem.subItems.map((subItem, idx) => (
         <Item
           key={idx}
           addedItem={subItem}
-          level={level + 1}
           parentSequences={itemSequences}
+          parentId={collapseId}
+          isCollapse
         />
       ))}
     </>

package/src/components/resources/ClaimResponse/AddedItems.js

@@ -7,24 +7,20 @@ const AddedItems = props => {
   const { addedItems } = props;
 
   return (
-    <ValueSection label="Added Items" data-testid="addedItems">
+    <ValueSection label="Added Items" data-testid="addedItems" marginTop>
       <Table>
         <thead>
           <TableRow>
             <TableHeader>ID</TableHeader>
             <TableHeader>Service</TableHeader>
             <TableHeader>Fee</TableHeader>
-            <TableHeader expand>Adjudication</TableHeader>
+            <TableHeader>Adjudication</TableHeader>
+            <TableHeader></TableHeader>
           </TableRow>
         </thead>
-        <tbody>
+        <tbody className="border-top-0">
           {addedItems.map((item, idx) => (
-            <AddedItem
-              key={idx}
-              addedItem={item}
-              level={0}
-              parentSequences={[]}
-            />
+            <AddedItem key={idx} addedItem={item} parentSequences={[]} />
           ))}
         </tbody>
       </Table>

package/src/components/resources/ClaimResponse/ClaimResponse.js

@@ -21,11 +21,11 @@ import {
   Header,
   MissingValue,
   Root,
-  Title,
-  Value,
   ValueSection,
   BadgeSecondary,
+  ValueSectionItem,
 } from '../../ui';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id');
@@ -285,8 +285,7 @@ const hasPaymentInfo = payment => {
   return Object.values(payment).filter(item => item).length > 0;
 };
 
-const ClaimResponse = props => {
-  const { fhirVersion, fhirResource } = props;
+const ClaimResponse = ({ fhirVersion, fhirResource, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -314,88 +313,143 @@ const ClaimResponse = props => {
   const hasAddedItems = addedItems.length > 0;
   const hasPayment = hasPaymentInfo(payment);
 
+  const tableData = [
+    {
+      label: 'Created At',
+      testId: 'created',
+      data: created && <DateType fhirData={created} isBlack />,
+      status: created,
+    },
+    {
+      label: 'Request claim',
+      testId: 'request',
+      data: requestReference && <Reference fhirData={requestReference} />,
+      status: requestReference,
+    },
+    {
+      label: 'Disposition',
+      testId: 'disposition',
+      data: disposition,
+      status: disposition,
+    },
+    {
+      label: 'Total cost',
+      testId: 'totalCost',
+      data: totalCost && <Money fhirData={totalCost} />,
+      status: totalCost,
+    },
+    {
+      label: 'Total benefit',
+      testId: 'totalBenefit',
+      data: totalBenefit && <Money fhirData={totalBenefit} />,
+      status: totalBenefit,
+    },
+  ];
+
+  const paymentData = [
+    {
+      label: 'Type',
+      testId: 'payment.type',
+      data: payment.typeCoding ? (
+        <Coding fhirData={payment.typeCoding} />
+      ) : (
+        <MissingValue />
+      ),
+      status: true,
+    },
+    {
+      label: 'Amount',
+      testId: 'payment.amount',
+      data: payment.amount ? (
+        <Money fhirData={payment.amount} />
+      ) : (
+        <MissingValue />
+      ),
+      status: payment.amount,
+    },
+    {
+      label: 'Date',
+      testId: 'payment.date',
+      data: payment.date ? (
+        <DateType fhirData={payment.date} isBlack />
+      ) : (
+        <MissingValue />
+      ),
+      status: payment.date,
+    },
+    {
+      label: 'Reference',
+      testId: 'payment.ref',
+      data: payment.ref ? (
+        <Identifier fhirData={payment.ref} />
+      ) : (
+        <MissingValue />
+      ),
+      status: payment.ref,
+    },
+  ];
+
   return (
     <Root name="ClaimResponse">
-      <Header>
-        <Title>Claim response #{id}</Title>
-        {outcome && <Badge data-testid="outcome">{outcome}</Badge>}
-        {status && (
-          <BadgeSecondary data-testid="status">{status}</BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {created && (
-          <Value label="Created At" data-testid="created">
-            <DateType fhirData={created} />
-          </Value>
-        )}
-        {requestReference && (
-          <Value label="Request claim" data-testid="request">
-            <Reference fhirData={requestReference} />
-          </Value>
-        )}
-        {disposition && (
-          <Value label="Disposition" data-testid="disposition">
-            {disposition}
-          </Value>
-        )}
-        {totalCost && (
-          <Value label="Total cost" data-testid="totalCost">
-            <Money fhirData={totalCost} />
-          </Value>
-        )}
-        {totalBenefit && (
-          <Value label="Total benefit" data-testid="totalBenefit">
-            <Money fhirData={totalBenefit} />
-          </Value>
-        )}
-        {isNotEmptyArray(totalCostsArr) && (
-          <ValueSection label="Total" data-testid="totalSection">
-            {totalCostsArr.map(
-              ({ category, amount }, i) =>
-                category && (
-                  <Value label={category} key={`total-value-${i}`}>
-                    <Money fhirData={amount} />
-                  </Value>
-                ),
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="ClaimResponse"
+            title={`Claim response #${id}`}
+            badges={
+              <>
+                {outcome && <Badge data-testid="outcome">{outcome}</Badge>}
+                {status && (
+                  <BadgeSecondary data-testid="status">{status}</BadgeSecondary>
+                )}
+              </>
+            }
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {isNotEmptyArray(totalCostsArr) && (
+              <ValueSection label="Total" data-testid="totalSection" marginTop>
+                {totalCostsArr.map(
+                  ({ category, amount }, i) =>
+                    category && (
+                      <ValueSectionItem
+                        label={category}
+                        key={`total-value-${i}`}
+                      >
+                        <Money fhirData={amount} />
+                      </ValueSectionItem>
+                    ),
+                )}
+              </ValueSection>
+            )}
+            {hasPayment && (
+              <ValueSection
+                label="Payment"
+                data-testid="paymentSection"
+                marginTop
+              >
+                {paymentData.map(
+                  (item, index) =>
+                    item.status && (
+                      <ValueSectionItem
+                        key={`payment-item-${index}`}
+                        label={item.label}
+                        data-testid={item.testId}
+                      >
+                        {item.data}
+                      </ValueSectionItem>
+                    ),
+                )}
+              </ValueSection>
             )}
-          </ValueSection>
-        )}
-        {hasPayment && (
-          <ValueSection label="Payment" data-testid="paymentSection">
-            <Value label="Type" data-testid="payment.type">
-              {payment.typeCoding ? (
-                <Coding fhirData={payment.typeCoding} />
-              ) : (
-                <MissingValue />
-              )}
-            </Value>
-            <Value label="Amount" data-testid="payment.amount">
-              {payment.amount ? (
-                <Money fhirData={payment.amount} />
-              ) : (
-                <MissingValue />
-              )}
-            </Value>
-            <Value label="Date" data-testid="payment.date">
-              {payment.date ? (
-                <DateType fhirData={payment.date} />
-              ) : (
-                <MissingValue />
-              )}
-            </Value>
-            <Value label="Reference" data-testid="payment.ref">
-              {payment.ref ? (
-                <Identifier fhirData={payment.ref} />
-              ) : (
-                <MissingValue />
-              )}
-            </Value>
-          </ValueSection>
-        )}
-        {hasAddedItems && <AddedItems addedItems={addedItems} />}
-        {hasItems && <Items items={items} />}
-      </Body>
+            {hasAddedItems && <AddedItems addedItems={addedItems} />}
+            {hasItems && <Items items={items} />}
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -10,6 +10,8 @@ import example2ClaimResponseSTU3 from '../../../fixtures/stu3/resources/claimRes
 import example1ClaimResponseR4 from '../../../fixtures/r4/resources/claimResponse/example1.json';
 import example2ClaimResponseR4 from '../../../fixtures/r4/resources/claimResponse/example2.json';
 import example3ClaimResponseR4 from '../../../fixtures/r4/resources/claimResponse/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import ClaimResponseIcon from '../../../assets/containers/ClaimResponse/claim-response.svg';
 
 export default { title: 'Claim Response' };
 
@@ -19,6 +21,7 @@ export const ExampleDSTU2 = () => {
     <ClaimResponse
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/ClaimResponse/claim-response.svg')}
     />
   );
 };
@@ -29,6 +32,7 @@ export const Example1OfSTU3 = () => {
     <ClaimResponse
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={ClaimResponseIcon}
     />
   );
 };
@@ -38,6 +42,7 @@ export const Example2OfSTU3 = () => {
     <ClaimResponse
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -45,13 +50,21 @@ export const Example2OfSTU3 = () => {
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', example1ClaimResponseR4);
   return (
-    <ClaimResponse fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <ClaimResponse
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={false}
+    />
   );
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', example2ClaimResponseR4);
   return (
-    <ClaimResponse fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <ClaimResponse
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
+    />
   );
 };
 export const Example3OfR4 = () => {