Merge pull request #1240 from sharetribe/reorder-editlistinwizard-tabs

Make reordering easier for EditListinWizard tabs.
sharetribe · Dec 5, 2019 · 12ce217 · 12ce217
2 parents 0970f11 + 5ccbfce
commit 12ce217
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 35 deletions.
diff --git a/src/components/EditListingAvailabilityPanel/EditListingAvailabilityPanel.js b/src/components/EditListingAvailabilityPanel/EditListingAvailabilityPanel.js
@@ -15,6 +15,8 @@ const EditListingAvailabilityPanel = props => {
     rootClassName,
     listing,
     availability,
+    disabled,
+    ready,
     onSubmit,
     onChange,
     submitButtonText,
@@ -67,6 +69,8 @@ const EditListingAvailabilityPanel = props => {
         }}
         onChange={onChange}
         saveActionMsg={submitButtonText}
+        disabled={disabled}
+        ready={ready}
         updated={panelUpdated}
         updateError={errors.updateListingError}
         updateInProgress={updateInProgress}
@@ -94,6 +98,8 @@ EditListingAvailabilityPanel.propTypes = {
     onCreateAvailabilityException: func.isRequired,
     onDeleteAvailabilityException: func.isRequired,
   }).isRequired,
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   onSubmit: func.isRequired,
   onChange: func.isRequired,
   submitButtonText: string.isRequired,

diff --git a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js
@@ -15,6 +15,8 @@ const EditListingDescriptionPanel = props => {
     className,
     rootClassName,
     listing,
+    disabled,
+    ready,
     onSubmit,
     onChange,
     submitButtonText,
@@ -55,6 +57,8 @@ const EditListingDescriptionPanel = props => {
           onSubmit(updateValues);
         }}
         onChange={onChange}
+        disabled={disabled}
+        ready={ready}
         updated={panelUpdated}
         updateInProgress={updateInProgress}
         fetchErrors={errors}
@@ -78,6 +82,8 @@ EditListingDescriptionPanel.propTypes = {
   // We cannot use propTypes.listing since the listing might be a draft.
   listing: object,
 
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   onSubmit: func.isRequired,
   onChange: func.isRequired,
   submitButtonText: string.isRequired,

diff --git a/src/components/EditListingFeaturesPanel/EditListingFeaturesPanel.js b/src/components/EditListingFeaturesPanel/EditListingFeaturesPanel.js
@@ -17,6 +17,8 @@ const EditListingFeaturesPanel = props => {
     rootClassName,
     className,
     listing,
+    disabled,
+    ready,
     onSubmit,
     onChange,
     submitButtonText,
@@ -59,6 +61,8 @@ const EditListingFeaturesPanel = props => {
         }}
         onChange={onChange}
         saveActionMsg={submitButtonText}
+        disabled={disabled}
+        ready={ready}
         updated={panelUpdated}
         updateInProgress={updateInProgress}
         fetchErrors={errors}
@@ -82,6 +86,8 @@ EditListingFeaturesPanel.propTypes = {
   // We cannot use propTypes.listing since the listing might be a draft.
   listing: object,
 
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   onSubmit: func.isRequired,
   onChange: func.isRequired,
   submitButtonText: string.isRequired,

diff --git a/src/components/EditListingLocationPanel/EditListingLocationPanel.js b/src/components/EditListingLocationPanel/EditListingLocationPanel.js
@@ -48,6 +48,8 @@ class EditListingLocationPanel extends Component {
       className,
       rootClassName,
       listing,
+      disabled,
+      ready,
       onSubmit,
       onChange,
       submitButtonText,
@@ -97,6 +99,8 @@ class EditListingLocationPanel extends Component {
           }}
           onChange={onChange}
           saveActionMsg={submitButtonText}
+          disabled={disabled}
+          ready={ready}
           updated={panelUpdated}
           updateInProgress={updateInProgress}
           fetchErrors={errors}
@@ -121,6 +125,8 @@ EditListingLocationPanel.propTypes = {
   // We cannot use propTypes.listing since the listing might be a draft.
   listing: object,
 
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   onSubmit: func.isRequired,
   onChange: func.isRequired,
   submitButtonText: string.isRequired,

diff --git a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js
@@ -15,8 +15,8 @@ class EditListingPhotosPanel extends Component {
       className,
       rootClassName,
       errors,
-      fetchInProgress,
-      newListingPublished,
+      disabled,
+      ready,
       images,
       listing,
       onImageUpload,
@@ -49,8 +49,8 @@ class EditListingPhotosPanel extends Component {
         <h1 className={css.title}>{panelTitle}</h1>
         <EditListingPhotosForm
           className={css.form}
-          disabled={fetchInProgress}
-          ready={newListingPublished}
+          disabled={disabled}
+          ready={ready}
           fetchErrors={errors}
           initialValues={{ images }}
           images={images}
@@ -83,8 +83,8 @@ EditListingPhotosPanel.propTypes = {
   className: string,
   rootClassName: string,
   errors: object,
-  fetchInProgress: bool.isRequired,
-  newListingPublished: bool.isRequired,
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   images: array,
 
   // We cannot use propTypes.listing since the listing might be a draft.

diff --git a/src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.js b/src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.js
@@ -14,6 +14,8 @@ const EditListingPoliciesPanel = props => {
     className,
     rootClassName,
     listing,
+    disabled,
+    ready,
     onSubmit,
     onChange,
     submitButtonText,
@@ -53,6 +55,8 @@ const EditListingPoliciesPanel = props => {
           onSubmit(updateValues);
         }}
         onChange={onChange}
+        disabled={disabled}
+        ready={ready}
         saveActionMsg={submitButtonText}
         updated={panelUpdated}
         updateInProgress={updateInProgress}
@@ -77,6 +81,8 @@ EditListingPoliciesPanel.propTypes = {
   // We cannot use propTypes.listing since the listing might be a draft.
   listing: object,
 
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   onSubmit: func.isRequired,
   onChange: func.isRequired,
   submitButtonText: string.isRequired,

diff --git a/src/components/EditListingPricingPanel/EditListingPricingPanel.js b/src/components/EditListingPricingPanel/EditListingPricingPanel.js
@@ -18,6 +18,8 @@ const EditListingPricingPanel = props => {
     className,
     rootClassName,
     listing,
+    disabled,
+    ready,
     onSubmit,
     onChange,
     submitButtonText,
@@ -48,6 +50,8 @@ const EditListingPricingPanel = props => {
       onSubmit={onSubmit}
       onChange={onChange}
       saveActionMsg={submitButtonText}
+      disabled={disabled}
+      ready={ready}
       updated={panelUpdated}
       updateInProgress={updateInProgress}
       fetchErrors={errors}
@@ -81,6 +85,8 @@ EditListingPricingPanel.propTypes = {
   // We cannot use propTypes.listing since the listing might be a draft.
   listing: object,
 
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   onSubmit: func.isRequired,
   onChange: func.isRequired,
   submitButtonText: string.isRequired,

diff --git a/src/components/EditListingWizard/EditListingWizard.js b/src/components/EditListingWizard/EditListingWizard.js
@@ -28,8 +28,10 @@ import css from './EditListingWizard.css';
 // Show availability calendar only if environment variable availabilityEnabled is true
 const availabilityMaybe = config.enableAvailability ? [AVAILABILITY] : [];
 
-// TODO: PHOTOS panel needs to be the last one since it currently contains PayoutDetailsForm modal
-// All the other panels can be reordered.
+// You can reorder these panels.
+// Note 1: You need to change save button translations for new listing flow
+// Note 2: Ensure that draft listing is created after the first panel
+// and listing publishing happens after last panel.
 export const TABS = [
   DESCRIPTION,
   FEATURES,

diff --git a/src/components/EditListingWizard/EditListingWizardTab.js b/src/components/EditListingWizard/EditListingWizardTab.js
@@ -150,6 +150,9 @@ const EditListingWizardTab = props => {
       onChange,
       panelUpdated: updatedTab === tab,
       updateInProgress,
+      // newListingPublished and fetchInProgress are flags for the last wizard tab
+      ready: newListingPublished,
+      disabled: fetchInProgress,
     };
   };
 
@@ -244,13 +247,10 @@ const EditListingWizardTab = props => {
         ? 'EditListingWizard.saveNewPhotos'
         : 'EditListingWizard.saveEditPhotos';
 
-      // newListingPublished and fetchInProgress are flags for the last wizard tab
       return (
         <EditListingPhotosPanel
           {...panelProps(PHOTOS)}
           submitButtonText={intl.formatMessage({ id: submitButtonTranslationKey })}
-          newListingPublished={newListingPublished}
-          fetchInProgress={fetchInProgress}
           images={images}
           onImageUpload={onImageUpload}
           onRemoveImage={onRemoveImage}

diff --git a/src/forms/EditListingAvailabilityForm/EditListingAvailabilityForm.js b/src/forms/EditListingAvailabilityForm/EditListingAvailabilityForm.js
@@ -15,11 +15,12 @@ export class EditListingAvailabilityFormComponent extends Component {
     return (
       <FinalForm
         {...this.props}
-        render={fieldRenderProps => {
+        render={formRenderProps => {
           const {
             className,
             rootClassName,
             disabled,
+            ready,
             handleSubmit,
             //intl,
             invalid,
@@ -31,7 +32,7 @@ export class EditListingAvailabilityFormComponent extends Component {
             availability,
             availabilityPlan,
             listingId,
-          } = fieldRenderProps;
+          } = formRenderProps;
 
           const errorMessage = updateError ? (
             <p className={css.error}>
@@ -40,7 +41,7 @@ export class EditListingAvailabilityFormComponent extends Component {
           ) : null;
 
           const classes = classNames(rootClassName || css.root, className);
-          const submitReady = updated && pristine;
+          const submitReady = (updated && pristine) || ready;
           const submitInProgress = updateInProgress;
           const submitDisabled = invalid || disabled || submitInProgress;
 
@@ -80,6 +81,8 @@ EditListingAvailabilityFormComponent.propTypes = {
   intl: intlShape.isRequired,
   onSubmit: func.isRequired,
   saveActionMsg: string.isRequired,
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   updated: bool.isRequired,
   updateError: propTypes.error,
   updateInProgress: bool.isRequired,

diff --git a/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.js
@@ -16,11 +16,12 @@ const TITLE_MAX_LENGTH = 60;
 const EditListingDescriptionFormComponent = props => (
   <FinalForm
     {...props}
-    render={fieldRenderProps => {
+    render={formRenderProps => {
       const {
         categories,
         className,
         disabled,
+        ready,
         handleSubmit,
         intl,
         invalid,
@@ -29,7 +30,7 @@ const EditListingDescriptionFormComponent = props => (
         updated,
         updateInProgress,
         fetchErrors,
-      } = fieldRenderProps;
+      } = formRenderProps;
 
       const titleMessage = intl.formatMessage({ id: 'EditListingDescriptionForm.title' });
       const titlePlaceholderMessage = intl.formatMessage({
@@ -77,7 +78,7 @@ const EditListingDescriptionFormComponent = props => (
       ) : null;
 
       const classes = classNames(css.root, className);
-      const submitReady = updated && pristine;
+      const submitReady = (updated && pristine) || ready;
       const submitInProgress = updateInProgress;
       const submitDisabled = invalid || disabled || submitInProgress;
 
@@ -137,6 +138,8 @@ EditListingDescriptionFormComponent.propTypes = {
   intl: intlShape.isRequired,
   onSubmit: func.isRequired,
   saveActionMsg: string.isRequired,
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   updated: bool.isRequired,
   updateInProgress: bool.isRequired,
   fetchErrors: shape({

diff --git a/src/forms/EditListingFeaturesForm/EditListingFeaturesForm.js b/src/forms/EditListingFeaturesForm/EditListingFeaturesForm.js
@@ -15,9 +15,10 @@ const EditListingFeaturesFormComponent = props => (
   <FinalForm
     {...props}
     mutators={{ ...arrayMutators }}
-    render={fieldRenderProps => {
+    render={formRenderProps => {
       const {
         disabled,
+        ready,
         rootClassName,
         className,
         name,
@@ -27,10 +28,10 @@ const EditListingFeaturesFormComponent = props => (
         updated,
         updateInProgress,
         fetchErrors,
-      } = fieldRenderProps;
+      } = formRenderProps;
 
       const classes = classNames(rootClassName || css.root, className);
-      const submitReady = updated && pristine;
+      const submitReady = (updated && pristine) || ready;
       const submitInProgress = updateInProgress;
       const submitDisabled = disabled || submitInProgress;
 
@@ -86,6 +87,8 @@ EditListingFeaturesFormComponent.propTypes = {
   name: string.isRequired,
   onSubmit: func.isRequired,
   saveActionMsg: string.isRequired,
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   updated: bool.isRequired,
   updateInProgress: bool.isRequired,
   fetchErrors: shape({

diff --git a/src/forms/EditListingLocationForm/EditListingLocationForm.js b/src/forms/EditListingLocationForm/EditListingLocationForm.js
@@ -19,10 +19,11 @@ const identity = v => v;
 export const EditListingLocationFormComponent = props => (
   <FinalForm
     {...props}
-    render={fieldRenderProps => {
+    render={formRenderProps => {
       const {
         className,
         disabled,
+        ready,
         handleSubmit,
         intl,
         invalid,
@@ -32,7 +33,7 @@ export const EditListingLocationFormComponent = props => (
         updateInProgress,
         fetchErrors,
         values,
-      } = fieldRenderProps;
+      } = formRenderProps;
 
       const titleRequiredMessage = intl.formatMessage({ id: 'EditListingLocationForm.address' });
       const addressPlaceholderMessage = intl.formatMessage({
@@ -71,7 +72,7 @@ export const EditListingLocationFormComponent = props => (
       ) : null;
 
       const classes = classNames(css.root, className);
-      const submitReady = updated && pristine;
+      const submitReady = (updated && pristine) || ready;
       const submitInProgress = updateInProgress;
       const submitDisabled = invalid || disabled || submitInProgress;
 
@@ -132,6 +133,8 @@ EditListingLocationFormComponent.propTypes = {
   onSubmit: func.isRequired,
   saveActionMsg: string.isRequired,
   selectedPlace: propTypes.place,
+  disabled: bool.isRequired,
+  ready: bool.isRequired,
   updated: bool.isRequired,
   updateInProgress: bool.isRequired,
   fetchErrors: shape({