Fix bug when selecting ND from the dropdown would activate unnecessary steps

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

src/components/Stepper.vue

@@ -70,7 +70,7 @@ import FirstStep from './FirstStep'
 import AttributionDetailsStep from './AttributionDetailsStep'
 import CopyrightWaiverStep from './CopyrightWaiverStep'
 import DropdownStep from './DropdownStep'
-import { disabledSetters, visibleSetters } from '../utils/license-utilities'
+import { updateVisibleEnabledStatus } from '../utils/license-utilities'
 
 export default {
     name: 'Stepper',
@@ -166,7 +166,7 @@ export default {
                 }
             }
             this.$set(this.steps, stepId, { ...this.steps[stepId], selected: isSelected })
-            this.updateDisabledAndVisibleSteps(stepName, isSelected)
+            this.updateDisabledAndVisibleSteps()
         },
         handleNext(stepName) {
             /**
@@ -247,21 +247,22 @@ export default {
                 }
             })
         },
-        setStepsDisabled(stepsToSetDisabled) {
+        setStepsEnabled(stepsToSetEnabled, disabledDue) {
             // sets steps in stepsToSetDisabled array enabled properties to false
             this.steps.forEach((step) => {
-                if (stepsToSetDisabled.indexOf(step.name) > -1 && step.enabled) {
-                    this.$set(this.steps, step.id, { ...step, enabled: false })
-                } else if (stepsToSetDisabled.indexOf(step.name) === -1 && !step.enabled) {
-                    this.$set(this.steps, step.id, { ...step, enabled: true })
+                // step is currently enabled, but should be disabled
+                if (stepsToSetEnabled.indexOf(step.name) === -1 && step.enabled) {
+                    this.$set(this.steps, step.id, { ...step, enabled: false, disabledDue: disabledDue })
+                } else if (stepsToSetEnabled.indexOf(step.name) > -1 && !step.enabled) {
+                    // step is currently disabled, but should be set enabled
+                    this.$set(this.steps, step.id, { ...step, enabled: true, disabledDue: '' })
                 }
             })
         },
-        updateDisabledAndVisibleSteps(stepName, isStepSelected) {
+        updateDisabledAndVisibleSteps() {
             /**
-             * Creates an array of steps that should be set visible/disabled
-             * based on the step that was selected/unselected,
-             * and updates their visible/enabled properties
+             * Creates an array of steps that should be visible/enalbed based on data from steps array
+             * and updates the steps array
              */
             if (stepName in visibleSetters) {
                 let visible = []
@@ -294,9 +295,6 @@ export default {
             set(newVal) {
                 this.$emit('input', newVal)
             }
-        },
-        useDropdownForSelection() {
-            return this.steps[0].selected
         }
     },
     created: function() {
@@ -357,6 +355,9 @@ export default {
         position:relative;
         margin: 24px 24px 8px;
     }
+    .stepper-card-header:hover {
+        cursor: pointer;
+    }
     .stepper-card-header .stepper-header-h5 {
         margin-left: 45px;
     }
@@ -401,7 +402,6 @@ export default {
     .previous.disabled {
         color: #B0B0B0;
     }
-
     .previous.disabled .vocab-h5b,
     .inactive .vocab.h5b {
         color: #B0B0B0;
@@ -412,30 +412,30 @@ export default {
     .stepper-card .b-radio.radio:hover input[type=radio]:not(:disabled) + .check {
          border: 4px solid #0464E1;
     }
-        .step-navigation {
-            margin: 13px 0 13px -4px;
-        }
-        .pagination-next {
-            background-color: #04A635;
-            color: white!important;
-            font-family: Roboto Condensed,sans-serif;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 18px;
-            line-height: 24px;
-        }
-        .pagination-next.disabled {
-            background-color: #D8D8D8;
-        }
-        .pagination-next.disabled:hover,
-        .pagination-next.disabled:active {
-            box-shadow: none;
-            border: 1px solid transparent;
-        }
-        .slide-enter-active {
-            /*transition: all .3s ease;*/
-        animation: slide-down .5s;
+    .step-navigation {
+        margin: 13px 0 13px -4px;
+    }
+    .pagination-next {
+        background-color: #04A635;
+        color: white!important;
+        font-family: Roboto Condensed,sans-serif;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 24px;
+    }
+    .pagination-next.disabled {
+        background-color: #D8D8D8;
+    }
+    .pagination-next.disabled:hover,
+    .pagination-next.disabled:active {
+        box-shadow: none;
+        border: 1px solid transparent;
     }
+    .slide-enter-active {
+        /*transition: all .3s ease;*/
+    animation: slide-down .3s;
+}
     .slide-leave-active {
         /*transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
         animation: slide-down .5s reverse;
@@ -460,4 +460,9 @@ export default {
             /*transform: scaleY(1);*/
         }
     }
+    @media (max-width: 860px) {
+        .stepper-card:last-of-type {
+            margin-bottom: 1rem;
+        }
+    }
 </style>

src/store/index.js

@@ -12,8 +12,7 @@ export default new Vuex.Store({
             creatorProfileUrl: '',
             workTitle: '',
             workUrl: ''
-        },
-        useDropdownForSelection: undefined
+        }
     },
     getters: {
         isLicenseSelected: state => {
@@ -39,15 +38,12 @@ export default new Vuex.Store({
     },
     mutations: {
         setSelected(state, { stepName, isSelected }) {
-            // When a Radio button is selected, either useDropdownForSelection or
-            // currentLicenseAttribute 'selected' attribute is updated
+            // When a Radio button is selected, currentLicenseAttribute 'selected' attribute is updated
             if (['BY', 'NC', 'ND', 'SA'].indexOf(stepName) > -1) {
                 state.currentLicenseAttributes = {
                     ...state.currentLicenseAttributes,
                     [stepName]: isSelected
                 }
-            } else if (stepName === 'FS') {
-                state.useDropdownForSelection = !state.useDropdownForSelection
             }
         },
         updateAttributesFromShort(state, shortName) {

src/utils/license-utilities.js

@@ -1,30 +1,6 @@
 const CC0Attributes = { BY: false, NC: false, ND: false, SA: false }
 const CCBYAttributes = { BY: true, NC: false, ND: false, SA: false }
 const defaultAttributes = { BY: undefined, NC: undefined, ND: undefined, SA: undefined }
-const visibleSetters = {
-    FSCC0: ['FS', 'DD', 'CW', 'AD'],
-    FSBY: ['FS', 'DD', 'AD'],
-    FS: {
-        true: ['FS', 'DD', 'AD'],
-        false: ['FS', 'BY', 'NC', 'ND', 'SA', 'AD']
-    },
-    BY: {
-        true: ['FS', 'BY', 'NC', 'ND', 'SA', 'AD'],
-        false: ['FS', 'BY', 'NC', 'ND', 'SA', 'CW', 'AD']
-    },
-    ND: {
-        true: ['FS', 'BY', 'NC', 'ND', 'SA', 'AD']
-    }
-}
-const disabledSetters = {
-    // Steps that should be disabled if other steps are selected/not selected
-    BY: {
-        false: ['NC', 'ND', 'SA']
-    },
-    ND: {
-        true: ['SA']
-    }
-}
 
 function shortToAttr(shortLicenseName) {
     const short = shortLicenseName
@@ -98,6 +74,45 @@ function licenseIconsArr(licenseAttributes) {
     return iconsArray
 }
 
+function updateVisibleEnabledStatus(stepStatusData) {
+    let visible = []
+    let enabled = []
+    let stepsDisabledDue = ''
+    if (stepStatusData.FS) {
+        // User will select from the dropdown
+        if (stepStatusData.BY === false) {
+            // User selected a license from the dropdown a CC0 license
+            // First step, dropdown and attribution details should be visible and enabled
+            visible = ['FS', 'DD', 'CW', 'AD']
+            enabled = ['FS', 'DD', 'CW', 'AD']
+            stepsDisabledDue = 'CC0'
+        } else {
+            // User hasn't selected anything yet, or selected a BY license
+            // First step, dropdown and attribution details should be visible and enabled
+            visible = ['FS', 'DD', 'AD']
+            enabled = ['FS', 'DD', 'AD']
+        }
+    } else {
+        // User uses the stepper for license selection
+        if (stepStatusData.BY === false) {
+            // User selects a CC0 license
+            visible = ['FS', 'BY', 'NC', 'ND', 'SA', 'CW', 'AD']
+            enabled = ['FS', 'BY', 'CW', 'AD']
+            stepsDisabledDue = 'CC0'
+        } else if (stepStatusData.ND) {
+            // User selects an ND license: SA step is disabled
+            visible = ['FS', 'BY', 'NC', 'ND', 'SA', 'AD']
+            enabled = ['FS', 'BY', 'NC', 'ND', 'AD']
+            stepsDisabledDue = 'CC0'
+        } else {
+            // User selects a non-ND BY license from the stepper
+            visible = ['FS', 'BY', 'NC', 'ND', 'SA', 'AD']
+            enabled = ['FS', 'BY', 'NC', 'ND', 'SA', 'AD']
+        }
+    }
+    return { visible, enabled, stepsDisabledDue }
+}
+
 function generateHTML(attributionDetails, shortLicenseName) {
     const dataForHtmlGeneration = {
         htmlString: '',
@@ -138,7 +153,6 @@ function generateHTML(attributionDetails, shortLicenseName) {
     return dataForHtmlGeneration
 }
 export {
-    defaultAttributes, CC0Attributes, CCBYAttributes, visibleSetters, disabledSetters,
-    shortToAttr, attrToShort, attrToFull, licenseUrl, licenseSlug, licenseIconsArr,
-    generateHTML
+    defaultAttributes, CC0Attributes, CCBYAttributes, shortToAttr, attrToShort,
+    attrToFull, licenseUrl, licenseSlug, licenseIconsArr, generateHTML, updateVisibleEnabledStatus
 }