@ciromaciel/auth-react 1.4.0 → 1.5.0

package/README.md

@@ -151,7 +151,7 @@ organization and on which plan, then one list of actions with "Sair" last.
     onAccountClick={openAccount}
     onBillingClick={openBilling}
     items={[{ id: 'docs', label: 'Documentação', icon: IconFileText, onClick: openDocs }]}
-    plan={{ name: 'Pro', used: 3, limit: 9, unit: 'projetos', onClick: openPlans }}
+    plan={{ name: 'Pro', used: 8, limit: 9, unit: 'projetos', canUpgrade: true, onClick: openPlans }}
     organization={{ name: 'Acme', role: 'owner' }}
 />
 ```
@@ -162,7 +162,13 @@ organization and on which plan, then one list of actions with "Sair" last.
   own group after billing. The component takes no JSX, so every app's card keeps the same shape.
 - `plan` and `organization` draw the context strip; leave them out and it is not drawn.
   `limit: null` hides the usage bar.
-- `branded={false}` removes the "Protegido por Auth" line.
+- The strip informs; "Assinatura" is the way to billing. The strip adds a "Fazer upgrade"
+  invite only when `canUpgrade` is `true` (there is a plan above this one) and usage is at 80%
+  of the limit or more. At the limit, the bar and the count turn red and "Limite atingido" appears on the badge's line.
+  `plan.onClick` is what the invite opens; `actionLabel` renames it.
+- The footer reads "Protegido por Auth" with a "Termos" link to the same terms the sign-in
+  cites. `termsUrl` points it elsewhere, `termsUrl={null}` drops the link, and `branded={false}`
+  removes the footer.
 
 ## API
 

package/dist/index.esm.js

@@ -2533,17 +2533,13 @@ function Wordmark({
   });
 }
 
+// Where the terms live. Hardcoded on purpose, like `API_BASE` in authSdk.js:
+// this ships inside the published bundle, and every screen of the seven panels
+// that links to the terms — the sign-in notice and the account card's footer —
+// must point at the same document. `termsUrl` overrides it for whoever hosts
+// their own.
 const TERMS_URL = 'https://myinfrastructure.click/legal/terms';
 
-/**
- * The terms notice under the first step.
- *
- * It sits on step ONE and nowhere else: the account is born on the first
- * `verify` and there is no separate sign-up screen to put it on — this form IS
- * the sign-up for whoever has never entered. On step two the person already
- * agreed by asking for the code; repeating it there would only push the code
- * field down.
- */
 function TermsNotice({
   url,
   text,
@@ -3988,6 +3984,13 @@ const ROLE_LABELS = {
   member: 'Membro'
 };
 
+/*
+ * From this share of the limit on, the strip invites to upgrade. Below it the
+ * strip only informs: "Assinatura" is the door that is always there, and a
+ * second link to the same modal right above it was two doors to one room.
+ */
+const UPGRADE_THRESHOLD = 0.8;
+
 /**
  * @typedef {Object} UserInformationItem
  * @property {string} [id] - Stable key
@@ -4000,8 +4003,12 @@ const ROLE_LABELS = {
  * @property {number} [used] - How many of the plan's resources are in use
  * @property {number|null} [limit] - The plan's ceiling; `null` hides the meter
  * @property {string} [unit] - What is counted, in the plural: "projetos"
- * @property {string} [actionLabel='Ver planos']
- * @property {Function} [onClick] - Opens the plans
+ * @property {boolean} [canUpgrade=false] - There is a plan above this one. Without
+ *   it the invite never shows, however full the plan is: on the last rung there
+ *   is nowhere to go
+ * @property {string} [actionLabel='Fazer upgrade']
+ * @property {Function} [onClick] - Opens the plans. The invite shows only with
+ *   `canUpgrade` and usage at 80% of the limit or more
  *
  * @typedef {Object} UserInformationOrganization
  * @property {string} name
@@ -4017,7 +4024,9 @@ const ROLE_LABELS = {
  * @param {UserInformationItem[]} [props.items] - The panel's own rows, shown in their own group
  * @param {UserInformationPlan} [props.plan] - The plan strip; omitted, the strip is not drawn
  * @param {UserInformationOrganization} [props.organization] - Where the person is acting
- * @param {boolean} [props.branded=true] - The "Protegido por Auth" line
+ * @param {boolean} [props.branded=true] - The footer: "Protegido por Auth" and the terms link
+ * @param {string|null} [props.termsUrl] - Where "Termos" points; `null` removes the link
+ * @param {string} [props.termsLabel='Termos']
  * @param {string} [props.accountLabel='Conta']
  * @param {string} [props.billingLabel='Assinatura']
  * @param {string} [props.signOutLabel='Sair']
@@ -4031,6 +4040,8 @@ function UserInformation({
   plan,
   organization,
   branded = true,
+  termsUrl = TERMS_URL,
+  termsLabel = 'Termos',
   accountLabel = 'Conta',
   billingLabel = 'Assinatura',
   signOutLabel = 'Sair',
@@ -4138,23 +4149,39 @@ function UserInformation({
         hasDivider: true
       })]
     }), branded && /*#__PURE__*/jsxs(Group, {
-      justify: "center",
-      gap: 4,
-      py: 8,
+      justify: termsUrl ? 'space-between' : 'center',
+      gap: 8,
+      px: 16,
+      py: 10,
       bg: "gray.1",
       style: {
         borderTop: '1px solid var(--mantine-color-gray-2)'
       },
-      children: [/*#__PURE__*/jsx(Text, {
+      children: [/*#__PURE__*/jsxs(Text, {
         fz: 11,
         fw: 500,
         c: "gray.5",
-        children: "Protegido por"
-      }), /*#__PURE__*/jsx(Text, {
+        children: ["Protegido por", ' ', /*#__PURE__*/jsx(Text, {
+          span: true,
+          inherit: true,
+          fw: 800,
+          c: "gray.7",
+          children: "Auth"
+        })]
+      }), termsUrl && /*#__PURE__*/jsx(Anchor, {
+        href: termsUrl
+        /*
+         * A new tab, like the sign-in's notice: the card sits
+         * over a working panel, and reading the terms must
+         * not navigate away from it.
+         */,
+        target: "_blank",
+        rel: "noopener noreferrer",
         fz: 11,
-        fw: 800,
-        c: "gray.7",
-        children: "Auth"
+        fw: 500,
+        c: "gray.5",
+        underline: "always",
+        children: termsLabel
       })]
     })]
   });
@@ -4169,6 +4196,15 @@ function ContextStrip({
   const role = organization?.role ? ROLE_LABELS[organization.role] || organization.role : null;
   const hasMeter = plan && Number.isFinite(plan.used) && Number.isFinite(plan.limit) && plan.limit > 0;
   const ratio = hasMeter ? Math.min(1, Math.max(0, plan.used / plan.limit)) : 0;
+  const isFull = hasMeter && plan.used >= plan.limit;
+  const showsInvite = hasMeter && plan.canUpgrade === true && typeof plan.onClick === 'function' && ratio >= UPGRADE_THRESHOLD;
+  /*
+   * "Limite atingido" sits on the badge's line, whose left side is empty
+   * when there is no organization. Next to the count it would wrap to two
+   * lines beside the invite. With an organization there, it falls back to
+   * the count.
+   */
+  const limitNoticeOnTop = isFull && !organization?.name;
   return /*#__PURE__*/jsxs(Stack, {
     gap: 8,
     px: padded ? 16 : 0,
@@ -4181,7 +4217,12 @@ function ContextStrip({
     children: [(organization?.name || plan?.name) && /*#__PURE__*/jsxs(Group, {
       gap: 8,
       wrap: "nowrap",
-      children: [organization?.name && /*#__PURE__*/jsxs(Fragment, {
+      children: [limitNoticeOnTop && /*#__PURE__*/jsx(Text, {
+        fz: 12,
+        fw: 700,
+        c: "red.8",
+        children: "Limite atingido"
+      }), organization?.name && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(IconBuilding, {
           size: 14,
           stroke: 1.5,
@@ -4235,7 +4276,7 @@ function ContextStrip({
         children: /*#__PURE__*/jsx(Box, {
           h: "100%",
           w: `${ratio * 100}%`,
-          bg: "gray.9"
+          bg: isFull ? 'red.8' : 'gray.9'
         })
       }), /*#__PURE__*/jsxs(Group, {
         justify: "space-between",
@@ -4243,18 +4284,24 @@ function ContextStrip({
         wrap: "nowrap",
         children: [/*#__PURE__*/jsx(Text, {
           fz: 12,
-          fw: 500,
-          c: "gray.6",
-          children: `${plan.used} de ${plan.limit}${plan.unit ? ` ${plan.unit}` : ''}`
-        }), plan.onClick && /*#__PURE__*/jsx(Anchor, {
-          component: "button",
-          type: "button",
-          fz: 12,
-          fw: 700,
-          c: "gray.9",
-          underline: "always",
+          fw: isFull ? 700 : 500,
+          c: isFull ? 'red.8' : 'gray.6',
+          children: `${plan.used} de ${plan.limit}${plan.unit ? ` ${plan.unit}` : ''}${isFull && !limitNoticeOnTop ? ' · limite atingido' : ''}`
+        }), showsInvite && /*#__PURE__*/jsx(UnstyledButton, {
           onClick: plan.onClick,
-          children: plan.actionLabel || 'Ver planos'
+          fz: 11,
+          fw: 800,
+          lts: "0.5px",
+          c: "white",
+          bg: "gray.9",
+          px: 8,
+          py: 3,
+          lh: 1.4,
+          style: {
+            flex: 'none',
+            whiteSpace: 'nowrap'
+          },
+          children: plan.actionLabel || 'Fazer upgrade'
         })]
       })]
     })]