From af3f44a7f59ecff8ba7af0461a8a27723d06f475 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Thu, 4 Dec 2025 06:34:24 +0100
Subject: [PATCH] feat: add data region dropdown to signup page (#25127)

* feat: add data region dropdown to signup page

Add a dropdown to the signup page that allows users to select their data region (United States or European Union). When a region is selected, the user is navigated to the appropriate domain (app.cal.com or app.cal.eu).

- Add SelectField component to signup page below the description text
- Detect current domain and set appropriate default value
- Navigate to correct domain when selection changes
- Add translation strings for data_region, united_states, and european_union

Co-Authored-By: peer@cal.com <peer@cal.com>

* added localhost

* fix: improve data region dropdown - SSR hydration, query params, and self-hosted protection (#25463)

* fix/remove-eu-us-dropdown-from-self-hosted-signup

* fix: remove localhost bypass and fix SSR hydration for data region dropdown

- Remove localhost bypass from IS_CALCOM check to prevent self-hosted instances from seeing Cal.com-specific dropdown
- Fix SSR hydration mismatch by using WEBAPP_URL instead of window.location for region detection
- Fix hostname replacement to preserve query parameters by modifying hostname directly instead of entire URL string

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>
---
 apps/web/modules/signup-view.tsx              | 76 ++++++++++++++++---
 apps/web/public/static/locales/en/common.json |  3 +
 2 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx
index 195a6d6592..9875f1717e 100644
--- a/apps/web/modules/signup-view.tsx
+++ b/apps/web/modules/signup-view.tsx
@@ -7,12 +7,12 @@ import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import Script from "next/script";
+import posthog from "posthog-js";
 import { useState, useEffect } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm, useFormContext } from "react-hook-form";
 import { Toaster } from "sonner";
 import { z } from "zod";
-import posthog from "posthog-js";
 
 import getStripe from "@calcom/app-store/stripepayment/lib/client";
 import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
@@ -41,7 +41,7 @@ import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import classNames from "@calcom/ui/classNames";
 import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
-import { PasswordField, CheckboxField, TextField, Form } from "@calcom/ui/components/form";
+import { PasswordField, CheckboxField, TextField, Form, SelectField } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
 
@@ -337,7 +337,6 @@ export default function Signup({
                 }}
               />
               <noscript
-
                 dangerouslySetInnerHTML={{
                   __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
                 }}
@@ -393,6 +392,56 @@ export default function Signup({
                   })}
                 </p>
               )}
+              {IS_CALCOM && (
+                <div className="mt-4">
+                  <SelectField
+                    label={t("data_region")}
+                    value={{
+                      label: t(
+                        // Use WEBAPP_URL for SSR-safe region detection
+                        WEBAPP_URL.includes("cal.eu") ||
+                          (typeof window !== "undefined" &&
+                            window.location.hostname === "localhost" &&
+                            new URL(window.location.href).searchParams.get("region") === "eu")
+                          ? "european_union"
+                          : "united_states"
+                      ),
+                      value:
+                        // Use WEBAPP_URL for SSR-safe region detection
+                        WEBAPP_URL.includes("cal.eu") ||
+                        (typeof window !== "undefined" &&
+                          window.location.hostname === "localhost" &&
+                          new URL(window.location.href).searchParams.get("region") === "eu")
+                          ? "eu"
+                          : "us",
+                    }}
+                    options={[
+                      { label: t("united_states"), value: "us" },
+                      { label: t("european_union"), value: "eu" },
+                    ]}
+                    onChange={(option) => {
+                      if (option && "value" in option) {
+                        const currentUrl = new URL(window.location.href);
+
+                        // Handle localhost - add region as URL parameter
+                        if (currentUrl.hostname === "localhost") {
+                          currentUrl.searchParams.set("region", option.value);
+                          window.location.href = currentUrl.toString();
+                          return;
+                        }
+
+                        // Handle production domains - modify hostname only to preserve query params
+                        if (option.value === "eu") {
+                          currentUrl.hostname = currentUrl.hostname.replace("cal.com", "cal.eu");
+                        } else {
+                          currentUrl.hostname = currentUrl.hostname.replace("cal.eu", "cal.com");
+                        }
+                        window.location.href = currentUrl.toString();
+                      }
+                    }}
+                  />
+                </div>
+              )}
             </div>
 
             {/* Form Container */}
@@ -426,14 +475,14 @@ export default function Signup({
                       addOnLeading={
                         orgSlug
                           ? truncateDomain(
-                            `${getOrgFullOrigin(orgSlug, { protocol: true }).replace(
-                              URL_PROTOCOL_REGEX,
-                              ""
-                            )}/`
-                          )
+                              `${getOrgFullOrigin(orgSlug, { protocol: true }).replace(
+                                URL_PROTOCOL_REGEX,
+                                ""
+                              )}/`
+                            )
                           : truncateDomain(
-                            `${process.env.NEXT_PUBLIC_WEBSITE_URL.replace(URL_PROTOCOL_REGEX, "")}/`
-                          )
+                              `${process.env.NEXT_PUBLIC_WEBSITE_URL.replace(URL_PROTOCOL_REGEX, "")}/`
+                            )
                       }
                     />
                   ) : null}
@@ -565,7 +614,10 @@ export default function Signup({
                         <>
                           {/* eslint-disable @next/next/no-img-element */}
                           <img
-                            className={classNames("text-subtle  mr-2 h-4 w-4", premiumUsername && "opacity-50")}
+                            className={classNames(
+                              "text-subtle  mr-2 h-4 w-4",
+                              premiumUsername && "opacity-50"
+                            )}
                             src="/google-icon-colored.svg"
                             alt="Continue with Google Icon"
                           />
@@ -748,7 +800,7 @@ export default function Signup({
                 </div>
               </>
             )}
-            <div className="border-default hidden rounded-bl-2xl rounded-br-none rounded-tl-2xl border border-r-0 border-dashed bg-black/3 dark:bg-white/5 lg:block lg:py-[6px] lg:pl-[6px]">
+            <div className="border-default bg-black/3 hidden rounded-bl-2xl rounded-br-none rounded-tl-2xl border border-r-0 border-dashed dark:bg-white/5 lg:block lg:py-[6px] lg:pl-[6px]">
               <img className="block dark:hidden" src="/mock-event-type-list.svg" alt="Cal.com Booking Page" />
               {/* eslint-disable @next/next/no-img-element */}
               <img
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 8e6eb108fa..c9ba919564 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1373,6 +1373,9 @@
   "user_impersonation_description": "Allows our support team to temporarily sign in as you to help us quickly resolve any issues you report to us.",
   "team_impersonation_description": "Allows your team Owners/Admins to temporarily sign in as you.",
   "cal_signup_description": "Free for individuals. Team plans for collaborative features.",
+  "data_region": "Data region",
+  "united_states": "United States",
+  "european_union": "European Union",
   "make_org_private": "Make organization private",
   "make_org_private_description": "Your organization members won't be able to see other organization members when this is turned on.",
   "make_team_private": "Make team private",