@ttoss/react-billing 0.7.4 → 0.8.0

package/README.md

@@ -12,7 +12,7 @@ pnpm add @ttoss/react-billing
 
 ## Quick Start
 
-This package expects your app to be wrapped with `@ttoss/ui` `ThemeProvider`.
+This package expects your app to be wrapped with `@ttoss/ui` `ThemeProvider` and `@ttoss/react-i18n` `I18nProvider` (a peer dependency). `SubscriptionPanel`'s status badges are translatable messages with English sources; `i18n/lang/pt-BR.json` ships the Portuguese translations, which `ttoss-i18n` picks up from your dependencies when you compile your app's catalogs.
 
 ### PlanCard
 

package/dist/index.cjs

@@ -35,6 +35,7 @@ let _ttoss_react_icons = require("@ttoss/react-icons");
 let react = require("react");
 react = __toESM(react);
 let _ttoss_components = require("@ttoss/components");
+let _ttoss_react_i18n = require("@ttoss/react-i18n");
 
 //#region src/components/planCard/PlanCardCtaSlot.tsx
 var PlanCardCtaSlot = ({
@@ -666,6 +667,28 @@ var SubscriptionPanelActionsSlot = ({
 
 //#endregion
 //#region src/components/subscriptionPanel/SubscriptionPanel.tsx
+var messages = (0, _ttoss_react_i18n.defineMessages)({
+  statusActive: {
+    defaultMessage: "Active",
+    description: "Subscription panel status badge: the subscription is active."
+  },
+  statusInactive: {
+    defaultMessage: "Inactive",
+    description: "Subscription panel status badge: the subscription is inactive."
+  },
+  statusCancelled: {
+    defaultMessage: "Cancelled",
+    description: "Subscription panel status badge: the subscription was cancelled."
+  },
+  scheduledUpdate: {
+    defaultMessage: "Update scheduled",
+    description: "Subscription panel badge: a plan change is scheduled for the next cycle."
+  },
+  renewalCancelled: {
+    defaultMessage: "Renewal cancelled",
+    description: "Subscription panel badge: the subscription will not renew at the end of the cycle."
+  }
+});
 /**
 * Renders a metric card based on its type.
 */
@@ -729,6 +752,9 @@ var SubscriptionPanel = ({
   metrics = [],
   isLoading = false
 }) => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
   if (isLoading)
     /**
     * use skeleton loader in the future here
@@ -773,26 +799,26 @@ var SubscriptionPanel = ({
           title: planName,
           frontTitle: price.interval ? `${price.value}/${price.interval}` : price.value,
           topBadges: [...(status.status === "active" ? [{
-            label: "Ativo",
+            label: intl.formatMessage(messages.statusActive),
             variant: "positive",
             icon: "fluent:checkmark-circle-24-filled"
           }] : status.status === "inactive" ? [{
-            label: "Inativo",
+            label: intl.formatMessage(messages.statusInactive),
             variant: "muted",
             icon: "fluent:dismiss-circle-24-filled"
           }] : [{
-            label: "Cancelado",
+            label: intl.formatMessage(messages.statusCancelled),
             variant: "negative",
             icon: "fluent:error-circle-24-filled"
           }]), ...(status.interval ? [{
             label: status.interval,
             variant: "informative"
           }] : []), ...(status.hasScheduledUpdate ? [{
-            label: "Alteração Agendada",
+            label: intl.formatMessage(messages.scheduledUpdate),
             variant: "informative",
             icon: "fluent:clock-24-regular"
           }] : []), ...(status.hasCancellation ? [{
-            label: "Renovação Cancelada",
+            label: intl.formatMessage(messages.renewalCancelled),
             variant: "negative",
             icon: "fluent:dismiss-circle-24-regular"
           }] : [])],

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@ttoss/react-icons";
 import * as React from "react";
 import { EnhancedTitle, MetricCard } from "@ttoss/components";
+import { defineMessages, useI18n } from "@ttoss/react-i18n";
 
 //#region src/components/planCard/PlanCardCtaSlot.tsx
 var PlanCardCtaSlot = ({
@@ -635,6 +636,43 @@ var SubscriptionPanelActionsSlot = ({
 
 //#endregion
 //#region src/components/subscriptionPanel/SubscriptionPanel.tsx
+var messages = defineMessages({
+  statusActive: {
+    id: "vRSfVR",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Active"
+    }]
+  },
+  statusInactive: {
+    id: "BSgyVr",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Inactive"
+    }]
+  },
+  statusCancelled: {
+    id: "4Es6pi",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Cancelled"
+    }]
+  },
+  scheduledUpdate: {
+    id: "AhCpt2",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Update scheduled"
+    }]
+  },
+  renewalCancelled: {
+    id: "FvMOyQ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Renewal cancelled"
+    }]
+  }
+});
 /**
 * Renders a metric card based on its type.
 */
@@ -698,6 +736,9 @@ var SubscriptionPanel = ({
   metrics = [],
   isLoading = false
 }) => {
+  const {
+    intl
+  } = useI18n();
   if (isLoading)
     /**
     * use skeleton loader in the future here
@@ -742,26 +783,26 @@ var SubscriptionPanel = ({
           title: planName,
           frontTitle: price.interval ? `${price.value}/${price.interval}` : price.value,
           topBadges: [...(status.status === "active" ? [{
-            label: "Ativo",
+            label: intl.formatMessage(messages.statusActive),
             variant: "positive",
             icon: "fluent:checkmark-circle-24-filled"
           }] : status.status === "inactive" ? [{
-            label: "Inativo",
+            label: intl.formatMessage(messages.statusInactive),
             variant: "muted",
             icon: "fluent:dismiss-circle-24-filled"
           }] : [{
-            label: "Cancelado",
+            label: intl.formatMessage(messages.statusCancelled),
             variant: "negative",
             icon: "fluent:error-circle-24-filled"
           }]), ...(status.interval ? [{
             label: status.interval,
             variant: "informative"
           }] : []), ...(status.hasScheduledUpdate ? [{
-            label: "Alteração Agendada",
+            label: intl.formatMessage(messages.scheduledUpdate),
             variant: "informative",
             icon: "fluent:clock-24-regular"
           }] : []), ...(status.hasCancellation ? [{
-            label: "Renovação Cancelada",
+            label: intl.formatMessage(messages.renewalCancelled),
             variant: "negative",
             icon: "fluent:dismiss-circle-24-regular"
           }] : [])],

package/i18n/compiled/en.json

@@ -0,0 +1,186 @@
+{
+  "0EjvY6": [
+    {
+      "type": 0,
+      "value": "∞"
+    }
+  ],
+  "0oVaj5": [
+    {
+      "type": 0,
+      "value": "Would you like to install our app?"
+    }
+  ],
+  "1DbX9V": [
+    {
+      "type": 0,
+      "value": "Near limit"
+    }
+  ],
+  "4+7L57": [
+    {
+      "type": 0,
+      "value": "No notifications"
+    }
+  ],
+  "4Es6pi": [
+    {
+      "type": 0,
+      "value": "Cancelled"
+    }
+  ],
+  "4NwCn9": [
+    {
+      "type": 0,
+      "value": "Reached limit"
+    }
+  ],
+  "AhCpt2": [
+    {
+      "type": 0,
+      "value": "Update scheduled"
+    }
+  ],
+  "BSgyVr": [
+    {
+      "type": 0,
+      "value": "Inactive"
+    }
+  ],
+  "FvMOyQ": [
+    {
+      "type": 0,
+      "value": "Renewal cancelled"
+    }
+  ],
+  "G/yZLu": [
+    {
+      "type": 0,
+      "value": "Remove"
+    }
+  ],
+  "JEsxDw": [
+    {
+      "type": 0,
+      "value": "Uploading..."
+    }
+  ],
+  "UD/D6v": [
+    {
+      "type": 0,
+      "value": "Install"
+    }
+  ],
+  "WhMFgF": [
+    {
+      "type": 0,
+      "value": "Clear all"
+    }
+  ],
+  "XKyo5X": [
+    {
+      "type": 0,
+      "value": "File Upload"
+    }
+  ],
+  "dx4ZnR": [
+    {
+      "type": 1,
+      "value": "name"
+    },
+    {
+      "type": 0,
+      "value": " logo"
+    }
+  ],
+  "eRShvB": [
+    {
+      "type": 0,
+      "value": "Maximum files reached"
+    }
+  ],
+  "fDCMA6": [
+    {
+      "type": 0,
+      "value": "Select Files"
+    }
+  ],
+  "fOOwej": [
+    {
+      "type": 6,
+      "value": "max_files",
+      "options": {
+        "one": {
+          "value": [
+            {
+              "type": 0,
+              "value": "Up to "
+            },
+            {
+              "type": 7
+            },
+            {
+              "type": 0,
+              "value": " file"
+            }
+          ]
+        },
+        "other": {
+          "value": [
+            {
+              "type": 0,
+              "value": "Up to "
+            },
+            {
+              "type": 7
+            },
+            {
+              "type": 0,
+              "value": " files"
+            }
+          ]
+        }
+      },
+      "offset": 0,
+      "pluralType": "cardinal"
+    }
+  ],
+  "gy0Ynb": [
+    {
+      "type": 0,
+      "value": "Click or drag files here"
+    }
+  ],
+  "oYpm71": [
+    {
+      "type": 0,
+      "value": "of "
+    },
+    {
+      "type": 1,
+      "value": "max"
+    }
+  ],
+  "rskBv4": [
+    {
+      "type": 0,
+      "value": "Unlimited"
+    }
+  ],
+  "vRSfVR": [
+    {
+      "type": 0,
+      "value": "Active"
+    }
+  ],
+  "zr0OS6": [
+    {
+      "type": 1,
+      "value": "percentage"
+    },
+    {
+      "type": 0,
+      "value": "% used"
+    }
+  ]
+}

package/i18n/compiled/pt-BR.json

@@ -0,0 +1,186 @@
+{
+  "0EjvY6": [
+    {
+      "type": 0,
+      "value": "∞"
+    }
+  ],
+  "0oVaj5": [
+    {
+      "type": 0,
+      "value": "Deseja instalar o nosso aplicativo?"
+    }
+  ],
+  "1DbX9V": [
+    {
+      "type": 0,
+      "value": "Próximo do limite"
+    }
+  ],
+  "4+7L57": [
+    {
+      "type": 0,
+      "value": "Nenhuma notificação"
+    }
+  ],
+  "4Es6pi": [
+    {
+      "type": 0,
+      "value": "Cancelado"
+    }
+  ],
+  "4NwCn9": [
+    {
+      "type": 0,
+      "value": "Limite atingido"
+    }
+  ],
+  "AhCpt2": [
+    {
+      "type": 0,
+      "value": "Alteração Agendada"
+    }
+  ],
+  "BSgyVr": [
+    {
+      "type": 0,
+      "value": "Inativo"
+    }
+  ],
+  "FvMOyQ": [
+    {
+      "type": 0,
+      "value": "Renovação Cancelada"
+    }
+  ],
+  "G/yZLu": [
+    {
+      "type": 0,
+      "value": "Remover"
+    }
+  ],
+  "JEsxDw": [
+    {
+      "type": 0,
+      "value": "Enviando..."
+    }
+  ],
+  "UD/D6v": [
+    {
+      "type": 0,
+      "value": "Instalar"
+    }
+  ],
+  "WhMFgF": [
+    {
+      "type": 0,
+      "value": "Limpar Tudo"
+    }
+  ],
+  "XKyo5X": [
+    {
+      "type": 0,
+      "value": "Upload de Arquivo"
+    }
+  ],
+  "dx4ZnR": [
+    {
+      "type": 0,
+      "value": "Logo de "
+    },
+    {
+      "type": 1,
+      "value": "name"
+    }
+  ],
+  "eRShvB": [
+    {
+      "type": 0,
+      "value": "Máximo de arquivos atingido"
+    }
+  ],
+  "fDCMA6": [
+    {
+      "type": 0,
+      "value": "Selecionar Arquivos"
+    }
+  ],
+  "fOOwej": [
+    {
+      "type": 6,
+      "value": "max_files",
+      "options": {
+        "one": {
+          "value": [
+            {
+              "type": 0,
+              "value": "Até "
+            },
+            {
+              "type": 7
+            },
+            {
+              "type": 0,
+              "value": " arquivo"
+            }
+          ]
+        },
+        "other": {
+          "value": [
+            {
+              "type": 0,
+              "value": "Até "
+            },
+            {
+              "type": 7
+            },
+            {
+              "type": 0,
+              "value": " arquivos"
+            }
+          ]
+        }
+      },
+      "offset": 0,
+      "pluralType": "cardinal"
+    }
+  ],
+  "gy0Ynb": [
+    {
+      "type": 0,
+      "value": "Clique ou arraste arquivos aqui"
+    }
+  ],
+  "oYpm71": [
+    {
+      "type": 0,
+      "value": "de "
+    },
+    {
+      "type": 1,
+      "value": "max"
+    }
+  ],
+  "rskBv4": [
+    {
+      "type": 0,
+      "value": "Ilimitado"
+    }
+  ],
+  "vRSfVR": [
+    {
+      "type": 0,
+      "value": "Ativo"
+    }
+  ],
+  "zr0OS6": [
+    {
+      "type": 1,
+      "value": "percentage"
+    },
+    {
+      "type": 0,
+      "value": "% usado"
+    }
+  ]
+}

package/i18n/lang/en.json

@@ -0,0 +1,105 @@
+{
+  "4Es6pi": {
+    "defaultMessage": "Cancelled",
+    "description": "Subscription panel status badge: the subscription was cancelled."
+  },
+  "AhCpt2": {
+    "defaultMessage": "Update scheduled",
+    "description": "Subscription panel badge: a plan change is scheduled for the next cycle."
+  },
+  "BSgyVr": {
+    "defaultMessage": "Inactive",
+    "description": "Subscription panel status badge: the subscription is inactive."
+  },
+  "FvMOyQ": {
+    "defaultMessage": "Renewal cancelled",
+    "description": "Subscription panel badge: the subscription will not renew at the end of the cycle."
+  },
+  "vRSfVR": {
+    "defaultMessage": "Active",
+    "description": "Subscription panel status badge: the subscription is active."
+  },
+  "0EjvY6": {
+    "module": "@ttoss/components",
+    "defaultMessage": "∞",
+    "description": "Infinity symbol used when the maximum limit is unlimited."
+  },
+  "0oVaj5": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Would you like to install our app?",
+    "description": "PWA install banner: the question offering installation."
+  },
+  "1DbX9V": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Near limit",
+    "description": "Alert shown when usage is close to the limit."
+  },
+  "4+7L57": {
+    "module": "@ttoss/components",
+    "defaultMessage": "No notifications",
+    "description": "Notifications menu: shown when there is nothing to list."
+  },
+  "4NwCn9": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Reached limit",
+    "description": "Alert shown when usage has reached or exceeded the limit."
+  },
+  "G/yZLu": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Remove"
+  },
+  "JEsxDw": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Uploading..."
+  },
+  "UD/D6v": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Install",
+    "description": "PWA install banner: button that starts the installation."
+  },
+  "WhMFgF": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Clear all",
+    "description": "Notifications menu: button clearing every notification."
+  },
+  "XKyo5X": {
+    "module": "@ttoss/components",
+    "defaultMessage": "File Upload"
+  },
+  "dx4ZnR": {
+    "module": "@ttoss/components",
+    "defaultMessage": "{name} logo",
+    "description": "OAuth consent: alt text for the requesting application logo."
+  },
+  "eRShvB": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Maximum files reached"
+  },
+  "fDCMA6": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Select Files"
+  },
+  "fOOwej": {
+    "module": "@ttoss/components",
+    "defaultMessage": "{max_files, plural, one {Up to # file} other {Up to # files}}"
+  },
+  "gy0Ynb": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Click or drag files here"
+  },
+  "oYpm71": {
+    "module": "@ttoss/components",
+    "defaultMessage": "of {max}",
+    "description": "Text shown before the max value, e.g. \"of 10\" or \"of ∞\"."
+  },
+  "rskBv4": {
+    "module": "@ttoss/components",
+    "defaultMessage": "Unlimited",
+    "description": "Shown when a metric has no maximum limit."
+  },
+  "zr0OS6": {
+    "module": "@ttoss/components",
+    "defaultMessage": "{percentage}% used",
+    "description": "Footer shown for percentage metrics, e.g. \"80% used\"."
+  }
+}

package/i18n/lang/pt-BR.json

@@ -0,0 +1,22 @@
+{
+  "4Es6pi": {
+    "defaultMessage": "Cancelado",
+    "description": "Subscription panel status badge: the subscription was cancelled."
+  },
+  "AhCpt2": {
+    "defaultMessage": "Alteração Agendada",
+    "description": "Subscription panel badge: a plan change is scheduled for the next cycle."
+  },
+  "BSgyVr": {
+    "defaultMessage": "Inativo",
+    "description": "Subscription panel status badge: the subscription is inactive."
+  },
+  "FvMOyQ": {
+    "defaultMessage": "Renovação Cancelada",
+    "description": "Subscription panel badge: the subscription will not renew at the end of the cycle."
+  },
+  "vRSfVR": {
+    "defaultMessage": "Ativo",
+    "description": "Subscription panel status badge: the subscription is active."
+  }
+}

package/i18n/missing/pt-BR.json

@@ -0,0 +1 @@
+{}

package/i18n/unused/pt-BR.json

@@ -0,0 +1 @@
+{}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-billing",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Billing UI components for React apps.",
   "keywords": [
     "React",
@@ -25,11 +25,12 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "i18n"
   ],
   "dependencies": {
-    "@ttoss/react-icons": "^0.10.0",
-    "@ttoss/ui": "^6.10.1"
+    "@ttoss/react-icons": "^0.10.1",
+    "@ttoss/ui": "^6.10.2"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -37,13 +38,16 @@
     "jest": "^30.4.2",
     "react": "^19.2.6",
     "tsdown": "^0.22.2",
-    "@ttoss/components": "^2.21.1",
-    "@ttoss/test-utils": "^4.3.0",
-    "@ttoss/config": "^1.39.0"
+    "@ttoss/components": "^2.21.2",
+    "@ttoss/react-i18n": "^2.5.2",
+    "@ttoss/test-utils": "^4.3.1",
+    "@ttoss/i18n-cli": "^0.11.1",
+    "@ttoss/config": "^1.39.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.21.1"
+    "@ttoss/components": "^2.21.2",
+    "@ttoss/react-i18n": "^2.5.2"
   },
   "publishConfig": {
     "access": "public",
@@ -51,6 +55,7 @@
   },
   "scripts": {
     "build": "tsdown",
+    "i18n": "ttoss-i18n",
     "test": "jest --projects tests/unit"
   }
 }