Card Ordering

const response = await fetch('https://dev.api.baanx.com/v1/card/order', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Client-ID': 'your_client_id',
    'Authorization': `Bearer ${userAccessToken}`
  },
  body: JSON.stringify({
    type: 'VIRTUAL'
  })
});

const result = await response.json();

if (result.success) {
  console.log('Card order accepted and processing');
}

async function waitForCardActivation(clientId, accessToken, maxAttempts = 10) {
  for (let i = 0; i < maxAttempts; i++) {
    const response = await fetch('https://dev.api.baanx.com/v1/card/status', {
      headers: {
        'X-Client-ID': clientId,
        'Authorization': `Bearer ${accessToken}`
      }
    });

    if (response.ok) {
      const card = await response.json();

      if (card.status === 'ACTIVE') {
        return card;
      }

      console.log(`Card status: ${card.status}, waiting...`);
    } else if (response.status === 404) {
      console.log('Card not ready yet...');
    } else {
      throw new Error(`Error checking card status: ${response.status}`);
    }

    // Wait 2 seconds before next check
    await new Promise(resolve => setTimeout(resolve, 2000));
  }

  throw new Error('Card activation timeout');
}

// Usage
try {
  const card = await waitForCardActivation(clientId, accessToken);
  console.log('Card activated:', card);
} catch (error) {
  console.error('Card activation failed:', error);
}

import { useState } from 'react';

export function CardOrderingFlow({ clientId, accessToken }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [card, setCard] = useState(null);

  async function checkPrerequisites() {
    // Check user verification
    const profile = await fetch('/v1/user/profile', {
      headers: {
        'X-Client-ID': clientId,
        'Authorization': `Bearer ${accessToken}`
      }
    });

    const userData = await profile.json();

    if (userData.status !== 'VERIFIED') {
      throw new Error('Please complete identity verification first');
    }

    // Check for existing card
    const statusResponse = await fetch('/v1/card/status', {
      headers: {
        'X-Client-ID': clientId,
        'Authorization': `Bearer ${accessToken}`
      }
    });

    if (statusResponse.ok) {
      const existingCard = await statusResponse.json();
      throw new Error(`You already have a ${existingCard.type} card`);
    }

    // Check for delegated wallets
    const walletsResponse = await fetch('/v1/wallet/external', {
      headers: {
        'X-Client-ID': clientId,
        'Authorization': `Bearer ${accessToken}`
      }
    });

    const wallets = await walletsResponse.json();

    if (wallets.length === 0) {
      console.warn('No delegated wallets - user may need to add funding source');
    }
  }

  async function orderCard() {
    try {
      setLoading(true);
      setError(null);

      // Verify prerequisites
      await checkPrerequisites();

      // Order card
      const orderResponse = await fetch('/v1/card/order', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Client-ID': clientId,
          'Authorization': `Bearer ${accessToken}`
        },
        body: JSON.stringify({ type: 'VIRTUAL' })
      });

      if (!orderResponse.ok) {
        const error = await orderResponse.json();
        throw new Error(error.message || 'Failed to order card');
      }

      // Poll for activation
      const activatedCard = await pollCardStatus();
      setCard(activatedCard);

    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  async function pollCardStatus(maxAttempts = 30) {
    for (let i = 0; i < maxAttempts; i++) {
      const response = await fetch('/v1/card/status', {
        headers: {
          'X-Client-ID': clientId,
          'Authorization': `Bearer ${accessToken}`
        }
      });

      if (response.ok) {
        const cardData = await response.json();
        if (cardData.status === 'ACTIVE') {
          return cardData;
        }
      }

      await new Promise(resolve => setTimeout(resolve, 2000));
    }

    throw new Error('Card activation timeout - please try again later');
  }

  if (card) {
    return (
      <div className="success">
        <h2>Card Activated Successfully!</h2>
        <p>Card ending in {card.panLast4}</p>
        <p>Expires: {card.expiryDate}</p>
        <button onClick={() => {/* Navigate to card details */}}>
          View Card Details
        </button>
      </div>
    );
  }

  return (
    <div className="card-ordering">
      <h2>Order Virtual Card</h2>
      <p>Get instant access to a virtual card for online purchases</p>

      {error && (
        <div className="error">
          {error}
        </div>
      )}

      <button
        onClick={orderCard}
        disabled={loading}
      >
        {loading ? 'Processing...' : 'Order Card'}
      </button>

      {loading && (
        <div className="progress">
          <p>Activating your card...</p>
          <p>This usually takes just a few seconds</p>
        </div>
      )}
    </div>
  );
}