@base316/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -150,6 +150,10 @@ var STYLESHEET = `
   align-items: stretch;
 }
 
+/* Messages above the cards span the row rather than taking a card's column. */
+.b316-plans-error,
+.b316-plans-managed { grid-column: 1 / -1; }
+
 .b316-plan {
   display: flex;
   flex-direction: column;
@@ -612,6 +616,7 @@ function Base316Provider({
   token: controlledToken,
   onTokenChange,
   appearance: appearance2,
+  tenant,
   className,
   children
 }) {
@@ -640,16 +645,20 @@ function Base316Provider({
     }
     setInternalToken(readStoredToken());
   }, [controlled]);
+  const tenantKey = tenant ? "organizationId" in tenant ? `id:${tenant.organizationId}` : `ext:${tenant.organizationExternalId}` : null;
   useEffect(() => {
     let cancelled = false;
-    client.billing.branding().then((result) => {
+    const request = tenantKey ? client.billing.tenantBranding(
+      tenantKey.startsWith("id:") ? { organizationId: tenantKey.slice(3) } : { organizationExternalId: tenantKey.slice(4) }
+    ) : client.billing.branding();
+    request.then((result) => {
       if (!cancelled) setBranding(result);
     }).catch(() => {
     });
     return () => {
       cancelled = true;
     };
-  }, [client]);
+  }, [client, tenantKey]);
   const setToken = useCallback(
     (next) => {
       if (controlled) {
@@ -941,13 +950,18 @@ function InvoiceView({ invoice, onClose }) {
 }
 
 // src/SignIn.tsx
-import { isPasskeyAutofillAvailable, isPasskeySupported, needsSecondFactor } from "@base316/sdk";
+import {
+  isPasskeyAutofillAvailable,
+  isPasskeySupported,
+  needsSecondFactor
+} from "@base316/sdk";
 import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function SignIn({
   onSignedIn,
   passkeys = true,
   magicLinkRedirectUrl,
+  phone = false,
   className,
   style
 }) {
@@ -956,6 +970,11 @@ function SignIn({
   const [password, setPassword] = useState3("");
   const [code, setCode] = useState3("");
   const [pendingChallenge, setPendingChallenge] = useState3(null);
+  const [pendingFactors, setPendingFactors] = useState3([]);
+  const [phoneNumber, setPhoneNumber] = useState3("");
+  const [phoneChallenge, setPhoneChallenge] = useState3(
+    null
+  );
   const [error, setError] = useState3(null);
   const [busy, setBusy] = useState3(false);
   const [passkeyReady, setPasskeyReady] = useState3(false);
@@ -1062,9 +1081,30 @@ function SignIn({
         onSignedIn?.();
         return;
       }
+      if (mode === "phone") {
+        if (!phoneChallenge) {
+          const started = await client.auth.phone.start({ phone: phoneNumber });
+          setPhoneChallenge({ token: started.challengeToken, hint: started.destinationHint });
+          return;
+        }
+        const signedIn = await client.auth.phone.verify({
+          challengeToken: phoneChallenge.token,
+          code
+        });
+        if (needsSecondFactor(signedIn)) {
+          setPendingChallenge(signedIn.challengeToken);
+          setPendingFactors(signedIn.factors);
+          setCode("");
+          return;
+        }
+        setToken(signedIn.token);
+        onSignedIn?.();
+        return;
+      }
       const result = await client.auth.signIn({ email, password });
       if (needsSecondFactor(result)) {
         setPendingChallenge(result.challengeToken);
+        setPendingFactors(result.factors);
         return;
       }
       setToken(result.token);
@@ -1072,13 +1112,20 @@ function SignIn({
     } catch (cause) {
       console.error("[base316] sign-in failed", cause);
       setError(
-        pendingChallenge ? "That code was not accepted." : "That email and password did not match."
+        pendingChallenge ? "That code was not accepted." : mode === "phone" ? phoneChallenge ? "That code did not work. Check it, or ask for a new one." : (
+          // Why a text could not be sent is worth saying — a number in the
+          // wrong format, or too many requests — and the server words it
+          // without saying anything about accounts.
+          cause instanceof Error && cause.message ? cause.message : "We could not send a code. Try again."
+        ) : "That email and password did not match."
       );
     } finally {
       setBusy(false);
     }
   }
   const magicAvailable = Boolean(magicLinkRedirectUrl) && !pendingChallenge;
+  const tabsShown = (magicAvailable || phone) && !pendingChallenge;
+  const deliveredFactor = pendingFactors.find((factor) => factor.destinationHint);
   if (linkSent) {
     return /* @__PURE__ */ jsxs3("div", { className: cls("b316-card", className), style, children: [
       /* @__PURE__ */ jsx4("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Check your email" }),
@@ -1101,7 +1148,7 @@ function SignIn({
   }
   return /* @__PURE__ */ jsxs3("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
     error ? /* @__PURE__ */ jsx4("div", { className: "b316-error", role: "alert", children: error }) : null,
-    magicAvailable ? /* @__PURE__ */ jsxs3("div", { className: "b316-tabs", children: [
+    tabsShown ? /* @__PURE__ */ jsxs3("div", { className: "b316-tabs", children: [
       /* @__PURE__ */ jsx4(
         "button",
         {
@@ -1111,7 +1158,7 @@ function SignIn({
           children: "Password"
         }
       ),
-      /* @__PURE__ */ jsx4(
+      magicAvailable ? /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -1119,7 +1166,16 @@ function SignIn({
           onClick: () => setMode("magic"),
           children: "Magic link"
         }
-      )
+      ) : null,
+      phone ? /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: cls("b316-tab", mode === "phone" ? "b316-tab-on" : void 0),
+          onClick: () => setMode("phone"),
+          children: "Text message"
+        }
+      ) : null
     ] }) : null,
     pendingChallenge ? /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
       /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-code", children: "Authentication code" }),
@@ -1135,7 +1191,55 @@ function SignIn({
           required: true
         }
       ),
-      /* @__PURE__ */ jsx4("span", { className: "b316-muted", children: "From your authenticator app, or one of your recovery codes." })
+      /* @__PURE__ */ jsx4("span", { className: "b316-muted", children: deliveredFactor ? `We sent a code to ${deliveredFactor.destinationHint}. Enter it, or one of your recovery codes.` : "From your authenticator app, or one of your recovery codes." })
+    ] }) : mode === "phone" ? phoneChallenge ? /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-phone-code", children: "Code" }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          id: "b316-phone-code",
+          className: "b316-input",
+          value: code,
+          onChange: (event) => setCode(event.target.value),
+          autoComplete: "one-time-code",
+          inputMode: "numeric",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsxs3("span", { className: "b316-muted", children: [
+        "We sent a code to ",
+        phoneChallenge.hint,
+        ". It expires in ten minutes.",
+        " ",
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => {
+              setPhoneChallenge(null);
+              setCode("");
+            },
+            children: "Use a different number"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-phone", children: "Mobile number" }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          id: "b316-phone",
+          className: "b316-input",
+          type: "tel",
+          value: phoneNumber,
+          onChange: (event) => setPhoneNumber(event.target.value),
+          autoComplete: "tel",
+          placeholder: "+14155550123",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { className: "b316-muted", children: "Include the country code." })
     ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
       /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
         /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-email", children: "Email" }),
@@ -1168,7 +1272,7 @@ function SignIn({
         )
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx4("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Working\u2026" : pendingChallenge ? "Verify" : mode === "magic" ? "Email me a link" : "Sign in" }),
+    /* @__PURE__ */ jsx4("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Working\u2026" : pendingChallenge ? "Verify" : mode === "magic" ? "Email me a link" : mode === "phone" && !phoneChallenge ? "Text me a code" : "Sign in" }),
     passkeyReady && !pendingChallenge ? /* @__PURE__ */ jsxs3(Fragment, { children: [
       /* @__PURE__ */ jsx4("div", { className: "b316-muted", style: { textAlign: "center", margin: "10px 0" }, children: "or" }),
       /* @__PURE__ */ jsx4(
@@ -1783,6 +1887,7 @@ import { useState as useState10 } from "react";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function TwoFactorManager({
   enabled = false,
+  allowSms = false,
   onEnabled,
   onDisabled,
   className,
@@ -1792,6 +1897,7 @@ function TwoFactorManager({
   const [stage, setStage] = useState10({ name: "idle" });
   const [on, setOn] = useState10(enabled);
   const [code, setCode] = useState10("");
+  const [phone, setPhone] = useState10("");
   const [error, setError] = useState10(null);
   const [busy, setBusy] = useState10(false);
   if (!token) {
@@ -1821,6 +1927,21 @@ function TwoFactorManager({
       setBusy(false);
     }
   }
+  async function beginSms() {
+    setBusy(true);
+    setError(null);
+    try {
+      const enrollment = await client.auth.mfa.enrollSms(
+        token,
+        phone.trim() ? { phone: phone.trim() } : {}
+      );
+      setStage({ name: "enrollingEmail", ...enrollment });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not send a code.");
+    } finally {
+      setBusy(false);
+    }
+  }
   async function confirm() {
     if (stage.name !== "enrolling" && stage.name !== "enrollingEmail") {
       return;
@@ -1863,6 +1984,33 @@ function TwoFactorManager({
       /* @__PURE__ */ jsx12("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
       /* @__PURE__ */ jsx12("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsx12("code", { children: recovery }) }, recovery)) }),
       /* @__PURE__ */ jsx12("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsx12("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          id: "b316-mfa-phone",
+          className: "b316-input",
+          type: "tel",
+          autoComplete: "tel",
+          placeholder: "+14155550123",
+          value: phone,
+          onChange: (event) => setPhone(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => setStage({ name: "idle" }),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx12("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+      ] })
     ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-enrol", children: [
       /* @__PURE__ */ jsxs11("p", { children: [
         "We sent a code to ",
@@ -1964,7 +2112,17 @@ function TwoFactorManager({
             onClick: beginEmail,
             children: "Email me a code"
           }
-        )
+        ),
+        allowSms ? /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            disabled: busy,
+            onClick: () => setStage({ name: "smsNumber" }),
+            children: "Text me a code"
+          }
+        ) : null
       ] })
     ] })
   ] });
@@ -2296,6 +2454,16 @@ function TeamMembers({
   }
   return /* @__PURE__ */ jsxs15("div", { className: cls("b316-card b316-team", className), style, children: [
     /* @__PURE__ */ jsx16("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
+    team?.inherited ? (
+      // Not a member of this team, so not in the list below and with nothing
+      // to leave: access comes from the team that manages it, and ends there.
+      /* @__PURE__ */ jsxs15("div", { className: "b316-muted", children: [
+        "You have access through",
+        " ",
+        teams.find((candidate) => candidate.id === team.via)?.name ?? "the organization that manages this team",
+        "."
+      ] })
+    ) : null,
     error ? /* @__PURE__ */ jsx16("div", { className: "b316-error", role: "alert", children: error }) : null,
     /* @__PURE__ */ jsx16("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs15("li", { className: "b316-team-member", children: [
       /* @__PURE__ */ jsxs15("div", { children: [
@@ -2652,6 +2820,7 @@ function usePlans(options = {}) {
   const [busyPlanVersionId, setBusy] = useState18(null);
   const [lastError, setLastError] = useState18(null);
   const [ownPlanVersionId, setOwnPlanVersionId] = useState18(null);
+  const [managedBy, setManagedBy] = useState18(null);
   const [reloadCount, setReloadCount] = useState18(0);
   const supplied = options.currentPlanVersionId;
   const discover = supplied === void 0;
@@ -2672,13 +2841,16 @@ function usePlans(options = {}) {
     };
   }, [client, reloadCount]);
   useEffect13(() => {
-    if (!discover || !token) {
+    if (!token) {
       return;
     }
     let cancelled = false;
     client.billing.subscription(token).then((result) => {
       if (!cancelled) {
-        setOwnPlanVersionId(result.subscription?.planVersion.id ?? null);
+        setManagedBy(result.managedBy ?? null);
+        if (discover) {
+          setOwnPlanVersionId(result.subscription?.planVersion.id ?? null);
+        }
       }
     }).catch(() => null);
     return () => {
@@ -2692,6 +2864,11 @@ function usePlans(options = {}) {
   const selectPlan = useCallback6(
     async (plan) => {
       setLastError(null);
+      if (managedBy) {
+        const reason = `Your plan is provided by ${managedBy.name ?? "the organization that manages your account"}.`;
+        setLastError(reason);
+        return { status: "failed", reason };
+      }
       if (!token) {
         return { status: "needs-sign-in" };
       }
@@ -2728,7 +2905,7 @@ function usePlans(options = {}) {
         setBusy(null);
       }
     },
-    [client, token, options.navigate]
+    [client, token, options.navigate, managedBy]
   );
   return {
     plans,
@@ -2738,6 +2915,7 @@ function usePlans(options = {}) {
     busyPlanVersionId,
     lastError,
     signedIn: token !== null,
+    managedBy,
     selectPlan,
     reload
   };
@@ -2777,6 +2955,7 @@ function PricingTable({
     busyPlanVersionId: busy,
     lastError,
     signedIn,
+    managedBy,
     selectPlan
   } = usePlans({ currentPlanVersionId });
   async function choose(plan) {
@@ -2802,7 +2981,16 @@ function PricingTable({
   const anyDescription = plans.some((plan) => Boolean(plan.description));
   const anyFeatured = plans.some((plan) => plan.key === featuredPlanKey);
   return /* @__PURE__ */ jsxs18("div", { className: cls("b316-plans", className), style, children: [
-    lastError ? /* @__PURE__ */ jsx19("div", { className: "b316-plans-error", role: "alert", children: lastError }) : null,
+    managedBy ? (
+      // A client company's plan comes from the firm that runs it. The table
+      // still shows what is on offer, with the current plan marked, but
+      // nothing here can be bought: it would grant this account nothing.
+      /* @__PURE__ */ jsxs18("div", { className: "b316-plans-managed b316-muted", children: [
+        "Your plan is provided by ",
+        managedBy.name ?? "the organization that manages your account",
+        ". Ask them to change it."
+      ] })
+    ) : lastError ? /* @__PURE__ */ jsx19("div", { className: "b316-plans-error", role: "alert", children: lastError }) : null,
     plans.map((plan) => {
       const base = plan.prices.find((price) => price.featureId === null) ?? plan.prices[0];
       const isCurrent = current === plan.planVersionId;
@@ -2831,7 +3019,7 @@ function PricingTable({
               {
                 type: "button",
                 className: isCurrent ? "b316-button b316-button-current" : "b316-button",
-                disabled: isCurrent || busy !== null || !signedIn && !signInUrl && !onSelectPlan,
+                disabled: isCurrent || managedBy !== null || busy !== null || !signedIn && !signInUrl && !onSelectPlan,
                 onClick: () => {
                   void choose(plan);
                 },
@@ -4174,6 +4362,7 @@ function SubscriptionManager({
   const { client, token, loading: sessionLoading } = useBase316();
   const [subscription, setSubscription] = useState25(null);
   const [loading, setLoading] = useState25(true);
+  const [managedBy, setManagedBy] = useState25(null);
   const [busy, setBusy] = useState25(false);
   const [error, setError] = useState25(null);
   const load = useCallback8(async () => {
@@ -4185,6 +4374,7 @@ function SubscriptionManager({
     try {
       const result = await client.billing.subscription(token);
       setSubscription(result.subscription);
+      setManagedBy(result.managedBy ?? null);
     } catch (cause) {
       console.error("[base316] could not load the subscription", cause);
       setError("Could not load your subscription.");
@@ -4216,7 +4406,11 @@ function SubscriptionManager({
       " \xB7 ",
       subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
     ] }),
-    subscription.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs26("p", { className: "b316-muted", children: [
+    managedBy ? /* @__PURE__ */ jsxs26("p", { className: "b316-muted", children: [
+      "Provided by ",
+      managedBy.name ?? "the organization that manages your account",
+      ". Ask them to change or cancel it."
+    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs26("p", { className: "b316-muted", children: [
       "This subscription will not renew. You keep access until ",
       renews,
       "."
@@ -4553,6 +4747,11 @@ var MANIFEST = [
         summary: "Colours, radius and font as tokens. Restyles everything at once.",
         required: false
       },
+      {
+        name: "tenant",
+        summary: "White-label everything inside for one tenant \u2014 `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colours on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
+        required: false
+      },
       ...appearance
     ],
     seeAlso: ["useBase316", "useSession"]
@@ -4578,7 +4777,7 @@ var MANIFEST = [
   {
     name: "SignIn",
     kind: "component",
-    summary: "Password, passkey and magic-link sign-in in one form.",
+    summary: "Password, passkey, magic-link and text-message sign-in in one form.",
     useWhen: "The application renders its own sign-in rather than redirecting to the hosted page.",
     requires: [],
     props: [
@@ -4593,6 +4792,11 @@ var MANIFEST = [
         summary: "Where an emailed link lands, which must be registered on the environment. Without it, magic link is not offered at all.",
         required: false
       },
+      {
+        name: "phone",
+        summary: "Offer signing in with a code sent by text message. Needs text messages switched on for the environment, and its own Twilio account in production.",
+        required: false
+      },
       ...appearance
     ],
     seeAlso: ["SignUp", "ForgotPassword"]
@@ -4726,8 +4930,8 @@ var MANIFEST = [
   {
     name: "TwoFactorManager",
     kind: "component",
-    summary: "Turn two-factor authentication on or off, by authenticator app or a code to the inbox.",
-    useWhen: "A security settings page. Offers both factors; the app is stronger, the emailed code is the one people who will not install an app actually use.",
+    summary: "Turn two-factor authentication on or off, by authenticator app, a code to the inbox or a code by text message.",
+    useWhen: "A security settings page. The app is strongest; the emailed or texted code is the one people who will not install an app actually use.",
     requires: ["session"],
     props: [
       {
@@ -4735,6 +4939,11 @@ var MANIFEST = [
         summary: "Whether a factor already exists, which decides which side is shown.",
         required: false
       },
+      {
+        name: "allowSms",
+        summary: "Offer a code by text message. Off by default: it only works once the environment can send one.",
+        required: false
+      },
       { name: "onEnabled", summary: "Called once a factor is confirmed.", required: false },
       { name: "onDisabled", summary: "Called once it is removed.", required: false },
       ...appearance
@@ -4755,7 +4964,7 @@ var MANIFEST = [
   {
     name: "Branding",
     kind: "component",
-    summary: "The environment's logo, name and tagline.",
+    summary: "The logo, name and tagline \u2014 the environment's, or the tenant's when the provider is given a `tenant`.",
     useWhen: "Above a sign-in form, so your pages match the hosted ones.",
     requires: [],
     props: [
@@ -4767,7 +4976,7 @@ var MANIFEST = [
   {
     name: "TeamMembers",
     kind: "component",
-    summary: "Who is in a team, who has been invited, and the way in and out.",
+    summary: "Who is in a team, who has been invited, and the way in and out. A team reached only through the organization that manages it says so, and offers nothing to leave.",
     useWhen: "A Team or Members settings page. One component covers the list, the pending invitations, the invite box and leaving.",
     requires: ["session"],
     props: [