diff --git a/src/app.test.js b/src/app.test.js
index e2941e9f..24d1ef19 100644
--- a/src/app.test.js
+++ b/src/app.test.js
@@ -79,7 +79,6 @@ describe('Application', () => {
'/account/contact-details': defaultAuthPath,
'/account/change-password': defaultAuthPath,
'/account/payout-preferences': defaultAuthPath,
- '/account/security': defaultAuthPath,
'/verify-email': loginPath,
};
forEach(urlRedirects, (redirectPath, url) => {
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
index 363d06f4..5c4b9c1a 100644
--- a/src/components/Footer/Footer.css
+++ b/src/components/Footer/Footer.css
@@ -82,7 +82,7 @@
}
.organizationInfo {
- margin-left: 35px;
+ margin-left: 36px;
width: 179px;
}
diff --git a/src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css b/src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css
index 58c12a68..e150fece 100644
--- a/src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css
+++ b/src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css
@@ -1,4 +1,7 @@
+@import '../../marketplace.css';
+
.root {
width: 100%;
position: relative;
+ z-index: var(--zIndexTopbar);
}
diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.css b/src/components/SaleDetailsPanel/SaleDetailsPanel.css
index ba3d03a5..9cc3f68a 100644
--- a/src/components/SaleDetailsPanel/SaleDetailsPanel.css
+++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.css
@@ -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;
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css
index 5f535fbe..39e40c40 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.css
+++ b/src/containers/AuthenticationPage/AuthenticationPage.css
@@ -1,5 +1,13 @@
@import '../../marketplace.css';
+.layoutWrapperMain {
+ min-height: calc(100vh - var(--topbarHeight));
+
+ @media (--viewportMedium) {
+ min-height: calc(100vh - var(--topbarHeightDesktop));
+ }
+}
+
.root {
@apply --marketplaceModalRootStyles;
}
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js
index 0ea25b87..cd97b4ee 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.js
+++ b/src/containers/AuthenticationPage/AuthenticationPage.js
@@ -20,6 +20,11 @@ import {
IconEmailSent,
InlineTextButton,
IconClose,
+ LayoutSingleColumn,
+ LayoutWrapperTopbar,
+ LayoutWrapperMain,
+ LayoutWrapperFooter,
+ Footer,
} from '../../components';
import { LoginForm, SignupForm, TopbarContainer } from '../../containers';
import { login, authenticationInProgress, signup } from '../../ducks/Auth.duck';
@@ -216,10 +221,19 @@ export const AuthenticationPageComponent = props => {
name: schemaTitle,
}}
>
-
-
- {showEmailVerification ? emailVerificationContent : formContent}
-
+
-
-
- {actionBar}
-
- {viewPhotosButton}
-
-
-
this.setState({ imageCarouselOpen: false })}
- onManageDisableScrolling={onManageDisableScrolling}
- >
-
-
-
-
-
-
-
-
-
-
- {formattedPrice}
-
-
-
-
-
-
-
{title}
-
-
-
-
-
+
+ {topbar}
+
+
+
+
+ {actionBar}
+
+ {viewPhotosButton}
+
this.setState({ imageCarouselOpen: false })}
+ onManageDisableScrolling={onManageDisableScrolling}
+ >
+
+
-
+
+
+
+
+
+ {formattedPrice}
+
+
+
+
+
+
+
-
this.setState({ isBookingModalOpenOnMobile: false })}
- showAsModalMaxWidth={MODAL_BREAKPOINT}
- onManageDisableScrolling={onManageDisableScrolling}
- >
-
-
{title}
-
-
-
+
+
+
+ {description}
+
+
+ {map}
+
+
+ this.setState({ isBookingModalOpenOnMobile: false })}
+ showAsModalMaxWidth={MODAL_BREAKPOINT}
+ onManageDisableScrolling={onManageDisableScrolling}
+ >
+
+
+ {bookingHeading}
+ {!currentListing.attributes.closed ? (
+
-
+ ) : null}
+
+
+
+
+ {formattedPrice}
+
+
+
+
+
+
+ {!currentListing.attributes.closed ? (
+
+ ) : (
+
+
+
+ )}
-
- {bookingHeading}
- {!currentListing.attributes.closed ? (
-
- ) : null}
-
-
-
-
- {formattedPrice}
-
-
-
-
-
-
- {!currentListing.attributes.closed ? (
-
- ) : (
-
-
-
- )}
-
-
+
+
+
+
+
);
}
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index b5af7fb4..2bab23fa 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -22,254 +22,273 @@ exports[`ListingPage matches snapshot 1`] = `
title="ListingPage.schemaTitle"
twitterImages={Array []}
>
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
- listing1 title
-
-
-
-
-
-
-
-
-
-
-
-
-
- listing1 description
-
-
-
-
-
-
-
- listing1 title
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ listing1 title
+
+
+
+
+
+
+
+
+
+
+
+
+
+ listing1 description
+
+
+
+
+
+
+
+ listing1 title
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
`;
diff --git a/src/containers/ManageListingsPage/ManageListingsPage.js b/src/containers/ManageListingsPage/ManageListingsPage.js
index fdd35232..2f44df79 100644
--- a/src/containers/ManageListingsPage/ManageListingsPage.js
+++ b/src/containers/ManageListingsPage/ManageListingsPage.js
@@ -6,7 +6,17 @@ import { FormattedMessage } from 'react-intl';
import * as propTypes from '../../util/propTypes';
import { parse } from '../../util/urlHelpers';
import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { ManageListingCard, Page, PaginationLinks, UserNav } from '../../components';
+import {
+ ManageListingCard,
+ Page,
+ PaginationLinks,
+ UserNav,
+ LayoutSingleColumn,
+ LayoutWrapperTopbar,
+ LayoutWrapperMain,
+ LayoutWrapperFooter,
+ Footer,
+} from '../../components';
import { TopbarContainer } from '../../containers';
import {
@@ -110,30 +120,39 @@ export class ManageListingsPageComponent extends Component {
scrollingDisabled={scrollingDisabled}
title="Manage listings"
>
-
-
- {queryInProgress ? loadingResults : null}
- {queryListingsError ? queryError : null}
-
- {title}
-
- {listings.map(l => (
-
- ))}
-
- {paginationLinks}
-
+
+
+
+
+
+
+ {queryInProgress ? loadingResults : null}
+ {queryListingsError ? queryError : null}
+
+ {title}
+
+ {listings.map(l => (
+
+ ))}
+
+ {paginationLinks}
+
+
+
+
+
+
);
}
diff --git a/src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap b/src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap
index 02c07f96..deb31332 100644
--- a/src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap
+++ b/src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap
@@ -7,16 +7,37 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
scrollingDisabled={false}
title="Manage listings"
>
-
-
-
+ >
+
+
+
+
+
+
+
+
+
+
+
`;
diff --git a/src/containers/NotFoundPage/NotFoundPage.js b/src/containers/NotFoundPage/NotFoundPage.js
index b1ff111c..6d172dad 100644
--- a/src/containers/NotFoundPage/NotFoundPage.js
+++ b/src/containers/NotFoundPage/NotFoundPage.js
@@ -8,7 +8,14 @@ import routeConfiguration from '../../routeConfiguration';
import * as propTypes from '../../util/propTypes';
import { createResourceLocatorString } from '../../util/routes';
import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { Page } from '../../components';
+import {
+ Page,
+ LayoutSingleColumn,
+ LayoutWrapperTopbar,
+ LayoutWrapperMain,
+ LayoutWrapperFooter,
+ Footer,
+} from '../../components';
import { LocationSearchForm, TopbarContainer } from '../../containers';
import css from './NotFoundPage.css';
@@ -45,19 +52,28 @@ export class NotFoundPageComponent extends Component {
title={title}
scrollingDisabled={scrollingDisabled}
>
-
-
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap b/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
index 2e24d661..5d4eb3da 100644
--- a/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
+++ b/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
@@ -7,28 +7,49 @@ exports[`NotFoundPageComponent matches snapshot 1`] = `
scrollingDisabled={false}
title="NotFoundPage.title"
>
-
-
-
+
+
+
+
+
- 404
+
+
+ 404
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
`;
diff --git a/src/containers/OrderPage/OrderPage.css b/src/containers/OrderPage/OrderPage.css
index 1a910d14..fa25c1b0 100644
--- a/src/containers/OrderPage/OrderPage.css
+++ b/src/containers/OrderPage/OrderPage.css
@@ -1,5 +1,9 @@
@import '../../marketplace.css';
+.mainContent {
+ margin-bottom: 122px;
+}
+
.loading {
margin-left: 24px;
margin-right: 24px;
diff --git a/src/containers/OrderPage/OrderPage.js b/src/containers/OrderPage/OrderPage.js
index 15412e9d..2d6b1d55 100644
--- a/src/containers/OrderPage/OrderPage.js
+++ b/src/containers/OrderPage/OrderPage.js
@@ -8,7 +8,16 @@ import * as propTypes from '../../util/propTypes';
import { ensureListing, ensureTransaction } from '../../util/data';
import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { NamedRedirect, OrderDetailsPanel, Page } from '../../components';
+import {
+ NamedRedirect,
+ OrderDetailsPanel,
+ Page,
+ LayoutSingleColumn,
+ LayoutWrapperTopbar,
+ LayoutWrapperMain,
+ LayoutWrapperFooter,
+ Footer,
+} from '../../components';
import { TopbarContainer } from '../../containers';
import { loadData } from './OrderPage.duck';
@@ -73,8 +82,15 @@ export const OrderPageComponent = props => {
title={intl.formatMessage({ id: 'OrderPage.title' }, { listingTitle })}
scrollingDisabled={scrollingDisabled}
>
-
- {panel}
+
+
+
+
+ {panel}
+
+
+
+
);
};
diff --git a/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap b/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
index 72972587..aacc3b44 100644
--- a/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
+++ b/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
@@ -7,114 +7,135 @@ exports[`OrderPage matches snapshot 1`] = `
scrollingDisabled={false}
title="OrderPage.title"
>
-
-
+
+
+
+
+
+ "type": "transaction",
+ }
+ }
+ />
+
+
+
+
+
`;
diff --git a/src/containers/PasswordChangePage/PasswordChangePage.js b/src/containers/PasswordChangePage/PasswordChangePage.js
index 1fa4f3e4..03275edf 100644
--- a/src/containers/PasswordChangePage/PasswordChangePage.js
+++ b/src/containers/PasswordChangePage/PasswordChangePage.js
@@ -10,6 +10,8 @@ import {
LayoutWrapperMain,
LayoutWrapperSideNav,
LayoutWrapperTopbar,
+ LayoutWrapperFooter,
+ Footer,
Page,
TabNav,
UserNav,
@@ -89,6 +91,9 @@ export const PasswordChangePageComponent = props => {
{changePasswordForm}
+
+
+
);
diff --git a/src/containers/PasswordChangePage/__snapshots__/PasswordChangePage.test.js.snap b/src/containers/PasswordChangePage/__snapshots__/PasswordChangePage.test.js.snap
index a75ddac6..7141ba68 100644
--- a/src/containers/PasswordChangePage/__snapshots__/PasswordChangePage.test.js.snap
+++ b/src/containers/PasswordChangePage/__snapshots__/PasswordChangePage.test.js.snap
@@ -73,6 +73,12 @@ exports[`PasswordChangePage matches snapshot 1`] = `
+
+
+
`;
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
index f28f1d45..0a5bdefb 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css
@@ -4,6 +4,14 @@
@apply --marketplaceModalRootStyles;
}
+.layoutWrapperMain {
+ min-height: calc(100vh - var(--topbarHeight));
+
+ @media (--viewportMedium) {
+ min-height: calc(100vh - var(--topbarHeightDesktop));
+ }
+}
+
.submitEmailContent,
.genericErrorContent,
.emailSubmittedContent,
diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
index 73c9f4c8..781ca282 100644
--- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
+++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js
@@ -9,7 +9,16 @@ import {
isPasswordRecoveryEmailNotVerifiedError,
} from '../../util/errors';
import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { Page, InlineTextButton, IconKeys } from '../../components';
+import {
+ Page,
+ InlineTextButton,
+ IconKeys,
+ LayoutSingleColumn,
+ LayoutWrapperMain,
+ LayoutWrapperTopbar,
+ LayoutWrapperFooter,
+ Footer,
+} from '../../components';
import { PasswordRecoveryForm, TopbarContainer } from '../../containers';
import {
@@ -152,8 +161,17 @@ export const PasswordRecoveryPageComponent = props => {
return (
-
- {content}
+
+
+
+
+
+ {content}
+
+
+
+
+
);
};
diff --git a/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap
index e875bc0e..e0cafdf2 100644
--- a/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap
+++ b/src/containers/PasswordRecoveryPage/__snapshots__/PasswordRecoveryPage.test.js.snap
@@ -6,36 +6,57 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
logoutError={null}
title="PasswordRecoveryPage.title"
>
-
-
+
+
+
+
+
+
+
+
+
+
+
`;
diff --git a/src/containers/PasswordResetPage/PasswordResetPage.css b/src/containers/PasswordResetPage/PasswordResetPage.css
index b5af3658..0524dc0e 100644
--- a/src/containers/PasswordResetPage/PasswordResetPage.css
+++ b/src/containers/PasswordResetPage/PasswordResetPage.css
@@ -1,5 +1,13 @@
@import '../../marketplace.css';
+.layoutWrapperMain {
+ min-height: calc(100vh - var(--topbarHeight));
+
+ @media (--viewportMedium) {
+ min-height: calc(100vh - var(--topbarHeightDesktop));
+ }
+}
+
.root {
@apply --marketplaceModalRootStyles;
}
diff --git a/src/containers/PasswordResetPage/PasswordResetPage.js b/src/containers/PasswordResetPage/PasswordResetPage.js
index 1308c55f..5d534536 100644
--- a/src/containers/PasswordResetPage/PasswordResetPage.js
+++ b/src/containers/PasswordResetPage/PasswordResetPage.js
@@ -7,7 +7,17 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import * as propTypes from '../../util/propTypes';
import { parse } from '../../util/urlHelpers';
import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { Page, NamedLink, IconKeys, IconKeysSuccess } from '../../components';
+import {
+ Page,
+ NamedLink,
+ IconKeys,
+ IconKeysSuccess,
+ LayoutSingleColumn,
+ LayoutWrapperTopbar,
+ LayoutWrapperMain,
+ LayoutWrapperFooter,
+ Footer,
+} from '../../components';
import { PasswordResetForm, TopbarContainer } from '../../containers';
import { resetPassword } from './PasswordResetPage.duck';
@@ -118,8 +128,17 @@ export class PasswordResetPageComponent extends Component {
logoutError={logoutError}
scrollingDisabled={scrollingDisabled}
>
-
-
{content}
+
+
+
+
+
+ {content}
+
+
+
+
+
);
}
diff --git a/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.js b/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.js
index f3bb53c0..7e7f588c 100644
--- a/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.js
+++ b/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.js
@@ -4,7 +4,14 @@ import { compose } from 'redux';
import { connect } from 'react-redux';
import * as propTypes from '../../util/propTypes';
import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { Page } from '../../components';
+import {
+ Page,
+ LayoutSingleColumn,
+ LayoutWrapperTopbar,
+ LayoutWrapperMain,
+ LayoutWrapperFooter,
+ Footer,
+} from '../../components';
import { TopbarContainer } from '../../containers';
export const PayoutPreferencesPageComponent = props => {
@@ -17,7 +24,15 @@ export const PayoutPreferencesPageComponent = props => {
title="Payout preferences"
scrollingDisabled={scrollingDisabled}
>
-
+
+
+
+
+ Content
+
+
+
+
);
};
diff --git a/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap b/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
index f6150594..558797ae 100644
--- a/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
+++ b/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
@@ -7,6 +7,28 @@ exports[`PayoutPreferencesPage matches snapshot 1`] = `
scrollingDisabled={false}
title="Payout preferences"
>
-
+
+
+
+
+
+ Content
+
+
+
+
+
`;
diff --git a/src/containers/ProfileSettingsPage/ProfileSettingsPage.css b/src/containers/ProfileSettingsPage/ProfileSettingsPage.css
index 561c5c5d..a0e04717 100644
--- a/src/containers/ProfileSettingsPage/ProfileSettingsPage.css
+++ b/src/containers/ProfileSettingsPage/ProfileSettingsPage.css
@@ -5,7 +5,7 @@
}
.content {
width: calc(100% - 48px);
- margin: 12px 24px;
+ margin: 12px 24px 24px 24px;
@media (--viewportMedium) {
max-width: 565px;
diff --git a/src/containers/ProfileSettingsPage/ProfileSettingsPage.js b/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
index 43291b97..29d10fc4 100644
--- a/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
+++ b/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
@@ -6,7 +6,15 @@ import { FormattedMessage } from 'react-intl';
import * as propTypes from '../../util/propTypes';
import { ensureCurrentUser } from '../../util/data';
import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { Page, UserNav } from '../../components';
+import {
+ Page,
+ UserNav,
+ LayoutSingleColumn,
+ LayoutWrapperTopbar,
+ LayoutWrapperMain,
+ LayoutWrapperFooter,
+ Footer,
+} from '../../components';
import { ProfileSettingsForm, TopbarContainer } from '../../containers';
import { clearUpdatedForm, updateProfile, uploadImage } from './ProfileSettingsPage.duck';
@@ -91,15 +99,23 @@ export class ProfileSettingsPageComponent extends Component {
title="Profile settings"
scrollingDisabled={scrollingDisabled}
>
-
-
-
-
-
-
-
- {profileSettingsForm}
-
+
+
+
+
+
+
+
+
+
+
+ {profileSettingsForm}
+
+
+
+
+
+
);
}
diff --git a/src/containers/ProfileSettingsPage/__snapshots__/ProfileSettingsPage.test.js.snap b/src/containers/ProfileSettingsPage/__snapshots__/ProfileSettingsPage.test.js.snap
index b2dd269e..e18e2abd 100644
--- a/src/containers/ProfileSettingsPage/__snapshots__/ProfileSettingsPage.test.js.snap
+++ b/src/containers/ProfileSettingsPage/__snapshots__/ProfileSettingsPage.test.js.snap
@@ -7,21 +7,42 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
scrollingDisabled={false}
title="Profile settings"
>
-
-
-
-
-
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
diff --git a/src/containers/SalePage/SalePage.css b/src/containers/SalePage/SalePage.css
index d1c0bc0a..fe22e749 100644
--- a/src/containers/SalePage/SalePage.css
+++ b/src/containers/SalePage/SalePage.css
@@ -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;
diff --git a/src/containers/SalePage/SalePage.js b/src/containers/SalePage/SalePage.js
index 66cc6916..dec4a478 100644
--- a/src/containers/SalePage/SalePage.js
+++ b/src/containers/SalePage/SalePage.js
@@ -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 => {
);
+ // 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 ? (
{
title={intl.formatMessage({ id: 'SalePage.title' }, { title: listingTitle })}
scrollingDisabled={scrollingDisabled}
>
-
- {panel}
+
+
+
+
+
+ {panel}
+
+
+
+
+
);
};
diff --git a/src/containers/SalePage/__snapshots__/SalePage.test.js.snap b/src/containers/SalePage/__snapshots__/SalePage.test.js.snap
index 5cecfb66..ec5b9f9f 100644
--- a/src/containers/SalePage/__snapshots__/SalePage.test.js.snap
+++ b/src/containers/SalePage/__snapshots__/SalePage.test.js.snap
@@ -7,122 +7,143 @@ exports[`SalePage matches snapshot 1`] = `
scrollingDisabled={false}
title="SalePage.title"
>
-
-
-
+
+
+
+
+
+
-
+ "type": "transaction",
+ }
+ }
+ />
+
+
+
+
+
+
`;
diff --git a/src/containers/SecurityPage/SecurityPage.js b/src/containers/SecurityPage/SecurityPage.js
deleted file mode 100644
index 2b8e6bf7..00000000
--- a/src/containers/SecurityPage/SecurityPage.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import * as propTypes from '../../util/propTypes';
-import { isScrollingDisabled } from '../../ducks/UI.duck';
-import { Page } from '../../components';
-import { TopbarContainer } from '../../containers';
-
-export const SecurityPageComponent = props => {
- const { authInfoError, logoutError, scrollingDisabled } = props;
-
- return (
-
-
-
- );
-};
-
-SecurityPageComponent.defaultProps = {
- authInfoError: null,
- logoutError: null,
-};
-
-const { bool } = PropTypes;
-
-SecurityPageComponent.propTypes = {
- authInfoError: propTypes.error,
- logoutError: propTypes.error,
- scrollingDisabled: bool.isRequired,
-};
-
-const mapStateToProps = state => {
- // Page needs authInfoError and logoutError
- const { authInfoError, logoutError } = state.Auth;
- return {
- authInfoError,
- logoutError,
- scrollingDisabled: isScrollingDisabled(state),
- };
-};
-
-const SecurityPage = compose(connect(mapStateToProps))(SecurityPageComponent);
-
-export default SecurityPage;
diff --git a/src/containers/SecurityPage/SecurityPage.test.js b/src/containers/SecurityPage/SecurityPage.test.js
deleted file mode 100644
index ba47abfc..00000000
--- a/src/containers/SecurityPage/SecurityPage.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { renderShallow } from '../../util/test-helpers';
-import { SecurityPageComponent } from './SecurityPage';
-
-const noop = () => null;
-
-describe('SecurityPage', () => {
- it('matches snapshot', () => {
- const tree = renderShallow(
-
- );
- expect(tree).toMatchSnapshot();
- });
-});
diff --git a/src/containers/SecurityPage/__snapshots__/SecurityPage.test.js.snap b/src/containers/SecurityPage/__snapshots__/SecurityPage.test.js.snap
deleted file mode 100644
index 0577000c..00000000
--- a/src/containers/SecurityPage/__snapshots__/SecurityPage.test.js.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SecurityPage matches snapshot 1`] = `
-
-
-
-`;
diff --git a/src/containers/index.js b/src/containers/index.js
index fc02bac8..80c9a566 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -35,7 +35,6 @@ export { default as ProfileSettingsForm } from './ProfileSettingsForm/ProfileSet
export { default as ProfileSettingsPage } from './ProfileSettingsPage/ProfileSettingsPage';
export { default as SalePage } from './SalePage/SalePage';
export { default as SearchPage } from './SearchPage/SearchPage';
-export { default as SecurityPage } from './SecurityPage/SecurityPage';
export { default as SignupForm } from './SignupForm/SignupForm';
export { default as StaticPage } from './StaticPage/StaticPage';
export { default as StripePaymentForm } from './StripePaymentForm/StripePaymentForm';
diff --git a/src/routeConfiguration.js b/src/routeConfiguration.js
index 61d0a0d8..3f7e980e 100644
--- a/src/routeConfiguration.js
+++ b/src/routeConfiguration.js
@@ -18,7 +18,6 @@ import {
ProfileSettingsPage,
SalePage,
SearchPage,
- SecurityPage,
StyleguidePage,
EmailVerificationPage,
} from './containers';
@@ -232,12 +231,6 @@ const routeConfiguration = () => {
name: 'PayoutPreferencesPage',
component: props => ,
},
- {
- path: '/account/security',
- auth: true,
- name: 'SecurityPage',
- component: props => ,
- },
{
path: '/styleguide',
name: 'Styleguide',