Merge pull request #161 from weni-ai/fix/graph-funnel-i18n

[ENGAGE-1790] - Fix graph funnel number format and click outside event in generate insights modal
weni-ai · Oct 8, 2024 · f8b88c6 · f8b88c6
2 parents 89533f7 + be3ea7a
commit f8b88c6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/src/components/insights/Layout/HeaderGenerateInsights/HeaderGenerateInsightModal.vue b/src/components/insights/Layout/HeaderGenerateInsights/HeaderGenerateInsightModal.vue
@@ -61,6 +61,8 @@ import InsightModalFooter from './InsightModalFooter.vue';
 import firebaseService from '@/services/api/resources/GPT';
 import mitt from 'mitt';
 import { formatSecondsToHumanString } from '@/utils/time';
+import { onClickOutside } from '@vueuse/core';
+import { ref } from 'vue';
 
 const emitter = mitt();
 
@@ -81,6 +83,18 @@ export default {
 
   emits: ['close'],
 
+  setup(_, context) {
+    const insightModal = ref(null);
+
+    onClickOutside(insightModal, (event) => {
+      if (event?.pointerType === 'mouse') context.emit('close');
+    });
+
+    return {
+      insightModal,
+    };
+  },
+
   data() {
     return {
       generatedInsight: '',

diff --git a/src/components/insights/Layout/HeaderGenerateInsights/HeaderGenerateInsightText.vue b/src/components/insights/Layout/HeaderGenerateInsights/HeaderGenerateInsightText.vue
@@ -56,6 +56,11 @@ export default {
     },
   },
 
+  beforeUnmount() {
+    // If it is closed while typing, in the next iteration the text will be shown in full, which is why we emit this event for this case
+    if (this.isTyping) this.$emit('typingComplete');
+  },
+
   methods: {
     async typeWriter(text, speed) {
       this.isTyping = true;

diff --git a/src/store/modules/widgets.ts b/src/store/modules/widgets.ts
@@ -16,6 +16,8 @@ const mutations = {
   UPDATE_CURRENT_WIDGET_EDITING: 'UPDATE_CURRENT_WIDGET_EDITING',
 };
 
+import i18n from '@/utils/plugins/i18n';
+
 export default {
   namespaced: true,
   state: {
@@ -126,7 +128,12 @@ export default {
           const percentage = ((item.title / totalValue) * 100 || 0).toFixed(2);
           return {
             description: item.description,
-            title: `${percentage}% (${item.title.toLocaleString()})`,
+            title: `${parseFloat(percentage).toLocaleString(
+              i18n.global.locale || 'en-US',
+              {
+                minimumFractionDigits: 2,
+              },
+            )}% (${item.title.toLocaleString(i18n.global.locale || 'en-US')})`,
             percentage: parseFloat(percentage), // Add percentage as a number for sorting
           };
         })