@streamoid/settings 0.4.7 → 0.6.0

package/dist/index.js

@@ -1599,7 +1599,7 @@ function ScopeHeader({
 }) {
   const displayName = name?.trim() || (kind === "workspace" ? "Workspace" : "Organization");
   const ScopeIcon = kind === "workspace" ? import_icons.SiconWorkspace : import_icons.SiconGlobe;
-  const roleLabel = role === "admin" ? "You're an admin" : role ? "You're a member" : null;
+  const roleLabel = role === "admin" ? "You're an admin" : role === "member" ? "You're a member" : role === "guest" ? "You're a guest" : null;
   const detail = [roleLabel, ...facts].filter((part) => typeof part === "string" && part.length > 0).join(" \xB7 ");
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
@@ -2097,8 +2097,9 @@ function OrganizationAffiliationCard({
     let cancelled = false;
     organizationAdapter.list().then((orgs) => {
       if (cancelled) return;
-      setAvailableOrgs(orgs);
-      setSelectedOrgId((prev) => prev || orgs[0]?._id || "");
+      const joinable = orgs.filter((org) => org.role !== "guest");
+      setAvailableOrgs(joinable);
+      setSelectedOrgId((prev) => prev || joinable[0]?._id || "");
     }).catch(() => {
       if (!cancelled) setAvailableOrgs([]);
     });
@@ -2581,12 +2582,19 @@ function InviteUpdateModal({
   onSave,
   onRemove,
   canRemove = true,
+  showOrganizationStanding = false,
+  organizationName,
+  allowGuestStanding = true,
+  initialOrganizationStanding = "guest",
   onInvite
 }) {
   useOverlayOpen(open, onClose);
   const [emailValue, setEmailValue] = (0, import_react7.useState)("");
   const [hasChanges, setHasChanges] = (0, import_react7.useState)(false);
   const [role, setRole] = (0, import_react7.useState)("admin");
+  const [orgStanding, setOrgStanding] = (0, import_react7.useState)(
+    initialOrganizationStanding
+  );
   const [canUseCredits, setCanUseCredits] = (0, import_react7.useState)(false);
   const [canInviteUser, setCanInviteUser] = (0, import_react7.useState)(false);
   const [artifaxOn, setArtifaxOn] = (0, import_react7.useState)(!hiddenApps.includes("artifax"));
@@ -2623,6 +2631,7 @@ function InviteUpdateModal({
       setEmailValue("");
       setHasChanges(false);
       setRole("admin");
+      setOrgStanding(initialOrganizationStanding);
       setCanUseCredits(true);
       setCanInviteUser(true);
       setArtifaxOn(!hidden.has("artifax"));
@@ -2632,7 +2641,7 @@ function InviteUpdateModal({
       setStoreSearch("");
       setSelectedStores(/* @__PURE__ */ new Set());
     }
-  }, [open, initialPermissions, hiddenKey]);
+  }, [open, initialPermissions, hiddenKey, initialOrganizationStanding]);
   if (!open) return null;
   const isInvite = mode === "invite";
   const hasEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue.trim());
@@ -3008,6 +3017,95 @@ function InviteUpdateModal({
                       ]
                     }
                   ),
+                  showOrganizationStanding && mode === "invite" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    "div",
+                    {
+                      className: "flex flex-col items-start justify-center shrink-0 w-full",
+                      style: { gap: T6.spXs },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldLabel2, { text: "Organization access" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                          "div",
+                          {
+                            className: "shrink-0 w-full relative",
+                            style: { borderRadius: T6.rXl },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                "div",
+                                {
+                                  "aria-hidden": true,
+                                  className: "absolute inset-0 pointer-events-none",
+                                  style: {
+                                    border: `0.5px solid ${T6.borderSubtle}`,
+                                    borderRadius: T6.rXl
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                "div",
+                                {
+                                  className: "flex items-center w-full",
+                                  style: { padding: T6.spXs },
+                                  children: [
+                                    ["colleague", "Colleague"],
+                                    ...allowGuestStanding ? [["guest", "Guest"]] : []
+                                  ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                    "div",
+                                    {
+                                      className: "flex-1 min-w-0 cursor-pointer",
+                                      style: {
+                                        background: orgStanding === value ? T6.neutral300 : "transparent",
+                                        borderRadius: T6.rMd
+                                      },
+                                      onClick: () => {
+                                        setOrgStanding(value);
+                                        markChanged();
+                                      },
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-row items-center justify-center size-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                        "div",
+                                        {
+                                          className: "flex items-center justify-center w-full",
+                                          style: { padding: T6.spMd },
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                            "span",
+                                            {
+                                              style: {
+                                                fontFamily: T6.font,
+                                                fontSize: T6.fsSm,
+                                                fontWeight: orgStanding === value ? 500 : 400,
+                                                lineHeight: T6.lhSm,
+                                                color: orgStanding === value ? T6.inverse : T6.muted,
+                                                textAlign: "center"
+                                              },
+                                              children: label
+                                            }
+                                          )
+                                        }
+                                      ) })
+                                    },
+                                    value
+                                  ))
+                                }
+                              ) })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: T6.font,
+                              fontSize: T6.fsXs,
+                              fontWeight: 400,
+                              lineHeight: T6.lhXs,
+                              color: T6.tertiary
+                            },
+                            children: orgStanding === "colleague" ? `Joins ${organizationName || "the organization"} as a member \u2014 they'll also see its shared workspaces.` : `This workspace only. They see nothing else in ${organizationName || "the organization"}.`
+                          }
+                        )
+                      ]
+                    }
+                  ),
                   role !== "admin" && shownApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
@@ -3640,7 +3738,11 @@ function InviteUpdateModal({
                             catalogixStores: role === "admin" || showsApp("catalogix") ? Array.from(selectedStores) : []
                           };
                           if (isInvite && onInvite) {
-                            onInvite(perms, emailValue.trim());
+                            onInvite(
+                              perms,
+                              emailValue.trim(),
+                              showOrganizationStanding ? orgStanding : void 0
+                            );
                           } else if (onSave) {
                             onSave(perms);
                           }
@@ -4370,7 +4472,7 @@ function TeamsContent({
   organizationName,
   hiddenApps
 } = {}) {
-  const { auth, api, workspace, toast } = useSettingsAdapters();
+  const { auth, api, workspace, organization, toast } = useSettingsAdapters();
   const user = auth.user;
   const [activeTab, setActiveTab] = (0, import_react8.useState)("active");
   const [activeMembers, setActiveMembers] = (0, import_react8.useState)([]);
@@ -4672,7 +4774,7 @@ function TeamsContent({
       toast.error(msg);
     }
   };
-  const handleInvite = async (permissions, email) => {
+  const handleInvite = async (permissions, email, organizationStanding) => {
     if (highestRole === "member") {
       toast.error("You do not have permission to invite users");
       closeModal();
@@ -4686,7 +4788,12 @@ function TeamsContent({
         inviteAccess: permissions.canInviteUser,
         role: permissions.role,
         serviceIds,
-        storeIds: permissions.catalogixStores || []
+        storeIds: permissions.catalogixStores || [],
+        // Omitted when the control was never shown, which leaves the backend
+        // deriving the standing from the invitee's email domain as before.
+        ...organizationStanding ? {
+          organizationRole: organizationStanding === "colleague" ? "member" : "guest"
+        } : {}
       });
       toast.success(`Invitation sent to ${email}`);
       await fetchData();
@@ -4707,6 +4814,9 @@ function TeamsContent({
   const members = activeTab === "active" ? filteredActive : filteredPending;
   const workspaceCurrent = workspace.current;
   const orgVisibility = workspaceCurrent?.orgVisibility ?? "private";
+  const workspaceOrgId = workspaceCurrent?.organizationId;
+  const orgCurrent = organization.current;
+  const mayGrantOrgMembership = !!workspaceOrgId && orgCurrent?.id === workspaceOrgId && orgCurrent?.role !== "guest" && (orgCurrent?.role === "admin" || orgCurrent?.inviteAccess === true);
   const teamInnerContent = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ScopeHeader,
@@ -4814,6 +4924,8 @@ function TeamsContent({
           // Must be admin or have invite permission, AND cannot remove yourself
           (highestRole === "admin" || currentMemberPermissions?.canInviteUser === true) && modal.target?.userId !== user?.id
         ),
+        showOrganizationStanding: mayGrantOrgMembership,
+        organizationName: organizationName ?? orgCurrent?.name,
         onInvite: handleInvite
       }
     )
@@ -5022,6 +5134,10 @@ function OrganizationInviteModal({
   mode,
   userEmail = "email@domain.in",
   initialRole,
+  lockRole,
+  canClaimDomain = true,
+  claimableDomain,
+  lockedRoleLabel,
   initialInviteAccess,
   allowSubmitWithoutChanges = false,
   canRemove = true,
@@ -5034,7 +5150,7 @@ function OrganizationInviteModal({
   useOverlayOpen(open, onClose);
   const [inviteMode, setInviteMode] = (0, import_react9.useState)("email");
   const [emailValue, setEmailValue] = (0, import_react9.useState)("");
-  const [domainValue, setDomainValue] = (0, import_react9.useState)("");
+  const [domainValue, setDomainValue] = (0, import_react9.useState)(claimableDomain ?? "");
   const [hasChanges, setHasChanges] = (0, import_react9.useState)(false);
   const [role, setRole] = (0, import_react9.useState)("admin");
   const [inviteAccess, setInviteAccess] = (0, import_react9.useState)(false);
@@ -5046,19 +5162,22 @@ function OrganizationInviteModal({
     if (!open) {
       setInviteMode("email");
       setEmailValue("");
-      setDomainValue("");
+      setDomainValue(claimableDomain ?? "");
       setHasChanges(false);
       setRole("admin");
       setInviteAccess(true);
     }
-  }, [open, mode, initialRole, initialInviteAccess]);
+  }, [open, mode, initialRole, initialInviteAccess, claimableDomain]);
   if (!open) return null;
   const isInvite = mode === "invite";
   const isEmailInvite = isInvite && inviteMode === "email";
   const isDomainInvite = isInvite && inviteMode === "domain";
   const hasEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue.trim());
   const hasDomain = /^[^\s@]+\.[^\s@]+$/.test(domainValue.trim());
-  const isSubmitDisabled = isEmailInvite ? !hasEmail : isDomainInvite ? !hasDomain : !(allowSubmitWithoutChanges || hasChanges);
+  const isSubmitDisabled = isEmailInvite ? !hasEmail : isDomainInvite ? !hasDomain : (
+    // A locked role has nothing this modal can legitimately submit.
+    lockRole || !(allowSubmitWithoutChanges || hasChanges)
+  );
   function markChanged() {
     setHasChanges(true);
   }
@@ -5133,7 +5252,7 @@ function OrganizationInviteModal({
                 className: "flex flex-col items-start w-full",
                 style: { padding: `${T9.sp3xl} ${T9.sp6xl}`, gap: T9.sp3xl },
                 children: [
-                  isInvite && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  isInvite && canClaimDomain && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "div",
                     {
                       className: "flex flex-col items-start justify-center shrink-0 w-full",
@@ -5194,9 +5313,9 @@ function OrganizationInviteModal({
                                     }
                                   ),
                                   isDomainInvite && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                    "input",
+                                    "span",
                                     {
-                                      className: "flex-1 min-w-0 bg-transparent border-none outline-none",
+                                      className: "flex-1 min-w-0 truncate",
                                       style: {
                                         fontFamily: T9.font,
                                         fontSize: T9.fsSm,
@@ -5204,9 +5323,7 @@ function OrganizationInviteModal({
                                         lineHeight: T9.lhSm,
                                         color: T9.primary
                                       },
-                                      placeholder: "streamoid.com",
-                                      value: domainValue,
-                                      onChange: (e) => setDomainValue(e.target.value)
+                                      children: domainValue
                                     }
                                   ),
                                   !isInvite && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -5239,9 +5356,10 @@ function OrganizationInviteModal({
                               color: T9.muted
                             },
                             children: [
-                              "Anyone signing up or logging in with a verified ",
-                              domainValue.trim() || "this",
-                              " email address will automatically join this organization going forward."
+                              "Anyone who signs up or logs in with an @",
+                              domainValue.trim(),
+                              " ",
+                              "address will automatically join this organization from now on."
                             ]
                           }
                         )
@@ -5255,7 +5373,21 @@ function OrganizationInviteModal({
                       style: { gap: T9.spXs },
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldLabel3, { text: isDomainInvite ? "Auto-join role" : "Role" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        lockRole ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: T9.font,
+                              fontSize: T9.fsSm,
+                              lineHeight: T9.lhSm,
+                              color: T9.muted
+                            },
+                            children: [
+                              lockedRoleLabel || "Guest",
+                              " \u2014 invited to specific workspaces only, with no access to the rest of the organization. Remove them to end that access."
+                            ]
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           SegmentedToggle,
                           {
                             options: [
@@ -5273,7 +5405,7 @@ function OrganizationInviteModal({
                       ]
                     }
                   ),
-                  !isDomainInvite && role === "member" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  !isDomainInvite && !lockRole && role === "member" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "div",
                     {
                       className: "flex items-center shrink-0 w-full cursor-pointer",
@@ -5787,6 +5919,12 @@ function OrganizationModal({
 
 // src/organization-content.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function orgRoleLabel(role) {
+  if (role === "admin") return "Org admin";
+  if (role === "member") return "Member";
+  if (role === "guest") return "Guest";
+  return role || "Member";
+}
 var T11 = {
   primary: "var(--alias-text---icons-primary)",
   inverse: "var(--alias-text---icons-inverse)",
@@ -5930,7 +6068,7 @@ function MemberRow({
           RoleChip,
           {
             role: member.role === "admin" ? "admin" : "member",
-            label: member.role === "admin" ? "Org admin" : "Member"
+            label: orgRoleLabel(member.role)
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -6038,7 +6176,7 @@ function InviteRow({
           RoleChip,
           {
             role: role === "admin" ? "admin" : "member",
-            label: role === "admin" ? "Org admin" : "Member"
+            label: orgRoleLabel(role)
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -6185,7 +6323,8 @@ function JoinRequestRow({
 function Section({
   title,
   children,
-  empty
+  empty,
+  emptyText
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col items-start shrink-0 w-full", style: { gap: T11.spMd }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -6220,7 +6359,7 @@ function Section({
               lineHeight: T11.lhSm,
               color: T11.muted
             },
-            children: "Nothing here yet"
+            children: emptyText ?? "Nothing here yet"
           }
         ) }) : children
       }
@@ -6240,7 +6379,9 @@ function OrganizationContent({
   const [invites, setInvites] = (0, import_react11.useState)([]);
   const [workspaces, setWorkspaces] = (0, import_react11.useState)([]);
   const [joinRequests, setJoinRequests] = (0, import_react11.useState)([]);
-  const [highestRole, setHighestRole] = (0, import_react11.useState)("admin");
+  const [highestRole, setHighestRole] = (0, import_react11.useState)("guest");
+  const [emailDomain, setEmailDomain] = (0, import_react11.useState)(null);
+  const [canClaimEmailDomain, setCanClaimEmailDomain] = (0, import_react11.useState)(true);
   const [searchQuery, setSearchQuery] = (0, import_react11.useState)("");
   const [loadingData, setLoadingData] = (0, import_react11.useState)(false);
   const [modal, setModal] = (0, import_react11.useState)({ open: false, mode: "invite" });
@@ -6255,6 +6396,12 @@ function OrganizationContent({
         organization.getHighestRole?.().catch(() => null) ?? Promise.resolve(null)
       ]);
       if (highestRoleRes?.role) setHighestRole(highestRoleRes.role);
+      if (highestRoleRes?.emailDomain !== void 0) {
+        setEmailDomain(highestRoleRes.emailDomain ?? null);
+      }
+      if (highestRoleRes?.canClaimEmailDomain !== void 0) {
+        setCanClaimEmailDomain(highestRoleRes.canClaimEmailDomain);
+      }
       if (membersRes) setMembers(membersRes.filter((m) => m?.user));
       if (invitesRes) setInvites(invitesRes);
       if (workspacesRes) setWorkspaces(workspacesRes);
@@ -6345,7 +6492,7 @@ function OrganizationContent({
   const openUpdateModal = (member) => setModal({ open: true, mode: "update", target: member });
   const closeModal = () => setModal({ open: false, mode: "invite" });
   const handleInviteEmail = async (input) => {
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to invite members");
       closeModal();
       return;
@@ -6360,7 +6507,7 @@ function OrganizationContent({
     }
   };
   const handleInviteDomain = async (input) => {
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to invite members");
       closeModal();
       return;
@@ -6380,7 +6527,7 @@ function OrganizationContent({
       closeModal();
       return;
     }
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to manage members");
       closeModal();
       return;
@@ -6413,7 +6560,7 @@ function OrganizationContent({
       closeModal();
       return;
     }
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to manage members");
       closeModal();
       return;
@@ -6432,7 +6579,7 @@ function OrganizationContent({
     closeModal();
   };
   const handleCancelInvite = async (invite) => {
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to manage invites");
       return;
     }
@@ -6457,7 +6604,7 @@ function OrganizationContent({
   };
   const handleResendInvite = async (invite) => {
     if (invite.kind !== "email") return;
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to invite members");
       return;
     }
@@ -6673,14 +6820,22 @@ function OrganizationContent({
     }
   );
   const domainsView = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Section, { title: "Auto-join by email domain", empty: domainInvites.length === 0, children: domainInvites.map((inv) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      InviteRow,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Section,
       {
-        invite: inv,
-        onCancel: () => void handleCancelInvite(inv)
-      },
-      inv._id
-    )) }),
+        title: "Auto-join by email domain",
+        empty: domainInvites.length === 0,
+        emptyText: canClaimEmailDomain ? void 0 : `Auto-join needs a company email domain.${emailDomain ? ` ${emailDomain} is a public email provider, so it` : " A public email provider"} can't be claimed \u2014 invite people by email instead.`,
+        children: domainInvites.map((inv) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          InviteRow,
+          {
+            invite: inv,
+            onCancel: () => void handleCancelInvite(inv)
+          },
+          inv._id
+        ))
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Section,
       {
@@ -6710,10 +6865,14 @@ function OrganizationContent({
         open: modal.open,
         mode: modal.mode,
         userEmail: modal.target?.user.email,
-        initialRole: modal.target?.role,
+        initialRole: modal.target?.role === "admin" || modal.target?.role === "member" ? modal.target.role : void 0,
         initialInviteAccess: modal.target?.inviteAccess,
         allowSubmitWithoutChanges: false,
+        lockRole: modal.target?.role === "guest",
+        lockedRoleLabel: orgRoleLabel(modal.target?.role),
         canRemove: highestRole === "admin",
+        canClaimDomain: canClaimEmailDomain,
+        claimableDomain: emailDomain,
         onClose: closeModal,
         onInviteEmail: handleInviteEmail,
         onInviteDomain: handleInviteDomain,
@@ -6783,7 +6942,7 @@ function OrganizationContent({
               variant: "primary",
               size: "md",
               styleVariant: "icon-left",
-              state: highestRole === "member" ? "disabled" : "default",
+              state: highestRole !== "admin" ? "disabled" : "default",
               icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.SiconUserAdd, { className: "w-5 h-5", color: "var(--alias-text---icons-inverse)" }),
               onClick: openInviteModal
             }