fhir-react 0.3.12 → 0.3.13

package/build/style.css

@@ -28,4 +28,4 @@
 .fhir-resource__Questionnaire-list{list-style:none;padding:2px;margin:2px}.fhir-resource__Questionnaire-list-title{padding:2px 2px 8px 2px;font-weight:bold}.fhir-resource__Questionnaire-list-title-question{background:#f8f9fa;align-items:center;margin-bottom:56px;padding-left:16px;border-radius:4px;color:#adb5bd}.fhir-resource__Questionnaire-questions-list{list-style:none;padding-left:0;display:block;color:#adb5bd}.fhir-resource__Questionnaire-questions-list li{display:block;margin-bottom:56px}.fhir-resource__Questionnaire-questions-list-element{background:#f8f9fa;border-radius:4px;width:100%;padding-left:16px;margin-bottom:56px}.fhir-resource__Questionnaire-questions-list li:last-child{border-bottom:none}.fhir-resource__Questionnaire-questions-list-item-details{font-size:80%}.fhir-resource__Questionnaire-questions-list-item-details-el{display:inline-block;margin-right:15px}
 .fhir-resource__QuestionnaireResponse-list{list-style:none;padding:0;margin:0}.fhir-resource__QuestionnaireResponse-list:first-of-type{padding-top:20px}.fhir-resource__QuestionnaireResponse-list-title{padding:2px 2px 8px 2px;font-weight:bold}.fhir-resource__QuestionnaireResponse-list-title-question{background:#f8f9fa;align-items:center;margin-bottom:56px;padding-left:16px;border-radius:4px;color:#adb5bd}.fhir-resource__QuestionnaireResponse-questions-list{list-style:none;padding-left:0;display:block;color:#adb5bd}.fhir-resource__QuestionnaireResponse-questions-list li{display:block;margin-bottom:56px}.fhir-resource__QuestionnaireResponse-questions-list-element{background:#f8f9fa;border-radius:4px;width:100%;padding-left:16px;margin-bottom:56px}.fhir-resource__QuestionnaireResponse-questions-list li:last-child{border-bottom:none}.fhir-resource__QuestionnaireResponse-questions-list-item-details{margin:-30px 0}.fhir-resource__QuestionnaireResponse-questions-list-item-details-el{display:inline-block;color:#000;margin-right:15px;margin-left:20px}
 .fhir-container__CodeBlock{padding:1.5rem;color:#f8f9fa;background-color:#343a40;border-radius:.25rem;word-break:break-word;font-family:monospace;font-size:16px;overflow-x:scroll}
-.fhir-container__ResourceContainer__card{border:0;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:.25rem}.fhir-container__ResourceContainer__card-body{flex:1 1 auto;padding:1.25rem}.fhir-container__ResourceContainer__json-button-wrapper{position:absolute;right:2rem;top:.5rem}.fhir-container__ResourceContainer__json-button-wrapper-accordion{margin-top:10px}.fhir-container__ResourceContainer__json--visible{display:block;padding-top:10px}.fhir-container__ResourceContainer__json--hidden{display:none}.fhir-container__ResourceContainer__json-button{color:#6c757d;border-color:#6c757d;cursor:pointer;padding:.15rem .5rem;font-size:.875rem;line-height:1rem;border-radius:.2rem;display:inline-block;font-weight:400;text-align:center;vertical-align:middle;user-select:none;border:1px solid #6c6c6c;transition:all .15s ease-in-out}.fhir-container__ResourceContainer__json-button:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}
+.fhir-container__ResourceContainer__card{border:0;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:.25rem}.fhir-container__ResourceContainer__card-body{flex:1 1 auto;padding:1.25rem}.fhir-container__ResourceContainer__json-button-wrapper{padding-right:5px}.fhir-container__ResourceContainer__json-button-wrapper-accordion{margin-top:10px}.fhir-container__ResourceContainer__json--visible{display:block;padding-top:10px}.fhir-container__ResourceContainer__json--hidden{display:none}.fhir-container__ResourceContainer__json-button{color:#6c757d;border-color:#6c757d;cursor:pointer;padding:.15rem .5rem;font-size:.875rem;line-height:1rem;border-radius:.2rem;display:inline-block;font-weight:400;text-align:center;vertical-align:middle;user-select:none;border:1px solid #6c6c6c;transition:all .15s ease-in-out}.fhir-container__ResourceContainer__json-button:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

package/src/components/containers/Accordion/Accordion.js

@@ -68,7 +68,6 @@ const Accordion = props => {
 
   return (
     <div className="fhir-container__Accordion accordion">
-      {typeof rawOnClick === 'function' && !isRawInAccordion && rawButton}
       <div className="fhir-container__Accordion__body accordion-body">
         <div className="fhir-container__Accordion__body-data accordion-item border-1 shadow-sm">
           <div
@@ -76,9 +75,7 @@ const Accordion = props => {
             id="flush-headingOne"
           >
             <button
-              className={`fhir-container__Accordion__header-button w-100 p-0 border-0 rounded-1 collapsed text-dark bg-white shadow-none point ${
-                isAccordionOpenable() ? '' : 'pe-none'
-              }`}
+              className={`fhir-container__Accordion__header-button w-100 p-0 border-0 rounded-1 collapsed text-dark bg-white shadow-none point`}
               type="button"
               data-bs-target={`#${accordionId}`}
               data-bs-toggle={
@@ -95,6 +92,10 @@ const Accordion = props => {
               <div className="fhir-container__Accordion__header-text d-flex w-100 justify-content-start position-relative">
                 {React.cloneElement(headerContent, {
                   isAccordionOpenable: isAccordionOpenable(),
+                  rawButton:
+                    typeof rawOnClick === 'function' &&
+                    !isRawInAccordion &&
+                    rawButton,
                 })}
                 {typeof onClick !== 'function' && getChevron()}
               </div>

package/src/components/containers/ResourceContainer/ResourceContainer.css

@@ -15,9 +15,7 @@
 }
 
 .fhir-container__ResourceContainer__json-button-wrapper {
-  position: absolute;
-  right: 2rem;
-  top: 0.5rem;
+  padding-right: 5px;
 }
 
 .fhir-container__ResourceContainer__json-button-wrapper-accordion {

package/src/components/datatypes/Date/Date.js

@@ -7,6 +7,7 @@ const Date = ({ fhirData, isBlack, testId, className = '' }) => {
   }
   const locale = 'en-US';
   const dateValue = formatDate(String(fhirData).slice(0, 10), locale);
+
   return (
     <span
       data-testid={testId || 'providedDate'}

package/src/components/datatypes/DatePeriod/DatePeriod.js

@@ -20,13 +20,13 @@ const DatePeriod = props => {
   return (
     <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-start">
       {periodBeginDate && (
-        <div className="d-flex flex-wrap">
+        <div className="d-flex flex-wrap align-items-center">
           <SingleDateSpan label={periodBeginLabel} />
           <Date testId={periodBeginTestId} isBlack fhirData={periodBeginDate} />
         </div>
       )}
       {periodEndDate && (
-        <div className="ms-sm-4 d-flex flex-wrap">
+        <div className="ms-sm-4 d-flex flex-wrap align-items-center">
           <SingleDateSpan label={periodEndLabel} />
           <Date testId={periodEndTestId} isBlack fhirData={periodEndDate} />
         </div>

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

@@ -88,7 +88,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('title').textContent).toContain('Patient');
 
-    expect(getByTestId('date').textContent).toEqual('1/29/2017');
+    expect(getByTestId('date').textContent).toEqual('01/29/2017');
 
     expect(getByTestId('event').textContent).toContain('304386008');
 
@@ -108,7 +108,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('title').textContent).toContain('Patient');
 
-    expect(getByTestId('date').textContent).toEqual('1/29/2017');
+    expect(getByTestId('date').textContent).toEqual('01/29/2017');
 
     expect(getByTestId('hasSeriousness').textContent).toContain('Non-serious');
 

package/src/components/resources/AllergyIntolerance/AllergyIntolerance.js

@@ -13,6 +13,7 @@ import Annotation from '../../datatypes/Annotation';
 
 import { Root, Header, Badge, BadgeSecondary, Body } from '../../ui';
 import CodeableConcept from '../../datatypes/CodeableConcept';
+import { getResourceDate } from '../../../utils/getResourceDate';
 
 const commonDTO = fhirResource => {
   const hasReaction = _get(fhirResource, 'reaction.0.manifestation');
@@ -221,6 +222,19 @@ const AllergyIntolerance = ({
     },
   ];
 
+  const allergyDatesPaths = [
+    'meta.lastUpdated',
+    'onsetPeriod.start',
+    'onset',
+    'reaction[0].onset',
+    'recordedDate',
+    'onsetDateTime',
+    'assertedDate',
+  ];
+
+  const headerDate =
+    getResourceDate(fhirResource, allergyDatesPaths) || recordedDate;
+
   return (
     <Root name="AllergyIntolerance">
       <Accordion
@@ -231,9 +245,10 @@ const AllergyIntolerance = ({
             title={title}
             icon={fhirIcons}
             rightAdditionalContent={
-              recordedDate && (
+              headerDate && (
                 <BadgeSecondary data-testid="recordedDate">
-                  recorded on <Date fhirData={recordedDate} />
+                  recorded on&nbsp;
+                  <Date fhirData={headerDate} />
                 </BadgeSecondary>
               )
             }

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

@@ -93,7 +93,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('unconfirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('3/1/2010');
+    expect(getByTestId('recordedDate').textContent).toContain('03/01/2010');
 
     expect(getByTestId('substance').textContent).toContain('PENICILLIN');
 
@@ -117,7 +117,9 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
+    expect(getByTestId('recordedDate').textContent).toContain(
+      'recorded on 06/12/2012',
+    );
 
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -149,7 +151,9 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('Confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
+    expect(getByTestId('recordedDate').textContent).toContain(
+      'recorded on 06/12/2012',
+    );
 
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -185,7 +189,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('Confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('8/6/2015');
+    expect(getByTestId('recordedDate').textContent).toContain('08/06/2015');
 
     expect(getByTestId('patient').textContent).toEqual('Patient/mom');
 

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

@@ -115,7 +115,7 @@ describe('should render component correctly', () => {
       'Peter James Chalmers',
     );
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
-    expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
+    expect(getByTestId('periodEnd').textContent).toEqual('06/01/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
       'Management of Type 2 Diabetes',
     );
@@ -141,7 +141,7 @@ describe('should render component correctly', () => {
       'Peter James Chalmers',
     );
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
-    expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
+    expect(getByTestId('periodEnd').textContent).toEqual('06/01/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
       'Management of Type 2 Diabetes',
     );
@@ -162,8 +162,8 @@ describe('should render component correctly', () => {
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('goals').textContent).toEqual('#goal');
     expect(getByTestId('subject').textContent).toContain('Eve Everywoman');
-    expect(getByTestId('periodStart').textContent).toEqual('1/1/2013');
-    expect(getByTestId('periodEnd').textContent).toEqual('10/1/2013');
+    expect(getByTestId('periodStart').textContent).toEqual('01/01/2013');
+    expect(getByTestId('periodEnd').textContent).toEqual('10/01/2013');
   });
 
   it('should fire custom onClick function', () => {

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

@@ -97,7 +97,7 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('periodStart')).toBeNull();
-    expect(getByTestId('periodEnd').textContent).toEqual('1/1/2013');
+    expect(getByTestId('periodEnd').textContent).toEqual('01/01/2013');
     expect(getByTestId('category').textContent.trim()).toEqual('(encounter)');
     expect(getByTestId('subject').textContent).toContain(
       'Peter James Chalmers',
@@ -126,7 +126,7 @@ describe('should render the CareTeam component properly', () => {
     const periodEnds = getAllByTestId('participant.periodEnd').map(
       n => n.textContent,
     );
-    expect(periodEnds).toEqual(['-', '1/1/2013']);
+    expect(periodEnds).toEqual(['-', '01/01/2013']);
   });
 
   it('should render participants with STU3 source data when structure source data of Participants Role is coding array', () => {
@@ -156,7 +156,7 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('periodStart')).toBeNull();
-    expect(getByTestId('periodEnd').textContent).toEqual('1/1/2013');
+    expect(getByTestId('periodEnd').textContent).toEqual('01/01/2013');
     expect(getByTestId('encounter').textContent).toEqual('Encounter/example');
     expect(getByTestId('category').textContent).toContain(
       'Encounter-focused care team',
@@ -188,7 +188,7 @@ describe('should render the CareTeam component properly', () => {
     const periodEnds = getAllByTestId('participant.periodEnd').map(
       n => n.textContent,
     );
-    expect(periodEnds).toEqual(['-', '1/1/2013']);
+    expect(periodEnds).toEqual(['-', '01/01/2013']);
   });
 
   it('should fire custom onClick function', () => {

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

@@ -95,7 +95,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('complete');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');
@@ -117,7 +117,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('complete');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');
@@ -184,7 +184,7 @@ describe('should render the Claim component properly', () => {
     };
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
-    expect(getByTestId('accident.date').textContent).toEqual('7/9/2014');
+    expect(getByTestId('accident.date').textContent).toEqual('07/09/2014');
     expect(getByTestId('accident.type').textContent).toContain(
       'Sporting Accident',
     );
@@ -223,7 +223,7 @@ describe('should render the Claim component properly', () => {
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
     expect(getByTestId('employmentImpacted').textContent).toEqual(
-      '8/16/2014 - 8/16/2014',
+      '08/16/2014 - 08/16/2014',
     );
   });
 
@@ -235,7 +235,7 @@ describe('should render the Claim component properly', () => {
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
     expect(getByTestId('hospitalization').textContent).toEqual(
-      '8/15/2014 - 8/16/2014',
+      '08/15/2014 - 08/16/2014',
     );
   });
 
@@ -323,7 +323,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('claim');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');

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

@@ -99,7 +99,7 @@ describe('should render the ClaimResponse component properly', () => {
 
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('outcome').textContent).toEqual('complete');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -116,7 +116,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
+    expect(getByTestId('payment.date').textContent).toEqual('08/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');
@@ -152,7 +152,7 @@ describe('should render the ClaimResponse component properly', () => {
 
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('outcome').textContent).toEqual('complete');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -169,7 +169,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
+    expect(getByTestId('payment.date').textContent).toEqual('08/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');
@@ -245,7 +245,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('outcome')).toBeNull();
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -265,7 +265,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
+    expect(getByTestId('payment.date').textContent).toEqual('08/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');

package/src/components/resources/Condition/Condition.js

@@ -9,6 +9,7 @@ import Reference from '../../datatypes/Reference';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
 import fhirVersions from '../fhirResourceVersions';
+import { getResourceDate } from '../../../utils/getResourceDate';
 
 const commonDTO = fhirResource => {
   const codeText =
@@ -98,7 +99,6 @@ const Condition = ({
   const {
     codeText,
     severityText,
-    onsetDateTime,
     hasAsserter,
     asserter,
     hasBodySite,
@@ -122,6 +122,28 @@ const Condition = ({
     },
   ];
 
+  const conditionStartDatesPaths = [
+    'meta.lastUpdated',
+    'onsetPeriod.start',
+    'onsetDateTime',
+    'recordedDate',
+    'dateRecorded',
+    'assertedDate',
+  ];
+
+  const conditionEndDatesPaths = [
+    'meta.lastUpdated',
+    'abatementPeriod.end',
+    'abatementDateTime',
+  ];
+
+  const headerStartDate = getResourceDate(
+    fhirResource,
+    conditionStartDatesPaths,
+  );
+  const headerEndDate =
+    getResourceDate(fhirResource, conditionEndDatesPaths) || dateRecorded;
+
   return (
     <Root name="condition">
       <Accordion
@@ -131,10 +153,10 @@ const Condition = ({
             additionalContent={
               <DatePeriod
                 periodBeginLabel="Onset Date"
-                periodBeginDate={onsetDateTime}
+                periodBeginDate={headerStartDate}
                 periodBeginTestId="onsetDate"
                 periodEndLabel="Date recorded"
-                periodEndDate={dateRecorded}
+                periodEndDate={headerEndDate}
                 periodEndTestId="dateRecorded"
               />
             }

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

@@ -107,7 +107,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('clinicalStatus').textContent).toEqual('active');
     expect(getByTestId('severity').textContent).toEqual('Medium severity');
-    expect(getByTestId('onsetDate').textContent).toEqual('8/24/2015');
+    expect(getByTestId('onsetDate').textContent).toEqual('12/02/2019');
     expect(getByTestId('asserter').textContent).toEqual('MOORE, NICK');
   });
 
@@ -137,7 +137,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('severity').textContent).toEqual(
       'Moderate to severe severity',
     );
-    expect(getByTestId('onsetDate').textContent).toEqual('3/8/2013');
+    expect(getByTestId('onsetDate').textContent).toEqual('03/08/2013');
     expect(getByTestId('asserter').textContent).toEqual('Practitioner/f201');
   });
 
@@ -153,7 +153,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('clinicalStatus').textContent).toEqual('active');
     expect(getByTestId('severity').textContent).toEqual('Severe severity');
-    expect(getByTestId('onsetDate').textContent).toEqual('5/24/2012');
+    expect(getByTestId('onsetDate').textContent).toEqual('05/24/2012');
     expect(queryAllByTestId('asserter').length).toEqual(0);
     expect(queryAllByTestId('dateRecorded').length).toEqual(0);
   });
@@ -185,9 +185,9 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('clinicalStatus').textContent).toEqual('resolved');
     expect(getByTestId('severity').textContent).toEqual('Mild severity');
-    expect(getByTestId('onsetDate').textContent).toEqual('4/2/2013');
+    expect(getByTestId('onsetDate').textContent).toEqual('04/02/2013');
     expect(getByTestId('asserter').textContent).toEqual('Practitioner/f201');
-    expect(getByTestId('dateRecorded').textContent).toEqual('4/4/2013');
+    expect(getByTestId('dateRecorded').textContent).toEqual('04/04/2013');
   });
 
   it('should fire custom onClick function', () => {

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

@@ -90,10 +90,12 @@ describe('should render component correctly', () => {
     expect(getByTestId('title').textContent).toContain(
       'blood count (hemogram)',
     );
-    expect(getByTestId('effectiveDateTime').textContent).toContain('4/2/2013');
+    expect(getByTestId('effectiveDateTime').textContent).toContain(
+      '04/02/2013',
+    );
 
     expect(getByTestId('categoryCoding').textContent).toContain('Haematology');
-    expect(getByTestId('issued').textContent).toContain('5/15/2013');
+    expect(getByTestId('issued').textContent).toContain('05/15/2013');
     expect(getByTestId('performer').textContent).toContain(
       'University Medical ',
     );

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

@@ -126,7 +126,9 @@ const r4DTO = fhirResource => {
    */
   const prepareServiceItem = services =>
     services.map(serviceItem => {
-      const coding = _get(serviceItem, 'productOrService.coding.0');
+      const coding =
+        _get(serviceItem, 'revenue.coding.0') ||
+        _get(serviceItem, 'productOrService.coding.0');
       const servicedDate = _get(serviceItem, 'servicedDate');
       const servicedPeriod = _get(serviceItem, 'servicedPeriod');
       const quantity = _get(serviceItem, 'quantity.value');

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

@@ -95,7 +95,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toContain('Claim settled as ');
-    expect(getByTestId('created').textContent).toContain('8/16/2014');
+    expect(getByTestId('created').textContent).toContain('08/16/2014');
     expect(getByTestId('insurer').textContent).toContain('Organization/2');
   });
 
@@ -111,7 +111,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toContain('Claim settled as ');
-    expect(getByTestId('created').textContent).toContain('8/16/2014');
+    expect(getByTestId('created').textContent).toContain('08/16/2014');
     expect(getByTestId('metricAmount').textContent).toContain('$135.57');
     expect(
       getByTestId('planDiscount').textContent.replace(nbspRegex, ' '),
@@ -153,7 +153,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
     expect(getByTestId('title').textContent).toEqual(
       'Claim settled as per contract.',
     );
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('insurer').textContent).toEqual('Organization/3');
     expect(getByTestId('provider').textContent).toEqual('Practitioner/1');
     expect(getByTestId('totalSum').textContent).toContain('135.57');
@@ -184,7 +184,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
     const explanationServicedDate = getAllByTestId(
       'explanation.servicedDate',
     ).map(n => n.textContent);
-    expect(explanationServicedDate).toEqual(['8/16/2014', '8/16/2014']);
+    expect(explanationServicedDate).toEqual(['08/16/2014', '08/16/2014']);
 
     const explanationQuantity = getAllByTestId('explanation.quantity').map(
       n => n.textContent,
@@ -244,7 +244,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
     } = render(<ExplanationOfBenefit {...defaultProps} />);
     expect(container).not.toBeNull();
 
-    expect(getByTestId('created').textContent).toEqual('1/5/2017');
+    expect(getByTestId('created').textContent).toEqual('01/05/2017');
     expect(getByTestId('identifier').textContent).toContain(
       'c145d3fe-d56e-dc26-75e9-01e90672f506',
     );
@@ -259,7 +259,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
       'Organization/iAxXvHiphwGGAL48m3B7XXtKlLZg6yXnC1ch84x1up',
     );
     expect(getByTestId('billablePeriod').textContent).toEqual(
-      'From: 1/5/2017; To: 1/5/2018',
+      'From: 01/05/2017; To: 01/05/2018',
     );
     expect(getByTestId('patient').textContent).toEqual(
       'Patient/f56391c2-dd54-b378-46ef-87c1643a2ba0',
@@ -276,7 +276,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
       'clmrecvddate',
     );
     expect(getByTestId('supportingInfo.0.timingDate').textContent).toEqual(
-      '1/5/2017',
+      '01/05/2017',
     );
     expect(getByTestId('supportingInfo.1.category').textContent).toContain(
       'dayssupply',

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

@@ -139,7 +139,7 @@ describe('should render Goal component properly', () => {
       'Peter James Chalmers',
     );
 
-    expect(getByTestId('statusDate').textContent).toEqual('2/14/2016');
+    expect(getByTestId('statusDate').textContent).toEqual('02/14/2016');
 
     expect(getByTestId('description').textContent).toEqual(
       'Target weight is 160 to 180 lbs.',
@@ -169,7 +169,7 @@ describe('should render Goal component properly', () => {
 
     expect(getByTestId('status').textContent).toEqual('completed');
 
-    expect(getByTestId('headerStartDate').textContent).toEqual('4/5/2015');
+    expect(getByTestId('headerStartDate').textContent).toEqual('04/05/2015');
 
     expect(getByTestId('subject').textContent).toContain(
       'Peter James Chalmers',

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

@@ -11,6 +11,7 @@ import _get from 'lodash/get';
 import _has from 'lodash/has';
 import fhirVersions from '../fhirResourceVersions';
 import { Value } from '../../ui';
+import { getResourceDate } from '../../../utils/getResourceDate';
 
 const commonDTO = fhirResource => {
   const title =
@@ -228,6 +229,11 @@ const Immunization = ({
     },
   ];
 
+  const immunizationDatesPaths = ['occurrenceDateTime'];
+
+  const headerDate =
+    getResourceDate(fhirResource, immunizationDatesPaths) || providedDate;
+
   return (
     <Root name="Immunization">
       <Accordion
@@ -235,9 +241,9 @@ const Immunization = ({
           <Header
             resourceName="Immunization"
             additionalContent={
-              providedDate && (
+              headerDate && (
                 <Value label="Start date" data-testid="headerStartDate">
-                  <Date fhirData={providedDate} isBlack />
+                  <Date fhirData={headerDate} isBlack />
                 </Value>
               )
             }