@toutix/whitelabel/README.md

Toutix whitelabel React container components

---

# Event Listing Component

The `EventListPageContainer` component provides a complete event listing solution with built-in filtering, search, pagination, and responsive design.
It automatically handles data fetching and state management using the **Toutix Whitelabel SDK**.

---

## Frontend Integration

### Folder Structure

```
app/
└── events/
    ├── EventListClient.jsx  # Client component
    └── page.jsx             # Main /events route
```

---

### Install

```bash
npm install @toutix/whitelabel
```

---

### Run

```bash
npm run dev
```

Visit [http://localhost:3000/events](http://localhost:3000/events)
You’ll see the Toutix event listing embedded into your site.

---

## Next.js Integration

This example shows how to integrate Toutix Event List in a Next.js application:

* Create the client component with SDK initialization
* Create the page route to render the component
* Handle loading states during initialization
* Access at `/events` route in your Next.js app

---

### Create `EventListClient.jsx`

This component initializes the whitelabel SDK and renders the event list.

```jsx
"use client";

import React, { useEffect, useState } from 'react';
import { EventListPageContainer, initWhiteLabel } from '@toutix/whitelabel';
import '@toutix/whitelabel/dist/index.css';

export default function EventListClient() {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    initWhiteLabel({
      baseUrl: '<YOUR_BASE_URL>',
      whiteLabelToken: '<YOUR_WHITELABEL_TOKEN>',
      stripePublicKey: '<YOUR_STRIPE_PUBLIC_KEY>',
      googleMapsApiKey: '<YOUR_GOOGLE_MAPS_API_KEY>',
    });

    setIsLoaded(true);
  }, []);

  if (!isLoaded) return <div>Loading events...</div>;
  return <EventListPageContainer />;
}
```

---

### Create `page.jsx`

This links your route `/events` to the component above.

```jsx
import EventListClient from "./EventListClient";

export default function Page() {
  return <EventListClient />;
}
```

---

## `initWhiteLabel()` Options

| Option               | Description                                                                                                  |
| -------------------- | ------------------------------------------------------------------------------------------------------------ |
| **baseUrl**          | Base API URL of your Toutix environment or backend (e.g., [https://api.toutix.com](https://api.toutix.com)). |
| **whiteLabelToken**  | Token returned from the Toutix initialize API; identifies your tenant.                                       |
| **stripePublicKey**  | Your public Stripe key for checkout and payments.                                                            |
| **googleMapsApiKey** | Google Maps key used to enable location and map components.                                                  |

---

## Best Practices

> **Always call the initialize API on your backend — never expose your private key to the frontend.**

* Pass only the **whiteLabelToken** to the client when calling `initWhiteLabel()`.
* Test the integration in a staging environment first.
* Include error handling for network requests and token initialization.
* Implement loading states while the SDK initializes.
* Ensure your Stripe and Google Maps API keys are valid and properly configured.

---

# Single Event Page

The **Single Event Page** dynamically loads and displays event details using the `SingleEventPageContainer` from the Toutix SDK.
It initializes the SDK and fetches specific event data based on the URL parameter.

---

## Frontend Integration

### Folder Structure

```
app/
└── events/
    └── [id]/
        ├── SingleEventClient.jsx  # Client component
        └── page.jsx               # Dynamic route
```

---

### Install

```bash
npm install @toutix/whitelabel
```

---

### Run

```bash
npm run dev
```

Visit [http://localhost:3000/events/eventId](http://localhost:3000/events/eventId)
You’ll see the Toutix single event page embedded into your site.

---

## Next.js Integration

This example shows how to integrate Toutix Single Event Page in a Next.js application:

* Create dynamic route with `[id]` parameter
* Create client component with SDK initialization
* Pass `eventId` from URL params to component
* Handle loading states during initialization
* Access at `/events/[id]` route in your Next.js app

---

### Create `SingleEventClient.jsx`

This component initializes the whitelabel SDK and renders the single event page.

```jsx
"use client";

import React, { useEffect, useState } from 'react';
import { SingleEventPageContainer, initWhiteLabel } from '@toutix/whitelabel';
import '@toutix/whitelabel/dist/index.css';

export default function SingleEventClient({ eventId }) {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    initWhiteLabel({
      baseUrl: '<YOUR_BASE_URL>',
      whiteLabelToken: '<YOUR_WHITELABEL_TOKEN>',
      stripePublicKey: '<YOUR_STRIPE_PUBLIC_KEY>',
      googleMapsApiKey: '<YOUR_GOOGLE_MAPS_API_KEY>',
    });
    setIsLoading(true);
  }, []);

  if (!isLoading) return <div>Loading event...</div>;

  return <SingleEventPageContainer eventId={eventId} />;
}
```

---

### Create `page.jsx`

This links your route `/events/[id]` to the component above.

```jsx
import SingleEventClient from './SingleEventClient';

export default function Page({ params }) {
  return <SingleEventClient eventId={params.id} />;
}
```

---

## Folder Structure

Create the following folder structure in your Next.js project:

```
app/
└── events/
    └── [id]/
        ├── page.jsx               # Dynamic route file (/events/[id])
        └── SingleEventClient.jsx  # Client component initializing Toutix
```

The page will be accessible at **host/events/[id]**
(e.g., [http://localhost:3000/events/123](http://localhost:3000/events/123))

---

## How It Works

1. User visits `/events/[id]` (e.g., `/events/123`).
2. `SingleEventClient` runs in the browser and initializes Toutix with your keys.
3. `SingleEventPageContainer` automatically fetches and displays that specific event’s details.

---

## Best Practices

* 🗝 **Keep all keys and tokens in environment variables** (`.env.local`) instead of hardcoding them.
* 🔁 Use the same `whiteLabelToken` creation flow described in the Event Listing setup (`/whitelabel/api-keys/initialize`).
* ⚙️ This setup works seamlessly with **Next.js 13+ and 14+ App Router**.

---

# Payment Success Component

The **PaymentSuccess** component confirms successful payments using the Toutix Whitelabel SDK.
It reads payment details from the URL and renders a confirmation interface powered by `PaymentSuccessPageContainer`.

---

## Frontend Integration

### Folder Structure

```
app/
└── payment-success/
    ├── PaymentSuccessClient.jsx  # Client component
    └── page.jsx                  # Main route
```

---

### Install

```bash
npm install @toutix/whitelabel
```

---

### Run

```bash
npm run dev
```

Visit [http://localhost:3000/payment-success](http://localhost:3000/payment-success)
You’ll see the Toutix payment success page embedded into your site.

---

## Next.js Integration

This example shows how to integrate Toutix Payment Success Page in a Next.js application:

* Create `payment-success` route
* Create client component with SDK initialization
* Extract payment parameters from URL search params
* Handle loading states during initialization
* Access at `/payment-success` route in your Next.js app

---

### Create `PaymentSuccessClient.jsx`

This component initializes the whitelabel SDK and renders the payment success page.

```jsx
"use client";

import React, { useEffect, useState } from 'react';
import { PaymentSuccessPageContainer, initWhiteLabel } from '@toutix/whitelabel';
import { useSearchParams } from 'next/navigation';
import '@toutix/whitelabel/dist/index.css';

export default function PaymentSuccessClient() {
  const [isLoaded, setIsLoaded] = useState(false);
  const searchParams = useSearchParams();

  useEffect(() => {
    initWhiteLabel({
      baseUrl: '<YOUR_BASE_URL>',
      whiteLabelToken: '<YOUR_WHITELABEL_TOKEN>',
      stripePublicKey: '<YOUR_STRIPE_PUBLIC_KEY>',
      googleMapsApiKey: '<YOUR_GOOGLE_MAPS_API_KEY>',
    });
    setIsLoaded(true);
  }, []);

  if (!isLoaded) return <div>Loading payment success...</div>;

  const paymentIntent = searchParams.get('payment_intent') || '';
  const paymentRecordId = searchParams.get('payment_record_id') || '';

  return (
    <PaymentSuccessPageContainer
      paymentIntent={paymentIntent}
      paymentRecordId={paymentRecordId}
    />
  );
}
```

---

### Create `page.jsx`

This links your route `/payment-success` to the component above.

```jsx
import PaymentSuccessClient from './PaymentSuccessClient';

export default function Page() {
  return <PaymentSuccessClient />;
}
```

---

## Folder Structure

Create the following folder structure in your Next.js project:

```
app/
└── payment-success/
    ├── page.jsx                  # Main route file (/payment-success)
    └── PaymentSuccessClient.jsx  # Client component for initializing Toutix
```

The page will be accessible at **host/payment-success**
(e.g., [http://localhost:3000/payment-success](http://localhost:3000/payment-success))

---

## How It Works

1. User completes checkout and is redirected to `/payment-success`.
   Example:

   ```
   /payment-success?payment_intent=pi_12345&payment_record_id=rec_6789
   ```
2. `PaymentSuccess` component reads `payment_intent` and `payment_record_id` from the URL parameters.
3. `initWhiteLabel()` sets up the Toutix SDK.
4. `PaymentSuccessPageContainer` fetches and displays the payment confirmation details.

---

## Best Practices

* 🔐 Always keep your keys and tokens in **environment variables** (`.env.local`).
* 💳 `paymentIntent` and `paymentRecordId` are automatically passed from Stripe/Toutix after payment.
* ⚙️ Works with **Next.js 13+ / 14+ App Router**.
* 🎨 You can customize your loading state or container class if needed.

---