@ciromaciel/auth-react 1.4.1 → 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,6 +162,10 @@ 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.
+- 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.

package/dist/index.esm.js

@@ -3984,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
@@ -3996,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
@@ -4185,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,
@@ -4197,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,
@@ -4251,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",
@@ -4259,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'
         })]
       })]
     })]