From 126c8c101e61626545e5aa5b49ec3e3dd65babfe Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Thu, 2 Mar 2023 08:34:15 +0100
Subject: [PATCH] Re-add language selector (#4723)

Fixed version
---
 BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml |  4 +---
 BTCPayServer/wwwroot/checkout-v2/checkout.css  |  3 +--
 BTCPayServer/wwwroot/checkout-v2/checkout.js   | 13 +++++++++++++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
index fed57b936..5d6607cd0 100644
--- a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
+++ b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
@@ -164,9 +164,7 @@
             <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
                 {{$t("powered_by")}} <partial name="_StoreFooterLogo" />
             </a>
-			@* TODO: Re-add this once checkout v2 has been translated
-            <select asp-for="DefaultLang" asp-items="@LangService.GetLanguageSelectListItems()" class="form-select w-auto" v-on:change="changeLanguage"></select>
-			*@
+            <select asp-for="DefaultLang" asp-items="@LangService.GetLanguageSelectListItems()" class="form-select" v-on:change="changeLanguage"></select>
         </footer>
     </div>
     <noscript>
diff --git a/BTCPayServer/wwwroot/checkout-v2/checkout.css b/BTCPayServer/wwwroot/checkout-v2/checkout.css
index e18695901..ff858cdb5 100644
--- a/BTCPayServer/wwwroot/checkout-v2/checkout.css
+++ b/BTCPayServer/wwwroot/checkout-v2/checkout.css
@@ -168,13 +168,12 @@ section dl > div dd {
     color: var(--btcpay-body-text-muted);
 }
 #DefaultLang {
+    width: calc(var(--text-width, 110px) + 3rem);
     color: var(--btcpay-body-text-muted);
     background-color: transparent;
     box-shadow: none;
     border: none;
-    text-align: right;
     cursor: pointer;
-    margin-left: -4.5rem; /* Adjust for visual center */
 }
 #DefaultLang:hover {
     color: var(--btcpay-body-text-hover);
diff --git a/BTCPayServer/wwwroot/checkout-v2/checkout.js b/BTCPayServer/wwwroot/checkout-v2/checkout.js
index 4929ba236..16dfe4d93 100644
--- a/BTCPayServer/wwwroot/checkout-v2/checkout.js
+++ b/BTCPayServer/wwwroot/checkout-v2/checkout.js
@@ -51,11 +51,23 @@ function isLanguageAvailable(languageCode) {
     return availableLanguages.includes(languageCode);
 }
 
+function updateLanguageSelect() {
+    // calculate and set width, as we want it center aligned
+    const $languageSelect = document.getElementById('DefaultLang');
+    const element = document.createElement('div');
+    element.innerText = $languageSelect.querySelector('option:checked').text;
+    $languageSelect.parentElement.appendChild(element);
+    const width = element.offsetWidth;
+    $languageSelect.parentElement.removeChild(element);
+    $languageSelect.style.setProperty('--text-width', `${width}px`);
+}
+
 function updateLanguage(lang) {
     if (isLanguageAvailable(lang)) {
         i18next.changeLanguage(lang);
         urlParams.set('lang', lang);
         window.history.replaceState({}, '', `${location.pathname}?${urlParams}`);
+        updateLanguageSelect();
     }
 }
 
@@ -177,6 +189,7 @@ function initApp() {
             if (this.isActive) {
                 this.listenIn();
             }
+            updateLanguageSelect();
             window.parent.postMessage('loaded', '*');
         },
         methods: {