From eae36a68d395605d8234be7098956df9fd0a6439 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 18 Feb 2022 10:13:59 +0300
Subject: [PATCH 1/6] Add MigrationNotice and TranslationBanner to the blank
 layout

Add MigrationNotice and TranslationBanner to the blank layout
---
 ...igrationNotice.vue => VMigrationNotice.vue} |  2 +-
 src/layouts/blank.vue                          | 18 ++++++++++++++++--
 src/layouts/default.vue                        |  6 +++---
 3 files changed, 20 insertions(+), 6 deletions(-)
 rename src/components/{MigrationNotice.vue => VMigrationNotice.vue} (95%)

diff --git a/src/components/MigrationNotice.vue b/src/components/VMigrationNotice.vue
similarity index 95%
rename from src/components/MigrationNotice.vue
rename to src/components/VMigrationNotice.vue
index ee8948d8ca..17bcfe4630 100644
--- a/src/components/MigrationNotice.vue
+++ b/src/components/VMigrationNotice.vue
@@ -18,7 +18,7 @@
 import NoticeBar from '~/components/NoticeBar/NoticeBar.vue'
 
 export default {
-  name: 'MigrationNotice',
+  name: 'VMigrationNotice',
   components: { NoticeBar },
 }
 </script>
diff --git a/src/layouts/blank.vue b/src/layouts/blank.vue
index c1852bff56..53726162f8 100644
--- a/src/layouts/blank.vue
+++ b/src/layouts/blank.vue
@@ -1,14 +1,28 @@
 <template>
-  <Nuxt />
+  <div>
+    <VMigrationNotice v-show="isReferredFromCc" />
+    <VTranslationStatusBanner />
+    <Nuxt />
+  </div>
 </template>
 
 <script>
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent, useStore } from '@nuxtjs/composition-api'
 import iframeHeight from '~/mixins/iframe-height'
+import { NAV } from '~/constants/store-modules'
+
+import VTranslationStatusBanner from '~/components/VTranslationStatusBanner.vue'
+import VMigrationNotice from '~/components/VMigrationNotice.vue'
 
 export default defineComponent({
   name: 'Blank',
+  components: { VMigrationNotice, VTranslationStatusBanner },
   mixins: [iframeHeight],
+  setup() {
+    const store = useStore()
+    const isReferredFromCc = store.state[NAV].isReferredFromCc
+    return { isReferredFromCc }
+  },
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true, addDirAttribute: true })
   },
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 634a9cf4b0..ff1bc5f75c 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,7 +2,7 @@
   <div class="app grid h-screen overflow-hidden relative">
     <div>
       <VTeleportTarget name="skip-to-content" :force-destroy="true" />
-      <MigrationNotice v-show="isReferredFromCc" />
+      <VMigrationNotice v-show="isReferredFromCc" />
       <VTranslationStatusBanner />
       <VHeader />
     </div>
@@ -33,7 +33,7 @@ import { isMinScreen } from '~/composables/use-media-query'
 import { useMatchSearchRoutes } from '~/composables/use-match-routes'
 import { useScroll } from '~/composables/use-scroll'
 
-import MigrationNotice from '~/components/MigrationNotice.vue'
+import VMigrationNotice from '~/components/VMigrationNotice.vue'
 import VTranslationStatusBanner from '~/components/VTranslationStatusBanner.vue'
 import VHeader from '~/components/VHeader/VHeader.vue'
 import VModalTarget from '~/components/VModal/VModalTarget.vue'
@@ -44,7 +44,7 @@ import VTeleportTarget from '~/components/VTeleport/VTeleportTarget.vue'
 const embeddedPage = {
   name: 'embedded',
   components: {
-    MigrationNotice,
+    VMigrationNotice,
     VTranslationStatusBanner,
     VHeader,
     VModalTarget,

From c32604df33070b4956f831ca5e2a054c55aa757e Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 18 Feb 2022 10:17:50 +0300
Subject: [PATCH 2/6] Rewrite translation banner logic to use path-based i18n

---
 src/composables/use-i18n-sync.js | 108 ++++---------------------------
 1 file changed, 13 insertions(+), 95 deletions(-)

diff --git a/src/composables/use-i18n-sync.js b/src/composables/use-i18n-sync.js
index 6984f7d69a..6a62e007d5 100644
--- a/src/composables/use-i18n-sync.js
+++ b/src/composables/use-i18n-sync.js
@@ -1,62 +1,34 @@
-import { sendWindowMessage } from '~/utils/send-message.js'
-import untranslatedLocales from '../locales/scripts/untranslated-locales.json'
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  useContext,
-} from '@nuxtjs/composition-api'
+import { computed, reactive, useContext } from '@nuxtjs/composition-api'
 import { StorageSerializers, useStorage } from '~/composables/use-storage'
 
 const BASE_URL = 'https://translate.wordpress.org/projects/meta/openverse/'
 
 export default function useI18nSync() {
-  const { i18n } = useContext()
+  const { app } = useContext()
 
   const currentLocale = computed(() => {
-    return i18n.locales.find((item) => item.code === i18n.locale)
+    return app.i18n.locales.find((item) => item.code === app.i18n.locale)
   })
-  const showBanner = ref(false)
+
   const bannerLocale = reactive({
-    code: i18n.locale,
+    code: app.i18n.locale,
     name: currentLocale.value.name,
   })
 
-  /**
-   * Updates the i18n locale code and sets the html lang and dir attributes.
-   *
-   * @param {Object} [locale]
-   * @param {string} locale.code - the locale code as used in i18n.
-   * @param {string} locale.lang - value of the HTML lang property.
-   * @param {'rtl'|'ltr'} locale.dir - text direction.
-   * @returns {Promise<void>}
-   */
-  const updateLocale = async (
-    locale = {
-      code: 'en',
-      lang: 'en-US',
-      dir: 'ltr',
-    }
-  ) => {
-    await i18n.setLocale(locale.code)
-    document.documentElement.lang = locale.lang
-    // Always set `dir` property, default to 'ltr'
-    document.documentElement.dir = locale.dir
-  }
   /**
    * Show banner inviting to contribute translations if fewer than 90%
    * of strings are translated for current locale.
    * Hard-coded to false for default locales: `en` and `en_US`.
    *
-   * @param {import('../locales/scripts/types').i18nLocaleProps} locale - current locale object
+   * @param {string} localeCode - the wpLocale code for the current locale
    * @returns {boolean}
    */
-  const needsTranslationBanner = (locale) => {
-    if (['en', 'en_US'].includes(locale)) return false
+  const needsTranslationBanner = (localeCode) => {
+    if (['en', 'en_US'].includes(localeCode)) return false
+
+    let locale = app.i18n.locales.find((item) => item.code === localeCode)
 
-    return locale.translated <= 90
+    return !(locale?.translated && locale.translated > 90)
   }
 
   const bannerDismissedForLocales = useStorage(
@@ -68,8 +40,8 @@ export default function useI18nSync() {
   )
   const shouldHideBanner = computed(() => {
     return (
-      !showBanner.value ||
-      bannerDismissedForLocales.value.includes(bannerLocale.code)
+      bannerDismissedForLocales.value.includes(bannerLocale.code) ||
+      !needsTranslationBanner(bannerLocale.code)
     )
   })
   const dismissBanner = () => {
@@ -81,61 +53,7 @@ export default function useI18nSync() {
   const translationLink = computed(
     () => `${BASE_URL}${bannerLocale.code}/default/`
   )
-  /**
-   * Handles messages of type `localeSet` received by the `iframe`. Any
-   * other message types will be discarded.
-   *
-   * It sets the i18n locale property, defaulting to `en` if 0 translations are available for the locale,
-   * and shows the translation banner if necessary,
-   *
-   * @param {string} type - the nature of the message received.
-   * @param {Object} value - the data sent with the message.
-   * @param {string} value.locale - wpLocale code of the locale, e.g. 'en_US'.
-   * @param {string} value.lang - the iso code for language
-   * (and sometimes country), e.g. 'en-US'.
-   * Default lang value on wp.org is 'en', and on wp.org/openverse - 'en-US'.
-   * @param {'rtl'|'ltr'} [value.dir] - the locale text direction.
-   */
-  const localeMsgHandler = async ({ data: { type, value } }) => {
-    if (type !== 'localeSet') return
-    // If the locale set by wp.org is 'en_US', not 'en', this is not necessary.
-    const wpLocaleValue = value.locale === 'en' ? 'en_US' : value.locale
-    let locale = i18n.locales.find((item) => item.wpLocale === wpLocaleValue)
-    let htmlLocaleProps
-    /**
-     * i18n.locales list only contains the locales that have at least one
-     * translated string.
-     */
-    if (locale) {
-      htmlLocaleProps = {
-        code: locale.code,
-        lang: locale.wpLocale.replace('_', '-'),
-        dir: locale.dir === 'rtl' ? 'rtl' : 'ltr',
-      }
-    } else {
-      locale = Object.values(untranslatedLocales).find(
-        (item) => item.wpLocale === value.locale
-      )
-    }
-    await updateLocale(htmlLocaleProps)
-
-    if (needsTranslationBanner(locale)) {
-      showBanner.value = true
-      bannerLocale.code = locale.code || null
-      bannerLocale.name = locale.name || 'this'
-    }
-  }
 
-  onMounted(() => {
-    window.addEventListener('message', localeMsgHandler)
-    sendWindowMessage({
-      type: 'localeGet',
-      value: {},
-    })
-  })
-  onUnmounted(() => {
-    window.removeEventListener('message', localeMsgHandler)
-  })
   return {
     shouldHideBanner,
     dismissBanner,

From 263d2aeb81ec4ec45b6ede45e25f898d78e47fdd Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 18 Feb 2022 10:32:37 +0300
Subject: [PATCH 3/6] Add e2e tests for translation banner

---
 test/e2e/translation-banner.spec.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 test/e2e/translation-banner.spec.js

diff --git a/test/e2e/translation-banner.spec.js b/test/e2e/translation-banner.spec.js
new file mode 100644
index 0000000000..fb0ae8611c
--- /dev/null
+++ b/test/e2e/translation-banner.spec.js
@@ -0,0 +1,28 @@
+const { test, expect } = require('@playwright/test')
+
+test('Can see the translation banner and go to the correct link', async ({
+  page,
+}) => {
+  await page.goto('/ru/search/')
+  await page.click(
+    'text=The translation for Russian locale is incomplete. Help us get to 100 percent by '
+  )
+
+  const [page1] = await Promise.all([
+    page.waitForEvent('popup'),
+    page.click('text=contributing a translation'),
+  ])
+  await expect(page1).toHaveURL(
+    'https://translate.wordpress.org/projects/meta/openverse/ru/default/'
+  )
+})
+
+test('Can close the translation banner', async ({ page }) => {
+  await page.goto('/ru/search/')
+  await page.click('[aria-label="Закрыть"]')
+
+  const banner = page.locator(
+    'text=The translation for Russian locale is incomplete. Help us get to 100 percent by '
+  )
+  await expect(banner).not.toBeVisible({ timeout: 10 })
+})

From 03af0faa0e0bf972090a896853355c86bbd60bae Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 21 Feb 2022 05:32:05 +0300
Subject: [PATCH 4/6] Update src/composables/use-i18n-sync.js

---
 src/composables/use-i18n-sync.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/use-i18n-sync.js b/src/composables/use-i18n-sync.js
index 6a62e007d5..8714315ce8 100644
--- a/src/composables/use-i18n-sync.js
+++ b/src/composables/use-i18n-sync.js
@@ -20,7 +20,7 @@ export default function useI18nSync() {
    * of strings are translated for current locale.
    * Hard-coded to false for default locales: `en` and `en_US`.
    *
-   * @param {string} localeCode - the wpLocale code for the current locale
+   * @param {string} localeCode - the slug for the current locale
    * @returns {boolean}
    */
   const needsTranslationBanner = (localeCode) => {

From 2901128e4b0301cf0fd17bba0d68b3a74d6c5adf Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 21 Feb 2022 05:42:40 +0300
Subject: [PATCH 5/6] Fix docstrings

---
 src/composables/use-i18n-sync.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/composables/use-i18n-sync.js b/src/composables/use-i18n-sync.js
index 8714315ce8..1ec84eb928 100644
--- a/src/composables/use-i18n-sync.js
+++ b/src/composables/use-i18n-sync.js
@@ -20,11 +20,11 @@ export default function useI18nSync() {
    * of strings are translated for current locale.
    * Hard-coded to false for default locales: `en` and `en_US`.
    *
-   * @param {string} localeCode - the slug for the current locale
+   * @param {string} localeCode - the slug for the current locale. This is the same as the locale `code`.
    * @returns {boolean}
    */
   const needsTranslationBanner = (localeCode) => {
-    if (['en', 'en_US'].includes(localeCode)) return false
+    if (['en'].includes(localeCode)) return false
 
     let locale = app.i18n.locales.find((item) => item.code === localeCode)
 

From 43b113ec56b138fe97c78a283055f8e8911d045a Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 21 Feb 2022 06:06:54 +0300
Subject: [PATCH 6/6] Improve e2e test

---
 test/e2e/translation-banner.spec.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/test/e2e/translation-banner.spec.js b/test/e2e/translation-banner.spec.js
index fb0ae8611c..f318a5bdfa 100644
--- a/test/e2e/translation-banner.spec.js
+++ b/test/e2e/translation-banner.spec.js
@@ -21,8 +21,15 @@ test('Can close the translation banner', async ({ page }) => {
   await page.goto('/ru/search/')
   await page.click('[aria-label="Закрыть"]')
 
-  const banner = page.locator(
-    'text=The translation for Russian locale is incomplete. Help us get to 100 percent by '
+  const banner = await page.locator(
+    '.span:has-text("Help us get to 100 percent")'
   )
-  await expect(banner).not.toBeVisible({ timeout: 10 })
+  await expect(banner).not.toBeVisible({ timeout: 100 })
+  // Test that the banner does not re-appear when navigating to the 'About us' page
+  await page.click('[aria-label="меню"]')
+  await page.click('a[role="menuitemcheckbox"]:has-text("Наша история")')
+  await expect(banner).not.toBeVisible({ timeout: 100 })
+
+  await page.goto('/ru/search/')
+  await expect(banner).not.toBeVisible({ timeout: 100 })
 })