Sith/eboutic/templates/eboutic/eboutic_main.jinja

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

{% block title -%}
  {% trans %}Eboutic{% endtrans %}
{%- endblock %}

{% block description -%}
  {% trans %}The online shop of the association.{% endtrans %}
{%- endblock %}

{% block additional_js %}
    {# This script contains the code to perform requests to manipulate the
    user basket without having to reload the page #}
  <script type="module" src="{{ static('bundled/eboutic/eboutic-index.ts') }}"></script>
{% endblock %}

{% block additional_css %}
  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
  <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
{% endblock %}

{% block content %}
  <h1 id="eboutic-title">{% trans %}Eboutic{% endtrans %}</h1>

  <div id="eboutic" x-data="basket({{ last_purchase_time }})">
    <div id="basket">
      <h3>Panier</h3>
      <form method="post" action="">
        {% csrf_token %}
        <div x-ref="basketManagementForm">
          {{ form.management_form }}
        </div>

        {% if form.non_form_errors() or form.errors %}
          <div class="alert alert-red">
            <div class="alert-main">
              {% for error in form.non_form_errors() + form.errors %}
                <p style="margin: 0">{{ error }}</p>
              {% endfor %}
            </div>
          </div>
        {% endif %}
        <ul class="item-list">
          {# Starting money #}
          <li>
            <span class="item-name">
              <strong>{% trans %}Current account amount: {% endtrans %}</strong>
            </span>
            <span class="item-price">
              <strong>{{ "%0.2f"|format(customer_amount) }} €</strong>
            </span>
          </li>

          <template x-for="(item, index) in Object.values(basket)" :key="item.priceId">
            <li class="item-row" x-show="item.quantity > 0">
              <div class="item-quantity">
                <i class="fa fa-minus fa-xs" @click="remove(item.priceId)"></i>
                <span x-text="item.quantity"></span>
                <i class="fa fa-plus" @click="add(item)"></i>
              </div>
              <span class="item-name" x-text="item.name"></span>
              <span class="item-price" x-text="(item.unitPrice * item.quantity).toFixed(2) + ' €'"></span>

              <input
                type="hidden"
                :value="item.quantity"
                :id="`id_form-${index}-quantity`"
                :name="`form-${index}-quantity`"
                required
                readonly
              >
              <input
                type="hidden"
                :value="item.priceId"
                :id="`id_form-${index}-price_id`"
                :name="`form-${index}-price_id`"
                required
                readonly
              >

            </li>
          </template>
          {# Total price #}
          <li style="margin-top: 20px">
            <span class="item-name"><strong>{% trans %}Basket amount: {% endtrans %}</strong></span>
            <span x-text="getTotal().toFixed(2) + ' €'" class="item-price"></span>
          </li>
        </ul>
        <div class="catalog-buttons">
          <button @click.prevent="clearBasket()" class="btn btn-grey">
            <i class="fa fa-trash"></i>
            {% trans %}Clear{% endtrans %}
          </button>
          <button class="btn btn-blue">
            <i class="fa fa-check"></i>
            <input type="submit" value="{% trans %}Validate{% endtrans %}"/>
          </button>
        </div>
      </form>
    </div>
    <div id="catalog">
      {% if not request.user.date_of_birth %}
        <div class="alert alert-red" x-data="{show_alert: true}" x-show="show_alert" x-transition>
          <span class="alert-main">
            {% trans trimmed %}
              You have not filled in your date of birth.
              As a result, you may not have access to all the products in the online shop.
              To fill in your date of birth, you can go to
            {% endtrans %}
            <a href="{{ url("core:user_edit", user_id=request.user.id) }}">
              {% trans %}this page{% endtrans %}
            </a>
          </span>
          <span class="clickable" @click="show_alert = false">
            <i class="fa fa-close"></i>
          </span>
        </div>
      {% endif %}
      <section>
        <div class="category-header">
          <h3 class="margin-bottom">{% trans %}Eurockéennes 2025 partnership{% endtrans %}</h3>
          {% if user.is_subscribed %}
            <div id="eurock-partner" style="
                                            min-height: 600px;
                                            background-color: lightgrey;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            flex-direction: column;
                                            gap: 10px;
                                           ">
              <p style="text-align: center;">
                {% trans trimmed %}
                  Our partner uses Weezevent to sell tickets.
                  Weezevent may collect user info according to
                  its own privacy policy.
                  By clicking the accept button you consent to
                  their terms of services.
                {% endtrans %}
              </p>

              <a href="https://weezevent.com/fr/politique-de-confidentialite/">{% trans %}Privacy policy{% endtrans %}</a>

              <button
                hx-get="{{ url("eboutic:eurock") }}"
                hx-target="#eurock-partner"
                hx-swap="outerHTML"
                hx-trigger="click, load[document.cookie.includes('weezevent_accept=true')]"
                @htmx:after-request="document.cookie = 'weezevent_accept=true'"
              >{% trans %}Accept{% endtrans %}
              </button>
            </div>
          {% else %}
            <p>
              {%- trans trimmed %}
                You must be subscribed to benefit from the partnership with the Eurockéennes.
              {% endtrans -%}
            </p>
            <p>
              {%- trans trimmed %}
                This partnership offers a discount of up to 33%
                on tickets for Friday, Saturday and Sunday,
                as well as the 3-day package from Friday to Sunday.
              {% endtrans -%}
            </p>
          {% endif %}
        </div>
      </section>
      {% for prices in categories %}
        {% set category = prices[0].product.product_type %}
        <section>
          <div class="category-header">
            <h3>{{ category.name }}</h3>
            {% if category.comment %}
              <p><i>{{ category.comment }}</i></p>
            {% endif %}
          </div>
          <div class="product-group">
            {% for price in prices %}
              <button
                id="{{ price.id }}"
                class="card product-button clickable shadow"
                :class="{selected: basket.some((i) => i.priceId === {{ price.id }})}"
                @click='addFromCatalog({{ price.id }}, {{ price.full_label|tojson }}, {{ price.amount }})'
              >
                {% if price.product.icon %}
                  <img
                    class="card-image"
                    src="{{ price.product.icon.url }}"
                    alt="image de {{ price.full_label }}"
                  >
                {% else %}
                  <i class="fa-regular fa-image fa-2x card-image"></i>
                {% endif %}
                <div class="card-content">
                  <h4 class="card-title">{{ price.full_label }}</h4>
                  <p>{{ price.amount }} €</p>
                </div>
              </button>
            {% endfor %}
          </div>
        </section>
      {% else %}
        <p>{% trans %}There are no items available for sale{% endtrans %}</p>
      {% endfor %}
    </div>
  </div>
{% endblock %}