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

<.shop_layout {layout_assigns(assigns)} active_page="checkout">
  <main id="main-content" class="page-container checkout-main">
    <%= if @order && @order.payment_status == "paid" do %>
      <div class="checkout-header">
        <div class="checkout-icon">
          <svg
            width="32"
            height="32"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="2.5"
            stroke="currentColor"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
        </div>

        <h1 class="checkout-heading">
          Thank you for your order
        </h1>

        <p class="checkout-meta">
          Order <strong>{@order.order_number}</strong>
        </p>

        <%= if @order.customer_email do %>
          <p class="checkout-meta">
            A confirmation will be sent to <strong>{@order.customer_email}</strong>
          </p>
        <% end %>
      </div>

      <.shop_card class="checkout-card">
        <h2 class="checkout-heading">
          Order details
        </h2>

        <ul class="checkout-items">
          <%= for item <- @order.items do %>
            <li class="checkout-item">
              <div>
                <p class="checkout-item-name">
                  {item.product_name}
                </p>
                <%= if 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" class="checkout-cta">
          Continue shopping
        </.shop_link_button>
      </div>
    <% else %>
      <%!-- Payment pending or order not found --%>
      <div class="checkout-header">
        <div class="checkout-pending-icon">
          <span class="checkout-pending-spinner">
            <svg
              width="32"
              height="32"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
              />
            </svg>
          </span>
        </div>

        <h1 class="checkout-heading">
          Processing your payment
        </h1>

        <p class="checkout-pending-text">
          Please wait while we confirm your payment. This usually takes a few seconds.
        </p>

        <p class="checkout-pending-hint">
          If this page doesn't update, please <.link
            navigate="/contact"
            class="checkout-contact-link"
          >contact us</.link>.
        </p>
      </div>
    <% end %>
  </main>
</.shop_layout>