From 99ce08a68110f42eec9d4558069b14e5a0bce196 Mon Sep 17 00:00:00 2001
From: Shreyag02 <shreyagupta72484@gmail.com>
Date: Fri, 3 Jul 2026 15:43:27 +0530
Subject: [PATCH 1/2] fix(admin): add skeleton loader to invite-user Org select

---
 .../details/layout/invite-users-dialog.tsx    |  51 ++---
 .../views/users/list/invite-users.module.css  |   8 -
 .../admin/views/users/list/invite-users.tsx   | 189 +++++++++---------
 3 files changed, 122 insertions(+), 126 deletions(-)

diff --git a/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx b/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
index 0f8b9b2b8..6f8c0930d 100644
--- a/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
+++ b/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
@@ -1,10 +1,9 @@
 import {
   Button,
   Dialog,
+  Field,
   Flex,
-  Label,
   Select,
-  Text,
   TextArea,
   toastManager
 } from '@raystack/apsara';
@@ -109,6 +108,26 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
 
   const isSubmitting = methods?.formState?.isSubmitting;
   const errors = methods?.formState?.errors;
+
+  const values = methods.watch(['emails', 'role']);
+
+  const isDisabled = useMemo(() => {
+    const [emails, role] = values;
+    const emailValue = Array.isArray(emails)
+      ? emails.join(',')
+      : ((emails as string) ?? '');
+    const emailList = emailValue
+      .split(',')
+      .map(e => e.trim())
+      .filter(str => str.length > 0);
+    return (
+      emailList.length <= 0 ||
+      !role ||
+      isSubmitting ||
+      Boolean(errors?.emails)
+    );
+  }, [isSubmitting, values, errors?.emails]);
+
   return (
     <Dialog open onOpenChange={onOpenChange}>
       <Dialog.Content width={600}>
@@ -119,10 +138,9 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
             </Dialog.Header>
             <Dialog.Body className={styles['invite-users-dialog-body']}>
               <Flex direction="column" gap={7}>
-                <Flex direction="column" gap={2}>
-                  <Label className={styles['invite-users-dialog-label']}>
-                    Emails
-                  </Label>
+                <Field
+                  label="Emails"
+                  error={errors?.emails?.message || errors?.emails?.[0]?.message}>
                   <Controller
                     name="emails"
                     control={methods.control}
@@ -138,17 +156,9 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
                       );
                     }}
                   />
-                  {errors?.emails?.message || errors?.emails?.length ? (
-                    <Text size="mini" className={styles['form-error-message']}>
-                      {errors?.emails?.message || errors?.emails?.[0]?.message}
-                    </Text>
-                  ) : null}
-                </Flex>
+                </Field>
 
-                <Flex direction="column" gap={2}>
-                  <Label className={styles['invite-users-dialog-label']}>
-                    Role
-                  </Label>
+                <Field label="Role" error={errors?.role?.message}>
                   <Controller
                     name="role"
                     control={methods.control}
@@ -177,19 +187,14 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
                       );
                     }}
                   />
-
-                  {errors?.role?.message && (
-                    <Text size="mini" className={styles['form-error-message']}>
-                      {errors?.role?.message}
-                    </Text>
-                  )}
-                </Flex>
+                </Field>
               </Flex>
             </Dialog.Body>
             <Dialog.Footer>
               <Button
                 data-test-id="invite-users-invite-button"
                 type="submit"
+                disabled={isDisabled}
                 loading={isSubmitting}
                 loaderText="Inviting..."
               >
diff --git a/web/sdk/admin/views/users/list/invite-users.module.css b/web/sdk/admin/views/users/list/invite-users.module.css
index c80cc9bec..17f8528a4 100644
--- a/web/sdk/admin/views/users/list/invite-users.module.css
+++ b/web/sdk/admin/views/users/list/invite-users.module.css
@@ -5,14 +5,6 @@
   gap: var(--rs-space-7);
 }
 
-.invite-users-dialog-label {
-  font-weight: var(--rs-font-weight-medium);
-}
-
-.form-error-message {
-  color: var(--rs-color-foreground-danger-primary);
-}
-
 .invite-users-emails-textarea {
   resize: vertical;
   width: 100%;
diff --git a/web/sdk/admin/views/users/list/invite-users.tsx b/web/sdk/admin/views/users/list/invite-users.tsx
index a7e3defc3..217fa3007 100644
--- a/web/sdk/admin/views/users/list/invite-users.tsx
+++ b/web/sdk/admin/views/users/list/invite-users.tsx
@@ -2,11 +2,11 @@ import { useMemo, useState, useEffect } from "react";
 import {
   Button,
   Dialog,
+  Field,
   Flex,
-  Label,
   Select,
-  Text,
   TextArea,
+  Skeleton,
   toastManager,
 } from "@raystack/apsara";
 import { PlusIcon } from "@radix-ui/react-icons";
@@ -15,7 +15,6 @@ import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SCOPES, DEFAULT_ROLES } from "../../../utils/constants";
 import styles from "./invite-users.module.css";
-import Skeleton from "react-loading-skeleton";
 import { useMutation, useQuery } from "@connectrpc/connect-query";
 import {
   AdminServiceQueries,
@@ -67,6 +66,8 @@ export const InviteUser = () => {
     }
   );
 
+  const isLoading = isRolesLoading || isOrganizationsLoading;
+
   useEffect(() => {
     if (organizationsError) {
       console.error("Failed to fetch organizations:", organizationsError);
@@ -89,6 +90,7 @@ export const InviteUser = () => {
     handleSubmit,
     control,
     reset,
+    watch,
   } = useForm<InviteSchemaType>({
     resolver: zodResolver(inviteSchema),
     defaultValues: {
@@ -96,6 +98,26 @@ export const InviteUser = () => {
     },
   });
 
+  const values = watch(["emails", "role", "organizationId"]);
+
+  const isDisabled = useMemo(() => {
+    const [emails, role, organizationId] = values;
+    const emailValue = Array.isArray(emails)
+      ? emails.join(",")
+      : ((emails as string) ?? "");
+    const emailList = emailValue
+      .split(",")
+      .map(e => e.trim())
+      .filter(str => str.length > 0);
+    return (
+      emailList.length <= 0 ||
+      !role ||
+      !organizationId ||
+      isSubmitting ||
+      Boolean(errors?.emails)
+    );
+  }, [isSubmitting, values, errors?.emails]);
+
   const { mutateAsync: inviteUser } = useMutation(
     FrontierServiceQueries.createOrganizationInvitation,
     {
@@ -149,46 +171,41 @@ export const InviteUser = () => {
           </Dialog.Header>
           <Dialog.Body className={styles["invite-users-dialog-body"]}>
             <Flex direction="column" gap={7}>
-              <Flex direction="column" gap={2}>
-                <Label className={styles["invite-users-dialog-label"]}>
-                  Emails
-                </Label>
-                <Controller
-                  name="emails"
-                  control={control}
-                  render={({ field }) => {
-                    const { value, ...rest } = field;
-                    return (
-                      <TextArea
-                        {...rest}
-                        value={Array.isArray(value) ? value.join(", ") : (value ?? "") as string}
-                        placeholder="abc@example.com, xyz@example.com"
-                        className={styles["invite-users-emails-textarea"]}
-                      />
-                    );
-                  }}
-                />
-                {(errors?.emails?.message || errors?.emails?.length) && (
-                  <Text size="mini" className={styles["form-error-message"]}>
-                    {errors?.emails?.message || errors?.emails?.[0]?.message}
-                  </Text>
-                )}
-              </Flex>
+              {isLoading ? (
+                <Skeleton height="80px" />
+              ) : (
+                <Field
+                  label="Emails"
+                  error={errors?.emails?.message || errors?.emails?.[0]?.message}>
+                  <Controller
+                    name="emails"
+                    control={control}
+                    render={({ field }) => {
+                      const { value, ...rest } = field;
+                      return (
+                        <TextArea
+                          {...rest}
+                          value={Array.isArray(value) ? value.join(", ") : (value ?? "") as string}
+                          placeholder="abc@example.com, xyz@example.com"
+                          className={styles["invite-users-emails-textarea"]}
+                        />
+                      );
+                    }}
+                  />
+                </Field>
+              )}
 
-              <Flex direction="column" gap={2}>
-                <Label className={styles["invite-users-dialog-label"]}>
-                  Invite as
-                </Label>
-                <Controller
-                  name="role"
-                  defaultValue={defaultRoleId}
-                  disabled={isRolesLoading}
-                  control={control}
-                  render={({ field, fieldState: { error } }) => {
-                    const { ref, ...rest } = field;
-                    if (isRolesLoading) return <Skeleton height={33} />;
-                    return (
-                      <>
+              <Field label="Invite as" error={errors?.role?.message}>
+                {isLoading ? (
+                  <Skeleton height="36px" />
+                ) : (
+                  <Controller
+                    name="role"
+                    defaultValue={defaultRoleId}
+                    control={control}
+                    render={({ field }) => {
+                      const { ref, ...rest } = field;
+                      return (
                         <Select
                           {...rest}
                           onValueChange={value => field.onChange(value)}>
@@ -203,72 +220,54 @@ export const InviteUser = () => {
                             ))}
                           </Select.Content>
                         </Select>
-                        {error && (
-                          <Text
-                            size="mini"
-                            className={styles["form-error-message"]}>
-                            {error?.message}
-                          </Text>
-                        )}
-                      </>
-                    );
-                  }}
-                />
-              </Flex>
+                      );
+                    }}
+                  />
+                )}
+              </Field>
 
-              <Flex direction="column" gap={2}>
-                <Label className={styles["invite-users-dialog-label"]}>
-                  {t.organization({ case: "capital" })}
-                </Label>
-                <Controller
+              <Field
+                label={t.organization({ case: "capital" })}
+                error={errors?.organizationId?.message}>
+                {isLoading ? (<Skeleton height="36px" />) : (<Controller
                   name="organizationId"
-                  disabled={isOrganizationsLoading}
                   control={control}
-                  render={({ field, fieldState: { error } }) => {
+                  render={({ field }) => {
                     const { ref, ...rest } = field;
-                    if (isOrganizationsLoading) return <Skeleton height={33} />;
                     return (
-                      <>
-                        <Select
-                          {...rest}
-                          autocomplete
-                          onValueChange={value => field.onChange(value)}>
-                          <Select.Trigger ref={ref}>
-                            <Select.Value
-                              placeholder={`Select ${t.organization({ case: "capital" })}`}
-                            />
-                          </Select.Trigger>
-                          <Select.Content
-                            searchPlaceholder={`Search ${t.organization({ case: "lower" })}`}
-                            style={{
-                              maxHeight: 280,
-                              overflowY: "auto",
-                            }}>
-                            {organizations?.map(org => (
-                              <Select.Item key={org.id} value={org.id ?? ""}>
-                                {org.title || org.name}
-                              </Select.Item>
-                            ))}
-                          </Select.Content>
-                        </Select>
-                        {error && (
-                          <Text
-                            size="mini"
-                            className={styles["form-error-message"]}>
-                            {error?.message}
-                          </Text>
-                        )}
-                      </>
+                      <Select
+                        {...rest}
+                        autocomplete
+                        onValueChange={value => field.onChange(value)}>
+                        <Select.Trigger ref={ref}>
+                          <Select.Value
+                            placeholder={`Select ${t.organization({ case: "capital" })}`}
+                          />
+                        </Select.Trigger>
+                        <Select.Content
+                          searchPlaceholder={`Search ${t.organization({ case: "lower" })}`}
+                          style={{
+                            maxHeight: 280,
+                            overflowY: "auto",
+                          }}>
+                          {organizations?.map(org => (
+                            <Select.Item key={org.id} value={org.id ?? ""}>
+                              {org.title || org.name}
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select>
                     );
                   }}
-                />
-              </Flex>
+                />)}
+              </Field>
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
             <Button
               data-test-id="users-list-invite-user-submit-btn"
               type="submit"
+              disabled={isLoading || isDisabled}
               loading={isSubmitting}
               loaderText="Sending...">
               Send invite

From 21235e459882940eb3d791fe2b763cb2e5ac119a Mon Sep 17 00:00:00 2001
From: Shreyag02 <shreyagupta72484@gmail.com>
Date: Mon, 6 Jul 2026 18:43:45 +0530
Subject: [PATCH 2/2]  fix(invite): replace disabled submit with visible field
 validation

---
 .../details/layout/invite-users-dialog.tsx    | 36 +++++-------
 .../admin/views/users/list/invite-users.tsx   | 57 ++++++++-----------
 .../components/invite-member-dialog.tsx       | 54 ++++++++----------
 3 files changed, 61 insertions(+), 86 deletions(-)

diff --git a/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx b/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
index 6f8c0930d..cbccbcfea 100644
--- a/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
+++ b/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
@@ -29,11 +29,21 @@ import { useTerminology } from '../../../../hooks/useTerminology';
 import { handleConnectError } from '~/utils/error';
 
 const inviteSchema = z.object({
-  role: z.string(),
+  role: z.string().min(1, { message: 'Role is required' }),
   emails: z
     .string()
-    .transform(value => value.split(',').map(str => str.trim()))
-    .pipe(z.array(z.string().email()))
+    .min(1, { message: 'Email is required' })
+    .transform(value =>
+      value
+        .split(',')
+        .map(str => str.trim())
+        .filter(str => str.length > 0)
+    )
+    .pipe(
+      z
+        .array(z.string().email({ message: 'Enter valid email address(es)' }))
+        .min(1, { message: 'Email is required' })
+    )
 });
 
 type InviteSchemaType = z.infer<typeof inviteSchema>;
@@ -109,25 +119,6 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
   const isSubmitting = methods?.formState?.isSubmitting;
   const errors = methods?.formState?.errors;
 
-  const values = methods.watch(['emails', 'role']);
-
-  const isDisabled = useMemo(() => {
-    const [emails, role] = values;
-    const emailValue = Array.isArray(emails)
-      ? emails.join(',')
-      : ((emails as string) ?? '');
-    const emailList = emailValue
-      .split(',')
-      .map(e => e.trim())
-      .filter(str => str.length > 0);
-    return (
-      emailList.length <= 0 ||
-      !role ||
-      isSubmitting ||
-      Boolean(errors?.emails)
-    );
-  }, [isSubmitting, values, errors?.emails]);
-
   return (
     <Dialog open onOpenChange={onOpenChange}>
       <Dialog.Content width={600}>
@@ -194,7 +185,6 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
               <Button
                 data-test-id="invite-users-invite-button"
                 type="submit"
-                disabled={isDisabled}
                 loading={isSubmitting}
                 loaderText="Inviting..."
               >
diff --git a/web/sdk/admin/views/users/list/invite-users.tsx b/web/sdk/admin/views/users/list/invite-users.tsx
index 217fa3007..c1e7dc17a 100644
--- a/web/sdk/admin/views/users/list/invite-users.tsx
+++ b/web/sdk/admin/views/users/list/invite-users.tsx
@@ -28,12 +28,22 @@ import { handleConnectError } from "~/utils/error";
 import { useTerminology } from "../../../hooks/useTerminology";
 
 const inviteSchema = z.object({
-  role: z.string(),
-  organizationId: z.string(),
+  role: z.string().min(1, { message: "Role is required" }),
+  organizationId: z.string().min(1, { message: "Organization is required" }),
   emails: z
     .string()
-    .transform(value => value.split(",").map(str => str.trim()))
-    .pipe(z.array(z.string().email())),
+    .min(1, { message: "Email is required" })
+    .transform(value =>
+      value
+        .split(",")
+        .map(str => str.trim())
+        .filter(str => str.length > 0)
+    )
+    .pipe(
+      z
+        .array(z.string().email({ message: "Enter valid email address(es)" }))
+        .min(1, { message: "Email is required" })
+    ),
 });
 
 type InviteSchemaType = z.infer<typeof inviteSchema>;
@@ -90,7 +100,6 @@ export const InviteUser = () => {
     handleSubmit,
     control,
     reset,
-    watch,
   } = useForm<InviteSchemaType>({
     resolver: zodResolver(inviteSchema),
     defaultValues: {
@@ -98,26 +107,6 @@ export const InviteUser = () => {
     },
   });
 
-  const values = watch(["emails", "role", "organizationId"]);
-
-  const isDisabled = useMemo(() => {
-    const [emails, role, organizationId] = values;
-    const emailValue = Array.isArray(emails)
-      ? emails.join(",")
-      : ((emails as string) ?? "");
-    const emailList = emailValue
-      .split(",")
-      .map(e => e.trim())
-      .filter(str => str.length > 0);
-    return (
-      emailList.length <= 0 ||
-      !role ||
-      !organizationId ||
-      isSubmitting ||
-      Boolean(errors?.emails)
-    );
-  }, [isSubmitting, values, errors?.emails]);
-
   const { mutateAsync: inviteUser } = useMutation(
     FrontierServiceQueries.createOrganizationInvitation,
     {
@@ -171,12 +160,12 @@ export const InviteUser = () => {
           </Dialog.Header>
           <Dialog.Body className={styles["invite-users-dialog-body"]}>
             <Flex direction="column" gap={7}>
-              {isLoading ? (
-                <Skeleton height="80px" />
-              ) : (
-                <Field
-                  label="Emails"
-                  error={errors?.emails?.message || errors?.emails?.[0]?.message}>
+              <Field
+                label="Emails"
+                error={errors?.emails?.message || errors?.emails?.[0]?.message}>
+                {isLoading ? (
+                  <Skeleton height="80px" />
+                ) : (
                   <Controller
                     name="emails"
                     control={control}
@@ -192,8 +181,8 @@ export const InviteUser = () => {
                       );
                     }}
                   />
-                </Field>
-              )}
+                )}
+              </Field>
 
               <Field label="Invite as" error={errors?.role?.message}>
                 {isLoading ? (
@@ -267,7 +256,7 @@ export const InviteUser = () => {
             <Button
               data-test-id="users-list-invite-user-submit-btn"
               type="submit"
-              disabled={isLoading || isDisabled}
+              disabled={isLoading}
               loading={isSubmitting}
               loaderText="Sending...">
               Send invite
diff --git a/web/sdk/client/views/members/components/invite-member-dialog.tsx b/web/sdk/client/views/members/components/invite-member-dialog.tsx
index c704b7017..f027d93b9 100644
--- a/web/sdk/client/views/members/components/invite-member-dialog.tsx
+++ b/web/sdk/client/views/members/components/invite-member-dialog.tsx
@@ -17,7 +17,6 @@ import {
   Button,
   Skeleton,
   Text,
-  Label,
   Select,
   Flex,
   Dialog,
@@ -30,9 +29,21 @@ import { PERMISSIONS } from '../../../../utils';
 import { handleConnectError } from '~/utils/error';
 
 const inviteSchema = yup.object({
-  type: yup.string().required(),
+  type: yup.string().required('Role is required'),
   team: yup.string(),
-  emails: yup.string().required()
+  emails: yup
+    .string()
+    .required('Email is required')
+    .test('emails', 'Enter valid email address(es)', value => {
+      const emailList = (value ?? '')
+        .split(',')
+        .map(e => e.trim())
+        .filter(str => str.length > 0);
+      return (
+        emailList.length > 0 &&
+        emailList.every(email => yup.string().email().isValidSync(email))
+      );
+    })
 });
 
 type InviteSchemaType = yup.InferType<typeof inviteSchema>;
@@ -45,7 +56,6 @@ export interface InviteMemberDialogProps {
 
 export function InviteMemberDialog({ handle, showTeamField = true, refetch }: InviteMemberDialogProps) {
   const {
-    watch,
     register,
     control,
     handleSubmit,
@@ -115,8 +125,6 @@ export function InviteMemberDialog({ handle, showTeamField = true, refetch }: In
     }
   );
 
-  const values = watch(['emails', 'type']);
-
   const onSubmit = useCallback(
     async ({ emails, type, team }: InviteSchemaType) => {
       const emailList = emails
@@ -148,16 +156,6 @@ export function InviteMemberDialog({ handle, showTeamField = true, refetch }: In
     [createInvitation, organization?.id, showTeamField]
   );
 
-  const isDisabled = useMemo(() => {
-    const [emails, type] = values;
-    const emailList =
-      emails
-        ?.split(',')
-        .map((e: string) => e.trim())
-        .filter((str: string) => str.length > 0) || [];
-    return emailList.length <= 0 || !type || isSubmitting;
-  }, [isSubmitting, values]);
-
   return (
     <Dialog handle={handle} onOpenChange={handleOpenChange}>
       <Dialog.Content width={600}>
@@ -167,18 +165,17 @@ export function InviteMemberDialog({ handle, showTeamField = true, refetch }: In
         <form onSubmit={handleSubmit(onSubmit)}>
           <Dialog.Body>
             <Flex direction="column" gap={7}>
-              {isLoading ? (
-                <Skeleton height="80px" />
-              ) : (
-                <Field label="Email">
+              <Field label="Email" error={errors?.emails?.message}>
+                {isLoading ? (
+                  <Skeleton height="80px" />
+                ) : (
                   <TextArea
                     {...register('emails')}
                     placeholder="abc@example.com, xyz@example.com"
                   />
-                </Field>
-              )}
-              <Flex direction="column" gap={2}>
-                <Label>Invite as</Label>
+                )}
+              </Field>
+              <Field label="Invite as" error={errors?.type?.message}>
                 {isLoading ? (
                   <Skeleton height="36px" />
                 ) : (
@@ -215,10 +212,9 @@ export function InviteMemberDialog({ handle, showTeamField = true, refetch }: In
                     name="type"
                   />
                 )}
-              </Flex>
+              </Field>
               {showTeamField && (
-                <Flex direction="column" gap={2}>
-                  <Label>Add to team (optional)</Label>
+                <Field label="Add to team (optional)">
                   {isLoading ? (
                     <Skeleton height="36px" />
                   ) : (
@@ -252,7 +248,7 @@ export function InviteMemberDialog({ handle, showTeamField = true, refetch }: In
                       name="team"
                     />
                   )}
-                </Flex>
+                </Field>
               )}
             </Flex>
           </Dialog.Body>
@@ -262,7 +258,7 @@ export function InviteMemberDialog({ handle, showTeamField = true, refetch }: In
                 type="submit"
                 variant="solid"
                 color="accent"
-                disabled={isDisabled}
+                disabled={isLoading}
                 data-test-id="frontier-sdk-send-member-invite-btn"
                 loading={isSubmitting}
                 loaderText="Sending..."