Add proper inProgress and ready states for listing creation

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -65,6 +65,7 @@ class EditListingPhotosPanel extends Component {
       address: omitBy(address, isUndefined),
     };
     this.props.onPayoutDetailsSubmit(params).then(() => {
+      this.setState({ showPayoutDetails: false });
       this.props.onManageDisableScrolling('EditListingPhotosPanel.payoutModal', false);
       this.props.onSubmit(this.state.submittedValues);
     });
@@ -76,6 +77,7 @@ class EditListingPhotosPanel extends Component {
       rootClassName,
       errors,
       fetchInProgress,
+      newListingCreated,
       images,
       listing,
       onImageUpload,
@@ -106,6 +108,7 @@ class EditListingPhotosPanel extends Component {
         <EditListingPhotosForm
           className={css.form}
           disabled={fetchInProgress}
+          ready={newListingCreated}
           errors={errors}
           initialValues={{ images }}
           images={images}
@@ -139,7 +142,7 @@ class EditListingPhotosPanel extends Component {
           </div>
           <PayoutDetailsForm
             className={css.payoutDetails}
-            disabled={fetchInProgress}
+            inProgress={fetchInProgress}
             createStripeAccountError={errors ? errors.createStripeAccountError : null}
             onChange={onPayoutDetailsFormChange}
             onSubmit={this.handlePayoutSubmit}
@@ -174,6 +177,7 @@ EditListingPhotosPanel.propTypes = {
     createStripeAccountError: object,
   }),
   fetchInProgress: bool.isRequired,
+  newListingCreated: bool.isRequired,
   images: array,
   listing: object, // TODO Should be propTypes.listing after API support is added.
   onImageUpload: func.isRequired,

src/components/EditListingWizard/EditListingWizard.example.js

@@ -15,6 +15,7 @@ export const NoPhotos = {
       tab: 'pricing',
     },
     fetchInProgress: false,
+    newListingCreated: false,
     flattenedRoutes: flattenRoutes(routesConfiguration),
     history: { push: noop },
     images: [],

src/components/EditListingWizard/EditListingWizard.js

@@ -75,6 +75,7 @@ const EditListingWizard = props => {
     params,
     errors,
     fetchInProgress,
+    newListingCreated,
     flattenedRoutes,
     history,
     images,
@@ -213,6 +214,7 @@ const EditListingWizard = props => {
         selected={selectedTab === PHOTOS}
         disabled={!stepsStatus[PHOTOS]}
         panelUpdated={updatedTab === PHOTOS}
+        newListingCreated={newListingCreated}
         updateInProgress={updateInProgress}
         errors={errors}
         fetchInProgress={fetchInProgress}
@@ -268,6 +270,7 @@ EditListingWizard.propTypes = {
     uploadImageError: object,
   }).isRequired,
   fetchInProgress: bool.isRequired,
+  newListingCreated: bool.isRequired,
   flattenedRoutes: arrayOf(propTypes.route).isRequired,
   history: shape({
     push: func.isRequired,

src/containers/EditListingPage/EditListingPage.js

@@ -90,6 +90,7 @@ export const EditListingPageComponent = props => {
   const { id, type } = params;
 
   const isNew = type === 'new';
+  const newListingCreated = isNew && !!page.submittedListingId;
   const listingId = page.submittedListingId || (id ? new types.UUID(id) : null);
   const currentListing = getListing(listingId);
 
@@ -164,6 +165,7 @@ export const EditListingPageComponent = props => {
           disabled={disableForm}
           errors={errors}
           fetchInProgress={fetchInProgress}
+          newListingCreated={newListingCreated}
           flattenedRoutes={flattenedRoutes}
           history={history}
           images={images}
@@ -181,7 +183,7 @@ export const EditListingPageComponent = props => {
           currentUser={currentUser}
           onManageDisableScrolling={onManageDisableScrolling}
           updatedTab={page.updatedTab}
-          updateInProgress={page.updateInProgress}
+          updateInProgress={page.updateInProgress || page.createListingInProgress}
         />
       </PageLayout>
     );

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

@@ -45,6 +45,7 @@ exports[`EditListingPageComponent matches snapshot 1`] = `
       }
     }
     images={Array []}
+    newListingCreated={false}
     onChange={[Function]}
     onCreateListing={[Function]}
     onCreateListingDraft={[Function]}

src/containers/EditListingPhotosForm/EditListingPhotosForm.example.js

@@ -14,6 +14,7 @@ export const Empty = {
     },
     saveActionMsg: 'Save photos',
     updated: false,
+    ready: false,
     updateInProgress: false,
     onUpdateImageOrder: imageOrder => {
       console.log('onUpdateImageOrder with new imageOrder:', imageOrder);

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -88,6 +88,7 @@ export class EditListingPhotosFormComponent extends Component {
       saveActionMsg,
       submitting,
       updated,
+      ready,
       updateError,
       updateInProgress,
       onRemoveImage,
@@ -147,12 +148,13 @@ export class EditListingPhotosFormComponent extends Component {
 
     const classes = classNames(css.root, className);
 
-    const submitReady = updated;
+    const submitReady = updated || ready;
     const submitInProgress = submitting || updateInProgress;
     const submitDisabled = invalid ||
       disabled ||
       submitInProgress ||
-      this.state.imageUploadRequested;
+      this.state.imageUploadRequested ||
+      ready;
 
     return (
       <form className={classes} onSubmit={handleSubmit}>
@@ -228,6 +230,7 @@ EditListingPhotosFormComponent.propTypes = {
   onSubmit: func.isRequired,
   saveActionMsg: string.isRequired,
   updated: bool.isRequired,
+  ready: bool.isRequired,
   updateError: instanceOf(Error),
   updateInProgress: bool.isRequired,
   onRemoveImage: func.isRequired,

src/containers/EditListingPhotosForm/EditListingPhotosForm.test.js

@@ -23,6 +23,7 @@ describe('EditListingPhotosForm', () => {
         onUpdateImageOrder={v => v}
         stripeConnected={false}
         updated={false}
+        ready={false}
         updateInProgress={false}
         onRemoveImage={noop}
       />

src/containers/PayoutDetailsForm/PayoutDetailsForm.js

@@ -44,6 +44,7 @@ const PayoutDetailsFormComponent = props => {
     createStripeAccountError,
     form,
     disabled,
+    inProgress,
     handleSubmit,
     pristine,
     submitting,
@@ -172,7 +173,9 @@ const PayoutDetailsFormComponent = props => {
     : null;
 
   const classes = classNames(css.root, className);
-  const submitDisabled = pristine || submitting || invalid || disabled;
+  const submitReady = false;
+  const submitInProgress = submitting || inProgress;
+  const submitDisabled = pristine || invalid || disabled || submitInProgress;
   const error = createStripeAccountError
     ? <div className={css.error}>
         <FormattedMessage id="PayoutDetailsForm.createStripeAccountFailed" />
@@ -240,7 +243,13 @@ const PayoutDetailsFormComponent = props => {
       </div>
       {bankAccountSection}
       {error}
-      <Button className={css.submitButton} type="submit" disabled={submitDisabled}>
+      <Button
+        className={css.submitButton}
+        type="submit"
+        inProgress={submitInProgress}
+        disabled={submitDisabled}
+        ready={submitReady}
+      >
         <FormattedMessage id="PayoutDetailsForm.submitButtonText" />
       </Button>
     </form>
@@ -252,6 +261,7 @@ PayoutDetailsFormComponent.defaultProps = {
   country: null,
   createStripeAccountError: null,
   disabled: false,
+  inProgress: false,
 };
 
 const { bool, object, string } = PropTypes;
@@ -261,6 +271,7 @@ PayoutDetailsFormComponent.propTypes = {
   className: string,
   createStripeAccountError: object,
   disabled: bool,
+  inProgress: bool,
 
   // from mapStateToProps
   country: string,

src/ducks/user.duck.js

@@ -354,17 +354,22 @@ export const fetchCurrentUser = () =>
 export const createStripeAccount = payoutDetails =>
   (dispatch, getState, sdk) => {
     dispatch(stripeAccountCreateRequest());
+
+    let accountResponse;
+
     return sdk.currentUser
       .createStripeAccount(payoutDetails)
       .then(response => {
-        dispatch(stripeAccountCreateSuccess(response));
-        return response;
+        accountResponse = response;
+        return dispatch(fetchCurrentUser());
+      })
+      .then(() => {
+        dispatch(stripeAccountCreateSuccess(accountResponse));
       })
       .catch(e => {
         dispatch(stripeAccountCreateError(e));
         throw e;
-      })
-      .then(() => dispatch(fetchCurrentUser()));
+      });
   };
 
 export const sendVerificationEmail = () =>