Merge pull request #1260 from appirio-tech/feature/optimize-incomplete-project-screen-behaviour

optimize incomplete project screen behaviour

Author: vikasrohit

src/projects/create/components/ProjectWizard.jsx

@@ -40,6 +40,7 @@ class ProjectWizard extends Component {
     this.handleStepChange = this.handleStepChange.bind(this)
     this.restoreCommonDetails = this.restoreCommonDetails.bind(this)
     this.handleWizardCancel = this.handleWizardCancel.bind(this)
+    this.loadProjectAndProductFromURL = this.loadProjectAndProductFromURL.bind(this)
   }
 
   componentDidMount() {
@@ -48,10 +49,27 @@ class ProjectWizard extends Component {
     const incompleteProjectStr = window.localStorage.getItem(LS_INCOMPLETE_PROJECT)
     if(incompleteProjectStr) {
       const incompleteProject = JSON.parse(incompleteProjectStr)
+      const incompleteProduct = _.get(incompleteProject, 'details.products[0]')
+      let wizardStep = WZ_STEP_INCOMP_PROJ_CONF
+      if (incompleteProduct && params && params.product) {
+        // assumes the params.product to be id of a product because incomplete project is set only
+        // after user selects a particular product
+        const product = findProduct(params.product, true)
+        if (product) {
+          // load project detais page directly if product of save project and deep link are the same
+          if (product.id === incompleteProduct) {
+            wizardStep = WZ_STEP_FILL_PROJ_DETAILS
+          } else { // for different product type, update local state with URL params
+            const projectType = findProductCategory(params.product)
+            _.set(incompleteProject, 'type', projectType.id)
+            _.set(incompleteProject, 'details.products[0]', product.id)
+          }
+        }
+      }
       this.setState({
         project: update(this.state.project, {$merge : incompleteProject}),
         dirtyProject: update(this.state.dirtyProject, {$merge : incompleteProject}),
-        wizardStep: WZ_STEP_INCOMP_PROJ_CONF,
+        wizardStep: wizardStep,
         isProjectDirty: false
       }, () => {
         typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
@@ -61,20 +79,7 @@ class ProjectWizard extends Component {
       const updateQuery = {}
       let wizardStep = WZ_STEP_SELECT_PROJ_TYPE
       if (params && params.product) {
-        // first try the path param to be a project category
-        let projectType = findCategory(params.product, true)
-        if (projectType) {// if its a category
-          updateQuery['type'] = { $set : projectType.id }
-          wizardStep = WZ_STEP_SELECT_PROD_TYPE
-        } else {
-          // if it is not a category, it should be a product and we should be able to find a category for it
-          projectType = findProductCategory(params.product, true)
-          // finds product object from product alias
-          const product = findProduct(params.product, true)
-          updateQuery['type'] = { $set : projectType.id }
-          updateQuery['details'] = { products : { $set: [product.id] } }
-          wizardStep = WZ_STEP_FILL_PROJ_DETAILS
-        }
+        wizardStep = this.loadProjectAndProductFromURL(params.product, updateQuery)
       }
       // retrieve refCode from query param
       // TODO give warning after truncating
@@ -106,22 +111,7 @@ class ProjectWizard extends Component {
     let wizardStep = type && product ? WZ_STEP_FILL_PROJ_DETAILS : null
     const updateQuery = {}
     if (params && params.product) { // if there exists product path param
-      // first try the path param to be a project category
-      let projectType = findCategory(params.product, true)
-      if (projectType) {// if its a category
-        updateQuery['type'] = { $set : projectType.id }
-        wizardStep = WZ_STEP_SELECT_PROD_TYPE
-      } else {
-        // if it is not a category, it should be a product and we should be able to find a category for it
-        projectType = findProductCategory(params.product, true)
-        // finds product object from product alias
-        const product = findProduct(params.product, true)
-        if (projectType) {// we can have `incomplete` as params.product
-          updateQuery['type'] = { $set : projectType.id }
-          updateQuery['details'] = { products : { $set: [product.id] } }
-          wizardStep = WZ_STEP_FILL_PROJ_DETAILS
-        }
-      }
+      wizardStep = this.loadProjectAndProductFromURL(params.product, updateQuery)
     } else { // if there is not product path param, it should be first step of the wizard
       updateQuery['type'] = { $set : null }
       updateQuery['details'] = { products : { $set: [] } }
@@ -139,6 +129,33 @@ class ProjectWizard extends Component {
     }
   }
 
+  /**
+   * Loads project type and product from the given URL parameter.
+   *
+   * @param {string} urlParam    URL parameter value which represents either project type or product
+   * @param {object} updateQuery query object which would be updated according to parsed project type and product
+   *
+   * @return {number} step where wizard should move after parsing the URL param
+   */
+  loadProjectAndProductFromURL(urlParam, updateQuery) {
+    // first try the path param to be a project category
+    let projectType = findCategory(urlParam, true)
+    if (projectType) {// if its a category
+      updateQuery['type'] = { $set : projectType.id }
+      return WZ_STEP_SELECT_PROD_TYPE
+    } else {
+      // if it is not a category, it should be a product and we should be able to find a category for it
+      projectType = findProductCategory(urlParam, true)
+      // finds product object from product alias
+      const product = findProduct(urlParam, true)
+      if (projectType) {// we can have `incomplete` as params.product
+        updateQuery['type'] = { $set : projectType.id }
+        updateQuery['details'] = { products : { $set: [product.id] } }
+        return WZ_STEP_FILL_PROJ_DETAILS
+      }
+    }
+  }
+
   /**
    * Loads incomplete project from the local storage and populates the state from that project.
    * It also moves the wizard to the project details step if there exists an incomplete project.
@@ -163,14 +180,22 @@ class ProjectWizard extends Component {
    * Removed incomplete project from the local storage and resets the state. Also, moves wizard to the first step.
    */
   removeIncompleteProject() {
-    const { onStepChange } = this.props
+    const { onStepChange, onProjectUpdate } = this.props
+    // remove incomplete project from local storage
     window.localStorage.removeItem(LS_INCOMPLETE_PROJECT)
+    const projectType = _.get(this.state.project, 'type')
+    const product = _.get(this.state.project, 'details.products[0]')
+    let wizardStep = WZ_STEP_SELECT_PROJ_TYPE
+    if (product) {
+      wizardStep = WZ_STEP_FILL_PROJ_DETAILS
+    } else if (projectType) {
+      wizardStep = WZ_STEP_SELECT_PROD_TYPE
+    }
     this.setState({
-      project: { details: {} },
-      dirtyProject: { details: {} },
-      wizardStep: WZ_STEP_SELECT_PROJ_TYPE
+      wizardStep: wizardStep
     }, () => {
-      typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
+      typeof onProjectUpdate === 'function' && onProjectUpdate(this.state.dirtyProject, true)
+      typeof onStepChange === 'function' && onStepChange(this.state.wizardStep, this.state.project)
     })
   }
 

src/projects/create/containers/CreateContainer.jsx

@@ -108,9 +108,9 @@ class CreateConainer extends React.Component {
 
   // stores the incomplete project in local storage
   onLeave(e) {// eslint-disable-line no-unused-vars
-    const { wizardStep } = this.state
-    if (wizardStep === ProjectWizard.Steps.WZ_STEP_FILL_PROJ_DETAILS) {// Project Details step
-      console.log('saving incomplete project')
+    const { wizardStep, isProjectDirty } = this.state
+    if (wizardStep === ProjectWizard.Steps.WZ_STEP_FILL_PROJ_DETAILS && isProjectDirty) {// Project Details step
+      console.log('saving incomplete project', this.state.updatedProject)
       window.localStorage.setItem(LS_INCOMPLETE_PROJECT, JSON.stringify(this.state.updatedProject))
     }
     // commenting alerts for the page unload and route change hooks as discussed