@weni/unnnic-system 3.25.5 → 3.25.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.25.5",
+  "version": "3.25.6",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/ChatsContact/ChatsContact.vue

@@ -106,6 +106,20 @@
       <section
         class="chats-contact__infos__unread-messages-container__pin-container"
       >
+        <UnnnicTooltip
+          v-if="pendingResponse"
+          class="chats-contact__infos__pending-response"
+          :enabled="!!pendingResponseTooltip"
+          :text="pendingResponseTooltip"
+          side="top"
+        >
+          <UnnnicIcon
+            icon="reply"
+            size="sm"
+            scheme="fg-info"
+            data-testid="pending-response-icon"
+          />
+        </UnnnicTooltip>
         <button
           v-if="isRenderPin"
           data-testid="pin-button"
@@ -148,6 +162,7 @@ import UnnnicIcon from '../Icon.vue';
 import TransitionRipple from '../TransitionRipple/TransitionRipple.vue';
 import UnnnicI18n from '../../mixins/i18n';
 import Checkbox from '../Checkbox/Checkbox.vue';
+import UnnnicTooltip from '../ToolTip/ToolTip.vue';
 
 import('moment/dist/locale/es.js');
 import('moment/dist/locale/pt-br.js');
@@ -162,6 +177,7 @@ export default {
     UnnnicIcon,
     TransitionRipple,
     Checkbox,
+    UnnnicTooltip,
   },
 
   mixins: [UnnnicI18n],
@@ -235,6 +251,14 @@ export default {
       type: String,
       default: ' fg-base',
     },
+    pendingResponse: {
+      type: Boolean,
+      default: false,
+    },
+    pendingResponseTooltip: {
+      type: String,
+      default: '',
+    },
   },
 
   emits: ['click', 'clickPin'],
@@ -547,6 +571,11 @@ export default {
       color: $unnnic-color-fg-muted;
     }
 
+    &__pending-response {
+      display: flex;
+      align-items: center;
+    }
+
     &__unread-messages-container {
       height: 100%;
       min-width: max-content;
@@ -560,6 +589,7 @@ export default {
       &__pin-container {
         display: flex;
         align-items: center;
+        gap: $unnnic-space-1;
         position: relative;
         z-index: 10;
       }

package/src/components/ChatsContact/__tests__/ChatsContact.spec.js

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+import { beforeEach, describe, expect, afterEach, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 
 import UnnnicChatsContact from '../ChatsContact.vue';
@@ -258,4 +258,48 @@ describe('UnnnicChatsContact', () => {
       expect(pinElement.exists()).toBe(false);
     });
   });
+
+  describe('Pending response', () => {
+    it('should not render the pending response icon by default', () => {
+      const icon = wrapper.find('[data-testid="pending-response-icon"]');
+      expect(icon.exists()).toBe(false);
+    });
+
+    it('should render the pending response icon when pendingResponse is true', async () => {
+      await wrapper.setProps({ pendingResponse: true });
+
+      const icon = wrapper.findComponent(
+        '[data-testid="pending-response-icon"]',
+      );
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('icon')).toBe('reply');
+      expect(icon.props('scheme')).toBe('fg-info');
+    });
+
+    it('should keep tooltip disabled when pendingResponseTooltip is empty', async () => {
+      await wrapper.setProps({
+        pendingResponse: true,
+        pendingResponseTooltip: '',
+      });
+
+      const tooltip = wrapper.findComponent({ name: 'UnnnicTooltip' });
+      expect(tooltip.exists()).toBe(true);
+      expect(tooltip.props('enabled')).toBe(false);
+      expect(tooltip.props('text')).toBe('');
+    });
+
+    it('should enable tooltip with the provided text when pendingResponseTooltip is set', async () => {
+      const tooltipText = 'You did not respond to this contact';
+
+      await wrapper.setProps({
+        pendingResponse: true,
+        pendingResponseTooltip: tooltipText,
+      });
+
+      const tooltip = wrapper.findComponent({ name: 'UnnnicTooltip' });
+      expect(tooltip.exists()).toBe(true);
+      expect(tooltip.props('enabled')).toBe(true);
+      expect(tooltip.props('text')).toBe(tooltipText);
+    });
+  });
 });

package/src/components/ChatsContact/__tests__/__snapshots__/ChatsContact.spec.js.snap

@@ -16,6 +16,7 @@ exports[`UnnnicChatsContact > should match snapshot 1`] = `
     <!--v-if-->
     <section data-v-8ce6efd5="" class="chats-contact__infos__unread-messages-container__pin-container">
       <!--v-if-->
+      <!--v-if-->
     </section>
   </section>
   <transition-group-stub data-v-17112bed="" data-v-8ce6efd5="" name="grow" tag="div" appear="false" persisted="false" css="true" class="ripples"></transition-group-stub>

package/src/stories/ChatsContact.stories.js

@@ -135,6 +135,36 @@ export const Discussion = {
   },
 };
 
+export const PendingResponse = {
+  args: {
+    ...defaultArgs,
+    title: 'Aline',
+    projectName: 'Sector name',
+    lastMessage: {
+      text: 'I’d like to know if powdered dishwasher detergent is available',
+    },
+    lastInteractionTime: new Date().toISOString(),
+    pendingResponse: true,
+    pendingResponseTooltip: 'You did not respond to this contact',
+  },
+};
+
+export const PendingResponsePinned = {
+  args: {
+    ...defaultArgs,
+    title: 'Milena',
+    projectName: 'Sector name',
+    lastMessage: {
+      text: 'Okay, I’ll wait for a response regarding the order status',
+    },
+    lastInteractionTime: new Date().toISOString(),
+    pendingResponse: true,
+    pendingResponseTooltip: 'You did not respond to this contact',
+    pinned: true,
+    activePin: true,
+  },
+};
+
 export const ContactList = {
   args: {
     ...defaultArgs,