feat: stripe skill - atualiza URL do webhook e adiciona configs de planos

Author: ciro-maciel

.agent/skills/riligar-infra-stripe/SKILL.md

@@ -151,7 +151,7 @@ Instrua o usuário:
 >
 > 1. Acesse https://dashboard.stripe.com/webhooks
 > 2. Clique em "Add endpoint"
-> 3. URL: `https://seu-dominio.com/webhook/stripe`
+> 3. URL: `https://seu-dominio.com/api/webhook`
 > 4. Selecione os eventos:
 >    - `checkout.session.completed`
 >    - `customer.subscription.updated`
@@ -171,14 +171,15 @@ Gere todos os arquivos necessários usando os templates de [assets/](assets/):
 | `routes/billing.js` | stripe-server.js (seção 2) |
 | `routes/webhook.js` | stripe-server.js (seção 3) |
 | `services/billing.js` | stripe-server.js (seção 4) |
-| `config/stripe-prices.js` | Price IDs coletados |
+| `config/stripe-prices.js` | Price IDs coletados (Step 9) |
+| `config/plans.js` | PLAN_MAP + PLAN_LIMITS (Step 9) |
 | `pages/Pricing.jsx` | stripe-client.js (seção 3) |
 | `components/BillingSettings.jsx` | stripe-client.js (seção 4) |
 | `hooks/useSubscription.js` | stripe-client.js (seção 2) |
 
-### Step 9: Criar Config de Preços
+### Step 9: Criar Configs de Planos e Preços
 
-Gere o arquivo de configuração com os Price IDs:
+**A) Arquivo de preços (config/stripe-prices.js):**
 
 ```javascript
 // config/stripe-prices.js
@@ -194,13 +195,53 @@ export const STRIPE_PRICES = {
         name: 'Pro',
         price: 99,
         features: ['Projetos ilimitados', 'Suporte prioritário', '10GB storage']
+    },
+    enterprise: {
+        priceId: 'price_COLETADO_ENTERPRISE',
+        name: 'Enterprise',
+        price: 299,
+        features: ['Tudo do Pro', 'Storage ilimitado', 'SLA garantido']
     }
 }
 
 export const getPrice = (plan) => STRIPE_PRICES[plan]
 export const getPriceId = (plan) => STRIPE_PRICES[plan]?.priceId
 ```
 
+**B) Arquivo de mapeamento e limites (config/plans.js):**
+
+```javascript
+// config/plans.js
+
+// Mapeia Price IDs do Stripe para nomes de planos internos
+export const PLAN_MAP = {
+    'price_COLETADO_STARTER': 'starter',
+    'price_COLETADO_PRO': 'pro',
+    'price_COLETADO_ENTERPRISE': 'enterprise',
+}
+
+// Define limites de features por plano
+export const PLAN_LIMITS = {
+    free: {
+        maxFlows: 1,
+        maxContacts: 100,
+        // Adicione outros limites conforme necessário
+    },
+    starter: {
+        maxFlows: 3,
+        maxContacts: 500,
+    },
+    pro: {
+        maxFlows: 15,
+        maxContacts: 5000,
+    },
+    enterprise: {
+        maxFlows: 55,
+        maxContacts: Infinity,
+    },
+}
+```
+
 ---
 
 ## Checklist Final
@@ -211,11 +252,13 @@ Ao completar o setup, confirme:
 - [ ] Chaves no `.env.development` e `.env.production` (backend e frontend)
 - [ ] Produtos criados no Stripe
 - [ ] Price IDs configurados em `config/stripe-prices.js`
-- [ ] Schema do database atualizado
-- [ ] Webhook endpoint configurado no Stripe Dashboard
+- [ ] `PLAN_MAP` e `PLAN_LIMITS` configurados em `config/plans.js`
+- [ ] Schema do database atualizado (campos Stripe na tabela users)
+- [ ] Webhook endpoint configurado no Stripe Dashboard (`/api/webhook`)
 - [ ] Webhook secret nos arquivos de ambiente
-- [ ] Rotas de billing funcionando
-- [ ] Página de pricing criada
+- [ ] Rotas de billing funcionando (`/api/billing/*`)
+- [ ] Página de pricing criada (com token de auth no ky)
+- [ ] `useSubscription` hook com header Authorization
 - [ ] Testado com cartão 4242 4242 4242 4242
 
 ---
@@ -229,8 +272,8 @@ brew install stripe/stripe-cli/stripe
 # Login
 stripe login
 
-# Forward webhooks
-stripe listen --forward-to localhost:3000/webhook/stripe
+# Forward webhooks (ajuste a porta conforme seu backend)
+stripe listen --forward-to localhost:3333/api/webhook
 
 # Testar checkout
 stripe trigger checkout.session.completed

.agent/skills/riligar-infra-stripe/assets/stripe-client.js

@@ -32,6 +32,20 @@ export const elementsAppearance = {
 import { useState, useEffect } from 'react'
 import ky from 'ky'
 
+const api = ky.create({
+    prefixUrl: import.meta.env.VITE_API_URL || 'http://localhost:3333',
+    hooks: {
+        beforeRequest: [
+            request => {
+                const token = localStorage.getItem('auth:token')
+                if (token) {
+                    request.headers.set('Authorization', `Bearer ${token}`)
+                }
+            },
+        ],
+    },
+})
+
 export function useSubscription() {
     const [subscription, setSubscription] = useState(null)
     const [loading, setLoading] = useState(true)
@@ -40,7 +54,7 @@ export function useSubscription() {
     const fetchSubscription = async () => {
         setLoading(true)
         try {
-            const data = await ky.get('/api/billing/subscription').json()
+            const data = await api.get('api/billing/subscription').json()
             setSubscription(data)
             setError(null)
         } catch (err) {
@@ -77,35 +91,52 @@ import { IconCheck } from '@tabler/icons-react'
 import { useState } from 'react'
 import ky from 'ky'
 
+// Importar do arquivo de configuração centralizado
+// import { STRIPE_PRICES } from '../config/stripe-prices'
+
 const plans = [
     {
         name: 'Starter',
-        priceId: 'price_starter_monthly',
+        priceId: 'price_starter_monthly', // Substituir pelo valor de STRIPE_PRICES.starter.priceId
         price: 29,
         features: ['5 projetos', 'Suporte por email', '1GB de storage']
     },
     {
         name: 'Pro',
-        priceId: 'price_pro_monthly',
+        priceId: 'price_pro_monthly', // Substituir pelo valor de STRIPE_PRICES.pro.priceId
         price: 99,
         popular: true,
         features: ['Projetos ilimitados', 'Suporte prioritário', '10GB de storage', 'API access']
     },
     {
         name: 'Enterprise',
-        priceId: 'price_enterprise_monthly',
+        priceId: 'price_enterprise_monthly', // Substituir pelo valor de STRIPE_PRICES.enterprise.priceId
         price: 299,
         features: ['Tudo do Pro', 'Suporte dedicado', 'Storage ilimitado', 'SLA garantido']
     }
 ]
 
+const api = ky.create({
+    prefixUrl: import.meta.env.VITE_API_URL || 'http://localhost:3333',
+    hooks: {
+        beforeRequest: [
+            request => {
+                const token = localStorage.getItem('auth:token')
+                if (token) {
+                    request.headers.set('Authorization', `Bearer ${token}`)
+                }
+            },
+        ],
+    },
+})
+
 export default function Pricing() {
     const [loading, setLoading] = useState(null)
 
     const handleCheckout = async (priceId) => {
         setLoading(priceId)
         try {
-            const { url } = await ky.post('/api/billing/checkout', {
+            const { url } = await api.post('api/billing/checkout', {
                 json: { priceId, mode: 'subscription' }
             }).json()
             window.location.href = url
@@ -178,20 +209,34 @@ import { Button, Card, Group, Stack, Text, Title, Badge, Divider } from '@mantin
 import { useState, useEffect } from 'react'
 import ky from 'ky'
 
+const api = ky.create({
+    prefixUrl: import.meta.env.VITE_API_URL || 'http://localhost:3333',
+    hooks: {
+        beforeRequest: [
+            request => {
+                const token = localStorage.getItem('auth:token')
+                if (token) {
+                    request.headers.set('Authorization', `Bearer ${token}`)
+                }
+            },
+        ],
+    },
+})
+
 export default function BillingSettings() {
     const [subscription, setSubscription] = useState(null)
     const [loading, setLoading] = useState(false)
 
     useEffect(() => {
-        ky.get('/api/billing/subscription').json()
+        api.get('api/billing/subscription').json()
             .then(setSubscription)
             .catch(console.error)
     }, [])
 
     const openPortal = async () => {
         setLoading(true)
         try {
-            const { url } = await ky.post('/api/billing/portal').json()
+            const { url } = await api.post('api/billing/portal').json()
             window.location.href = url
         } finally {
             setLoading(false)
@@ -201,9 +246,9 @@ export default function BillingSettings() {
     const cancelSubscription = async () => {
         setLoading(true)
         try {
-            await ky.post('/api/billing/subscription/cancel').json()
+            await api.post('api/billing/subscription/cancel').json()
             // Refresh subscription data
-            const data = await ky.get('/api/billing/subscription').json()
+            const data = await api.get('api/billing/subscription').json()
             setSubscription(data)
         } finally {
             setLoading(false)
@@ -356,12 +401,26 @@ import { IconDownload } from '@tabler/icons-react'
 import { useState, useEffect } from 'react'
 import ky from 'ky'
 
+const api = ky.create({
+    prefixUrl: import.meta.env.VITE_API_URL || 'http://localhost:3333',
+    hooks: {
+        beforeRequest: [
+            request => {
+                const token = localStorage.getItem('auth:token')
+                if (token) {
+                    request.headers.set('Authorization', `Bearer ${token}`)
+                }
+            },
+        ],
+    },
+})
+
 export default function InvoiceList() {
     const [invoices, setInvoices] = useState([])
     const [loading, setLoading] = useState(true)
 
     useEffect(() => {
-        ky.get('/api/billing/invoices').json()
+        api.get('api/billing/invoices').json()
             .then(({ data }) => setInvoices(data))
             .catch(console.error)
             .finally(() => setLoading(false))