puffin-app/src/api/checkoutClient.ts
Matt 8d9f65868a
All checks were successful
Build and Push Docker Images / docker (push) Successful in 43s
CRITICAL FIX: Lazy evaluate API URLs at request time, not module load time
ROOT CAUSE (Zen Debug Investigation):
The API_BASE_URL constant was being evaluated when the module loaded,
BEFORE window.env was populated by env-config.js. This caused the app
to permanently use the fallback localhost:3001 instead of reading the
production URL from the .env file.

TIMING ISSUE:
1. Browser loads index.html
2. env-config.js loads (creates window.env)
3. main.tsx loads as ES module (DEFERRED)
4. Module imports checkoutClient → const API_BASE_URL executes
5. window.env NOT READY YET → falls back to localhost:3001
6. API_BASE_URL locked to wrong value forever

THE FIX:
Changed from module-level constants to request-time lazy evaluation.
Now getApiBaseUrl() is called WHEN THE API REQUEST HAPPENS, not when
the module loads. At that point window.env is guaranteed to exist.

FILES CHANGED:
- src/api/checkoutClient.ts:
  * Removed constant API_BASE_URL
  * All 3 functions now call getApiBaseUrl() at request time
  * Added logging to show which URL is being used

- src/api/aisClient.ts:
  * Removed constant API_KEY
  * Added getApiKey() function with lazy evaluation
  * Same pattern for consistency and future-proofing

This fixes: "FetchEvent for http://localhost:3001 resulted in network error"
Now uses: https://puffinoffset.com/api (from .env file)

🔒 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-30 12:43:16 +01:00

116 lines
3.3 KiB
TypeScript

import axios from 'axios';
import { logger } from '../utils/logger';
// Get API base URL from runtime config (window.env) or build-time config
// IMPORTANT: Call this function at REQUEST TIME, not at module load time,
// to ensure window.env is populated by env-config.js
const getApiBaseUrl = (): string => {
// Check window.env first (runtime config from env.sh)
if (typeof window !== 'undefined' && window.env?.API_BASE_URL) {
return window.env.API_BASE_URL;
}
// Fall back to build-time env or default
return import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001';
};
export interface CreateCheckoutSessionParams {
tons: number;
portfolioId: number;
customerEmail?: string;
}
export interface CheckoutSessionResponse {
sessionId: string;
url: string;
orderId: string;
}
export interface OrderDetails {
order: {
id: string;
tons: number;
portfolioId: number;
baseAmount: number;
processingFee: number;
totalAmount: number;
currency: string;
status: string;
wrenOrderId: string | null;
createdAt: string;
};
session: {
paymentStatus: string;
customerEmail?: string;
};
}
/**
* Create a Stripe checkout session
* @param params Checkout session parameters
* @returns Checkout session response with redirect URL
*/
export async function createCheckoutSession(
params: CreateCheckoutSessionParams
): Promise<CheckoutSessionResponse> {
try {
const apiBaseUrl = getApiBaseUrl(); // Lazy evaluate at request time
logger.info('Creating checkout session:', params);
logger.info('Using API base URL:', apiBaseUrl);
const response = await axios.post<CheckoutSessionResponse>(
`${apiBaseUrl}/api/checkout/create-session`,
params
);
logger.info('Checkout session created:', response.data.sessionId);
return response.data;
} catch (error) {
if (axios.isAxiosError(error)) {
logger.error('Checkout session creation failed:', error.response?.data || error.message);
throw new Error(error.response?.data?.message || 'Failed to create checkout session');
}
throw error;
}
}
/**
* Get order details by session ID
* @param sessionId Stripe session ID
* @returns Order details
*/
export async function getOrderDetails(sessionId: string): Promise<OrderDetails> {
try {
const apiBaseUrl = getApiBaseUrl(); // Lazy evaluate at request time
logger.info('Fetching order details for session:', sessionId);
const response = await axios.get<OrderDetails>(
`${apiBaseUrl}/api/checkout/session/${sessionId}`
);
logger.info('Order details retrieved:', response.data.order.id);
return response.data;
} catch (error) {
if (axios.isAxiosError(error)) {
logger.error('Order details retrieval failed:', error.response?.data || error.message);
throw new Error(error.response?.data?.message || 'Failed to retrieve order details');
}
throw error;
}
}
/**
* Health check for backend API
* @returns true if backend is healthy
*/
export async function checkBackendHealth(): Promise<boolean> {
try {
const apiBaseUrl = getApiBaseUrl(); // Lazy evaluate at request time
const response = await axios.get(`${apiBaseUrl}/health`);
return response.data.status === 'ok';
} catch (error) {
logger.error('Backend health check failed:', error);
return false;
}
}