Adding React for the header notifications with mike

components/HeaderNotifications.tsx

@@ -19,7 +19,7 @@ type Notif = {
 export const HeaderNotifications = () => {
   const router = useRouter()
   const { currentVersion } = useVersion()
-  const { relativePath, allVersions, data, languages, currentLanguage } = useMainContext()
+  const { relativePath, allVersions, data, languages, currentLanguage, userLanguage, currentPathWithoutLanguage } = useMainContext()
   const { t } = useTranslation('header')
 
   const translationNotices: Array<Notif> = []
@@ -40,8 +40,15 @@ export const HeaderNotifications = () => {
         content: t('notices.localization_in_progress'),
       })
     } 
+  } else {
+    if (languages[userLanguage]?.wip === false && userLanguage !== 'en') {
+      translationNotices.push({
+        type: NotificationType.TRANSLATION,
+        content: 
+          `This article is also available in your language of choice. Click <a href="/${userLanguage}${currentPathWithoutLanguage}">here</a>`
+      })
+    }
   }
-
   const releaseNotices: Array<Notif> = []
   if (currentVersion === 'github-ae@latest') {
     releaseNotices.push({

components/context/MainContext.tsx

@@ -78,7 +78,9 @@ export type MainContextT = {
   currentCategory?: string
   relativePath?: string
   enterpriseServerReleases: EnterpriseServerReleases
+  currentPathWithoutLanguage: string
   currentLanguage: string
+  userLanguage: string
   languages: Record<string, LanguageItem>
   allVersions: Record<string, VersionItem>
   currentProductTree?: CurrentProductTree
@@ -123,6 +125,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     },
     airGap: req.context.AIRGAP || false,
     currentCategory: req.context.currentCategory || '',
+    currentPathWithoutLanguage: req.context.currentPathWithoutLanguage,
     relativePath: req.context.page?.relativePath,
     page: {
       languageVariants: req.context.page.languageVariants,
@@ -144,6 +147,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     enterpriseServerReleases: JSON.parse(JSON.stringify(req.context.enterpriseServerReleases)),
     enterpriseServerVersions: req.context.enterpriseServerVersions,
     currentLanguage: req.context.currentLanguage,
+    userLanguage: req.context.userLanguage || '',
     languages: Object.fromEntries(
       Object.entries(req.context.languages).map(([key, entry]: any) => {
         return [
@@ -153,6 +157,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
             nativeName: entry.nativeName || '',
             code: entry.code,
             hreflang: entry.hreflang,
+            wip: entry.wip || false,
           },
         ]
       })