Skip to main content

​
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

import { useBillingContext } from '@locai1/billing-react-sdk';

​
Usage

​
Example

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. 
const { userToken } = useBillingContext();
console.log(userToken);

​
setUserToken

Function to set the authentication token for the user. 
const { setUserToken } = useBillingContext();
setUserToken('newToken');

​
user

The user object. 
const { user } = useBillingContext();
console.log(user);

​
setUser

Function to set the user object. 
const { setUser } = useBillingContext();
setUser({ name: 'John Doe' });

​
selectedPlan

The currently selected subscription plan. 
const { selectedPlan } = useBillingContext();
console.log(selectedPlan);

​
setSelectedPlan

Function to set the selected subscription plan. 
const { setSelectedPlan } = useBillingContext();
setSelectedPlan({ name: 'Pro Plan' });

​
plans

An array of available subscription plans. 
const { plans } = useBillingContext();
console.log(plans);

​
customer

The customer object. 
const { customer } = useBillingContext();
console.log(customer);

​
setCustomer

Function to set the customer object. 
const { setCustomer } = useBillingContext();
setCustomer({ name: 'Jane Doe' });

​
isMonthly

Boolean indicating if the billing cycle is monthly. 
const { isMonthly } = useBillingContext();
console.log(isMonthly);

​
toggleBillingCycle

Function to toggle the billing cycle between monthly and yearly. 
const { toggleBillingCycle } = useBillingContext();
toggleBillingCycle(true); // Sets billing cycle to monthly

​
showUpgradeModal

Boolean indicating if the upgrade modal is visible. 
const { showUpgradeModal } = useBillingContext();
console.log(showUpgradeModal);

​
setShowUpgradeModal

Function to set the visibility of the upgrade modal. 
const { setShowUpgradeModal } = useBillingContext();
setShowUpgradeModal(true);

​
showFreeTrialButton

Boolean indicating if the free trial button is visible. 
const { showFreeTrialButton } = useBillingContext();
console.log(showFreeTrialButton);

​
setShowFreeTrialButton

Function to set the visibility of the free trial button. 
const { setShowFreeTrialButton } = useBillingContext();
setShowFreeTrialButton(true);

​
isBillingModalOpen

Boolean indicating if the billing modal is open. 
const { isBillingModalOpen } = useBillingContext();
console.log(isBillingModalOpen);

​
setIsBillingModalOpen

Function to set the visibility of the billing modal. 
const { setIsBillingModalOpen } = useBillingContext();
setIsBillingModalOpen(true);

​
showContactModal

Boolean indicating if the contact modal is visible. 
const { showContactModal } = useBillingContext();
console.log(showContactModal);

​
setShowContactModal

Function to set the visibility of the contact modal. 
const { setShowContactModal } = useBillingContext();
setShowContactModal(true);

​
showSuccessModal

Boolean indicating if the success modal is visible. 
const { showSuccessModal } = useBillingContext();
console.log(showSuccessModal);

​
setShowSuccessModal

Function to set the visibility of the success modal. 
const { setShowSuccessModal } = useBillingContext();
setShowSuccessModal(true);

​
showWelcomeModal

Boolean indicating if the welcome modal is visible. 
const { showWelcomeModal } = useBillingContext();
console.log(showWelcomeModal);

​
setShowWelcomeModal

Function to set the visibility of the welcome modal. 
const { setShowWelcomeModal } = useBillingContext();
setShowWelcomeModal(true);

​
handleSelectPlan

Function to handle plan selection. 
const { handleSelectPlan } = useBillingContext();
handleSelectPlan(selectedPlan);

​
handleContactUs

Function to handle contact us action. 
const { handleContactUs } = useBillingContext();
handleContactUs();

​
handleSubmitContactUsForm

Function to handle contact us form submission. 
const { handleSubmitContactUsForm } = useBillingContext();
handleSubmitContactUsForm('123456789');

​
closeSuccessModal

Function to close the success modal. 
const { closeSuccessModal } = useBillingContext();
closeSuccessModal();

​
closeContactModal

Function to close the contact modal. 
const { closeContactModal } = useBillingContext();
closeContactModal();

​
closeUpgradeModal

Function to close the upgrade modal. 
const { closeUpgradeModal } = useBillingContext();
closeUpgradeModal();

​
closeBillingModal

Function to close the billing modal. 
const { closeBillingModal } = useBillingContext();
closeBillingModal();

​
closeEntitlementUsageLimitModal

Function to close the entitlement usage limit modal. 
const { closeEntitlementUsageLimitModal } = useBillingContext();
closeEntitlementUsageLimitModal();

​
handleUpgrade

Function to handle the upgrade action. 
const { handleUpgrade } = useBillingContext();
handleUpgrade();

​
handleSuccess

Function to handle success action after subscription. 
const { handleSuccess } = useBillingContext();
handleSuccess(subscription);

​
handleTrial

Function to handle starting a trial subscription. 
const { handleTrial } = useBillingContext();
handleTrial('planCode');

​
subscription

The current subscription object. 
const { subscription } = useBillingContext();
console.log(subscription);

​
setSubscription

Function to set the current subscription object. 
const { setSubscription } = useBillingContext();
setSubscription(newSubscription);

​
showEntitlementLimitModal

Boolean indicating if the entitlement limit modal is visible. 
const { showEntitlementLimitModal } = useBillingContext();
console.log(showEntitlementLimitModal);

​
setShowEntitlementLimitModal

Function to set the visibility of the entitlement limit modal. 
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

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.
⌘I