Rename BookingInfo refs to BookingBreakdown

This commit is contained in:
Kimmo Puputti 2017-06-27 14:47:50 +03:00
parent 6b99e1f5a7
commit 4971edafb5
15 changed files with 218 additions and 45 deletions

View file

@ -1,8 +1,8 @@
import { types } from '../../util/sdkLoader';
import BookingInfo from './BookingInfo';
import BookingBreakdown from './BookingBreakdown';
export const BeforeTX = {
component: BookingInfo,
component: BookingBreakdown,
props: {
unitPrice: new types.Money(10, 'USD'),
bookingStart: new Date(Date.UTC(2017, 3, 14)),
@ -11,7 +11,7 @@ export const BeforeTX = {
};
export const TXCustomerSide = {
component: BookingInfo,
component: BookingBreakdown,
props: {
unitPrice: new types.Money(10, 'USD'),
bookingStart: new Date(Date.UTC(2017, 3, 14)),
@ -21,7 +21,7 @@ export const TXCustomerSide = {
};
export const TXProviderSide = {
component: BookingInfo,
component: BookingBreakdown,
props: {
unitPrice: new types.Money(10, 'USD'),
bookingStart: new Date(Date.UTC(2017, 3, 14)),
@ -32,7 +32,7 @@ export const TXProviderSide = {
};
export const TXNoCalculation = {
component: BookingInfo,
component: BookingBreakdown,
props: {
unitPrice: new types.Money(10, 'USD'),
bookingStart: new Date(Date.UTC(2017, 3, 14)),

View file

@ -10,9 +10,10 @@ import classNames from 'classnames';
import config from '../../config';
import { convertMoneyToNumber } from '../../util/currency';
import { types } from '../../util/sdkLoader';
import css from './BookingInfo.css';
const BookingInfoComponent = props => {
import css from './BookingBreakdown.css';
export const BookingBreakdownComponent = props => {
const {
bookingStart,
bookingEnd,
@ -33,7 +34,7 @@ const BookingInfoComponent = props => {
const bookingPeriod = (
<FormattedMessage
id="BookingInfo.bookingPeriod"
id="BookingBreakdown.bookingPeriod"
values={{
bookingStart: intl.formatDate(bookingStart),
bookingEnd: intl.formatDate(bookingEnd),
@ -44,7 +45,7 @@ const BookingInfoComponent = props => {
// diff gives night count between dates
const nightCount = moment(bookingEnd).diff(moment(bookingStart), 'days');
const nightCountMessage = (
<FormattedMessage id="BookingInfo.nightCount" values={{ count: nightCount }} />
<FormattedMessage id="BookingBreakdown.nightCount" values={{ count: nightCount }} />
);
const currencyConfig = config.currencyConfig;
@ -81,7 +82,7 @@ const BookingInfoComponent = props => {
const subtotalInfo = commission
? <div className={css.row}>
<div className={css.subtotalLabel}>
<FormattedMessage id="BookingInfo.subtotal" />
<FormattedMessage id="BookingBreakdown.subtotal" />
</div>
<div className={css.subtotal}>
{formattedSubtotal}
@ -92,7 +93,7 @@ const BookingInfoComponent = props => {
const commissionInfo = commission
? <div className={css.row}>
<div className={css.commissionLabel}>
<FormattedMessage id="BookingInfo.commission" values={{ marketplace: 'Saunatime' }} />
<FormattedMessage id="BookingBreakdown.commission" values={{ marketplace: 'Saunatime' }} />
</div>
<div className={css.commission}>
{formattedCommission}
@ -104,7 +105,7 @@ const BookingInfoComponent = props => {
<div className={classNames(css.container, className)}>
<div className={css.row}>
<div className={css.priceUnitLabel}>
<FormattedMessage id="BookingInfo.pricePerDay" />
<FormattedMessage id="BookingBreakdown.pricePerDay" />
</div>
<div className={css.priceUnitPrice}>
{formattedUnitPrice}
@ -123,7 +124,7 @@ const BookingInfoComponent = props => {
<hr className={css.totalDivider} />
<div className={css.row}>
<div className={css.totalLabel}>
<FormattedMessage id="BookingInfo.total" />
<FormattedMessage id="BookingBreakdown.total" />
</div>
<div className={css.totalPrice}>
{formattedTotalPrice}
@ -133,7 +134,7 @@ const BookingInfoComponent = props => {
);
};
BookingInfoComponent.defaultProps = {
BookingBreakdownComponent.defaultProps = {
bookingStart: null,
bookingEnd: null,
className: '',
@ -144,7 +145,7 @@ BookingInfoComponent.defaultProps = {
const { instanceOf, string } = PropTypes;
BookingInfoComponent.propTypes = {
BookingBreakdownComponent.propTypes = {
bookingStart: instanceOf(Date),
bookingEnd: instanceOf(Date),
className: string,
@ -155,8 +156,8 @@ BookingInfoComponent.propTypes = {
unitPrice: instanceOf(types.Money).isRequired,
};
const BookingInfo = injectIntl(BookingInfoComponent);
const BookingBreakdown = injectIntl(BookingBreakdownComponent);
BookingInfo.displayName = 'BookingInfo';
BookingBreakdown.displayName = 'BookingBreakdown';
export default BookingInfo;
export default BookingBreakdown;

View file

@ -2,12 +2,12 @@ import React from 'react';
import { fakeIntl } from '../../util/test-data';
import { renderDeep } from '../../util/test-helpers';
import { types } from '../../util/sdkLoader';
import BookingInfo from './BookingInfo';
import { BookingBreakdownComponent } from './BookingBreakdown';
describe('BookingInfo', () => {
describe('BookingBreakdown', () => {
it('pretransaction data matches snapshot', () => {
const tree = renderDeep(
<BookingInfo
<BookingBreakdownComponent
unitPrice={new types.Money(1000, 'USD')}
bookingStart={new Date(Date.UTC(2017, 3, 14))}
bookingEnd={new Date(Date.UTC(2017, 3, 16))}
@ -19,7 +19,7 @@ describe('BookingInfo', () => {
it('customer transaction data matches snapshot', () => {
const tree = renderDeep(
<BookingInfo
<BookingBreakdownComponent
unitPrice={new types.Money(1000, 'USD')}
bookingStart={new Date(Date.UTC(2017, 3, 14))}
bookingEnd={new Date(Date.UTC(2017, 3, 16))}
@ -32,7 +32,7 @@ describe('BookingInfo', () => {
it('provider transaction data matches snapshot', () => {
const tree = renderDeep(
<BookingInfo
<BookingBreakdownComponent
unitPrice={new types.Money(1000, 'USD')}
bookingStart={new Date(Date.UTC(2017, 3, 14))}
bookingEnd={new Date(Date.UTC(2017, 3, 16))}

View file

@ -0,0 +1,172 @@
exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
<div
className="">
<div
className={undefined}>
<div
className={undefined}>
<span>
Price per night:
</span>
</div>
<div
className={undefined}>
10
</div>
</div>
<div
className={undefined}>
<div
className={undefined}>
<span>
2017-04-14 - 2017-04-16
</span>
</div>
<div
className={undefined}>
<span>
2 nights
</span>
</div>
</div>
<hr
className={undefined} />
<div
className={undefined}>
<div
className={undefined}>
<span>
Total:
</span>
</div>
<div
className={undefined}>
20
</div>
</div>
</div>
`;
exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
<div
className="">
<div
className={undefined}>
<div
className={undefined}>
<span>
Price per night:
</span>
</div>
<div
className={undefined}>
10
</div>
</div>
<div
className={undefined}>
<div
className={undefined}>
<span>
2017-04-14 - 2017-04-16
</span>
</div>
<div
className={undefined}>
<span>
2 nights
</span>
</div>
</div>
<hr
className={undefined} />
<div
className={undefined}>
<div
className={undefined}>
<span>
Total:
</span>
</div>
<div
className={undefined}>
20
</div>
</div>
</div>
`;
exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
<div
className="">
<div
className={undefined}>
<div
className={undefined}>
<span>
Price per night:
</span>
</div>
<div
className={undefined}>
10
</div>
</div>
<div
className={undefined}>
<div
className={undefined}>
<span>
2017-04-14 - 2017-04-16
</span>
</div>
<div
className={undefined}>
<span>
2 nights
</span>
</div>
</div>
<div
className={undefined}>
<div
className={undefined}>
<span>
Subtotal:
</span>
</div>
<div
className={undefined}>
20
</div>
</div>
<div
className={undefined}>
<div
className={undefined}>
<span>
Saunatime fee:
</span>
</div>
<div
className={undefined}>
-2
</div>
</div>
<hr
className={undefined} />
<div
className={undefined}>
<div
className={undefined}>
<span>
Total:
</span>
</div>
<div
className={undefined}>
18
</div>
</div>
</div>
`;

View file

@ -3,7 +3,7 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
import * as propTypes from '../../util/propTypes';
import { createSlug } from '../../util/urlHelpers';
import { types } from '../../util/sdkLoader';
import { BookingInfo, NamedLink } from '../../components';
import { BookingBreakdown, NamedLink } from '../../components';
import css from './OrderDetailsPanel.css';
@ -130,7 +130,7 @@ const OrderDetailsPanel = props => {
const unitPrice = listing.attributes.price;
const bookingInfo = unitPrice
? <BookingInfo
? <BookingBreakdown
className={css.receipt}
bookingStart={booking.attributes.start}
bookingEnd={booking.attributes.end}

View file

@ -44,7 +44,7 @@ exports[`OrderDetailsPanel matches snapshot 1`] = `
id="OrderDetailsPanel.bookingBreakdownTitle"
values={Object {}} />
</h3>
<BookingInfo
<BookingBreakdown
bookingEnd={2017-06-13T00:00:00.000Z}
bookingStart={2017-06-10T00:00:00.000Z}
totalPrice={

View file

@ -3,7 +3,7 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
import * as propTypes from '../../util/propTypes';
import { types } from '../../util/sdkLoader';
import { createSlug } from '../../util/urlHelpers';
import { Avatar, BookingInfo, NamedLink } from '../../components';
import { Avatar, BookingBreakdown, NamedLink } from '../../components';
import css from './SaleDetailsPanel.css';
@ -34,7 +34,7 @@ const SaleDetailsPanel = props => {
const unitPrice = listing.attributes.price;
const bookingInfo = unitPrice
? <BookingInfo
? <BookingBreakdown
className={css.receipt}
bookingStart={booking.attributes.start}
bookingEnd={booking.attributes.end}

View file

@ -38,7 +38,7 @@ exports[`SaleDetailsPanel matches snapshot 1`] = `
} />
</div>
</div>
<BookingInfo
<BookingBreakdown
bookingEnd={2017-06-13T00:00:00.000Z}
bookingStart={2017-06-10T00:00:00.000Z}
commission={

View file

@ -2,7 +2,7 @@ import AddImages from './AddImages/AddImages';
import AuthorInfo from './AuthorInfo/AuthorInfo';
import Avatar from './Avatar/Avatar';
import BirthdayInputField from './BirthdayInputField/BirthdayInputField';
import BookingInfo from './BookingInfo/BookingInfo';
import BookingBreakdown from './BookingBreakdown/BookingBreakdown';
import Button, { InlineTextButton } from './Button/Button';
import CloseIcon from './CloseIcon/CloseIcon';
import CurrencyInputField from './CurrencyInputField/CurrencyInputField';
@ -55,7 +55,7 @@ export {
AuthorInfo,
Avatar,
BirthdayInputField,
BookingInfo,
BookingBreakdown,
Button,
CloseIcon,
CurrencyInputField,

View file

@ -7,7 +7,7 @@ import { isInclusivelyAfterDay, isInclusivelyBeforeDay } from 'react-dates';
import moment from 'moment';
import { types } from '../../util/sdkLoader';
import { required } from '../../util/validators';
import { Button, BookingInfo, DateInputField } from '../../components';
import { Button, BookingBreakdown, DateInputField } from '../../components';
import css from './BookingDatesForm.css';
@ -47,7 +47,7 @@ export const BookingDatesFormComponent = props => {
: {};
const bookingInfo = price
? <BookingInfo
? <BookingBreakdown
className={css.receipt}
bookingStart={bookingStart}
bookingEnd={bookingEnd}

View file

@ -1,7 +1,7 @@
exports[`BookingDatesForm matches snapshot 1`] = `
<form
onSubmit={[Function]}>
<BookingInfo
<BookingBreakdown
unitPrice={
Money {
"amount": 1099,

View file

@ -9,7 +9,7 @@ import { types } from '../../util/sdkLoader';
import { pathByRouteName } from '../../util/routes';
import * as propTypes from '../../util/propTypes';
import { withFlattenedRoutes } from '../../util/contextHelpers';
import { AuthorInfo, BookingInfo, NamedRedirect, PageLayout } from '../../components';
import { AuthorInfo, BookingBreakdown, NamedRedirect, PageLayout } from '../../components';
import { StripePaymentForm } from '../../containers';
import { initiateOrder, setInitialValues } from './CheckoutPage.duck';
@ -193,7 +193,7 @@ export class CheckoutPageComponent extends Component {
<PageLayout title={title}>
<h1 className={css.title}>{title}</h1>
<AuthorInfo author={currentListing.author} className={css.authorContainer} />
<BookingInfo
<BookingBreakdown
className={css.receipt}
bookingStart={bookingStart}
bookingEnd={bookingEnd}

View file

@ -20,7 +20,7 @@ exports[`CheckoutPage matches snapshot 1`] = `
}
}
className={null} />
<BookingInfo
<BookingBreakdown
bookingEnd={2017-04-16T00:00:00.000Z}
bookingStart={2017-04-14T00:00:00.000Z}
unitPrice={

View file

@ -1,7 +1,7 @@
// components
import * as AddImages from './components/AddImages/AddImages.example';
import * as BirthdayInputField from './components/BirthdayInputField/BirthdayInputField.example';
import * as BookingInfo from './components/BookingInfo/BookingInfo.example';
import * as BookingBreakdown from './components/BookingBreakdown/BookingBreakdown.example';
import * as Button from './components/Button/Button.example';
import * as CurrencyInputField from './components/CurrencyInputField/CurrencyInputField.example';
import * as DateInputField from './components/DateInputField/DateInputField.example';
@ -50,7 +50,7 @@ export {
AddImages,
BirthdayInputField,
BookingDatesForm,
BookingInfo,
BookingBreakdown,
Button,
ChangeAccountPasswordForm,
ChangePasswordForm,

View file

@ -16,12 +16,12 @@
"BookingDatesForm.requiredDate": "Oops, make sure your date is correct!",
"BookingDatesForm.requiredDate": "Oops, make sure your date is correct!",
"BookingDatesForm.youWontBeChargedInfo": "You won't be charged yet",
"BookingInfo.bookingPeriod": "{bookingStart} - {bookingEnd}",
"BookingInfo.commission": "{marketplace} fee:",
"BookingInfo.nightCount": "{count, number} {count, plural, one {night} other {nights}}",
"BookingInfo.pricePerDay":"Price per night:",
"BookingInfo.subtotal": "Subtotal:",
"BookingInfo.total": "Total:",
"BookingBreakdown.bookingPeriod": "{bookingStart} - {bookingEnd}",
"BookingBreakdown.commission": "{marketplace} fee:",
"BookingBreakdown.nightCount": "{count, number} {count, plural, one {night} other {nights}}",
"BookingBreakdown.pricePerDay":"Price per night:",
"BookingBreakdown.subtotal": "Subtotal:",
"BookingBreakdown.total": "Total:",
"CheckoutPage.initiateOrderError": "Payment request failed. Please try again.",
"CheckoutPage.paymentInfo": "You'll only be charged if your request is accepted by the provider.",
"CheckoutPage.paymentTitle": "Payment",