feat: make MyHistory dates locale rely on uiLang

packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts

@@ -119,8 +119,8 @@ describe('testing MyHistory component', () => {
 
   it('renders the date using the locale prop when there is no snippetConfig', async () => {
     const historyQueriesGroupedByDate = {
-      'lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
-      'miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]],
+      'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
+      'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]],
     }
     const locale = 'es'
     const { findAllInWrapper } = renderMyHistory({
@@ -215,6 +215,49 @@ describe('testing MyHistory component', () => {
     )
   })
 
+  it('should use uiLang from snippetConfig for date formatting', async () => {
+    const historyQueriesGroupedByDate = {
+      'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
+      'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]],
+    }
+    const { findAllInWrapper } = renderMyHistory({
+      historyQueries,
+      snippetConfig: { ...baseSnippetConfig, lang: 'en', uiLang: 'es' },
+    })
+
+    await nextTick()
+    expectValidHistoryContent(historyQueriesGroupedByDate, findAllInWrapper, 'es')
+  })
+
+  it('should capitalize the first character of formatted dates', async () => {
+    const { findAllInWrapper } = renderMyHistory({
+      historyQueries,
+      snippetConfig: { ...baseSnippetConfig, lang: 'es', uiLang: 'es' },
+    })
+
+    await nextTick()
+    const historyWrappers = findAllInWrapper('my-history-item')
+    historyWrappers.forEach(wrapper => {
+      const dateText = wrapper.find(getDataTestSelector('my-history-date')).text()
+      // Check first character is uppercase
+      expect(dateText.charAt(0)).toBe(dateText.charAt(0).toUpperCase())
+    })
+  })
+
+  it('should fallback to lang when uiLang is not provided', async () => {
+    const historyQueriesGroupedByDate = {
+      'Lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
+      'Miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]],
+    }
+    const { findAllInWrapper } = renderMyHistory({
+      historyQueries,
+      snippetConfig: { ...baseSnippetConfig, lang: 'es' },
+    })
+
+    await nextTick()
+    expectValidHistoryContent(historyQueriesGroupedByDate, findAllInWrapper, 'es')
+  })
+
   function expectValidHistoryContent(
     historyQueriesGroupedByDate: Record<string, HistoryQuery[]>,
     findAllInWrapper: MyHistoryAPI['findAllInWrapper'],

packages/x-components/src/x-modules/history-queries/components/my-history.vue

@@ -130,7 +130,7 @@ export default defineComponent({
      * @returns The locale to be used.
      * @internal
      */
-    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)
+    const usedLocale = computed(() => snippetConfig?.uiLang ?? snippetConfig?.lang ?? props.locale)
 
     /**
      * Returns a record of history queries grouped by date.
@@ -155,12 +155,13 @@ export default defineComponent({
      */
     const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {
       return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {
-        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
+        const formatted = new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
           day: 'numeric',
           weekday: 'long',
           month: 'long',
           year: 'numeric',
         })
+        return formatted.charAt(0).toUpperCase() + formatted.slice(1)
       })
     })