Merge pull request #947 from sharetribe/draft-listing

Draft listing

CHANGELOG.md

@@ -14,6 +14,11 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2018-11-XX
 
+## v2.3.0 2018-11-13
+
+* [add] Draft listing is used in EditListingWizard, ManageListingCard and ListingPage.
+  From now on description panel creates a draft listing and photos panel publishes it. You can also view your current draft listings from 'your listings' page.
+  [#947](https://github.com/sharetribe/flex-template-web/pull/947)
 * [fix] Firefox showed select options with the same color as select itself. Now options have their
   own color set and *placeholder option needs to be disabled*.
   [#946](https://github.com/sharetribe/flex-template-web/pull/946)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
@@ -49,7 +49,7 @@
     "redux-thunk": "^2.2.0",
     "sanitize.css": "^5.0.0",
     "seedrandom": "^2.4.3",
-    "sharetribe-flex-sdk": "^1.0.0",
+    "sharetribe-flex-sdk": "^1.1.0",
     "sharetribe-scripts": "1.1.5",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.4",

src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { bool, func, object, string } from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { ensureOwnListing } from '../../util/data';
 import { ListingLink } from '../../components';
+import { LISTING_STATE_DRAFT } from '../../util/types';
 import { EditListingDescriptionForm } from '../../forms';
 import config from '../../config';
 
@@ -26,7 +27,8 @@ const EditListingDescriptionPanel = props => {
   const currentListing = ensureOwnListing(listing);
   const { description, title, publicData } = currentListing.attributes;
 
-  const panelTitle = currentListing.id ? (
+  const isPublished = currentListing.id && currentListing.attributes.state !== LISTING_STATE_DRAFT;
+  const panelTitle = isPublished ? (
     <FormattedMessage
       id="EditListingDescriptionPanel.title"
       values={{ listingTitle: <ListingLink listing={listing} /> }}
@@ -54,19 +56,18 @@ const EditListingDescriptionPanel = props => {
         }}
         onChange={onChange}
         updated={panelUpdated}
-        updateError={errors.updateListingError}
         updateInProgress={updateInProgress}
+        fetchErrors={errors}
         categories={config.custom.categories}
       />
     </div>
   );
 };
 
-const { func, object, string, bool } = PropTypes;
-
 EditListingDescriptionPanel.defaultProps = {
   className: null,
   rootClassName: null,
+  errors: null,
   listing: null,
 };
 

src/components/EditListingFeaturesPanel/EditListingFeaturesPanel.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 
+import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ensureListing } from '../../util/data';
 import { EditListingFeaturesForm } from '../../forms';
 import { ListingLink } from '../../components';
@@ -28,7 +29,8 @@ const EditListingFeaturesPanel = props => {
   const currentListing = ensureListing(listing);
   const { publicData } = currentListing.attributes;
 
-  const panelTitle = currentListing.id ? (
+  const isPublished = currentListing.id && currentListing.attributes.state !== LISTING_STATE_DRAFT;
+  const panelTitle = isPublished ? (
     <FormattedMessage
       id="EditListingFeaturesPanel.title"
       values={{ listingTitle: <ListingLink listing={listing} /> }}
@@ -58,8 +60,8 @@ const EditListingFeaturesPanel = props => {
         onChange={onChange}
         saveActionMsg={submitButtonText}
         updated={panelUpdated}
-        updateError={errors.updateListingError}
         updateInProgress={updateInProgress}
+        fetchErrors={errors}
       />
     </div>
   );

src/components/EditListingLocationPanel/EditListingLocationPanel.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
+import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ensureOwnListing } from '../../util/data';
 import { ListingLink } from '../../components';
 import { EditListingLocationForm } from '../../forms';
@@ -58,7 +59,9 @@ class EditListingLocationPanel extends Component {
     const classes = classNames(rootClassName || css.root, className);
     const currentListing = ensureOwnListing(listing);
 
-    const panelTitle = currentListing.id ? (
+    const isPublished =
+      currentListing.id && currentListing.attributes.state !== LISTING_STATE_DRAFT;
+    const panelTitle = isPublished ? (
       <FormattedMessage
         id="EditListingLocationPanel.title"
         values={{ listingTitle: <ListingLink listing={listing} /> }}
@@ -95,8 +98,8 @@ class EditListingLocationPanel extends Component {
           onChange={onChange}
           saveActionMsg={submitButtonText}
           updated={panelUpdated}
-          updateError={errors.updateListingError}
           updateInProgress={updateInProgress}
+          fetchErrors={errors}
         />
       </div>
     );

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { array, bool, func, object, string } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import { LISTING_STATE_DRAFT } from '../../util/types';
 import { EditListingPhotosForm } from '../../forms';
 import { ensureOwnListing } from '../../util/data';
 import { ListingLink } from '../../components';
@@ -15,7 +16,7 @@ class EditListingPhotosPanel extends Component {
       rootClassName,
       errors,
       fetchInProgress,
-      newListingCreated,
+      newListingPublished,
       images,
       listing,
       onImageUpload,
@@ -32,7 +33,9 @@ class EditListingPhotosPanel extends Component {
     const classes = classNames(rootClass, className);
     const currentListing = ensureOwnListing(listing);
 
-    const panelTitle = currentListing.id ? (
+    const isPublished =
+      currentListing.id && currentListing.attributes.state !== LISTING_STATE_DRAFT;
+    const panelTitle = isPublished ? (
       <FormattedMessage
         id="EditListingPhotosPanel.title"
         values={{ listingTitle: <ListingLink listing={listing} /> }}
@@ -47,8 +50,8 @@ class EditListingPhotosPanel extends Component {
         <EditListingPhotosForm
           className={css.form}
           disabled={fetchInProgress}
-          ready={newListingCreated}
-          errors={errors}
+          ready={newListingPublished}
+          fetchErrors={errors}
           initialValues={{ images }}
           images={images}
           onImageUpload={onImageUpload}
@@ -61,16 +64,13 @@ class EditListingPhotosPanel extends Component {
           onRemoveImage={onRemoveImage}
           saveActionMsg={submitButtonText}
           updated={panelUpdated}
-          updateError={errors.updateListingError}
           updateInProgress={updateInProgress}
         />
       </div>
     );
   }
 }
 
-const { array, bool, func, object, shape, string } = PropTypes;
-
 EditListingPhotosPanel.defaultProps = {
   className: null,
   rootClassName: null,
@@ -82,15 +82,9 @@ EditListingPhotosPanel.defaultProps = {
 EditListingPhotosPanel.propTypes = {
   className: string,
   rootClassName: string,
-  errors: shape({
-    createListingsError: object,
-    updateListingError: object,
-    showListingsError: object,
-    uploadImageError: object,
-    createStripeAccountError: object,
-  }),
+  errors: object,
   fetchInProgress: bool.isRequired,
-  newListingCreated: bool.isRequired,
+  newListingPublished: bool.isRequired,
   images: array,
 
   // We cannot use propTypes.listing since the listing might be a draft.

src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
+import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ensureOwnListing } from '../../util/data';
 import { ListingLink } from '../../components';
 import { EditListingPoliciesForm } from '../../forms';
@@ -25,7 +26,8 @@ const EditListingPoliciesPanel = props => {
   const currentListing = ensureOwnListing(listing);
   const { publicData } = currentListing.attributes;
 
-  const panelTitle = currentListing.id ? (
+  const isPublished = currentListing.id && currentListing.attributes.state !== LISTING_STATE_DRAFT;
+  const panelTitle = isPublished ? (
     <FormattedMessage
       id="EditListingPoliciesPanel.title"
       values={{ listingTitle: <ListingLink listing={listing} /> }}
@@ -53,8 +55,8 @@ const EditListingPoliciesPanel = props => {
         onChange={onChange}
         saveActionMsg={submitButtonText}
         updated={panelUpdated}
-        updateError={errors.updateListingError}
         updateInProgress={updateInProgress}
+        fetchErrors={errors}
       />
     </div>
   );

src/components/EditListingPricingPanel/EditListingPricingPanel.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
+import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ListingLink } from '../../components';
 import { EditListingPricingForm } from '../../forms';
 import { ensureOwnListing } from '../../util/data';
@@ -29,7 +30,8 @@ const EditListingPricingPanel = props => {
   const currentListing = ensureOwnListing(listing);
   const { price } = currentListing.attributes;
 
-  const panelTitle = currentListing.id ? (
+  const isPublished = currentListing.id && currentListing.attributes.state !== LISTING_STATE_DRAFT;
+  const panelTitle = isPublished ? (
     <FormattedMessage
       id="EditListingPricingPanel.title"
       values={{ listingTitle: <ListingLink listing={listing} /> }}
@@ -47,8 +49,8 @@ const EditListingPricingPanel = props => {
       onChange={onChange}
       saveActionMsg={submitButtonText}
       updated={panelUpdated}
-      updateError={errors.updateListingError}
       updateInProgress={updateInProgress}
+      fetchErrors={errors}
     />
   ) : (
     <div className={css.priceCurrencyInvalid}>

src/components/EditListingWizard/EditListingWizard.js

@@ -4,6 +4,11 @@ import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import { withViewport } from '../../util/contextHelpers';
+import {
+  LISTING_PAGE_PARAM_TYPE_DRAFT,
+  LISTING_PAGE_PARAM_TYPE_NEW,
+  LISTING_PAGE_PARAM_TYPES,
+} from '../../util/urlHelpers';
 import { ensureListing } from '../../util/data';
 import { PayoutDetailsForm } from '../../forms';
 import { Modal, NamedRedirect, Tabs } from '../../components';
@@ -111,11 +116,11 @@ class EditListingWizard extends Component {
     this.hasScrolledToTab = false;
 
     this.state = {
-      submittedValues: null,
+      draftId: null,
       showPayoutDetails: false,
     };
     this.handleCreateFlowTabScrolling = this.handleCreateFlowTabScrolling.bind(this);
-    this.handleCreateListing = this.handleCreateListing.bind(this);
+    this.handlePublishListing = this.handlePublishListing.bind(this);
     this.handlePayoutModalClose = this.handlePayoutModalClose.bind(this);
     this.handlePayoutSubmit = this.handlePayoutSubmit.bind(this);
   }
@@ -124,15 +129,15 @@ class EditListingWizard extends Component {
     this.hasScrolledToTab = shouldScroll;
   }
 
-  handleCreateListing(values) {
-    const { onCreateListing, currentUser } = this.props;
+  handlePublishListing(id) {
+    const { onPublishListingDraft, currentUser } = this.props;
     const stripeConnected =
       currentUser && currentUser.attributes && currentUser.attributes.stripeConnected;
     if (stripeConnected) {
-      onCreateListing(values);
+      onPublishListingDraft(id);
     } else {
       this.setState({
-        submittedValues: values,
+        draftId: id,
         showPayoutDetails: true,
       });
     }
@@ -149,7 +154,7 @@ class EditListingWizard extends Component {
       .then(() => {
         this.setState({ showPayoutDetails: false });
         this.props.onManageDisableScrolling('EditListingWizard.payoutModal', false);
-        this.props.onCreateListing(this.state.submittedValues);
+        this.props.onPublishListingDraft(this.state.draftId);
       })
       .catch(() => {
         // do nothing
@@ -173,15 +178,22 @@ class EditListingWizard extends Component {
     } = this.props;
 
     const selectedTab = params.tab;
-    const isNew = params.type === 'new';
+    const isNewListingFlow = [LISTING_PAGE_PARAM_TYPE_NEW, LISTING_PAGE_PARAM_TYPE_DRAFT].includes(
+      params.type
+    );
     const rootClasses = rootClassName || css.root;
     const classes = classNames(rootClasses, className);
     const currentListing = ensureListing(listing);
-    const tabsStatus = tabsActive(isNew, currentListing);
+    const tabsStatus = tabsActive(isNewListingFlow, currentListing);
 
     // If selectedTab is not active, redirect to the beginning of wizard
     if (!tabsStatus[selectedTab]) {
-      return <NamedRedirect name="EditListingPage" params={{ ...params, tab: TABS[0] }} />;
+      const currentTabIndex = TABS.indexOf(selectedTab);
+      const nearestActiveTab = TABS.slice(0, currentTabIndex)
+        .reverse()
+        .find(t => tabsStatus[t]);
+
+      return <NamedRedirect name="EditListingPage" params={{ ...params, tab: nearestActiveTab }} />;
     }
 
     const { width } = viewport;
@@ -220,15 +232,15 @@ class EditListingWizard extends Component {
                 tabLabel={tabLabel(intl, tab)}
                 tabLinkProps={tabLink(tab)}
                 selected={selectedTab === tab}
-                disabled={isNew && !tabsStatus[tab]}
+                disabled={isNewListingFlow && !tabsStatus[tab]}
                 tab={tab}
                 intl={intl}
                 params={params}
                 listing={listing}
                 marketplaceTabs={TABS}
                 errors={errors}
                 handleCreateFlowTabScrolling={this.handleCreateFlowTabScrolling}
-                handleCreateListing={this.handleCreateListing}
+                handlePublishListing={this.handlePublishListing}
                 fetchInProgress={fetchInProgress}
               />
             );
@@ -276,7 +288,7 @@ EditListingWizard.propTypes = {
   params: shape({
     id: string.isRequired,
     slug: string.isRequired,
-    type: oneOf(['new', 'edit']).isRequired,
+    type: oneOf(LISTING_PAGE_PARAM_TYPES).isRequired,
     tab: oneOf(TABS).isRequired,
   }).isRequired,
 
@@ -293,14 +305,14 @@ EditListingWizard.propTypes = {
   }),
 
   errors: shape({
-    createListingsError: object,
+    createListingDraftError: object,
     updateListingError: object,
+    publishListingError: object,
     showListingsError: object,
     uploadImageError: object,
     createStripeAccountError: object,
-  }),
+  }).isRequired,
   fetchInProgress: bool.isRequired,
-  onCreateListing: func.isRequired,
   onPayoutDetailsFormChange: func.isRequired,
   onPayoutDetailsSubmit: func.isRequired,
   onManageDisableScrolling: func.isRequired,