Lb/feature flag with new language picker (#3289)

* Update Laboratory reference to point at MBTA Laboratory fork

* Hide Language switcher if Smartling translations are enabled via Laboratory flag

WIP

Play around with locale testing

Some tweaks

WIP barebones language picker for Smartling

WIP ne Languages picker on feature flag

* New, temporary picker for .po file translations via Smartling

Linter fixes

* Quick barebones language picker for footer

Tweak for menu

* Appease the linter

---------

Co-authored-by: Lily Barrett <lbarrett1@administrators-MacBook-Pro.local>

Author: lilybarrett

config/config.exs

@@ -18,9 +18,7 @@ config :dotcom, :httpoison, HTTPoison
 
 config :dotcom,
   default_locale_code: "en",
-  locale_codes: ["en", "es"]
-
-# locale_codes: ["en", "es", "ht", "pt", "vi", "zh]
+  locale_codes: ["en", "es", "ht", "pt", "vi", "zh"]
 
 config :dotcom, :location_service, LocationService
 

lib/dotcom/locales.ex

@@ -7,6 +7,22 @@ defmodule Dotcom.Locales do
 
   @default_locale %Locale{code: "en", endonym: "English"}
   @development_locale %Locale{code: "es", endonym: "Español"}
+
+  @development_additional_locales [
+    @default_locale,
+    @development_locale,
+    %Locale{code: "ht", endonym: "Kreyòl Ayisyen (Haitian Creole)"},
+    %Locale{code: "pt-BR", endonym: "Português (Portuguese)"},
+    %Locale{code: "vi", endonym: "Tiếng Việt (Vietnamese)"},
+    %Locale{code: "zh-CN", endonym: "中文简体 (Chinese Simplified)"},
+    %Locale{code: "zh-TW", endonym: "中文繁體 (Chinese Traditional)"},
+    %Locale{code: "fr-FR", endonym: "Français (French)"}
+  ]
+
+  def development_additional_locales do
+    @development_additional_locales
+  end
+
   # @future_locales [
   #   %Locale{code: "ht", endonym: "Kreyòl Ayisyen"},
   #   %Locale{code: "pt", endonym: "Português"},

lib/dotcom_web/templates/layout/_footer.html.heex

@@ -95,12 +95,28 @@
             )}
           </nav>
         </div>
-        <div class="container">
+        <div class="container m-footer-links">
           <div class="lower-footer">
-            <%= unless assigns[:exclude_google_translate] do %>
+            <%= unless assigns[:exclude_google_translate] || Laboratory.enabled?(@conn, :use_smartling_translations) do %>
               {render("_google_translate_plugin.html", conn: @conn)}
+              <div class="m-menu__language"></div>
+            <% else %>
+              <nav class="m-footer__group" aria-labelledby="footer-languages">
+                <h2 id="footer-languages" class="m-footer__group-title">{~t(Languages)}</h2>
+
+                <ul>
+                  <%= for locale <- Dotcom.Locales.development_additional_locales() do %>
+                    <li>
+                      {link(Gettext.gettext(Dotcom.Gettext, locale.endonym),
+                        to: "?locale=#{locale.code}",
+                        class: "m-footer__link m-menu__language"
+                      )}
+                    </li>
+                  <% end %>
+                </ul>
+              </nav>
             <% end %>
-            <div class="m-menu__language"></div>
+
             <div class="social-icons-container">
               <a
                 href="https://www.facebook.com/TheMBTA/"

lib/dotcom_web/templates/layout/_new_nav_desktop.html.heex

@@ -1,5 +1,5 @@
 <nav id="navmenu-desktop" class="m-menu--desktop" aria-label="Main">
-  <%= for %{menu_section: name, link: href, sub_menus: sub_menus} <- DotcomWeb.LayoutView.nav_link_content() do %>
+  <%= for %{menu_section: name, link: href, sub_menus: sub_menus} <- DotcomWeb.LayoutView.nav_link_content(@conn) do %>
     <a
       class="m-menu--desktop__toggle"
       href={"#{ href }"}
@@ -57,5 +57,7 @@
       </div>
     </div>
   <% end %>
-  <div class="m-menu__language"></div>
+  <%= if !Laboratory.enabled?(@conn, :use_smartling_translations) do %>
+    <div class="m-menu__language"></div>
+  <% end %>
 </nav>

lib/dotcom_web/templates/layout/_new_nav_mobile.html.heex

@@ -1,7 +1,7 @@
 <nav class="m-menu--mobile" id="navmenu" aria-label={~t(Navigation Menu)}>
   <div class="m-menu__content" data-nav="mobile-content">
     <h1 class="m-menu__title h2">{~t(Main Menu)}</h1>
-    <%= for {%{menu_section: menu_section, sub_menus: sub_menus}, index} <- Enum.with_index(nav_link_content()) do %>
+    <%= for {%{menu_section: menu_section, sub_menus: sub_menus}, index} <- Enum.with_index(nav_link_content(@conn)) do %>
       <nav aria-labelledby={"section-heading-#{menu_section}"} class="m-menu__section">
         <h2 id={"section-heading-#{menu_section}"} class="m-menu__section-heading">
           {menu_section}
@@ -33,6 +33,9 @@
         <% end %>
       </nav>
     <% end %>
+    <%= if !Laboratory.enabled?(@conn, :use_smartling_translations) do %>
+      <div class="m-menu__language m-menu__section"></div>
+    <% end %>
     <div class="m-menu__language m-menu__section"></div>
   </div>
   <div class="m-menu__search" data-nav="search">

lib/dotcom_web/templates/layout/root.html.heex

@@ -89,7 +89,7 @@
       <!-- End Google Tag Manager (noscript) -->
     <% end %>
     <div class="body-wrapper" id="body-wrapper">
-      <%= if !Application.get_env(:dotcom, :is_prod_env?) do %>
+      <%= if !Application.get_env(:dotcom, :is_prod_env?) && !Laboratory.enabled?(@conn, :use_smartling_translations) do %>
         <% language =
           Dotcom.Gettext |> Gettext.get_locale() |> Dotcom.Locales.locale() |> Map.get(:endonym) %>
         <div class={["w-full py-2 text-center leading-sm", banner_color_classes()]}>
@@ -102,7 +102,6 @@
           >
             Toggle {if(language == "English", do: "Spanish", else: "English")}
           </a>
-
           <a
             :for={%{href: href, name: name, color_classes: color_classes} <- env_links(@conn)}
             class={[

lib/dotcom_web/templates/page/menu.html.heex

@@ -4,7 +4,7 @@
   <div
     :for={
       %{menu_section: menu_section, sub_menus: sub_menus} <-
-        DotcomWeb.LayoutView.nav_link_content()
+        DotcomWeb.LayoutView.nav_link_content(@conn)
     }
     class="page-section"
   >

lib/dotcom_web/views/layout_view.ex

@@ -77,8 +77,8 @@ defmodule DotcomWeb.LayoutView do
     "#{module_class} #{template_class}"
   end
 
-  def nav_link_content,
-    do: [
+  def nav_link_content(conn) do
+    content = [
       %{
         menu_section: ~t(Transit),
         link: ~p"/menu#Transit-section",
@@ -230,6 +230,35 @@ defmodule DotcomWeb.LayoutView do
       }
     ]
 
+    if Laboratory.enabled?(conn, :use_smartling_translations) do
+      language_links =
+        Enum.map(
+          Dotcom.Locales.development_additional_locales(),
+          &language_link_tuple/1
+        )
+
+      content ++
+        [
+          %{
+            menu_section: ~t(Languages),
+            link: ~p"/menu#Languages-section",
+            sub_menus: [
+              %{
+                sub_menu_section: ~t(Choose Your Language),
+                links: language_links
+              }
+            ]
+          }
+        ]
+    else
+      content
+    end
+  end
+
+  def language_link_tuple(%Dotcom.Locale{code: code, endonym: endonym}) do
+    {endonym, "?locale=#{code}", :internal_link}
+  end
+
   def render_nav_link({link_name, href = "/WorldCup", _}) do
     icon =
       content_tag(:img, "",