x-flux

A powerful, production-ready React package for managing effective document collection flows, visa questionnaires, travellers, and applications.

Installation

npm install @smvtech/x-flux

Note: When you install this package, axios will be automatically installed as a dependency. You don't need to install it separately.

Peer Dependencies

These must be installed in your project:

• react ^18.0.0
• react-dom ^18.0.0
• zod ^3.21.0

Quick Start

1. Initialize with Config

import { initializeEDCFlow, EDCFlowProvider, useEDCFlow } from '@smvtech/x-flux';

// Initialize once in your app (usually in App.tsx or index.tsx)
initializeEDCFlow({
  baseUrls: {
    STAG: 'https://api-staging.example.com',
    PROD: 'https://api.example.com',
    LOCAL: 'https://api-dev.example.com'
  },
  environment: 'PROD', // or 'STAG' or 'LOCAL'
  jwtToken: 'your-jwt-token-here'
});

2. Use the Provider

function App() {
  return (
    <EDCFlowProvider orderId="your-order-id">
      <YourComponent />
    </EDCFlowProvider>
  );
}

3. Use the Hook

function YourComponent() {
  const {
    applicants,
    loading,
    error,
    addApplicant,
    updateAnswer,
    updateTraveller,
    deleteApplicant
  } = useEDCFlow();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {Object.values(applicants).map(applicant => (
        <div key={applicant.application_id}>
          <h3>{applicant.traveller.first_name}</h3>
        </div>
      ))}
    </div>
  );
}

Configuration

Each project passes its own config:

interface EDCConfig {
  baseUrls: {
    STAG: string;
    PROD: string;
    LOCAL: string;
  };
  environment: 'PROD' | 'STAG' | 'LOCAL';
  jwtToken: string;
}

API

initializeEDCFlow(config: EDCConfig)

Initialize the package. Call once before using EDCFlowProvider.

EDCFlowProvider

Props:

• orderId: string - The order ID to manage
• children: ReactNode

useEDCFlow()

Returns:

• orderId, order, questionnaire, applicants
• loading, error, success
• addApplicant, updateAnswer, updateTraveller, deleteApplicant
• refreshApplicant, refreshOrder

License

Private - Internal use only