Inactive Subscriptions Section

1
<section id="og-inactive-subscriptions">
2
    {% for subscription in subscriptions | reject('live') %} {% if index === 0 %}
3
  </h1>

1
<div class="og-inactive-subscription">
2
    {% set product = products | find(id=subscription.product) %} {% if product %}
3
    <div class="og-product">...</div>{# /og-product #} {% endif %}
4
  </div>
5
  {# /og-inactive-subscription #} {% endfor %}
6
</section>{# /og-inactive-subscriptions #}

1
<div class="og-product">
2
...
3
</div>{# /og-product #}

1
<div class="og-product-image-container">
2
  <img class="og-product-image" loading="lazy" alt="{{ product.name }}" src="{{ product.image_url | if_defined }}" />
3
</div>

1
  <div class="og-name-price-controls-container">
2
    <div class="og-description-and-controls">
3
      <div class="og-product-description">
4
        <h3 class="og-product-name"><a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
5
        </h3>
6
      <div class="og-subscription-quantity">{{ 'product_read_only_quantity' | t }}</div>
7
    </div>
8
  </div>
9
  <div class="og-inactive-subscription-actions">
10
    {% include 'reactivate-subscription' %}
11
    <div class="og-cancelled-text-date">
12
      <span class="og-cancelled-text">{{ 'subscription_inactive_cancelled_on' | t }}</span>
13
      <span class="og-cancelled-date">{{ subscription.cancelled | date }}</span>
14
    </div>
15
  </div>{# /og-inactive-subscription-actions #}

1
  <div class="og-description-and-controls">
2
    <div class="og-product-description">
3
      <h3 class="og-product-name">
4
        <a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
5
      </h3>
6
      <div class="og-subscription-quantity">{{ 'product_read_only_quantity' | t }}</div>
7
    </div>
8
  </div>

1
  <div class="og-inactive-subscription-actions">
2
    {% include 'reactivate-subscription' %}
3
    <div class="og-cancelled-text-date">
4
      <span class="og-cancelled-text">{{ 'subscription_inactive_cancelled_on' | t }}</span>
5
      <span class="og-cancelled-date">{{ subscription.cancelled | date }}</span>
6
    </div>
7
  </div>{# /og-inactive-subscription-actions #}

1
<div class="og-reactivate-subscription-button">
2
<button
3
class="og-button"
4
type="button"
5
@click={{ 'show_closest_modal' | js }}
6
>
7
{{ 'subscription_reactivate_button' | t }}
8
</button>
9
10
<dialog aria-hidden="true">
11
<form 
12
action="{{ 'reactivate_subscription' | action }}" 
13
name="og_subscription_reactivate"
14
@success={{ 'close_closest_modal' | js }}
15
@reset={{ 'close_closest_modal' | js }}
16
>
17
<div class="og-dialog-header">
18
<h5 class="og-dialog-title">{{ 'modal_subscription_reactivate_header' | t }}</h5>
19
<button type="reset" aria-label="{{ 'modal_close' | t }}" class="og-button og-button-close">{{ 'modal_close' | t }}</button>
20
</div>{# /og-dialog-header #}
21
22
<div class="og-dialog-body">
23
{{ 'modal_subscription_reactivate_body' | t }}
24
</div>{# /og-dialog-body #}
25
26
<div class="og-dialog-footer">
27
<input type="hidden" name="subscription" value="{{ subscription.public_id }}"/>
28
<input type="hidden" name="every" value="{{ subscription.every }}"/>
29
<input type="hidden" name="every_period" value="{{ subscription.every_period }}"/>
30
<button name="reactivate_subscription" type="submit" class="og-button">
31
{{ 'modal_reactivate_save' | t }}
32
</button>
33
</div>{# /og-dialog-footer #}
34
35
</form>
36
</dialog>
37
</div>{# /og-reactivate-subscription-button #}