Initial commit

lib/assets/javascripts/new-dashboard/components/Onboarding/tutorials/mixin.js

@@ -0,0 +1,75 @@
+export default {
+  data () {
+    return {
+      step: 1,
+      isModalOpen: true
+    };
+  },
+  mounted () {
+    this.setStepNumber();
+  },
+  watch: {
+    $route () {
+      this.setStepNumber();
+    }
+  },
+  computed: {
+    totalStepCount () {
+      return this.stepNames.length;
+    },
+    stepComponent () {
+      return `Step${this.step}`;
+    }
+  },
+  methods: {
+    goToStep (stepNum) {
+      this.$router.push({
+        hash: `#step-${stepNum}`
+      });
+    },
+    isCurrentStep (stepNum) {
+      return this.step === stepNum;
+    },
+    openModal () {
+      this.isModalOpen = true;
+    },
+    closeModal () {
+      this.isModalOpen = false;
+      this.step = 1;
+      this.$emit('closeModal');
+    },
+    setStepNumber () {
+      const {stepNumber, isValid} = parseHashParameterWithNumber(this.$route.hash);
+
+      if (stepNumber > this.totalStepCount || !isValid) {
+        return this.$router.push({ hash: '#step-1' });
+      }
+
+      this.step = stepNumber;
+    },
+    getStepGTMString (stepNumber) {
+      return `gtm-${this.wizardName}-step${stepNumber}`;
+    }
+  },
+  updated () {
+    if (this.$refs.wizard) {
+      this.$refs.wizard.scrollTo({ top: 0, left: 0 });
+    }
+  }
+};
+
+function parseHashParameterWithNumber (hash, token = 'step-') {
+  const stepIndex = hash.indexOf(token);
+  const includesStep = stepIndex > -1;
+
+  if (!includesStep) {
+    return;
+  }
+
+  const stepNumber = +hash.substring(stepIndex + token.length);
+
+  return {
+    isValid: Number.isInteger(stepNumber),
+    stepNumber: stepNumber
+  };
+}