> ## Documentation Index
> Fetch the complete documentation index at: https://billing-docs.platform.ai71services.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# useBillingContext

## Overview

The `useBillingContext` hook provides access to the billing context within your application. This context includes various billing-related states and functions that help manage user subscriptions, plans, and modal visibility.

## Import

```javascript theme={null}
import { useBillingContext } from '@locai1/billing-react-sdk';
```

## Usage

### Example

```jsx theme={null}
import React from 'react';
import { useBillingContext } from '@locai1/billing-react-sdk';

const YourComponent = () => {
    const {
        userToken, setUserToken,
        user, setUser,
        selectedPlan, setSelectedPlan,
        plans, customer, setCustomer,
        isMonthly, toggleBillingCycle,
        showUpgradeModal, setShowUpgradeModal,
        showFreeTrialButton, setShowFreeTrialButton,
        isBillingModalOpen, setIsBillingModalOpen,
        showContactModal, setShowContactModal,
        showSuccessModal, setShowSuccessModal,
        closeEntitlementUsageLimitModal, setShowWelcomeModal,
        showWelcomeModal, handleSelectPlan, handleContactUs,
        handleSubmitContactUsForm, closeSuccessModal,
        closeContactModal, closeUpgradeModal,
        closeBillingModal, handleUpgrade,
        handleSuccess, handleTrial,
        subscription, setSubscription,
        showEntitlementLimitModal, setShowEntitlementLimitModal
    } = useBillingContext();

    // Your component logic here
};
```

## Provided Values

The `useBillingContext` hook provides a variety of values and functions. Below is a detailed list along with usage examples for each.

### `userToken`

The authentication token for the user.

```jsx theme={null}
const { userToken } = useBillingContext();
console.log(userToken);
```

### `setUserToken`

Function to set the authentication token for the user.

```jsx theme={null}
const { setUserToken } = useBillingContext();
setUserToken('newToken');
```

### `user`

The user object.

```jsx theme={null}
const { user } = useBillingContext();
console.log(user);
```

### `setUser`

Function to set the user object.

```jsx theme={null}
const { setUser } = useBillingContext();
setUser({ name: 'John Doe' });
```

### `selectedPlan`

The currently selected subscription plan.

```jsx theme={null}
const { selectedPlan } = useBillingContext();
console.log(selectedPlan);
```

### `setSelectedPlan`

Function to set the selected subscription plan.

```jsx theme={null}
const { setSelectedPlan } = useBillingContext();
setSelectedPlan({ name: 'Pro Plan' });
```

### `plans`

An array of available subscription plans.

```jsx theme={null}
const { plans } = useBillingContext();
console.log(plans);
```

### `customer`

The customer object.

```jsx theme={null}
const { customer } = useBillingContext();
console.log(customer);
```

### `setCustomer`

Function to set the customer object.

```jsx theme={null}
const { setCustomer } = useBillingContext();
setCustomer({ name: 'Jane Doe' });
```

### `isMonthly`

Boolean indicating if the billing cycle is monthly.

```jsx theme={null}
const { isMonthly } = useBillingContext();
console.log(isMonthly);
```

### `toggleBillingCycle`

Function to toggle the billing cycle between monthly and yearly.

```jsx theme={null}
const { toggleBillingCycle } = useBillingContext();
toggleBillingCycle(true); // Sets billing cycle to monthly
```

### `showUpgradeModal`

Boolean indicating if the upgrade modal is visible.

```jsx theme={null}
const { showUpgradeModal } = useBillingContext();
console.log(showUpgradeModal);
```

### `setShowUpgradeModal`

Function to set the visibility of the upgrade modal.

```jsx theme={null}
const { setShowUpgradeModal } = useBillingContext();
setShowUpgradeModal(true);
```

### `showFreeTrialButton`

Boolean indicating if the free trial button is visible.

```jsx theme={null}
const { showFreeTrialButton } = useBillingContext();
console.log(showFreeTrialButton);
```

### `setShowFreeTrialButton`

Function to set the visibility of the free trial button.

```jsx theme={null}
const { setShowFreeTrialButton } = useBillingContext();
setShowFreeTrialButton(true);
```

### `isBillingModalOpen`

Boolean indicating if the billing modal is open.

```jsx theme={null}
const { isBillingModalOpen } = useBillingContext();
console.log(isBillingModalOpen);
```

### `setIsBillingModalOpen`

Function to set the visibility of the billing modal.

```jsx theme={null}
const { setIsBillingModalOpen } = useBillingContext();
setIsBillingModalOpen(true);
```

### `showContactModal`

Boolean indicating if the contact modal is visible.

```jsx theme={null}
const { showContactModal } = useBillingContext();
console.log(showContactModal);
```

### `setShowContactModal`

Function to set the visibility of the contact modal.

```jsx theme={null}
const { setShowContactModal } = useBillingContext();
setShowContactModal(true);
```

### `showSuccessModal`

Boolean indicating if the success modal is visible.

```jsx theme={null}
const { showSuccessModal } = useBillingContext();
console.log(showSuccessModal);
```

### `setShowSuccessModal`

Function to set the visibility of the success modal.

```jsx theme={null}
const { setShowSuccessModal } = useBillingContext();
setShowSuccessModal(true);
```

### `showWelcomeModal`

Boolean indicating if the welcome modal is visible.

```jsx theme={null}
const { showWelcomeModal } = useBillingContext();
console.log(showWelcomeModal);
```

### `setShowWelcomeModal`

Function to set the visibility of the welcome modal.

```jsx theme={null}
const { setShowWelcomeModal } = useBillingContext();
setShowWelcomeModal(true);
```

### `handleSelectPlan`

Function to handle plan selection.

```jsx theme={null}
const { handleSelectPlan } = useBillingContext();
handleSelectPlan(selectedPlan);
```

### `handleContactUs`

Function to handle contact us action.

```jsx theme={null}
const { handleContactUs } = useBillingContext();
handleContactUs();
```

### `handleSubmitContactUsForm`

Function to handle contact us form submission.

```jsx theme={null}
const { handleSubmitContactUsForm } = useBillingContext();
handleSubmitContactUsForm('123456789');
```

### `closeSuccessModal`

Function to close the success modal.

```jsx theme={null}
const { closeSuccessModal } = useBillingContext();
closeSuccessModal();
```

### `closeContactModal`

Function to close the contact modal.

```jsx theme={null}
const { closeContactModal } = useBillingContext();
closeContactModal();
```

### `closeUpgradeModal`

Function to close the upgrade modal.

```jsx theme={null}
const { closeUpgradeModal } = useBillingContext();
closeUpgradeModal();
```

### `closeBillingModal`

Function to close the billing modal.

```jsx theme={null}
const { closeBillingModal } = useBillingContext();
closeBillingModal();
```

### `closeEntitlementUsageLimitModal`

Function to close the entitlement usage limit modal.

```jsx theme={null}
const { closeEntitlementUsageLimitModal } = useBillingContext();
closeEntitlementUsageLimitModal();
```

### `handleUpgrade`

Function to handle the upgrade action.

```jsx theme={null}
const { handleUpgrade } = useBillingContext();
handleUpgrade();
```

### `handleSuccess`

Function to handle success action after subscription.

```jsx theme={null}
const { handleSuccess } = useBillingContext();
handleSuccess(subscription);
```

### `handleTrial`

Function to handle starting a trial subscription.

```jsx theme={null}
const { handleTrial } = useBillingContext();
handleTrial('planCode');
```

### `subscription`

The current subscription object.

```jsx theme={null}
const { subscription } = useBillingContext();
console.log(subscription);
```

### `setSubscription`

Function to set the current subscription object.

```jsx theme={null}
const { setSubscription } = useBillingContext();
setSubscription(newSubscription);
```

### `showEntitlementLimitModal`

Boolean indicating if the entitlement limit modal is visible.

```jsx theme={null}
const { showEntitlementLimitModal } = useBillingContext();
console.log(showEntitlementLimitModal);
```

### `setShowEntitlementLimitModal`

Function to set the visibility of the entitlement limit modal.

```jsx theme={null}
const { setShowEntitlementLimitModal } = useBillingContext();
setShowEntitlementLimitModal(true);
```

## Dependencies

This hook depends on the following:

* A Config object with `BILLING_API_URL` defined
* `BILLING_CYCLES` and `ENTERPRISE_PLAN_NAME` constants from a types file

Ensure these dependencies are properly set up in your project for the hook to function correctly.

Additionally, you need to add the billing reducer to the global reducer. Here is a generic example:

### Setting Up the Global Reducer

```javascript theme={null}
import { combineReducers } from 'redux';
import billingReducer from './billing/billing.slice';
// other reducers
// example: import authReducer from './auth/auth.slice';
// example: import chatReducer from './chat/chat.slice';

const rootReducer = combineReducers({
  billing: billingReducer,
  // other reducers
  // example: auth: authReducer,
  // example: chat: chatReducer,
});

export default rootReducer;
```

Make sure to properly integrate the billing reducer into your Redux setup to manage billing-related state in your application.