Sith/eboutic/templates/eboutic/eboutic_checkout.jinja

{% extends "core/base.jinja" %}

{% block notifications %}
  {# Notifications are moved under the billing form #}
{% endblock %}

{% block title %}
  {% trans %}Basket state{% endtrans %}
{% endblock %}

{% block additional_js %}
  <script type="module" src="{{ static('bundled/eboutic/checkout-index.ts') }}"></script>
{% endblock %}

{% block content %}
  <h3>{% trans %}Eboutic{% endtrans %}</h3>

  <script type="text/javascript">
    const billingInfos = {{ billing_infos|safe }};
  </script>

  <div x-data='etransaction(
               billingInfos,
               { id: {{ basket.id }}, timeout: new Date("{{ basket.date + settings.SITH_EBOUTIC_BASKET_TIMEOUT }}") }
               )'>
    <p>{% trans %}Basket: {% endtrans %}</p>
    <table>
      <thead>
        <tr>
          <td>Article</td>
          <td>{% trans %}Quantity{% endtrans %}</td>
          <td>{% trans %}Unit price{% endtrans %}</td>
        </tr>
      </thead>
      <tbody>
        {% for item in basket.items.all() %}
          <tr>
            <td>{{ item.label }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.unit_price }} €</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

    <p>
      <strong>{% trans %}Basket amount: {% endtrans %}{{ "%0.2f"|format(basket.total) }} €</strong>

      {% if customer_amount != None %}
        <br>
        {% trans %}Current account amount: {% endtrans %}
        <strong>{{ "%0.2f"|format(customer_amount) }} €</strong>

        {% if not basket.contains_refilling_item %}
          <br>
          {% trans %}Remaining account amount: {% endtrans %}
          <strong>{{ "%0.2f"|format(customer_amount|float - basket.total) }} €</strong>
        {% endif %}
      {% endif %}
    </p>
    <br>
    {% if settings.SITH_EBOUTIC_CB_ENABLED %}
      <div @htmx:after-request="fill">
        {{ billing_infos_form }}
      </div>
    {% endif %}
    {% include "core/base/notifications.jinja" %}
    {% if settings.SITH_EBOUTIC_CB_ENABLED or (basket.total <= user.account_balance and not basket.contains_refilling_item) %}
      {# don't display the cgv form if no payment mean is available #}
      <form id="cgv-form" x-ref="cgvForm">
      {# In order to have one CGV button for both payment means,
         we have a third dummy form, containing only the cgv button,
         which validation is triggered when one of the two other forms is submitted.
         If the validation of this form fails, the submit event will be cancelled. #}
        <div class="form-group">
          <input
            type="checkbox"
            id="cgv-checkbox"
            name="cgv"
            required
            {% if basket.is_expired %}
              disabled="disabled"
            {% else %}
              :disabled="!isCbAvailable && !isSithAvailable"
            {% endif %}
          >
          <label for="cgv-checkbox">
            {% trans  trimmed %}I have read and I accept{% endtrans %}
            <a href="{{ url('core:page', 'cgv') }}">{% trans %}the general terms and conditions{% endtrans%}</a>
            {%trans%}of the student association of the UTBM{% endtrans %}
          </label>
        </div>
      </form>
    {% endif %}
    {% if settings.SITH_EBOUTIC_CB_ENABLED %}
      <form
        method="post"
        id="bank-payment-form"
        action="{{ settings.SITH_EBOUTIC_ET_URL }}"
        @submit="if (!$refs.cgvForm.reportValidity()) $event.preventDefault()"
      >
        <template x-for="[key, value] in Object.entries(data)" :key="key">
          <input type="hidden" :name="key" :value="value">
        </template>
        <input
          x-cloak
          type="submit"
          id="bank-submit-button"
          {% if basket.is_expired %}
            disabled="disabled"
          {% else %}
            :disabled="!isCbAvailable"
          {% endif %}
          class="btn btn-blue"
          value="{% trans %}Pay with credit card{% endtrans %}"
        />
      </form>
    {% else %}
      <div class="alert alert-yellow">
        {% trans trimmed %}
          Credit card payments are currently disabled on the eboutic.
          You may still refill your account in one of the AE counters.
          Please excuse us for the inconvenience.
        {% endtrans %}
      </div>
    {% endif %}
    {% if basket.contains_refilling_item %}
      <p>{% trans %}AE account payment disabled because your basket contains refilling items.{% endtrans %}</p>
    {% elif basket.total > user.account_balance %}
      <p>{% trans %}AE account payment disabled because you do not have enough money remaining.{% endtrans %}</p>
    {% else %}
      <form
        method="post"
        action="{{ url('eboutic:pay_with_sith', basket_id=basket.id) }}"
        id="sith-payment-form"
        @submit="if (!$refs.cgvForm.reportValidity()) $event.preventDefault()"
      >
        {% csrf_token %}
        <input
          {% if basket.is_expired %}
            disabled="disabled"
          {% else %}
            :disabled="!isSithAvailable"
          {% endif %}
          class="btn btn-blue"
          type="submit"
          value="{% trans %}Pay with Sith account{% endtrans %}"
        />
      </form>
    {% endif %}
  </div>
{% endblock %}