Merge pull request #184 from weni-ai/feature/update-onboarding

[ENGAGE-1763] - Update onboarding

src/components/insights/drawers/DrawerConfigWidgetDynamic.vue

@@ -7,7 +7,7 @@
     :data-onboarding-id="
       widget.type === 'card'
         ? 'drawer-card-metric-config'
-        : 'drawer-graph-funnel'
+        : 'drawer-graph-empty'
     "
     size="md"
     :modelValue="modelValue"
@@ -344,7 +344,7 @@ export default {
         } else {
           await this.getCurrentDashboardWidgetData(this.treatedWidget);
         }
-        /* TODO: onBoarding - unused code until it is defined whether to keep or remove
+
         if (this.showConfigWidgetOnboarding) {
           const isLastTourStep =
             this.onboardingRefs['widgets-onboarding-tour'].currentStep ===
@@ -354,7 +354,7 @@ export default {
             this.setShowCompleteOnboardingModal(true);
             localStorage.setItem('hasWidgetsOnboardingComplete', true);
           }
-        }*/
+        }
         unnnic.unnnicCallAlert({
           props: {
             text: this.$t('drawers.metric_saved'),

src/components/insights/onboardings/WidgetOnboarding.vue

@@ -17,7 +17,7 @@ export default {
       type: Boolean,
       required: true,
     },
-    showFunnelTour: {
+    showWidgetTour: {
       type: Boolean,
       required: true,
     },
@@ -33,7 +33,7 @@ export default {
 
     hasFunnelWidget() {
       return !!this.currentDashboardWidgets.some(
-        (widget) => widget.type === 'graph_funnel',
+        (widget) => widget.type === 'empty_column',
       );
     },
 
@@ -83,38 +83,58 @@ export default {
           hiddenNextStepButton: true,
         },
       ];
-      const funnelSteps = [
+
+      const emptyWidgetSteps = [
         {
-          title: this.$t('widgets_onboarding.funnel.step.define_metric.title'),
+          title: this.$t(
+            'widgets_onboarding.empty_widget.step.define_metric.title',
+          ),
           description: this.$t(
-            'widgets_onboarding.funnel.step.define_metric.description',
+            'widgets_onboarding.empty_widget.step.define_metric.description',
           ),
           attachedElement:
-            this.onboardingRefs['widget-graph-funnel'] ||
+            this.onboardingRefs['widget-graph-empty'] ||
             this.onboardingRefs['insights-layout'],
           popoverPosition: this.hasCardWidget ? 'left' : 'right',
           padding: {
             vertical: -400,
           },
         },
         {
-          title: this.$t('widgets_onboarding.funnel.step.fill_metric.title'),
+          title: this.$t(
+            'widgets_onboarding.empty_widget.step.select_widget_type.title',
+          ),
           description: this.$t(
-            'widgets_onboarding.funnel.step.fill_metric.description',
+            'widgets_onboarding.empty_widget.step.select_widget_type.description',
           ),
           attachedElement:
-            this.onboardingRefs['drawer-graph-funnel'] ||
+            this.onboardingRefs['widget-gallery'] ||
             this.onboardingRefs['insights-layout'],
           popoverPosition: 'left',
-          beforeRender: this.beforeOpenFunnelConfig,
+          beforeRender: this.beforeOpenGaleryEmptyConfig,
+          hiddenNextStepButton: true,
+        },
+        {
+          title: this.$t(
+            'widgets_onboarding.empty_widget.step.fill_metric.title',
+          ),
+          description: this.$t(
+            'widgets_onboarding.empty_widget.step.fill_metric.description',
+          ),
+          attachedElement:
+            this.onboardingRefs['drawer-graph-empty'] ||
+            this.onboardingRefs['insights-layout'],
+          popoverPosition: 'left',
+          beforeRender: this.beforeOpenEmptyWidgetConfig,
           hiddenNextStepButton: true,
         },
       ];
+
       if (this.hasCardWidget && this.showCardTour) {
         steps.push(...cardSteps);
       }
-      if (this.hasFunnelWidget && this.showFunnelTour) {
-        steps.push(...funnelSteps);
+      if (this.hasFunnelWidget && this.showWidgetTour) {
+        steps.push(...emptyWidgetSteps);
       }
 
       return steps;
@@ -130,9 +150,9 @@ export default {
         ),
       });
       this.setOnboardingRef({
-        key: 'widget-graph-funnel',
+        key: 'widget-graph-empty',
         ref: document.querySelector(
-          '[data-onboarding-id="widget-graph-funnel"]',
+          '[data-onboarding-id="widget-graph-empty"]',
         ),
       });
 
@@ -147,7 +167,8 @@ export default {
   methods: {
     ...mapActions({
       beforeOpenWidgetConfig: 'onboarding/beforeOpenWidgetConfig',
-      beforeOpenFunnelConfig: 'onboarding/beforeOpenFunnelConfig',
+      beforeOpenEmptyWidgetConfig: 'onboarding/beforeOpenEmptyWidgetConfig',
+      beforeOpenGaleryEmptyConfig: 'onboarding/beforeOpenGaleryEmptyConfig',
       beforeOpenWidgetMetricConfig: 'onboarding/beforeOpenWidgetMetricConfig',
     }),
     ...mapMutations({

src/locales/en.json

@@ -295,23 +295,28 @@
         },
         "select_widget_type": {
           "title": "Select widget",
-          "description": "Select the type of metric you want to configure. If you have any questions, start by testing Executions"
+          "description": "Select the type of metric you want to configure. If you have any questions, start by testing Executions",
+          "general_description": "Select the type of metric you want to configure"
         },
         "set_metric": {
           "title": "Defining metric",
           "description": "After selecting the type of metric, choose a flow that brings relevant values to your operation, fill in the rest, and save!"
         }
       }
     },
-    "funnel": {
+    "empty_widget": {
       "step": {
         "define_metric": {
-          "title": "Defining metrics for the chart",
-          "description": "Select the main flows of your operation to generate a funnel visualization and track the journey of your contacts"
+          "title": "Keep exploring the possibilities",
+          "description": "See your main VTEX sales data or follow the journey of your contacts"
+        },
+        "select_widget_type": {
+          "title": "Select the ideal widget",
+          "description": "See your main VTEX sales data or follow the journey of your contacts"
         },
         "fill_metric": {
-          "title": "Fill metrics",
-          "description": "Provide an easy name for your metric and select the flow from which you want to count the executions"
+          "title": "Configure the widget",
+          "description": "Fill in the fields to configure your widget and get valuable data!"
         }
       }
     }

src/locales/es.json

@@ -295,23 +295,28 @@
         },
         "select_widget_type": {
           "title": "Seleccionar widget",
-          "description": "Seleccione el tipo de métrica que desea configurar. Si tiene alguna duda, comience probando Ejecuciones"
+          "description": "Seleccione el tipo de métrica que desea configurar. Si tiene alguna duda, comience probando Ejecuciones",
+          "general_description": "Seleccione el tipo de métrica que desea configurar"
         },
         "set_metric": {
           "title": "Definiendo métrica",
           "description": " Después de seleccionar el tipo de métrica, elija un flujo que traiga valores relevantes para su operación, complete el resto y guarde"
         }
       }
     },
-    "funnel": {
+    "empty_widget": {
       "step": {
         "define_metric": {
-          "title": "Definiendo métricas para el gráfico",
-          "description": "Seleccione los principales flujos de su operación para generar una visualización en embudo y seguir la trayectoria de sus contactos"
+          "title": "Siga explorando las posibilidades",
+          "description": "Consulta tus principales datos de ventas VTEX o sigue el recorrido de tus contactos."
+        },
+        "select_widget_type": {
+          "title": "Selecciona el widget ideal",
+          "description": "Consulta tus datos clave de ventas VTEX o sigue el recorrido de tus contactos"
         },
         "fill_metric": {
-          "title": "Rellenar métricas",
-          "description": "Proporcione un nombre fácil para su métrica y seleccione el flujo desde el cual desea contabilizar las ejecuciones"
+          "title": "Configura el widget",
+          "description": "Rellena los campos para configurar tu widget y ¡obtén datos valiosos!"
         }
       }
     }

src/locales/pt_br.json

@@ -295,23 +295,28 @@
         },
         "select_widget_type": {
           "title": "Selecionar widget",
-          "description": "Selecione o tipo de métrica que deseja configurar, caso tenha dúvidas comece testando o Execuções"
+          "description": "Selecione o tipo de métrica que deseja configurar, caso tenha dúvidas comece testando o Execuções",
+          "general_description": "Selecione o tipo de métrica que deseja configurar"
         },
         "set_metric": {
           "title": "Definindo métrica",
           "description": "Após selecionar o tipo de métrica, selecione um fluxo que traga valores relevantes para sua operação, preencha o restante e salve!"
         }
       }
-    },
-    "funnel": {
+    }, 
+    "empty_widget": {
       "step": {
         "define_metric": {
-          "title": "Definindo métricas para gráfico",
-          "description": "Selecione os principais fluxos da sua operação para gerar uma visualização em funil e acompanhar a jornada dos seus contatos"
+          "title": "Continue explorando as possibilidades", 
+          "description": "Veja os principais seus principais dados de vendas VTEX ou acompanhe a jornada dos seus contatos"
+        },
+        "select_widget_type": {
+          "title": "Selecione o widget ideal",
+          "description": "Veja os principais seus principais dados de vendas VTEX ou acompanhe a jornada dos seus contatos"
         },
         "fill_metric": {
-          "title": "Preencher métricas",
-          "description": "Informe um nome fácil para sua métrica e selecione o fluxo de onde deseja contabilizar as execuções"
+          "title": "Configure o widget",
+          "description": "Preencha os campos para configurar seu widget e obter dados valiosos!"
         }
       }
     }

src/store/modules/onboarding.js

@@ -15,8 +15,8 @@ export default {
       'widget-card-metric': null,
       'widget-gallery': null,
       'drawer-card-metric-config': null,
-      'widget-graph-funnel': null,
-      'drawer-graph-funnel': null,
+      'widget-graph-empty': null,
+      'drawer-graph-empty': null,
       'dashboard-onboarding-tour': null,
       'widgets-onboarding-tour': null,
     },
@@ -103,20 +103,38 @@ export default {
       });
     },
 
-    async beforeOpenFunnelConfig({ commit, state }) {
-      const funnelDrawer = document.querySelector(
-        '[data-onboarding-id="drawer-graph-funnel"]',
+    async beforeOpenGaleryEmptyConfig({ commit, state }) {
+      const galeryDrawer = document.querySelector(
+        '[data-onboarding-id="drawer-graph-empty"]',
       );
-      if (!funnelDrawer) {
-        await state.onboardingRefs['widget-graph-funnel']
+      if (!galeryDrawer) {
+        await state.onboardingRefs['widget-graph-empty']
           .querySelector('.unnnic-button')
           .click();
       }
+
       await asyncTimeout(300).then(() => {
         commit(mutations.SET_ONBOARDING_REF, {
-          key: 'drawer-graph-funnel',
+          key: 'widget-gallery',
+          ref: document.querySelector('[data-onboarding-id="widget-gallery"]'),
+        });
+      });
+    },
+
+    async beforeOpenEmptyWidgetConfig({ commit, state }) {
+      const galeryDrawer = document.querySelector(
+        '[data-onboarding-id="drawer-graph-empty"]',
+      );
+      if (!galeryDrawer) {
+        await state.onboardingRefs['widget-graph-empty']
+          .querySelector('.unnnic-button')
+          .click();
+      }
+      await asyncTimeout(600).then(() => {
+        commit(mutations.SET_ONBOARDING_REF, {
+          key: 'drawer-graph-empty',
           ref: document.querySelector(
-            '[data-onboarding-id="drawer-graph-funnel"]',
+            '[data-onboarding-id="drawer-graph-empty"]',
           )?.children[1],
         });
       });

src/views/insights/Dashboard.vue

@@ -3,11 +3,10 @@
     class="dashboard"
     :style="dashboardGridStyle"
   >
-    <!-- TODO: onBoarding - unused code until it is defined whether to keep or remove -->
     <WidgetOnboarding
-      v-if="false"
-      :showCardTour="!hasWidgetFilledData.card"
-      :showFunnelTour="!hasWidgetFilledData.funnel"
+      v-if="showConfigWidgetOnboarding"
+      :showCardTour="showOnboarding.card"
+      :showWidgetTour="showOnboarding.empty_widget"
     />
     <section
       v-if="isLoadingCurrentDashboardWidgets"
@@ -58,9 +57,9 @@ export default {
     return {
       showDrawerConfigWidget: false,
       widgetConfigurating: null,
-      hasWidgetFilledData: {
+      showOnboarding: {
         card: false,
-        funnel: false,
+        empty_widget: false,
       },
     };
   },
@@ -119,12 +118,13 @@ export default {
     }),
 
     handleWidgetFilledData() {
-      this.hasWidgetFilledData = {
+      this.showOnboarding = {
         card: !!this.currentDashboardWidgets.some(
-          (widget) => !!widget.name && widget.name !== 'Funil',
+          (widget) =>
+            !!widget.type && widget.type === 'card' && widget.is_configurable,
         ),
-        funnel: !!this.currentDashboardWidgets.some(
-          (widget) => widget.name === 'Funil' && !!widget.config.metric_1,
+        empty_widget: !!this.currentDashboardWidgets.some(
+          (widget) => widget.type === 'empty_column',
         ),
       };
     },
@@ -136,7 +136,7 @@ export default {
       if (!hasWidgetsOnboardingComplete) {
         this.handleWidgetFilledData();
 
-        if (this.hasWidgetFilledData.card && this.hasWidgetFilledData.funnel) {
+        if (!this.showOnboarding.card && !this.showOnboarding.empty_widget) {
           localStorage.setItem('hasWidgetsOnboardingComplete', 'true');
         } else this.setShowConfigWidgetsOnboarding(true);
       }
@@ -161,7 +161,7 @@ export default {
     getWidgetOnboardingId(widget) {
       return widget.type === 'card'
         ? 'widget-card-metric'
-        : 'widget-graph-funnel';
+        : 'widget-graph-empty';
     },
   },
 };