Hooks

Hooks are used to retrieve data. It's the same data displayed on the widgets. They will return the same data the api returns, with the plus that the data is cached for you, making the app run fasterYou can use them in case you need to render your own component or to subscribe to know the status of a loading, or status of the data in the widgets you are rendering. On The widgets section, you can read which hooks are consumed by every component.

All hooks can be imported from:

import { ... } from '@amberflo/uikit`

And they can be used as:

const { data, isFetching, isError, error, isSuccess, isIdle } = useHookName(<some parameters>)

Notice

• Hooks are supported by React 16.8+. You won't be able to consume this hooks if you are using an older version.
• Hooks are only supported by functional components. If you are using class components, you'll need to move it to functional or write a High Order Component.

Common attributes

Every hook will return an object containing always the same keys:

data: This is the result of the hook, and the content will vary depending on the hook called. See the list below for more details.

isFetching: This is a boolean attribute, indicating if the hook is retrieving or not data. With this, you can subscribe and show a custom loader.

isError: This is a boolean attribute, indicating if the hook throw an error retrieving the data. So you can act accordingly.

error: If there was an error, this attribute will have the error message.

isSuccess: This is a boolean attribute, indicating the fetch has ended, and the data was retrieved.

isIdle: This is a boolean attribute, indicating the fetch has ended. No matter is succeed or failed, means the hook is idle right now.

Available hooks are

useCost

Parameters

This hook will internally call the cost api call. And returns it's data.

Structure of the hook:

const useCost = (
  startDate: number,
  endDate: number,
  period: string
) => {
  data: CostResponse
  /* This hook will have all common attributes also */
}

You can see all common attributes here.

useCreditsLedger

No parameters are required

This hook will internally call the customer credits ledger api call and return its data.

Structure of the hook

const {
    data: creditsLedger,
    /* This hook will have all common attributes also */
  }

You can see all common attributes here.

useCurrentPricingPlan

No parameters are required

This hook will internally call the current pricing plan details api call and return its data.

Structure of the hook:

const useCurrentPricingPlan = () => {
  data: PricingPlanResponse,
  handleSelectPlan: (pricingPlanId: string) => void
  /* This hook will have all common attributes also */
}

usePricingPlanDetails

No parameters are required

This hook will internally call the current pricing plan details api call and the set new pricing plan api call and return its data.

Structure of the hook:

const usePricingPlanDetails = () => {
  data: PricingPlanResponse,
  handleSelectPlan: (pricingPlanId: string) => void
  /* This hook will have all common attributes also */
}

handleSelectPlan will receive a new pricing plan, and set it to the customer.

You can see all common attributes here.

useInvoiceDetails

Parameters

This hook will internally call the get customer portal invoice api call and return its data.

Structure of the hook:

const useInvoiceDetails = (
  invoiceDate?: string,
  planId?: string,
  enabled?: boolean = true
) => {
  data: InvoiceType
  /* This hook will have all common attributes also */
}

You can see all common attributes here.

useLatestInvoice

No parameters are required

This hook will internally call the get customer portal invoice api call and return its data.

Structure of the hook:

const useLatestInvoice = () => {
  data: InvoiceType
  /* This hook will have all common attributes also */
}

You can see all common attributes here.

useInvoices

No parameters are required

This hook will internally call the get all customer invoices api call and return its data.

Structure of the hook:

const useInvoices = () => {
  data: InvoiceType[]
  /* This hook will have all common attributes also */
}

You can see all common attributes here.

useMeters

No parameters are required

This hook will internally call the get all meters api call and return its data.

Structure of the hook:

cosnt useMeters = () => {
  data: Meter[]
  /* This hook will have all common attributes also */
}

You can see all common attributes here.

usePrepaidSummary

No parameters are required

This hook will internally call the customer prepaid wallet api call and return its data.

Structure of the hook

const usePrepaidSummary = () => {
  data: PrepaidItem[]
  /* This hook will have all common attributes also */
}

You can see all common attributes here.

useProductItems

No parameters are required

This hook will internally call the /product-items api call. Returning a list of product items, including its: id, description, lastUpdateTimeInMillis, lockingStatus, productId, meterApiName, productItemName

Structure of the hook:

const useProductItems = () => {
  data: ProductItemDefinition[]
  /* This hook will have all common attributes also */
}

You can see all common attributes here.

useStripeClientSecret

No parameters are required

This hook will internally call the customer setup intent api call. and return its data.

Structure of the hook:

const useStripeClientSecret = () => {
  data: string
  /* This hook will have all common attributes also */
}

You can see all common attributes here.

useUsage

Parameters

Structure of the hook:

const useUsage = (
  meters: Array<{ meterApiName: string; filter?: Record<string, string[]> }>,
  startDate: number,
  endDate: number,
  period: string,
  groupBy?: string
) => {
  data: UsageResponse[]
  /* This hook will have all common attributes also */
}

You can see all common attributes here.