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

Footer to SalePage

Browse source
This commit is contained in:
Vesa Luusua 2017-10-20 18:23:05 +03:00
parent bc92abd93d
commit 089cd298e9
4 changed files with 167 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/SaleDetailsPanel/SaleDetailsPanel.css
View file

@ -186,6 +186,8 @@
}
.actionButtons {
/* Position action button row above the footer */
z-index: 9;
position: fixed;
bottom: 0;
width: 100%;
@ -201,6 +203,7 @@
background-color: white;
@media (--viewportLarge) {
z-index: unset;
position: static;
box-shadow: none;
width: auto;

9
src/containers/SalePage/SalePage.css
View file

@ -6,6 +6,15 @@
flex: 1;
}
/* actionButtons are fixed positioned until viewportLarge is reached */
/* margin-bottom gives space for those buttons when scrolling to bottom */
.footerWrapper {
margin-bottom: 101px;
@media (--viewportLarge) {
margin-bottom: 0;
}
}
.loading {
margin-left: 24px;
margin-right: 24px;

34
src/containers/SalePage/SalePage.js
View file

@ -5,11 +5,20 @@ import { connect } from 'react-redux';
import classNames from 'classnames';
import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
import * as propTypes from '../../util/propTypes';
import { ensureListing, ensureTransaction } from '../../util/data';
import { ensureListing, ensureUser, ensureTransaction } from '../../util/data';
import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
import { isScrollingDisabled } from '../../ducks/UI.duck';
import { acceptSale, declineSale, loadData } from './SalePage.duck';
import { NamedRedirect, SaleDetailsPanel, Page } from '../../components';
import {
NamedRedirect,
SaleDetailsPanel,
Page,
LayoutSingleColumn,
LayoutWrapperTopbar,
LayoutWrapperMain,
LayoutWrapperFooter,
Footer,
} from '../../components';
import { TopbarContainer } from '../../containers';
import css from './SalePage.css';
@ -64,6 +73,14 @@ export const SalePageComponent = props => {
</p>
);
// We need to know if the customer is in pending state -
// to show action buttons bar and reserve space below footer.
// (accept reject buttons are position: fixed on mobile layout)
const currentCustomer = ensureUser(currentTransaction.customer);
const customerLoaded = !!currentCustomer.id;
const isCustomerBanned = customerLoaded || currentCustomer.attributes.banned;
const isPending = propTypes.txIsPreauthorized(currentTransaction) && !isCustomerBanned;
const panel =
isDataAvailable && currentTransaction.id ? (
<SaleDetailsPanel
@ -87,8 +104,17 @@ export const SalePageComponent = props => {
title={intl.formatMessage({ id: 'SalePage.title' }, { title: listingTitle })}
scrollingDisabled={scrollingDisabled}
>
<TopbarContainer />
<div className={css.root}>{panel}</div>
<LayoutSingleColumn>
<LayoutWrapperTopbar>
<TopbarContainer />
</LayoutWrapperTopbar>
<LayoutWrapperMain>
<div className={css.root}>{panel}</div>
</LayoutWrapperMain>
<LayoutWrapperFooter className={classNames({ [css.footerWrapper]: isPending })}>
<Footer />
</LayoutWrapperFooter>
</LayoutSingleColumn>
</Page>
);
};

229
src/containers/SalePage/__snapshots__/SalePage.test.js.snap
View file

@ -7,122 +7,143 @@ exports[`SalePage matches snapshot 1`] = `
scrollingDisabled={false}
title="SalePage.title"
>
<withRouter(Connect(TopbarContainerComponent)) />
<div>
<InjectIntl(Component)
acceptInProgress={false}
acceptSaleError={null}
className="undefined"
declineInProgress={false}
declineSaleError={null}
onAcceptSale={[Function]}
onDeclineSale={[Function]}
transaction={
Object {
"attributes": Object {
"createdAt": 2017-05-01T00:00:00.000Z,
"lastTransition": "transition/preauthorize",
"lastTransitionedAt": 2017-06-01T00:00:00.000Z,
"lineItems": Array [
Object {
"code": "line-item/night",
"lineTotal": Money {
<LayoutSingleColumn
className={null}
rootClassName={null}
>
<LayoutWrapperTopbar
className={null}
rootClassName={null}
>
<withRouter(Connect(TopbarContainerComponent)) />
</LayoutWrapperTopbar>
<LayoutWrapperMain
className={null}
rootClassName={null}
>
<div>
<InjectIntl(Component)
acceptInProgress={false}
acceptSaleError={null}
className="undefined"
declineInProgress={false}
declineSaleError={null}
onAcceptSale={[Function]}
onDeclineSale={[Function]}
transaction={
Object {
"attributes": Object {
"createdAt": 2017-05-01T00:00:00.000Z,
"lastTransition": "transition/preauthorize",
"lastTransitionedAt": 2017-06-01T00:00:00.000Z,
"lineItems": Array [
Object {
"code": "line-item/night",
"lineTotal": Money {
"amount": 1000,
"currency": "USD",
},
"quantity": "3",
"reversal": false,
"unitPrice": Money {
"amount": 333.3333333333333,
"currency": "USD",
},
},
Object {
"code": "line-item/provider-commission",
"lineTotal": Money {
"amount": -100,
"currency": "USD",
},
"reversal": false,
"unitPrice": Money {
"amount": -100,
"currency": "USD",
},
},
],
"payinTotal": Money {
"amount": 1000,
"currency": "USD",
},
"quantity": "3",
"reversal": false,
"unitPrice": Money {
"amount": 333.3333333333333,
"payoutTotal": Money {
"amount": 900,
"currency": "USD",
},
},
Object {
"code": "line-item/provider-commission",
"lineTotal": Money {
"amount": -100,
"currency": "USD",
"booking": Object {
"attributes": Object {
"end": 2017-06-13T00:00:00.000Z,
"start": 2017-06-10T00:00:00.000Z,
},
"reversal": false,
"unitPrice": Money {
"amount": -100,
"currency": "USD",
"id": UUID {
"uuid": "booking1",
},
"type": "booking",
},
],
"payinTotal": Money {
"amount": 1000,
"currency": "USD",
},
"payoutTotal": Money {
"amount": 900,
"currency": "USD",
},
},
"booking": Object {
"attributes": Object {
"end": 2017-06-13T00:00:00.000Z,
"start": 2017-06-10T00:00:00.000Z,
},
"id": UUID {
"uuid": "booking1",
},
"type": "booking",
},
"customer": Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "customer1 abbreviated name",
"displayName": "customer1 display name",
"customer": Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "customer1 abbreviated name",
"displayName": "customer1 display name",
},
},
"id": UUID {
"uuid": "customer1",
},
"type": "user",
},
},
"id": UUID {
"uuid": "customer1",
},
"type": "user",
},
"id": UUID {
"uuid": "tx-sale-1",
},
"listing": Object {
"attributes": Object {
"address": "listing1 address",
"closed": false,
"deleted": false,
"description": "listing1 description",
"geolocation": LatLng {
"lat": 40,
"lng": 60,
"id": UUID {
"uuid": "tx-sale-1",
},
"price": Money {
"amount": 5500,
"currency": "USD",
"listing": Object {
"attributes": Object {
"address": "listing1 address",
"closed": false,
"deleted": false,
"description": "listing1 description",
"geolocation": LatLng {
"lat": 40,
"lng": 60,
},
"price": Money {
"amount": 5500,
"currency": "USD",
},
"title": "listing1 title",
},
"id": UUID {
"uuid": "listing1",
},
"type": "listing",
},
"title": "listing1 title",
},
"id": UUID {
"uuid": "listing1",
},
"type": "listing",
},
"provider": Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "provider1 abbreviated name",
"displayName": "provider1 display name",
"provider": Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "provider1 abbreviated name",
"displayName": "provider1 display name",
},
},
"id": UUID {
"uuid": "provider1",
},
"type": "user",
},
},
"id": UUID {
"uuid": "provider1",
},
"type": "user",
},
"type": "transaction",
}
}
/>
</div>
"type": "transaction",
}
}
/>
</div>
</LayoutWrapperMain>
<LayoutWrapperFooter
className=""
rootClassName={null}
>
<InjectIntl(Footer) />
</LayoutWrapperFooter>
</LayoutSingleColumn>
</Page>
`;