From fc6f796f30c8fc1199788698bc08b1288d6c3705 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Thu, 15 May 2025 13:16:26 +0300
Subject: [PATCH] adjust server selector

---
 .../devise/shared/_select_server.html.erb     | 60 +++++++++++++++----
 app/views/icons/_corner_right_down.html.erb   |  3 +
 app/views/icons/_usa_flag.html.erb            |  9 +++
 app/views/scripts/_server_selector.html.erb   | 21 +++++++
 config/locales/i18n.yml                       | 14 +++++
 5 files changed, 96 insertions(+), 11 deletions(-)
 create mode 100644 app/views/icons/_corner_right_down.html.erb
 create mode 100644 app/views/icons/_usa_flag.html.erb
 create mode 100644 app/views/scripts/_server_selector.html.erb

diff --git a/app/views/devise/shared/_select_server.html.erb b/app/views/devise/shared/_select_server.html.erb
index 2b98ec18..ecb10a26 100644
--- a/app/views/devise/shared/_select_server.html.erb
+++ b/app/views/devise/shared/_select_server.html.erb
@@ -1,12 +1,50 @@
-<div class="text-center">
-  <div class="join">
-    <a href="https://docuseal.com<%= request.fullpath.gsub('docuseal.eu', 'docuseal.com') %>" class="btn bg-base-200 join-item w-32  <%= 'bg-base-300' if request.host == 'docuseal.com' %>">
-      <%= svg_icon 'world', class: 'w-5 h-5' %>
-      Global
-    </a>
-    <a href="https://docuseal.eu<%= request.fullpath.gsub('docuseal.com', 'docuseal.eu') %>" class="btn bg-base-200 join-item w-32 <%= 'bg-base-300' if request.host == 'docuseal.eu' %>">
-      <%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
-      Europe
-    </a>
+<% eu_server = request.host == 'docuseal.eu' %>
+<server-selector>
+  <div id="global_server_selector" class="text-center hidden">
+    <div class="join">
+      <a href="https://docuseal.com<%= request.fullpath.gsub('docuseal.eu', 'docuseal.com') %>" class="btn bg-base-200 join-item w-40 <%= 'bg-base-300' unless eu_server %>">
+        <%= svg_icon 'world', class: 'w-5 h-5' %>
+        Global
+      </a>
+      <a href="https://docuseal.eu<%= request.fullpath.gsub('docuseal.com', 'docuseal.eu') %>" class="relative btn bg-base-200 join-item w-40 <%= 'bg-base-300' if eu_server %>">
+        <%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
+        Europe
+        <span id="eu_server_alert" class="absolute flex space-x-1 hidden" style="top: -1.5rem;">
+          <span class="text-xs font-normal leading-none text-base-content normal-case">
+            <%= t('eu_data_residency') %>
+          </span>
+          <%= svg_icon 'corner_right_down', class: 'w-4 h-5 stroke-1 shrink-0 pt-1' %>
+        </span>
+      </a>
+    </div>
   </div>
-</div>
+  <div id="us_server_selector" class="flex justify-center hidden">
+    <div class="dropdown">
+      <label tabindex="0" class="relative btn btn-sm btn-outline normal-case border-base-content/20 w-36">
+        <% if eu_server %>
+          <%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
+          <span>EU Cloud</span>
+        <% else %>
+          <%= svg_icon 'usa_flag', class: 'w-5 h-5' %>
+          <span>US Cloud</span>
+        <% end %>
+        <%= svg_icon 'chevron_down', class: 'w-4 h-4 absolute right-1' %>
+      </label>
+      <ul tabindex="0" class="dropdown-content z-[1] menu border border-base-content/20 mt-1 bg-base-100 rounded-box w-36">
+        <li>
+          <a href="https://docuseal.com<%= request.fullpath.gsub('docuseal.eu', 'docuseal.com') %>" class="flex items-center space-x-2 <%= 'bg-base-300' unless eu_server %>">
+            <%= svg_icon 'usa_flag', class: 'w-5 h-5' %>
+            US Cloud
+          </a>
+        </li>
+        <li>
+          <a href="https://docuseal.eu<%= request.fullpath.gsub('docuseal.com', 'docuseal.eu') %>" class="flex items-center space-x-2 <%= 'bg-base-300' if eu_server %>">
+            <%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
+            EU Cloud
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</server-selector>
+<%= render 'scripts/server_selector' %>
diff --git a/app/views/icons/_corner_right_down.html.erb b/app/views/icons/_corner_right_down.html.erb
new file mode 100644
index 00000000..4aa40662
--- /dev/null
+++ b/app/views/icons/_corner_right_down.html.erb
@@ -0,0 +1,3 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
+  <path d="M6 6h6a3 3 0 0 1 3 3v10l-4 -4m8 0l-4 4"></path>
+</svg>
diff --git a/app/views/icons/_usa_flag.html.erb b/app/views/icons/_usa_flag.html.erb
new file mode 100644
index 00000000..3b45d6f6
--- /dev/null
+++ b/app/views/icons/_usa_flag.html.erb
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" viewBox="0 0 640 480">
+  <path fill="#bd3d44" d="M0 0h640v480H0" />
+  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640" />
+  <path fill="#192f5d" d="M0 0h364.8v258.5H0" />
+  <marker id="um-a" markerHeight="30" markerWidth="30">
+    <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z" />
+  </marker>
+  <path fill="none" marker-mid="url(#um-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60z" />
+</svg>
diff --git a/app/views/scripts/_server_selector.html.erb b/app/views/scripts/_server_selector.html.erb
new file mode 100644
index 00000000..be76f8f3
--- /dev/null
+++ b/app/views/scripts/_server_selector.html.erb
@@ -0,0 +1,21 @@
+<script>
+  customElements.define('server-selector', class extends HTMLElement {
+    connectedCallback() {
+      const usServerSelector = this.querySelector('#us_server_selector');
+      const globalServerSelector = this.querySelector('#global_server_selector');
+      const euServerAlert = this.querySelector('#eu_server_alert');
+      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+      const usTimezones = /^(?:America\/(?:New_York|Detroit|Kentucky\/(?:Louisville|Monticello)|Indiana\/(?:Indianapolis|Vincennes|Winamac|Marengo|Petersburg|Vevay|Tell_City|Knox)|Chicago|Menominee|North_Dakota\/(?:Center|New_Salem|Beulah)|Denver|Boise|Phoenix|Los_Angeles|Anchorage|Juneau|Sitka|Metlakatla|Yakutat|Nome|Adak)|Pacific\/Honolulu)$/;
+      const euTimezones = /^Europe\/(?:Vienna|Brussels|Sofia|Zagreb|Nicosia|Prague|Copenhagen|Tallinn|Helsinki|Paris|Berlin|Athens|Budapest|Dublin|Rome|Riga|Vilnius|Luxembourg|Valletta|Amsterdam|Warsaw|Lisbon|Bratislava|Ljubljana|Madrid|Stockholm|Bucharest)$/;
+
+      if (usTimezones.test(timezone)) {
+        usServerSelector.classList.remove('hidden');
+      } else if (euTimezones.test(timezone)) {
+        globalServerSelector.classList.remove('hidden');
+        euServerAlert.classList.remove('hidden');
+      } else {
+        globalServerSelector.classList.remove('hidden');
+      }
+    }
+  });
+</script>
diff --git a/config/locales/i18n.yml b/config/locales/i18n.yml
index 6bf79399..9ab21f97 100644
--- a/config/locales/i18n.yml
+++ b/config/locales/i18n.yml
@@ -738,6 +738,7 @@ en: &en
   one_month: 1 month
   two_months: 2 months
   three_months: 3 months
+  eu_data_residency: EU data residency
   submission_sources:
     api: API
     bulk: Bulk Send
@@ -1543,6 +1544,7 @@ es: &es
   one_month: 1 mes
   two_months: 2 meses
   three_months: 3 meses
+  eu_data_residency: Datos alojados UE
   submission_sources:
     api: API
     bulk: Envío masivo
@@ -2347,6 +2349,7 @@ it: &it
   one_month: 1 mese
   two_months: 2 mesi
   three_months: 3 mesi
+  eu_data_residency: "Dati nell'UE"
   submission_sources:
     api: API
     bulk: Invio massivo
@@ -3153,6 +3156,7 @@ fr: &fr
   one_month: 1 mois
   two_months: 2 mois
   three_months: 3 mois
+  eu_data_residency: "Données dans l'UE"
   submission_sources:
     api: API
     bulk: Envoi en masse
@@ -3958,6 +3962,7 @@ pt: &pt
   one_month: 1 mês
   two_months: 2 meses
   three_months: 3 meses
+  eu_data_residency: Dados na UE
   submission_sources:
     api: API
     bulk: Envio em massa
@@ -4764,6 +4769,7 @@ de: &de
   one_month: 1 Monat
   two_months: 2 Monate
   three_months: 3 Monate
+  eu_data_residency: EU-Datenspeicher
   submission_sources:
     api: API
     bulk: Massenversand
@@ -4915,6 +4921,7 @@ pl:
   powered_by: 'Napędzany prze'
   count_documents_signed_with_html: '<b>%{count}</b> dokumentów podpisanych za pomocą'
   open_source_documents_software: 'oprogramowanie do dokumentów open source'
+  eu_data_residency: Dane w UE
 
 uk:
   require_phone_2fa_to_open: Вимагати двофакторну автентифікацію через телефон для відкриття
@@ -4982,6 +4989,7 @@ uk:
   powered_by: 'Працює на базі'
   count_documents_signed_with_html: '<b>%{count}</b> документів підписано за допомогою'
   open_source_documents_software: 'відкрите програмне забезпечення для документів'
+  eu_data_residency: 'Зберігання даних в ЄС'
 
 cs:
   require_phone_2fa_to_open: Vyžadovat otevření pomocí telefonního 2FA
@@ -5049,6 +5057,7 @@ cs:
   powered_by: 'Poháněno'
   count_documents_signed_with_html: '<b>%{count}</b> dokumentů podepsáno pomocí'
   open_source_documents_software: 'open source software pro dokumenty'
+  eu_data_residency: 'Uložení dat v EU'
 
 he:
   require_phone_2fa_to_open: דרוש אימות דו-שלבי באמצעות טלפון לפתיחה
@@ -5116,6 +5125,7 @@ he:
   powered_by: 'מופעל על ידי'
   count_documents_signed_with_html: '<b>%{count}</b> מסמכים נחתמו באמצעות'
   open_source_documents_software: 'תוכנה בקוד פתוח למסמכים'
+  eu_data_residency: 'נתונים באיחוד האירופי	'
 
 nl:
   require_phone_2fa_to_open: Vereis telefoon 2FA om te openen
@@ -5183,6 +5193,7 @@ nl:
   powered_by: 'Aangedreven door'
   count_documents_signed_with_html: '<b>%{count}</b> documenten ondertekend met'
   open_source_documents_software: 'open source documenten software'
+  eu_data_residency: Gegevens EU
 
 ar:
   require_phone_2fa_to_open: "تطلب فتح عبر تحقق الهاتف ذو العاملين"
@@ -5250,6 +5261,7 @@ ar:
   powered_by: 'مشغل بواسطة'
   count_documents_signed_with_html: '<b>%{count}</b> مستندات تم توقيعها باستخدام'
   open_source_documents_software: 'برنامج مستندات مفتوح المصدر'
+  eu_data_residency: 'بيانات في الاتحاد الأوروبي'
 
 ko:
   require_phone_2fa_to_open: 휴대폰 2FA를 열 때 요구함
@@ -5317,6 +5329,7 @@ ko:
   powered_by: '제공:'
   count_documents_signed_with_html: '<b>%{count}</b>개의 문서가 다음을 통해 서명됨'
   open_source_documents_software: '오픈소스 문서 소프트웨어'
+  eu_data_residency: 'EU 데이터 보관'
 
 ja:
   require_phone_2fa_to_open: 電話による2段階認証が必要です
@@ -5384,6 +5397,7 @@ ja:
   powered_by: '提供元：'
   count_documents_signed_with_html: '<b>%{count}</b> 件のドキュメントが以下で署名されました'
   open_source_documents_software: 'オープンソースのドキュメントソフトウェア'
+  eu_data_residency: 'EU データ居住'
 
 en-US:
   <<: *en