breezi-cli/dist/cli.js

CLI tool to generate Breezi PayPal integration projects

#!/usr/bin/env node
import inquirer from 'inquirer';
import fs from 'fs-extra';
import path from 'path';
import chalk from 'chalk';
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
async function main() {
    console.log(chalk.blue('\n🚀 Welcome to Breezi CLI - One-Click PayPal Integration\n'));
    const config = await inquirer.prompt([
        {
            type: 'list',
            name: 'projectType',
            message: 'What would you like to generate?',
            choices: [
                { name: '📋 Code snippet (add to existing project)', value: 'code-snippet' },
                { name: '🚀 Full project (complete app)', value: 'full-project' }
            ]
        },
        {
            type: 'input',
            name: 'name',
            message: 'Project name:',
            default: 'my-paypal-app',
            validate: (input) => input.length > 0 || 'Project name is required',
            when: (answers) => answers.projectType === 'full-project'
        },
        {
            type: 'list',
            name: 'framework',
            message: 'Choose your framework:',
            choices: [
                { name: 'React', value: 'react' },
                { name: 'Vanilla JavaScript', value: 'vanilla-js' }
            ]
        },
        {
            type: 'input',
            name: 'paypalClientId',
            message: 'PayPal Client ID (sandbox):',
            validate: (input) => input.length > 0 || 'PayPal Client ID is required'
        }
    ]);
    if (config.projectType === 'code-snippet') {
        if (config.framework === 'react') {
            await generateReactSnippet(config);
        }
        else {
            await generateVanillaSnippet(config);
        }
    }
    else {
        const projectPath = path.join(process.cwd(), config.name);
        // Create project directory
        await fs.ensureDir(projectPath);
        if (config.framework === 'react') {
            await generateReactProject(projectPath, config);
        }
        else {
            await generateVanillaProject(projectPath, config);
        }
        console.log(chalk.green('\n✅ Project created successfully!\n'));
        console.log(chalk.yellow('Next steps:'));
        console.log(`  cd ${config.name}`);
        console.log('  npm install');
        if (config.framework === 'react') {
            console.log('  npm start');
        }
        else {
            console.log('  npm run serve');
        }
        console.log('\n🎉 Your PayPal integration is ready!');
    }
}
async function generateReactProject(projectPath, config) {
    // Create package.json
    const packageJson = {
        name: config.name,
        version: "1.0.0",
        description: "PayPal integration with Breezi",
        scripts: {
            start: "react-scripts start",
            build: "react-scripts build",
            test: "react-scripts test",
            eject: "react-scripts eject"
        },
        dependencies: {
            "breezi-react": "^1.0.0",
            "react": "^18.2.0",
            "react-dom": "^18.2.0",
            "react-scripts": "5.0.1"
        },
        devDependencies: {
            "@types/react": "^18.2.39",
            "@types/react-dom": "^18.2.17"
        },
        browserslist: {
            production: [">0.2%", "not dead", "not op_mini all"],
            development: ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
        }
    };
    await fs.writeJSON(path.join(projectPath, 'package.json'), packageJson, { spaces: 2 });
    // Create .env file
    const envContent = `REACT_APP_PAYPAL_CLIENT_ID=${config.paypalClientId}`;
    await fs.writeFile(path.join(projectPath, '.env'), envContent);
    // Create React App.js
    const appContent = `import React from 'react';
import { BreeziPayPal } from 'breezi-react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>🚀 Breezi PayPal Integration</h1>
        <p>Your payment integration is ready!</p>
        <BreeziPayPal
          clientId={process.env.REACT_APP_PAYPAL_CLIENT_ID}
          amount="10.00"
          currency="USD"
          onSuccess={(details) => {
            console.log('Payment successful:', details);
            alert('Payment successful! Check console for details.');
          }}
          onError={(error) => {
            console.error('Payment error:', error);
            alert('Payment failed. Check console for details.');
          }}
        />
      </header>
    </div>
  );
}

export default App;`;
    await fs.writeFile(path.join(projectPath, 'App.js'), appContent);
    // Create index.js
    const indexContent = `import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);`;
    await fs.writeFile(path.join(projectPath, 'index.js'), indexContent);
    // Create basic CSS
    const cssContent = `.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}`;
    await fs.writeFile(path.join(projectPath, 'App.css'), cssContent);
    // Create public/index.html
    await fs.ensureDir(path.join(projectPath, 'public'));
    const htmlContent = `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Breezi PayPal App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>`;
    await fs.writeFile(path.join(projectPath, 'public', 'index.html'), htmlContent);
}
async function generateVanillaProject(projectPath, config) {
    // Create package.json
    const packageJson = {
        name: config.name,
        version: "1.0.0",
        description: "PayPal integration with Breezi",
        scripts: {
            serve: "python3 -m http.server 8000",
            "serve-node": "npx http-server ."
        },
        dependencies: {
            "breezi-js": "^1.0.0"
        }
    };
    await fs.writeJSON(path.join(projectPath, 'package.json'), packageJson, { spaces: 2 });
    // Create index.html
    const htmlContent = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Breezi PayPal Integration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }
        .container {
            background: #f5f5f5;
            padding: 40px;
            border-radius: 10px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 Breezi PayPal Integration</h1>
        <p>Your payment integration is ready!</p>
        
        <!-- Breezi PayPal Widget will be automatically initialized here -->
        <div 
            data-breezi-paypal
            data-client-id="${config.paypalClientId}"
            data-amount="10.00"
            data-currency="USD">
        </div>
    </div>

    <!-- Include Breezi JS SDK -->
    <script src="node_modules/breezi-js/dist/widget.js"></script>
</body>
</html>`;
    await fs.writeFile(path.join(projectPath, 'index.html'), htmlContent);
    // Create .env file
    const envContent = `PAYPAL_CLIENT_ID=${config.paypalClientId}`;
    await fs.writeFile(path.join(projectPath, '.env'), envContent);
}
async function generateReactSnippet(config) {
    console.log(chalk.green('\n✅ React PayPal Integration Code Generated!\n'));
    console.log(chalk.cyan('📦 1. Install the Breezi React package:'));
    console.log(chalk.white('npm install breezi-react\n'));
    console.log(chalk.cyan('⚙️ 2. Add to your .env file:'));
    console.log(chalk.gray(`REACT_APP_PAYPAL_CLIENT_ID=${config.paypalClientId}\n`));
    console.log(chalk.cyan('📋 3. Add this component to your React app:'));
    console.log(chalk.gray(`import { BreeziPayPal } from 'breezi-react';

function PaymentButton() {
  return (
    <BreeziPayPal
      clientId={process.env.REACT_APP_PAYPAL_CLIENT_ID}
      amount="10.00"
      currency="USD"
      environment="sandbox"
      onSuccess={(payment) => {
        console.log('Payment successful:', payment);
        alert('Payment successful!');
      }}
      onError={(error) => {
        console.error('Payment error:', error);
        alert('Payment failed.');
      }}
      onCancel={() => {
        console.log('Payment cancelled');
      }}
    />
  );
}

export default PaymentButton;`));
    console.log(chalk.cyan('\n🎨 4. Optional: Customize the button:'));
    console.log(chalk.gray(`<BreeziPayPal
  amount="29.99"
  currency="EUR"
  theme={{
    color: 'gold',
    shape: 'pill',
    label: 'buynow'
  }}
  style={{ margin: '20px' }}
/>`));
    console.log(chalk.yellow('\n💡 Next steps:'));
    console.log('• Import and use <PaymentButton /> in your app');
    console.log('• Restart your development server');
    console.log('• Test with PayPal sandbox accounts');
    console.log('• Change environment to "production" when ready');
    console.log('\n🎉 PayPal integration ready to add to your app!');
}
async function generateVanillaSnippet(config) {
    console.log(chalk.green('\n✅ Vanilla JS PayPal Integration Code Generated!\n'));
    console.log(chalk.cyan('📦 1. Install the Breezi JS package:'));
    console.log(chalk.white('npm install breezi-js\n'));
    console.log(chalk.cyan('📋 2. Add this HTML to your page:'));
    console.log(chalk.gray(`<!-- Include the Breezi SDK -->
<script src="node_modules/breezi-js/dist/sdk.js"></script>

<!-- Add the PayPal widget -->
<div 
  data-breezi-paypal
  data-client-id="${config.paypalClientId}"
  data-amount="10.00"
  data-currency="USD"
  data-environment="sandbox"
  data-on-success="handlePaymentSuccess"
  data-on-error="handlePaymentError"
  data-on-cancel="handlePaymentCancel">
</div>`));
    console.log(chalk.cyan('\n⚙️ 3. Add these JavaScript handlers:'));
    console.log(chalk.gray(`<script>
function handlePaymentSuccess(payment) {
  console.log('Payment successful:', payment);
  alert('Payment successful!');
  // Redirect or update UI
}

function handlePaymentError(error) {
  console.error('Payment error:', error);
  alert('Payment failed.');
}

function handlePaymentCancel() {
  console.log('Payment cancelled');
  alert('Payment was cancelled.');
}
</script>`));
    console.log(chalk.cyan('\n🎨 4. Optional: Customize with CSS:'));
    console.log(chalk.gray(`<style>
.breezi-paypal-container {
  margin: 20px;
  text-align: center;
}
</style>`));
    console.log(chalk.cyan('\n🔄 5. Alternative: Use event listeners:'));
    console.log(chalk.gray(`<script>
document.addEventListener('breezi:payment:success', function(event) {
  console.log('Payment successful:', event.detail);
});

document.addEventListener('breezi:payment:error', function(event) {
  console.error('Payment error:', event.detail);
});
</script>`));
    console.log(chalk.yellow('\n💡 Next steps:'));
    console.log('• Add the HTML code to your existing page');
    console.log('• Include the JavaScript handlers');
    console.log('• Test with PayPal sandbox accounts');
    console.log('• Change data-environment to "production" when ready');
    console.log('\n🎉 PayPal integration ready to add to your website!');
}
// Run if this is the main module
// Always run main() when CLI is executed
main().catch(console.error);