4.32.2

Subscription countdown

Displays time remaining in ASB free trial

Demo

API

Tag

Name Description
<aui-subscription-countdown> Custom element

Attributes

Name Value Required Description
obligations Stringified array of obligation objects

Stringified JSON array of obligations retrieved from https://api.biztech.avalara.com/business-activity/customer-accounts/:id/obligations?includeFuture=true (this will be deprecated soon) OR https://api.auth1.avalara.com/ws/rest/obligations/customer/:customerId. See Guidelines for more details.

user String

Stringified JSON of user object, see Guidelines below.
halfwidth Boolean attribute

Use if the component will be embedded in a container that does not span the full width of the screen.
xswidth Boolean attribute

Use if the component will be embedded in a narrow container.
emitupgradeevents Boolean attribute

Indicates the component should emit an s-upgrade event instead of using the default link.
upgradereturnurl String

After upgrade, the user will be redirected to this URL.

NOTE: buy.avalara.com only supports URLs within the avalara.com domain.

qa.buy.web.avalara.io also supports URLs within the avalara.io domain.

Properties

Name Value Required Description
obligations Array of obligation objects

Array of obligations retrieved from https://api.biztech.avalara.com/business-activity/customer-accounts/:id/obligations?includeFuture=true (this will be deprecated soon) OR https://api.auth1.avalara.com/ws/rest/obligations/customer/:customerId. See Guidelines for more details.

user JSON

Set this to user object JSON, see Guidelines below.
halfWidth Boolean attribute

Use if the component will be embedded in a container that does not span the full width of the screen.
xsWidth Boolean attribute

Use if the component will be embedded in a narrow container.
emitUpgradeEvents Boolean attribute

Indicates the component should emit an s-upgrade event instead of using the default link.
upgradeReturnUrl String

After upgrade, the user will be redirected to this URL.

NOTE: buy.avalara.com only supports URLs within the avalara.com domain.

qa.buy.web.avalara.io also supports URLs within the avalara.io domain.

Events

Name Detail Description
s-upgrade

The clicked upgrade button's url, dataRef, displayName, productName, and returnUrl values are available on e.detail.

Fired after an upgrade button is clicked, if the emitupgradeevents attribute is present.
s-expire

The trial product's url, displayName, productName, and returnUrl values are available on e.detail.

Fired when obligations data indicate the ASB free trial has expired. See guidelines for more details.

Demo

API

Tag

Name
<AuiSubscriptionCountdown>

Props

Name Value Required Description
obligations Array of obligation objects

Array of obligations retrieved from https://api.biztech.avalara.com/business-activity/customer-accounts/:id/obligations?includeFuture=true (this will be deprecated soon) OR https://api.auth1.avalara.com/ws/rest/obligations/customer/:customerId. See Guidelines for more details.

user JSON

Set this to user object JSON, see Guidelines.
halfWidth Boolean

Use if the component will be embedded in a container that does not span the full width of the screen.
xsWidth Boolean

Use if the component will be embedded in a narrow container.
emitUpgradeEvents Boolean

Indicates the component should emit an s-upgrade event instead of using the default link.
upgradeReturnUrl String

After upgrade, the user will be redirected to this URL.

NOTE: buy.avalara.com only supports URLs within the avalara.com domain.

qa.buy.web.avalara.io also supports URLs within the avalara.io domain.
onSUpgrade Function

Handles the s-upgrade event fired after an upgrade button is clicked, if the emitUpgradeEvents prop is set to true.

The clicked upgrade button's url, dataRef, displayName, productName, and returnUrl values are available on e.detail.

onSExpire Function

Handles the s-expire event fired when obligations data indicate the ASB free trial has expired.

The trial product's url, displayName, productName, and returnUrl values are available on e.detail. See guidelines for more details.

Skylab React links

General information about using our React package

Typescript

Exported types

// s-expire event's e.detail export type SSubscriptionExpireEvent = { url: string; displayName: string; productName: string; returnUrl: string; }; // s-upgrade event's e.detail export type SSubscriptionUpgradeEvent = { url: string; dataRef: string; displayName: string; productName: string; returnUrl: string; };

Guidelines

Avalara for Small Business

This component currently only checks for ASB free trial subscriptions. It is visible on the page starting with 60 days left in the trial.

User object

If your app doesn't already have access to the Avalara Identity user data, then use AUI Identity to get it. API for <aui-subscription-countdown> user data is provided below.

const user = { accountId: string, // use product account ID (e.g. avataxAccountId) username: string, // optional, will be displayed in header menu if provided givenName: string, familyName: string, email: string, isLoggedIn: boolean, isTechSupport: boolean, name: string, locale: string, emitSwitchAccountsNavEvent: boolean, // optional, prevents default/emits s-navigate event on "Switch accounts" click switchAccountsUrl: string, // optional, overrides existing default } document.querySelector('aui-subscription-countdown').user = user;

or data can be assigned as attribute using stringified JSON

Obligations object

This component works with two different obligations objects for now. See examples below.

The endpoint https://api.biztech.avalara.com/business-activity/customer-accounts/:id/obligations?includeFuture=true returns an object like this:

const freeTrialObligations = [{ id: "BT00I8uJiC8CIgwkZEVR", transactionId: "BT00TzrIsbx5yNkSGEB0", invoiceOwnerId: null, externalId: "00k7f000005sycLAAQ", quantity: 1, featureDetailId: "Zuora_8a8aa39477d323490177d7540d412a13", cpqId: "8a8aa39477d323490177d7540d412a13", currency: "USD", extendedAmount: 0, discountAmount: null, discountedExtendedAmount: 0, discountPercentage: null, endOfAgreementBehavior: "Renew at catalog pricing", accessStart: "2021-03-05T00:00:00.000Z", termStart: "2021-03-05T00:00:00.000Z", termEnd: "2021-05-05T00:00:00.000Z", billingFrequency: "Monthly", connectorId: "a0n5a00000bJA2ZAAW", listPrice: 0, isActive: 1, createdAt: "2021-03-06T01:00:24.405Z", includedUnits: 0, unitOfMeasure: null, termsId: "2018Terms", termsUrl: "www.avalara.com/terms", replacedAt: "2021-03-06T01:00:24.405Z", connectorName: "SquareSpace", connectorMarketplaceName: "SquareSpace", connectorLevel: "TBD", connectorPOS: false, connectorIsExtractor: "No", featureDetail: { id: "Zuora_8a8aa39477d323490177d7540d412a13", cpqId: "8a8aa39477d323490177d7540d412a13", featureId: "zuora_8a8aa10f77d3169b0177d752888f3cec", tierFrom: 0, tierTo: null, unitOfMeasure: null, connectorId: "", endOfAgreementBehavior: "Renew at catalog pricing", renewalBehavior: "Renew at catalog pricing", chargeModel: "Flat Fee Pricing", chargeType: "Recurring", priceFormat: "Flat Fee", serviceDiscountAppliesToUsage: 0, provisioningTreatmentName: "Avalara AvaTax", listSubscriptionDuration: 12, createdAt: "2021-03-02T00:30:31.108Z", includedUnits: 0, feature: { id: "zuora_8a8aa10f77d3169b0177d752888f3cec", name: "Avalara AvaTax - ESB Suite Free Trial", description: "Avalara AvaTax - ESB Suite Free Trial", productName: "Avalara AvaTax", canonicalName: "Avalara AvaTax - ESB Suite Free Trial", createdAt: "2021-03-02T00:30:30.907Z", }, entitlements: [], }, }]

The endpoint https://api.auth1.avalara.com/ws/rest/obligations/customer/:customerId returns an object like this:

const freeTrialObligations = [{ obligationSource: "Zuora", Id: "8a8aa2158561d97e01857de0578c45a2", productCatalogId: "2c92a00e7b0e6e3b017b1917eb4f147b", itemName: "AvaTax ESB Suite Free Trial", isAccessPermitted: true, type: "Recurring", accessStart: "2023-01-04", termStart: "2023-01-04", termEnd: "2023-03-04", initialTerm: 2, renewalTerm: 0, ConnectorID: null, connectorName: null, connectorMarketplaceName: null, connectorLevel: null, connectorPOS: null, connectorIsExtractor: null, billingFrequency: "Month", quantity: 1, price: 0, OveragePrice: null }]

The s-expire event

This component currently calculates the time left in the user's ASB free trial, and emits the s-expire event when the trial has expired and the aui-subscription-expiration component should be displayed (and user access to the app should be blocked). In the future, information about time remaining in the free trial should be available via an API call, and listening for the s-expire event may no longer be necessary.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com