Package Exports

@easyflow/javascript-sdk
@easyflow/javascript-sdk/package.json

Readme

🚀 Easyflow SDK - E2E Test Project

📋 Overview

Este é um projeto React + TypeScript que demonstra a integração end-to-end do Easyflow SDK via NPM, simulando exatamente como uma plataforma como o Lovable faria a integração.

🎯 Objetivo

Provar que o SDK funciona perfeitamente quando instalado via NPM em projetos TypeScript/React, com:

✅ Import direto via NPM
✅ Tipos TypeScript funcionando
✅ Build com Vite sem erros
✅ Integração simples e direta
✅ Funcionalidades completas do SDK
✅ Interface real para testar todos os métodos

🚀 Como Funciona

1. Instalação via NPM

npm install @easyflow/javascript-sdk@latest

2. Import Direto

import EasyflowSDK from '@easyflow/javascript-sdk'

3. Inicialização Simples

const sdk = new EasyflowSDK('business-id')

4. Uso Direto

// Criar cliente
const customer = await sdk.createCustomer(customerData)

// Criar pedido
const order = await sdk.placeOrder(offerId, orderData)

// Processar pagamento
const charge = await sdk.charge(paymentData)

// Adicionar cartão
const creditCard = await sdk.addCreditCard(cardData)

// Remover cartão
const result = await sdk.removeCreditCard(cardId)

🧪 Interface de Teste Completa

⚙️ Configuração do SDK

Input para Business ID - Digite seu ID da Easyflow
Botão de Inicialização - Cria instância do SDK
Status de Configuração - Confirma se o SDK está funcionando

👤 Formulário de Cliente

Nome completo - Nome do cliente
Email - Email do cliente
Tipo de documento - CPF ou CNPJ
Número do documento - CPF/CNPJ do cliente
DDD - Código de área do telefone
Número do telefone - Telefone do cliente
Botão Criar Cliente - Chama sdk.createCustomer()

💳 Formulário de Cartão de Crédito

Número do cartão - Número do cartão
Nome do titular - Nome impresso no cartão
Mês de expiração - MM (ex: 12)
Ano de expiração - YYYY (ex: 2025)
CVV - Código de segurança
Botão Adicionar Cartão - Chama sdk.addCreditCard()
Botão Remover Cartão - Chama sdk.removeCreditCard()

📦 Formulário de Pedido

ID da Oferta - ID da oferta no sistema
Número de parcelas - Quantidade de parcelas
Botão Criar Pedido - Chama sdk.placeOrder()

💳 Formulário de Pagamento

Valor em centavos - Valor do pagamento (ex: 10000 = R$ 100,00)
Número de parcelas - Quantidade de parcelas
Botão Processar Pagamento - Chama sdk.charge()

📊 Status do SDK

Botão Status - Chama sdk.getStatus()

🔧 Tecnologias

React 18 + TypeScript
Vite (build tool)
Easyflow SDK (via NPM)
CSS Modules com design moderno

📁 Estrutura

e2e/
└── react-ts-e2e/
    ├── src/
    │   ├── App.tsx          # Interface completa de integração
    │   ├── App.css          # Estilos modernos e responsivos
    │   └── main.tsx         # Entry point
    ├── package.json          # Dependências + SDK
    ├── tsconfig.json         # Config TypeScript
    ├── vite.config.ts        # Config Vite
    └── README.md            # Documentação do projeto E2E

🚀 Como Executar

1. Instalar Dependências

cd e2e/react-ts-e2e
npm install

2. Executar em Desenvolvimento

npm run dev

3. Build de Produção

npm run build

4. Preview do Build

npm run preview

🔍 O que Prova

✅ Integração NPM

SDK instalado via npm install
Funciona em ambiente Node.js/npm

✅ TypeScript

Tipos completos disponíveis
IntelliSense funcionando
Compilação sem erros

✅ Build Tools

Vite compila sem problemas
Webpack compatível
ES Modules funcionando

✅ Runtime

SDK inicializa corretamente
Métodos executam sem erros
Tratamento de erros funcionando

✅ Interface Completa

Formulários funcionais
Validação de dados
Exibição de resultados
Tratamento de erros

🎯 Simulação Lovable

Este projeto simula exatamente como o Lovable integraria o SDK:

Instalação: npm install @easyflow/javascript-sdk
Import: import EasyflowSDK from '@easyflow/javascript-sdk'
Configuração: new EasyflowSDK('business-id')
Uso: Chamadas diretas aos métodos do SDK
Tratamento: Gerenciamento de erros e resultados
Interface: Formulários para testar cada método

📊 Resultados Esperados

✅ SDK inicializa sem erros
✅ Tipos TypeScript funcionando
✅ Build Vite compila sem problemas
✅ Métodos do SDK executam corretamente
✅ Tratamento de erros funcionando
✅ Interface responsiva e funcional
✅ Formulários validam e enviam dados
✅ Resultados são exibidos corretamente

🔗 Links Relacionados

SDK Principal - Documentação completa
INDEX.md - Hub de documentação
PLATFORM-INTEGRATION.md - Guia de integração
NPM Package - Package oficial

Este projeto E2E prova que o Easyflow SDK funciona perfeitamente via NPM em projetos TypeScript/React com uma interface completa e funcional! 🚀✨

🚀 Quick Start

Via NPM

npm install @easyflow/javascript-sdk

Via CDN

<script src="https://easyflow-sdk.pages.dev/easyflow-sdk.min.js"></script>

📚 TypeScript Integration

Para projetos TypeScript, o SDK é exposto globalmente quando carregado via CDN. Adicione as seguintes declarações ao seu projeto:

// O SDK está sendo carregado via CDN e exposto globalmente como window.easyflowSDK
declare global {
    interface Window {
        easyflowSDK: any
        EasyflowSDK: any
    }
}

Exemplo de Uso com TypeScript

// Configurar o SDK
window.easyflowSDK.configure({ businessId: 'your-business-id' })

// Usar métodos do SDK
const customer = await window.easyflowSDK.createCustomer(customerData)
const payment = await window.easyflowSDK.charge(paymentData)

@easyflow/javascript-sdk