fix: Fix i18n issues with help center (#6559)

app/controllers/public/api/v1/portals/articles_controller.rb

@@ -1,4 +1,4 @@
-class Public::Api::V1::Portals::ArticlesController < PublicController
+class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
   before_action :set_category, except: [:index]
@@ -34,7 +34,7 @@ class Public::Api::V1::Portals::ArticlesController < PublicController
   end
 
   def list_params
-    params.permit(:query)
+    params.permit(:query, :locale)
   end
 
   def permitted_params

app/controllers/public/api/v1/portals/base_controller.rb

@@ -0,0 +1,22 @@
+class Public::Api::V1::Portals::BaseController < PublicController
+  around_action :set_locale
+
+  private
+
+  def set_locale(&)
+    switch_locale_with_portal(&) if params[:locale].present?
+  end
+
+  def switch_locale_with_portal(&)
+    locale_without_variant = params[:locale].split('_')[0]
+    is_locale_available = I18n.available_locales.map(&:to_s).include?(params[:locale])
+    is_locale_variant_available = I18n.available_locales.map(&:to_s).include?(locale_without_variant)
+    if is_locale_available
+      @locale = params[:locale]
+    elsif is_locale_variant_available
+      @locale = locale_without_variant
+    end
+
+    I18n.with_locale(@locale, &)
+  end
+end

app/controllers/public/api/v1/portals/categories_controller.rb

@@ -1,4 +1,4 @@
-class Public::Api::V1::Portals::CategoriesController < PublicController
+class Public::Api::V1::Portals::CategoriesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
   before_action :set_category, only: [:show]

app/controllers/public/api/v1/portals_controller.rb

@@ -1,4 +1,4 @@
-class Public::Api::V1::PortalsController < PublicController
+class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show]
   before_action :portal
   before_action :redirect_to_portal_with_locale, only: [:show]

app/views/public/api/v1/portals/_article_count.html.erb

@@ -0,0 +1,6 @@
+<% if article_count == 0 %>
+<% elsif article_count == 1 %>
+  <%= article_count %> <%= I18n.t('public_portal.common.article') %>
+<% else %>
+  <%= article_count %> <%= I18n.t('public_portal.common.articles') %>
+<% end %>

app/views/public/api/v1/portals/_category-block.html.erb

@@ -6,14 +6,13 @@
       </a>
     </h3>
     <span class="text-slate-500">
-      <%= category.articles.published.size %>
-      <%= category.articles.published.size === 1 ? 'article': 'articles' %>
+      <%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.size %>
     </span>
   </div>
   <div class="py-4 w-full mt-2 flex-grow">
     <% if category.articles.published.size == 0 %>
     <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl mb-4">
-      <p class="text-sm text-slate-500">No articles here</p>
+      <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
     </div>
     <% else %>
       <% category.articles.published.take(5).each do |article| %>
@@ -47,7 +46,7 @@
       class="flex flex-row items-center text-base font-medium text-woot-500 hover:underline mt-4"
       style="color: <%= portal.color %>"
     >
-      View all articles
+      <%= I18n.t('public_portal.common.view_all_articles') %>
       <span class="ml-2">
         <svg
           class="w-4 h-4 fill-current text-woot-500"

app/views/public/api/v1/portals/_footer.html.erb

@@ -2,7 +2,7 @@
 <footer class="pt-16 pb-8 flex flex-col items-center justify-center">
   <div class="mx-auto max-w-2xl">
     <p class="text-slate-700 py-2 text-center">
-      Made with <a class="hover:underline" href="https://www.chatwoot.com" target="_blank" rel="noopener noreferrer nofoll/ow">Chatwoot</a> 💙
+      <%= I18n.t('public_portal.footer.made_with') %> <a class="hover:underline" href="https://www.chatwoot.com" target="_blank" rel="noopener noreferrer nofoll/ow">Chatwoot</a> 💙
     </p>
   </div>
 </footer>

app/views/public/api/v1/portals/_header.html.erb

@@ -8,7 +8,7 @@
       <% if @portal.homepage_link %>
       <div class="ml-8 border-l-1 border-slate-50 hidden md:block">
         <div class="flex-grow flex-shrink-0">
-          <a target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center text-sm font-medium text-slate-700 hover:text-slate-800 hover:underline"> Go to main site
+          <a target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center text-sm font-medium text-slate-700 hover:text-slate-800 hover:underline"> <%= I18n.t('public_portal.header.go_to_homepage') %>
             <span class="ml-2">
               <svg class="w-4 h-4 fill-current text-slate-600" width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" /></svg>
             </span>

app/views/public/api/v1/portals/articles/index.html.erb

@@ -6,7 +6,7 @@
 				class="text-slate-800 hover:underline leading-8"
         href="/hc/<%= @portal.slug %>/<%= @category.present? ? @category.slug : '' %>"
 			>
-				<%= @portal.name %> Home
+				<%= @portal.name %> <%= I18n.t('public_portal.common.home') %>
 			</a>
 		<span>/</span>
 		<span>/</span>

app/views/public/api/v1/portals/articles/show.html.erb

@@ -18,7 +18,7 @@
         class="text-slate-700 hover:underline leading-8 text-sm font-medium"
         href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>"
       >
-        Home
+        <%= I18n.t('public_portal.common.home') %>
       </a>
       <span class="text-xs text-slate-600 px-1">/</span>
       <a
@@ -39,7 +39,7 @@
         <div class="pl-1">
           <h5 class="text-base font-medium text-slate-900 mb-2"><%= @article.author.available_name %></h5>
           <p class="text-sm font-normal text-slate-700">
-            Last updated on <%= @article.updated_at.strftime("%b %d, %Y") %></p>
+          <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: @article.updated_at.strftime("%b %d, %Y")) %>
         </div>
       </div>
     </div>

app/views/public/api/v1/portals/categories/_category-block.html.erb

@@ -2,41 +2,65 @@
 <section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
   <div class="flex justify-between items-center w-full">
     <h3 class="text-xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed hover:underline"">
-     <a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"><%= category.name %> </a>
-      </h3> <span class="text-slate-500"><%= category.articles.published.size %> articles</span>
+     <a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>">
+      <%= category.name %>
+    </a>
+    </h3>
+    <span class="text-slate-500">
+      <%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.size %>
+    </span>
   </div>
   <div class="py-4 w-full mt-2 flex-grow">
     <% if category.articles.published.size == 0 %>
-    <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl mb-4">
-      <p class="text-sm text-slate-500">No articles here</p>
-    </div>
+      <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl mb-4">
+        <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
+      </div>
     <% else %>
-    <% category.articles.published.take(5).each do |article| %>
-    <div class="flex justify-between content-center h-8 my-1">
-      <a class="text-slate-800 hover:underline leading-8"
-        href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>/<%= article.id %>" class=""><%= article.title %></a>
-      <span class="flex items-center">
-        <svg class="w-4 h-4 fill-current text-slate-700" width="24" height="24" fill="none" viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z" />
-        </svg>
-      </span>
-    </div>
-    <% end %>
+      <% category.articles.published.take(5).each do |article| %>
+        <div class="flex justify-between content-center h-8 my-1">
+          <a
+            class="text-slate-800 hover:underline leading-8"
+            href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>/<%= article.id %>"
+          >
+            <%= article.title %>
+          </a>
+          <span class="flex items-center">
+            <svg
+              class="w-4 h-4 fill-current text-slate-700"
+              width="24"
+              height="24"
+              fill="none"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
+              />
+            </svg>
+          </span>
+        </div>
+      <% end %>
     <% end %>
 
   </div>
   <div>
-    <a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
-      class="flex flex-row items-center text-base font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4">
-
-      View all articles
+    <a
+      href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
+      class="flex flex-row items-center text-base font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4"
+    >
+      <%= I18n.t('public_portal.common.view_all_articles') %>
       <span class="ml-2">
-        <svg class="w-4 h-4 fill-current text-woot-500" width="24" height="24" fill="none" viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg">
+        <svg
+          class="w-4 h-4 fill-current text-woot-500"
+          width="24"
+          height="24"
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
-            d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" />
+            d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z"
+          />
         </svg>
       </span>
     </a>

app/views/public/api/v1/portals/categories/_hero.html.erb

@@ -2,6 +2,6 @@
 <section class="bg-slate-50 py-16 flex flex-col items-center justify-center">
   <div class="mx-auto max-w-2xl">
     <h1 class="text-4xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed text-center"><%= portal.header_text %></h1>
-    <p class="text-slate-700 py-2 text-center">Search for the articles here or browse the categories below.</p>
+    <p class="text-slate-700 py-2 text-center"><%= I18n.t('public_portal.hero.sub_title') %></p>
   </div>
 </section>

app/views/public/api/v1/portals/categories/show.html.erb

@@ -11,14 +11,16 @@
       class="text-slate-700 text-sm hover:underline leading-8"
       href="/hc/<%= @portal.slug %>/<%= @category.locale %>"
     >
-      Home
+      <%= I18n.t('public_portal.common.home') %>
     </a>
     <span class="text-xs text-slate-600 px-1">/</span>
     <div class="flex justify-start items-center w-full">
       <h1 class="text-3xl font-bold leading-snug md:tracking-normal text-slate-900">
         <%= @category.name %>
       </h1>
-      <div class="text-slate-500 px-8 mt-2"><%= @category.articles.published.size %> articles</div>
+      <div class="text-slate-500 px-8 mt-2">
+        <%= render 'public/api/v1/portals/article_count', article_count: @category.articles.published.size %>
+      </div>
     </div>
   </div>
 </div>
@@ -27,7 +29,7 @@
   <div class="py-4 w-full mt-2 flex-grow">
     <% if @category.articles.published.size == 0 %>
     <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl py-6">
-      <p class="text-sm text-slate-500">No articles here</p>
+      <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
     </div>
     <% else %>
     <% @category.articles.published.each do |article| %>
@@ -37,7 +39,9 @@
       >
         <div>
           <p class="font-medium mb-2 hover:underline"><%= article.title %></p>
-          <p class="text-sm">Last updated on <%= article.updated_at.strftime("%b %d, %Y") %></p>
+          <p class="text-sm">
+            <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
+          </p>
         </div>
 
         <span>

config/locales/en.yml

@@ -186,3 +186,14 @@ en:
       results_title: Search results
     hero:
       sub_title: Search for the articles here or browse the categories below.
+    common:
+      home: Home
+      last_updated_on: Last updated on %{last_updated_on}
+      view_all_articles: View all articles
+      article: article
+      articles: articles
+      no_articles: There are no articles here
+    footer:
+      made_with: Made with
+    header:
+      go_to_homepage: Go to the main site

config/locales/fr.yml

@@ -163,3 +163,14 @@ fr:
       results_title: Résultats de recherche
     hero:
       sub_title: Recherchez les articles ici ou parcourez les catégories ci-dessous.
+    common:
+      home: Page d'accueil
+      last_updated_on: Dernière mise à jour le %{last_updated_on}
+      view_all_articles: Voir tous les articles
+      article: article
+      articles: articles
+      no_articles: Il n'y a pas d'articles ici
+    footer:
+      made_with: Réalisé avec
+    header:
+      go_to_homepage: Aller à la page d'accueil