From 0f76530c11b79d935e0977b9485fb76713e1c50a Mon Sep 17 00:00:00 2001
From: alannnc <alannnc@gmail.com>
Date: Wed, 15 Feb 2023 11:40:29 -0700
Subject: [PATCH] fix/premium-username-user-state-overriden (#7099)

---
 apps/web/components/ui/UsernameAvailability/index.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/ui/UsernameAvailability/index.tsx b/apps/web/components/ui/UsernameAvailability/index.tsx
index dbc587b771..2a673e2ea2 100644
--- a/apps/web/components/ui/UsernameAvailability/index.tsx
+++ b/apps/web/components/ui/UsernameAvailability/index.tsx
@@ -1,3 +1,5 @@
+import { useRouter } from "next/router";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
@@ -22,7 +24,13 @@ export const UsernameAvailabilityField = ({
   onErrorMutation,
   user,
 }: UsernameAvailabilityFieldProps) => {
-  const { username: currentUsername, setQuery: setCurrentUsername } = useRouterQuery("username");
+  const router = useRouter();
+  const [currentUsernameState, setCurrentUsernameState] = useState(user.username || "");
+  const { username: usernameFromQuery, setQuery: setUsernameFromQuery } = useRouterQuery("username");
+  const { username: currentUsername, setQuery: setCurrentUsername } =
+    router.query["username"] && user.username === null
+      ? { username: usernameFromQuery, setQuery: setUsernameFromQuery }
+      : { username: currentUsernameState || "", setQuery: setCurrentUsernameState };
   const formMethods = useForm({
     defaultValues: {
       username: currentUsername,