fhir-react 0.2.4 → 0.3.0

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

@@ -1,35 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _get from 'lodash/get';
-import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-import fhirVersions from '../fhirResourceVersions';
-
 import {
-  Root,
-  Header,
-  Title,
-  Value,
+  Badge,
   Body,
-  ValueSection,
+  Header,
+  MissingValue,
+  Root,
   Table,
-  TableRow,
   TableCell,
-  MissingValue,
-  Badge,
+  TableRow,
+  Value,
+  ValueSection,
 } from '../../ui';
+
+import CareTeam from './CareTeam';
+import CodeableConcept from '../../datatypes/CodeableConcept';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
-import Money from '../../datatypes/Money';
-import Reference from '../../datatypes/Reference';
-import Period from '../../datatypes/Period';
-import TotalSum from './TotalSum';
 import Diagnosis from './Diagnosis';
-import SupportingInfo from './SupportingInfo';
-import Items from './Items';
 import Identifier from '../../datatypes/Identifier/Identifier';
-import CareTeam from './CareTeam';
-import CodeableConcept from '../../datatypes/CodeableConcept';
+import Items from './Items';
+import Money from '../../datatypes/Money';
+import Period from '../../datatypes/Period';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
 import Related from './Related';
+import SupportingInfo from './SupportingInfo';
+import TotalSum from './TotalSum';
+import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import _get from 'lodash/get';
+import fhirVersions from '../fhirResourceVersions';
+import Accordion from '../../containers/Accordion';
+import TotalGraph from './TotalGraph';
+import PriceLabel from './PriceLabel';
+import { TableHeader } from '../../ui';
 
 /**
  * @typedef ExplanationOfBenefitServiceItem
@@ -275,191 +278,259 @@ const ExplanationOfBenefit = props => {
     related,
   } = fhirResourceData;
 
+  const getRowItem = (item, index) =>
+    ('isLoaded' in item ? item.isLoaded : item.data) && (
+      <div
+        key={`details-item-${index}`}
+        className="col-12 col-sm-6 col-md-4 text-wrap"
+      >
+        <Value label={item.label} data-testid={item.testId} dirColumn>
+          {item.data}
+        </Value>
+      </div>
+    );
+
+  const getHeaderPrice = () => {
+    if (totalCost) {
+      return <PriceLabel totalCost={totalCost} />;
+    }
+  };
+
+  const EOBRowData = [
+    {
+      label: 'Type',
+      testId: 'type',
+      data:
+        hasType &&
+        type.map((typeItem, i) => (
+          <Coding key={`item-${i}`} fhirData={typeItem} />
+        )),
+      isLoaded: hasType,
+    },
+    {
+      label: 'Identifier',
+      testId: 'identifier',
+      data:
+        identifier &&
+        identifier.map((id, index) => (
+          <div key={`identifier-${index}`}>
+            <Identifier fhirData={id} />
+          </div>
+        )),
+      isLoaded: identifier,
+    },
+    {
+      label: 'Outcome',
+      testId: 'outcome',
+      data: outcome,
+    },
+    {
+      label: 'Insurer',
+      testId: 'insurer',
+      data: <Reference fhirData={insurer} />,
+      isLoaded: hasInsurer,
+    },
+    {
+      label: 'Claim provider',
+      testId: 'provider',
+      data: <Reference fhirData={provider} />,
+      isLoaded: provider,
+    },
+    {
+      label: 'Total',
+      testId: 'totalSum',
+      data: <TotalSum fhirData={total} />,
+      isLoaded: hasTotal,
+    },
+    {
+      label: 'Payment',
+      testId: 'payment',
+      data: <Money fhirData={payment} />,
+      isLoaded: payment,
+    },
+    {
+      label: 'Payee',
+      testId: 'payee',
+      data: (
+        <>
+          {payeeType && <CodeableConcept fhirData={payeeType} />}
+          {payeeParty && <Reference fhirData={payeeParty} />}
+        </>
+      ),
+      isLoaded: payeeType || payeeParty,
+    },
+    {
+      label: 'Billable period',
+      testId: 'billablePeriod',
+      data: <Period fhirData={billablePeriod} />,
+      isLoaded: billablePeriod,
+    },
+    {
+      label: 'Purpose',
+      testId: 'purpose',
+      data: useCode,
+    },
+    {
+      label: 'Patient',
+      testId: 'patient',
+      data: <Reference fhirData={patient} />,
+      isLoaded: patient,
+    },
+    {
+      label: 'Insurance',
+      testId: 'insurance',
+      data: <Reference fhirData={insurance} />,
+      isLoaded: insurance,
+    },
+    {
+      label: 'Related',
+      testId: 'related',
+      data: <Related fhirData={related} />,
+      isLoaded: related,
+    },
+  ];
+
   return (
     <Root name="ExplanationOfBenefit">
-      <Header>
-        <Title>{disposition}</Title>
-        {resourceStatus && <Badge>{resourceStatus}</Badge>}
-      </Header>
-      <Body>
-        {hasType && (
-          <Value label="Type" data-testid="type">
-            {type.map((typeItem, i) => (
-              <Coding key={`item-${i}`} fhirData={typeItem} />
-            ))}
-          </Value>
-        )}
-        {created && (
-          <Value label="Created" data-testid="created">
-            {created}
-          </Value>
-        )}
-        {identifier && (
-          <Value label="Identifier" data-testid="identifier">
-            {identifier.map((id, index) => (
-              <div key={`identifier-${index}`}>
-                <Identifier fhirData={id} />
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="ExplanationOfBenefit"
+            title={
+              disposition ? disposition : `Explanation Of Benefit (default)`
+            }
+            badges={getHeaderPrice()}
+            rightAdditionalContent={
+              resourceStatus && <Badge>{resourceStatus}</Badge>
+            }
+            additionalContent={
+              created &&
+              created !== 'undefined' && (
+                <Value label="Start date" data-testid="created">
+                  <Date fhirData={created} isBlack />
+                </Value>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            <ValueSection
+              label="Details"
+              data-testid="details"
+              className="mt-3"
+            >
+              <div className="row gy-sm-3">
+                {EOBRowData.map((x, index) => getRowItem(x, index))}
               </div>
-            ))}
-          </Value>
-        )}
-        {outcome && (
-          <Value label="Outcome" data-testid="outcome">
-            {outcome}
-          </Value>
-        )}
-        {hasInsurer && (
-          <Value label="Insurer" data-testid="insurer">
-            <Reference fhirData={insurer} />
-          </Value>
-        )}
-        {provider && (
-          <Value label="Claim provider" data-testid="provider">
-            <Reference fhirData={provider} />
-          </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>
-        )}
-        {hasTotal && (
-          <Value label="Total" data-testid="totalSum">
-            <TotalSum fhirData={total} />
-          </Value>
-        )}
-        {payment && (
-          <Value label="Payment" data-testid="payment">
-            <Money fhirData={payment} />
-          </Value>
-        )}
-        {(payeeType || payeeParty) && (
-          <Value label="Payee" data-testid="payee">
-            {payeeType && <CodeableConcept fhirData={payeeType} />}
-            {payeeParty && <Reference fhirData={payeeParty} />}
-          </Value>
-        )}
-        {billablePeriod && (
-          <Value label="Billable period" data-testid="billablePeriod">
-            <Period fhirData={billablePeriod} />
-          </Value>
-        )}
-        {useCode && (
-          <Value label="Purpose" data-testid="purpose">
-            {useCode}
-          </Value>
-        )}
-        {patient && (
-          <Value label="Patient" data-testid="patient">
-            <Reference fhirData={patient} />
-          </Value>
-        )}
-        {insurance && (
-          <Value label="Insurance" data-testid="insurance">
-            <Reference fhirData={insurance} />
-          </Value>
-        )}
-        {related && (
-          <Value label="Related" data-testid="related">
-            <Related fhirData={related} />
-          </Value>
-        )}
-        {hasDiagnosis && <Diagnosis fhirData={diagnosis} />}
-        {hasSupportingInfo && <SupportingInfo fhirData={supportingInfo} />}
+            </ValueSection>
+            {hasDiagnosis && <Diagnosis fhirData={diagnosis} />}
+            {hasSupportingInfo && <SupportingInfo fhirData={supportingInfo} />}
+            {totalCost && totalBenefit && (
+              <TotalGraph fhirData={{ totalCost, totalBenefit }} />
+            )}
 
-        {hasServices && (
-          <ValueSection label="Services" data-testid="hasServices">
-            <Table>
-              <thead>
-                <TableRow>
-                  <TableCell>Service</TableCell>
-                  <TableCell>Service date</TableCell>
-                  <TableCell>Quantity</TableCell>
-                  <TableCell>Item cost</TableCell>
-                </TableRow>
-              </thead>
-              <tbody>
-                {services.map((serviceItem, i) => {
-                  return (
-                    <TableRow key={`serviceItem-${i}`}>
-                      <TableCell>
-                        <Coding fhirData={serviceItem.coding} />
-                      </TableCell>
-                      <TableCell>
-                        {serviceItem.servicedDate ? (
-                          <Date fhirData={serviceItem.servicedDate} />
-                        ) : (
-                          <MissingValue />
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        {Number.isFinite(Number(serviceItem.quantity)) ? (
-                          serviceItem.quantity
-                        ) : (
-                          <MissingValue />
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        {Number.isFinite(
-                          Number(_get(serviceItem, 'itemCost.value')),
-                        ) ? (
-                          <Money fhirData={serviceItem.itemCost} />
-                        ) : (
-                          <MissingValue />
-                        )}
-                      </TableCell>
+            {hasServices && (
+              <ValueSection
+                label="Services"
+                data-testid="hasServices"
+                marginTop
+              >
+                <Table>
+                  <thead>
+                    <TableRow>
+                      <TableHeader>Service</TableHeader>
+                      <TableHeader>Service date</TableHeader>
+                      <TableHeader>Quantity</TableHeader>
+                      <TableHeader>Item cost</TableHeader>
                     </TableRow>
-                  );
-                })}
-              </tbody>
-            </Table>
-          </ValueSection>
-        )}
-        {hasInformation && (
-          <ValueSection label="Information" data-testid="hasInformation">
-            <Table>
-              <thead>
-                <TableRow>
-                  <TableCell />
-                  <TableCell>Status</TableCell>
-                </TableRow>
-              </thead>
-              <tbody>
-                {information.map((informationItem, i) => {
-                  const infoTitle = _get(informationItem, 'category.coding.0');
-                  const infoStatus = _get(informationItem, 'code.coding.0');
-
-                  return (
-                    <TableRow key={`serviceItem-${i}`}>
-                      <TableCell>
-                        {infoTitle ? (
-                          <Coding fhirData={infoTitle} />
-                        ) : (
-                          <MissingValue />
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        {infoStatus ? (
-                          <Coding fhirData={infoStatus} />
-                        ) : (
-                          <MissingValue />
-                        )}
-                      </TableCell>
+                  </thead>
+                  <tbody className="border-top-0">
+                    {services.map((serviceItem, i) => {
+                      return (
+                        <TableRow key={`serviceItem-${i}`}>
+                          <TableCell data-testid="explanation.service">
+                            <Coding fhirData={serviceItem.coding} />
+                          </TableCell>
+                          <TableCell data-testid="explanation.servicedDate">
+                            {serviceItem.servicedDate ? (
+                              <Date fhirData={serviceItem.servicedDate} />
+                            ) : (
+                              <MissingValue />
+                            )}
+                          </TableCell>
+                          <TableCell data-testid="explanation.quantity">
+                            {Number.isFinite(Number(serviceItem.quantity)) ? (
+                              serviceItem.quantity
+                            ) : (
+                              <MissingValue />
+                            )}
+                          </TableCell>
+                          <TableCell data-testid="explanation.itemCost">
+                            {Number.isFinite(
+                              Number(_get(serviceItem, 'itemCost.value')),
+                            ) ? (
+                              <Money fhirData={serviceItem.itemCost} />
+                            ) : (
+                              <MissingValue />
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </tbody>
+                </Table>
+              </ValueSection>
+            )}
+            {hasInformation && (
+              <ValueSection
+                label="Information"
+                data-testid="hasInformation"
+                marginTop
+              >
+                <Table>
+                  <thead>
+                    <TableRow>
+                      <TableHeader />
+                      <TableHeader>Status</TableHeader>
                     </TableRow>
-                  );
-                })}
-              </tbody>
-            </Table>
-          </ValueSection>
-        )}
-        {hasItems && <Items fhirData={items} />}
-        {hasCareTeam && <CareTeam fhirData={careTeam} />}
-      </Body>
+                  </thead>
+                  <tbody className="border-top-0">
+                    {information.map((informationItem, i) => {
+                      const infoTitle = _get(
+                        informationItem,
+                        'category.coding.0',
+                      );
+                      const infoStatus = _get(informationItem, 'code.coding.0');
+
+                      return (
+                        <TableRow key={`serviceItem-${i}`}>
+                          <TableCell>
+                            {infoTitle ? (
+                              <Coding fhirData={infoTitle} />
+                            ) : (
+                              <MissingValue />
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            {infoStatus ? (
+                              <Coding fhirData={infoStatus} />
+                            ) : (
+                              <MissingValue />
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </tbody>
+                </Table>
+              </ValueSection>
+            )}
+            {hasItems && <Items fhirData={items} />}
+            {hasCareTeam && <CareTeam fhirData={careTeam} />}
+          </Body>
+        }
+      />
     </Root>
   );
 };