cwa-test.tsx

Go to the documentation of this file.

'use client';
 
import { useState } from 'react';
import { cwaApi, setCWAApiKey } from '@/lib/cwa-gnap-api';
 
export default function CWATestPage() {
  const [apiKey, setApiKey] = useState('');
  const [results, setResults] = useState<Record<string, any>>({});
  const [loading, setLoading] = useState<Record<string, boolean>>({});
 
  const handleSetApiKey = () => {
    setCWAApiKey(apiKey);
    alert('API Key set successfully');
  };
 
  const testEndpoint = async (name: string, apiCall: () => Promise<any>) => {
    setLoading(prev => ({ ...prev, [name]: true }));
    try {
      const result = await apiCall();
      setResults(prev => ({ ...prev, [name]: result }));
    } catch (error) {
      setResults(prev => ({ 
        ...prev, 
        [name]: { error: error instanceof Error ? error.message : 'Unknown error' }
      }));
    }
    setLoading(prev => ({ ...prev, [name]: false }));
  };
 
  return (
    <div className="min-h-screen bg-bg p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-text mb-8">
          CWA GNAP API Test Dashboard
        </h1>
 
        {/* API Key Section */}
        <div className="bg-surface p-6 rounded-lg shadow-md mb-8">
          <h2 className="text-xl font-semibold mb-4">Authentication</h2>
          <div className="flex gap-4">
            <input
              type="text"
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              placeholder="Enter FieldpineApiKey (e.g., degviwnlnOGCoiZC8NE27LWFkl2VOVZkSghvZe2M7W)"
              className="flex-1 p-2 border border-border rounded"
            />
            <button
              onClick={handleSetApiKey}
              className="px-4 py-2 bg-brand text-white rounded hover:bg-brand"
            >
              Set API Key
            </button>
          </div>
          <p className="text-sm text-muted mt-2">
            Use the FieldpineApiKey cookie value from your browser when authenticated to CWA
          </p>
        </div>
 
        {/* Test Endpoints Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          {/* Locations */}
          <div className="bg-surface p-4 rounded-lg shadow">
            <h3 className="font-semibold mb-2">Locations</h3>
            <button
              onClick={() => testEndpoint('locations', () => cwaApi.getLocations())}
              disabled={loading.locations}
              className="w-full p-2 bg-success text-white rounded hover:bg-green-600 disabled:opacity-50"
            >
              {loading.locations ? 'Loading...' : 'Get Locations'}
            </button>
          </div>
 
          {/* Stats Today */}
          <div className="bg-surface p-4 rounded-lg shadow">
            <h3 className="font-semibold mb-2">Today's Stats</h3>
            <button
              onClick={() => testEndpoint('stats', () => cwaApi.getStatsToday())}
              disabled={loading.stats}
              className="w-full p-2 bg-brand text-white rounded hover:bg-brand disabled:opacity-50"
            >
              {loading.stats ? 'Loading...' : 'Get Stats'}
            </button>
          </div>
 
          {/* Sales Totals */}
          <div className="bg-surface p-4 rounded-lg shadow">
            <h3 className="font-semibold mb-2">Sales Totals</h3>
            <button
              onClick={() => testEndpoint('sales', () => cwaApi.getSalesTotals({
                field13: 120,
                field7: 101,
                field9: 'f110,4,month-0'
              }))}
              disabled={loading.sales}
              className="w-full p-2 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:opacity-50"
            >
              {loading.sales ? 'Loading...' : 'Get Sales'}
            </button>
          </div>
 
          {/* Server Status */}
          <div className="bg-surface p-4 rounded-lg shadow">
            <h3 className="font-semibold mb-2">Server Status</h3>
            <button
              onClick={() => testEndpoint('status', () => cwaApi.getServerStatus())}
              disabled={loading.status}
              className="w-full p-2 bg-danger text-white rounded hover:bg-red-600 disabled:opacity-50"
            >
              {loading.status ? 'Loading...' : 'Get Status'}
            </button>
          </div>
 
          {/* User Interface */}
          <div className="bg-surface p-4 rounded-lg shadow">
            <h3 className="font-semibold mb-2">UI Components</h3>
            <button
              onClick={() => testEndpoint('ui', () => cwaApi.getUserInterface('sshome'))}
              disabled={loading.ui}
              className="w-full p-2 bg-warn text-white rounded hover:bg-yellow-600 disabled:opacity-50"
            >
              {loading.ui ? 'Loading...' : 'Get UI'}
            </button>
          </div>
 
          {/* Retail Config */}
          <div className="bg-surface p-4 rounded-lg shadow">
            <h3 className="font-semibold mb-2">Retail Config</h3>
            <button
              onClick={() => testEndpoint('config', () => cwaApi.getRetailConfig())}
              disabled={loading.config}
              className="w-full p-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 disabled:opacity-50"
            >
              {loading.config ? 'Loading...' : 'Get Config'}
            </button>
          </div>
        </div>
 
        {/* Results Section */}
        <div className="bg-surface p-6 rounded-lg shadow">
          <h2 className="text-xl font-semibold mb-4">API Responses</h2>
          
          {Object.keys(results).length === 0 ? (
            <p className="text-muted">No API calls made yet. Click a button above to test an endpoint.</p>
          ) : (
            <div className="space-y-4">
              {Object.entries(results).map(([name, result]) => (
                <div key={name} className="border border-border rounded p-4">
                  <h3 className="font-semibold text-lg mb-2 capitalize">{name}</h3>
                  <pre className="bg-surface-2 p-3 rounded text-sm overflow-x-auto">
                    {JSON.stringify(result, null, 2)}
                  </pre>
                </div>
              ))}
            </div>
          )}
        </div>
 
        {/* Information Section */}
        <div className="mt-8 bg-info/10 p-6 rounded-lg">
          <h2 className="text-xl font-semibold mb-4">API Information</h2>
          <div className="space-y-2 text-sm">
            <p><strong>Base URL:</strong> https://iig.cwanz.online/GNAP/j</p>
            <p><strong>Authentication:</strong> FieldpineApiKey cookie</p>
            <p><strong>Request Method:</strong> GET</p>
            <p><strong>BUCK Pattern:</strong> /BUCK?3=retailmax.elink.*</p>
          </div>
          
          <div className="mt-4">
            <h3 className="font-semibold mb-2">Discovered Endpoints:</h3>
            <ul className="text-sm text-text space-y-1">
              <li>• BUCK?3=retailmax.elink.locations&101=1</li>
              <li>• buck?3=retailmax.elink.stats.today</li>
              <li>• buck?3=retailmax.elink.sale.totals&13=120&7=101&9=f110,4,month-0</li>
              <li>• buck?3=retailmax.elink.userinterface&100=sshome</li>
              <li>• buck?3=gds.server.status</li>
              <li>• membership?id=cartridgeworld</li>
              <li>• products?99=7</li>
              <li>• locations</li>
              <li>• RetailConfig</li>
              <li>• echo.js</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}