npm package: @gigrewards/gig-client
Description: A lightweight client for interacting with GigRewards API
Author: Your Name
Latest version: 1.0.3

# GIG Client

A lightweight browser-safe JavaScript client for sending events to the [GIG Rewards](https://gigrewards.ph) API.

## Features

- Detects and stores `gigUserId` from the URL.
- Stores credentials securely using `localStorage` or `cookies`.
- Sends event data to gig via a simple `sendGigEvent` method call.

## Installation

You can use the CDN version or install it directly into your frontend project.

### CDN

You can include the client directly from jsDelivr:

```html
<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/gig-client/dist/gig-client.js"></script>

<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/gig-client@1.0.0/dist/gig-client.js"></script>
```
### Using CDN Example

You can use the `gig-client` directly in your HTML file without any build tools.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GIG Client Example</title>
  <script src="https://cdn.jsdelivr.net/npm/gig-client/dist/gig-client.js"></script>
</head>
<body>
  <script>
    // Initialize GIG Client
    GIGClient.initGigKeys({
      apiKey: "your-api-key",
      keyIdentifier: "your-key-identifier",
      sandbox: false, // true for sandbox mode
    });

    // Store gigUserId from URL
    GIGClient.storeGigUserIdFromUrl();

    // Send an event
    async function sendEvent() {
      await GIGClient.sendGigEvent({
        entityUserId: "TEST_ID",
        questCode: "TEST_EVENT",
      });
      console.log("Event sent successfully!");
    }

    // Example usage
    sendEvent();
  </script>
</body>
</html>
```
### NPM

```bash
npm install gig-client
```

## Usage

### Initialize GIG Client

```js
import {
  initGigKeys,
  storeGigUserIdFromUrl,
  sendGigEvent,
} from "gig-client";

initGigKeys({
  apiKey: "your-api-key",
  keyIdentifier: "your-key-identifier",
  sandbox: false, // true for sandbox mode
});
```

> **Note:** The `apiKey` and `keyIdentifier` will be provided by the GIG team upon request.
> Make sure to use the correct credentials based on your environment—Production and Sandbox keys are different.

storeGigUserIdFromUrl(); // Automatically store from URL

### Send Event

> **Note:** `entityUserId` must be a unique identifier for the user from your own system or database.

> **Note:** `questCode` is a unique identifier representing a specific quest in the GIG system.

```js
await sendGigEvent({
  entityUserId: "TEST_ID",
  questCode: "TEST_EVENT",
});
```

### React Example

Here's how you can use `gig-client` inside a React application.

#### Step 1: Initialize GIG Client (e.g., in `App.jsx` or `index.js`)

```js
import { useEffect } from "react";
import {
  initGigKeys,
  storeGigUserIdFromUrl,
} from "gig-client";

function App() {
  useEffect(() => {
    initGigKeys({
      apiKey: "your-api-key",
      keyIdentifier: "your-key-identifier",
      sandbox: false,
    });

    storeGigUserIdFromUrl();
  }, []);

  return <YourComponent />;
}
```

#### Step 2: Send Event

```js
import { sendGigEvent } from "gig-client";

async function handleClick() {
  await sendGigEvent({
    entityUserId: "TEST_ID",
    questCode: "TEST_EVENT",
  });
}
```

## Helper Methods

- `initGigKeys({ apiKey, keyIdentifier, sandbox })` – Initializes the client.
- `storeGigUserIdFromUrl()` – Stores `gigUserId` from the current page’s URL.
- `getGigUserId()` – Returns the currently stored `gigUserId`.
- `clearGigKeys()` – Clears stored API keys and resets to default.

## Environment

The client will default to **production** unless `sandbox: true` is specified.

## License

MIT