Sir Chargly - Testing & Troubleshooting Guide

# Test with your generated development key
curl -X POST https://api.sirchargly.com/v1/estimates \
  -H "Authorization: Bearer sk_dev_sirchargly_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 10000,
    "currency": "usd",
    "region": "US-CA",
    "cardType": "credit"
  }'

{
  "baseAmount": 10000,
  "convenienceFee": 320,
  "totalAmount": 10320,
  "feeBreakdown": {
    "percentage": 290,
    "flatFee": 30
  },
  "compliant": true,
  "region": "US-CA"
}

curl -X POST https://api.sirchargly.com/v1/estimates \
  -H "Authorization: Bearer sk_dev_sirchargly_invalid" \
  -H "Content-Type: application/json" \
  -d '{"amount": 10000, "currency": "usd"}'

{
  "error": {
    "type": "authentication_error",
    "message": "Invalid API key"
  }
}

# Development key should work with /api/v1 endpoints
curl https://api.sirchargly.com/v1/fee-configs \
  -H "Authorization: Bearer sk_dev_sirchargly_YOUR_KEY"

# Production key should be rejected in dev environment
# (or work but show different data if env switching is enabled)

rm -rf .next
npm run dev

npx tsc --noEmit

# Check .env.local exists
ls -la .env.local

# Verify required variables are set
cat .env.local | grep -E "MONGODB_URI|NEXTAUTH_SECRET"

# Test MongoDB connection
mongo $MONGODB_URI --eval "db.version()"

# Force reload without cache
Mac: Cmd + Shift + R
Windows/Linux: Ctrl + Shift + R

import { Suspense } from 'react';

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <PageContent />
    </Suspense>
  );
}

function PageContent() {
  const searchParams = useSearchParams();
  // ... rest of component
}

// ✅ Correct - use any for session parameter
export async function getMerchantFromSession(
  session: any
): Promise<IMerchant | null> {
  if (!session?.user?.id) {
    return null;
  }
  // ...
}

// ❌ Wrong - importing Session type can cause issues
import { Session } from 'next-auth';
export async function getMerchantFromSession(
  session: Session | null
): Promise<IMerchant | null> {
  // This can cause CSRF validation to fail
}

# Must match your deployment URL exactly
NEXTAUTH_URL=https://sirchargly.com

# Use https in production
# NO trailing slash

// app/dashboard/page.tsx
const session = await auth();

if (!session) {
  redirect('/login'); // ✅ Good
}

const merchant = await getMerchantFromSession(session);

if (!merchant) {
  redirect('/login'); // ✅ Good
}

# Delete all session cookies
# In browser: DevTools → Application → Cookies → Delete All

# Or restart fresh
rm -rf .next
npm run dev

# Format should be:
mongodb://username:password@host:port/database

# For Atlas:
mongodb+srv://username:password@cluster.mongodb.net/database

# Test with mongo CLI
mongo "mongodb://username:password@host:port/database"

// In MongoDB shell or MongoDB Compass
db.merchants.find({ email: "test@example.com" });

db.merchants.deleteOne({ email: "test@example.com" });

npm run db:reset
npm run seed:dev

# Check process
ps aux | grep mongod

# Check port
lsof -i :27017

# Docker
docker restart sirchargly-mongo

# Homebrew (macOS)
brew services restart mongodb-community

# systemd (Linux)
sudo systemctl restart mongod

// lib/mongodb.ts
const options = {
  serverSelectionTimeoutMS: 10000, // 10 seconds
  socketTimeoutMS: 45000, // 45 seconds
};

cat .env.local | grep STRIPE

STRIPE_SECRET_KEY=sk_test_...
STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_CONNECT_CLIENT_ID=ca_...

curl -X POST https://sirchargly.com/api/v1/stripe/connect/oauth-url \
  -H "Content-Type: application/json" \
  -d '{"merchantId": "YOUR_MERCHANT_ID"}' \
  -H "Cookie: your-session-cookie"

# Look for errors like:
# - Invalid client_id
# - Invalid authorization code
# - Code already used

// In MongoDB shell
db.feecharges.getIndexes();
db.merchants.getIndexes();

// Add missing indexes
db.feecharges.createIndex({ merchantId: 1, createdAt: -1 });
db.merchants.createIndex({ email: 1 }, { unique: true });

// lib/mongodb.ts
mongoose.set('debug', true); // Log all queries

// Example: Cache fee config
const cacheKey = `fee-config:${merchantId}`;
let config = await cache.get(cacheKey);

if (!config) {
  config = await FeeConfig.findOne({ merchantId });
  await cache.set(cacheKey, config, 300); // 5 minutes
}

// ❌ Bad - connection not closed
const merchant = await Merchant.findById(id);
// ... do something

// ✅ Good - explicit cleanup
try {
  const merchant = await Merchant.findById(id);
  // ... do something
} finally {
  // Cleanup if needed
}

// Check for errors
console.error('Something went wrong');

// Log API responses
console.log('API response:', await response.json());

// Debug state
console.log('Current state:', { user, session, merchant });

// In API routes
console.log('[DEBUG] Request:', {
  method: request.method,
  url: request.url,
  headers: Object.fromEntries(request.headers),
});

console.log('[DEBUG] Response:', {
  status: response.status,
  data: await response.json(),
});

# Connect to MongoDB
mongo $MONGODB_URI

# Check merchants
db.merchants.find().pretty();

# Check API keys
db.merchants.find({}, { apiKeys: 1, email: 1 }).pretty();

# Check recent charges
db.feecharges.find().sort({ createdAt: -1 }).limit(10).pretty();

## Bug Description
The onboarding wizard crashes at step 4 (Fee Configuration) when adjusting the percentage slider.

## Environment
- OS: macOS 14.1
- Node.js: v18.17.0
- Browser: Chrome 120.0.6099.109

## Steps to Reproduce
1. Complete signup
2. Navigate through steps 1-3
3. On step 4, drag percentage slider to 5%
4. Page crashes with "Cannot read property 'toFixed' of undefined"

## Expected Behavior
Slider should update revenue projection smoothly

## Actual Behavior
Page crashes, console shows error:

## Additional Context
- Happens consistently
- Only with percentage slider, not flat fee slider
- Started after upgrading to Next.js 14.1