@ciromaciel/auth-react 1.4.1 → 1.5.0

package/dist/index.js

@@ -3986,6 +3986,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
@@ -3998,8 +4005,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
@@ -4187,6 +4198,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__*/jsxRuntime.jsxs(core.Stack, {
     gap: 8,
     px: padded ? 16 : 0,
@@ -4199,7 +4219,12 @@ function ContextStrip({
     children: [(organization?.name || plan?.name) && /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
       gap: 8,
       wrap: "nowrap",
-      children: [organization?.name && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [limitNoticeOnTop && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        fz: 12,
+        fw: 700,
+        c: "red.8",
+        children: "Limite atingido"
+      }), organization?.name && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconBuilding, {
           size: 14,
           stroke: 1.5,
@@ -4253,7 +4278,7 @@ function ContextStrip({
         children: /*#__PURE__*/jsxRuntime.jsx(core.Box, {
           h: "100%",
           w: `${ratio * 100}%`,
-          bg: "gray.9"
+          bg: isFull ? 'red.8' : 'gray.9'
         })
       }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
         justify: "space-between",
@@ -4261,18 +4286,24 @@ function ContextStrip({
         wrap: "nowrap",
         children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
           fz: 12,
-          fw: 500,
-          c: "gray.6",
-          children: `${plan.used} de ${plan.limit}${plan.unit ? ` ${plan.unit}` : ''}`
-        }), plan.onClick && /*#__PURE__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsx(core.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'
         })]
       })]
     })]