Purpose: Use this foundational component to allow a user to manage their subscription in the Account Management/Self-Service Section of the app.
This component allows a user to change, or cancel their subscription as well as redirect to a different page in order to change their payment method.
Any updates to the address are applied to the delivery address and NOT the billing address.
Please note:
- There are only 2 available statuses: Active or Cancelled.
- The Cancelled status is for upcoming cancellations and cancellation that have happened in the past.
- The component shows the subscription as it is today, regardless of pending changes. It does not show future changes, except for your renewal date.
- The product displayed to the customer pulls the Display Name of the Limio Offer stored on the Limio Subscription.
- To do that, it looks at the currently active Limio Offer on the Limio Subscription. This will always be the offer the customer is currently on as of today, even if there are future pending changes.
- The Term pulls the Term of the Limio Offer on the Limio Subscription.
- The Description pulls the MMA Description of the Limio Offer on the Limio Subscription.
- If the subscription is missing term type or term length (for example, if it is an evergreen subscription), then the term column will not be displayed.
See Screenshots below to become more familiar with the various states.
Properties
label | type | default | options/infos |
Show cancel button? | boolean | FALSE | Determines whether the cancel button is shown |
Show go back button? | boolean | TRUE | Determines whether a button allowing the user to go back is shown |
Show exchange button? | boolean | TRUE |
Determines whether a button allowing the user to switch their subscription is available |
Show reactivate button for cancelled subscriptions? | boolean | FALSE | Determines whether a button allowing the user to navigate to a page where they can reactivate a cancelled subscription is available. |
Link to change payment page | string | /change-payment | Configures the redirect destination for the change payment button |
Link to re-activate page | string | /reactivate | Configures the redirect destination for the reactive subscription button |
Change payment button label | string | Change Payment | Configures the label for the change payment button |
Re-activate button label | string | Click here to reactivate | Configures the label for the re-activate subscription button |
Show payment amount? | boolean | FALSE | Determines whether the last payment amount is displayed |
Show end of subscription message for cancelled subscriptions | boolean | FALSE |
If enabled, a message will be shown under the table for cancelled subscriptions:
See image 1 below. |
Configures the heading for the subscription information table | string | Subscriptions | |
Cancel section heading | string | Cancel my Subscription | |
Go back heading | string | Return | |
Not found text | string | Sorry! We couldn't find any subscription information. Contact our support team for more information. |
Redirect URL if the switch is processed successfully |
Limit Subscriptions? | boolean | TRUE |
Configures whether we limit how many subscriptions are shown |
Subscription Limit | number | 3 |
Configures whether the number of subscriptions to be shown if limitSubscriptions is enabled |
Link to cancel page | string | /cancel |
Configures redirect destination for cancel subscription button |
Link to switch page | string | /switch |
Configues redirect destination for switch subscription button |
Link to go back | string | / |
Configures redirect destination for go back button |
Product name | string | limio |
Configures a product name to show on the Table. If you have multiple products or brands, leave this prop empty. If empty, the default Limio logic will be:
|
Pending change message | string | You have a pending change to your subscription |
Configures the message shown to the user when they have a pending change to their subscription |
Edit address button text | string | Edit address |
Configures label for edit address button |
First name label | string | First name | |
Last name label | string | Last name | |
Delivery address line 1 label | string | Address line 1 | |
Delivery address line 2 label | string | Address line 2 | |
Delivery city label | string | City | |
Delivery county/state label | string | {{state_name_type}} | |
Delivery postal code/ZIP code label | string | {{zip_name_type}} | |
Delivery country label | string | Country | |
Delivery company label | string | Company | |
Invalid first name message | string | First name is required |
|
Invalid last name message | string | Last name is required |
|
Invalid address message | string | Address is required |
|
Invalid city message | string | City is required |
|
Invalid state/county message | string | {{state_name_type}} is required |
|
Invalid zip/postal code message | string | {{zip_name_type}} is required |
|
Invalid country message | string | Country is required |
|
Address change success text | string | Your address details have been updated |
|
Highlight optional fields? | boolean | FALSE |
|
Display company field? | boolean | FALSE |
|
Delivery country restricted message | string | If you are unable to change your delivery country please contact us by phone |
|
Component Id | string | customer-order-limio |
|
Display Description for the offer | boolean | FALSE | |
Subscription Line Item Heading | string | empty | |
Delivery address position | dropdown | In orders table | Options include: in orders table, below the orders table, hidden |
Screenshots
Active digital subscription:
Active physical subscription:
Cancelled subscription:
Subscription pending change:
One-off subscription:
Gift recipient subscription:
Known limitation:
Upgrading or downgrading on the purchase date may not be accurately reflected in the orders table, as it pertains to a specific edge case limitation that is not slated for resolution.
Comments
0 comments
Please sign in to leave a comment.