LineItemUnitsMaybe for BookingBreakdown

src/components/BookingBreakdown/BookingBreakdown.js

@@ -10,6 +10,7 @@ import { propTypes } from '../../util/types';
 
 import LineItemUnitPrice from './LineItemUnitPrice';
 import LineItemBookingPeriod from './LineItemBookingPeriod';
+import LineItemUnitsMaybe from './LineItemUnitsMaybe';
 import LineItemSubTotalMaybe from './LineItemSubTotalMaybe';
 import LineItemCommissionMaybe from './LineItemCommissionMaybe';
 import LineItemRefundMaybe from './LineItemRefundMaybe';
@@ -26,6 +27,7 @@ export const BookingBreakdownComponent = props => {
     <div className={classes}>
       <LineItemUnitPrice transaction={transaction} unitType={unitType} intl={intl} />
       <LineItemBookingPeriod transaction={transaction} booking={booking} unitType={unitType} />
+      <LineItemUnitsMaybe transaction={transaction} unitType={unitType} />
 
       <LineItemSubTotalMaybe
         transaction={transaction}

src/components/BookingBreakdown/LineItemUnitsMaybe.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { LINE_ITEM_UNITS, propTypes } from '../../util/types';
+
+import css from './BookingBreakdown.css';
+
+const LineItemUnitsMaybe = props => {
+  const { transaction, unitType } = props;
+
+  if (unitType !== LINE_ITEM_UNITS) {
+    return null;
+  }
+
+  const unitPurchase = transaction.attributes.lineItems.find(
+    item => item.code === unitType && !item.reversal
+  );
+  const quantity = unitPurchase.quantity;
+
+  return (
+    <div className={css.lineItem}>
+      <span className={css.itemLabel}>
+        <FormattedMessage id="BookingBreakdown.quantityUnit" />
+      </span>
+      <span className={css.itemValue}>
+        <FormattedMessage id="BookingBreakdown.quantity" values={{ quantity }} />
+      </span>
+    </div>
+  );
+};
+
+LineItemUnitsMaybe.propTypes = {
+  transaction: propTypes.transaction.isRequired,
+  unitType: propTypes.bookingUnitType.isRequired,
+};
+
+export default LineItemUnitsMaybe;

src/translations/en.json

@@ -43,10 +43,13 @@
   "BookingBreakdown.nightCount": "{count, number} {count, plural, one {night} other {nights}}",
   "BookingBreakdown.pricePerDay": "Price per day",
   "BookingBreakdown.pricePerNight": "Price per night",
+  "BookingBreakdown.pricePerUnit": "Price per person",
   "BookingBreakdown.providerTotalCanceled": "Total price",
   "BookingBreakdown.providerTotalDeclined": "You would have made",
   "BookingBreakdown.providerTotalDefault": "You'll make",
   "BookingBreakdown.providerTotalDelivered": "You made",
+  "BookingBreakdown.quantityUnit": "Number of persons",
+  "BookingBreakdown.quantity": "{quantity, number} {quantity, plural, one {person} other {persons}}",
   "BookingBreakdown.refund": "Refund",
   "BookingBreakdown.subTotal": "Subtotal",
   "BookingBreakdown.total": "Total price",