subscriptions.html

{% extends "saas/base_dashboard.html" %}

{% block saas_title %}{% trans %}Subscriptions{% endtrans %}{% endblock %}

{% block saas_content %}
<subscription-list-container inline-template class="pt-3" id="subscriptions">
  <div>
    <ul class="nav nav-tabs dashboard-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" href="#active_subscriptions" data-bs-toggle="tab">{% trans %}Active{% endtrans %}</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#expired_subscriptions" data-bs-toggle="tab">{% trans %}Expired{% endtrans %}</a>
      </li>
    </ul>
    <div class="tab-content">
      <subscription-list inline-template id="active_subscriptions"
          class="tab-pane active"
          role="tabpanel"
          @expired="expired">
        <div data-trip data-trip-index="1"
             data-trip-content="<h2>{% trans %}Subscriptions{% endtrans %}</h2><p>{% trans %}List of all your active subscriptions.{% endtrans %}<br />{% trans %}You can manage all your active subscriptions here.{% endtrans %}</p><em>{% trans %}Use keyboard navigation or click 'Next' to move forward.{% endtrans %}</em>"
             data-trip-position="screen-center">
          {% if plans %}
          <div class="row my-3">
            <div class="col-md-8">
              <form id="subscribe" @submit.prevent="subscribe({slug: '{{organization.slug}}', full_name: '{{organization.full_name}}'})">
                <div class="row">
                  <div class="col-md-8">
                    <select class="form-control me-2" name="plan" v-model="plan" aria-label="{% trans %}Select a plan{% endtrans %}">
                      <option selected
                              value="{}"
                              :value="{}">{% trans %}Select a plan...{% endtrans %}</option>
                      {% for choice in plans %}
                      <option value='{"slug":"{{choice.slug}}","organization":"{{choice.organization.slug}}"}'
                              :value='{"slug":"{{choice.slug}}","organization":"{{choice.organization.slug}}"}'>{{choice.title}}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <div class="col-md-4 text-end">
                    <div class="d-grid gap-2">
                      <button type="submit" class="btn btn-primary"><i class="fa-solid fa-plus"></i> {% trans %}Subscribe{% endtrans %}</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          {% endif %}
          <div id="subscriptions-list-container" class="table-responsive mb-4">
            <table class="table" infinite-wrapper>
              <thead>
                <tr>
                  <th>
                    {% trans %}Plan{% endtrans %}
                    <a class="btn-sort"
                       href="#"
                       @click.prevent="sortBy('plan')"
                       aria-label="{% trans %}Sort by plan{% endtrans %}"
                    >
                      <i :class="sortIcon('plan')"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Until{% endtrans %}
                    <a class="btn-sort"
                       href="#"
                       @click.prevent="sortBy('ends_at')"
                       aria-label="{% trans %}Sort by until{% endtrans %}"
                    >
                      <i :class="sortIcon('ends_at')"></i>
                    </a>
                  </th>
                  <th><span class="visually-hidden">{% trans %}Time remaining{% endtrans %}</span></th>
                  <th><span class="visually-hidden">{% trans %}Actions{% endtrans %}</span></th>
                </tr>
              </thead>
              <tbody>
                <tr v-show="!itemsLoaded">
                  <td colspan="4">
                    <div class="h3 text-center"><i class="fa-solid fa-refresh fa-spin fa-2x"></i></div>
                  </td>
                </tr>
                <tr v-show="itemsLoaded && items.count === 0" v-cloak>
                  <td colspan="4">
                    <h3 class="text-center h5"><em>{% trans %}No subcriptions{% endtrans %}<span v-show="params.q"> [[params.q]]</span></em></h3>
                  </td>
                </tr>
              </tbody>
              <tbody v-show="itemsLoaded && items.results.length > 0" v-cloak>
                <tr :id="entry.plan.slug" :class="endsSoon(entry)" v-for="(entry, index) in items.results">
                  <td>
                    <a :href="entry.app_url">[[entry.plan.title]]</a>
                  </td>
                  <td v-if="entry.editable">
                    {% include "_entry_ends_at_field.html" %}
                  </td>
                  <td v-if="!entry.editable">
                    [[entry.ends_at ? ($globals.humanizeDate(entry.ends_at)) : "{% trans %}Never{% endtrans %}" ]]
                  </td>
                  <td>
                    [[$globals.humanizeTimeDelta(entry.ends_at, ends_at)]]
                  </td>
                  <td class="text-end" v-if="!entry.request_key">
                    <button class="btn btn-danger unsubscribe"
                      data-bs-toggle="modal" data-bs-target="#unsubscribe-action"
                      @click="unsubscribeConfirm(entry.profile.slug, entry.plan.slug)"
                      v-if="!entry.grant_key">
                      {% trans %}Unsubscribe Now{% endtrans %}
                    </button>
                    <a class="btn btn-primary"
                       :href="acceptGrantURL(entry.profile.slug, entry.grant_key)"
                       v-if="entry.grant_key">
                      {% trans %}Subscribe{% endtrans %}
                    </a>
                    <button class="btn btn-danger unsubscribe"
                      @click="unsubscribe(entry.profile.slug, entry.plan.slug)"
                      v-if="entry.grant_key">
                      <i class="fa-solid fa-times"></i>
                    </button>
                  </td>
                  <td class="text-end" v-if="entry.request_key && entry.editable">
                    <button class="btn btn-danger unsubscribe"
                            data-bs-toggle="modal" data-bs-target="#unsubscribe-action"
                            @click="unsubscribeConfirm(entry.profile.slug, entry.plan.slug)">
                      {% trans %}Deny{% endtrans %}
                    </button>
                    <button class="btn btn-primary"
                            @click="acceptRequest(entry.plan.profile, entry.request_key)">
                      {% trans %}Accept subscription{% endtrans %}
                    </button>
                  </td>
                  <td class="text-end" v-if="entry.request_key && !entry.editable">
                    {% trans %}Request pending approval ...{% endtrans %}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          {% include "_pagination.html" %}
          <!-- modal dialog to confirm unsubscribe -->
          <div class="modal fade"
               id="unsubscribe-action" tabindex="-1" role="dialog"
               aria-labelledby="{% trans %}Unsubscribe{% endtrans %}"
               aria-hidden="true">
            <form class="modal-dialog" method="post" action="." @submit.prevent="unsubscribe">
              <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">{% trans %}Unsubscribe{% endtrans %} ...</h5>
                  <button type="button" class="btn-close"
                          data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body">
                  <p>
                    {% trans plan_name="[[toDelete.plan]]" %}You are about to unsubscribe from <em>{{plan_name}}</em>{% endtrans %}.
                    {% trans %}This operation cannot be reversed.{% endtrans %}
                  </p>
                  <p>
                    {% trans %}Are you sure you want to continue?{% endtrans %}
                  </p>
                  <div class="modal-footer">
                    <button id="cancel-unsubscribe"
                            class="btn btn-outline-primary"
                            data-bs-dismiss="modal">
                      {% trans %}Cancel{% endtrans %}
                    </button>
                    <button type="submit" id="unsubscribe-btn"
                            class="btn btn-danger"
                            data-bs-dismiss="modal">
                      {% trans %}Unsubscribe{% endtrans %}
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div><!-- /modal dialog to confirm unsubscribe -->
      </subscription-list> <!-- /controller -->
      <expired-subscription-list inline-template id="expired_subscriptions"
          class="tab-pane" role="tabpanel" ref="expired">
        <div>
          <div id="expired-subscriptions-list-container"
               class="table-responsive mb-4">
            <table class="table" infinite-wrapper>
              <thead>
                <tr>
                  <th>
                    {% trans %}Plan{% endtrans %}
                    <a class="btn-sort"
                       href="#"
                       @click.prevent="sortBy('plan')"
                       aria-label="{% trans %}Sort by plan{% endtrans %}"
                    >
                      <i :class="sortIcon('plan')"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Until{% endtrans %}
                    <a class="btn-sort"
                       href="#"
                       @click.prevent="sortBy('ends_at')"
                       aria-label="{% trans %}Sort by until{% endtrans %}"
                    >
                      <i :class="sortIcon('ends_at')"></i>
                    </a>
                  </th>
                  <th><span class="visually-hidden">{% trans %}Time remaining{% endtrans %}</span></th>
                  <th><span class="visually-hidden">{% trans %}Actions{% endtrans %}</span></th>
                </tr>
              </thead>
              <tbody>
                <tr v-show="!itemsLoaded">
                  <td colspan="4">
                    <div class="h3 text-center"><i class="fa-solid fa-refresh fa-spin fa-2x"></i></div>
                  </td>
                </tr>
                <tr v-show="itemsLoaded && items.count === 0" v-cloak>
                  <td colspan="4">
                    <h5 class="text-center"><em>{% trans %}No subcriptions{% endtrans %}<span v-show="params.q"> [[params.q]]</span></em></h5>
                  </td>
                </tr>
              </tbody>
              <tbody v-show="itemsLoaded && items.results.length > 0" v-cloak>
                <tr :class="endsSoon(entry)" v-for="(entry, index) in items.results">
                  <td>
                    <a :href="entry.app_url">[[entry.plan.title]]</a>
                  </td>
                  <td>
                    <span class="d-inline-block">
                      [[entry.ends_at ? $globals.humanizeDate(entry.ends_at) : "{% trans %}Never{% endtrans %}" ]]
                    </span>
                  </td>
                  <td>
                    [[$globals.humanizeTimeDelta(entry.ends_at, ends_at)]]
                  </td>
                  <td>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          {% include "_pagination.html" %}
        </div> <!-- /controller -->
      </expired-subscription-list>
    </div>
  </div>
</subscription-list-container>
{% endblock %}