mecha-pay 1.0.0

package/README.md

@@ -0,0 +1,201 @@
+# Mecha-Pay Pricing Table
+
+A beautiful, responsive React component for displaying Mecha-Pay pricing plans. **TypeScript supported!**
+
+## Installation
+
+```bash
+npm install mecha-pay
+```
+
+## Usage
+
+Simply provide three required props: `apiKey`, `planId`, and `userId`. That's it!
+
+```jsx
+import React from 'react';
+import { PricingTable } from 'mecha-pay';
+
+const App = () => {
+  const userId = "user_12345"; // Get from your auth system
+
+  return (
+    <PricingTable 
+      apiKey="mp_live_your_api_key_here"
+      planId="0xefdc..."
+      userId={userId}
+    />
+  );
+};
+
+export default App;
+```
+
+### TypeScript
+
+```tsx
+import React from 'react';
+import { PricingTable } from 'mecha-pay';
+
+const App: React.FC = () => {
+  const userId = "user_12345";
+
+  return (
+    <PricingTable 
+      apiKey="mp_live_your_api_key_here"
+      planId="0xefdc..."
+      userId={userId}
+    />
+  );
+};
+
+export default App;
+```
+
+### With Error Handling
+
+```jsx
+<PricingTable 
+  apiKey="mp_live_your_api_key_here"
+  planId="0xefdc..."
+  userId={userId}
+  onError={(error) => {
+    console.error('Failed to load plan:', error);
+    // Handle error (e.g., show notification)
+  }}
+/>
+```
+
+### Next.js Example
+
+```jsx
+import { PricingTable } from 'mecha-pay';
+import { useUser } from '@/hooks/useAuth';
+
+export default function PricingPage() {
+  const { userId } = useUser();
+
+  return (
+    <PricingTable 
+      apiKey={process.env.NEXT_PUBLIC_MECHAPAY_API_KEY}
+      planId="0xefdc..."
+      userId={userId}
+    />
+  );
+}
+```
+
+### TypeScript
+
+```tsx
+import React from 'react';
+import { PricingTable } from 'mecha-pay';
+
+const App: React.FC = () => {
+  return (
+    <PricingTable 
+      apiKey="mp_live_your_api_key_here"
+      onError={(error) => console.error(error)}
+    />
+  );
+};
+```
+
+## How It Works
+
+1. **Provide 3 Required Props:**
+   - `apiKey` - Your Mecha-Pay API key
+   - `planId` - The plan ID to display
+   - `userId` - Current user's ID
+
+2. **Component Automatically:**
+   - Fetches plan details from `http://localhost:3000/api/v1/plans/{planId}`
+   - Displays pricing card with features
+   - Generates payment link: `http://localhost:3000/pay/{planId}?userId={userId}&successUrl={currentURL}`
+
+3. **User Clicks "Subscribe Now":**
+   - Redirected to: `http://localhost:3000/pay/0xefdc...?userId=user_12345&successUrl=https://yoursite.com`
+
+## API
+
+### Required Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| apiKey | `string` | Your Mecha-Pay API key (e.g., `"mp_live_..."`) |
+| planId | `string` | The plan ID to fetch (e.g., `"0xefdc..."`) |
+| userId | `string` | User ID for payment link generation |
+
+### Optional Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| onError | `(error: Error) => void` | Error callback function |
+
+## TypeScript Types
+
+```typescript
+interface Feature {
+  title: string;
+  description?: string;
+}
+
+interface PlanMetadata {
+  name: string;
+  description: string;
+  features: Feature[];
+}
+
+interface Plan {
+  planId: string;
+  price: string;
+  duration: string;
+  metadata: PlanMetadata;
+  // activeSubscribers is returned by API but not used by component
+}
+```
+
+## API Response Structure
+
+The component fetches from `http://localhost:3000/api/v1/plans/{planId}` with response:
+
+```json
+{
+  "planId": "0xefdc...",
+  "price": "5000000",
+  "duration": "2592000",
+  "metadata": {
+    "name": "Pro Merchant",
+    "description": "Premium subscription plan",
+    "features": [
+      { "title": "Analytics", "description": "Full dashboard access" }
+    ]
+  },
+  "activeSubscribers": [...] // Ignored by component
+}
+```
+
+## Features
+
+- 🎨 Beautiful gradient design
+- 📱 Fully responsive
+- ⚡ **Zero configuration** - just 3 props!
+- 🔄 Automatic loading and error states
+- 🔗 Auto-generated payment links to `localhost:3000`
+- 💎 **TypeScript support** with full type definitions
+- ⚙️ **Next.js compatible**
+- ♿ Accessible
+- 🎯 Easy to customize
+
+## Customization
+
+The component uses CSS modules that can be overridden. Import your custom styles after the component:
+
+```jsx
+import { PricingTable } from 'mecha-pay';
+import './my-custom-styles.css';
+```
+
+## License
+
+ISC

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "mecha-pay",
+  "version": "1.0.0",
+  "description": "A beautiful, responsive React pricing table component for Web3 applications",
+  "homepage": "https://github.com/Frank2006x/Mecha-pay#readme",
+  "bugs": {
+    "url": "https://github.com/Frank2006x/Mecha-pay/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Frank2006x/Mecha-pay.git"
+  },
+  "license": "ISC",
+  "author": "",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "types": "src/index.d.ts",
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "pricing",
+    "pricing-table",
+    "web3",
+    "component",
+    "subscription",
+    "plans",
+    "typescript"
+  ],
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "axios": "^1.6.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/PricingTable.css

@@ -0,0 +1,229 @@
+.pricing-table-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  padding: 2rem;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.pricing-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 1rem;
+  padding: 2rem;
+  min-width: 280px;
+  max-width: 350px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  color: white;
+}
+
+.pricing-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.pricing-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.pricing-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+  color: white;
+}
+
+.pricing-description {
+  font-size: 0.95rem;
+  opacity: 0.9;
+  margin: 0;
+}
+
+.pricing-price {
+  text-align: center;
+  margin-bottom: 2rem;
+  padding: 1.5rem 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.price-amount {
+  font-size: 3rem;
+  font-weight: 700;
+  display: block;
+  line-height: 1;
+}
+
+.price-duration {
+  font-size: 1rem;
+  opacity: 0.8;
+  margin-top: 0.5rem;
+  display: block;
+}
+
+.pricing-features {
+  flex-grow: 1;
+  margin-bottom: 2rem;
+}
+
+.features-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0 0 1rem 0;
+  color: white;
+}
+
+.features-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.feature-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
+  transition: background 0.2s ease;
+}
+
+.feature-item:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.feature-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+}
+
+.feature-content {
+  flex: 1;
+}
+
+.feature-title {
+  display: block;
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.25rem;
+}
+
+.feature-description {
+  font-size: 0.85rem;
+  opacity: 0.85;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.pricing-button {
+  display: block;
+  width: 100%;
+  padding: 1rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  background: white;
+  color: #667eea;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 1rem;
+  text-align: center;
+  text-decoration: none;
+}
+
+.pricing-button:hover {
+  background: #f7f7f7;
+  transform: scale(1.02);
+}
+
+.pricing-button:active {
+  transform: scale(0.98);
+}
+
+.pricing-button-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pricing-button-disabled:hover {
+  transform: none;
+  background: white;
+}
+
+/* Loading, Error, and Empty States */
+.pricing-loading,
+.pricing-error,
+.pricing-empty {
+  text-align: center;
+  padding: 3rem 2rem;
+  font-size: 1.2rem;
+  color: #667eea;
+  width: 100%;
+}
+
+.pricing-error {
+  color: #e53e3e;
+  background: #fff5f5;
+  border-radius: 0.5rem;
+  padding: 2rem;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.error-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.error-message {
+  margin: 0;
+  font-size: 1rem;
+  color: #c53030;
+}
+
+.pricing-empty {
+  color: #718096;
+  font-style: italic;
+}
+
+.pricing-loading {
+  font-weight: 500;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .pricing-table-container {
+    padding: 1rem;
+    gap: 1.5rem;
+  }
+
+  .pricing-card {
+    max-width: 100%;
+  }
+
+  .price-amount {
+    font-size: 2.5rem;
+  }
+}

package/src/PricingTable.d.ts

@@ -0,0 +1,32 @@
+export interface Feature {
+  title: string;
+  description?: string;
+}
+
+export interface PlanMetadata {
+  name: string;
+  description: string;
+  features: Feature[];
+}
+
+export interface Plan {
+  planId: string;
+  price: string;
+  duration: string;
+  metadata: PlanMetadata;
+}
+
+export interface PricingTableProps {
+  /** Your Mecha-Pay API key (required) */
+  apiKey: string;
+  /** The plan ID to fetch and display (required) */
+  planId: string;
+  /** User ID for generating payment links (required) */
+  userId: string;
+  /** Optional error callback function */
+  onError?: (error: Error) => void;
+}
+
+declare const PricingTable: React.FC<PricingTableProps>;
+
+export default PricingTable;

package/src/PricingTable.jsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+import { getPlan } from './api';
+import './PricingTable.css';
+
+const BASE_URL = 'http://localhost:3000';
+
+const PricingTable = ({ apiKey, planId, userId, onError }) => {
+  const [plan, setPlan] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchPlanData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const data = await getPlan(apiKey, planId, BASE_URL);
+        setPlan(data);
+        setLoading(false);
+      } catch (err) {
+        setError(err.message);
+        setLoading(false);
+        if (onError) {
+          onError(err);
+        }
+      }
+    };
+
+    fetchPlanData();
+  }, [apiKey, planId, onError]);
+
+  const generatePaymentLink = () => {
+    const currentURL = typeof window !== 'undefined' ? window.location.origin : '';
+    const params = new URLSearchParams({
+      userId: userId,
+      successUrl: currentURL
+    });
+    return `${BASE_URL}/pay/${planId}?${params.toString()}`;
+  };
+
+  const formatPrice = (price) => {
+    // Convert from wei to a more readable format (assuming 18 decimals)
+    const formatted = (parseInt(price) / 1e18).toFixed(2);
+    return `$${formatted}`;
+  };
+
+  const formatDuration = (seconds) => {
+    const days = Math.floor(seconds / 86400);
+    if (days >= 30) {
+      const months = Math.floor(days / 30);
+      return `${months} ${months === 1 ? 'month' : 'months'}`;
+    }
+    return `${days} ${days === 1 ? 'day' : 'days'}`;
+  };
+
+  if (loading) {
+    return (
+      <div className="pricing-table-container">
+        <div className="pricing-loading">Loading plan...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="pricing-table-container">
+        <div className="pricing-error">
+          <span className="error-icon">⚠️</span>
+          <p className="error-message">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!plan) {
+    return (
+      <div className="pricing-table-container">
+        <div className="pricing-empty">No plan found</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pricing-table-container">
+      <div className="pricing-card">
+        <div className="pricing-header">
+          <h2 className="pricing-title">{plan.metadata.name}</h2>
+          <p className="pricing-description">{plan.metadata.description}</p>
+        </div>
+        
+        <div className="pricing-price">
+          <span className="price-amount">{formatPrice(plan.price)}</span>
+          <span className="price-duration">/{formatDuration(plan.duration)}</span>
+        </div>
+
+        <div className="pricing-features">
+          <h3 className="features-title">Features</h3>
+          <ul className="features-list">
+            {plan.metadata.features.map((feature, index) => (
+              <li key={index} className="feature-item">
+                <svg 
+                  className="feature-icon" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                    strokeWidth={2} 
+                    d="M5 13l4 4L19 7" 
+                  />
+                </svg>
+                <div className="feature-content">
+                  <strong className="feature-title">{feature.title}</strong>
+                  {feature.description && (
+                    <p className="feature-description">{feature.description}</p>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <a 
+          href={generatePaymentLink()} 
+          className="pricing-button"
+        >
+          Subscribe Now
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default PricingTable;

package/src/api.d.ts

@@ -0,0 +1,33 @@
+import { AxiosError } from 'axios';
+import { Plan } from './PricingTable';
+
+export interface ApiError {
+  message: string;
+  status?: number;
+}
+
+/**
+ * Fetches a plan from the Mecha-Pay API
+ * @param apiKey - Your Mecha-Pay API key (e.g., "mp_live_...")
+ * @param planId - The plan ID to fetch (e.g., "0xefdc...")
+ * @param baseURL - Optional base URL (defaults to http://localhost:3000)
+ * @returns Promise resolving to the plan data
+ */
+export declare function getPlan(
+  apiKey: string,
+  planId: string,
+  baseURL?: string
+): Promise<Plan>;
+
+/**
+ * Fetches all plans from the Mecha-Pay API
+ * @param apiKey - Your Mecha-Pay API key (e.g., "mp_live_...")
+ * @param baseURL - Optional base URL (defaults to http://localhost:3000)
+ * @returns Promise resolving to array of plans
+ */
+export declare function getPlans(
+  apiKey: string,
+  baseURL?: string
+): Promise<Plan[]>;
+
+export default getPlan;

package/src/api.js

@@ -0,0 +1,61 @@
+import axios from 'axios';
+
+/**
+ * Fetches a plan from the Mecha-Pay API
+ * @param {string} apiKey - Your Mecha-Pay API key (e.g., "mp_live_...")
+ * @param {string} planId - The plan ID to fetch (e.g., "0xefdc...")
+ * @param {string} baseURL - Optional base URL (defaults to http://localhost:3000)
+ * @returns {Promise<Object>} The plan data
+ */
+export const getPlan = async (apiKey, planId, baseURL = 'http://localhost:3000') => {
+  try {
+    const response = await axios.get(`${baseURL}/api/v1/plans/${planId}`, {
+      headers: {
+        'x-api-key': apiKey,
+        'Content-Type': 'application/json'
+      }
+    });
+    
+    return response.data;
+  } catch (error) {
+    if (error.response) {
+      // Server responded with error status
+      throw new Error(`API Error: ${error.response.status} - ${error.response.data.message || error.response.statusText}`);
+    } else if (error.request) {
+      // Request made but no response received
+      throw new Error('Network Error: No response from server');
+    } else {
+      // Something else happened
+      throw new Error(`Request Error: ${error.message}`);
+    }
+  }
+};
+
+/**
+ * Fetches all plans from the Mecha-Pay API
+ * @param {string} apiKey - Your Mecha-Pay API key (e.g., "mp_live_...")
+ * @param {string} baseURL - Optional base URL (defaults to http://localhost:3000)
+ * @returns {Promise<Array>} Array of plans
+ */
+export const getPlans = async (apiKey, baseURL = 'http://localhost:3000') => {
+  try {
+    const response = await axios.get(`${baseURL}/api/v1/plans`, {
+      headers: {
+        'x-api-key': apiKey,
+        'Content-Type': 'application/json'
+      }
+    });
+    
+    return response.data;
+  } catch (error) {
+    if (error.response) {
+      throw new Error(`API Error: ${error.response.status} - ${error.response.data.message || error.response.statusText}`);
+    } else if (error.request) {
+      throw new Error('Network Error: No response from server');
+    } else {
+      throw new Error(`Request Error: ${error.message}`);
+    }
+  }
+};
+
+export default getPlan;

package/src/index.d.ts

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+
+export interface Feature {
+  title: string;
+  description?: string;
+}
+
+export interface PlanMetadata {
+  name: string;
+  description: string;
+  features: Feature[];
+}
+
+export interface Plan {
+  planId: string;
+  price: string;
+  duration: string;
+  metadata: PlanMetadata;
+}
+
+export interface PricingTableProps {
+  /** Your Mecha-Pay API key (required) */
+  apiKey: string;
+  /** The plan ID to fetch and display (required) */
+  planId: string;
+  /** User ID for generating payment links (required) */
+  userId: string;
+  /** Optional error callback function */
+  onError?: (error: Error) => void;
+}
+
+export const PricingTable: FC<PricingTableProps>;
+export default PricingTable;
+
+// API Functions
+export function getPlan(apiKey: string, planId: string, baseURL?: string): Promise<Plan>;
+export function getPlans(apiKey: string, baseURL?: string): Promise<Plan[]>;

package/src/index.js

@@ -0,0 +1,3 @@
+export { default as PricingTable } from './PricingTable.jsx';
+export { default } from './PricingTable.jsx';
+export { getPlan, getPlans } from './api.js';