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:
2026-02-28 16:14:58 +00:00
parent f4c2f4b6b8
commit f9d9697c67
64 changed files with 5041 additions and 4051 deletions

12
cart/sexp/calendar.sexpr Normal file
View File

@@ -0,0 +1,12 @@
;; Cart calendar entry components
(defcomp ~cart-cal-entry (&key name date-str cost)
(li :class "flex items-start justify-between text-sm"
(div (div :class "font-medium" (raw! name))
(div :class "text-xs text-stone-500" (raw! date-str)))
(div :class "ml-4 font-medium" (raw! cost))))
(defcomp ~cart-cal-section (&key items-html)
(div :class "mt-6 border-t border-stone-200 pt-4"
(h2 :class "text-base font-semibold mb-2" "Calendar bookings")
(ul :class "space-y-2" (raw! items-html))))

20
cart/sexp/checkout.sexpr Normal file
View File

@@ -0,0 +1,20 @@
;; Cart checkout error components
(defcomp ~cart-checkout-error-filter ()
(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 ~cart-checkout-error-order-id (&key order-id)
(p :class "text-xs text-rose-800/80"
"Order ID: " (span :class "font-mono" (raw! order-id))))
(defcomp ~cart-checkout-error-content (&key error-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! error-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"))))

44
cart/sexp/header.sexpr Normal file
View File

@@ -0,0 +1,44 @@
;; Cart header components
(defcomp ~cart-page-label-img (&key src)
(img :src src :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0"))
(defcomp ~cart-all-carts-link (&key href)
(a :href href :class "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
(i :class "fa fa-arrow-left text-xs" :aria-hidden "true") "All carts"))
(defcomp ~cart-header-child (&key inner-html)
(div :id "root-header-child" :class "flex flex-col w-full items-center"
(raw! inner-html)))
(defcomp ~cart-header-child-nested (&key outer-html inner-html)
(div :id "root-header-child" :class "flex flex-col w-full items-center"
(raw! outer-html)
(div :id "cart-header-child" :class "flex flex-col w-full items-center"
(raw! inner-html))))
(defcomp ~cart-header-child-oob (&key inner-html)
(div :id "cart-header-child" :hx-swap-oob "outerHTML" :class "flex flex-col w-full items-center"
(raw! inner-html)))
(defcomp ~cart-auth-header-child (&key auth-html orders-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))))
(defcomp ~cart-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)))
(defcomp ~cart-order-header-child (&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 ~cart-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)))

66
cart/sexp/items.sexpr Normal file
View File

@@ -0,0 +1,66 @@
;; Cart item components
(defcomp ~cart-item-img (&key src alt)
(img :src src :alt alt :class "w-24 h-24 sm:w-32 sm:h-28 object-cover rounded-xl border border-stone-100" :loading "lazy"))
(defcomp ~cart-item-no-img ()
(div :class "w-24 h-24 sm:w-32 sm:h-28 rounded-xl border border-dashed border-stone-300 flex items-center justify-center text-xs text-stone-400"
"No image"))
(defcomp ~cart-item-price (&key text)
(p :class "text-sm sm:text-base font-semibold text-stone-900" (raw! text)))
(defcomp ~cart-item-price-was (&key text)
(p :class "text-xs text-stone-400 line-through" (raw! text)))
(defcomp ~cart-item-no-price ()
(p :class "text-xs text-stone-500" "No price"))
(defcomp ~cart-item-deleted ()
(p :class "mt-2 inline-flex items-center gap-1 text-[0.65rem] sm:text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-full px-2 py-0.5"
(i :class "fa-solid fa-triangle-exclamation text-[0.6rem]" :aria-hidden "true")
" This item is no longer available or price has changed"))
(defcomp ~cart-item-brand (&key brand)
(p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" (raw! brand)))
(defcomp ~cart-item-line-total (&key text)
(p :class "text-sm sm:text-base font-semibold text-stone-900" (raw! text)))
(defcomp ~cart-item (&key id img-html prod-url title brand-html deleted-html price-html qty-url csrf minus qty plus line-total-html)
(article :id id :class "flex flex-col sm:flex-row gap-3 sm:gap-4 rounded-2xl bg-white shadow-sm border border-stone-200 p-3 sm:p-4 md:p-5"
(div :class "w-full sm:w-32 shrink-0 flex justify-center sm:block" (raw! img-html))
(div :class "flex-1 min-w-0"
(div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-2 sm:gap-3"
(div :class "min-w-0"
(h2 :class "text-sm sm:text-base md:text-lg font-semibold text-stone-900"
(a :href prod-url :class "hover:text-emerald-700" (raw! title)))
(raw! brand-html) (raw! deleted-html))
(div :class "text-left sm:text-right" (raw! price-html)))
(div :class "mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4"
(div :class "flex items-center gap-2 text-xs sm:text-sm text-stone-700"
(span :class "text-[0.65rem] sm:text-xs uppercase tracking-wide text-stone-500" "Quantity")
(form :action qty-url :method "post" :hx-post qty-url :hx-swap "none"
(input :type "hidden" :name "csrf_token" :value csrf)
(input :type "hidden" :name "count" :value minus)
(button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "-"))
(span :class "inline-flex items-center justify-center px-2 py-1 rounded-full bg-stone-100 text-[0.7rem] sm:text-xs font-medium" (raw! qty))
(form :action qty-url :method "post" :hx-post qty-url :hx-swap "none"
(input :type "hidden" :name "csrf_token" :value csrf)
(input :type "hidden" :name "count" :value plus)
(button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+")))
(div :class "flex items-center justify-between sm:justify-end gap-3" (raw! line-total-html))))))
(defcomp ~cart-page-empty ()
(div :class "max-w-full px-3 py-3 space-y-3"
(div :id "cart"
(div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"
(div :class "inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3"
(i :class "fa fa-shopping-cart text-stone-500 text-sm sm:text-base" :aria-hidden "true"))
(p :class "text-base sm:text-lg font-medium text-stone-800" "Your cart is empty")))))
(defcomp ~cart-page-panel (&key items-html cal-html tickets-html summary-html)
(div :class "max-w-full px-3 py-3 space-y-3"
(div :id "cart"
(div (section :class "space-y-3 sm:space-y-4" (raw! items-html) (raw! cal-html) (raw! tickets-html))
(raw! summary-html)))))

View File

@@ -0,0 +1,53 @@
;; Cart single order detail components
(defcomp ~cart-order-item-img (&key src alt)
(img :src src :alt alt :class "w-full h-full object-contain object-center" :loading "lazy" :decoding "async"))
(defcomp ~cart-order-item-no-img ()
(div :class "w-full h-full flex items-center justify-center text-[9px] text-stone-400" "No image"))
(defcomp ~cart-order-item (&key prod-url img-html title product-id qty price)
(li (a :class "w-full py-2 flex gap-3" :href prod-url
(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" (raw! product-id)))
(div :class "text-right whitespace-nowrap"
(p (raw! qty)) (p (raw! price)))))))
(defcomp ~cart-order-items-panel (&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 ~cart-order-cal-entry (&key name pill status date-str 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! status)))
(div :class "text-xs text-stone-500" (raw! date-str)))
(div :class "ml-4 font-medium" (raw! cost))))
(defcomp ~cart-order-cal-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 ~cart-order-main (&key summary-html items-html cal-html)
(div :class "max-w-full px-3 py-3 space-y-4" (raw! summary-html) (raw! items-html) (raw! cal-html)))
(defcomp ~cart-order-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 ~cart-order-filter (&key info 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" (raw! info)))
(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))))

51
cart/sexp/orders.sexpr Normal file
View File

@@ -0,0 +1,51 @@
;; Cart orders list components
(defcomp ~cart-order-row-desktop (&key order-id created desc total pill status detail-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! order-id)))
(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 detail-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 ~cart-order-row-mobile (&key order-id pill status created total detail-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! order-id))
(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 detail-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 ~cart-orders-end ()
(tr (td :colspan "5" :class "px-3 py-4 text-center text-xs text-stone-400" "End of results")))
(defcomp ~cart-orders-empty ()
(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 ~cart-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 ~cart-orders-filter (&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))))

52
cart/sexp/overview.sexpr Normal file
View File

@@ -0,0 +1,52 @@
;; Cart overview components
(defcomp ~cart-badge (&key icon text)
(span :class "inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-stone-100"
(i :class icon :aria-hidden "true") (raw! text)))
(defcomp ~cart-badges-wrap (&key badges-html)
(div :class "mt-1 flex flex-wrap gap-2 text-xs text-stone-600"
(raw! badges-html)))
(defcomp ~cart-group-card-img (&key src alt)
(img :src src :alt alt :class "h-16 w-16 rounded-xl object-cover border border-stone-200 flex-shrink-0"))
(defcomp ~cart-group-card-placeholder ()
(div :class "h-16 w-16 rounded-xl bg-stone-100 flex items-center justify-center flex-shrink-0"
(i :class "fa fa-store text-stone-400 text-xl" :aria-hidden "true")))
(defcomp ~cart-mp-subtitle (&key title)
(p :class "text-xs text-stone-500 truncate" (raw! title)))
(defcomp ~cart-group-card (&key href img-html display-title subtitle-html badges-html total)
(a :href href :class "block rounded-2xl border border-stone-200 bg-white shadow-sm hover:shadow-md hover:border-stone-300 transition p-4 sm:p-5"
(div :class "flex items-start gap-4"
(raw! img-html)
(div :class "flex-1 min-w-0"
(h3 :class "text-base sm:text-lg font-semibold text-stone-900 truncate" (raw! display-title))
(raw! subtitle-html) (raw! badges-html))
(div :class "text-right flex-shrink-0"
(div :class "text-lg font-bold text-stone-900" (raw! total))
(div :class "mt-1 text-xs text-emerald-700 font-medium" "View cart \u2192")))))
(defcomp ~cart-orphan-card (&key badges-html total)
(div :class "rounded-2xl border border-dashed border-amber-300 bg-amber-50/60 p-4 sm:p-5"
(div :class "flex items-start gap-4"
(div :class "h-16 w-16 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0"
(i :class "fa fa-shopping-cart text-amber-500 text-xl" :aria-hidden "true"))
(div :class "flex-1 min-w-0"
(h3 :class "text-base sm:text-lg font-semibold text-stone-900" "Other items")
(raw! badges-html))
(div :class "text-right flex-shrink-0"
(div :class "text-lg font-bold text-stone-900" (raw! total))))))
(defcomp ~cart-empty ()
(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-6 sm:p-8 text-center"
(div :class "inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3"
(i :class "fa fa-shopping-cart text-stone-500 text-sm sm:text-base" :aria-hidden "true"))
(p :class "text-base sm:text-lg font-medium text-stone-800" "Your cart is empty"))))
(defcomp ~cart-overview-panel (&key cards-html)
(div :class "max-w-full px-3 py-3 space-y-3"
(div :class "space-y-4" (raw! cards-html))))

View File

@@ -6,15 +6,19 @@ Called from route handlers in place of ``render_template()``.
"""
from __future__ import annotations
import os
from typing import Any
from shared.sexp.jinja_bridge import sexp
from shared.sexp.jinja_bridge import render, load_service_components
from shared.sexp.helpers import (
call_url, root_header_html, search_desktop_html,
search_mobile_html, full_page, oob_page,
)
from shared.infrastructure.urls import market_product_url, cart_url
# Load cart-specific .sexpr components at import time
load_service_components(os.path.dirname(os.path.dirname(__file__)))
# ---------------------------------------------------------------------------
# Header helpers
@@ -22,12 +26,12 @@ from shared.infrastructure.urls import market_product_url, cart_url
def _cart_header_html(ctx: dict, *, oob: bool = False) -> str:
"""Build the cart section header row."""
return sexp(
'(~menu-row :id "cart-row" :level 1 :colour "sky"'
' :link-href lh :link-label "cart" :icon "fa fa-shopping-cart"'
' :child-id "cart-header-child" :oob oob)',
lh=call_url(ctx, "cart_url", "/"),
oob=oob,
return render(
"menu-row",
id="cart-row", level=1, colour="sky",
link_href=call_url(ctx, "cart_url", "/"),
link_label="cart", icon="fa fa-shopping-cart",
child_id="cart-header-child", oob=oob,
)
@@ -37,44 +41,35 @@ def _page_cart_header_html(ctx: dict, page_post: Any, *, oob: bool = False) -> s
title = ((page_post.title if page_post else None) or "")[:160]
label_html = ""
if page_post and page_post.feature_image:
label_html += sexp(
'(img :src fi :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0")',
fi=page_post.feature_image,
)
label_html += sexp('(span t)', t=title)
nav_html = sexp(
'(a :href h :class "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"'
' (i :class "fa fa-arrow-left text-xs" :aria-hidden "true") "All carts")',
h=call_url(ctx, "cart_url", "/"),
)
return sexp(
'(~menu-row :id "page-cart-row" :level 2 :colour "sky"'
' :link-href lh :link-label-html llh :nav-html nh :oob oob)',
lh=call_url(ctx, "cart_url", f"/{slug}/"),
llh=label_html,
nh=nav_html,
oob=oob,
label_html += render("cart-page-label-img", src=page_post.feature_image)
label_html += f"<span>{title}</span>"
nav_html = render("cart-all-carts-link", href=call_url(ctx, "cart_url", "/"))
return render(
"menu-row",
id="page-cart-row", level=2, colour="sky",
link_href=call_url(ctx, "cart_url", f"/{slug}/"),
link_label_html=label_html, nav_html=nav_html, oob=oob,
)
def _auth_header_html(ctx: dict, *, oob: bool = False) -> str:
"""Build the account section header row (for orders)."""
return sexp(
'(~menu-row :id "auth-row" :level 1 :colour "sky"'
' :link-href lh :link-label "account" :icon "fa-solid fa-user"'
' :child-id "auth-header-child" :oob oob)',
lh=call_url(ctx, "account_url", "/"),
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",
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",
)
@@ -85,11 +80,7 @@ def _orders_header_html(ctx: dict, list_url: str) -> str:
def _badge_html(icon: str, count: int, label: str) -> str:
"""Render a count badge."""
s = "s" if count != 1 else ""
return sexp(
'(span :class "inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-stone-100"'
' (i :class ic :aria-hidden "true") txt)',
ic=icon, txt=f"{count} {label}{s}",
)
return render("cart-badge", icon=icon, text=f"{count} {label}{s}")
def _page_group_card_html(grp: Any, ctx: dict) -> str:
@@ -115,10 +106,7 @@ def _page_group_card_html(grp: Any, ctx: dict) -> str:
badges += _badge_html("fa fa-calendar", calendar_count, "booking")
if ticket_count > 0:
badges += _badge_html("fa fa-ticket", ticket_count, "ticket")
badges_html = sexp(
'(div :class "mt-1 flex flex-wrap gap-2 text-xs text-stone-600" (raw! b))',
b=badges,
)
badges_html = render("cart-badges-wrap", badges_html=badges)
if post:
slug = post.slug if hasattr(post, "slug") else post.get("slug", "")
@@ -127,66 +115,38 @@ def _page_group_card_html(grp: Any, ctx: dict) -> str:
cart_href = call_url(ctx, "cart_url", f"/{slug}/")
if feature_image:
img = sexp(
'(img :src fi :alt t :class "h-16 w-16 rounded-xl object-cover border border-stone-200 flex-shrink-0")',
fi=feature_image, t=title,
)
img = render("cart-group-card-img", src=feature_image, alt=title)
else:
img = sexp(
'(div :class "h-16 w-16 rounded-xl bg-stone-100 flex items-center justify-center flex-shrink-0"'
' (i :class "fa fa-store text-stone-400 text-xl" :aria-hidden "true"))',
)
img = render("cart-group-card-placeholder")
mp_name = ""
mp_sub = ""
if market_place:
mp_name = market_place.name if hasattr(market_place, "name") else market_place.get("name", "")
mp_sub = sexp('(p :class "text-xs text-stone-500 truncate" t)', t=title)
mp_sub = render("cart-mp-subtitle", title=title)
else:
mp_name = ""
display_title = mp_name or title
return sexp(
'(a :href ch :class "block rounded-2xl border border-stone-200 bg-white shadow-sm hover:shadow-md hover:border-stone-300 transition p-4 sm:p-5"'
' (div :class "flex items-start gap-4"'
' (raw! img)'
' (div :class "flex-1 min-w-0"'
' (h3 :class "text-base sm:text-lg font-semibold text-stone-900 truncate" dt)'
' (raw! ms) (raw! bh))'
' (div :class "text-right flex-shrink-0"'
' (div :class "text-lg font-bold text-stone-900" tt)'
' (div :class "mt-1 text-xs text-emerald-700 font-medium" "View cart \u2192"))))',
ch=cart_href, img=img, dt=display_title, ms=mp_sub, bh=badges_html,
tt=f"\u00a3{total:.2f}",
return render(
"cart-group-card",
href=cart_href, img_html=img, display_title=display_title,
subtitle_html=mp_sub, badges_html=badges_html,
total=f"\u00a3{total:.2f}",
)
else:
# Orphan items — use amber badges
badges_amber = badges.replace("bg-stone-100", "bg-amber-100")
badges_html_amber = sexp(
'(div :class "mt-1 flex flex-wrap gap-2 text-xs text-stone-600" (raw! b))',
b=badges_amber,
)
return sexp(
'(div :class "rounded-2xl border border-dashed border-amber-300 bg-amber-50/60 p-4 sm:p-5"'
' (div :class "flex items-start gap-4"'
' (div :class "h-16 w-16 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0"'
' (i :class "fa fa-shopping-cart text-amber-500 text-xl" :aria-hidden "true"))'
' (div :class "flex-1 min-w-0"'
' (h3 :class "text-base sm:text-lg font-semibold text-stone-900" "Other items")'
' (raw! bh))'
' (div :class "text-right flex-shrink-0"'
' (div :class "text-lg font-bold text-stone-900" tt))))',
bh=badges_html_amber, tt=f"\u00a3{total:.2f}",
badges_html_amber = render("cart-badges-wrap", badges_html=badges_amber)
return render(
"cart-orphan-card",
badges_html=badges_html_amber,
total=f"\u00a3{total:.2f}",
)
def _empty_cart_html() -> str:
"""Empty cart state."""
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-6 sm:p-8 text-center"'
' (div :class "inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3"'
' (i :class "fa fa-shopping-cart text-stone-500 text-sm sm:text-base" :aria-hidden "true"))'
' (p :class "text-base sm:text-lg font-medium text-stone-800" "Your cart is empty")))',
)
return render("cart-empty")
def _overview_main_panel_html(page_groups: list, ctx: dict) -> str:
@@ -199,11 +159,7 @@ def _overview_main_panel_html(page_groups: list, ctx: dict) -> str:
if not has_items:
return _empty_cart_html()
return sexp(
'(div :class "max-w-full px-3 py-3 space-y-3"'
' (div :class "space-y-4" (raw! c)))',
c="".join(cards),
)
return render("cart-overview-panel", cards_html="".join(cards))
# ---------------------------------------------------------------------------
@@ -225,78 +181,38 @@ def _cart_item_html(item: Any, ctx: dict) -> str:
prod_url = market_product_url(slug)
if p.image:
img = sexp(
'(img :src im :alt t :class "w-24 h-24 sm:w-32 sm:h-28 object-cover rounded-xl border border-stone-100" :loading "lazy")',
im=p.image, t=p.title,
)
img = render("cart-item-img", src=p.image, alt=p.title)
else:
img = sexp(
'(div :class "w-24 h-24 sm:w-32 sm:h-28 rounded-xl border border-dashed border-stone-300 flex items-center justify-center text-xs text-stone-400"'
' "No image")',
)
img = render("cart-item-no-img")
price_html = ""
if unit_price:
price_html = sexp(
'(p :class "text-sm sm:text-base font-semibold text-stone-900" ps)',
ps=f"{symbol}{unit_price:.2f}",
)
price_html = render("cart-item-price", text=f"{symbol}{unit_price:.2f}")
if p.special_price and p.special_price != p.regular_price:
price_html += sexp(
'(p :class "text-xs text-stone-400 line-through" ps)',
ps=f"{symbol}{p.regular_price:.2f}",
)
price_html += render("cart-item-price-was", text=f"{symbol}{p.regular_price:.2f}")
else:
price_html = sexp('(p :class "text-xs text-stone-500" "No price")')
price_html = render("cart-item-no-price")
deleted_html = ""
if getattr(item, "is_deleted", False):
deleted_html = sexp(
'(p :class "mt-2 inline-flex items-center gap-1 text-[0.65rem] sm:text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-full px-2 py-0.5"'
' (i :class "fa-solid fa-triangle-exclamation text-[0.6rem]" :aria-hidden "true")'
' " This item is no longer available or price has changed")',
)
deleted_html = render("cart-item-deleted")
brand_html = ""
if getattr(p, "brand", None):
brand_html = sexp('(p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" br)', br=p.brand)
brand_html = render("cart-item-brand", brand=p.brand)
line_total_html = ""
if unit_price:
lt = unit_price * item.quantity
line_total_html = sexp(
'(p :class "text-sm sm:text-base font-semibold text-stone-900" lt)',
lt=f"Line total: {symbol}{lt:.2f}",
)
line_total_html = render("cart-item-line-total", text=f"Line total: {symbol}{lt:.2f}")
return sexp(
'(article :id aid :class "flex flex-col sm:flex-row gap-3 sm:gap-4 rounded-2xl bg-white shadow-sm border border-stone-200 p-3 sm:p-4 md:p-5"'
' (div :class "w-full sm:w-32 shrink-0 flex justify-center sm:block" (raw! img))'
' (div :class "flex-1 min-w-0"'
' (div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-2 sm:gap-3"'
' (div :class "min-w-0"'
' (h2 :class "text-sm sm:text-base md:text-lg font-semibold text-stone-900"'
' (a :href pu :class "hover:text-emerald-700" pt))'
' (raw! brh) (raw! dh))'
' (div :class "text-left sm:text-right" (raw! ph)))'
' (div :class "mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4"'
' (div :class "flex items-center gap-2 text-xs sm:text-sm text-stone-700"'
' (span :class "text-[0.65rem] sm:text-xs uppercase tracking-wide text-stone-500" "Quantity")'
' (form :action qu :method "post" :hx-post qu :hx-swap "none"'
' (input :type "hidden" :name "csrf_token" :value csrf)'
' (input :type "hidden" :name "count" :value minus)'
' (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "-"))'
' (span :class "inline-flex items-center justify-center px-2 py-1 rounded-full bg-stone-100 text-[0.7rem] sm:text-xs font-medium" qty)'
' (form :action qu :method "post" :hx-post qu :hx-swap "none"'
' (input :type "hidden" :name "csrf_token" :value csrf)'
' (input :type "hidden" :name "count" :value plus)'
' (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+")))'
' (div :class "flex items-center justify-between sm:justify-end gap-3" (raw! lth)))))',
aid=f"cart-item-{slug}", img=img, pu=prod_url, pt=p.title,
brh=brand_html, dh=deleted_html, ph=price_html,
qu=qty_url, csrf=csrf, minus=str(item.quantity - 1),
return render(
"cart-item",
id=f"cart-item-{slug}", img_html=img, prod_url=prod_url, title=p.title,
brand_html=brand_html, deleted_html=deleted_html, price_html=price_html,
qty_url=qty_url, csrf=csrf, minus=str(item.quantity - 1),
qty=str(item.quantity), plus=str(item.quantity + 1),
lth=line_total_html,
line_total_html=line_total_html,
)
@@ -311,19 +227,11 @@ def _calendar_entries_html(entries: list) -> str:
end = getattr(e, "end_at", None)
cost = getattr(e, "cost", 0) or 0
end_str = f" \u2013 {end}" if end else ""
items += sexp(
'(li :class "flex items-start justify-between text-sm"'
' (div (div :class "font-medium" nm)'
' (div :class "text-xs text-stone-500" ds))'
' (div :class "ml-4 font-medium" cs))',
nm=name, ds=f"{start}{end_str}", cs=f"\u00a3{cost:.2f}",
items += render(
"cart-cal-entry",
name=name, date_str=f"{start}{end_str}", cost=f"\u00a3{cost:.2f}",
)
return sexp(
'(div :class "mt-6 border-t border-stone-200 pt-4"'
' (h2 :class "text-base font-semibold mb-2" "Calendar bookings")'
' (ul :class "space-y-2" (raw! items)))',
items=items,
)
return render("cart-cal-section", items_html=items)
def _ticket_groups_html(ticket_groups: list, ctx: dict) -> str:
@@ -352,51 +260,19 @@ def _ticket_groups_html(ticket_groups: list, ctx: dict) -> str:
if end_at:
date_str += f" \u2013 {end_at.strftime('%-d %b %Y, %H:%M')}"
tt_name_html = sexp('(p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" tn)', tn=tt_name) if tt_name else ""
tt_hidden = sexp('(input :type "hidden" :name "ticket_type_id" :value tid)', tid=str(tt_id)) if tt_id else ""
tt_name_html = render("cart-ticket-type-name", name=tt_name) if tt_name else ""
tt_hidden = render("cart-ticket-type-hidden", value=str(tt_id)) if tt_id else ""
items += sexp(
'(article :class "flex flex-col sm:flex-row gap-3 sm:gap-4 rounded-2xl bg-white shadow-sm border border-stone-200 p-3 sm:p-4"'
' (div :class "flex-1 min-w-0"'
' (div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-2 sm:gap-3"'
' (div :class "min-w-0"'
' (h3 :class "text-sm sm:text-base font-semibold text-stone-900" nm)'
' (raw! tnh)'
' (p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" ds))'
' (div :class "text-left sm:text-right"'
' (p :class "text-sm sm:text-base font-semibold text-stone-900" ps)))'
' (div :class "mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4"'
' (div :class "flex items-center gap-2 text-xs sm:text-sm text-stone-700"'
' (span :class "text-[0.65rem] sm:text-xs uppercase tracking-wide text-stone-500" "Quantity")'
' (form :action qu :method "post" :hx-post qu :hx-swap "none"'
' (input :type "hidden" :name "csrf_token" :value csrf)'
' (input :type "hidden" :name "entry_id" :value eid)'
' (raw! tth)'
' (input :type "hidden" :name "count" :value minus)'
' (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "-"))'
' (span :class "inline-flex items-center justify-center px-2 py-1 rounded-full bg-stone-100 text-[0.7rem] sm:text-xs font-medium" qty)'
' (form :action qu :method "post" :hx-post qu :hx-swap "none"'
' (input :type "hidden" :name "csrf_token" :value csrf)'
' (input :type "hidden" :name "entry_id" :value eid)'
' (raw! tth)'
' (input :type "hidden" :name "count" :value plus)'
' (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+")))'
' (div :class "flex items-center justify-between sm:justify-end gap-3"'
' (p :class "text-sm sm:text-base font-semibold text-stone-900" lt)))))',
nm=name, tnh=tt_name_html, ds=date_str,
ps=f"\u00a3{price or 0:.2f}", qu=qty_url, csrf=csrf,
eid=str(entry_id), tth=tt_hidden,
items += render(
"cart-ticket-article",
name=name, type_name_html=tt_name_html, date_str=date_str,
price=f"\u00a3{price or 0:.2f}", qty_url=qty_url, csrf=csrf,
entry_id=str(entry_id), type_hidden_html=tt_hidden,
minus=str(max(quantity - 1, 0)), qty=str(quantity),
plus=str(quantity + 1), lt=f"Line total: \u00a3{line_total:.2f}",
plus=str(quantity + 1), line_total=f"Line total: \u00a3{line_total:.2f}",
)
return sexp(
'(div :class "mt-6 border-t border-stone-200 pt-4"'
' (h2 :class "text-base font-semibold mb-2"'
' (i :class "fa fa-ticket mr-1" :aria-hidden "true") " Event tickets")'
' (div :class "space-y-3" (raw! items)))',
items=items,
)
return render("cart-tickets-section", items_html=items)
def _cart_summary_html(ctx: dict, cart: list, cal_entries: list, tickets: list,
@@ -431,36 +307,18 @@ def _cart_summary_html(ctx: dict, cart: list, cal_entries: list, tickets: list,
action = url_for("cart_global.checkout")
from shared.utils import route_prefix
action = route_prefix() + action
checkout_html = sexp(
'(form :method "post" :action act :class "w-full"'
' (input :type "hidden" :name "csrf_token" :value csrf)'
' (button :type "submit" :class "w-full inline-flex items-center justify-center px-4 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-solid fa-credit-card mr-2" :aria-hidden "true") lbl))',
act=action, csrf=csrf, lbl=f" Checkout as {user.email}",
checkout_html = render(
"cart-checkout-form",
action=action, csrf=csrf, label=f" Checkout as {user.email}",
)
else:
href = login_url(request.url)
checkout_html = sexp(
'(div :class "w-full flex"'
' (a :href h :class "w-full cursor-pointer flex flex-row items-center justify-center p-3 gap-2 rounded bg-stone-200 text-black hover:bg-stone-300 transition"'
' (i :class "fa-solid fa-key") (span "sign in or register to checkout")))',
h=href,
)
checkout_html = render("cart-checkout-signin", href=href)
return sexp(
'(aside :id "cart-summary" :class "lg:pl-2"'
' (div :class "rounded-2xl bg-white shadow-sm border border-stone-200 p-4 sm:p-5"'
' (h2 :class "text-sm sm:text-base font-semibold text-stone-900 mb-3 sm:mb-4" "Order summary")'
' (dl :class "space-y-2 text-xs sm:text-sm"'
' (div :class "flex items-center justify-between"'
' (dt :class "text-stone-600" "Items") (dd :class "text-stone-900" ic))'
' (div :class "flex items-center justify-between"'
' (dt :class "text-stone-600" "Subtotal") (dd :class "text-stone-900" st)))'
' (div :class "flex flex-col items-center w-full"'
' (h1 :class "text-5xl mt-2" "This is a test - it will not take actual money")'
' (div "use dummy card number: 5555 5555 5555 4444"))'
' (div :class "mt-4 sm:mt-5" (raw! ch))))',
ic=str(item_count), st=f"{symbol}{grand:.2f}", ch=checkout_html,
return render(
"cart-summary-panel",
item_count=str(item_count), subtotal=f"{symbol}{grand:.2f}",
checkout_html=checkout_html,
)
@@ -470,26 +328,17 @@ def _page_cart_main_panel_html(ctx: dict, cart: list, cal_entries: list,
ticket_total_fn: Any) -> str:
"""Page cart main panel."""
if not cart and not cal_entries and not tickets:
return sexp(
'(div :class "max-w-full px-3 py-3 space-y-3"'
' (div :id "cart"'
' (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"'
' (div :class "inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3"'
' (i :class "fa fa-shopping-cart text-stone-500 text-sm sm:text-base" :aria-hidden "true"))'
' (p :class "text-base sm:text-lg font-medium text-stone-800" "Your cart is empty"))))',
)
return render("cart-page-empty")
items_html = "".join(_cart_item_html(item, ctx) for item in cart)
cal_html = _calendar_entries_html(cal_entries)
tickets_html = _ticket_groups_html(ticket_groups, ctx)
summary_html = _cart_summary_html(ctx, cart, cal_entries, tickets, total_fn, cal_total_fn, ticket_total_fn)
return sexp(
'(div :class "max-w-full px-3 py-3 space-y-3"'
' (div :id "cart"'
' (div (section :class "space-y-3 sm:space-y-4" (raw! ih) (raw! ch) (raw! th))'
' (raw! sh))))',
ih=items_html, ch=cal_html, th=tickets_html, sh=summary_html,
return render(
"cart-page-panel",
items_html=items_html, cal_html=cal_html,
tickets_html=tickets_html, summary_html=summary_html,
)
@@ -506,35 +355,21 @@ def _order_row_html(order: Any, detail_url: str) -> str:
else "border-rose-300 bg-rose-50 text-rose-700" if sl in ("failed", "cancelled")
else "border-stone-300 bg-stone-50 text-stone-700"
)
pill_cls = f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] sm:text-xs {pill}"
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" oid))'
' (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" cr)'
' (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" desc)'
' (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" tot)'
' (td :class "px-3 py-2 align-top" (span :class (str "inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] sm:text-xs " pill) st))'
' (td :class "px-3 py-0.5 align-top text-right"'
' (a :href du :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")))',
oid=f"#{order.id}", cr=created, desc=order.description or "",
tot=total, pill=pill, st=status, du=detail_url,
desktop = render(
"cart-order-row-desktop",
order_id=f"#{order.id}", created=created, desc=order.description or "",
total=total, pill=pill_cls, status=status, detail_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" oid)'
' (span :class (str "inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] " pill) st))'
' (div :class "text-[11px] text-stone-500 break-words" cr)'
' (div :class "flex items-center justify-between gap-2"'
' (div :class "font-medium text-stone-800" tot)'
' (a :href du :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")))))',
oid=f"#{order.id}", pill=pill, st=status, cr=created,
tot=total, du=detail_url,
mobile_pill = f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] {pill}"
mobile = render(
"cart-order-row-mobile",
order_id=f"#{order.id}", pill=mobile_pill, status=status,
created=created, total=total, detail_url=detail_url,
)
return desktop + mobile
@@ -553,14 +388,13 @@ 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("cart-orders-end"))
return "".join(parts)
@@ -568,37 +402,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 for orders list."""
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! rh)))))',
rh=rows_html,
)
return render("cart-orders-empty")
return render("cart-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("cart-orders-filter", search_mobile_html=search_mobile_html(ctx))
# ---------------------------------------------------------------------------
@@ -613,43 +423,31 @@ 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 pi :alt pt :class "w-full h-full object-contain object-center" :loading "lazy" :decoding "async")',
pi=item.product_image, pt=item.product_title or "Product image",
img = render(
"cart-order-item-img",
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")',
)
items += sexp(
'(li (a :class "w-full py-2 flex gap-3" :href pu'
' (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" pt)'
' (p :class "text-[11px] text-stone-500" pid))'
' (div :class "text-right whitespace-nowrap"'
' (p qty) (p pr)))))',
pu=prod_url, img=img, pt=item.product_title or "Unknown product",
pid=f"Product ID: {item.product_id}",
img = render("cart-order-item-no-img")
items += render(
"cart-order-item",
prod_url=prod_url, img_html=img,
title=item.product_title or "Unknown product",
product_id=f"Product ID: {item.product_id}",
qty=f"Qty: {item.quantity}",
pr=f"{item.currency or order.currency or 'GBP'} {item.unit_price or 0:.2f}",
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=items,
)
return render("cart-order-items-panel", items_html=items)
def _order_summary_html(order: Any) -> str:
"""Order summary card."""
return 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,
return 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,
)
@@ -666,31 +464,25 @@ def _order_calendar_items_html(calendar_entries: list | None) -> str:
else "bg-blue-100 text-blue-800" if st == "ordered"
else "bg-stone-100 text-stone-700"
)
pill_cls = f"inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium {pill}"
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 += sexp(
'(li :class "px-4 py-3 flex items-start justify-between text-sm"'
' (div (div :class "font-medium flex items-center gap-2"'
' nm (span :class (str "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium " pill) sc))'
' (div :class "text-xs text-stone-500" ds))'
' (div :class "ml-4 font-medium" cs))',
nm=e.name, pill=pill, sc=st.capitalize(), ds=ds, cs=f"\u00a3{e.cost or 0:.2f}",
items += render(
"cart-order-cal-entry",
name=e.name, pill=pill_cls, status=st.capitalize(),
date_str=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=items,
)
return render("cart-order-cal-section", items_html=items)
def _order_main_html(order: Any, calendar_entries: list | None) -> str:
"""Main panel for single order detail."""
summary = _order_summary_html(order)
return sexp(
'(div :class "max-w-full px-3 py-3 space-y-4" (raw! s) (raw! oi) (raw! ci))',
s=summary, oi=_order_items_html(order), ci=_order_calendar_items_html(calendar_entries),
return render(
"cart-order-main",
summary_html=summary, items_html=_order_items_html(order),
cal_html=_order_calendar_items_html(calendar_entries),
)
@@ -702,26 +494,12 @@ def _order_filter_html(order: Any, list_url: str, recheck_url: str,
pay = ""
if status != "paid":
pay = sexp(
'(a :href pu :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")',
pu=pay_url,
)
pay = render("cart-order-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" info))'
' (div :class "flex w-full sm:w-auto justify-start sm:justify-end gap-2"'
' (a :href lu :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 ru :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(
"cart-order-filter",
info=f"Placed {created} \u00b7 Status: {status}",
lu=list_url, ru=recheck_url, csrf=csrf_token, pay=pay,
list_url=list_url, recheck_url=recheck_url, csrf=csrf_token, pay_html=pay,
)
@@ -733,10 +511,7 @@ async def render_overview_page(ctx: dict, page_groups: list) -> str:
"""Full page: cart overview."""
main = _overview_main_panel_html(page_groups, ctx)
hdr = root_header_html(ctx)
hdr += sexp(
'(div :id "root-header-child" :class "flex flex-col w-full items-center" (raw! c))',
c=_cart_header_html(ctx),
)
hdr += render("cart-header-child", inner_html=_cart_header_html(ctx))
return full_page(ctx, header_rows_html=hdr, content_html=main)
@@ -764,10 +539,9 @@ async def render_page_cart_page(ctx: dict, page_post: Any,
hdr = root_header_html(ctx)
child = _cart_header_html(ctx)
page_hdr = _page_cart_header_html(ctx, page_post)
hdr += sexp(
'(div :id "root-header-child" :class "flex flex-col w-full items-center" (raw! c)'
' (div :id "cart-header-child" :class "flex flex-col w-full items-center" (raw! p)))',
c=child, p=page_hdr,
hdr += render(
"cart-header-child-nested",
outer_html=child, inner_html=page_hdr,
)
return full_page(ctx, header_rows_html=hdr, content_html=main)
@@ -780,8 +554,7 @@ async def render_page_cart_oob(ctx: dict, page_post: Any,
main = _page_cart_main_panel_html(ctx, cart, cal_entries, tickets, ticket_groups,
total_fn, cal_total_fn, ticket_total_fn)
oobs = (
sexp('(div :id "cart-header-child" :hx-swap-oob "outerHTML" :class "flex flex-col w-full items-center" (raw! p))',
p=_page_cart_header_html(ctx, page_post))
render("cart-header-child-oob", inner_html=_page_cart_header_html(ctx, page_post))
+ _cart_header_html(ctx, oob=True)
+ root_header_html(ctx, oob=True)
)
@@ -807,10 +580,10 @@ 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)'
' (div :id "auth-header-child" :class "flex flex-col w-full items-center" (raw! o)))',
a=_auth_header_html(ctx), o=_orders_header_html(ctx, list_url),
hdr += render(
"cart-auth-header-child",
auth_html=_auth_header_html(ctx),
orders_html=_orders_header_html(ctx, list_url),
)
return full_page(ctx, header_rows_html=hdr,
@@ -842,10 +615,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(
"cart-auth-header-child-oob",
inner_html=_orders_header_html(ctx, list_url),
)
+ root_header_html(ctx, oob=True)
)
@@ -877,17 +649,16 @@ async def render_order_page(ctx: dict, order: Any,
filt = _order_filter_html(order, list_url, recheck_url, pay_url, generate_csrf_token())
hdr = root_header_html(ctx)
order_row = sexp(
'(~menu-row :id "order-row" :level 3 :colour "sky" :link-href lh :link-label ll :icon "fa fa-gbp")',
lh=detail_url, ll=f"Order {order.id}",
order_row = render(
"menu-row",
id="order-row", level=3, colour="sky",
link_href=detail_url, link_label=f"Order {order.id}", 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(
"cart-order-header-child",
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)
@@ -909,12 +680,14 @@ 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 ll :icon "fa fa-gbp" :oob true)',
lh=detail_url, ll=f"Order {order.id}",
order_row_oob = render(
"menu-row",
id="order-row", level=3, colour="sky",
link_href=detail_url, link_label=f"Order {order.id}", 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("cart-orders-header-child-oob", inner_html=order_row_oob)
+ root_header_html(ctx, oob=True)
)
@@ -926,43 +699,25 @@ 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("cart-checkout-error-filter")
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" oid))',
oid=f"#{order.id}",
)
order_html = render("cart-checkout-error-order-id", order_id=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 em)'
' (raw! oh))'
' (div (a :href bu :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")))',
em=err_msg, oh=order_html, bu=back_url,
return render(
"cart-checkout-error-content",
error_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=_cart_header_html(ctx),
)
hdr += render("cart-header-child", inner_html=_cart_header_html(ctx))
filt = _checkout_error_filter_html()
content = _checkout_error_content_html(error, order)
return full_page(ctx, header_rows_html=hdr, filter_html=filt, content_html=content)

26
cart/sexp/summary.sexpr Normal file
View File

@@ -0,0 +1,26 @@
;; Cart summary / checkout components
(defcomp ~cart-checkout-form (&key action csrf label)
(form :method "post" :action action :class "w-full"
(input :type "hidden" :name "csrf_token" :value csrf)
(button :type "submit" :class "w-full inline-flex items-center justify-center px-4 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-solid fa-credit-card mr-2" :aria-hidden "true") (raw! label))))
(defcomp ~cart-checkout-signin (&key href)
(div :class "w-full flex"
(a :href href :class "w-full cursor-pointer flex flex-row items-center justify-center p-3 gap-2 rounded bg-stone-200 text-black hover:bg-stone-300 transition"
(i :class "fa-solid fa-key") (span "sign in or register to checkout"))))
(defcomp ~cart-summary-panel (&key item-count subtotal checkout-html)
(aside :id "cart-summary" :class "lg:pl-2"
(div :class "rounded-2xl bg-white shadow-sm border border-stone-200 p-4 sm:p-5"
(h2 :class "text-sm sm:text-base font-semibold text-stone-900 mb-3 sm:mb-4" "Order summary")
(dl :class "space-y-2 text-xs sm:text-sm"
(div :class "flex items-center justify-between"
(dt :class "text-stone-600" "Items") (dd :class "text-stone-900" (raw! item-count)))
(div :class "flex items-center justify-between"
(dt :class "text-stone-600" "Subtotal") (dd :class "text-stone-900" (raw! subtotal))))
(div :class "flex flex-col items-center w-full"
(h1 :class "text-5xl mt-2" "This is a test - it will not take actual money")
(div "use dummy card number: 5555 5555 5555 4444"))
(div :class "mt-4 sm:mt-5" (raw! checkout-html)))))

42
cart/sexp/tickets.sexpr Normal file
View File

@@ -0,0 +1,42 @@
;; Cart ticket components
(defcomp ~cart-ticket-type-name (&key name)
(p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" (raw! name)))
(defcomp ~cart-ticket-type-hidden (&key value)
(input :type "hidden" :name "ticket_type_id" :value value))
(defcomp ~cart-ticket-article (&key name type-name-html date-str price qty-url csrf entry-id type-hidden-html minus qty plus line-total)
(article :class "flex flex-col sm:flex-row gap-3 sm:gap-4 rounded-2xl bg-white shadow-sm border border-stone-200 p-3 sm:p-4"
(div :class "flex-1 min-w-0"
(div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-2 sm:gap-3"
(div :class "min-w-0"
(h3 :class "text-sm sm:text-base font-semibold text-stone-900" (raw! name))
(raw! type-name-html)
(p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" (raw! date-str)))
(div :class "text-left sm:text-right"
(p :class "text-sm sm:text-base font-semibold text-stone-900" (raw! price))))
(div :class "mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4"
(div :class "flex items-center gap-2 text-xs sm:text-sm text-stone-700"
(span :class "text-[0.65rem] sm:text-xs uppercase tracking-wide text-stone-500" "Quantity")
(form :action qty-url :method "post" :hx-post qty-url :hx-swap "none"
(input :type "hidden" :name "csrf_token" :value csrf)
(input :type "hidden" :name "entry_id" :value entry-id)
(raw! type-hidden-html)
(input :type "hidden" :name "count" :value minus)
(button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "-"))
(span :class "inline-flex items-center justify-center px-2 py-1 rounded-full bg-stone-100 text-[0.7rem] sm:text-xs font-medium" (raw! qty))
(form :action qty-url :method "post" :hx-post qty-url :hx-swap "none"
(input :type "hidden" :name "csrf_token" :value csrf)
(input :type "hidden" :name "entry_id" :value entry-id)
(raw! type-hidden-html)
(input :type "hidden" :name "count" :value plus)
(button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+")))
(div :class "flex items-center justify-between sm:justify-end gap-3"
(p :class "text-sm sm:text-base font-semibold text-stone-900" (raw! line-total)))))))
(defcomp ~cart-tickets-section (&key items-html)
(div :class "mt-6 border-t border-stone-200 pt-4"
(h2 :class "text-base font-semibold mb-2"
(i :class "fa fa-ticket mr-1" :aria-hidden "true") " Event tickets")
(div :class "space-y-3" (raw! items-html))))