diff --git a/src/app.test.js b/src/app.test.js
index 0e0651d6..534ddcbc 100644
--- a/src/app.test.js
+++ b/src/app.test.js
@@ -63,7 +63,7 @@ describe('Application', () => {
const urlRedirects = {
'/l/new': '/login',
'/l/listing-title-slug/1234/edit': '/login',
- '/checkout': '/login',
+ '/l/listing-title-slug/1234/checkout': '/login',
'/u/1234/edit': '/login',
'/orders': '/login',
'/sales': '/login',
diff --git a/src/components/AuthorInfo/AuthorInfo.js b/src/components/AuthorInfo/AuthorInfo.js
index d0b3e79a..b7441340 100644
--- a/src/components/AuthorInfo/AuthorInfo.js
+++ b/src/components/AuthorInfo/AuthorInfo.js
@@ -21,7 +21,7 @@ const AuthorInfo = props => {
-
+
diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js
index f166f3c8..7c20f335 100644
--- a/src/containers/CheckoutPage/CheckoutPage.js
+++ b/src/containers/CheckoutPage/CheckoutPage.js
@@ -12,11 +12,11 @@ import { initiateOrder, setInitialValues } from './CheckoutPage.duck';
import css from './CheckoutPage.css';
-const ensureListingProperties = (listing) => {
+const ensureListingProperties = listing => {
const empty = { id: null, type: 'listing', attributes: {}, author: {}, images: [] };
// assume own properties: id, type, attributes etc.
return { ...empty, ...listing };
-}
+};
export class CheckoutPageComponent extends Component {
constructor(props) {
@@ -47,15 +47,17 @@ export class CheckoutPageComponent extends Component {
}
render() {
- const { bookingDates, initiateOrderError, intl, listing } = this.props;
+ const { bookingDates, initiateOrderError, intl, listing, params } = this.props;
const { bookingStart, bookingEnd } = bookingDates || {};
const currentListing = ensureListingProperties(listing);
const price = currentListing.attributes.price;
if (!listing || !price) {
// eslint-disable-next-line no-console
- console.error(`Listing price is undefined for listing (${currentListing.id}). Redirecting to SearchPage.`);
- return ;
+ console.error(
+ `Listing price is undefined for listing (${currentListing.id}). Redirecting to SearchPage.`
+ );
+ return ;
}
const title = intl.formatMessage(
@@ -98,9 +100,13 @@ export class CheckoutPageComponent extends Component {
}
}
-CheckoutPageComponent.defaultProps = { bookingDates: null, initiateOrderError: null, listing: null };
+CheckoutPageComponent.defaultProps = {
+ bookingDates: null,
+ initiateOrderError: null,
+ listing: null,
+};
-const { arrayOf, func, instanceOf, shape } = PropTypes;
+const { arrayOf, func, instanceOf, shape, string } = PropTypes;
CheckoutPageComponent.propTypes = {
bookingDates: shape({
@@ -109,6 +115,10 @@ CheckoutPageComponent.propTypes = {
}),
initiateOrderError: instanceOf(Error),
listing: propTypes.listing,
+ params: shape({
+ id: string,
+ slug: string,
+ }).isRequired,
sendOrderRequest: func.isRequired,
// from injectIntl
@@ -139,7 +149,7 @@ const CheckoutPage = compose(
injectIntl
)(CheckoutPageComponent);
-CheckoutPage.setInitialValues = initiallValues => setInitialValues(initiallValues);
+CheckoutPage.setInitialValues = initialValues => setInitialValues(initialValues);
CheckoutPage.displayName = 'CheckoutPage';
diff --git a/src/containers/CheckoutPage/CheckoutPage.test.js b/src/containers/CheckoutPage/CheckoutPage.test.js
index 3f7980ab..2b1f18cd 100644
--- a/src/containers/CheckoutPage/CheckoutPage.test.js
+++ b/src/containers/CheckoutPage/CheckoutPage.test.js
@@ -17,6 +17,7 @@ describe('CheckoutPage', () => {
history: { push: noop },
intl: fakeIntl,
listing: { ...createListing('listing1'), author: createUser('author') },
+ params: { id: 'listing1', slug: 'listing1' },
sendOrderRequest: noop,
};
const tree = renderShallow();
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index aa043f68..21865e57 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -6,6 +6,7 @@ import { union, without } from 'lodash';
import config from '../../config';
import * as propTypes from '../../util/propTypes';
import { types } from '../../util/sdkLoader';
+import { createSlug } from '../../util/urlHelpers';
import { convertMoneyToNumber } from '../../util/currency';
import { createResourceLocatorString, findRouteByRouteName } from '../../util/routes';
import { Button, Map, ModalInMobile, PageLayout } from '../../components';
@@ -65,7 +66,14 @@ export class ListingPageComponent extends Component {
dispatch(setInitialValues({ listing, bookingDates: values }));
// Redirect to CheckoutPage
- history.push(createResourceLocatorString('CheckoutPage', flattenedRoutes, {}, {}));
+ history.push(
+ createResourceLocatorString(
+ 'CheckoutPage',
+ flattenedRoutes,
+ { id: listing.id.uuid, slug: createSlug(listing.attributes.title) },
+ {}
+ )
+ );
}
togglePageClassNames(className, addClass = true) {
diff --git a/src/routesConfiguration.js b/src/routesConfiguration.js
index 7bd76b1f..a372e396 100644
--- a/src/routesConfiguration.js
+++ b/src/routesConfiguration.js
@@ -75,6 +75,14 @@ const routesConfiguration = [
loadData: (params, search) => ListingPage.loadData(params, search),
component: props => ,
},
+ {
+ path: '/l/:slug/:id/checkout',
+ auth: true,
+ exact: true,
+ name: 'CheckoutPage',
+ setInitialValues: initialValues => CheckoutPage.setInitialValues(initialValues),
+ component: props => ,
+ },
{
auth: true,
path: '/l/new',
@@ -115,14 +123,6 @@ const routesConfiguration = [
},
],
},
- {
- path: '/checkout',
- auth: true,
- exact: true,
- name: 'CheckoutPage',
- setInitialValues: initialValues => CheckoutPage.setInitialValues(initialValues),
- component: props => ,
- },
{
path: '/login',
exact: true,
diff --git a/src/util/routes.js b/src/util/routes.js
index 43a3d72c..581582f1 100644
--- a/src/util/routes.js
+++ b/src/util/routes.js
@@ -88,7 +88,7 @@ export const createResourceLocatorString = (
* Find component related to route name
* E.g. `const PageComponent = findComponentByRouteName('CheckoutPage', routes);`
* Then we can call static methods of given component:
- * `dispatch(PageComponent.customPageState({ listing, bookingDates }));`
+ * `dispatch(PageComponent.setInitialValues({ listing, bookingDates }));`
*
* @param {String} nameToFind - Route name
* @param {Array<{ route }>} flattenedRoutes - Route configuration as flattened array.