Status Indicators

Account Status

Shows account status indicator with a status of [active|removed|revoked].

HTML

<div class="t-content">
    <account-status is-active="true" login-revoked="true"></account-status>
    <account-status is-active="true"></account-status>
    <account-status is-active="false"></account-status>
</div>

Association Status

Shows assocation status indicator with a status of [active|removed].

HTML

<div class="t-content">
    <association-status is-active="true"></association-status>
    <association-status is-active="false"></association-status>
</div>

Bulk Order Item Status

Shows Bulk Order Item status indicator with the status details in tooltip on hover action(only for error/in progress types).

Status indicators with label and without quantity, the default

Note: The first "Import Processing" above (i.e. status "1") is a catch-all and generally shouldn't be seen.

Status indicators as icon-only

Status indicators with quantity

Status indicators as text-only with quantity

HTML

<p>Status indicators with label and without quantity, the default</p>
<div class="t-content">
    <bulk-order-item-status status="1"></bulk-order-item-status>
    <bulk-order-item-status status="2"></bulk-order-item-status>
    <bulk-order-item-status status="3"></bulk-order-item-status>
    <bulk-order-item-status status="4"></bulk-order-item-status>
    <bulk-order-item-status status="5"></bulk-order-item-status>
    <bulk-order-item-status status="6"></bulk-order-item-status>
    <bulk-order-item-status status="7"></bulk-order-item-status>
    <bulk-order-item-status status="8"></bulk-order-item-status>
    <bulk-order-item-status status="9"></bulk-order-item-status>
    <bulk-order-item-status status="10"></bulk-order-item-status>
    <bulk-order-item-status status="11"></bulk-order-item-status>
    <bulk-order-item-status status="12"></bulk-order-item-status>
    <bulk-order-item-status status="13"></bulk-order-item-status>
    <p>
        <em>Note: The first "Import Processing" above (i.e. status "1") is a catch-all and generally shouldn't be seen.</em>
    </p>
</div>

<p>Status indicators as icon-only</p>
<div class="t-content">
    <bulk-order-item-status status="2" show-status-title="false"></bulk-order-item-status>
    <bulk-order-item-status status="3" show-status-title="false"></bulk-order-item-status>
    <bulk-order-item-status status="4" show-status-title="false"></bulk-order-item-status>
</div>

<p>Status indicators with quantity</p>
<div class="t-content">
    <bulk-order-item-status status="8" quantity="3"></bulk-order-item-status>
    <bulk-order-item-status status="2" quantity="2"></bulk-order-item-status>
    <bulk-order-item-status status="3" quantity="1"></bulk-order-item-status>
    <bulk-order-item-status status="7" quantity="1"></bulk-order-item-status>
</div>

<p>Status indicators as text-only with quantity</p>
<div class="t-content">
    <bulk-order-item-status status="8" quantity="3" show-status-icon="false"></bulk-order-item-status>
    <bulk-order-item-status status="2" quantity="2" show-status-icon="false"></bulk-order-item-status>
    <bulk-order-item-status status="3" quantity="1" show-status-icon="false"></bulk-order-item-status>
    <bulk-order-item-status status="7" quantity="1" show-status-icon="false"></bulk-order-item-status>
</div>

Bulk Order Item Status (Multiple Grouped)

Shows one or more Bulk Order Item status indicators in a group.

Single status with a single item.

Single status with multiple items.

Multiple statuses with a single item and "error" statuses are displayed first.

Multiple statuses and multiple items.

Note: This contains more statuses and is longer than would be likely, but is meant to illustrate the various "stages" (e.g. Post-Processing or Submission).

HTML

<div class="t-content">
    <div ng-controller="StatusIndicatorExampleController as controller">
        <p>Single status with a single item.</p>
        <bulk-order-item-statuses
            statuses="controller.singleStatus">
        </bulk-order-item-statuses>

        <p>Single status with multiple items.</p>
        <bulk-order-item-statuses
            statuses="controller.singleStatusAndMultipleItems">
        </bulk-order-item-statuses>

        <p>Multiple statuses with a single item and "error" statuses are displayed first.</p>
        <bulk-order-item-statuses
            statuses="controller.multipleStatuses">
        </bulk-order-item-statuses>

        <p>
            Multiple statuses and multiple items.
        </p>
        <bulk-order-item-statuses
            statuses="controller.multipleStatusesAndMultipleItems">
        </bulk-order-item-statuses>
        <p>
            <em>Note: This contains more statuses and is longer than would be likely, but is meant to illustrate the various "stages" (e.g. Post-Processing or Submission).</em>
        </p>
    </div>
</div>

Bulk Service Item Status

Shows the status of a bulk service item on the bulk services page

HTML

<div class="t-content">
    <bulk-service-item-status status="'1'"></bulk-service-item-status>
    <bulk-service-item-status status="'2'"></bulk-service-item-status>
    <bulk-service-item-status status="'3'"></bulk-service-item-status>
    <bulk-service-item-status status="'4'"></bulk-service-item-status>
</div>

Coupon Redemption Code Status

Shows the status of a coupon redemption code and the amount redeemed

HTML

<div class="t-content">
    <coupon-redemption-code-status></coupon-redemption-code-status>
    <coupon-redemption-code-status redemptions="1"></coupon-redemption-code-status>
    <coupon-redemption-code-status redemptions="5" max-redemptions="5"></coupon-redemption-code-status>
    <coupon-redemption-code-status redemptions="3" max-redemptions="5"></coupon-redemption-code-status>
</div>

Environment Copy Status

Shows the status of the exports and imports of the environment copy

HTML

<div class="t-content">
    <environment-copy-status status="'0'"></environment-copy-status>
    <environment-copy-status status="'1'"></environment-copy-status>
    <environment-copy-status status="'2'"></environment-copy-status>
    <environment-copy-status status="'3'"></environment-copy-status>
    <environment-copy-status status="'4'"></environment-copy-status>
</div>

Expired Status

Shows the statuses of an item and the current different states(Active,Removed,Expired) it currently is in.

Removed

Expired

HTML

<div class="t-content" ng-init="example = {isRemoved: false, isExpired: true}">
    <expired-status is-removed="example.isRemoved" is-expired="example.isExpired"></expired-status>
</div>

<div class="u-flex u-mt++">
    <div class="u-flex u-flexMiddle u-ml+">
        <input type="checkbox" value="isRemoved" ng-model="example.isRemoved">
        <label>Removed</label>
    </div>
    <div class="u-flex u-flexMiddle u-ml+">
        <input type="checkbox" value="isExpired" ng-model="example.isExpired">
        <label>Expired</label>
    </div>
</div>

Extension Status

Shows subscriber offer extension status with a status of [active|upcoming].

HTML

<div class="t-content">
    <extension-status status="'1'"></extension-status>
    <extension-status status="'2'"></inventory-status>
</div>

General Status

Shows the general status

HTML

<div class="t-content">
    <general-status status="'1'"></general-status>
    <general-status status="'2'"></general-status>
    <general-status status="'3'"></general-status>
    <general-status status="'4'"></general-status>
</div>

Gift Card Status

Shows the (Claimed|Unclaimed) status of a gift card item.

Claimed

HTML

<div class="t-content" ng-init="example = {isClaimed: true}">
    <gift-card-status is-claimed="example.isClaimed"></gift-card-status>
</div>

<div class="u-flex u-mt++">
    <div class="u-flex u-flexMiddle u-ml+">
        <input type="checkbox" value="isClaimed" ng-model="example.isClaimed">
        <label>Claimed</label>
    </div>
</div>

Inventory Status

Shows subscriber inventory status with a status of [active|removed|suspended|pending|unknown].

HTML

<div class="t-content">
    <inventory-status status="'1'"></inventory-status>
    <inventory-status status="'2'"></inventory-status>
    <inventory-status status="'3'"></inventory-status>
    <inventory-status status="'4'"></inventory-status>
    <inventory-status status="'0'"></inventory-status>
</div>

Inventory Status Indicator

Shows subscriber inventory status with a status of [active|removed|suspended|pending approval|pending suspension].

HTML

<div class="t-content">
    <inventory-status-indicator status="'1'"></inventory-status-indicator>
    <inventory-status-indicator status="'2'"></inventory-status-indicator>
    <inventory-status-indicator status="'3'"></inventory-status-indicator>
    <inventory-status-indicator status="'4'"></inventory-status-indicator>
    <inventory-status-indicator status="'5'"></inventory-status-indicator>
</div>

Inventory Internal Status

Shows subscriber inventory provider state status with a status of [active|returned|removed].

Default: No Label

With the Label

HTML

<p>
    Default: No Label
</p>
<div class="t-content">
    <inventory-internal-status status="'1'"></inventory-internal-status>
    <inventory-internal-status status="'2'"></inventory-internal-status>
    <inventory-internal-status status="'3'"></inventory-internal-status>
</div>
<p>
    With the Label
</p>
<div class="t-content">
    <inventory-internal-status status="'1'" is-label-shown="true"></inventory-internal-status>
    <inventory-internal-status status="'2'" is-label-shown="true"></inventory-internal-status>
    <inventory-internal-status status="'3'" is-label-shown="true"></inventory-internal-status>
</div>

Inventory State Status

Shows subscriber inventory provider state status with a status of [canceled|held|idle|in_use|quarantined|unknown].

HTML

<div class="t-content" ng-controller="StatusIndicatorExampleController as controller">
    <inventory-state-status status="'1'"
        status-codes="controller.inventoryStateStatusCodes">
    </inventory-state-status>
    <inventory-state-status status="'2'"
        status-codes="controller.inventoryStateStatusCodes">
    </inventory-state-status>
    <inventory-state-status status="'3'"
        status-codes="controller.inventoryStateStatusCodes">
    </inventory-state-status>
    <inventory-state-status status="'4'"
        status-codes="controller.inventoryStateStatusCodes">
    </inventory-state-status>
    <inventory-state-status status="'5'"
        status-codes="controller.inventoryStateStatusCodes">
    </inventory-state-status>
    <inventory-state-status status="'0'"
        status-codes="controller.inventoryStateStatusCodes">
    </inventory-state-status>
</div>

Locker Item Status

Shows product's order status [active|removed|active_pending|remove_pending|expired].

HTML

<div class="t-content">

    <!-- VALID STATUS CODES MAY INCLUDE NUMBER AND STRING TYPES IN THIS RANGE OF VALUES [ 1 to 5 ] -->
    <div>
        <locker-item-status status="'1'"></locker-item-status>
        <locker-item-status status="2"></locker-item-status>
        <locker-item-status status="'3'"></locker-item-status>
        <locker-item-status status="4"></locker-item-status>
        <locker-item-status status="'5'"></locker-item-status>
    </div>

</div>

Offer Status

Shows offer status indicator with a status of [active|removed|pending_active|pending_removed].

HTML

<div class="t-content">
    <offer-status status="'1'"></offer-status>
    <offer-status status="'2'"></offer-status>
    <offer-status status="'3'"></offer-status>
    <offer-status status="'4'"></offer-status>
    <offer-status status="'6'"></offer-status>
    <offer-status status="'8'"></offer-status>
</div>

Offer Option Status

Shows offer option item status indicator with a status of [added|removed]. This indicator is label-less.

HTML

<div class="t-content">
    <offer-option-status status="'3'"></offer-option-status>
    <offer-option-status status="'4'"></offer-option-status>
</div>

Order Status

Shows order status indicator with a status of [pending|open|complete|canceled].

HTML

<div class="t-content">
    <order-status status="'0'"></order-status>
    <order-status status="'1'"></order-status>
    <order-status status="'2'"></order-status>
    <order-status status="'3'"></order-status>
</div>

Order Item Status

Shows the status of the order items on Change of Service orders. This status indicator is label-less, as the label is the name of the service, which is dynamic and provided by the implementor of this component.

HTML

<div class="t-content">
    <order-item-status status="1" hide-label="true"></order-item-status><!-- Active -->
    <order-item-status status="2" hide-label="true"></order-item-status><!-- Removed -->
    <order-item-status status="3" hide-label="true"></order-item-status><!-- Suspended -->
    <order-item-status status="4" hide-label="true"></order-item-status><!-- Pending -->
</div>

Payment Status

Shows order payment status indicator with a status of [complete|pending|canceled].

HTML

<div class="t-content">
    <payment-status status="'1'"></payment-status>
    <payment-status status="'2'"></payment-status>
    <payment-status status="'3'"></payment-status>
</div>

Payment Instrument Status

Shows payment instrument status indicator with a status of [active|pending|removed|suspended|unknown].

HTML

<div class="t-content">
    <payment-instrument-status status="'1'"></payment-instrument-status>
    <payment-instrument-status status="'2'"></payment-instrument-status>
    <payment-instrument-status status="'3'"></payment-instrument-status>
    <payment-instrument-status status="'4'"></payment-instrument-status>
    <payment-instrument-status status="'0'"></payment-instrument-status>
</div>

Product Status

Shows product status indicator with a status of [active|pending|removed|suspended|unknown].

HTML

<div class="t-content">
    <product-status status="'1'"></product-status>
    <product-status status="'2'"></product-status>
    <product-status status="'3'"></product-status>
    <product-status status="'4'"></product-status>
    <product-status status="'0'"></product-status>
</div>

Purchased Status

Shows purchased status indicator with a status of [purchased].

HTML

<div class="t-content">
    <purchased-status is-purchased="true" show-label="true"></purchased-status>
    <!-- show's nothing, not purchased -->
    <purchased-status is-purchased="false" show-label="true"></purchased-status>
</div>

Service Status

Shows service status indicator with a status of [active|removed|suspended|pending|unknown].

HTML

<div class="t-content">
    <service-status status="1"></service-status>
    <service-status status="2"></service-status>
    <service-status status="3" hide-label="true"></service-status>
    <service-status status="4"></service-status>
    <service-status status="6"></service-status>
    <service-status
        status="6"
        suspension-type="'Network Only'"
        tooltip-content="{suspendType: 'Network Only', suspendedDate: '03/03/2020'}">
    </service-status>
    <service-status status="8" 
        suspension-type="'Network Only'" 
        suspension-detail="{suspendTypeCode: 'Network Only', SuspendExecutionDate: '2021-04-01T21:36:30.417Z'}">
    </service-status>
</div>

Service Lifecycle Status

Shows service status indicator with a popup indicating the service status and lifecycle status(Lifecycle status is visible only in the tooltip). Service status [active|removed|suspended|pending|unknown] and lifecycle status of [Active|Idle|Test|Suspended|Frozen|Deactivated|Cancelled].

HTML

<div class="t-content">
    <service-status status="1" lifecycle-status="'Suspended'"></service-status>
    <service-status status="2" lifecycle-status="'Idle'"></service-status>
    <service-status status="3" lifecycle-status="'Active'"></service-status>
    <service-status status="4" lifecycle-status="'Test'"></service-status>
    <service-status status="6" lifecycle-status="'Frozen'"></service-status>
    <service-status status="6" lifecycle-status="'Deactivated'"></service-status>
    <service-status status="1" lifecycle-status="'Cancelled'"></service-status>
</div>

Subscriber Status

Shows subscriber status indicator with a status of [active|removed|suspended|pending|unknown].

HTML

<div class="t-content">
    <subscriber-status status="'1'"></subscriber-status>
    <subscriber-status status="'2'"></subscriber-status>
    <subscriber-status status="'3'"></subscriber-status>
    <subscriber-status status="'4'"></subscriber-status>
    <subscriber-status status="'0'"></subscriber-status>
</div>

Subscription Status

Shows subscription status indicator with a status of [active|removed|suspended|pending|unknown].

HTML

<div class="t-content">
    <subscription-status status="'1'"></subscription-status>
    <subscription-status status="'2'"></subscription-status>
    <subscription-status status="'3'"></subscription-status>
    <subscription-status status="'4'"></subscription-status>
    <subscription-status status="'0'"></subscription-status>
</div>

Simple Status

Generic status indicator with a status of [active|inactive].

HTML

<div class="t-content">
    <simple-status is-active="true"></simple-status>
    <simple-status is-active="false"></simple-status>
</div>

Transaction Result

Shows subscriber transaction result indicator with a status of [success|remomissing_fieldsved|invalid_fields|system_failure|server_timeout|service_timeout|processor_timeout|processor_failure|invalid_configuration|gateway_communication_failure|payment_failure].

HTML

<div class="t-content">
    <transaction-result result="0"></transaction-result>
    <transaction-result result="1"></transaction-result>
    <transaction-result result="2"></transaction-result>
    <transaction-result result="3"></transaction-result>
    <transaction-result result="4"></transaction-result>
    <transaction-result result="5"></transaction-result>
    <transaction-result result="6"></transaction-result>
    <transaction-result result="7"></transaction-result>
    <transaction-result result="8"></transaction-result>
    <transaction-result result="9"></transaction-result>
    <transaction-result result="10"></transaction-result>
</div>

Workflow Status

Shows workflow status with a status of [cancel_in_process|canceled|complete|error|in_process|in_process_retry|jeopardy|open|open_cancel|open_retry|overdue|scheduled|terminated].

HTML

<div class="t-content">
    <workflow-status status="'1'"></workflow-status>
    <workflow-status status="'2'"></workflow-status>
    <workflow-status status="'3'"></workflow-status>
    <workflow-status status="'6'"></workflow-status>
    <workflow-status status="'7'"></workflow-status>
    <workflow-status status="'8'"></workflow-status>
    <workflow-status status="'9'"></workflow-status>
    <workflow-status status="'10'"></workflow-status>
    <workflow-status status="'11'"></workflow-status>
    <workflow-status status="'12'"></workflow-status>
    <workflow-status status="'13'"></workflow-status>
    <workflow-status status="'14'"></workflow-status>
    <workflow-status status="'15'"></workflow-status>
</div>

Print Status Item Status

Shows Bill run print status item status with a status of [Success | Failure | Pending | InProgress].

HTML

<div class="t-content">
    <print-status-item-status status="'Success'"></print-status-item-status>
    <print-status-item-status status="'Pending'"></print-status-item-status>
    <print-status-item-status status="'InProgress'"></print-status-item-status>
    <print-status-item-status status="'Failure'"></print-status-item-status>
    <print-status-item-status status="'Rendered'"></print-status-item-status>
</div>

Account Status

Shows account status indicator with a status of [active|removed|revoked].

Association Status

Shows assocation status indicator with a status of [active|removed].

Bulk Order Item Status

Shows Bulk Order Item status indicator with the status details in tooltip on hover action(only for error/in progress types).

Bulk Order Item Status (Multiple Grouped)

Shows one or more Bulk Order Item status indicators in a group.

Bulk Service Item Status

Shows the status of a bulk service item on the bulk services page

Coupon Redemption Code Status

Shows the status of a coupon redemption code and the amount redeemed

Environment Copy Status

Shows the status of the exports and imports of the environment copy

Expired Status

Shows the statuses of an item and the current different states(Active,Removed,Expired) it currently is in.

Extension Status

Shows subscriber offer extension status with a status of [active|upcoming].

General Status

Shows the general status

Gift Card Status

Shows the (Claimed|Unclaimed) status of a gift card item.

Inventory Status

Shows subscriber inventory status with a status of [active|removed|suspended|pending|unknown].

Inventory Status Indicator

Shows subscriber inventory status with a status of [active|removed|suspended|pending approval|pending suspension].

Inventory Internal Status

Shows subscriber inventory provider state status with a status of [active|returned|removed].

Inventory State Status

Shows subscriber inventory provider state status with a status of [canceled|held|idle|in_use|quarantined|unknown].

Locker Item Status

Shows product's order status [active|removed|active_pending|remove_pending|expired].

Offer Status

Shows offer status indicator with a status of [active|removed|pending_active|pending_removed].

Offer Option Status

Shows offer option item status indicator with a status of [added|removed]. This indicator is label-less.

Order Status

Shows order status indicator with a status of [pending|open|complete|canceled].

Order Item Status

Shows the status of the order items on Change of Service orders. This status indicator is label-less, as the label is the name of the service, which is dynamic and provided by the implementor of this component.

Payment Status

Shows order payment status indicator with a status of [complete|pending|canceled].

Payment Instrument Status

Shows payment instrument status indicator with a status of [active|pending|removed|suspended|unknown].

Product Status

Shows product status indicator with a status of [active|pending|removed|suspended|unknown].

Purchased Status

Shows purchased status indicator with a status of [purchased].

Service Status

Shows service status indicator with a status of [active|removed|suspended|pending|unknown].

Service Lifecycle Status

Shows service status indicator with a popup indicating the service status and lifecycle status(Lifecycle status is visible only in the tooltip). Service status [active|removed|suspended|pending|unknown] and lifecycle status of [Active|Idle|Test|Suspended|Frozen|Deactivated|Cancelled].

Subscriber Status

Shows subscriber status indicator with a status of [active|removed|suspended|pending|unknown].

Subscription Status

Shows subscription status indicator with a status of [active|removed|suspended|pending|unknown].

Simple Status

Generic status indicator with a status of [active|inactive].

Transaction Result

Shows subscriber transaction result indicator with a status of [success|remomissing_fieldsved|invalid_fields|system_failure|server_timeout|service_timeout|processor_timeout|processor_failure|invalid_configuration|gateway_communication_failure|payment_failure].

Workflow Status

Shows workflow status with a status of [cancel_in_process|canceled|complete|error|in_process|in_process_retry|jeopardy|open|open_cancel|open_retry|overdue|scheduled|terminated].

Date Tooltip Indicator

Shows Tooltip with a Date

Print Status Item Status

Shows Bill run print status item status with a status of [Success | Failure | Pending | InProgress].