refactor: tag color handling in announcement components

src/components/announcement-card/index.tsx

@@ -5,30 +5,7 @@ import type { AnnouncementDataElement } from 'utils/typings/types'
 import styles from './styles'
 import Tag from 'components/tag'
 import { useIntl } from 'react-intl'
-
-type AnnouncementTagColor =
-  | 'Fixed'
-  | 'Closed'
-  | 'Scheduled'
-  | 'Deprecation'
-  | 'Backlog'
-
-const typeTagColor: Record<string, AnnouncementTagColor> = {
-  'New feature': 'Fixed',
-  Improvement: 'Closed',
-  'Breaking change': 'Scheduled',
-  Deprecation: 'Deprecation',
-  'Security update': 'Backlog',
-  'Nueva funcionalidad': 'Fixed',
-  Mejora: 'Closed',
-  'Cambio disruptivo': 'Scheduled',
-  Descontinuación: 'Deprecation',
-  'Actualización de seguridad': 'Backlog',
-  'Nova funcionalidade': 'Fixed',
-  Melhoria: 'Closed',
-  Descontinuação: 'Deprecation',
-  'Atualização de segurança': 'Backlog',
-}
+import { getTagColorByLocalizedName } from 'utils/constants'
 
 export type AnnouncementCardSize = 'small' | 'large'
 
@@ -47,18 +24,21 @@ const AnnouncementCard = ({
   const createdAtDate = new Date(createdAt)
   const formattedDate = intl.formatDate(createdAtDate)
 
-  const typeTags = (announcement.tags ?? []).filter(
-    (tag) => tag in typeTagColor
-  )
+  const typeTags = (announcement.tags ?? [])
+    .map((tag) => ({
+      name: tag,
+      color: getTagColorByLocalizedName(tag),
+    }))
+    .filter((tag) => tag.color !== undefined)
 
   return (
     <Link sx={{ ...styles.link[appearance] }} href={`${url}`}>
       <Box sx={{ ...styles.container, ...styles.containerSpacing[appearance] }}>
         {typeTags.length > 0 && (
           <Flex sx={styles.tagContainer}>
             {typeTags.map((tag) => (
-              <Tag key={tag} color={typeTagColor[tag]}>
-                {tag}
+              <Tag key={tag.name} color={tag.color!}>
+                {tag.name}
               </Tag>
             ))}
           </Flex>

src/components/announcements-dropdown/index.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { useIntl } from 'react-intl'
 import { getDaysElapsed } from 'utils/get-days-elapsed'
 import Tag from 'components/tag'
+import { getTagColorByLocalizedName } from 'utils/constants'
 import styles from './styles'
 
 export interface AnnouncementDropdownItem {
@@ -22,54 +23,6 @@ const AnnouncementsDropdown = ({
 }: AnnouncementsDropdownProps) => {
   const intl = useIntl()
 
-  const getTagColor = (tag: string) => {
-    const tagLower = tag.toLowerCase()
-
-    // New feature - Green
-    if (
-      tagLower.includes('funcionalidad') ||
-      tagLower.includes('funcionalidade') ||
-      tagLower.includes('feature')
-    ) {
-      return 'Green'
-    }
-
-    // Improvement - Blue
-    if (
-      tagLower.includes('melhoria') ||
-      tagLower.includes('improvement') ||
-      tagLower.includes('mejora')
-    ) {
-      return 'Blue'
-    }
-
-    // Breaking change - Yellow
-    if (
-      tagLower.includes('breaking') ||
-      tagLower.includes('disruptivo') ||
-      tagLower.includes('cambio disruptivo')
-    ) {
-      return 'Scheduled'
-    }
-
-    // Deprecation - Pink
-    if (tagLower.includes('descontinua') || tagLower.includes('deprecation')) {
-      return 'Deprecation'
-    }
-
-    // Security - Gray
-    if (
-      tagLower.includes('segurança') ||
-      tagLower.includes('seguridad') ||
-      tagLower.includes('security')
-    ) {
-      return 'Gray'
-    }
-
-    // Default for area tags
-    return 'Gray'
-  }
-
   return (
     <Box sx={styles.outerContainer}>
       <Box sx={styles.innerContainer}>
@@ -90,11 +43,14 @@ const AnnouncementsDropdown = ({
                 )}
                 {announcement.tags && announcement.tags.length > 0 && (
                   <Flex sx={styles.tagsContainer}>
-                    {announcement.tags.slice(0, 3).map((tag, tagIndex) => (
-                      <Tag key={tagIndex} color={getTagColor(tag)}>
-                        {tag}
-                      </Tag>
-                    ))}
+                    {announcement.tags.slice(0, 3).map((tag, tagIndex) => {
+                      const color = getTagColorByLocalizedName(tag) || 'Gray'
+                      return (
+                        <Tag key={tagIndex} color={color}>
+                          {tag}
+                        </Tag>
+                      )
+                    })}
                   </Flex>
                 )}
                 <Text sx={styles.announcementTitle}>{announcement.title}</Text>

src/utils/constants.ts

@@ -413,7 +413,21 @@ export const knownIssuesModulesFilters = (intl: IntlShape) => {
   return data
 }
 
-const typeTagsByLocale: Record<string, Record<string, string>> = {
+export type AnnouncementTagColor =
+  | 'Green'
+  | 'Blue'
+  | 'Scheduled'
+  | 'Deprecation'
+  | 'Gray'
+
+type AnnouncementTypeKey =
+  | 'new_feature'
+  | 'improvement'
+  | 'breaking_change'
+  | 'deprecation'
+  | 'security_update'
+
+const typeTagsByLocale: Record<string, Record<AnnouncementTypeKey, string>> = {
   en: {
     new_feature: 'New feature',
     improvement: 'Improvement',
@@ -437,6 +451,30 @@ const typeTagsByLocale: Record<string, Record<string, string>> = {
   },
 }
 
+export const typeTagColorMap: Record<
+  AnnouncementTypeKey,
+  AnnouncementTagColor
+> = {
+  new_feature: 'Green',
+  improvement: 'Blue',
+  breaking_change: 'Scheduled',
+  deprecation: 'Deprecation',
+  security_update: 'Gray',
+}
+
+export const getTagColorByLocalizedName = (
+  tagName: string
+): AnnouncementTagColor | undefined => {
+  for (const locale of Object.values(typeTagsByLocale)) {
+    for (const [key, value] of Object.entries(locale)) {
+      if (value === tagName) {
+        return typeTagColorMap[key as AnnouncementTypeKey]
+      }
+    }
+  }
+  return undefined
+}
+
 export const announcementsTypeFilter = (intl: IntlShape) => {
   const ids = typeTagsByLocale[intl.locale] || typeTagsByLocale.en
   const data = {