berrypod/lib/berrypod_web/components/page_templates/order_detail.html.heex

<.shop_layout {layout_assigns(assigns)} active_page="contact">
  <main id="main-content" class="page-container order-detail-main">
    <%= if @order do %>
      <div class="order-detail-header">
        <.link navigate="/orders" class="order-detail-back">
          ← Back to orders
        </.link>
        <h1 class="checkout-heading" style="margin-top: 1.5rem;">{@order.order_number}</h1>
        <p class="checkout-meta">
          {Calendar.strftime(@order.inserted_at, "%-d %B %Y")}
        </p>
        <span class={"order-status-badge order-status-badge--#{@order.fulfilment_status} order-status-badge--lg"}>
          {format_order_status(@order.fulfilment_status)}
        </span>
      </div>

      <%= if @order.tracking_number || @order.tracking_url do %>
        <.shop_card class="order-detail-tracking-card">
          <div class="order-detail-tracking">
            <svg
              width="20"
              height="20"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"
              />
            </svg>
            <div>
              <p class="order-detail-tracking-label">Shipment tracking</p>
              <%= if @order.tracking_number do %>
                <p class="order-detail-tracking-number">{@order.tracking_number}</p>
              <% end %>
            </div>
            <%= if @order.tracking_url do %>
              <a
                href={@order.tracking_url}
                target="_blank"
                rel="noopener noreferrer"
                class="order-detail-tracking-btn themed-button"
              >
                Track parcel
              </a>
            <% end %>
          </div>
        </.shop_card>
      <% end %>

      <.shop_card class="checkout-card">
        <h2 class="checkout-heading">Items ordered</h2>
        <ul class="checkout-items">
          <%= for item <- @order.items do %>
            <% info = @thumbnails[item.variant_id] %>
            <li class="checkout-item">
              <%= if info && info.thumb do %>
                <img src={info.thumb} alt={item.product_name} class="checkout-item-thumb" />
              <% end %>
              <div>
                <%= if info && info.slug do %>
                  <.link
                    navigate={"/products/#{info.slug}"}
                    class="checkout-item-name checkout-item-link"
                  >
                    {item.product_name}
                  </.link>
                <% else %>
                  <p class="checkout-item-name">{item.product_name}</p>
                <% end %>
                <%= if item.variant_title && item.variant_title != "" do %>
                  <p class="checkout-item-detail">{item.variant_title}</p>
                <% end %>
                <p class="checkout-item-detail">Qty: {item.quantity}</p>
              </div>
              <span class="checkout-item-price">
                {Berrypod.Cart.format_price(item.unit_price * item.quantity)}
              </span>
            </li>
          <% end %>
        </ul>

        <div class="checkout-total-border">
          <div class="checkout-total">
            <span class="checkout-total-label">Total</span>
            <span class="checkout-total-amount">
              {Berrypod.Cart.format_price(@order.total)}
            </span>
          </div>
        </div>
      </.shop_card>

      <%= if @order.shipping_address != %{} do %>
        <.shop_card class="checkout-card">
          <h2 class="checkout-heading">Shipping to</h2>
          <div class="checkout-shipping-address">
            <p>{@order.shipping_address["name"]}</p>
            <p>{@order.shipping_address["line1"]}</p>
            <%= if @order.shipping_address["line2"] do %>
              <p>{@order.shipping_address["line2"]}</p>
            <% end %>
            <p>
              {@order.shipping_address["city"]}, {@order.shipping_address["postal_code"]}
            </p>
            <p>{@order.shipping_address["country"]}</p>
          </div>
        </.shop_card>
      <% end %>

      <div class="checkout-actions">
        <.shop_link_button href="/collections/all">
          Continue shopping
        </.shop_link_button>
      </div>
    <% end %>
  </main>
</.shop_layout>