Create LineItemBasePriceMaybe component

src/components/BookingBreakdown/LineItemBasePriceMaybe.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
+import { formatMoney } from '../../util/currency';
+import { LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
+
+import css from './BookingBreakdown.css';
+
+const LineItemBasePriceMaybe = props => {
+  const { transaction, unitType, intl } = props;
+  const isNightly = unitType === LINE_ITEM_NIGHT;
+  const isDaily = unitType === LINE_ITEM_DAY;
+  const translationKey = isNightly
+    ? 'BookingBreakdown.baseUnitNight'
+    : isDaily
+    ? 'BookingBreakdown.baseUnitDay'
+    : 'BookingBreakdown.baseUnitQuantity';
+
+  const unitPurchase = transaction.attributes.lineItems.find(
+    item => item.code === unitType && !item.reversal
+  );
+
+  const quantity = unitPurchase ? unitPurchase.quantity.toString() : null;
+  const unitPrice = unitPurchase ? formatMoney(intl, unitPurchase.unitPrice) : null;
+  const total = unitPurchase ? formatMoney(intl, unitPurchase.lineTotal) : null;
+
+  return quantity && total ? (
+    <div className={css.lineItem}>
+      <span className={css.itemLabel}>
+        <FormattedMessage id={translationKey} values={{ unitPrice, quantity }} />
+      </span>
+      <span className={css.itemValue}>{total}</span>
+    </div>
+  ) : null;
+};
+
+LineItemBasePriceMaybe.propTypes = {
+  transaction: propTypes.transaction.isRequired,
+  unitType: propTypes.bookingUnitType.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default LineItemBasePriceMaybe;

src/translations/en.json

@@ -37,7 +37,11 @@
   "AuthenticationPage.verifyEmailTitle": "{name}, check your inbox to verify your email",
   "Avatar.bannedUserDisplayName": "Banned user",
   "Avatar.deletedUserDisplayName": "Deleted user",
-  "BookingBreakdown.bookingPeriod": "{bookingStart} – {bookingEnd}",
+  "BookingBreakdown.baseUnitDay": "{unitPrice} * {quantity} days",
+  "BookingBreakdown.baseUnitNight": "{unitPrice} * {quantity} nights",
+  "BookingBreakdown.baseUnitQuantity": "{unitPrice} * {quantity} persons",
+  "BookingBreakdown.bookingEnd": "Booking end",
+  "BookingBreakdown.bookingStart": "Booking start",
   "BookingBreakdown.commission": "Saunatime fee *",
   "BookingBreakdown.commissionFeeNote": "* The fee helps us run the platform and provide the best possible service to you!",
   "BookingBreakdown.dayCount": "{count, number} {count, plural, one {day} other {days}}",