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

Order details use same same container method as other pages

Browse source
This commit is contained in:
Vesa Luusua 2017-07-11 11:49:49 +03:00
parent 87eaf8d5b0
commit aa518dc71e
3 changed files with 61 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/OrderDetailsPanel/OrderDetailsPanel.css
View file

@ -19,18 +19,29 @@
.message {
display: flex;
margin: 24px 24px 0 24px;
margin: 24px 24px 47px 24px;
}
.transitionDate {
white-space: nowrap;
}
.bookingBreakdownContainer {
margin-bottom: 40px;
padding: 0 24px;
}
.bookingBreakdownTitle {
margin: 47px 24px 0 24px;
/* Font */
color: var(--matterColorAnti);
margin-top: 5px;
margin-bottom: 14px;
@media (--desktopViewport) {
margin-top: 5px;
margin-bottom: 14px;
}
}
.receipt {
margin: 14px 24px 0 24px;
}

10
src/components/OrderDetailsPanel/OrderDetailsPanel.js
View file

@ -167,10 +167,12 @@ const OrderDetailsPanel = props => {
<div className={css.message}>
{message}
</div>
<h3 className={css.bookingBreakdownTitle}>
<FormattedMessage id="OrderDetailsPanel.bookingBreakdownTitle" />
</h3>
{bookingInfo}
<div className={css.bookingBreakdownContainer}>
<h3 className={css.bookingBreakdownTitle}>
<FormattedMessage id="OrderDetailsPanel.bookingBreakdownTitle" />
</h3>
{bookingInfo}
</div>
</div>
);
};

80
src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
View file

@ -39,47 +39,49 @@ exports[`OrderDetailsPanel matches snapshot 1`] = `
}
} />
</div>
<h3>
<FormattedMessage
id="OrderDetailsPanel.bookingBreakdownTitle"
values={Object {}} />
</h3>
<BookingBreakdown
bookingEnd={2017-06-13T00:00:00.000Z}
bookingStart={2017-06-10T00:00:00.000Z}
lineItems={
Array [
Object {
"code": "line-item/night",
"lineTotal": Money {
"amount": 16500,
"currency": "USD",
<div>
<h3>
<FormattedMessage
id="OrderDetailsPanel.bookingBreakdownTitle"
values={Object {}} />
</h3>
<BookingBreakdown
bookingEnd={2017-06-13T00:00:00.000Z}
bookingStart={2017-06-10T00:00:00.000Z}
lineItems={
Array [
Object {
"code": "line-item/night",
"lineTotal": Money {
"amount": 16500,
"currency": "USD",
},
"quantity": "3",
"unitPrice": Money {
"amount": 5500,
"currency": "USD",
},
},
"quantity": "3",
"unitPrice": Money {
"amount": 5500,
"currency": "USD",
Object {
"code": "line-item/provider-commission",
"lineTotal": Money {
"amount": -100,
"currency": "USD",
},
"unitPrice": Money {
"amount": -100,
"currency": "USD",
},
},
},
Object {
"code": "line-item/provider-commission",
"lineTotal": Money {
"amount": -100,
"currency": "USD",
},
"unitPrice": Money {
"amount": -100,
"currency": "USD",
},
},
]
}
payinTotal={
Money {
"amount": 16500,
"currency": "USD",
]
}
}
userRole="customer" />
payinTotal={
Money {
"amount": 16500,
"currency": "USD",
}
}
userRole="customer" />
</div>
</div>
`;