Initial commit

2020-06-15 10:58:47 +08:00
commit 4f1dfe7564
8590 changed files with 1516878 additions and 0 deletions
@@ -0,0 +1,63 @@
+<template>
+  <button
+    class="button"
+    :class="[{'not-visited': !(hasVisitedOnboarding || isFirstTimeViewingDashboard)}, isFirstTimeViewingDashboard ? 'button--cta' : 'button--ghost']"
+    @click="openOnboarding()">
+    {{ $t('Wizards.Distributor.cta') }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'OnboardingButton',
+  props: {
+    isFirstTimeViewingDashboard: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      hasVisitedOnboarding: false
+    };
+  },
+  mounted () {
+    this.hasVisitedOnboarding = this.setHasVisitedOnboarding();
+  },
+  methods: {
+    openOnboarding () {
+      this.updateHasVisitedOnboarding(true);
+      this.$router.push({ name: 'onboarding' });
+    },
+    setHasVisitedOnboarding () {
+      if (localStorage.hasOwnProperty('hasVisitedOnboarding')) {
+        return JSON.parse(window.localStorage.getItem('hasVisitedOnboarding'));
+      } else {
+        return false;
+      }
+    },
+    updateHasVisitedOnboarding (visited) {
+      this.hasVisitedOnboarding = visited;
+      localStorage.hasVisitedOnboarding = JSON.stringify(visited);
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+@import 'new-dashboard/styles/variables';
+
+button.button--ghost {
+  position: relative;
+
+  &.not-visited::after {
+    content: '';
+    position: absolute;
+    top: -4px;
+    right: -12px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: $onboarding-notification;
+  }
+}
+</style>