# 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](66.-my-orders-frontend).

<figure><img src="https://1987892552-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBsBTgwgH8PgXSXzgW9sj%2Fuploads%2F7bvQfxwaCNrIPwy1Ymaj%2Fimage.png?alt=media&#x26;token=4637bb97-29ae-44d0-8e28-51840010b2f0" alt=""><figcaption><p>Current page</p></figcaption></figure>

We will update the `order_aproved.html` file:

{% code title="" overflow="wrap" lineNumbers="true" %}
```html
{% 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 %}

```
{% endcode %}

<figure><img src="https://1987892552-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBsBTgwgH8PgXSXzgW9sj%2Fuploads%2F7PlIBWtLFcAfWmzJUwwD%2Fimage.png?alt=media&#x26;token=feff4a76-141f-4f27-9d91-00d767c16885" alt=""><figcaption><p>Desktop view</p></figcaption></figure>

<figure><img src="https://1987892552-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBsBTgwgH8PgXSXzgW9sj%2Fuploads%2Fa7pODiIjSE8PchMP8taT%2FSimulator%20Screenshot%20-%20iPhone%2016%20-%202025-01-10%20at%2013.24.07.png?alt=media&#x26;token=4070928c-a2cb-4e32-9676-ab8ecf946563" alt=""><figcaption><p>Mobile view</p></figcaption></figure>

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.

{% code title="views.py" overflow="wrap" lineNumbers="true" %}
```python
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)
```
{% endcode %}

Here is the updated `my_orders.html` file:

{% code title="my_orders.html" overflow="wrap" lineNumbers="true" %}
```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 %}

```
{% endcode %}

<figure><img src="https://1987892552-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBsBTgwgH8PgXSXzgW9sj%2Fuploads%2FDOAvZI3at7wX8zKeLL9N%2Fimage.png?alt=media&#x26;token=d1f7d284-81cc-4cb0-ab0d-6c99643a5edc" alt=""><figcaption></figcaption></figure>
