Use splitted edit-listing-form in wizard and pass needed functions from EditListingPage

src/components/EditListingWizard/EditListingWizard.example.js

@@ -1,11 +1,19 @@
 import { createListing } from '../../util/test-data';
+import { flattenRoutes } from '../../util/routes';
+import routesConfiguration from '../../routesConfiguration';
 import EditListingWizard from './EditListingWizard';
 
 export const NoPhotos = {
   component: EditListingWizard,
   props: {
-    selectedTab: 'price',
+    flattenedRoutes: flattenRoutes(routesConfiguration),
+    history: { push: () => {} },
+    selectedTab: 'pricing',
+    images: [],
     listing: createListing('listing1'),
+    stripeConnected: true,
+    onImageUpload: () => {},
+    onUpdateImageOrder: () => {},
     onCreateListing: () => {},
     onCreateListingDraft: () => {},
     onUpdateListingDraft: () => {},

src/components/EditListingWizard/EditListingWizard.js

@@ -3,7 +3,15 @@ import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { ensureListing } from '../../util/data';
 import { createSlug } from '../../util/urlHelpers';
-import { NamedRedirect, Tabs } from '../../components';
+import { createResourceLocatorString } from '../../util/routes';
+import {
+  EditListingDescriptionPanel,
+  EditListingLocationPanel,
+  EditListingPhotosPanel,
+  EditListingPricingPanel,
+  NamedRedirect,
+  Tabs,
+} from '../../components';
 
 import css from './EditListingWizard.css';
 
@@ -50,12 +58,18 @@ TestPanel.propTypes = {
 const EditListingWizard = props => {
   const {
     className,
+    flattenedRoutes,
+    history,
+    images,
     listing,
     onCreateListing,
     onCreateListingDraft,
+    onImageUpload,
+    onUpdateImageOrder,
     onUpdateListingDraft,
     rootClassName,
     selectedTab,
+    stripeConnected,
   } = props;
 
   const rootClasses = rootClassName || css.root;
@@ -85,42 +99,65 @@ const EditListingWizard = props => {
 
   return (
     <Tabs className={classes}>
-      <TestPanel
+      <EditListingDescriptionPanel
         tabLabel="Description"
         tabLinkProps={descriptionLinkProps}
-        onSubmit={onUpcertListingDraft}
         selected={selectedTab === DESCRIPTION}
         disabled={!stepsStatus[DESCRIPTION]}
-      >
-        Description form
-      </TestPanel>
-      <TestPanel
+        listing={listing}
+        onSubmit={values => {
+          onUpsertListingDraft(values);
+          // Redirect to EditListingLocationPage
+          history.push(
+            createResourceLocatorString('EditListingLocationPage', flattenedRoutes, {}, {})
+          );
+        }}
+      />
+      <EditListingLocationPanel
         tabLabel="Location"
         tabLinkProps={{ name: 'EditListingLocationPage' }}
-        onSubmit={onUpdateListingDraft}
         selected={selectedTab === LOCATION}
         disabled={!stepsStatus[LOCATION]}
-      >
-        Location form
-      </TestPanel>
-      <TestPanel
+        listing={listing}
+        onSubmit={values => {
+          const { selectedPlace: { address, origin } } = values.location;
+          onUpdateListingDraft({ address, geolocation: origin });
+
+          // Redirect to EditListingPricingPage
+          history.push(
+            createResourceLocatorString('EditListingPricingPage', flattenedRoutes, {}, {})
+          );
+        }}
+      />
+      <EditListingPricingPanel
         tabLabel="Pricing"
-        tabLinkProps={{ name: 'EditListingPricePage' }}
-        onSubmit={onUpdateListingDraft}
-        selected={selectedTab === PRICE}
+        tabLinkProps={{ name: 'EditListingPricingPage' }}
+        selected={selectedTab === PRICING}
         disabled={!stepsStatus[PRICING]}
-      >
-        Pricing form
-      </TestPanel>
-      <TestPanel
+        listing={listing}
+        onSubmit={values => {
+          onUpdateListingDraft(values);
+          // Redirect to EditListingPhotosPage
+          history.push(
+            createResourceLocatorString('EditListingPhotosPage', flattenedRoutes, {}, {})
+          );
+        }}
+      />
+      <EditListingPhotosPanel
         tabLabel="Photos"
         tabLinkProps={{ name: 'EditListingPhotosPage' }}
-        onSubmit={onCreateListing}
         selected={selectedTab === PHOTOS}
         disabled={!stepsStatus[PHOTOS]}
-      >
-        Photos form
-      </TestPanel>
+        listing={listing}
+        images={images}
+        onImageUpload={onImageUpload}
+        onSubmit={values => {
+          const { country, images: updatedImages } = values;
+          onCreateListing({ ...listing.attributes, country, images: updatedImages });
+        }}
+        onUpdateImageOrder={onUpdateImageOrder}
+        stripeConnected={stripeConnected}
+      />
     </Tabs>
   );
 };
@@ -131,16 +168,34 @@ EditListingWizard.defaultProps = {
   rootClassName: null,
 };
 
-const { func, oneOf, string } = PropTypes;
+const { array, arrayOf, bool, func, object, oneOf, shape, string } = PropTypes;
 
 EditListingWizard.propTypes = {
   className: string,
-  listing: propTypes.listing,
+  flattenedRoutes: arrayOf(propTypes.route).isRequired,
+  history: shape({
+    push: func.isRequired,
+  }).isRequired,
+  images: array.isRequired,
+  listing: shape({
+    // TODO Should be propTypes.listing after API support is added.
+    attributes: shape({
+      address: string,
+      description: string,
+      geolocation: object,
+      pricing: object,
+      title: string,
+    }),
+    images: array,
+  }),
   onCreateListing: func.isRequired,
   onCreateListingDraft: func.isRequired,
+  onImageUpload: func.isRequired,
+  onUpdateImageOrder: func.isRequired,
   onUpdateListingDraft: func.isRequired,
   rootClassName: string,
   selectedTab: oneOf(STEPS).isRequired,
+  stripeConnected: bool.isRequired,
 };
 
 export default EditListingWizard;

src/containers/EditListingPage/EditListingPage.js

@@ -1,4 +1,6 @@
 import React, { PropTypes } from 'react';
+import { compose } from 'redux';
+import { withRouter } from 'react-router-dom';
 import { intlShape, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { types } from '../../util/sdkLoader';
@@ -16,13 +18,21 @@ import {
 } from './EditListingPage.duck';
 
 const formatRequestData = values => {
-  const { description, images, location, price, title, bankAccountToken } = values;
-  const { selectedPlace: { address, origin, country } } = location;
+  const {
+    address,
+    country,
+    description,
+    images,
+    geolocation,
+    price,
+    title,
+    bankAccountToken,
+  } = values;
 
   return {
     address,
     description,
-    geolocation: origin,
+    geolocation,
     images: images.map(i => i.imageId),
     price,
     title,
@@ -34,6 +44,8 @@ const formatRequestData = values => {
 // N.B. All the presentational content needs to be extracted to their own components
 export const EditListingPageComponent = props => {
   const {
+    flattenedRoutes,
+    history,
     intl,
     onCreateListing,
     onImageUpload,
@@ -79,6 +91,8 @@ export const EditListingPageComponent = props => {
       <PageLayout title={title}>
         <EditListingWizard
           disabled={disableForm}
+          flattenedRoutes={flattenedRoutes}
+          history={history}
           images={images}
           listing={page.listingDraft}
           onCreateListing={onCreateListing}
@@ -113,9 +127,13 @@ EditListingPageComponent.defaultProps = {
   currentUser: null,
 };
 
-const { func, object, shape, string } = PropTypes;
+const { arrayOf, func, object, shape, string } = PropTypes;
 
 EditListingPageComponent.propTypes = {
+  flattenedRoutes: arrayOf(propTypes.route).isRequired,
+  history: shape({
+    push: func.isRequired,
+  }).isRequired,
   intl: intlShape.isRequired,
   onCreateListing: func.isRequired,
   onImageUpload: func.isRequired,
@@ -154,7 +172,7 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-const EditListingPage = connect(mapStateToProps, mapDispatchToProps)(
+const EditListingPage = compose(connect(mapStateToProps, mapDispatchToProps), withRouter)(
   injectIntl(EditListingPageComponent)
 );
 

src/containers/EditListingPage/EditListingPage.test.js

@@ -8,6 +8,8 @@ describe('EditListingPageComponent', () => {
     const getListing = () => null;
     const tree = renderShallow(
       <EditListingPageComponent
+        flattenedRoutes={[]}
+        history={{ push: v => v }}
         getListing={getListing}
         images={[]}
         intl={fakeIntl}

src/containers/EditListingPage/__snapshots__/EditListingPage.test.js.snap

@@ -3,6 +3,12 @@ exports[`EditListingPageComponent matches snapshot 1`] = `
   title="EditListingPage.titleCreateListing">
   <EditListingWizard
     className={null}
+    flattenedRoutes={Array []}
+    history={
+      Object {
+        "push": [Function],
+      }
+    }
     images={Array []}
     listing={null}
     onCreateListing={[Function]}