Merge pull request #43 from PrestaShopCorp/refactor/segment

Account - Refactor segment implementation and fix storybook
PrestaShopCorp · Oct 22, 2020 · 5ab06b7 · 5ab06b7
2 parents 8f76e6f + 5660a67
commit 5ab06b7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 20 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -3,5 +3,13 @@ import { configure } from '@storybook/vue';
 // import css style
 import 'bootstrap-vue/dist/bootstrap-vue';
 import 'prestakit/dist/css/bootstrap-prestashop-ui-kit.css';
+import Vue from "vue";
+import Segment from "@prestashopcorp/segment-vue";
+
+Vue.use(Segment, {
+  id: process.env.VUE_APP_SEGMENT,
+  pageCategory: "ps_accounts-ui",
+  debug: true
+})
 
 configure(require.context('../src', true, /\.stories\.(jsx?|mdx)$/), module);
diff --git a/src/components/panel/Account.vue b/src/components/panel/Account.vue
@@ -259,6 +259,31 @@
           window.open(this.resendEmailLink, '_blank');
         }
       },
+      tracking(status) {
+        const trackByUserStatus = {
+          user_not_connected: () => {
+            this.$segment.track('ACC View onboarding component - not connected state', {
+              Category: 'Account',
+            });
+          },
+          user_connected_not_validated: () => {
+            this.$segment.track('ACC View onboarding component - connected not validated state', {
+              Category: 'Account',
+            });
+          },
+          user_connected: () => {
+            this.$segment.track('ACC View onboarding component - connected validated state', {
+              Category: 'Account',
+            });
+          },
+          user_not_admin: () => {
+            this.$segment.track('ACC View admin component', {
+              Category: 'Account',
+            });
+          },
+        };
+        return trackByUserStatus[status].call();
+      },
       viewingPanel() {
         const previousPanel = this.panelShown;
 
@@ -271,7 +296,7 @@
         } else {
           this.panelShown = 'user_connected';
         }
-
+        this.tracking(this.panelShown);
         if (this.panelShown && (previousPanel !== this.panelShown)) {
           // Need to make call async in order to let callbacks ready.
           setTimeout(() => {
@@ -303,25 +328,6 @@
       },
     },
     mounted() {
-      if (this.isAdmin) {
-        if (!this.userIsConnected) {
-          this.$segment.track('ACC View onboarding component - not connected state', {
-            Category: 'Account',
-          });
-        } else if (!this.userIsConnectedAndValidated) {
-          this.$segment.track('ACC View onboarding component - connected not validated state', {
-            Category: 'Account',
-          });
-        } else {
-          this.$segment.track('ACC View onboarding component - connected validated state', {
-            Category: 'Account',
-          });
-        }
-      } else {
-        this.$segment.track('ACC View admin component', {
-          Category: 'Account',
-        });
-      }
       this.viewingPanel();
     },
     updated() {