account-order.html.twig

{% extends 'base.html.twig' %}

{% block title %}
  {{ 'My order'| trans }}
{% endblock %}

{% block body %}
  {% set order = resources('/api/front/account/orders/'~ orderId ) %}
  <main>
    {% include "@components/Molecules/Button/Button.html.twig" with {
      text: 'My orders' | trans,
      href: '/account/orders',
      variant: 'minimal',
      icon_left: 'chevron-left',
      classes: 'mt-2 lg:mt-6 lg:ml-5',
    } %}
    <div class="lg:w-[540px] mx-6 lg:mx-auto mt-8 lg:mt-4 mb-[56px] md:mb-[94px]">
      <div class='text-black h3'>{{ 'Order N°' | trans }}
        {{ order.ref }}</div>
      <p class='p3 mb-[26px] lg:mb-[44px]'>{{ createdAt|format_date() }}</p>

      {% include '@components/Organisms/Card/DeliveryTracking/DeliveryTracking.html.twig' with {number:order.ref, status: 1, trackLink: "#0"} %}

      <div class='h4 mb-6 mt-[62px]'>{{ 'Order details' | trans }}</div>

      <div class="flex flex-col gap-2">
        {% for orderProduct in order.orderProducts %}
          {% set pse = resources('/api/front/product_sale_elements/' ~ orderProduct.productSaleElementsId) %}
          {% set product = resources('/api/front/products/' ~ pse.product.id) %}
          {% set image = resources('/api/front/product_sale_elements_product_image', {'productSaleElementsId':pse.id})|first.productImageId %}
          {% if not image %}
            {% set image = resources('/api/front/product_images', {'product.id':product.id})|first.id %}
          {% endif %}

          {% include '@components/Organisms/OrderProductCard/OrderProductCard.html.twig'
            with orderProduct|merge({
            isOrderCard: true,
            img: {
              src: '/legacy-image-library/product_image_'~ image ~'/full/%5E*!224,224/0/default.webp',
              alt: product.i18ns.title
            },
            imgWidth:'112',
            imgHeight:'112',
            productTitle: product.i18ns.title,
            secondaryTitle: product.i18ns.chapo,
            attributeCombinations:pse.attributeCombinations
          }) %}
        {% endfor %}

        {% include '@components/Organisms/SummaryCard/SummaryCard.html.twig' with {
          nbArticles: order.orderProducts|length,
          subTotal: order.totalAmountWithoutTaxes|format_currency('EUR', locale: 'fr'),
          total: order.totalAmountWithTaxesAfterDiscount|format_currency('EUR', locale: 'fr'),
          tax: (order.totalAmount  - order.totalAmountWithoutTaxes)|format_currency('EUR', locale: 'fr'),
          delivery: order.postage + order.postageTax,
          noGiftCard: true,
          noPromo: true} %}
      </div>

      <hr class="mt-[55px] lg:mt-[72px] mb-[30px] lg:mb-[54px]"/>

      <div class='mb-6 h4'>{{ 'Delivery & payment' | trans }}</div>
      <div class="flex flex-col gap-2">

        {% include '@components/Organisms/Card/Address/AddressCard.html.twig' with {
          address:order.deliveryOrderAddress|merge({
            country: order.deliveryOrderAddress.country.isoalpha2
          }),
          purchaseFunnel: true,
          title: 'Delivery address'|trans
        } %}

        {% include '@components/Organisms/Card/Address/AddressCard.html.twig' with {
          address:order.invoiceOrderAddress|merge({
            country: order.invoiceOrderAddress.country.isoalpha2
          }),
          purchaseFunnel: true,
          title: 'Billing address'|trans} %}

        {% set paymentModule = resources('/api/front/modules/' ~ order.paymentModule.id) %}

        {% if paymentModule %}
          {% include '@components/Organisms/Card/Payment/PaymentCard.html.twig' with{
            title:'Mode de paiement', withoutButton: true, date: '13/10/25', cardType: 'VISA', number: '**** **** **** 0000'} %}
        {% endif %}
      </div>
    </div>
  </main>
{% endblock %}

{% block footer %}
  {% include '@components/Layout/Footer/FooterCheckout.html.twig' %}
{% endblock %}