From 6c78827c7f3552df8e9cb12d832fc528b25f0382 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Tue, 24 Feb 2026 10:26:57 +0100
Subject: [PATCH] feat: add language switching to admin and merchant frontends
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add cookie to ADMIN resolution chain (cookie → user_pref → "en")
- Add explicit MERCHANT resolution (cookie → user_pref → "fr")
- Add language selector dropdown to admin and merchant headers
- Add languageSelector() function to merchant init-alpine.js
- Add flag-icons CSS and i18n.js setup to merchant base template
- Add compact flag-based language selector to both login pages
- Make lang attribute dynamic on all base and login templates
- Pass current_language to login route template context
- Update architecture doc with ADMIN/MERCHANT resolution priorities

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/modules/core/routes/pages/admin.py        |  5 +-
 app/modules/core/routes/pages/merchant.py     |  5 +-
 .../core/static/merchant/js/init-alpine.js    | 46 +++++++++++++++++++
 .../templates/tenancy/admin/login.html        | 25 +++++++++-
 .../templates/tenancy/merchant/login.html     | 25 +++++++++-
 app/templates/admin/base.html                 |  2 +-
 app/templates/admin/partials/header.html      | 38 +++++++++++++++
 app/templates/merchant/base.html              | 18 +++++++-
 app/templates/merchant/partials/header.html   | 38 +++++++++++++++
 docs/architecture/language-i18n.md            | 18 +++++---
 middleware/language.py                        | 16 +++++--
 11 files changed, 219 insertions(+), 17 deletions(-)

diff --git a/app/modules/core/routes/pages/admin.py b/app/modules/core/routes/pages/admin.py
index c750fe81..dd8aff34 100644
--- a/app/modules/core/routes/pages/admin.py
+++ b/app/modules/core/routes/pages/admin.py
@@ -57,7 +57,10 @@ async def admin_login_page(
     if current_user:
         return RedirectResponse(url="/admin/dashboard", status_code=302)
 
-    return templates.TemplateResponse("tenancy/admin/login.html", {"request": request})
+    return templates.TemplateResponse("tenancy/admin/login.html", {
+        "request": request,
+        "current_language": getattr(request.state, "language", "en"),
+    })
 
 
 @router.get("/select-platform", response_class=HTMLResponse, include_in_schema=False)
diff --git a/app/modules/core/routes/pages/merchant.py b/app/modules/core/routes/pages/merchant.py
index 930f4b85..5059f752 100644
--- a/app/modules/core/routes/pages/merchant.py
+++ b/app/modules/core/routes/pages/merchant.py
@@ -67,7 +67,10 @@ async def merchant_login_page(
     if current_user:
         return RedirectResponse(url="/merchants/dashboard", status_code=302)
 
-    return templates.TemplateResponse("tenancy/merchant/login.html", {"request": request})
+    return templates.TemplateResponse("tenancy/merchant/login.html", {
+        "request": request,
+        "current_language": getattr(request.state, "language", "fr"),
+    })
 
 
 # ============================================================================
diff --git a/app/modules/core/static/merchant/js/init-alpine.js b/app/modules/core/static/merchant/js/init-alpine.js
index aa7f4c8a..41a43537 100644
--- a/app/modules/core/static/merchant/js/init-alpine.js
+++ b/app/modules/core/static/merchant/js/init-alpine.js
@@ -201,3 +201,49 @@ function data() {
         }
     };
 }
+
+/**
+ * Language Selector Component
+ * Alpine.js component for language switching in merchant portal
+ */
+function languageSelector(currentLang, enabledLanguages) {
+    return {
+        isLangOpen: false,
+        currentLang: currentLang || 'fr',
+        languages: enabledLanguages || ['en', 'fr', 'de', 'lb'],
+        languageNames: {
+            'en': 'English',
+            'fr': 'Français',
+            'de': 'Deutsch',
+            'lb': 'Lëtzebuergesch'
+        },
+        languageFlags: {
+            'en': 'gb',
+            'fr': 'fr',
+            'de': 'de',
+            'lb': 'lu'
+        },
+        async setLanguage(lang) {
+            if (lang === this.currentLang) {
+                this.isLangOpen = false;
+                return;
+            }
+            try {
+                const response = await fetch('/api/v1/platform/language/set', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ language: lang })
+                });
+                if (response.ok) {
+                    this.currentLang = lang;
+                    window.location.reload();
+                }
+            } catch (error) {
+                console.error('Failed to set language:', error);
+            }
+            this.isLangOpen = false;
+        }
+    };
+}
+
+window.languageSelector = languageSelector;
diff --git a/app/modules/tenancy/templates/tenancy/admin/login.html b/app/modules/tenancy/templates/tenancy/admin/login.html
index 64ff69a6..317ea94e 100644
--- a/app/modules/tenancy/templates/tenancy/admin/login.html
+++ b/app/modules/tenancy/templates/tenancy/admin/login.html
@@ -1,6 +1,6 @@
 {# app/templates/admin/login.html #}
 <!DOCTYPE html>
-<html :class="{ 'dark': dark }" x-data="adminLogin()" lang="en">
+<html :class="{ 'dark': dark }" x-data="adminLogin()" lang="{{ current_language|default('en') }}">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,6 +9,12 @@
     <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="{{ url_for('static', path='admin/css/tailwind.output.css') }}" />
+    <!-- Flag Icons CSS (for language selector) with local fallback -->
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css"
+        onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/flag-icons.min.css') }}';"
+    />
     <style>
         [x-cloak] { display: none !important; }
     </style>
@@ -97,6 +103,23 @@
                                 ← Back to Platform
                             </a>
                         </p>
+
+                        <!-- Language selector -->
+                        <div class="flex items-center justify-center gap-3 mt-6" x-data="{
+                            async setLang(lang) {
+                                await fetch('/api/v1/platform/language/set', {
+                                    method: 'POST',
+                                    headers: {'Content-Type': 'application/json'},
+                                    body: JSON.stringify({language: lang})
+                                });
+                                window.location.reload();
+                            }
+                        }">
+                            <button @click="setLang('en')" class="fi fi-gb text-lg opacity-60 hover:opacity-100 transition-opacity" title="English"></button>
+                            <button @click="setLang('fr')" class="fi fi-fr text-lg opacity-60 hover:opacity-100 transition-opacity" title="Français"></button>
+                            <button @click="setLang('de')" class="fi fi-de text-lg opacity-60 hover:opacity-100 transition-opacity" title="Deutsch"></button>
+                            <button @click="setLang('lb')" class="fi fi-lu text-lg opacity-60 hover:opacity-100 transition-opacity" title="Lëtzebuergesch"></button>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/app/modules/tenancy/templates/tenancy/merchant/login.html b/app/modules/tenancy/templates/tenancy/merchant/login.html
index 374ddaa0..1a9cfc91 100644
--- a/app/modules/tenancy/templates/tenancy/merchant/login.html
+++ b/app/modules/tenancy/templates/tenancy/merchant/login.html
@@ -1,7 +1,7 @@
 {# app/modules/tenancy/templates/tenancy/merchant/login.html #}
 {# Standalone login page - does NOT extend merchant/base.html #}
 <!DOCTYPE html>
-<html :class="{ 'dark': dark }" x-data="merchantLogin()" lang="en">
+<html :class="{ 'dark': dark }" x-data="merchantLogin()" lang="{{ current_language|default('fr') }}">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,6 +10,12 @@
     <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="{{ url_for('static', path='merchant/css/tailwind.output.css') }}" />
+    <!-- Flag Icons CSS (for language selector) with local fallback -->
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css"
+        onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/flag-icons.min.css') }}';"
+    />
     <style>
         [x-cloak] { display: none !important; }
     </style>
@@ -128,6 +134,23 @@
                                 </a>
                             </p>
                         </div>
+
+                        <!-- Language selector -->
+                        <div class="flex items-center justify-center gap-3 mt-6" x-data="{
+                            async setLang(lang) {
+                                await fetch('/api/v1/platform/language/set', {
+                                    method: 'POST',
+                                    headers: {'Content-Type': 'application/json'},
+                                    body: JSON.stringify({language: lang})
+                                });
+                                window.location.reload();
+                            }
+                        }">
+                            <button @click="setLang('en')" class="fi fi-gb text-lg opacity-60 hover:opacity-100 transition-opacity" title="English"></button>
+                            <button @click="setLang('fr')" class="fi fi-fr text-lg opacity-60 hover:opacity-100 transition-opacity" title="Français"></button>
+                            <button @click="setLang('de')" class="fi fi-de text-lg opacity-60 hover:opacity-100 transition-opacity" title="Deutsch"></button>
+                            <button @click="setLang('lb')" class="fi fi-lu text-lg opacity-60 hover:opacity-100 transition-opacity" title="Lëtzebuergesch"></button>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/app/templates/admin/base.html b/app/templates/admin/base.html
index 3cfefbab..e8077347 100644
--- a/app/templates/admin/base.html
+++ b/app/templates/admin/base.html
@@ -1,6 +1,6 @@
 {# app/templates/admin/base.html #}
 <!DOCTYPE html>
-<html :class="{ 'dark': dark }" x-data="{% block alpine_data %}data(){% endblock %}" lang="en">
+<html :class="{ 'dark': dark }" x-data="{% block alpine_data %}data(){% endblock %}" lang="{{ current_language|default('en') }}">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/app/templates/admin/partials/header.html b/app/templates/admin/partials/header.html
index f253d819..d9648495 100644
--- a/app/templates/admin/partials/header.html
+++ b/app/templates/admin/partials/header.html
@@ -50,6 +50,44 @@
                 </button>
             </li>
 
+            <!-- Language selector -->
+            <li class="relative" x-data="languageSelector('{{ request.state.language|default('en') }}')">
+                <button
+                    @click="isLangOpen = !isLangOpen"
+                    @click.outside="isLangOpen = false"
+                    class="p-1 rounded-md focus:outline-none focus:shadow-outline-purple"
+                    aria-label="Change language"
+                >
+                    <span class="fi text-lg" :class="'fi-' + languageFlags[currentLang]"></span>
+                </button>
+                <div
+                    x-show="isLangOpen"
+                    x-cloak
+                    x-transition:enter="transition ease-out duration-100"
+                    x-transition:enter-start="transform opacity-0 scale-95"
+                    x-transition:enter-end="transform opacity-100 scale-100"
+                    x-transition:leave="transition ease-in duration-75"
+                    x-transition:leave-start="transform opacity-100 scale-100"
+                    x-transition:leave-end="transform opacity-0 scale-95"
+                    class="absolute right-0 w-44 mt-2 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-100 dark:border-gray-600 py-1 z-50"
+                >
+                    <template x-for="lang in languages" :key="lang">
+                        <button
+                            @click="setLanguage(lang)"
+                            type="button"
+                            class="flex items-center gap-3 w-full px-4 py-2 text-sm font-medium transition-colors"
+                            :class="currentLang === lang
+                                ? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300'
+                                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600'"
+                        >
+                            <span class="fi" :class="'fi-' + languageFlags[lang]"></span>
+                            <span x-text="languageNames[lang]"></span>
+                            <span x-show="currentLang === lang" x-html="$icon('check', 'w-4 h-4 ml-auto')" class="text-purple-600 dark:text-purple-400"></span>
+                        </button>
+                    </template>
+                </div>
+            </li>
+
             <!-- Messages link with badge -->
             <li class="relative" x-data="headerMessages()">
                 <a href="/admin/messages"
diff --git a/app/templates/merchant/base.html b/app/templates/merchant/base.html
index 2895377b..17555e5c 100644
--- a/app/templates/merchant/base.html
+++ b/app/templates/merchant/base.html
@@ -1,6 +1,6 @@
 {# app/templates/merchant/base.html #}
 <!DOCTYPE html>
-<html :class="{ 'dark': dark }" x-data="{% block alpine_data %}data(){% endblock %}" lang="en">
+<html :class="{ 'dark': dark }" x-data="{% block alpine_data %}data(){% endblock %}" lang="{{ current_language|default('fr') }}">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -13,6 +13,13 @@
     <!-- Tailwind CSS v4 (built locally via standalone CLI) -->
     <link rel="stylesheet" href="{{ url_for('static', path='merchant/css/tailwind.output.css') }}" />
 
+    <!-- Flag Icons CSS (for language selector) with local fallback -->
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css"
+        onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/flag-icons.min.css') }}';"
+    />
+
     <!-- Alpine Cloak -->
     <style>
         [x-cloak] { display: none !important; }
@@ -52,6 +59,15 @@
     <!-- 4. FOURTH: Utils (standalone utilities) -->
     <script defer src="{{ url_for('static', path='shared/js/utils.js') }}"></script>
 
+    <!-- 4b. i18n Support -->
+    <script defer src="{{ url_for('static', path='shared/js/i18n.js') }}"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', async function() {
+            const modules = {% block i18n_modules %}[]{% endblock %};
+            await I18n.init('{{ current_language | default("fr") }}', modules);
+        });
+    </script>
+
     <!-- 5. FIFTH: API Client (depends on Utils) -->
     <script defer src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>
 
diff --git a/app/templates/merchant/partials/header.html b/app/templates/merchant/partials/header.html
index 310ca039..8a8bab38 100644
--- a/app/templates/merchant/partials/header.html
+++ b/app/templates/merchant/partials/header.html
@@ -26,6 +26,44 @@
                 </button>
             </li>
 
+            <!-- Language selector -->
+            <li class="relative" x-data="languageSelector('{{ request.state.language|default('fr') }}')">
+                <button
+                    @click="isLangOpen = !isLangOpen"
+                    @click.outside="isLangOpen = false"
+                    class="p-1 rounded-md focus:outline-none focus:shadow-outline-purple"
+                    aria-label="Change language"
+                >
+                    <span class="fi text-lg" :class="'fi-' + languageFlags[currentLang]"></span>
+                </button>
+                <div
+                    x-show="isLangOpen"
+                    x-cloak
+                    x-transition:enter="transition ease-out duration-100"
+                    x-transition:enter-start="transform opacity-0 scale-95"
+                    x-transition:enter-end="transform opacity-100 scale-100"
+                    x-transition:leave="transition ease-in duration-75"
+                    x-transition:leave-start="transform opacity-100 scale-100"
+                    x-transition:leave-end="transform opacity-0 scale-95"
+                    class="absolute right-0 w-44 mt-2 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-100 dark:border-gray-600 py-1 z-50"
+                >
+                    <template x-for="lang in languages" :key="lang">
+                        <button
+                            @click="setLanguage(lang)"
+                            type="button"
+                            class="flex items-center gap-3 w-full px-4 py-2 text-sm font-medium transition-colors"
+                            :class="currentLang === lang
+                                ? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300'
+                                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600'"
+                        >
+                            <span class="fi" :class="'fi-' + languageFlags[lang]"></span>
+                            <span x-text="languageNames[lang]"></span>
+                            <span x-show="currentLang === lang" x-html="$icon('check', 'w-4 h-4 ml-auto')" class="text-purple-600 dark:text-purple-400"></span>
+                        </button>
+                    </template>
+                </div>
+            </li>
+
             <!-- Profile menu -->
             <li class="relative" x-data="{ profileOpen: false }">
                 <button class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
diff --git a/docs/architecture/language-i18n.md b/docs/architecture/language-i18n.md
index 0be76203..b7f1b893 100644
--- a/docs/architecture/language-i18n.md
+++ b/docs/architecture/language-i18n.md
@@ -50,7 +50,8 @@ Language resolution varies by frontend type. Each chain is evaluated top-to-bott
 
 | Frontend | Priority (highest → lowest) |
 |----------|----------------------------|
-| **ADMIN** | User `preferred_language` → `"en"` |
+| **ADMIN** | Cookie (`lang`) → User `preferred_language` → `"en"` |
+| **MERCHANT** | Cookie (`lang`) → User `preferred_language` → `"fr"` |
 | **STORE** | Cookie (`lang`) → User `preferred_language` → Store `dashboard_language` → `"fr"` |
 | **STOREFRONT** | Customer `preferred_language` → Cookie (`lang`) → Store `storefront_language` → Browser `Accept-Language` → `"fr"` |
 | **PLATFORM** | Cookie (`lang`) → Browser `Accept-Language` → `"fr"` |
@@ -61,9 +62,10 @@ The **cookie** (`lang`) is set by the language switcher UI via `POST /api/v1/pla
 
 | Context | Language Source | Database Field |
 |---------|-----------------|----------------|
+| Admin Panel | User's `preferred_language` | `users.preferred_language` |
+| Merchant Portal | User's `preferred_language` | `users.preferred_language` |
 | Store Dashboard | Store's `dashboard_language` | `stores.dashboard_language` |
 | Customer Storefront | Store's `storefront_language` | `stores.storefront_language` |
-| Admin Panel | User's `preferred_language` | `users.preferred_language` |
 
 ---
 
@@ -490,12 +492,16 @@ static/locales/
 
 | File | Type | Notes |
 |------|------|-------|
-| `static/shop/js/shop-layout.js` | JS | `languageSelector()` function |
-| `static/store/js/init-alpine.js` | JS | `languageSelector()` function |
+| `static/shop/js/shop-layout.js` | JS | `languageSelector()` for storefront |
+| `app/modules/core/static/store/js/init-alpine.js` | JS | `languageSelector()` for store dashboard |
+| `app/modules/core/static/admin/js/init-alpine.js` | JS | `languageSelector()` for admin |
+| `app/modules/core/static/merchant/js/init-alpine.js` | JS | `languageSelector()` for merchant |
+| `app/templates/store/partials/header.html` | Template | Store dashboard language selector |
+| `app/templates/admin/partials/header.html` | Template | Admin language selector |
+| `app/templates/merchant/partials/header.html` | Template | Merchant language selector |
 | `app/templates/shop/base.html` | Template | Storefront language selector |
-| `app/templates/store/partials/header.html` | Template | Dashboard language selector |
 | `app/modules/core/routes/api/platform.py` | API | Language endpoints (`/api/v1/platform/language/*`) |
-| `middleware/language.py` | Middleware | Language detection |
+| `middleware/language.py` | Middleware | Language detection per frontend type |
 | `static/locales/*.json` | JSON | Translation files |
 
 ---
diff --git a/middleware/language.py b/middleware/language.py
index ce574e5b..3f285754 100644
--- a/middleware/language.py
+++ b/middleware/language.py
@@ -38,10 +38,11 @@ class LanguageMiddleware(BaseHTTPMiddleware):
     Middleware to detect and set the request language.
 
     Sets request.state.language based on context:
-    - Admin: Always English (for now)
-    - Store dashboard: User preference → Store dashboard_language → default
+    - Admin: Cookie → User preference → English
+    - Merchant: Cookie → User preference → Platform default
+    - Store dashboard: Cookie → User preference → Store dashboard_language → default
     - Storefront: Customer preference → Cookie → Store storefront_language → browser → default
-    - API: Accept-Language header → default
+    - Platform: Cookie → Browser → Platform default
     """
 
     async def dispatch(self, request: Request, call_next) -> Response:
@@ -61,9 +62,9 @@ class LanguageMiddleware(BaseHTTPMiddleware):
 
         # Resolve language based on frontend type
         if frontend_type == FrontendType.ADMIN:
-            # Admin dashboard: respect user's preferred language
+            # Admin dashboard: cookie → user preference → English default
             user_preferred = self._get_user_language_from_token(request)
-            language = user_preferred or "en"
+            language = cookie_language or user_preferred or "en"
 
         elif frontend_type == FrontendType.STORE:
             # Store dashboard
@@ -90,6 +91,11 @@ class LanguageMiddleware(BaseHTTPMiddleware):
                 enabled_languages=enabled_languages,
             )
 
+        elif frontend_type == FrontendType.MERCHANT:
+            # Merchant portal: cookie → user preference → platform default
+            user_preferred = self._get_user_language_from_token(request)
+            language = cookie_language or user_preferred or DEFAULT_LANGUAGE
+
         elif frontend_type == FrontendType.PLATFORM:
             # Platform marketing pages: Use cookie, browser, or default
             language = cookie_language or browser_language or DEFAULT_LANGUAGE