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.