diff --git a/src/components/BookingBreakdown/BookingBreakdown.js b/src/components/BookingBreakdown/BookingBreakdown.js
index 995c4a86..9b550f7e 100644
--- a/src/components/BookingBreakdown/BookingBreakdown.js
+++ b/src/components/BookingBreakdown/BookingBreakdown.js
@@ -3,7 +3,7 @@
  * I.e. dates and other details related to payment decision in receipt format.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
+import { bool, oneOf, string } from 'prop-types';
 import { FormattedMessage, FormattedHTMLMessage, intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { types } from '../../util/sdkLoader';
@@ -24,11 +24,8 @@ const isValidCommission = commissionLineItem => {
   );
 };
 
-export const BookingBreakdownComponent = props => {
-  const { rootClassName, className, userRole, transaction, booking, intl } = props;
-
-  const isProvider = userRole === 'provider';
-  const classes = classNames(rootClassName || css.root, className);
+const BreakdownItems = props => {
+  const { transaction, booking, isProvider, intl } = props;
 
   const nightPurchase = transaction.attributes.lineItems.find(
     item => item.code === 'line-item/night' && !item.reversal
@@ -132,6 +129,29 @@ export const BookingBreakdownComponent = props => {
       </div>
     );
   }
+  return (
+    <div>
+      {unitPriceItem}
+      {unitsItem}
+      {subTotalItem}
+      {commissionItem}
+      {refundItem}
+    </div>
+  );
+};
+
+BreakdownItems.propTypes = {
+  transaction: propTypes.transaction.isRequired,
+  booking: propTypes.booking.isRequired,
+  isProvider: bool.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export const BookingBreakdownComponent = props => {
+  const { rootClassName, className, userRole, transaction, booking, intl } = props;
+
+  const isProvider = userRole === 'provider';
+  const classes = classNames(rootClassName || css.root, className);
 
   let providerTotalMessageId = 'BookingBreakdown.providerTotalDefault';
   if (propTypes.txIsDelivered(transaction)) {
@@ -155,11 +175,12 @@ export const BookingBreakdownComponent = props => {
 
   return (
     <div className={classes}>
-      {unitPriceItem}
-      {unitsItem}
-      {subTotalItem}
-      {commissionItem}
-      {refundItem}
+      <BreakdownItems
+        transaction={transaction}
+        booking={booking}
+        isProvider={isProvider}
+        intl={intl}
+      />
       <hr className={css.totalDivider} />
       <div className={css.lineItem}>
         <div className={css.totalLabel}>{totalLabel}</div>
@@ -171,8 +192,6 @@ export const BookingBreakdownComponent = props => {
 
 BookingBreakdownComponent.defaultProps = { rootClassName: null, className: null };
 
-const { oneOf, string } = PropTypes;
-
 BookingBreakdownComponent.propTypes = {
   rootClassName: string,
   className: string,
diff --git a/src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap b/src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap
index 2af3179a..4ae7d2a9 100644
--- a/src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap
+++ b/src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap
@@ -4,43 +4,45 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
 <div
   className=""
 >
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.pricePerNight
-      </span>
-    </span>
-    <span
-      className={undefined}
-    >
-      10
-    </span>
-  </div>
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.bookingPeriod
-      </span>
-    </span>
-    <span
+  <div>
+    <div
       className={undefined}
     >
       <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "BookingBreakdown.nightCount",
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.pricePerNight
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        10
+      </span>
+    </div>
+    <div
+      className={undefined}
+    >
+      <span
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.bookingPeriod
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        <span
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "BookingBreakdown.nightCount",
+            }
           }
-        }
-      />
-    </span>
+        />
+      </span>
+    </div>
   </div>
   <hr
     className={undefined}
@@ -68,43 +70,45 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
 <div
   className=""
 >
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.pricePerNight
-      </span>
-    </span>
-    <span
-      className={undefined}
-    >
-      10
-    </span>
-  </div>
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.bookingPeriod
-      </span>
-    </span>
-    <span
+  <div>
+    <div
       className={undefined}
     >
       <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "BookingBreakdown.nightCount",
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.pricePerNight
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        10
+      </span>
+    </div>
+    <div
+      className={undefined}
+    >
+      <span
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.bookingPeriod
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        <span
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "BookingBreakdown.nightCount",
+            }
           }
-        }
-      />
-    </span>
+        />
+      </span>
+    </div>
   </div>
   <hr
     className={undefined}
@@ -132,75 +136,77 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
 <div
   className=""
 >
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.pricePerNight
-      </span>
-    </span>
-    <span
-      className={undefined}
-    >
-      10
-    </span>
-  </div>
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.bookingPeriod
-      </span>
-    </span>
-    <span
+  <div>
+    <div
       className={undefined}
     >
       <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "BookingBreakdown.nightCount",
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.pricePerNight
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        10
+      </span>
+    </div>
+    <div
+      className={undefined}
+    >
+      <span
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.bookingPeriod
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        <span
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "BookingBreakdown.nightCount",
+            }
           }
-        }
-      />
-    </span>
-  </div>
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.subTotal
+        />
       </span>
-    </span>
-    <span
+    </div>
+    <div
       className={undefined}
     >
-      20
-    </span>
-  </div>
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.refund
+      <span
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.subTotal
+        </span>
       </span>
-    </span>
-    <span
+      <span
+        className={undefined}
+      >
+        20
+      </span>
+    </div>
+    <div
       className={undefined}
     >
-      -20
-    </span>
+      <span
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.refund
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        -20
+      </span>
+    </div>
   </div>
   <hr
     className={undefined}
@@ -228,75 +234,77 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
 <div
   className=""
 >
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.pricePerNight
-      </span>
-    </span>
-    <span
-      className={undefined}
-    >
-      10
-    </span>
-  </div>
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.bookingPeriod
-      </span>
-    </span>
-    <span
+  <div>
+    <div
       className={undefined}
     >
       <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "BookingBreakdown.nightCount",
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.pricePerNight
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        10
+      </span>
+    </div>
+    <div
+      className={undefined}
+    >
+      <span
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.bookingPeriod
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        <span
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "BookingBreakdown.nightCount",
+            }
           }
-        }
-      />
-    </span>
-  </div>
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.subTotal
+        />
       </span>
-    </span>
-    <span
+    </div>
+    <div
       className={undefined}
     >
-      20
-    </span>
-  </div>
-  <div
-    className={undefined}
-  >
-    <span
-      className={undefined}
-    >
-      <span>
-        BookingBreakdown.commission
+      <span
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.subTotal
+        </span>
       </span>
-    </span>
-    <span
+      <span
+        className={undefined}
+      >
+        20
+      </span>
+    </div>
+    <div
       className={undefined}
     >
-      -2
-    </span>
+      <span
+        className={undefined}
+      >
+        <span>
+          BookingBreakdown.commission
+        </span>
+      </span>
+      <span
+        className={undefined}
+      >
+        -2
+      </span>
+    </div>
   </div>
   <hr
     className={undefined}