Externalize sexp to .sexpr files + render() API
Replace all 676 inline sexp() string calls across 7 services with render(component_name, **kwargs) calls backed by 46 external .sexpr component definition files (587 defcomps total). - Add render() function to shared/sexp/jinja_bridge.py - Add load_service_components() helper and update load_sexp_dir() for *.sexpr - Update parser keyword regex to support HTMX hx-on::event syntax - Convert remaining inline HTML in route files to render() calls - Add shared/sexp/templates/misc.sexp for cross-service utility components Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
38
orders/sexp/checkout.sexpr
Normal file
38
orders/sexp/checkout.sexpr
Normal file
@@ -0,0 +1,38 @@
|
||||
;; Checkout error components
|
||||
|
||||
(defcomp ~orders-checkout-error-header ()
|
||||
(header :class "mb-6 sm:mb-8"
|
||||
(h1 :class "text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight" "Checkout error")
|
||||
(p :class "text-xs sm:text-sm text-stone-600" "We tried to start your payment with SumUp but hit a problem.")))
|
||||
|
||||
(defcomp ~orders-checkout-error-order-id (&key oid)
|
||||
(p :class "text-xs text-rose-800/80" "Order ID: " (span :class "font-mono" (raw! oid))))
|
||||
|
||||
(defcomp ~orders-checkout-error-pay-btn (&key url)
|
||||
(a :href url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"
|
||||
(i :class "fa fa-credit-card mr-2" :aria-hidden "true") "Open payment page"))
|
||||
|
||||
(defcomp ~orders-checkout-error-content (&key msg order-html back-url)
|
||||
(div :class "max-w-full px-3 py-3 space-y-4"
|
||||
(div :class "rounded-2xl border border-rose-200 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-900 space-y-2"
|
||||
(p :class "font-medium" "Something went wrong.")
|
||||
(p (raw! msg))
|
||||
(raw! order-html))
|
||||
(div
|
||||
(a :href back-url
|
||||
:class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
|
||||
(i :class "fa fa-shopping-cart mr-2" :aria-hidden "true") "Back to cart"))))
|
||||
|
||||
(defcomp ~orders-detail-filter (&key created status list-url recheck-url csrf pay-html)
|
||||
(header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
|
||||
(div :class "space-y-1"
|
||||
(p :class "text-xs sm:text-sm text-stone-600" "Placed " (raw! created) " \u00b7 Status: " (raw! status)))
|
||||
(div :class "flex w-full sm:w-auto justify-start sm:justify-end gap-2"
|
||||
(a :href list-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
|
||||
(i :class "fa-solid fa-list mr-2" :aria-hidden "true") "All orders")
|
||||
(form :method "post" :action recheck-url :class "inline"
|
||||
(input :type "hidden" :name "csrf_token" :value csrf)
|
||||
(button :type "submit"
|
||||
:class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
|
||||
(i :class "fa-solid fa-rotate mr-2" :aria-hidden "true") "Re-check status"))
|
||||
(raw! pay-html))))
|
||||
54
orders/sexp/detail.sexpr
Normal file
54
orders/sexp/detail.sexpr
Normal file
@@ -0,0 +1,54 @@
|
||||
;; Order detail components
|
||||
|
||||
(defcomp ~orders-item-image (&key src alt)
|
||||
(img :src src :alt alt :class "w-full h-full object-contain object-center" :loading "lazy" :decoding "async"))
|
||||
|
||||
(defcomp ~orders-item-no-image ()
|
||||
(div :class "w-full h-full flex items-center justify-center text-[9px] text-stone-400" "No image"))
|
||||
|
||||
(defcomp ~orders-item-row (&key href img-html title pid qty price)
|
||||
(li (a :class "w-full py-2 flex gap-3" :href href
|
||||
(div :class "w-12 h-12 sm:w-14 sm:h-14 rounded-md bg-stone-100 flex-shrink-0 overflow-hidden" (raw! img-html))
|
||||
(div :class "flex-1 flex justify-between gap-3"
|
||||
(div
|
||||
(p :class "font-medium" (raw! title))
|
||||
(p :class "text-[11px] text-stone-500" "Product ID: " (raw! pid)))
|
||||
(div :class "text-right whitespace-nowrap"
|
||||
(p "Qty: " (raw! qty))
|
||||
(p (raw! price)))))))
|
||||
|
||||
(defcomp ~orders-items-section (&key items-html)
|
||||
(div :class "rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6"
|
||||
(h2 :class "text-sm sm:text-base font-semibold mb-3" "Items")
|
||||
(ul :class "divide-y divide-stone-100 text-xs sm:text-sm" (raw! items-html))))
|
||||
|
||||
(defcomp ~orders-calendar-item (&key name pill state ds cost)
|
||||
(li :class "px-4 py-3 flex items-start justify-between text-sm"
|
||||
(div
|
||||
(div :class "font-medium flex items-center gap-2"
|
||||
(raw! name)
|
||||
(span :class pill (raw! state)))
|
||||
(div :class "text-xs text-stone-500" (raw! ds)))
|
||||
(div :class "ml-4 font-medium" (raw! cost))))
|
||||
|
||||
(defcomp ~orders-calendar-section (&key items-html)
|
||||
(section :class "mt-6 space-y-3"
|
||||
(h2 :class "text-base sm:text-lg font-semibold" "Calendar bookings in this order")
|
||||
(ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" (raw! items-html))))
|
||||
|
||||
(defcomp ~orders-detail-panel (&key summary-html items-html calendar-html)
|
||||
(div :class "max-w-full px-3 py-3 space-y-4"
|
||||
(raw! summary-html) (raw! items-html) (raw! calendar-html)))
|
||||
|
||||
(defcomp ~orders-detail-header-stack (&key auth-html orders-html order-html)
|
||||
(div :id "root-header-child" :class "flex flex-col w-full items-center"
|
||||
(raw! auth-html)
|
||||
(div :id "auth-header-child" :class "flex flex-col w-full items-center"
|
||||
(raw! orders-html)
|
||||
(div :id "orders-header-child" :class "flex flex-col w-full items-center"
|
||||
(raw! order-html)))))
|
||||
|
||||
(defcomp ~orders-header-child-oob (&key inner-html)
|
||||
(div :id "orders-header-child" :hx-swap-oob "outerHTML"
|
||||
:class "flex flex-col w-full items-center"
|
||||
(raw! inner-html)))
|
||||
60
orders/sexp/list.sexpr
Normal file
60
orders/sexp/list.sexpr
Normal file
@@ -0,0 +1,60 @@
|
||||
;; Orders list components
|
||||
|
||||
(defcomp ~orders-row-desktop (&key oid created desc total pill status url)
|
||||
(tr :class "hidden sm:table-row border-t border-stone-100 hover:bg-stone-50/60"
|
||||
(td :class "px-3 py-2 align-top" (span :class "font-mono text-[11px] sm:text-xs" (raw! oid)))
|
||||
(td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! created))
|
||||
(td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! desc))
|
||||
(td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! total))
|
||||
(td :class "px-3 py-2 align-top" (span :class pill (raw! status)))
|
||||
(td :class "px-3 py-0.5 align-top text-right"
|
||||
(a :href url :class "inline-flex items-center px-3 py-1.5 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition" "View"))))
|
||||
|
||||
(defcomp ~orders-row-mobile (&key oid created total pill status url)
|
||||
(tr :class "sm:hidden border-t border-stone-100"
|
||||
(td :colspan "5" :class "px-3 py-3"
|
||||
(div :class "flex flex-col gap-2 text-xs"
|
||||
(div :class "flex items-center justify-between gap-2"
|
||||
(span :class "font-mono text-[11px] text-stone-700" (raw! oid))
|
||||
(span :class pill (raw! status)))
|
||||
(div :class "text-[11px] text-stone-500 break-words" (raw! created))
|
||||
(div :class "flex items-center justify-between gap-2"
|
||||
(div :class "font-medium text-stone-800" (raw! total))
|
||||
(a :href url :class "inline-flex items-center px-2 py-1 text-[11px] rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition shrink-0" "View"))))))
|
||||
|
||||
(defcomp ~orders-end-row ()
|
||||
(tr (td :colspan "5" :class "px-3 py-4 text-center text-xs text-stone-400" "End of results")))
|
||||
|
||||
(defcomp ~orders-empty-state ()
|
||||
(div :class "max-w-full px-3 py-3 space-y-3"
|
||||
(div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-4 sm:p-6 text-sm text-stone-700"
|
||||
"No orders yet.")))
|
||||
|
||||
(defcomp ~orders-table (&key rows-html)
|
||||
(div :class "max-w-full px-3 py-3 space-y-3"
|
||||
(div :class "overflow-x-auto rounded-2xl border border-stone-200 bg-white/80"
|
||||
(table :class "min-w-full text-xs sm:text-sm"
|
||||
(thead :class "bg-stone-50 border-b border-stone-200 text-stone-600"
|
||||
(tr
|
||||
(th :class "px-3 py-2 text-left font-medium" "Order")
|
||||
(th :class "px-3 py-2 text-left font-medium" "Created")
|
||||
(th :class "px-3 py-2 text-left font-medium" "Description")
|
||||
(th :class "px-3 py-2 text-left font-medium" "Total")
|
||||
(th :class "px-3 py-2 text-left font-medium" "Status")
|
||||
(th :class "px-3 py-2 text-left font-medium" "")))
|
||||
(tbody (raw! rows-html))))))
|
||||
|
||||
(defcomp ~orders-summary (&key search-mobile-html)
|
||||
(header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
|
||||
(div :class "space-y-1" (p :class "text-xs sm:text-sm text-stone-600" "Recent orders placed via the checkout."))
|
||||
(div :class "md:hidden" (raw! search-mobile-html))))
|
||||
|
||||
;; Header child wrapper
|
||||
(defcomp ~orders-header-child (&key inner-html)
|
||||
(div :id "root-header-child" :class "flex flex-col w-full items-center"
|
||||
(raw! inner-html)))
|
||||
|
||||
(defcomp ~orders-auth-header-child-oob (&key inner-html)
|
||||
(div :id "auth-header-child" :hx-swap-oob "outerHTML"
|
||||
:class "flex flex-col w-full items-center"
|
||||
(raw! inner-html)))
|
||||
@@ -7,23 +7,18 @@ of ``render_template()``.
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import os
|
||||
from typing import Any
|
||||
|
||||
from shared.sexp.jinja_bridge import sexp, register_components
|
||||
from shared.sexp.jinja_bridge import render, load_service_components
|
||||
from shared.sexp.helpers import (
|
||||
call_url, get_asset_url, root_header_html,
|
||||
search_mobile_html, search_desktop_html, full_page, oob_page,
|
||||
)
|
||||
from shared.infrastructure.urls import market_product_url, cart_url
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Service-specific component definitions
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def load_orders_components() -> None:
|
||||
"""Register orders-specific s-expression components (placeholder for future)."""
|
||||
pass
|
||||
# Load orders-specific .sexpr components at import time
|
||||
load_service_components(os.path.dirname(os.path.dirname(__file__)))
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
@@ -32,10 +27,11 @@ def load_orders_components() -> None:
|
||||
|
||||
def _auth_nav_html(ctx: dict) -> str:
|
||||
"""Auth section desktop nav items."""
|
||||
html = sexp(
|
||||
'(~nav-link :href h :label "newsletters" :select-colours sc)',
|
||||
h=call_url(ctx, "account_url", "/newsletters/"),
|
||||
sc=ctx.get("select_colours", ""),
|
||||
html = render(
|
||||
"nav-link",
|
||||
href=call_url(ctx, "account_url", "/newsletters/"),
|
||||
label="newsletters",
|
||||
select_colours=ctx.get("select_colours", ""),
|
||||
)
|
||||
account_nav_html = ctx.get("account_nav_html", "")
|
||||
if account_nav_html:
|
||||
@@ -45,23 +41,23 @@ def _auth_nav_html(ctx: dict) -> str:
|
||||
|
||||
def _auth_header_html(ctx: dict, *, oob: bool = False) -> str:
|
||||
"""Build the account section header row."""
|
||||
return sexp(
|
||||
'(~menu-row :id "auth-row" :level 1 :colour "sky"'
|
||||
' :link-href lh :link-label "account" :icon "fa-solid fa-user"'
|
||||
' :nav-html nh :child-id "auth-header-child" :oob oob)',
|
||||
lh=call_url(ctx, "account_url", "/"),
|
||||
nh=_auth_nav_html(ctx),
|
||||
oob=oob,
|
||||
return render(
|
||||
"menu-row",
|
||||
id="auth-row", level=1, colour="sky",
|
||||
link_href=call_url(ctx, "account_url", "/"),
|
||||
link_label="account", icon="fa-solid fa-user",
|
||||
nav_html=_auth_nav_html(ctx),
|
||||
child_id="auth-header-child", oob=oob,
|
||||
)
|
||||
|
||||
|
||||
def _orders_header_html(ctx: dict, list_url: str) -> str:
|
||||
"""Build the orders section header row."""
|
||||
return sexp(
|
||||
'(~menu-row :id "orders-row" :level 2 :colour "sky"'
|
||||
' :link-href lh :link-label "Orders" :icon "fa fa-gbp"'
|
||||
' :child-id "orders-header-child")',
|
||||
lh=list_url,
|
||||
return render(
|
||||
"menu-row",
|
||||
id="orders-row", level=2, colour="sky",
|
||||
link_href=list_url, link_label="Orders", icon="fa fa-gbp",
|
||||
child_id="orders-header-child",
|
||||
)
|
||||
|
||||
|
||||
@@ -86,32 +82,16 @@ def _order_row_html(order: Any, detail_url: str) -> str:
|
||||
created = order.created_at.strftime("%-d %b %Y, %H:%M") if order.created_at else "\u2014"
|
||||
total = f"{order.currency or 'GBP'} {order.total_amount or 0:.2f}"
|
||||
|
||||
desktop = sexp(
|
||||
'(tr :class "hidden sm:table-row border-t border-stone-100 hover:bg-stone-50/60"'
|
||||
' (td :class "px-3 py-2 align-top" (span :class "font-mono text-[11px] sm:text-xs" (raw! oid)))'
|
||||
' (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! created))'
|
||||
' (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! desc))'
|
||||
' (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! total))'
|
||||
' (td :class "px-3 py-2 align-top" (span :class pill (raw! status)))'
|
||||
' (td :class "px-3 py-0.5 align-top text-right"'
|
||||
' (a :href url :class "inline-flex items-center px-3 py-1.5 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition" "View")))',
|
||||
desktop = render(
|
||||
"orders-row-desktop",
|
||||
oid=f"#{order.id}", created=created,
|
||||
desc=order.description or "", total=total,
|
||||
pill=f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] sm:text-xs {pill}",
|
||||
status=status, url=detail_url,
|
||||
)
|
||||
|
||||
mobile = sexp(
|
||||
'(tr :class "sm:hidden border-t border-stone-100"'
|
||||
' (td :colspan "5" :class "px-3 py-3"'
|
||||
' (div :class "flex flex-col gap-2 text-xs"'
|
||||
' (div :class "flex items-center justify-between gap-2"'
|
||||
' (span :class "font-mono text-[11px] text-stone-700" (raw! oid))'
|
||||
' (span :class pill (raw! status)))'
|
||||
' (div :class "text-[11px] text-stone-500 break-words" (raw! created))'
|
||||
' (div :class "flex items-center justify-between gap-2"'
|
||||
' (div :class "font-medium text-stone-800" (raw! total))'
|
||||
' (a :href url :class "inline-flex items-center px-2 py-1 text-[11px] rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition shrink-0" "View")))))',
|
||||
mobile = render(
|
||||
"orders-row-mobile",
|
||||
oid=f"#{order.id}", created=created, total=total,
|
||||
pill=f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] {pill}",
|
||||
status=status, url=detail_url,
|
||||
@@ -133,14 +113,12 @@ def _orders_rows_html(orders: list, page: int, total_pages: int,
|
||||
|
||||
if page < total_pages:
|
||||
next_url = pfx + url_for_fn("orders.list_orders") + qs_fn(page=page + 1)
|
||||
parts.append(sexp(
|
||||
'(~infinite-scroll :url u :page p :total-pages tp :id-prefix "orders" :colspan 5)',
|
||||
u=next_url, p=page, **{"total-pages": total_pages},
|
||||
parts.append(render(
|
||||
"infinite-scroll",
|
||||
url=next_url, page=page, total_pages=total_pages, id_prefix="orders", colspan=5,
|
||||
))
|
||||
else:
|
||||
parts.append(sexp(
|
||||
'(tr (td :colspan "5" :class "px-3 py-4 text-center text-xs text-stone-400" "End of results"))',
|
||||
))
|
||||
parts.append(render("orders-end-row"))
|
||||
|
||||
return "".join(parts)
|
||||
|
||||
@@ -148,36 +126,13 @@ def _orders_rows_html(orders: list, page: int, total_pages: int,
|
||||
def _orders_main_panel_html(orders: list, rows_html: str) -> str:
|
||||
"""Main panel with table or empty state."""
|
||||
if not orders:
|
||||
return sexp(
|
||||
'(div :class "max-w-full px-3 py-3 space-y-3"'
|
||||
' (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-4 sm:p-6 text-sm text-stone-700"'
|
||||
' "No orders yet."))',
|
||||
)
|
||||
return sexp(
|
||||
'(div :class "max-w-full px-3 py-3 space-y-3"'
|
||||
' (div :class "overflow-x-auto rounded-2xl border border-stone-200 bg-white/80"'
|
||||
' (table :class "min-w-full text-xs sm:text-sm"'
|
||||
' (thead :class "bg-stone-50 border-b border-stone-200 text-stone-600"'
|
||||
' (tr'
|
||||
' (th :class "px-3 py-2 text-left font-medium" "Order")'
|
||||
' (th :class "px-3 py-2 text-left font-medium" "Created")'
|
||||
' (th :class "px-3 py-2 text-left font-medium" "Description")'
|
||||
' (th :class "px-3 py-2 text-left font-medium" "Total")'
|
||||
' (th :class "px-3 py-2 text-left font-medium" "Status")'
|
||||
' (th :class "px-3 py-2 text-left font-medium" "")))'
|
||||
' (tbody (raw! rows)))))',
|
||||
rows=rows_html,
|
||||
)
|
||||
return render("orders-empty-state")
|
||||
return render("orders-table", rows_html=rows_html)
|
||||
|
||||
|
||||
def _orders_summary_html(ctx: dict) -> str:
|
||||
"""Filter section for orders list."""
|
||||
return sexp(
|
||||
'(header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"'
|
||||
' (div :class "space-y-1" (p :class "text-xs sm:text-sm text-stone-600" "Recent orders placed via the checkout."))'
|
||||
' (div :class "md:hidden" (raw! sm)))',
|
||||
sm=search_mobile_html(ctx),
|
||||
)
|
||||
return render("orders-summary", search_mobile_html=search_mobile_html(ctx))
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
@@ -199,9 +154,9 @@ async def render_orders_page(ctx: dict, orders: list, page: int,
|
||||
main = _orders_main_panel_html(orders, rows)
|
||||
|
||||
hdr = root_header_html(ctx)
|
||||
hdr += sexp(
|
||||
'(div :id "root-header-child" :class "flex flex-col w-full items-center" (raw! a) (raw! o))',
|
||||
a=_auth_header_html(ctx), o=_orders_header_html(ctx, list_url),
|
||||
hdr += render(
|
||||
"orders-header-child",
|
||||
inner_html=_auth_header_html(ctx) + _orders_header_html(ctx, list_url),
|
||||
)
|
||||
|
||||
return full_page(ctx, header_rows_html=hdr,
|
||||
@@ -233,10 +188,9 @@ async def render_orders_oob(ctx: dict, orders: list, page: int,
|
||||
|
||||
oobs = (
|
||||
_auth_header_html(ctx, oob=True)
|
||||
+ sexp(
|
||||
'(div :id "auth-header-child" :hx-swap-oob "outerHTML"'
|
||||
' :class "flex flex-col w-full items-center" (raw! o))',
|
||||
o=_orders_header_html(ctx, list_url),
|
||||
+ render(
|
||||
"orders-auth-header-child-oob",
|
||||
inner_html=_orders_header_html(ctx, list_url),
|
||||
)
|
||||
+ root_header_html(ctx, oob=True)
|
||||
)
|
||||
@@ -259,36 +213,23 @@ def _order_items_html(order: Any) -> str:
|
||||
for item in order.items:
|
||||
prod_url = market_product_url(item.product_slug)
|
||||
if item.product_image:
|
||||
img = sexp(
|
||||
'(img :src src :alt alt :class "w-full h-full object-contain object-center" :loading "lazy" :decoding "async")',
|
||||
img = render(
|
||||
"orders-item-image",
|
||||
src=item.product_image, alt=item.product_title or "Product image",
|
||||
)
|
||||
else:
|
||||
img = sexp('(div :class "w-full h-full flex items-center justify-center text-[9px] text-stone-400" "No image")')
|
||||
img = render("orders-item-no-image")
|
||||
|
||||
items.append(sexp(
|
||||
'(li (a :class "w-full py-2 flex gap-3" :href href'
|
||||
' (div :class "w-12 h-12 sm:w-14 sm:h-14 rounded-md bg-stone-100 flex-shrink-0 overflow-hidden" (raw! img))'
|
||||
' (div :class "flex-1 flex justify-between gap-3"'
|
||||
' (div'
|
||||
' (p :class "font-medium" (raw! title))'
|
||||
' (p :class "text-[11px] text-stone-500" "Product ID: " (raw! pid)))'
|
||||
' (div :class "text-right whitespace-nowrap"'
|
||||
' (p "Qty: " (raw! qty))'
|
||||
' (p (raw! price))))))',
|
||||
href=prod_url, img=img,
|
||||
items.append(render(
|
||||
"orders-item-row",
|
||||
href=prod_url, img_html=img,
|
||||
title=item.product_title or "Unknown product",
|
||||
pid=str(item.product_id),
|
||||
qty=str(item.quantity),
|
||||
price=f"{item.currency or order.currency or 'GBP'} {item.unit_price or 0:.2f}",
|
||||
))
|
||||
|
||||
return sexp(
|
||||
'(div :class "rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6"'
|
||||
' (h2 :class "text-sm sm:text-base font-semibold mb-3" "Items")'
|
||||
' (ul :class "divide-y divide-stone-100 text-xs sm:text-sm" (raw! items)))',
|
||||
items="".join(items),
|
||||
)
|
||||
return render("orders-items-section", items_html="".join(items))
|
||||
|
||||
|
||||
def _calendar_items_html(calendar_entries: list | None) -> str:
|
||||
@@ -307,41 +248,30 @@ def _calendar_items_html(calendar_entries: list | None) -> str:
|
||||
ds = e.start_at.strftime("%-d %b %Y, %H:%M") if e.start_at else ""
|
||||
if e.end_at:
|
||||
ds += f" \u2013 {e.end_at.strftime('%-d %b %Y, %H:%M')}"
|
||||
items.append(sexp(
|
||||
'(li :class "px-4 py-3 flex items-start justify-between text-sm"'
|
||||
' (div'
|
||||
' (div :class "font-medium flex items-center gap-2"'
|
||||
' (raw! name)'
|
||||
' (span :class pill (raw! state)))'
|
||||
' (div :class "text-xs text-stone-500" (raw! ds)))'
|
||||
' (div :class "ml-4 font-medium" (raw! cost)))',
|
||||
items.append(render(
|
||||
"orders-calendar-item",
|
||||
name=e.name,
|
||||
pill=f"inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium {pill}",
|
||||
state=st.capitalize(), ds=ds,
|
||||
cost=f"\u00a3{e.cost or 0:.2f}",
|
||||
))
|
||||
|
||||
return sexp(
|
||||
'(section :class "mt-6 space-y-3"'
|
||||
' (h2 :class "text-base sm:text-lg font-semibold" "Calendar bookings in this order")'
|
||||
' (ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" (raw! items)))',
|
||||
items="".join(items),
|
||||
)
|
||||
return render("orders-calendar-section", items_html="".join(items))
|
||||
|
||||
|
||||
def _order_main_html(order: Any, calendar_entries: list | None) -> str:
|
||||
"""Main panel for single order detail."""
|
||||
summary = sexp(
|
||||
'(~order-summary-card :order-id oid :created-at ca :description d :status s :currency c :total-amount ta)',
|
||||
oid=order.id,
|
||||
ca=order.created_at.strftime("%-d %b %Y, %H:%M") if order.created_at else None,
|
||||
d=order.description, s=order.status, c=order.currency,
|
||||
ta=f"{order.total_amount:.2f}" if order.total_amount else None,
|
||||
summary = render(
|
||||
"order-summary-card",
|
||||
order_id=order.id,
|
||||
created_at=order.created_at.strftime("%-d %b %Y, %H:%M") if order.created_at else None,
|
||||
description=order.description, status=order.status, currency=order.currency,
|
||||
total_amount=f"{order.total_amount:.2f}" if order.total_amount else None,
|
||||
)
|
||||
return sexp(
|
||||
'(div :class "max-w-full px-3 py-3 space-y-4" (raw! summary) (raw! items) (raw! cal))',
|
||||
summary=summary, items=_order_items_html(order),
|
||||
cal=_calendar_items_html(calendar_entries),
|
||||
return render(
|
||||
"orders-detail-panel",
|
||||
summary_html=summary, items_html=_order_items_html(order),
|
||||
calendar_html=_calendar_items_html(calendar_entries),
|
||||
)
|
||||
|
||||
|
||||
@@ -353,28 +283,13 @@ def _order_filter_html(order: Any, list_url: str, recheck_url: str,
|
||||
|
||||
pay_html = ""
|
||||
if status != "paid":
|
||||
pay_html = sexp(
|
||||
'(a :href url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"'
|
||||
' (i :class "fa fa-credit-card mr-2" :aria-hidden "true") "Open payment page")',
|
||||
url=pay_url,
|
||||
)
|
||||
pay_html = render("orders-checkout-error-pay-btn", url=pay_url)
|
||||
|
||||
return sexp(
|
||||
'(header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"'
|
||||
' (div :class "space-y-1"'
|
||||
' (p :class "text-xs sm:text-sm text-stone-600" "Placed " (raw! created) " \u00b7 Status: " (raw! status)))'
|
||||
' (div :class "flex w-full sm:w-auto justify-start sm:justify-end gap-2"'
|
||||
' (a :href list-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"'
|
||||
' (i :class "fa-solid fa-list mr-2" :aria-hidden "true") "All orders")'
|
||||
' (form :method "post" :action recheck-url :class "inline"'
|
||||
' (input :type "hidden" :name "csrf_token" :value csrf)'
|
||||
' (button :type "submit"'
|
||||
' :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"'
|
||||
' (i :class "fa-solid fa-rotate mr-2" :aria-hidden "true") "Re-check status"))'
|
||||
' (raw! pay)))',
|
||||
return render(
|
||||
"orders-detail-filter",
|
||||
created=created, status=status,
|
||||
**{"list-url": list_url, "recheck-url": recheck_url},
|
||||
csrf=csrf_token, pay=pay_html,
|
||||
list_url=list_url, recheck_url=recheck_url,
|
||||
csrf=csrf_token, pay_html=pay_html,
|
||||
)
|
||||
|
||||
|
||||
@@ -396,17 +311,16 @@ async def render_order_page(ctx: dict, order: Any,
|
||||
|
||||
# Header stack: root -> auth -> orders -> order
|
||||
hdr = root_header_html(ctx)
|
||||
order_row = sexp(
|
||||
'(~menu-row :id "order-row" :level 3 :colour "sky" :link-href lh :link-label "Order" :icon "fa fa-gbp")',
|
||||
lh=detail_url,
|
||||
order_row = render(
|
||||
"menu-row",
|
||||
id="order-row", level=3, colour="sky", link_href=detail_url,
|
||||
link_label="Order", icon="fa fa-gbp",
|
||||
)
|
||||
hdr += sexp(
|
||||
'(div :id "root-header-child" :class "flex flex-col w-full items-center" (raw! a)'
|
||||
' (div :id "auth-header-child" :class "flex flex-col w-full items-center" (raw! b)'
|
||||
' (div :id "orders-header-child" :class "flex flex-col w-full items-center" (raw! c))))',
|
||||
a=_auth_header_html(ctx),
|
||||
b=_orders_header_html(ctx, list_url),
|
||||
c=order_row,
|
||||
hdr += render(
|
||||
"orders-detail-header-stack",
|
||||
auth_html=_auth_header_html(ctx),
|
||||
orders_html=_orders_header_html(ctx, list_url),
|
||||
order_html=order_row,
|
||||
)
|
||||
|
||||
return full_page(ctx, header_rows_html=hdr, filter_html=filt, content_html=main)
|
||||
@@ -428,12 +342,13 @@ async def render_order_oob(ctx: dict, order: Any,
|
||||
main = _order_main_html(order, calendar_entries)
|
||||
filt = _order_filter_html(order, list_url, recheck_url, pay_url, generate_csrf_token())
|
||||
|
||||
order_row_oob = sexp(
|
||||
'(~menu-row :id "order-row" :level 3 :colour "sky" :link-href lh :link-label "Order" :icon "fa fa-gbp" :oob true)',
|
||||
lh=detail_url,
|
||||
order_row_oob = render(
|
||||
"menu-row",
|
||||
id="order-row", level=3, colour="sky", link_href=detail_url,
|
||||
link_label="Order", icon="fa fa-gbp", oob=True,
|
||||
)
|
||||
oobs = (
|
||||
sexp('(div :id "orders-header-child" :hx-swap-oob "outerHTML" :class "flex flex-col w-full items-center" (raw! o))', o=order_row_oob)
|
||||
render("orders-header-child-oob", inner_html=order_row_oob)
|
||||
+ root_header_html(ctx, oob=True)
|
||||
)
|
||||
|
||||
@@ -445,42 +360,27 @@ async def render_order_oob(ctx: dict, order: Any,
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def _checkout_error_filter_html() -> str:
|
||||
return sexp(
|
||||
'(header :class "mb-6 sm:mb-8"'
|
||||
' (h1 :class "text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight" "Checkout error")'
|
||||
' (p :class "text-xs sm:text-sm text-stone-600" "We tried to start your payment with SumUp but hit a problem."))',
|
||||
)
|
||||
return render("orders-checkout-error-header")
|
||||
|
||||
|
||||
def _checkout_error_content_html(error: str | None, order: Any | None) -> str:
|
||||
err_msg = error or "Unexpected error while creating the hosted checkout session."
|
||||
order_html = ""
|
||||
if order:
|
||||
order_html = sexp(
|
||||
'(p :class "text-xs text-rose-800/80" "Order ID: " (span :class "font-mono" (raw! oid)))',
|
||||
oid=f"#{order.id}",
|
||||
)
|
||||
order_html = render("orders-checkout-error-order-id", oid=f"#{order.id}")
|
||||
back_url = cart_url("/")
|
||||
return sexp(
|
||||
'(div :class "max-w-full px-3 py-3 space-y-4"'
|
||||
' (div :class "rounded-2xl border border-rose-200 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-900 space-y-2"'
|
||||
' (p :class "font-medium" "Something went wrong.")'
|
||||
' (p (raw! msg))'
|
||||
' (raw! order-html))'
|
||||
' (div'
|
||||
' (a :href back-url'
|
||||
' :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"'
|
||||
' (i :class "fa fa-shopping-cart mr-2" :aria-hidden "true") "Back to cart")))',
|
||||
msg=err_msg, **{"order-html": order_html, "back-url": back_url},
|
||||
return render(
|
||||
"orders-checkout-error-content",
|
||||
msg=err_msg, order_html=order_html, back_url=back_url,
|
||||
)
|
||||
|
||||
|
||||
async def render_checkout_error_page(ctx: dict, error: str | None = None, order: Any | None = None) -> str:
|
||||
"""Full page: checkout error."""
|
||||
hdr = root_header_html(ctx)
|
||||
hdr += sexp(
|
||||
'(div :id "root-header-child" :class "flex flex-col w-full items-center" (raw! c))',
|
||||
c=_auth_header_html(ctx),
|
||||
hdr += render(
|
||||
"orders-header-child",
|
||||
inner_html=_auth_header_html(ctx),
|
||||
)
|
||||
filt = _checkout_error_filter_html()
|
||||
content = _checkout_error_content_html(error, order)
|
||||
|
||||
Reference in New Issue
Block a user