@riligar/payments-react 1.0.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@riligar/payments-react",
+  "version": "1.0.0",
+  "description": "React SDK for Riligar Payments Hub",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "echo 'No build step required for pure ESM source' && exit 0",
+    "release": "semantic-release",
+    "release:dry-run": "semantic-release --dry-run"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/riligar-applications/payments.git",
+    "directory": "packages/payments-react"
+  },
+  "dependencies": {
+    "@tabler/icons-react": "^3.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@semantic-release/commit-analyzer": "^13.0.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^10.0.0",
+    "@semantic-release/npm": "^12.0.0",
+    "@semantic-release/release-notes-generator": "^14.0.0",
+    "semantic-release": "^24.0.0"
+  }
+}

package/src/components/FeatureControl.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useHasFeature } from '../hooks/usePayments';
+
+export const FeatureControl = ({ 
+  featureId, 
+  children, 
+  fallback = null 
+}) => {
+  const hasAccess = useHasFeature(featureId);
+
+  if (!hasAccess) {
+    return fallback;
+  }
+
+  return children;
+};

package/src/components/PortalButton.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { IconExternalLink } from '@tabler/icons-react';
+import { usePaymentsContext } from '../context/PaymentsProvider';
+import { usePortal } from '../hooks/usePayments';
+
+export const PortalButton = ({ 
+  returnUrl, 
+  label = 'Gerenciar Assinatura',
+  customStyles = {}
+}) => {
+  const { userId } = usePaymentsContext();
+  const { openPortal } = usePortal();
+
+  const handleClick = async () => {
+    try {
+      await openPortal({ userId, returnUrl });
+    } catch (err) {
+      // Notification handled by hook
+    }
+  };
+
+  return (
+    <button 
+      onClick={handleClick}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '0.625rem 1.25rem',
+        backgroundColor: '#fff',
+        color: '#000',
+        border: '1px solid #eee',
+        borderRadius: '8px',
+        fontSize: '0.875rem',
+        fontWeight: 600,
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        ...customStyles
+      }}
+      onMouseOver={(e) => {
+        e.target.style.backgroundColor = '#f9f9f9';
+        e.target.style.borderColor = '#ddd';
+      }}
+      onMouseOut={(e) => {
+        e.target.style.backgroundColor = '#fff';
+        e.target.style.borderColor = '#eee';
+      }}
+    >
+      <IconExternalLink size={16} style={{ marginRight: '0.5rem' }} />
+      {label}
+    </button>
+  );
+};

package/src/components/Pricing.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { IconCheck, IconPackage } from '@tabler/icons-react';
+import { usePaymentsContext } from '../context/PaymentsProvider';
+import { useCheckout } from '../hooks/usePayments';
+
+export const Pricing = ({ 
+  successUrl, 
+  cancelUrl, 
+  onCheckoutStart,
+  customStyles = {}
+}) => {
+  const { plans, loading, userId } = usePaymentsContext();
+  const { createCheckout } = useCheckout();
+
+  if (loading) return <div className="p-8 text-center" style={{ fontFamily: "'Montserrat', sans-serif", color: '#666', fontSize: '0.9rem' }}>Carregando planos...</div>;
+
+  if (!plans || plans.length === 0) {
+    return (
+      <div style={{ 
+        padding: '2rem 1.5rem', 
+        textAlign: 'center', 
+        backgroundColor: '#fff',
+        border: '1px solid #eee', 
+        borderRadius: '12px', 
+        fontFamily: "'Montserrat', sans-serif",
+        maxWidth: '400px',
+        margin: '2rem auto',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.02)'
+      }}>
+        <div style={{ marginBottom: '1rem', color: '#000' }}>
+          <IconPackage size={20} stroke={2} />
+        </div>
+        <h3 style={{ fontFamily: "'Montserrat', sans-serif", color: '#000', fontSize: '0.95rem', fontWeight: 700, marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+          Configuração Pendente
+        </h3>
+        <p style={{ fontSize: '0.8rem', lineHeight: 1.5, margin: 0, color: '#666' }}>
+          Não identificamos planos vinculados a este projeto. Configure as ofertas no dashboard para habilitar o checkout.
+        </p>
+      </div>
+    );
+  }
+
+  const handleSubscribe = async (plan) => {
+    if (onCheckoutStart) onCheckoutStart(plan);
+    try {
+      await createCheckout({
+        planId: plan.id,
+        userId,
+        successUrl,
+        cancelUrl
+      });
+    } catch (err) {
+      // Notification handled by hook
+    }
+  };
+
+  return (
+    <div className="pricing-grid" style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+      gap: '1.5rem',
+      padding: '1.5rem',
+      fontFamily: "'Montserrat', sans-serif",
+      ...customStyles.grid
+    }}>
+      {plans.map((plan) => (
+        <div key={plan.id} className="pricing-card" style={{
+          border: '1px solid #eee',
+          borderRadius: '12px',
+          padding: '2rem',
+          display: 'flex',
+          flexDirection: 'column',
+          backgroundColor: '#fff',
+          transition: 'all 0.2s ease',
+          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.02)',
+          ...customStyles.card
+        }}>
+          <h3 style={{ 
+            fontFamily: "'Montserrat', sans-serif", 
+            fontSize: '0.9rem', 
+            fontWeight: 800, 
+            marginBottom: '0.5rem', 
+            color: '#000',
+            textTransform: 'uppercase',
+            letterSpacing: '1px'
+          }}>
+            {plan.name}
+          </h3>
+          <div style={{ marginBottom: '2rem', display: 'flex', alignItems: 'baseline' }}>
+            <span style={{ 
+              fontFamily: "'Montserrat', sans-serif", 
+              fontSize: '2.5rem', 
+              fontWeight: 900, 
+              color: '#000',
+              letterSpacing: '-1.5px',
+              lineHeight: 1
+            }}>
+              {(plan.price / 100).toLocaleString('pt-BR', { style: 'currency', currency: plan.currency || 'BRL' })}
+            </span>
+            <span style={{ color: '#999', marginLeft: '0.4rem', fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase' }}>/mês</span>
+          </div>
+
+          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 2rem 0', flex: 1 }}>
+            <li style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem', color: '#555', fontSize: '0.85rem', fontWeight: 500 }}>
+              <IconCheck size={16} style={{ marginRight: '0.75rem', color: '#000' }} stroke={2.5} />
+              Acesso total aos recursos
+            </li>
+            <li style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem', color: '#555', fontSize: '0.85rem', fontWeight: 500 }}>
+              <IconCheck size={16} style={{ marginRight: '0.75rem', color: '#000' }} stroke={2.5} />
+              Suporte prioritário exclusivo
+            </li>
+          </ul>
+
+          <button 
+            onClick={() => handleSubscribe(plan)}
+            style={{
+              backgroundColor: '#000',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '1rem',
+              fontSize: '0.8rem',
+              fontWeight: 800,
+              cursor: 'pointer',
+              transition: 'all 0.15s ease',
+              fontFamily: "'Montserrat', sans-serif",
+              textTransform: 'uppercase',
+              letterSpacing: '1px',
+              width: '100%',
+              ...customStyles.button
+            }}
+            onMouseDown={(e) => e.target.style.transform = 'scale(0.97)'}
+            onMouseUp={(e) => e.target.style.transform = 'scale(1)'}
+          >
+            Assinar Agora
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/Toast.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react';
+import { IconCircleCheck, IconCircleX, IconInfoCircle, IconX } from '@tabler/icons-react';
+
+export const Toast = ({ 
+  message, 
+  type = 'info', 
+  onClose, 
+  duration = 5000 
+}) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [onClose, duration]);
+
+  const icons = {
+    success: <IconCircleCheck size={20} color="#000" />,
+    error: <IconCircleX size={20} color="#000" />,
+    info: <IconInfoCircle size={20} color="#000" />
+  };
+
+  const bgColors = {
+    success: '#fff',
+    error: '#fff',
+    info: '#fff'
+  };
+
+  const borderColors = {
+    success: '#ddd',
+    error: '#ddd',
+    info: '#ddd'
+  };
+
+  return (
+    <div style={{
+      position: 'fixed',
+      bottom: '24px',
+      right: '24px',
+      zIndex: 9999,
+      display: 'flex',
+      alignItems: 'center',
+      padding: '16px 20px',
+      backgroundColor: bgColors[type],
+      border: `1px solid ${borderColors[type]}`,
+      borderRadius: '8px',
+      boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      minWidth: '320px',
+      animation: 'slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+      fontFamily: "'Montserrat', sans-serif"
+    }}>
+      <style>{`
+        @keyframes slideIn {
+          from { transform: translateY(20px); opacity: 0; }
+          to { transform: translateY(0); opacity: 1; }
+        }
+      `}</style>
+      <div style={{ marginRight: '12px', display: 'flex' }}>
+        {icons[type]}
+      </div>
+      <div style={{ flex: 1, color: '#111', fontSize: '14px', fontWeight: 500 }}>
+        {message}
+      </div>
+      <button 
+        onClick={onClose}
+        style={{
+          background: 'none',
+          border: 'none',
+          padding: '4px',
+          cursor: 'pointer',
+          color: '#666',
+          display: 'flex'
+        }}
+      >
+        <IconX size={16} />
+      </button>
+    </div>
+  );
+};

package/src/context/PaymentsProvider.jsx

@@ -0,0 +1,78 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { Toast } from '../components/Toast';
+
+const PaymentsContext = createContext(null);
+
+export const PaymentsProvider = ({ 
+  children, 
+  publicKey, 
+  userId, 
+  apiBase = 'https://payments-api.riligar.com' 
+}) => {
+  const [plans, setPlans] = useState([]);
+  const [subscriptions, setSubscriptions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [toast, setToast] = useState(null);
+
+  const showToast = (message, type = 'info') => {
+    setToast({ message, type });
+  };
+
+  const fetchPlans = async () => {
+    try {
+      const response = await fetch(`${apiBase}/sdk/v1/plans?publicKey=${publicKey}`);
+      const data = await response.json();
+      if (response.ok) {
+        setPlans(data.data || []);
+      } else {
+        showToast(data.message || 'Erro ao carregar planos', 'error');
+      }
+    } catch (err) {
+      showToast('Falha na conexão com o servidor', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (publicKey) {
+      fetchPlans();
+    } else {
+      setLoading(false);
+    }
+  }, [publicKey, userId]);
+
+  const value = {
+    publicKey,
+    userId,
+    apiBase,
+    plans,
+    subscriptions,
+    loading,
+    error,
+    refreshPlans: fetchPlans,
+    showToast
+  };
+
+  return (
+    <PaymentsContext.Provider value={value}>
+      {children}
+      {toast && (
+        <Toast 
+          message={toast.message} 
+          type={toast.type} 
+          onClose={() => setToast(null)} 
+        />
+      )}
+    </PaymentsContext.Provider>
+  );
+};
+
+export const usePaymentsContext = () => {
+  const context = useContext(PaymentsContext);
+  if (!context) {
+    throw new Error('usePaymentsContext must be used within a PaymentsProvider');
+  }
+  return context;
+};

package/src/hooks/usePayments.js

@@ -0,0 +1,73 @@
+import { usePaymentsContext } from '../context/PaymentsProvider';
+
+export const useCheckout = () => {
+  const { apiBase, showToast } = usePaymentsContext();
+
+  const createCheckout = async ({ planId, userId, successUrl, cancelUrl }) => {
+    try {
+      const response = await fetch(`${apiBase}/checkout`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          planId,
+          userId,
+          success_url: successUrl,
+          cancel_url: cancelUrl
+        })
+      });
+
+      const data = await response.json();
+      const checkoutUrl = data.data?.url || data.url;
+
+      if (checkoutUrl) {
+        window.location.href = checkoutUrl;
+      } else {
+        throw new Error(data.message || 'Failed to create checkout session');
+      }
+    } catch (err) {
+      showToast(err.message, 'error');
+      throw err;
+    }
+  };
+
+  return { createCheckout };
+};
+
+export const usePortal = () => {
+  const { apiBase, publicKey, showToast } = usePaymentsContext();
+
+  const openPortal = async ({ userId, returnUrl }) => {
+    try {
+      const response = await fetch(`${apiBase}/account`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId,
+          return_url: returnUrl,
+          publicKey 
+        })
+      });
+
+      const data = await response.json();
+      const portalUrl = data.data?.url || data.url;
+
+      if (portalUrl) {
+        window.location.href = portalUrl;
+      } else {
+        throw new Error(data.message || 'Failed to open customer portal');
+      }
+    } catch (err) {
+      showToast(err.message, 'error');
+      throw err;
+    }
+  };
+
+  return { openPortal };
+};
+
+export const useHasFeature = (featureId) => {
+  const { subscriptions } = usePaymentsContext();
+  // Simple implementation: check if any active subscription matches the plan info
+  // This can be expanded based on how features are mapped to plans.
+  return subscriptions.some(sub => sub.status === 'active' && sub.planName === featureId);
+};

package/src/index.js

@@ -0,0 +1,6 @@
+export * from './context/PaymentsProvider';
+export * from './hooks/usePayments';
+export * from './components/Pricing';
+export * from './components/PortalButton';
+export * from './components/FeatureControl';
+export * from './components/Toast';