adjust server selector

app/views/devise/shared/_select_server.html.erb

@@ -1,12 +1,50 @@
-<div class="text-center">
+<% eu_server = request.host == 'docuseal.eu' %>
-  <div class="join">
+<server-selector>
-    <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' %>">
+  <div id="global_server_selector" class="text-center hidden">
-      <%= svg_icon 'world', class: 'w-5 h-5' %>
+    <div class="join">
-      Global
+      <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 %>">
-    </a>
+        <%= svg_icon 'world', class: 'w-5 h-5' %>
-    <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' %>">
+        Global
-      <%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
+      </a>
-      Europe
+      <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 %>">
-    </a>
+        <%= 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' %>

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>

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>

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>

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