jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add order status lookup for customers
All checks were successful
deploy / deploy (push) Successful in 1m17s
Details

Browse Source 
Magic link flow on contact page: customer enters email, gets a
time-limited signed link, clicks through to /orders showing all their
paid orders and full detail pages with thumbnails and product links.

- OrderLookupController generates/verifies Phoenix.Token signed links
- Contact LiveView handles lookup_orders + reset_tracking events
- Orders and OrderDetail LiveViews gated by session email
- Order detail shows thumbnails, links to products still available
- .themed-button gets base padding/font-weight so all usages are consistent
- order-summary-card sticky scoped to .cart-grid (was leaking to orders list)
- 27 new tests (1095 total)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-24 08:40:08 +00:00
parent 4e36b654d3
commit 01ff8decd5
19 changed files with 1030 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/berrypod_web/components/page_templates.ex
View File

@@ -18,4 +18,13 @@ defmodule BerrypodWeb.PageTemplates do
use BerrypodWeb.ShopComponents
embed_templates "page_templates/*"
def format_order_status("unfulfilled"), do: "Being prepared"
def format_order_status("submitted"), do: "Sent to printer"
def format_order_status("processing"), do: "In production"
def format_order_status("shipped"), do: "On its way"
def format_order_status("delivered"), do: "Delivered"
def format_order_status("failed"), do: "Issue — contact us"
def format_order_status("cancelled"), do: "Cancelled"
def format_order_status(status), do: status
end

2
lib/berrypod_web/components/page_templates/contact.html.heex
View File

@@ -10,7 +10,7 @@
<.contact_form email="hello@example.com" />
<div class="contact-sidebar">
<.order_tracking_card />
<.order_tracking_card tracking_state={assigns[:tracking_state] || :idle} />
<.info_card
title="Handy to know"

120
lib/berrypod_web/components/page_templates/order_detail.html.heex Normal file
View File

@@ -0,0 +1,120 @@
<.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>

71
lib/berrypod_web/components/page_templates/orders.html.heex Normal file
View File

@@ -0,0 +1,71 @@
<.shop_layout {layout_assigns(assigns)} active_page="contact">
<main id="main-content" class="page-container orders-main">
<div class="orders-header">
<h1 class="orders-page-title">Your orders</h1>
<%= if @lookup_email do %>
<p class="orders-email-label">
Orders for <strong>{@lookup_email}</strong>
</p>
<% end %>
</div>
<%= cond do %>
<% is_nil(@orders) -> %>
<div class="orders-empty">
<p>This link has expired or is invalid.</p>
<p class="orders-empty-hint">
Head back to the <.link navigate="/contact">contact page</.link> to request a new one.
</p>
</div>
<% @orders == [] -> %>
<div class="orders-empty">
<p>No orders found for that email address.</p>
<p class="orders-empty-hint">
If something doesn't look right, <.link navigate="/contact">get in touch</.link>.
</p>
</div>
<% true -> %>
<div class="orders-list">
<%= for order <- @orders do %>
<.link navigate={"/orders/#{order.order_number}"} class="order-summary-card">
<div class="order-summary-top">
<div>
<p class="order-summary-number">{order.order_number}</p>
<p class="order-summary-date">
{Calendar.strftime(order.inserted_at, "%-d %B %Y")}
</p>
</div>
<span class={"order-status-badge order-status-badge--#{order.fulfilment_status}"}>
{format_order_status(order.fulfilment_status)}
</span>
</div>
<ul class="order-summary-items">
<%= for item <- Enum.take(order.items, 2) do %>
<li class="order-summary-item">
{item.quantity}× {item.product_name}
<%= if item.variant_title && item.variant_title != "" do %>
<span class="order-summary-variant">· {item.variant_title}</span>
<% end %>
</li>
<% end %>
<%= if length(order.items) > 2 do %>
<li class="order-summary-more">
+{length(order.items) - 2} more
</li>
<% end %>
</ul>
<div class="order-summary-footer">
<span class="order-summary-total">
{Berrypod.Cart.format_price(order.total)}
</span>
<span class="order-summary-arrow">→</span>
</div>
</.link>
<% end %>
</div>
<% end %>
</main>
</.shop_layout>

61
lib/berrypod_web/components/shop_components/content.ex
View File

@@ -132,21 +132,72 @@ defmodule BerrypodWeb.ShopComponents.Content do
@doc """
Renders the order tracking card.
Submits `lookup_orders` to the parent LiveView. The `:sent` state shows a
confirmation message; `:not_found` shows the form again with an error note.
## Attributes
* `tracking_state` - Optional. `:idle | :sent | :not_found`. Defaults to `:idle`.
## Examples
<.order_tracking_card />
<.order_tracking_card tracking_state={@tracking_state} />
"""
attr :tracking_state, :atom, default: :idle
def order_tracking_card(%{tracking_state: :sent} = assigns) do
~H"""
<.shop_card class="card-section">
<h3 class="card-heading">Check your inbox</h3>
<p class="card-text card-text--spaced">
We've sent a link to your email address. It'll expire after an hour.
</p>
<button phx-click="reset_tracking" class="order-tracking-reset">
Try a different email
</button>
</.shop_card>
"""
end
def order_tracking_card(%{tracking_state: :not_found} = assigns) do
~H"""
<.shop_card class="card-section">
<h3 class="card-heading">Track your order</h3>
<p class="card-text card-text--spaced">
No orders found for that address. Make sure you use the same email you checked out with.
</p>
<form phx-submit="lookup_orders" class="card-inline-form">
<.shop_input
type="email"
name="email"
placeholder="your@email.com"
class="email-input"
required
/>
<.shop_button type="submit">Try again</.shop_button>
</form>
</.shop_card>
"""
end
def order_tracking_card(assigns) do
~H"""
<.shop_card class="card-section">
<h3 class="card-heading">Track your order</h3>
<p class="card-text card-text--spaced">
Enter your email and I'll send you a link to check your order status.
Enter the email address you used at checkout and we'll send you a link.
</p>
<div class="card-inline-form">
<.shop_input type="email" placeholder="your@email.com" class="email-input" />
<.shop_button>Send</.shop_button>
</div>
<form phx-submit="lookup_orders" class="card-inline-form">
<.shop_input
type="email"
name="email"
placeholder="your@email.com"
class="email-input"
required
/>
<.shop_button type="submit">Send link</.shop_button>
</form>
</.shop_card>
"""
end

32
lib/berrypod_web/controllers/order_lookup_controller.ex Normal file
View File

@@ -0,0 +1,32 @@
defmodule BerrypodWeb.OrderLookupController do
use BerrypodWeb, :controller
@salt "order_lookup"
@max_age 3_600
def verify(conn, %{"token" => token}) do
case Phoenix.Token.verify(BerrypodWeb.Endpoint, @salt, token, max_age: @max_age) do
{:ok, email} ->
conn
|> put_session(:order_lookup_email, email)
|> redirect(to: ~p"/orders")
{:error, :expired} ->
conn
|> put_flash(:error, "That link has expired. Please request a new one.")
|> redirect(to: ~p"/contact")
{:error, _} ->
conn
|> put_flash(:error, "That link is invalid.")
|> redirect(to: ~p"/contact")
end
end
@doc """
Generates a signed, time-limited token for the given email address.
"""
def generate_token(email) do
Phoenix.Token.sign(BerrypodWeb.Endpoint, @salt, email)
end
end

29
lib/berrypod_web/live/shop/contact.ex
View File

@@ -1,6 +1,10 @@
defmodule BerrypodWeb.Shop.Contact do
use BerrypodWeb, :live_view
alias Berrypod.Orders
alias Berrypod.Orders.OrderNotifier
alias BerrypodWeb.OrderLookupController
@impl true
def mount(_params, _session, socket) do
{:ok,
@@ -10,7 +14,30 @@ defmodule BerrypodWeb.Shop.Contact do
:page_description,
"Get in touch with us for any questions or help with your order."
)
|> assign(:og_url, BerrypodWeb.Endpoint.url() <> "/contact")}
|> assign(:og_url, BerrypodWeb.Endpoint.url() <> "/contact")
|> assign(:tracking_state, :idle)}
end
@impl true
def handle_event("lookup_orders", %{"email" => email}, socket) do
orders = Orders.list_orders_by_email(email)
state =
if orders == [] do
:not_found
else
token = OrderLookupController.generate_token(email)
link = BerrypodWeb.Endpoint.url() <> ~p"/orders/verify/#{token}"
OrderNotifier.deliver_order_lookup(email, link)
:sent
end
{:noreply, assign(socket, :tracking_state, state)}
end
@impl true
def handle_event("reset_tracking", _params, socket) do
{:noreply, assign(socket, :tracking_state, :idle)}
end
@impl true

55
lib/berrypod_web/live/shop/order_detail.ex Normal file
View File

@@ -0,0 +1,55 @@
defmodule BerrypodWeb.Shop.OrderDetail do
use BerrypodWeb, :live_view
alias Berrypod.Orders
alias Berrypod.Products
alias Berrypod.Products.ProductImage
@impl true
def mount(_params, session, socket) do
{:ok, assign(socket, :lookup_email, session["order_lookup_email"])}
end
@impl true
def handle_params(%{"order_number" => order_number}, _uri, socket) do
email = socket.assigns.lookup_email
order = Orders.get_order_by_number(order_number)
normalised = fn e -> String.downcase(String.trim(e || "")) end
if order && order.payment_status == "paid" &&
email && normalised.(order.customer_email) == normalised.(email) do
variant_ids = Enum.map(order.items, & &1.variant_id)
variants = Products.get_variants_with_products(variant_ids)
thumbnails =
Map.new(variants, fn {id, variant} ->
thumb =
case variant.product.images do
[first | _] -> ProductImage.thumbnail_url(first)
_ -> nil
end
slug = if variant.product.visible, do: variant.product.slug, else: nil
{id, %{thumb: thumb, slug: slug}}
end)
{:noreply,
socket
|> assign(:page_title, "Order #{order_number}")
|> assign(:order, order)
|> assign(:thumbnails, thumbnails)}
else
{:noreply, push_navigate(socket, to: ~p"/orders")}
end
end
@impl true
def render(assigns) do
~H"""
<BerrypodWeb.PageTemplates.order_detail {assigns} />
"""
end
end

34
lib/berrypod_web/live/shop/orders.ex Normal file
View File

@@ -0,0 +1,34 @@
defmodule BerrypodWeb.Shop.Orders do
use BerrypodWeb, :live_view
alias Berrypod.Orders
@impl true
def mount(_params, session, socket) do
email = session["order_lookup_email"]
socket =
socket
|> assign(:page_title, "Your orders")
|> assign(:lookup_email, email)
socket =
if email do
assign(socket, :orders, Orders.list_orders_by_email(email))
else
assign(socket, :orders, nil)
end
{:ok, socket}
end
@impl true
def handle_params(_params, _uri, socket), do: {:noreply, socket}
@impl true
def render(assigns) do
~H"""
<BerrypodWeb.PageTemplates.orders {assigns} />
"""
end
end

9
lib/berrypod_web/router.ex
View File

@@ -82,6 +82,8 @@ defmodule BerrypodWeb.Router do
live "/products/:id", Shop.ProductShow, :show
live "/cart", Shop.Cart, :index
live "/checkout/success", Shop.CheckoutSuccess, :show
live "/orders", Shop.Orders, :index
live "/orders/:order_number", Shop.OrderDetail, :show
end
# Checkout (POST — creates Stripe session and redirects)
@@ -157,6 +159,13 @@ defmodule BerrypodWeb.Router do
end
end
# Order lookup verification — sets session email then redirects to /orders
scope "/", BerrypodWeb do
pipe_through [:browser]
get "/orders/verify/:token", OrderLookupController, :verify
end
# Setup page — minimal live_session, no theme/cart/search hooks
scope "/", BerrypodWeb do
pipe_through [:browser]