maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move items into a separate component

Browse source
This commit is contained in:
Kimmo Puputti 2018-01-02 11:48:59 +02:00
parent 1e4dbef9ee
commit b59b462035
2 changed files with 224 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/BookingBreakdown/BookingBreakdown.js
View file

@ -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,

376
src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap
View file

@ -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}