The Subscription LifecycleLegacy Subscription Manager v0 Components & ContainersOrders Unsent Section

Change Date

An overview of the change date component in the legacy Subscription Manager v0
View as Markdown

This article details one component in a larger series about the Subscription Manager. For an overview take a look at Subscription Manager Components & Containers.

Change Date allows a customer to change the date of their upcoming order. The code that controls the modal can be found in change-date.liquid.

1<div class="og-change-shipment-date-button">
2<button class="og-button" type="button" @click={{ 'show_closest_modal' | js }}>
3{{ 'shipment_change_date_button' | t }}
4</button>
5
6<dialog aria-hidden="true">
7<form action="{{ 'change_shipment_date' | action }}" @success={{ 'close_closest_modal' | js }} @reset={{ 'close_closest_modal' | js }}>
8<div class="og-dialog-header">
9<h5 class="og-dialog-title">{{ 'modal_change_date_header' | t }}</h5>
10<button class="og-button og-button-close" type="reset" aria-label="{{ 'modal_close' | t }}" >{{ 'modal_close' | t }}</button>
11</div>{# /og-dialog-header #}
12
13<div class="og-dialog-body">
14<input type="hidden" name="order" value="{{ order.public_id }}"/>
15<input type="date" name="shipment_date" value="{{ order.place }}"/>
16</div>{# /og-dialog-body #}
17
18<div class="og-dialog-footer">
19<button class="og-button" type="submit" name="change_shipment_date">{{ 'modal_change_date_save' | t }}</button>
20</div>{# /og-dialog-footer #}
21</form>
22</dialog>
23</div>