Widgets, Views and components

All this are components that you can import and plug on your own React.js view.

Available Views

All views uses 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/components/organisms/CostAndBilledUsage'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
allowedGraphsGraphType[]
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.
customCurrencyNumberFormatstringdecimalA 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.
customGraphOptionsRecord<string, Record<string, string>>undefinedIf 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" } }
productItem
(deprecated from v1.2.45. Use productItemId instead)
stringundefinedIf 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.
productItemIdstringundefinedIf 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.
showOnlyCurrentBillingPeriodbooleanfalseUsed 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.
usageGraphViewFunctionstringcumulativeUsed to determine the function used to calculate usage values displayed in the component. Possible options are linear and cumulative
withTablebooleanfalseUsed to determine whether the component should display a table or not.
withDatePickerbooleanfalseThis 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.

Used Hooks




Cost Explorer Bar Graph

How to import:

import { CostExplorerBarGraph } from "@amberflo/uikit/components/organisms/CostExplorerBarGraph";

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/components/organisms/CostExplorerTable'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
customCurrencyNumberFormatstringdecimalA 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




Included Units

How to import:

import { IncludedUnits } from '@amberflo/uikit/components/organisms/IncludedUnits'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
colorstringundefinedColor for the progress bar.
namestringundefinedName or Title to show with the numbers of the progress bar
productItemIdstringundefinedProduct Item ID related in the plan. To show how many free units has and how many consumed.

Used hooks




Invoice Details

How to import:

import { InvoiceDetails } from '@amberflo/uikit/components/organisms/InvoiceDetails'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
customCurrencyNumberFormatstringdecimalA 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.
dimensionsMapRecord<string, Record<string, string>>undefinedAn 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.
hideBreakdownbooleanfalseHide invoices details breakdown
invoiceDate(required)stringundefinedDate of the invoice to show on UTC and in format l
prepaidIdstringundefinedIf you want to view a prepaid transactions invoice details, you can pass a prepaidId. An invoiceDate is also required when using a prepaidId.
withInvoiceDetailsbooleantrueDecides to show or not the invoice details section, aka top part of invoice
withInvoiceTotalbooleantrueDecides to show or not the invoice total section, aka bottom part of invoice

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/components/organisms/InvoicePdf'

Available Props

To see common props check ReactJS Integration | Common Props

NameTypeDefaultDescription
customCurrencyNumberFormatstringdecimalA 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.
dimensionsMapRecord<string, Record<string, string>>undefinedAn 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.
hideBreakdownbooleanfalseHide invoices details breakdown
invoiceDataRecord<string,any>undefinedThis is an object of invoice details. This is the individual invoice data returned by this API, /customer-portal/invoice/.
invoiceDate(required)stringundefinedDate of the invoice to show on UTC and in format l
planIdstringundefinedThis is a string of the plan id that is associated with the invoice you want to export.
prepaidIdstringundefinedIf 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.

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/components/organisms/InvoiceList'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
customCurrencyNumberFormatstringdecimalA 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.
hasExportActionbooleantrueboolean value used to determine if the "Export As" column is displayed which gives you the ability to export invoices to PDF.
onRowClick(invoice: Invoice) => nullundefinedData for the invoice clicked
paymentStatusBlockListstring[]undefinedArray of strings that list the payment statuses of invoices you do not want to display.
showPrepaidInvoicesbooleantrueWhen set to true, prepaid transactions will be included in your invoices list.

Note: Invoice data displayed in this component is affected by Invoice-related options.

Used Hooks




Prepaid Summary Graph

How to import:

import { PrepaidSummaryGraph } from '@amberflo/uikit/PrepaidSummaryGraph'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
customCurrencyNumberFormatstringdecimalA 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




Prepaid Summary Table

How to import:

import { PrepaidSummaryTable } from '@amberflo/uikit/PrepaidSummaryTable'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
customCurrencyNumberFormatstringdecimalA 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/uikit/PricingPlan'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
onClick(pricingPlanId: string) => voidundefinedFunction to be called when button is pressed
pricestring""Text to show under the title
pricingPlanId(required)stringundefinedId of the pricing plan, to call correct endpoints
productItemsstring[][]Array un strings to show as product items
titlestring""Title of pricing plan

Used Hooks




Pricing Plan Summary

How to import:

import { PricingPlanSummary } from '@amberflo/uikit/components/organisms/PricingPlanSummary'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
customCurrencyNumberFormatstringdecimalA 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.
titlestring"Current Plan"Display title for component

Used Hooks




Usage Graph

How to import:

import { UsageByMeterLineGraph } from '@amberflo/uikit/components/organisms/UsageByMeterLineGraph'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
allowedChartTypesCHART_TYPE[] where
CHART_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.
datePickerTypeDatePickerType where
DatePickerType = "date-range" | "month"
date-rangeUsed to determine the type of date picker. For month date picker, the months to be displayed is determined by the startDate prop.
dimensionstringundefinedIf set, we will group by this dimension.
dimensionsFilterRecord<string,string[]>undefinedUsed 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.
dimensionsMapRecord<string, string>undefinedAn 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.
dimensionSelectorListstring[] | undefinedundefinedA 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.
graphViewFunctionUSAGE_GRAPHS_VIEW_FUNCTION where
USAGE_GRAPHS_VIEW_FUNCTION = "linear" | "cumulative"
linearUsed to determine the function used to calculate usage values displayed in the graph. Possible options are linear and cumulative.
hideDeprecatedMetersbooleanundefinedIf true, deprecated meters won’t show on the graph
meterstring""Meter ApiName of the meter to show on the graph
meterApiNamesstring[] | undefinedundefinedA list of meter api names to show in the meter selector dropdown.
onDimensonsChange`(dimension: string) => voidundefinedFunction to be called when a dimension is selected using the dimension selector.
onMeterChange(meter: string) => voidundefinedFunction to be called when the meter is selected using the dimension selector.
renderEmptyConfigOnErrorbooleanfalseIf true, the component will be rendered in empty state.
withDimensionsSelectorboolean | undefinedundefinedIf 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.
withMeterSelectorboolean | undefinedundefinedIf true, will enable the meter selector to be shown

Used Hooks




Usage Table

How to import:

import { UsageByMeterTable } from '@amberflo/uikit/components/organisms/UsageByMeterTable'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
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
onRowClick(row: Row) => void;undefinedonRowClick 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.

Used Hooks




Stripe Setup Intent

How to import:

import { StripeSetupIntent } from '@amberflo/uikit/components/organisms/StripeSetupIntent'

Available Props

To see common props check ReactJS Integration | Common Props

Prop NameTypeDefault ValueDescription
buttonTextstring"Submit"Text to show on the button
publishableKey(required)stringundefinedPublishable key you can get from stripe. You can see how here
onCancel() => voidundefinedonCancel should be a function. If an onCancel function is passed, a Cancel button will appear and invoke the onCancel function when clicked.
returnUrlstringundefinedURL where to go after payment method is saved
showTermsbooleantrueIf true, you allow stripe to show terms below the payment form. In the above image, it is above the Cancel and Submit button
showEditbooleanundefinedIf 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.




How To Get Secret Key From Stripe

Call this endpoint:

📘

POST

https://app.amberflo.io/customer-portal/setup-intent

Payload:

{
     "provider": "stripe"
}

Response Body:

{
    "id": "seti_1LIBSbFZnIN3GxYXnNiuvLGe",
    "clientSecret": "seti_3MKDTdHBpKP5IzAZpNiuvLGe_secret_M0BqOmOj5LWcKZ910nPEzRCy1wFfe8M"
}

How to make a payment the default payment method

  1. After creating a new payment method, you’ll get redirected to a new URL with some query string parameters. There is one called setup_intent_client_secret.

  2. You need to retrieve the payment method from Stripe, by running:
    const { setupIntent } = await stripe.retrieveSetupIntent(setupIntentClientSecret);

  3. Submit the payment method to endpoint to set as default payment method:

📘

POST

https://app.amberflo.io/customer-portal/payment-method

Payload

{
  provider: "stripe",
  paymentMethodId: <Payment method ID from Stripe>,
}

Common Props

These are props common to all views, and non of them are required:

NameTypeDescription
withTitlebooleanIf true, will show the widget title (If the container is enabled) see below
withContainerbooleanIf true, a container wrapper will show around the widget
titlestringCustom title for the block
hideLoaderbooleanIf 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?: stringJSX.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) => voidA event called when there was some kind of error with the component. So it can show the error to customer
onLoadingChange(isLoading: boolean) => voidAn 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:

NameTypeDefaultDescription
startDatenumberCurrent 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"dailyDefault value for the date picker value.
onPeriodChange(period: string) => voidundefinedFunction to be called when period is changed
onDateChange(startDate: number, endDate: number) => voidundefinedFunction to be called when date is changed
endDatenumberCurrent DayDefault value for the end date on the date picker.
withDatePickerbooleantrueIf 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:

NameTypeDefaultDescription
graphTextColorstringundefinedColor for the axis of graphs
customGraphOptionsChartOptionsundefinedWe 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.