React.js Widgets
Here is the list of all the available components that you can integrate into your own React.js application.
Available Widgets
All widgets use internally some hooks to retrieve and update data. You can subscribe to them, to show loading or errors statuses. Or just to get the raw data to render in the format you desire. (Advanced).You can read more about hooks here
Each view has linked the hooks that is consuming, so you can subscribe to them.
Cost And Billed Usage
How to import:
import { CostAndBilledUsage } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
allowedGraphs | GraphType[] where `GraphType = "cost" | "usage" | "total-cost" | ["total-cost","cost", "usage"] | Used to determine which graph options should be displayed. Possible graphs options are "usage", "cost" and "total-cost". User can send an array of options and these options are used to determine the options displayed in the dropdown. When the array has only one value, the dropdown to select graph options will not be shown. |
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
customGraphOptions | Record<string, Record<string, string>> | undefined | If defined, customGraphOptions will overwrite the default graph options for the Usage Graph.At the moment, the customGraphOptions will replace the top level key/values. For example, if the default options are: { option1: { value1: "test", value2: "test" }, option2: { value1: "test" } } and you pass customGraphOptions of:{ option1: { value3: "test" } } You will end up with: { option1: { value3: "test", }, option2: { value1: "test" } } |
hasExportAction | boolean | false | If set to true , a button will be displayed that allows the user to export the displayed data to a CSV file. |
productItem (deprecated from v1.2.45. Use productItemId instead) | string | undefined | If set, only data corresponding to that product item will be displayed for options "usage" and "cost". For "total-cost", we will still show all the product items data for the selected billing period. |
productItemId | string | undefined | If passed, only data corresponding to that product item will be displayed for options "usage" and "cost". For "total-cost", we will still show all the product items data for the selected billing period. When you send an invalid product item id or send one that is not part of the selected billing period, an error will be thrown. |
showOnlyCurrentBillingPeriod | boolean | false | Used to determine whether to show only current billing period data or not. If it is false, we show all the billing periods for a specific customer in the dropdown. If it is true, we will not show the dropdown. |
usageGraphViewFunction | string | cumulative | Used to determine the function used to calculate usage values displayed in the component. Possible options are linear and cumulative |
withDatePicker | boolean | false | This is a common prop for components with date pickers, but it is used slightly different here. By default, we give users a dropdown of date range options to view their data by. These date range options are determined by their invoice billing periods. If you want a user to be able to select any date range, set withDatePicker to true and a date range picker will be displayed for this purpose. |
withTable | boolean | false | Used to determine whether the component should display a table or not. |
withPercentage | boolean | true | A boolean value that determines whether percentage change for usage values should be displayed in the table or not. |
aggregation | "AVG" | "MAX" | "MAX_COUNT" | "MIN" | "SEATS" | "SUM" | "SUM" | Defines the aggregation for the query. |
Used Hooks
Cost Explorer Bar Graph
How to import:
import { CostExplorerBarGraph } from "@amberflo/uikit";
Available Props
There are no specific props for this view. To see common props check ReactJS Integration | Common Props
Used Hooks
Cost Table
How to import:
import { CostExplorerTable } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
withPercentage | boolean | true | A boolean value that determines whether percentage change for usage values should be displayed in the table or not. |
aggregation | "AVG" | "MAX" | "MAX_COUNT" | "MIN" | "SEATS" | "SUM" | "SUM" | Defines the aggregation for the query. |
Used Hooks
Included Units
How to import:
import { IncludedUnits } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
color | string | undefined | Color for the progress bar. |
name | string | undefined | Name or Title to show with the numbers of the progress bar |
productItemId | string | undefined | Product Item ID related in the plan. To show how many free units has and how many consumed. |
Used hooks
Credits Ledger
How to import:
import { CreditsLedger } from "@amberflo/uikit";
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
initialTab | "ledger" | "grants" | ledger | A string value (either ledger or grants ) that defines which table is displayed by default |
showLedger | boolean | true | This prop defines if the ledger table is showed. If false , the toggle button is hidden. |
showGrants | boolean | true | This prop defines if the grants table is showed. If false , the toggle button is hidden. |
Used Hooks
Invoice Details
How to import:
import { InvoiceDetails } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
dimensionsMap | Record<string, Record<string, string>> | undefined | An object containing the dimension name as key, and another object as value, containing the dimension value and the new dimension name to be replaced with. For instance if you have a dimension called availability_zone, with a value of dim1, and you want to see it as Dimension 1, you can pass an object like this: dimensionsMap={{ availability_zone: { dim1: "Dimension 1" } }} This will apply to dimensions on graph, and to dimension selector on top. |
hideBreakdown | boolean | false | Hide invoices details breakdown |
invoiceDate | string | undefined | Invoice start date to be displayed in UTC and in MM/DD/YYYY or UNIX timestamp format. If not passed, latest invoice will be loaded. |
prepaidId | string | undefined | If you want to view a prepaid transactions invoice details, you can pass a prepaidId . An invoiceDate is also required when using a prepaidId . |
withInvoiceDetails | boolean | true | Decides to show or not the invoice details section, aka top part of invoice |
withInvoiceTotal | boolean | true | Decides to show or not the invoice total section, aka bottom part of invoice |
productItemConfigurtion | Record<string, { invoiceDisplayName?: string; currency: 'baseCurrency' | 'customCurrency' | paymentCurrency }> | undefined | An object containing the meter api name as key. And as value an object containing: - currency: Defines if the currecny of the invoice will be displayed on the base currency of the account, on the payment currency of the customer or the custom credits currency - invoiceDisplayName: Name of the product item to show on the invoce.Three items are optional, if not passed will use default configuration for your account. |
currency | 'baseCurrency' | 'customCurrency' | paymentCurrency | paymentCurrency | Defines the currency of the invoice. It can be displayed on the base currency of the account, on the payment currency of the customer or the custom credits currency. |
totalOnBaseCurrency | boolean | undefined | By default, all invoice details are show in the custom currency if defined. If you prefer to show on your base currency, pass true to this prop. |
-Note: Invoice data displayed in this component is affected by Invoice-related options.
Used Hooks
Invoice PDF
How to import:
import { InvoicePdf } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Name | Type | Default | Description |
---|---|---|---|
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
dimensionsMap | Record<string, Record<string, string>> | undefined | An object containing the dimension name as key, and another object as value, containing the dimension value and the new dimension name to be replaced with. For instance if you have a dimension called availability_zone, with a value of dim1, and you want to see it as Dimension 1, you can pass an object like this: dimensionsMap={{ availability_zone: { dim1: "Dimension 1" } }} This will apply to dimensions on graph, and to dimension selector on top. |
hideBreakdown | boolean | false | Hide invoices details breakdown |
invoiceData | Record<string,any> | undefined | This is an object of invoice details. This is the individual invoice data returned by this API, /customer-portal/invoice/. |
invoiceDate (required) | string | undefined | Date of the invoice to show on UTC and in format l |
planId | string | undefined | This is a string of the plan id that is associated with the invoice you want to export. |
prepaidId | string | undefined | If you want to export a PDF of a prepaid transaction's invoice, you can pass a prepaidId . An invoiceDate is also required when using a prepaidId . |
currency | 'baseCurrency' | 'customCurrency' | paymentCurrency | paymentCurrency | Defines the currency of the invoice. It can be displayed on the base currency of the account, on the payment currency of the customer or the custom credits currency. |
Note: Invoice data displayed in this component is affected by Invoice-related options.
Used Hooks
Invoices List
How to import:
import { InvoicesList } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
hasExportAction | boolean | true | boolean value used to determine if the "Export As" column is displayed which gives you the ability to export invoices to PDF. |
onRowClick | (invoice: Invoice) => null | undefined | Data for the invoice clicked |
paymentStatusBlockList | string[] | undefined | Array of strings that list the payment statuses of invoices you do not want to display. |
showPrepaidInvoices | boolean | true | When set to true, prepaid transactions will be included in your invoices list. |
currency | 'baseCurrency' | 'customCurrency' | paymentCurrency | paymentCurrency | Defines the currency of the invoices. They can be displayed on the base currency of the account, on the payment currency of the customer or the custom credits currency. |
Note: Invoice data displayed in this component is affected by Invoice-related options.
Used Hooks
Orders Usage Graph and Table
![pic.png](https://files.readme.io/e6498f5-Screenshot_2024-01-08_at_2.20.36_PM.png)
How to import:
import { OrdersUsageGraphAndTable } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props. The following Common Props are not available for this component: callToAction
, title
, withContainer
and withTitle
. The ReactJS Integration | Common Graph Props are also available for this component.
Used Hooks
- Hooks | useInvoices()
- Hooks | useMeters()
- Hooks | useOrders()
- Hooks | useProductItems()
- Hooks | useUsage()
Prepaid Summary Graph
How to import:
import { PrepaidSummaryGraph } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
horizontal | boolean | false | boolean value used to determine if the graph will be displayed with vertical or horizontal layout. |
withDataInside (this prop will be deprecated in future versions) | boolean | false | boolean value used to determine if the PieChart will show data inside the graph. |
Used Hooks
Prepaid Summary Table
How to import:
import { PrepaidSummaryTable } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
Used Hooks
Pricing Plan
How to import:
import { PricingPlan } from '@amberflo/uiki'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
onClick | (pricingPlanId: string) => void | undefined | Function to be called when button is pressed |
price | string | "" | Text to show under the title |
pricingPlanId (required) | string | undefined | Id of the pricing plan, to call correct endpoints |
productItems | string[] | [] | Array un strings to show as product items |
title | string | "" | Title of pricing plan |
Used Hooks
Pricing Plan Summary
How to import:
import { PricingPlanSummary } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
customCurrencyNumberFormat | string | decimal | A string value (either decimal or integer ) that determines how custom currency is formatted and displayed. For example, if you had a custom currency value (called โCreditsโ) of 100 , it would be displayed as 100.00 Credits if decimal was used. If integer was used, the credits would be displayed as 100 Credits . |
title | string | "Current Plan" | Display title for component |
Used Hooks
Usage Graph
How to import:
import { UsageByMeterLineGraph } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
allowedChartTypes | CHART_TYPE[] whereCHART_TYPE = "line" | "bar" | "horizontalBar" | "stackedBar" | ["line", "bar", "horizontalBar", "stackedBar"] | Used to determine which chart types should be displayed. Possible chart options are line , bar , horizontalBar and stackedBar . User can send an array of options and these options are used to determine the options displayed in the dropdown. When the array has only one value, the dropdown to select chart type will not be shown.If this prop is not sent, will use default value. |
datePickerType | DatePickerType whereDatePickerType = "date-range" | "month" | date-range | Used to determine the type of date picker. For month date picker, the months to be displayed is determined by the startDate prop. |
dimension | string | undefined | If set, we will group by this dimension. |
dimensionsFilter | Record<string,string[]> | undefined | Used to filter the usage data for specific dimension values. The keys correspond to dimensions defined on the meter and the values are array of strings corresponding to each dimension values. |
dimensionsMap | Record<string, string> | undefined | An object to map dimensions to a new name. For instance if you have a dimension called 'Dim1' and want to show dimension 1 instead, you can pass this prop as dimensionsMap={{ dim1: 'Dimension 1' }} If the value set on the object for a specific dimension is null . The dimension wonโt show on the dimension selector. |
dimensionSelectorList | string[] | undefined | undefined | A list of available dimensions to show on the dimension selector. Only this dimensions will be shown there. To see all available dimensions, do not send this prop. |
graphViewFunction | USAGE_GRAPHS_VIEW_FUNCTION whereUSAGE_GRAPHS_VIEW_FUNCTION = "linear" | "cumulative" | linear | Used to determine the function used to calculate usage values displayed in the graph. Possible options are linear and cumulative . |
hasExportAction | boolean | false | If set to true , a button will be displayed that allows the user to export the displayed data to a CSV file. |
hideDeprecatedMeters | boolean | undefined | If true , deprecated meters wonโt show on the graph |
meter | string | "" | Meter ApiName of the meter to show on the graph |
meterApiNames | string[] | undefined | undefined | A list of meter api names to show in the meter selector dropdown. |
onDimensionsChange | `(dimension: string) => void | undefined | Function to be called when a dimension is selected using the dimension selector. |
onMeterChange | (meter: string) => void | undefined | Function to be called when the meter is selected using the dimension selector. |
renderEmptyConfigOnError | boolean | false | If true , the component will be rendered in empty state. |
withDimensionsSelector | boolean | undefined | undefined | If true, will enable the dimensions selector to be shown. In addition to this, additional props must be provided to display the selector including a list of dimensions and an onDimensionChange handler. |
withMeterSelector | boolean | undefined | undefined | If true, will enable the meter selector to be shown |
aggregation | โAVGโ | โMAXโ | โMAX_COUNTโ | โMINโ | โSEATSโ | โSUMโ | โSUMโ | Defines the aggregation for the query. |
Used Hooks
Usage Table
How to import:
import { UsageByMeterTable } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
meterApiNames (required) | string[] | Array<{ meterApiName: string, filter: Record<string, string[]> }> | [] | List of meter api names to show on the table, or list of objects with meter api name, and filters, such as dimension value and array of possible values |
meterLabelsMap | Record<string, string> | undefined | A map where the keys correspond to the meterApiName of the meters displayed in the table. The values correspond to the labels that will be displayed in the table for the corresponding meters. |
onRowClick | (row: Row) => void; | undefined | onRowClick is a function. If defined, the onRowClick function will be invoked when clicking on a row of the table. The onRowClick function will receive a Row type object as an argument. |
withPercentage | boolean | true | A boolean value that determines whether percentage change for usage values should be displayed in the table or not. |
aggregation | โAVGโ | โMAXโ | โMAX_COUNTโ | โMINโ | โSEATSโ | โSUMโ | โSUMโ | Defines the aggregation for the query. |
Used Hooks
Order List
How to import:
import { OrderList } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
onAddOrder | (productItemId: string) => void | undefined | When + Order button is pressed, onAddOrder will be called. It will receive the productItemId as a parameter. So we can redirect to a new page where the Orders Create widget is present using the product item id. |
onRowClick | (order: Order) => void | undefined | When a table row is clicked, onRowClick will be called. It will receive the order as a parameter so that you can redirect to a page where the Order Details is present using the order details. |
Order Create
How to import:
import { OrderCreate } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
onBack | () => void | undefined | When the Back button on the title is pressed, onBack function will be called. |
onCancel | () => void | undefined | When the Cancel button on the footer is pressed, onCancel function will be called. |
productItemId (required) | string | undefined | Product item of plan assigned to customer where the order is going to be created. |
stripePublishableKey | string | undefined | Publishable key you can get from stripe. You can see how here. If not provided user wonโt see their payment details. But the component will still work. |
Order Details
How to import:
import { OrderDetails } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
onBack | () => void | undefined | When the Back button on the title is pressed, onBack function will be called. |
orderId | string | undefined | id of the order to show the details. |
Orders Usage Graph and Table
How to import:
import { OrdersUsageGraphAndTable } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
To see graph props check ReactJS Integration | Graph Props
Stripe Setup Intent
How to import:
import { StripeSetupIntent } from '@amberflo/uikit'
Available Props
To see common props check ReactJS Integration | Common Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
buttonText | string | "Submit" | Text to show on the button |
publishableKey (required) | string | undefined | Publishable key you can get from stripe. You can see how here |
onCancel | () => void | undefined | onCancel should be a function. If an onCancel function is passed, a Cancel button will appear and invoke the onCancel function when clicked. |
returnUrl | string | undefined | URL where to go after payment method is saved |
showTerms | boolean | true | If true, you allow stripe to show terms below the payment form. In the above image, it is above the Cancel and Submit button |
showEdit | boolean | undefined | If true , the component will display the stripe payment form, which allows a user to enter their payment info. If false , the component will display the payment details. This prop is helpful if you want to manually control the views and not use the โEditโ button to view the payment form. |
After the payment method is set. A redirect will happen to the returnUrl
. It can be the same url as the actual one.
If the redirect url, has this component included, even if hidden, it will automatically set the default payment method. If not, read below how to set the default payment method.
How To Get Secret Key From Stripe
Call this endpoint:
POST
Payload:
{
"provider": "stripe"
}
Response Body:
{
"id": "seti_1LIBSbFZnIN3GxYXnNiuvLGe",
"clientSecret": "seti_3MKDTdHBpKP5IzAZpNiuvLGe_secret_M0BqOmOj5LWcKZ910nPEzRCy1wFfe8M"
}
How to make a payment the default payment method
-
After creating a new payment method, youโll get redirected to a new URL with some query string parameters. The redirect is needed in order to get the query param called
setup_intent_client_secret
to retrieve payment method from Stripe. -
You need to retrieve the payment method from Stripe, by running:
const setupIntentClientSecret = getQueryString("setup_intent_client_secret");
const { setupIntent } = await stripe.retrieveSetupIntent(setupIntentClientSecret);
-
Submit the payment method to endpoint to set as default payment method:
POST
Payload
{
provider: "stripe",
paymentMethodId: <Payment method ID from Stripe>,
}
If on the redirect url, you place the StripeSetupIntent
component, even if hidden, it will trigger automatically the set default payment method.
You can also subscribe to usePaymentMethod()
hook from @maberflo/uikit/hooks
, like:
const { isSuccess } = usePaymentMethod()
This isSuccess will change to true after setting the payment method.
Common Props
These are props common to all views, and non of them are required:
Name | Type | Description | ||||
---|---|---|---|---|---|---|
withTitle | boolean | If true , will show the widget title (If the container is enabled) see below | ||||
withContainer | boolean | If true , a container wrapper will show around the widget | ||||
title | string | Custom title for the block | ||||
hideLoader | boolean | If true, Loader wonโt show while loading. Useful if you are showing many components with the same data, and you want a single loader. Or to use your own custom loader | ||||
callToAction | `{ text?: string | JSX.Element; onClick?: () => void; type?: "add" | "disabledAdd" | "remove" | "deleteAll"; noIcon?: boolean; disabled?: boolean; }` | Shows a button link on the title of container, that can be attached any action |
onError | (error) => void | A event called when there was some kind of error with the component. So it can show the error to customer | ||||
onLoadingChange | (isLoading: boolean) => void | An event called each time the component switches the status of loading. So you can show your own loading for instance. |
Common Date Picker Props
There are a few props shared by views that have a date picker. And none of them are required.
Views with date picker:
Shared props:
Name | Type | Default | Description |
---|---|---|---|
startDate | number | Current day minus 7 days. For month picker, it will be start of current month to current day. | Default value for the start date on the date picker. For month picker, this value is used to show the number of months in the month ranges dropdown. |
periodValue | "daily" | "weekly" | "monthly" | daily | Default value for the date picker value. |
onPeriodChange | (period: string) => void | undefined | Function to be called when period is changed |
onDateChange | (startDate: number, endDate: number) => void | undefined | Function to be called when date is changed |
endDate | number | Current Day | Default value for the end date on the date picker. |
withDatePicker | boolean | true | If false, DatePicker will be hidden. |
Common Graph Props
There are a few props shared by views that have a graph. And none of them are required.
Views with graphs:
Shared props:
Name | Type | Default | Description |
---|---|---|---|
graphTextColor | string | undefined | Color for the axis of graphs |
customGraphOptions | ChartOptions | undefined | We use Chart.js for our graphs. This prop allows to customize the graph using all the options they provide. For more info check: https://www.chartjs.org/docs/latest/general/options.html For example, you could change text colors, lines or bars weight, add animations, etc. |
Updated 2 months ago