Merge pull request #87 from NeOMakinG/fix-null

Fix wrong conditions on steps
PrestaShop · Oct 19, 2020 · 1517984 · 1517984
2 parents fefc062 + 643bb01
commit 1517984
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 67 deletions.
diff --git a/config.xml b/config.xml
@@ -2,7 +2,7 @@
 <module>
     <name>welcome</name>
     <displayName><![CDATA[Welcome]]></displayName>
-    <version><![CDATA[6.0.2]]></version>
+    <version><![CDATA[6.0.3]]></version>
     <description><![CDATA[Help the user to create his first product.]]></description>
     <author><![CDATA[PrestaShop]]></author>
     <tab><![CDATA[]]></tab>

diff --git a/js/src/OnBoarding.js b/js/src/OnBoarding.js
@@ -36,7 +36,7 @@ class OnBoarding {
    * Display the needed elements for the current step.
    */
   showCurrentStep() {
-    $('.onboarding-navbar').toggleClass('displayed', this.isShutDown === true);
+    $('.onboarding-navbar').toggleClass('displayed', !!this.isShutDown);
     $('.onboarding-advancement').toggle(this.isShutDown === false);
     $('.onboarding-popup').remove();
     $('.onboarding-tooltip').remove();
@@ -47,7 +47,10 @@ class OnBoarding {
     if ($('#nav-sidebar').length) {
       $('#nav-sidebar').css('padding-bottom', `${onBoardingHeight + 50}px`);
     } else {
-      $('nav.nav-bar ul.main-menu').css('margin-bottom', `${onBoardingHeight}px`);
+      $('nav.nav-bar ul.main-menu').css(
+        'margin-bottom',
+        `${onBoardingHeight}px`,
+      );
     }
 
     if (!this.isShutDown) {
@@ -60,7 +63,9 @@ class OnBoarding {
           this.placeToolTip(step);
         }
 
-        $('.onboarding-advancement').toggle($.inArray('hideFooter', step.options) === -1);
+        $('.onboarding-advancement').toggle(
+          $.inArray('hideFooter', step.options) === -1,
+        );
         this.updateAdvancement();
       } else {
         $('.onboarding-advancement').toggle(false);
@@ -99,19 +104,19 @@ class OnBoarding {
    * @param {int} stepIndex Step index
    */
   gotoStep(stepIndex) {
-    this.save({action: 'setCurrentStep', value: stepIndex}, ((error) => {
+    this.save({action: 'setCurrentStep', value: stepIndex}, (error) => {
       if (!error) {
         const currentStep = this.getStep(this.currentStep);
         const nextStep = this.getStep(stepIndex);
 
-        if (nextStep === null) {
+        if (!nextStep) {
           $('.onboarding-popup').remove();
           $('.onboarding-navbar').remove();
           $('.onboarding-tooltip').remove();
           return;
         }
 
-        if (currentStep.action !== null) {
+        if (currentStep.action) {
           $(currentStep.action.selector)[currentStep.action.action]();
         } else {
           this.currentStep += 1;
@@ -122,7 +127,7 @@ class OnBoarding {
           }
         }
       }
-    }));
+    });
   }
 
   getTokenAsString(redirectUrl) {
@@ -160,8 +165,10 @@ class OnBoarding {
   static parseQueryString(queryString) {
     const queryStringParts = queryString.split('&');
     const queryParams = {};
-    let parts; let i; let key; let
-      value;
+    let parts;
+    let i;
+    let key;
+    let value;
     for (i = 0; i < queryStringParts.length; i += 1) {
       parts = queryStringParts[i].split('=');
       [key, value] = parts;
@@ -192,14 +199,17 @@ class OnBoarding {
    * Stop the OnBoarding
    */
   stop() {
-    this.save({action: 'setCurrentStep', value: this.getTotalSteps()}, (error) => {
-      if (!error) {
-        $('.onboarding-advancement').remove();
-        $('.onboarding-navbar').remove();
-        $('.onboarding-popup').remove();
-        $('.onboarding-tooltip').remove();
-      }
-    });
+    this.save(
+      {action: 'setCurrentStep', value: this.getTotalSteps()},
+      (error) => {
+        if (!error) {
+          $('.onboarding-advancement').remove();
+          $('.onboarding-navbar').remove();
+          $('.onboarding-popup').remove();
+          $('.onboarding-tooltip').remove();
+        }
+      },
+    );
   }
 
   /**
@@ -211,7 +221,10 @@ class OnBoarding {
 
     this.steps.groups.forEach((group) => {
       group.steps.forEach((step) => {
-        if (stepCount <= this.currentStep && $.inArray('savepoint', step.options) !== -1) {
+        if (
+          stepCount <= this.currentStep
+          && $.inArray('savepoint', step.options) !== -1
+        ) {
           lastSavePointStep = stepCount;
         }
         stepCount += 1;
@@ -329,11 +342,13 @@ class OnBoarding {
       method: 'POST',
       url: this.apiLocation,
       data: settings,
-    }).done((result) => {
-      callback(result !== '0');
-    }).fail(() => {
-      callback(true);
-    });
+    })
+      .done((result) => {
+        callback(result !== '0');
+      })
+      .fail(() => {
+        callback(true);
+      });
   }
 
   /**
@@ -345,11 +360,13 @@ class OnBoarding {
     let totalSteps = 0;
 
     this.steps.groups.forEach((group, index) => {
-      const positionOnChunk = Math.min((this.currentStep + 1) - totalSteps, group.steps.length);
-      advancementFooter.find(`.group-${index} .advancement`).css(
-        'width',
-        `${(positionOnChunk / group.steps.length) * 100}%`,
+      const positionOnChunk = Math.min(
+        this.currentStep + 1 - totalSteps,
+        group.steps.length,
       );
+      advancementFooter
+        .find(`.group-${index} .advancement`)
+        .css('width', `${(positionOnChunk / group.steps.length) * 100}%`);
       totalSteps += group.steps.length;
       if (positionOnChunk === group.steps.length) {
         const id = advancementFooter.find(`.group-${index} .id`);
@@ -359,29 +376,40 @@ class OnBoarding {
       }
     });
 
-    advancementFooter.find('.group-title').html(
-      `${this.getCurrentGroupID() + 1}/${this.getTotalGroups()
-      } - ${
-        this.getGroupForStep(this.currentStep).title}`,
-    );
+    advancementFooter
+      .find('.group-title')
+      .html(
+        `${this.getCurrentGroupID() + 1}/${this.getTotalGroups()} - ${
+          this.getGroupForStep(this.currentStep).title
+        }`,
+      );
 
     if (this.getGroupForStep(this.currentStep).subtitle) {
       if (this.getGroupForStep(this.currentStep).subtitle[1]) {
-        advancementFooter.find('.step-title-1').html(
-          `<i class="material-icons">check</i> ${
-            this.getGroupForStep(this.currentStep).subtitle[1]}`,
-        );
+        advancementFooter
+          .find('.step-title-1')
+          .html(
+            `<i class="material-icons">check</i> ${
+              this.getGroupForStep(this.currentStep).subtitle[1]
+            }`,
+          );
       }
       if (this.getGroupForStep(this.currentStep).subtitle[2]) {
-        advancementFooter.find('.step-title-2').html(
-          `<i class="material-icons">check</i> ${
-            this.getGroupForStep(this.currentStep).subtitle[2]}`,
-        );
+        advancementFooter
+          .find('.step-title-2')
+          .html(
+            `<i class="material-icons">check</i> ${
+              this.getGroupForStep(this.currentStep).subtitle[2]
+            }`,
+          );
       }
     }
 
     const totalAdvancement = this.currentStep / this.getTotalSteps();
-    advancementNav.find('.text').find('.text-right').html(`${Math.floor(totalAdvancement * 100)}%`);
+    advancementNav
+      .find('.text')
+      .find('.text-right')
+      .html(`${Math.floor(totalAdvancement * 100)}%`);
     advancementNav.find('.progress-bar').width(`${totalAdvancement * 100}%`);
   }
 
@@ -422,7 +450,7 @@ class OnBoarding {
       $('.onboarding-tooltip').remove();
     }
 
-    this.save({action: 'setShutDown', value: this.isShutDown}, ((error) => {
+    this.save({action: 'setShutDown', value: this.isShutDown}, (error) => {
       if (!error) {
         if (this.isShutDown === 0) {
           if (OnBoarding.isCurrentPage(this.getStep(this.currentStep).page)) {
@@ -432,7 +460,7 @@ class OnBoarding {
           }
         }
       }
-    }));
+    });
   }
 
   /**
@@ -489,7 +517,6 @@ class OnBoarding {
       this.updateToolTipPosition(step);
     }, 100);
 
-
     this.tooltip.show();
 
     this.tooltip.addClass(`-${step.position}`);
@@ -498,7 +525,9 @@ class OnBoarding {
     const currentStepIDOnGroup = this.getCurrentStepIDOnGroup();
     const groupStepsCount = this.getGroupForStep(this.currentStep).steps.length;
 
-    this.tooltip.find('.count').html(`${currentStepIDOnGroup + 1}/${groupStepsCount}`);
+    this.tooltip
+      .find('.count')
+      .html(`${currentStepIDOnGroup + 1}/${groupStepsCount}`);
 
     const bullsContainer = this.tooltip.find('.bulls');
     for (let idStep = 0; idStep < groupStepsCount; idStep += 1) {
@@ -513,8 +542,11 @@ class OnBoarding {
     }
 
     setTimeout(() => {
-      if (this.tooltipElement.offset().top > ((window.screen.height / 2) - 200)) {
-        window.scrollTo(0, this.tooltipElement.offset().top - ((window.screen.height / 2) - 200));
+      if (this.tooltipElement.offset().top > window.screen.height / 2 - 200) {
+        window.scrollTo(
+          0,
+          this.tooltipElement.offset().top - (window.screen.height / 2 - 200),
+        );
       }
     }, 200);
 
@@ -525,15 +557,20 @@ class OnBoarding {
    * Update the position of the tooltip.
    */
   updateToolTipPosition() {
-    const middleX = this.tooltipElement.offset().top
-      - (this.tooltipElement.outerHeight() / 2)
-      - (this.tooltip.outerHeight() / 2);
-    const middleY = this.tooltipElement.offset().top
-      + (this.tooltipElement.outerHeight() / 2)
-      - (this.tooltip.outerHeight() / 2);
-    const topY = this.tooltipElement.offset().top
-      + (this.tooltipElement.outerHeight() / 2)
-      - (this.tooltip.outerHeight() / 2);
+    /* eslint-disable */
+    const middleX =
+      this.tooltipElement.offset().top -
+      this.tooltipElement.outerHeight() / 2 -
+      this.tooltip.outerHeight() / 2;
+    const middleY =
+      this.tooltipElement.offset().top +
+      this.tooltipElement.outerHeight() / 2 -
+      this.tooltip.outerHeight() / 2;
+    const topY =
+      this.tooltipElement.offset().top +
+      this.tooltipElement.outerHeight() / 2 -
+      this.tooltip.outerHeight() / 2;
+    /* eslint-enable */
     const leftX = this.tooltipElement.offset().left - this.tooltip.outerWidth();
     const rightX = this.tooltipElement.offset().left + this.tooltipElement.outerWidth();