> ## Documentation Index
> Fetch the complete documentation index at: https://directdoc.hotellinkage.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Loyalty

# Loyalty

Authentication, registration, and profile management components for your loyalty program.

<Note>
  👥 **Component types:** Authentication, registration, profile management | **Benefits:** Exclusive rates, special promotions, member advantages
</Note>

## Components Overview

<CardGroup cols={3}>
  <Card title="Session" icon="user-check" color="#10b981">
    Login/logout interface with member dropdown menu
  </Card>

  <Card title="Signup" icon="user-plus" color="#0ea5e9">
    Registration form for new loyalty members
  </Card>

  <Card title="Profile" icon="user" color="#8b5cf6">
    Member dashboard with info and reservations
  </Card>
</CardGroup>

## Session Component

The `<session>` component handles user authentication with dynamic behavior:

<Tabs>
  <Tab title="Not Authenticated">
    Displays a login button that opens a modal with:

    * Login form
    * Password recovery option
    * Link to registration page
  </Tab>

  <Tab title="Authenticated">
    Shows user's email with dropdown menu containing:

    * Personal information
    * Account settings
    * Reservation list (if applicable)
  </Tab>
</Tabs>

### Basic Implementation

```html theme={null}
<div data-mirai-component="session"></div>
```

### Customization with Ghosting

Customize the component appearance using the ghosting system:

<Accordion title="Basic ghosting example">
  ```html theme={null}
  <div data-mirai-component="session">
    <div data-ghost>
      <span>Login</span>
      <span>Welcome, [firstName]!</span>
    </div>
  </div>
  ```

  The first child = unauthenticated state\
  The second child = authenticated state
</Accordion>

<Accordion title="Advanced ghosting with styling">
  ```html theme={null}
  <div data-mirai-component="session">
    <div data-ghost>
      <button class="login-btn">Member Login</button>
      <div class="user-info">Hello, [firstName] [lastName] ([email])</div>
    </div>
  </div>
  ```
</Accordion>

**Available variables for authenticated state:**

* `[firstName]` - User's first name
* `[lastName]` - User's last name
* `[email]` - User's email address

## Signup Component

The `<signup>` component provides the registration form for new loyalty members.

### Implementation

```html theme={null}
<div data-mirai-component="signup"></div>
```

### Registration Process

<Steps>
  <Step title="User fills form">
    Complete registration on `/create-account` page
  </Step>

  <Step title="Email verification">
    Activation link sent to user's email
  </Step>

  <Step title="Account activation">
    User clicks link and returns to homepage
  </Step>

  <Step title="First login">
    `<session>` component on homepage enables authentication
  </Step>
</Steps>

<Warning>
  The homepage must include `<session>` component to handle account activation and subsequent login.
</Warning>

## Profile Component

The `<profile>` component provides authenticated users with a complete dashboard:

<CardGroup cols={2}>
  <Card title="Personal Information" icon="user-plus">
    * Edit personal details
    * Change password
    * Delete account
  </Card>

  <Card title="My Reservations" icon="calendar-check">
    * View past bookings
    * Check upcoming stays
    * Access booking details
  </Card>
</CardGroup>

### Implementation

```html theme={null}
<div data-mirai-component="profile"></div>
```

## Required Pages

<Table>
  | Page         | URL               | Component   | Purpose                 |
  | ------------ | ----------------- | ----------- | ----------------------- |
  | Homepage     | `/`               | `<session>` | Login/logout interface  |
  | Registration | `/create-account` | `<signup>`  | New member registration |
  | Profile      | `/my-account`     | `<profile>` | Member dashboard        |
</Table>

## Complete Integration Example

<Accordion title="View full loyalty setup">
  ```html theme={null}
  <!-- Homepage (index.html) -->
  <header>
    <div data-mirai-component="session">
      <div data-ghost>
        <button class="nav-login">Login</button>
        <span class="nav-user">Hi, [firstName]!</span>
      </div>
    </div>
  </header>

  <!-- Registration page (/create-account) -->
  <main>
    <h1>Join Our Loyalty Program</h1>
    <div data-mirai-component="signup"></div>
  </main>

  <!-- Profile page (/my-account) -->
  <main>
    <h1>My Account</h1>
    <div data-mirai-component="profile"></div>
  </main>
  ```
</Accordion>

***

<Info>
  💬 **Need help setting up your loyalty program?** Contact us at [support@hotellinkage.com](mailto:support@hotellinkage.com)
</Info>