Subscription expiration

Displays when ASB free trial has ended

Demo

const subscriptionExpiration = document.querySelector("aui-subscription-expiration"); subscriptionExpiration.subscriptionData = { url: 'https://qa.buy.web.avalara.io/small-business?fromTrial=true', displayName: 'Avalara for Small Business', returnUrl: 'test.com' }

API

Tag

Name	Description
`<aui-subscription-expiration>`	Custom element

Attributes

Name	Value	Required	Description
`subscriptiondata`	Stringified JSON object		Stringified JSON object specifying the subscription details. See guidelines for required properties.
`emitupgradeevents`	Boolean attribute		Indicates the component should emit an `s-upgrade` event instead of using the default link.

Properties

Name	Value	Required	Description
`subscriptionData`	JSON object		JSON object specifying the subscription details. See guidelines for required properties.
`emitUpgradeEvents`	Boolean attribute		Indicates the component should emit an `s-upgrade` event instead of using the default link.

Events

Name	Detail	Description
`s-upgrade`	The `url`, `displayName`, `productName`, and `returnUrl` values are available on `e.detail`.	Fired after an upgrade button is clicked, if the `emitupgradeevents` attribute is present.

Demo

API

Tag

Name
`<AuiSubscriptionExpiration>`

Props

Name	Value	Required	Description
`subscriptionData`	JSON object		JSON object specifying the subscription details. See guidelines for required properties.
`emitUpgradeEvents`	Boolean		Indicates the component should emit an `s-upgrade` event instead of using the default link.
`onSUpgrade`	Function		Handles the `s-upgrade` event fired after the subscribe button is clicked, if the `emitUpgradeEvents` prop is set to `true`. The `url`, `displayName`, `productName`, and `returnUrl` values are available on `e.detail`.

Skylab React links

General information about using our React package

Typescript

Exported types

// Object passed to the subscriptionData prop export type SSubscriptionData = { displayName: string; url?: string; returnUrl?: string; productName?: string; };

Guidelines

Avalara for Small Business

This component is currently intended to indicate expiration of ASB free trial subscriptions.

Creating the subscription details object

{ url: string, // URL of product upgrade/subscription page displayName: string, // Full name of expired product returnUrl: string // After upgrade, the user will be redirected to this URL }

This component is designed to accept the data emitted in the aui-subscription-countdown component's s-expire event. Example:

function handleSExpireEvent(event) { const subscriptionExpirationEl = document.querySelector("aui-subscription-expiration"); subscriptionExpirationEl.subscriptionDetails = event.detail; }

Design

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