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 error statuses or just to get the raw data to render in the format you desire (advanced) hooks docid\ rmq8uycxubjeay1offnc6 each view has linked the hooks that are consuming, so you can subscribe to them billed usage how to import import { costandbilledusage } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 charge 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 react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 charge table how to import import { costexplorertable } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a hooks docid\ rmq8uycxubjeay1offnc6 included units how to import import { includedunits } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 credits ledger how to import import { creditsledger } from "@amberflo/uikit"; available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 invoice details how to import import { invoicedetails } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a \ note invoice data displayed in this component is affected by embeddable ui kit react js docid\ w1gheudt e5c1ebzvan3a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 invoice pdf how to import import { invoicepdf } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a note invoice data displayed in this component is affected by embeddable ui kit react js docid\ w1gheudt e5c1ebzvan3a used hooks hooks docid\ rmq8uycxubjeay1offnc6 invoices list how to import import { invoiceslist } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a note invoice data displayed in this component is affected by embeddable ui kit react js docid\ w1gheudt e5c1ebzvan3a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 orders usage graph and table how to import import { ordersusagegraphandtable } from '@amberflo/uikit' to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a the following common props are not available for this component calltoaction , title , withcontainer and withtitle the react js widgets docid\ htcorwrx2 pqgpfwkv5 a are also available for this component used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 prepaid summary graph how to import import { prepaidsummarygraph } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 prepaid summary table how to import import { prepaidsummarytable } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 pricing plan how to import import { pricingplan } from '@amberflo/uiki' to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6 pricing plan summary how to import import { pricingplansummary } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6 usage graph how to import import { usagebymeterlinegraph } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 usage table how to import import { usagebymetertable } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a used hooks hooks docid\ rmq8uycxubjeay1offnc6hooks docid\ rmq8uycxubjeay1offnc6 order list how to import import { orderlist } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a order create how to import import { ordercreate } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a order details how to import import { orderdetails } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a orders usage graph and table how to import import { ordersusagegraphandtable } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a to see graph props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a stripe setup intent how to import import { stripesetupintent } from '@amberflo/uikit' available props to see common props check react js widgets docid\ htcorwrx2 pqgpfwkv5 a 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 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 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 https //app amberflo io/customer portal/payment method 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 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 react js widgets docid\ htcorwrx2 pqgpfwkv5 areact js widgets docid\ htcorwrx2 pqgpfwkv5 areact js widgets docid\ htcorwrx2 pqgpfwkv5 areact js widgets docid\ htcorwrx2 pqgpfwkv5 areact js widgets docid\ htcorwrx2 pqgpfwkv5 a shared props common graph props there are a few props shared by views that have a graph and none of them are required views with graphs react js widgets docid\ htcorwrx2 pqgpfwkv5 areact js widgets docid\ htcorwrx2 pqgpfwkv5 areact js widgets docid\ htcorwrx2 pqgpfwkv5 areact js widgets docid\ htcorwrx2 pqgpfwkv5 a shared props name type default description graphtextcolor string undefined color for the axis of graphs customgraphoptions chartoptions undefined we use chart js https //www chartjs org/docs/latest/ 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 https //www chartjs org/docs/latest/general/options html for example, you could change text colors, lines or bars weight, add animations, etc