Merge pull request #692 from weni-ai/staging

Staging

package.json

@@ -15,7 +15,7 @@
     "@sentry/integrations": "^5.29.2",
     "@vue-stripe/vue-stripe": "^4.2.9",
     "@vue/web-component-wrapper": "^1.2.0",
-    "@weni/unnnic-system": "^1.12.4",
+    "@weni/unnnic-system": "^1.16.6",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dotenv": "^9.0.2",

src/api/projects.js

@@ -1,4 +1,7 @@
+import axios from 'axios';
 import request from './request.js';
+import getEnv from '../utils/env.js';
+import KCService from '../services/Keycloak.js';
 
 export default {
   getProject({ uuid }) {
@@ -106,4 +109,17 @@ export default {
   getTemplates() {
     return request.$http().get('v2/projects/template-type/');
   },
+
+  async apiFlowsGetSuccessOrg({ flowUuid }) {
+    const { data } = await axios.get(
+      `${getEnv('URL_FLOWS')}/api/v2/success_orgs/${flowUuid}`,
+      {
+        headers: {
+          Authorization: `Bearer ${KCService.keycloak.token}`,
+        },
+      },
+    );
+
+    return data;
+  },
 };

src/app.vue

@@ -75,6 +75,7 @@
           :routes="['chats']"
           class="page"
           dont-update-when-changes-language
+          name="chats"
         />
       </div>
     </div>
@@ -121,7 +122,6 @@ import sendAllIframes from './utils/plugins/sendAllIframes';
 import iframessa from 'iframessa';
 import KnowUserModal from './components/KnowUserModal/Index.vue';
 import RightBar from './components/common/RightBar/Index.vue';
-import axios from 'axios';
 import TrialPeriod from './modals/TrialPeriod.vue';
 import { setUser } from '@sentry/browser';
 
@@ -271,22 +271,6 @@ export default {
         }
       } else if (event.data?.event === 'chats:update-unread-messages') {
         this.unreadMessages = event.data.unreadMessages;
-      } else if (event.data?.event === 'ia:get-flows-length') {
-        this.$refs['system-ia'].$refs.iframe.contentWindow.postMessage(
-          {
-            event: 'connect:set-flows-length',
-            flowsLength: this.$store.getters.currentProject?.flow_count || 0,
-          },
-          '*',
-        );
-      } else if (event.data?.event === 'flows:redirect') {
-        this.$router.push({
-          name: 'push',
-          params: {
-            projectUuid: this.$route.params.projectUuid,
-            internal: event.data.path.split('/'),
-          },
-        });
       }
 
       if (content.startsWith(prefix)) {
@@ -314,8 +298,39 @@ export default {
       }
     });
 
-    iframessa.getter('flowsLength', () => {
-      return this.$store.getters.currentProject?.flow_count || 0;
+    iframessa.getter('hasFlows', async () => {
+      const { has_flows } = await this.$store.dispatch(
+        'getSuccessOrgStatusByFlowUuid',
+        {
+          flowUuid: this.$store.getters.currentProject.flow_organization,
+        },
+      );
+
+      return has_flows;
+    });
+
+    iframessa.on('redirectToFlows', ({ data }) => {
+      this.$router.push({
+        name: 'push',
+        params: {
+          projectUuid: this.$route.params.projectUuid,
+          internal: data.path.split('/'),
+        },
+      });
+    });
+
+    iframessa.on('redirectToSettingsChats', ({ data }) => {
+      this.$router.push({
+        name: 'settingsChats',
+        params: {
+          projectUuid: this.$route.params.projectUuid,
+          internal: data.path.split('/'),
+        },
+      });
+    });
+
+    iframessa.getter('isOpenHowToIntegrateChatsModal', () => {
+      return true;
     });
   },
 
@@ -542,21 +557,36 @@ export default {
       }
       try {
         const flowUuid = this.$store.getters.currentProject.flow_organization;
-        const response = await axios.get(
-          `${getEnv('URL_FLOWS')}/api/v2/success_orgs/${flowUuid}`,
-          {
-            headers: {
-              Authorization: `Bearer ${this.$keycloak.token}`,
-            },
-          },
-        );
-        const { has_ia, has_flows, has_channel, has_msg } = response.data;
+
+        let oldValues = null;
+
+        if (this.$store.state.Project.championChatbots[flowUuid]) {
+          oldValues = this.$store.state.Project.championChatbots[flowUuid];
+        }
+
+        const { has_ia, has_flows, has_channel, has_msg } =
+          await this.$store.dispatch('getSuccessOrgStatusByFlowUuid', {
+            flowUuid: this.$store.getters.currentProject.flow_organization,
+            force: true,
+          });
+
+        iframessa.modules.ai?.emit('update:hasFlows', has_flows);
+
         const level =
           [has_flows, has_ia, has_channel, has_msg].lastIndexOf(true) + 1;
-        if (this.championChatbotsByProject[projectUuid] === undefined) {
-          this.$set(this.championChatbotsByProject, projectUuid, level);
-        }
-        if (this.championChatbotsByProject[projectUuid] <= 3 && level >= 4) {
+
+        if (
+          level >= 4 &&
+          oldValues &&
+          [
+            oldValues.has_flows,
+            oldValues.has_ia,
+            oldValues.has_channel,
+            oldValues.has_msg,
+          ].lastIndexOf(true) +
+            1 <
+            4
+        ) {
           this.$store.dispatch('openModal', {
             type: 'confirm',
             showClose: true,
@@ -591,8 +621,7 @@ export default {
               },
             },
           });
-          this.championChatbotsByProject[projectUuid] = level;
-        } else if (level <= 3) {
+        } else if (level < 4) {
           setTimeout(() => {
             this.verifyIfChampionChatbotStatusChanged({
               projectUuid,

src/components/SidebarModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="sidebar-modal">
+    <img :src="image" />
+
+    <div class="content">
+      <div class="u font secondary body-md bold color-neutral-dark">
+        {{ title }}
+      </div>
+
+      <div class="u font secondary body-md color-neutral-cloudy">
+        {{ description }}
+      </div>
+
+      <a :href="$t('docs_urls.how_to_create_a_flow')" target="_blank">
+        <unnnic-button type="terciary" size="small">
+          {{ $t('know_more') }}
+        </unnnic-button>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    image: String,
+    title: String,
+    description: String,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@weni/unnnic-system/src/assets/scss/unnnic.scss';
+@import '~@weni/unnnic-system/dist/unnnic.css';
+
+.sidebar-modal {
+  background-color: $unnnic-color-neutral-light;
+  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  border-radius: $unnnic-border-radius-md;
+  padding: $unnnic-spacing-inset-nano;
+  box-shadow: $unnnic-shadow-level-separated;
+
+  img {
+    width: 100%;
+    aspect-ratio: 252 / 114.5;
+    object-fit: cover;
+    border-radius: $unnnic-border-radius-md;
+  }
+
+  .content {
+    padding: $unnnic-spacing-inset-nano;
+
+    .unnnic-button {
+      width: 100%;
+      margin-top: $unnnic-spacing-stack-xs;
+    }
+  }
+}
+</style>

src/components/external/Sidebar.vue

@@ -18,6 +18,36 @@
         </router-link>
       </div>
     </template>
+
+    <template v-if="!hasFlows">
+      <sidebar-modal
+        slot="block-studio"
+        :title="$t('SIDEBAR.modules.studio.title')"
+        :description="$t('SIDEBAR.modules.studio.description')"
+        :image="gifStudio"
+      />
+
+      <sidebar-modal
+        slot="block-intelligences"
+        :title="$t('SIDEBAR.modules.intelligences.title')"
+        :description="$t('SIDEBAR.modules.intelligences.description')"
+        :image="gifIntelligences"
+      />
+
+      <sidebar-modal
+        slot="block-chats"
+        :title="$t('SIDEBAR.modules.chats.title')"
+        :description="$t('SIDEBAR.modules.chats.description')"
+        :image="gifChats"
+      />
+
+      <sidebar-modal
+        slot="block-integrations"
+        :title="$t('SIDEBAR.modules.integrations.title')"
+        :description="$t('SIDEBAR.modules.integrations.description')"
+        :image="gifIntegrations"
+      />
+    </template>
   </unnnic-sidebar-primary>
 </template>
 
@@ -26,9 +56,19 @@ import { mapGetters, mapActions } from 'vuex';
 import { get } from 'lodash';
 import getEnv from '@/utils/env';
 import { PROJECT_ROLE_CHATUSER } from '../users/permissionsObjects';
+import SidebarModal from '../SidebarModal.vue';
+import gifStudio from '../../assets/tutorial/sidebar-studio.gif';
+import gifIntelligences from '../../assets/tutorial/sidebar-intelligences.gif';
+import gifChats from '../../assets/tutorial/sidebar-chats.gif';
+import gifIntegrations from '../../assets/tutorial/sidebar-integrations.gif';
 
 export default {
   name: 'Sidebar',
+
+  components: {
+    SidebarModal,
+  },
+
   props: {
     unreadMessages: Number,
   },
@@ -38,6 +78,10 @@ export default {
       open: true,
       current: '',
       notifyAgents: false,
+      gifStudio,
+      gifIntelligences,
+      gifChats,
+      gifIntegrations,
     };
   },
 
@@ -55,11 +99,15 @@ export default {
     });
   },
 
-  mounted() {},
-
   computed: {
     ...mapGetters(['currentProject']),
 
+    hasFlows() {
+      return this.$store.state.Project.championChatbots[
+        this.$store.getters.currentProject?.flow_organization
+      ]?.has_flows;
+    },
+
     hideModulesButChats() {
       if (
         !this.$store.getters.currentProject.menu.chat.length &&
@@ -124,6 +172,7 @@ export default {
             },
             {
               label: 'SIDEBAR.STUDIO',
+              id: 'studio',
               icon: 'app-window-edit',
               viewUrl: `/projects/${get(project, 'uuid')}/studio/init`,
               show: () => {
@@ -132,6 +181,7 @@ export default {
             },
             {
               label: 'SIDEBAR.BH',
+              id: 'intelligences',
               icon: 'science-fiction-robot',
               viewUrl: `/projects/${get(project, 'uuid')}/bothub/init`,
               show: () => {
@@ -140,6 +190,7 @@ export default {
             },
             {
               label: 'SIDEBAR.RC',
+              id: 'chats',
               icon: 'messaging-we-chat',
               viewUrl: `/projects/${get(project, 'uuid')}/rocketchat`,
               show(project) {
@@ -149,6 +200,7 @@ export default {
             },
             {
               label: 'SIDEBAR.chats',
+              id: 'chats',
               icon: 'messaging-we-chat',
               viewUrl: `/projects/${get(project, 'uuid')}/chats/init`,
               show: (project) => {
@@ -169,6 +221,7 @@ export default {
           items: [
             {
               label: 'SIDEBAR.INTEGRATIONS',
+              id: 'integrations',
               icon: 'layout-dashboard',
               viewUrl: `/projects/${get(project, 'uuid')}/integrations/init`,
               show: (project) => {