@weni/unnnic-system 3.30.0 → 3.31.0

package/package.json

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

package/src/components/InputDatePicker/InputDatePicker.vue

@@ -42,13 +42,17 @@
           @change="emitSelectDate"
           @submit="changeDate"
         />
+
+        <UnnnicPopoverFooter v-if="hasFooterSlot">
+          <slot name="footer" />
+        </UnnnicPopoverFooter>
       </UnnnicPopoverContent>
     </UnnnicPopover>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, useSlots } from 'vue';
 import moment from 'moment';
 
 import UnnnicInput from '../Input/Input.vue';
@@ -56,6 +60,7 @@ import UnnnicDatePicker from '../DatePicker/DatePicker.vue';
 import {
   Popover as UnnnicPopover,
   PopoverContent as UnnnicPopoverContent,
+  PopoverFooter as UnnnicPopoverFooter,
   PopoverTrigger as UnnnicPopoverTrigger,
 } from '../ui/popover';
 
@@ -63,6 +68,9 @@ defineOptions({
   name: 'UnnnicInputDatePicker',
 });
 
+const slots = useSlots();
+const hasFooterSlot = computed(() => Boolean(slots.footer));
+
 type DateRangeValue = {
   start: string | null;
   end: string | null;

package/src/components/InputDatePicker/__test__/InputDatePicker.spec.js

@@ -3,7 +3,13 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import InputDatePicker from '../InputDatePicker.vue';
 
-const factory = (props = {}) =>
+const inlineSlot = { template: '<div><slot /></div>' };
+const portalStubs = {
+  PopoverPortal: inlineSlot,
+  PopoverContent: inlineSlot,
+};
+
+const factory = (props = {}, { slots = {}, stubs = {} } = {}) =>
   mount(InputDatePicker, {
     props: {
       modelValue: {
@@ -12,7 +18,11 @@ const factory = (props = {}) =>
       },
       ...props,
     },
+    slots,
     attachTo: document.body,
+    global: {
+      stubs,
+    },
   });
 
 describe('InputDatePicker.vue', () => {
@@ -163,4 +173,36 @@ describe('InputDatePicker.vue', () => {
 
     rightWrapper.unmount();
   });
+
+  it('does not render PopoverFooter when the footer slot is empty', async () => {
+    wrapper.vm.isPopoverOpen = true;
+    await wrapper.vm.$nextTick();
+
+    expect(
+      wrapper.findComponent({ name: 'UnnnicPopoverFooter' }).exists(),
+    ).toBe(false);
+  });
+
+  it('renders the footer slot content inside PopoverFooter', async () => {
+    const withFooter = factory(
+      {},
+      {
+        slots: {
+          footer: '<p data-testid="custom-footer">Archive notice</p>',
+        },
+        stubs: portalStubs,
+      },
+    );
+
+    withFooter.vm.isPopoverOpen = true;
+    await withFooter.vm.$nextTick();
+
+    const footer = withFooter.findComponent({ name: 'UnnnicPopoverFooter' });
+    const customFooter = withFooter.find('[data-testid="custom-footer"]');
+
+    expect(footer.exists()).toBe(true);
+    expect(customFooter.text()).toBe('Archive notice');
+
+    withFooter.unmount();
+  });
 });

package/src/stories/InputDatePicker.stories.js

@@ -1,4 +1,5 @@
 import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
+import UnnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
 import moment from 'moment';
 export default {
   title: 'Form/InputDatePicker',
@@ -103,3 +104,52 @@ export const WithDisableShowOverwrittenValue = {
     disableShowOverwrittenValue: true,
   },
 };
+
+export const WithFooter = {
+  args: {
+    size: 'sm',
+    next: true,
+    iconPosition: 'right',
+    fillW: true,
+    maxDate: moment().format('YYYY-MM-DD'),
+    minDate: moment().subtract(89, 'days').format('YYYY-MM-DD'),
+    options: [
+      { name: 'Last 7 days', id: 'last-7-days' },
+      { name: 'Last 14 days', id: 'last-14-days' },
+      { name: 'Last 30 days', id: 'last-30-days' },
+      { name: 'Last 90 days', id: 'last-90-days' },
+      { name: 'Current month', id: 'current-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+  render: (args) => ({
+    components: {
+      UnnnicInputDatePicker,
+      UnnnicDisclaimer,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        dates: {
+          start: null,
+          end: null,
+        },
+      };
+    },
+    template: `
+      <div style="max-width: 200px">
+        <pre>v-model: {{ dates }}</pre>
+        <UnnnicInputDatePicker v-bind="args" v-model="dates">
+          <template #footer>
+            <UnnnicDisclaimer
+              type="neutral"
+              description="Conversations older than 90 days are archived and can't be shown. To access them, contact support."
+            />
+          </template>
+        </UnnnicInputDatePicker>
+      </div>
+    `,
+  }),
+};