Subscription Tile in Service View

An application can use its own view to show the status of a subscription that delivers the application services to subscribers. For this purpose, APS JS SDK provides the aps/biz/SubscriptionInfoTile module that shows a tile with the subscription business-related properties.

Properties and Actions

A tile informs about the current status of the subscription and allow getting more details by means of some action buttons.

../../../../../_images/subscription-tile1.png

Depending on the subscription status, a set of displayed properties and buttons may vary.

Typical subscription properties are as follows:

  • Status is shown by an icon and a text.

  • Expires shows the subscription expiration date.

  • Automatic Renewal indicates if an order for the subscription renewal will be generated automatically.

  • Renewal Price shows the price to be set in the renewal order.

  • Monthly Price or another type of billing price shows the recurring price for the subscription.

  • Warning or Error message attracts a user attention in a case when the current subscription period is close to the expiration date, or already expired, or suspended.

The buttons in the tile support the following actions:

  • View Subscription forwards a user to the standard view presenting the subscription details.

  • Renew forwards a user to the renewal order wizard.

  • Disable Automatic Renewal disables automatic generation of a renewal order.

  • Enable Automatic Renewal enables automatic generation of a renewal order.

  • Cancel Subscription forwards a user to the cancellation order wizard.

  • Upgrade to Paid is visible for a trial subscription. It forwards a user to the subscription upgrade wizard.

  • Pay Invoices is visible when the subscription status is On Credit Hold and the customer has unpaid invoices. It forwards a user to the payment wizard.

Using SubscriptionInfoTile

Typical Steps

Typical steps to use the module in an application view are as follows.

  1. In the init method, add the aps/biz/SubscriptionInfoTile module to the widget hierarchy returned by the method. In the following example, it is added with default values:

    return ["aps/Panel",[
       ["aps/Tiles", [
              ["aps/biz/SubscriptionInfoTile", {
               id: this.genId("subscription_status")
          }]
       ]],
       ["aps/Grid", { ... }, [ ... ]]
    ]];
    
  2. In the onContext method, specify the APS ID of the subscription to be displayed. For example:

    this.byId("subscription_status").set(
       "subscriptionId",
       aps.context.vars.context.aps.subscription
    );
    

Status Presentation

The module declares the following properties:

  • subscriptionId specifies the APS ID of the subscription as demonstrated in the example above.

  • title replaces the default “Subscription” title of the tile.

  • subscriptionStatusList is an object that defines a label and a CSS style for each subscription status. It is assigned the following structure by default:

    subscriptionStatusList: {
       "ordered": {
           label: "Registering",
           type: "default"
       },
       "active": {
           label: "Active",
           type: "success"
       },
       "canceling": {
           label: "Canceling",
           type: "default"
       },
       "graced": {
           label: "Expired",
           type: "danger"
       },
       "expired": {
           label: "Expired",
           type: "danger"
       },
       "terminated": {
           label: "Canceled",
           type: "disabled"
       }
    }
    

If necessary, redefine the subscriptionStatusList` object as needed.