Review changes: path change to accommodate previous page params.

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

src/components/AuthorInfo/AuthorInfo.js

@@ -21,7 +21,7 @@ const AuthorInfo = props => {
       </div>
       <div className={css.authorDetails}>
         <span className={css.authorName}>
-          <FormattedMessage id="AuthorInfo.host" values={{authorName}} />
+          <FormattedMessage id="AuthorInfo.host" values={{ authorName }} />
         </span>
       </div>
     </div>

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 <NamedRedirect name="SearchPage" />;
+      console.error(
+        `Listing price is undefined for listing (${currentListing.id}). Redirecting to SearchPage.`
+      );
+      return <NamedRedirect name="ListingPage" params={params} />;
     }
 
     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';
 

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(<CheckoutPageComponent {...props} />);

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) {

src/routesConfiguration.js

@@ -75,6 +75,14 @@ const routesConfiguration = [
         loadData: (params, search) => ListingPage.loadData(params, search),
         component: props => <ListingPage {...props} tab="book" />,
       },
+      {
+        path: '/l/:slug/:id/checkout',
+        auth: true,
+        exact: true,
+        name: 'CheckoutPage',
+        setInitialValues: initialValues => CheckoutPage.setInitialValues(initialValues),
+        component: props => <CheckoutPage {...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 => <CheckoutPage {...props} />,
-  },
   {
     path: '/login',
     exact: true,

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.