71. Unauthenticated user Order approved frontend

Lastly, we will update the order approval page displayed when an unauthenticated user completes a payment, enhancing its clarity and user experience. We will follow a similar structure of the my orders page.

Current page

We will update the order_aproved.html file:

{% extends 'base.html' %}
{% load static %}

{% block body %}

<main class="principal">
  <title>Order {{ order.id }} aproved | Reserva</title>

    <section class="conta">
      <div class="conta__container">
        <div class="checkout__titulos">
          <p class="checkout__titulo">Your order was aproved!</p>
          <p class="checkout__titulo" style="font-size:2rem;">Thank you for choosing us! We have sent an email to your account {{ order.client.email }} containing the details of your order. </p>
        </div>

        <div class="pedido">
          <div class="pedido__cabecalho">
            <div>
              <p><b>Date:</b></p>
              <p>{{ order.end_date }}</p>
            </div>

            <div>
              <p><b>Total</b></p>
              <p>R$ {{ order.total_cost }}</p>
            </div>

            <div>
              <p><b>Order ID</b></p>
              <p>{{ order.id }}</p>
            </div>

            <div>
              <p><b>Transaction ID</b></p>
              <p style="word-wrap: break-word;">{{ order.id_transaction }}</p>
            </div>
            
          </div>
          
          <div class="pedido__corpo">
            {% for item in order.items %}
            <div class="pedido__individual">
                <div class="tabela__imagem">
                <img
                    src="{{ item.itemstock.product.image.url }}"
                    alt="{{ item.itemstock.product.name }}"
                />
                </div>
                <div class="tabela__produto-textos">
                <p><b>{{ item.itemstock.product.name }}</b></p>
                <p><b>Size:</b> {{ item.itemstock.size }}</p>
                <p><b>Color:</b> {{ item.itemstock.color }}</p>
                <p><b>Quantity:</b> {{ item.quantity }}</p>
                <p><b>Total price:</b> R$ {{ item.total_price }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
        <p><b style="line-height: 2.6;">Adress: {{ order.adress.zip_code }}, {{ order.adress.city }}-{{ order.adress.state }}</b></p>
    </div>
    <a class="esquecer_senha" href="{% url 'store' %}">Make a new purchase</a>
      </div>
    </section>
  </main>


{% endblock %}

Desktop view

Mobile view

We will also make a slight modification to the my_orders view function to include the client's email as a context variable. This will allow us to display the email on the "My Orders" page, similar to how it is shown on the unauthenticated users' order approval page.

views.py

def my_orders(request):
    client = request.user.client #? gets the client associated with the current authenticated user user
    orders = Order.objects.filter(finished=True, client=client).order_by("-end_date") #? gets all finished orders associated with the client user in descending date order
    
    context = {"orders" : orders, "email" : client.email}
    return render(request, 'user/my_orders.html', context)

Here is the updated my_orders.html file:

my_orders.html

{% extends 'base.html' %}
{% load static %}

{% block body %}

<main class="principal">
  <title>My Orders | Reserva</title>

    <section class="conta">
      <div class="conta__container">
        <div class="checkout__titulos">
          <p class="checkout__titulo">My Orders</p>
          <p class="checkout__titulo" style="font-size:2rem; text-align: start;">When making a new purchase, please check your email {{ email }} for more information. </p>
        </div>

        {% for order in orders %}
        <div class="pedido">
          <div class="pedido__cabecalho">
            <div>
              <p><b>Date:</b></p>
              <p>{{ order.end_date }}</p>
            </div>

            <div>
              <p><b>Total</b></p>
              <p>R$ {{ order.total_cost }}</p>
            </div>

            <div>
              <p><b>Order ID</b></p>
              <p>{{ order.id }}</p>
            </div>

            <div>
              <p><b>Transaction ID</b></p>
              <p style="word-wrap: break-word;">{{ order.id_transaction }}</p>
            </div>
            
          </div>
          
          <div class="pedido__corpo">
            {% for item in order.items %}
            <div class="pedido__individual">
                <div class="tabela__imagem">
                <img
                    src="{{ item.itemstock.product.image.url }}"
                    alt="{{ item.itemstock.product.name }}"
                />
                </div>
                <div class="tabela__produto-textos">
                <p><b>{{ item.itemstock.product.name }}</b></p>
                <p><b>Size:</b> {{ item.itemstock.size }}</p>
                <p><b>Color:</b> {{ item.itemstock.color }}</p>
                <p><b>Quantity:</b> {{ item.quantity }}</p>
                <p><b>Total price:</b> R$ {{ item.total_price }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
        <p><b style="line-height: 2.6;">Adress: {{ order.adress.zip_code }}, {{ order.adress.city }}-{{ order.adress.state }}</b></p>
    </div>
        {% endfor %}
        <a class="esquecer_senha" href="{% url 'store' %}">Make a new purchase</a>
      </div>
    </section>
  </main>


{% endblock %}