upd

src/components/modals/CreateSessionModal.tsx

@@ -1,6 +1,6 @@
 import { Server } from "../../types/Server.ts";
 import { useEffect, useRef, useState } from "react";
-import { IApp } from "../../types/App.ts";
+import { App } from "../../types/App.ts";
 import api from "../../utils/api.ts";
 import { Session } from "../../types/Session.ts";
 import { Client } from "../../types/Client.ts";
@@ -11,6 +11,8 @@ import StartSessionIcon from "../icons/StartSessionIcon.tsx";
 import Button from "../Button.tsx";
 import ProjectSelector from "../ProjectSelector.tsx";
 import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { useDebounce } from "@uidotdev/usehooks";
+import { AnimatePresence, motion } from "motion/react";
 
 interface Props {
   targetServerId: string | null;
@@ -38,7 +40,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
   const [selectedServer, setSelectedServer] = useState<Server | null>(
     targetServer
   );
-  const [selectedApp, setSelectedApp] = useState<IApp | null>(null);
+  const [selectedApp, setSelectedApp] = useState<App | null>(null);
 
   useEffect(() => {
     setSelectedApp(
@@ -48,9 +50,32 @@ export default function CreateSessionModal({ targetServerId }: Props) {
     );
   }, [selectedServer]);
 
+  const debouncedPhone = useDebounce(phone, 500);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["get-user-by-phone", debouncedPhone],
+    queryFn: () =>
+      api
+        .get("clients/by-phone", {
+          searchParams: debouncedPhone ? { phone: debouncedPhone } : {},
+        })
+        .json<Client>(),
+    enabled: !!debouncedPhone,
+  });
+
+  useEffect(() => {
+    if (!error && data) {
+      setName(data.name);
+      setEmail(data.email);
+    } else {
+      setName(null);
+      setEmail(null);
+    }
+  }, [data, error]);
+
   const { mutate: createClient } = useMutation({
-    mutationFn: () => {
-      return api
+    mutationFn: () =>
+      api
         .post("clients", {
           json: {
             name,
@@ -58,8 +83,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
             email,
           },
         })
-        .json<Client>();
-    },
+        .json<Client>(),
   });
 
   const { mutate: createSession } = useMutation({
@@ -158,7 +182,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
 
   return (
     <form
-      className="relative rounded-[2.222vw] w-[25vw] min-h-[calc(100dvh-2.222vw)] bg-[#F0F0F0] flex flex-col overflow-hidden"
+      className="relative rounded-[2.222vw] w-[25vw] bg-[#F0F0F0] flex flex-col overflow-hidden"
       onSubmit={handleClickCreateSession}
       ref={ref}
     >
@@ -166,7 +190,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
         <p className="title-s font-medium">Новый сеанс</p>
       </div>
       <div className="w-full h-[6.944vw] bg-[url(/images/Table.png)] bg-no-repeat bg-top bg-[length:9.306vw]" />
-      <div className="bg-white rounded-t-[2.222vw] p-[1.389vw] flex flex-col gap-y-[1.667vw] flex-1 overflow-y-auto">
+      <div className="bg-white rounded-t-[2.222vw] p-[1.389vw] flex flex-col gap-y-[1.667vw] flex-1moverflow-y-auto">
         <TableSelector
           tables={servers || []}
           selectedTable={selectedServer}
@@ -180,19 +204,40 @@ export default function CreateSessionModal({ targetServerId }: Props) {
               onChange={(e) => setPhone(e.target.value)}
               placeholder="Номер телефона"
               required
+              isLoading={isLoading}
             />
-            <Input
-              value={name || ""}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Имя"
-              required
-            />
-            <Input
-              type="email"
-              value={email || ""}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Электронная почта"
-            />
+            <AnimatePresence>
+              {phone && (
+                <>
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                  >
+                    <Input
+                      value={name || ""}
+                      disabled={isLoading}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Имя"
+                      required
+                    />
+                  </motion.div>
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                  >
+                    <Input
+                      disabled={isLoading}
+                      type="email"
+                      value={email || ""}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="Электронная почта"
+                    />
+                  </motion.div>
+                </>
+              )}
+            </AnimatePresence>
           </div>
         </div>
         <div className="flex flex-col gap-y-[0.833vw]">
@@ -232,7 +277,8 @@ export default function CreateSessionModal({ targetServerId }: Props) {
           <Button
             type="submit"
             disabled={
-              !ref.current?.checkValidity() ||
+              !phone ||
+              !name ||
               !selectedServer ||
               !selectedApp ||
               servers?.find((server) => server.id === selectedServer?.id)
@@ -240,7 +286,6 @@ export default function CreateSessionModal({ targetServerId }: Props) {
             }
             variant="cta"
             size="large"
-            className="sticky bottom-0"
           >
             <div className="size-[1.111vw]">
               <StartSessionIcon />