From 3bd4f4b6615558d713074073d8569fae7b555214 Mon Sep 17 00:00:00 2001
From: giles <giles.bradshaw@rose-ash.com>
Date: Tue, 3 Mar 2026 08:52:32 +0000
Subject: [PATCH] Replace 21 Jinja render_template() calls with sx render
 functions

Phase 1: Wire 16 events routes to existing sx render functions
- slot, slots, ticket_types, ticket_type, calendar_entries,
  calendar_entry, calendar_entry/admin

Phase 2: Orders checkout return (2 calls)
- New orders/sx/checkout.sx with return page components
- New render_checkout_return_page() in orders/sx/sx_components.py

Phase 3: Blog menu items (3 calls)
- New blog/sx/menu_items.sx with search result components
- New render_menu_item_form() and render_page_search_results()
  in blog/sx/sx_components.py

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 blog/bp/menu_items/routes.py             |  26 ++---
 blog/sx/menu_items.sx                    |  26 +++++
 blog/sx/sx_components.py                 | 118 +++++++++++++++++++++++
 events/bp/calendar_entries/routes.py     |  29 ++++--
 events/bp/calendar_entry/admin/routes.py |  21 ++--
 events/bp/calendar_entry/routes.py       |  34 +++++--
 events/bp/slot/routes.py                 |  29 ++----
 events/bp/slots/routes.py                |  13 +--
 events/bp/ticket_type/routes.py          |  31 +++---
 events/bp/ticket_types/routes.py         |  38 ++++----
 orders/bp/checkout/routes.py             |  17 ++--
 orders/sx/checkout.sx                    |  54 +++++++++++
 orders/sx/sx_components.py               |  79 +++++++++++++++
 13 files changed, 395 insertions(+), 120 deletions(-)
 create mode 100644 blog/sx/menu_items.sx
 create mode 100644 orders/sx/checkout.sx

diff --git a/blog/bp/menu_items/routes.py b/blog/bp/menu_items/routes.py
index ccf4248..2c0ccd6 100644
--- a/blog/bp/menu_items/routes.py
+++ b/blog/bp/menu_items/routes.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from quart import Blueprint, render_template, make_response, request, jsonify, g
+from quart import Blueprint, make_response, request, jsonify, g
 
 from shared.browser.app.authz import require_admin
 from .services.menu_items import (
@@ -46,11 +46,8 @@ def register():
     @require_admin
     async def new_menu_item():
         """Show form to create new menu item"""
-        html = await render_template(
-            "_types/menu_items/_form.html",
-            menu_item=None,
-        )
-        return await make_response(html)
+        from sx.sx_components import render_menu_item_form
+        return sx_response(render_menu_item_form())
 
     @bp.post("/")
     @require_admin
@@ -89,11 +86,8 @@ def register():
         if not menu_item:
             return await make_response("Menu item not found", 404)
 
-        html = await render_template(
-            "_types/menu_items/_form.html",
-            menu_item=menu_item,
-        )
-        return await make_response(html)
+        from sx.sx_components import render_menu_item_form
+        return sx_response(render_menu_item_form(menu_item=menu_item))
 
     @bp.put("/<int:item_id>/")
     @require_admin
@@ -153,14 +147,8 @@ def register():
         pages, total = await search_pages(g.s, query, page, per_page)
         has_more = (page * per_page) < total
 
-        html = await render_template(
-            "_types/menu_items/_page_search_results.html",
-            pages=pages,
-            query=query,
-            page=page,
-            has_more=has_more,
-        )
-        return await make_response(html)
+        from sx.sx_components import render_page_search_results
+        return sx_response(render_page_search_results(pages, query, page, has_more))
 
     @bp.post("/reorder/")
     @require_admin
diff --git a/blog/sx/menu_items.sx b/blog/sx/menu_items.sx
new file mode 100644
index 0000000..d9fb57d
--- /dev/null
+++ b/blog/sx/menu_items.sx
@@ -0,0 +1,26 @@
+;; Menu item form and page search components
+
+(defcomp ~page-search-item (&key id title slug feature-image)
+  (div :class "flex items-center gap-3 p-3 hover:bg-stone-50 cursor-pointer border-b last:border-b-0"
+    :data-page-id id :data-page-title title :data-page-slug slug
+    :data-page-image (or feature-image "")
+    (if feature-image
+      (img :src feature-image :alt title :class "w-10 h-10 rounded-full object-cover flex-shrink-0")
+      (div :class "w-10 h-10 rounded-full bg-stone-200 flex-shrink-0"))
+    (div :class "flex-1 min-w-0"
+      (div :class "font-medium truncate" title)
+      (div :class "text-xs text-stone-500 truncate" slug))))
+
+(defcomp ~page-search-results (&key items sentinel)
+  (div :class "border border-stone-200 rounded-md max-h-64 overflow-y-auto"
+    items sentinel))
+
+(defcomp ~page-search-sentinel (&key url query next-page)
+  (div :sx-get url :sx-trigger "intersect once" :sx-swap "outerHTML"
+    :sx-vals (str "{\"q\": \"" query "\", \"page\": " next-page "}")
+    :class "p-3 text-center text-sm text-stone-400"
+    (i :class "fa fa-spinner fa-spin") " Loading more..."))
+
+(defcomp ~page-search-empty (&key query)
+  (div :class "p-3 text-center text-stone-400 border border-stone-200 rounded-md"
+    (str "No pages found matching \"" query "\"")))
diff --git a/blog/sx/sx_components.py b/blog/sx/sx_components.py
index 6915684..f5a8693 100644
--- a/blog/sx/sx_components.py
+++ b/blog/sx/sx_components.py
@@ -1706,6 +1706,124 @@ def render_menu_items_list(menu_items) -> str:
     return _menu_items_list_sx(ctx)
 
 
+def render_menu_item_form(menu_item=None) -> str:
+    """Render menu item add/edit form (replaces _types/menu_items/_form.html)."""
+    from quart import url_for as qurl
+    from shared.browser.app.csrf import generate_csrf_token
+
+    csrf = generate_csrf_token()
+    search_url = qurl("menu_items.search_pages_route")
+    is_edit = menu_item is not None
+
+    if is_edit:
+        action_url = qurl("menu_items.update_menu_item_route", item_id=menu_item.id)
+        action_attr = f'sx-put="{action_url}"'
+        post_id = str(menu_item.container_id) if menu_item.container_id else ""
+        label = getattr(menu_item, "label", "") or ""
+        slug = getattr(menu_item, "slug", "") or ""
+        fi = getattr(menu_item, "feature_image", None) or ""
+    else:
+        action_url = qurl("menu_items.create_menu_item_route")
+        action_attr = f'sx-post="{action_url}"'
+        post_id = ""
+        label = ""
+        slug = ""
+        fi = ""
+
+    # Build selected page display
+    if post_id:
+        img_html = (f'<img src="{fi}" alt="{label}" class="w-10 h-10 rounded-full object-cover" />'
+                    if fi else '<div class="w-10 h-10 rounded-full bg-stone-200"></div>')
+        selected = (f'<div id="selected-page-display" class="mb-3 p-3 bg-stone-50 rounded flex items-center gap-3">'
+                    f'{img_html}<div class="flex-1"><div class="font-medium">{label}</div>'
+                    f'<div class="text-xs text-stone-500">{slug}</div></div></div>')
+    else:
+        selected = '<div id="selected-page-display" class="mb-3 hidden"></div>'
+
+    close_js = "document.getElementById('menu-item-form').innerHTML = ''"
+    title = "Edit Menu Item" if is_edit else "Add Menu Item"
+
+    html = f'''<div class="bg-white rounded-lg shadow p-6 mb-6" id="menu-item-form-container">
+  <div class="flex justify-between items-center mb-4">
+    <h2 class="text-xl font-semibold">{title}</h2>
+    <button type="button" onclick="{close_js}" class="text-stone-400 hover:text-stone-600">
+      <i class="fa fa-times"></i></button>
+  </div>
+  <input type="hidden" name="post_id" id="selected-post-id" value="{post_id}" />
+  {selected}
+  <form {action_attr} sx-target="#menu-items-list" sx-swap="innerHTML"
+    sx-include="#selected-post-id"
+    sx-on:afterRequest="if(event.detail.successful) {{ {close_js} }}"
+    class="space-y-4">
+    <input type="hidden" name="csrf_token" value="{csrf}">
+    <div class="flex gap-2 pb-3 border-b">
+      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+        <i class="fa fa-save"></i> Save</button>
+      <button type="button" onclick="{close_js}"
+        class="px-4 py-2 border border-stone-300 rounded hover:bg-stone-50">Cancel</button>
+    </div>
+  </form>
+  <div class="mt-4">
+    <label class="block text-sm font-medium text-stone-700 mb-2">Select Page</label>
+    <input type="text" placeholder="Search for a page... (or leave blank for all)"
+      sx-get="{search_url}" sx-trigger="keyup changed delay:300ms, focus once"
+      sx-target="#page-search-results" sx-swap="innerHTML"
+      name="q" id="page-search-input"
+      class="w-full px-3 py-2 border border-stone-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
+    <div id="page-search-results" class="mt-2"></div>
+  </div>
+</div>
+<script>
+document.addEventListener('click', function(e) {{
+  var pageOption = e.target.closest('[data-page-id]');
+  if (pageOption) {{
+    var postId = pageOption.dataset.pageId;
+    var postTitle = pageOption.dataset.pageTitle;
+    var postSlug = pageOption.dataset.pageSlug;
+    var postImage = pageOption.dataset.pageImage;
+    document.getElementById('selected-post-id').value = postId;
+    var display = document.getElementById('selected-page-display');
+    display.innerHTML = '<div class="p-3 bg-stone-50 rounded flex items-center gap-3">' +
+      (postImage ? '<img src="' + postImage + '" alt="' + postTitle + '" class="w-10 h-10 rounded-full object-cover" />' : '<div class="w-10 h-10 rounded-full bg-stone-200"></div>') +
+      '<div class="flex-1"><div class="font-medium">' + postTitle + '</div><div class="text-xs text-stone-500">' + postSlug + '</div></div></div>';
+    display.classList.remove('hidden');
+    document.getElementById('page-search-results').innerHTML = '';
+  }}
+}});
+</script>'''
+    return html
+
+
+def render_page_search_results(pages, query, page, has_more) -> str:
+    """Render page search results (replaces _types/menu_items/_page_search_results.html)."""
+    from quart import url_for as qurl
+
+    if not pages and query:
+        return sx_call("page-search-empty", query=query)
+
+    if not pages:
+        return ""
+
+    items = []
+    for post in pages:
+        items.append(sx_call("page-search-item",
+                             id=post.id, title=post.title,
+                             slug=post.slug,
+                             feature_image=post.feature_image or None))
+
+    sentinel = ""
+    if has_more:
+        search_url = qurl("menu_items.search_pages_route")
+        sentinel = sx_call("page-search-sentinel",
+                          url=search_url, query=query,
+                          next_page=page + 1)
+
+    items_sx = "(<> " + " ".join(items) + ")"
+    return sx_call("page-search-results",
+                   items=SxExpr(items_sx),
+                   sentinel=SxExpr(sentinel) if sentinel else None)
+
+
 def render_menu_items_nav_oob(menu_items, ctx: dict | None = None) -> str:
     """Render the OOB nav update for menu items.
 
diff --git a/events/bp/calendar_entries/routes.py b/events/bp/calendar_entries/routes.py
index 544935d..84faff0 100644
--- a/events/bp/calendar_entries/routes.py
+++ b/events/bp/calendar_entries/routes.py
@@ -265,18 +265,27 @@ def register():
     
     @bp.get("/add/")
     async def add_form(day: int, month: int, year: int, **kwargs):
-        html = await render_template(
-            "_types/day/_add.html",
-        )
-        return await make_response(html)
-    
+        from datetime import date as date_cls
+        from sqlalchemy import select as sa_select
+        from models.calendars import CalendarSlot as _CS
+
+        day_date = date_cls(year, month, day)
+        weekday_attr = ["mon","tue","wed","thu","fri","sat","sun"][day_date.weekday()]
+        stmt = sa_select(_CS).where(
+            _CS.calendar_id == g.calendar.id,
+            getattr(_CS, weekday_attr) == True,
+            _CS.deleted_at.is_(None),
+        ).order_by(_CS.time_start.asc(), _CS.id.asc())
+        result = await g.s.execute(stmt)
+        day_slots = list(result.scalars())
+
+        from sx.sx_components import render_entry_add_form
+        return sx_response(render_entry_add_form(g.calendar, day, month, year, day_slots))
+
     @bp.get("/add-button/")
     async def add_button(day: int, month: int, year: int, **kwargs):
-        
-        html = await render_template(
-            "_types/day/_add_button.html",
-        )
-        return await make_response(html)
+        from sx.sx_components import render_entry_add_button
+        return sx_response(render_entry_add_button(g.calendar, day, month, year))
 
 
 
diff --git a/events/bp/calendar_entry/admin/routes.py b/events/bp/calendar_entry/admin/routes.py
index fb422a2..6c6bbda 100644
--- a/events/bp/calendar_entry/admin/routes.py
+++ b/events/bp/calendar_entry/admin/routes.py
@@ -1,28 +1,29 @@
 from __future__ import annotations
 
 from quart import (
-    render_template, make_response, Blueprint
+    make_response, Blueprint
 )
 
-
 from shared.browser.app.authz import require_admin
+from shared.browser.app.utils.htmx import is_htmx_request
+from shared.sx.helpers import sx_response
 
 
 def register():
     bp = Blueprint("admin", __name__, url_prefix='/admin')
-    
+
     # ---------- Pages ----------
     @bp.get("/")
     @require_admin
     async def admin(entry_id: int, **kwargs):
-        from shared.browser.app.utils.htmx import is_htmx_request
+        from shared.sx.page import get_template_context
+        from sx.sx_components import render_entry_admin_page, render_entry_admin_oob
 
-        # Determine which template to use based on request type
+        tctx = await get_template_context()
         if not is_htmx_request():
-            # Normal browser request: full page with layout
-            html = await render_template("_types/entry/admin/index.html")
+            html = await render_entry_admin_page(tctx)
+            return await make_response(html)
         else:
-            html = await render_template("_types/entry/admin/_oob_elements.html")
-
-        return await make_response(html)
+            sx_src = await render_entry_admin_oob(tctx)
+            return sx_response(sx_src)
     return bp
diff --git a/events/bp/calendar_entry/routes.py b/events/bp/calendar_entry/routes.py
index f1fb5e7..9a60fdc 100644
--- a/events/bp/calendar_entry/routes.py
+++ b/events/bp/calendar_entry/routes.py
@@ -256,8 +256,23 @@ def register():
     @bp.get("/edit/")
     @require_admin
     async def get_edit(entry_id: int, **rest):
-        html = await render_template("_types/entry/_edit.html")
-        return await make_response(html, 200)
+        from datetime import date as date_cls
+        va = request.view_args or {}
+        day, month, year = va.get("day"), va.get("month"), va.get("year")
+
+        # Query day slots for this weekday
+        day_date = date_cls(year, month, day)
+        weekday_attr = ["mon","tue","wed","thu","fri","sat","sun"][day_date.weekday()]
+        stmt = select(CalendarSlot).where(
+            CalendarSlot.calendar_id == g.calendar.id,
+            getattr(CalendarSlot, weekday_attr) == True,
+            CalendarSlot.deleted_at.is_(None),
+        ).order_by(CalendarSlot.time_start.asc(), CalendarSlot.id.asc())
+        result = await g.s.execute(stmt)
+        day_slots = list(result.scalars())
+
+        from sx.sx_components import render_entry_edit_form
+        return sx_response(render_entry_edit_form(g.entry, g.calendar, day, month, year, day_slots))
 
     @bp.put("/")
     @require_admin
@@ -557,14 +572,13 @@ def register():
         search_posts, total = await svc_search_posts(g.s, query, page, per_page)
         total_pages = math.ceil(total / per_page) if total > 0 else 0
 
-        html = await render_template(
-            "_types/entry/_post_search_results.html",
-            search_posts=search_posts,
-            search_query=query,
-            page=page,
-            total_pages=total_pages,
-        )
-        return await make_response(html, 200)
+        va = request.view_args or {}
+        from sx.sx_components import render_post_search_results
+        return sx_response(render_post_search_results(
+            search_posts, query, page, total_pages,
+            g.entry, g.calendar,
+            va.get("day"), va.get("month"), va.get("year"),
+        ))
 
     @bp.post("/posts/")
     @require_admin
diff --git a/events/bp/slot/routes.py b/events/bp/slot/routes.py
index 3ef7779..365cdde 100644
--- a/events/bp/slot/routes.py
+++ b/events/bp/slot/routes.py
@@ -39,20 +39,16 @@ def register():
         if not slot:
             return await make_response("Not found", 404)
         
+        from shared.sx.page import get_template_context
+        from sx.sx_components import render_slot_page, render_slot_oob
+
+        tctx = await get_template_context()
         if not is_htmx_request():
-          # Normal browser request: full page with layout
-          html = await render_template(
-            "_types/slot/index.html",
-            slot=slot,
-            )
+            html = await render_slot_page(tctx)
+            return await make_response(html)
         else:
-            
-            html = await render_template(
-              "_types/slot/_oob_elements.html",
-              slot=slot,
-            )
-        
-        return await make_response(html)
+            sx_src = await render_slot_oob(tctx)
+            return sx_response(sx_src)
 
 
     @bp.get("/edit/")
@@ -61,13 +57,8 @@ def register():
         slot = await svc_get_slot(g.s, slot_id)
         if not slot:
             return await make_response("Not found", 404)
-        html = await render_template(
-            "_types/slot/_edit.html",
-            slot=slot,
-            #post=g.post_data['post'],
-            #calendar=g.calendar,
-        )
-        return await make_response(html)
+        from sx.sx_components import render_slot_edit_form
+        return sx_response(render_slot_edit_form(slot, g.calendar))
 
     @bp.get("/view/")
     @require_admin
diff --git a/events/bp/slots/routes.py b/events/bp/slots/routes.py
index 3e37271..8834499 100644
--- a/events/bp/slots/routes.py
+++ b/events/bp/slots/routes.py
@@ -136,18 +136,13 @@ def register():
     @bp.get("/add")
     @require_admin
     async def add_form(**kwargs):
-        html = await render_template(
-            "_types/slots/_add.html",
-        )
-        return await make_response(html)
+        from sx.sx_components import render_slot_add_form
+        return sx_response(render_slot_add_form(g.calendar))
 
     @bp.get("/add-button")
     @require_admin
     async def add_button(**kwargs):
-        
-        html = await render_template(
-            "_types/slots/_add_button.html",
-        )
-        return await make_response(html)
+        from sx.sx_components import render_slot_add_button
+        return sx_response(render_slot_add_button(g.calendar))
 
     return bp
diff --git a/events/bp/ticket_type/routes.py b/events/bp/ticket_type/routes.py
index 93c1421..ee11655 100644
--- a/events/bp/ticket_type/routes.py
+++ b/events/bp/ticket_type/routes.py
@@ -30,20 +30,16 @@ def register():
         ticket_type = await svc_get_ticket_type(g.s, ticket_type_id)
         if not ticket_type:
             return await make_response("Not found", 404)
+        from shared.sx.page import get_template_context
+        from sx.sx_components import render_ticket_type_page, render_ticket_type_oob
+
+        tctx = await get_template_context()
         if not is_htmx_request():
-          # Normal browser request: full page with layout
-          html = await render_template(
-            "_types/ticket_type/index.html",
-            ticket_type=ticket_type,
-            )
+            html = await render_ticket_type_page(tctx)
+            return await make_response(html)
         else:
-            
-            html = await render_template(
-              "_types/ticket_type/_oob_elements.html",
-              ticket_type=ticket_type,
-            )
-        
-        return await make_response(html)
+            sx_src = await render_ticket_type_oob(tctx)
+            return sx_response(sx_src)
 
     @bp.get("/edit/")
     @require_admin
@@ -53,11 +49,12 @@ def register():
         if not ticket_type:
             return await make_response("Not found", 404)
 
-        html = await render_template(
-            "_types/ticket_type/_edit.html",
-            ticket_type=ticket_type,
-        )
-        return await make_response(html)
+        from sx.sx_components import render_ticket_type_edit_form
+        va = request.view_args or {}
+        return sx_response(render_ticket_type_edit_form(
+            ticket_type, g.entry, g.calendar,
+            va.get("day"), va.get("month"), va.get("year"),
+        ))
 
     @bp.get("/view/")
     @require_admin
diff --git a/events/bp/ticket_types/routes.py b/events/bp/ticket_types/routes.py
index a5c3380..9ae4220 100644
--- a/events/bp/ticket_types/routes.py
+++ b/events/bp/ticket_types/routes.py
@@ -39,18 +39,16 @@ def register():
     @bp.get("/")
     async def get(**kwargs):
         """List all ticket types for the current entry."""
+        from shared.sx.page import get_template_context
+        from sx.sx_components import render_ticket_types_page, render_ticket_types_oob
+
+        tctx = await get_template_context()
         if not is_htmx_request():
-          # Normal browser request: full page with layout
-          html = await render_template(
-            "_types/ticket_types/index.html",
-            )
+            html = await render_ticket_types_page(tctx)
+            return await make_response(html)
         else:
-            
-            html = await render_template(
-              "_types/ticket_types/_oob_elements.html",
-            )
-        
-        return await make_response(html)
+            sx_src = await render_ticket_types_oob(tctx)
+            return sx_response(sx_src)
 
     @bp.post("/")
     @require_admin
@@ -121,18 +119,22 @@ def register():
     @require_admin
     async def add_form(**kwargs):
         """Show the add ticket type form."""
-        html = await render_template(
-            "_types/ticket_types/_add.html",
-        )
-        return await make_response(html)
+        from sx.sx_components import render_ticket_type_add_form
+        va = request.view_args or {}
+        return sx_response(render_ticket_type_add_form(
+            g.entry, g.calendar,
+            va.get("day"), va.get("month"), va.get("year"),
+        ))
 
     @bp.get("/add-button")
     @require_admin
     async def add_button(**kwargs):
         """Show the add ticket type button."""
-        html = await render_template(
-            "_types/ticket_types/_add_button.html",
-        )
-        return await make_response(html)
+        from sx.sx_components import render_ticket_type_add_button
+        va = request.view_args or {}
+        return sx_response(render_ticket_type_add_button(
+            g.entry, g.calendar,
+            va.get("day"), va.get("month"), va.get("year"),
+        ))
 
     return bp
diff --git a/orders/bp/checkout/routes.py b/orders/bp/checkout/routes.py
index d4a8cc7..d392df6 100644
--- a/orders/bp/checkout/routes.py
+++ b/orders/bp/checkout/routes.py
@@ -1,7 +1,7 @@
 """Checkout webhook + return routes (moved from cart/bp/cart/global_routes.py)."""
 from __future__ import annotations
 
-from quart import Blueprint, g, request, render_template, make_response
+from quart import Blueprint, g, request, make_response
 from sqlalchemy import select
 
 from shared.models.order import Order
@@ -46,12 +46,13 @@ def register() -> Blueprint:
     @bp.get("/return/<int:order_id>/")
     async def checkout_return(order_id: int):
         """Handle the browser returning from SumUp after payment."""
+        from shared.sx.page import get_template_context
+        from sx.sx_components import render_checkout_return_page
+
         order = await get_order_with_details(g.s, order_id)
         if not order:
-            html = await render_template(
-                "_types/cart/checkout_return.html",
-                order=None, status="missing", calendar_entries=[],
-            )
+            tctx = await get_template_context()
+            html = await render_checkout_return_page(tctx, order=None, status="missing")
             return await make_response(html)
 
         if order.page_config_id:
@@ -88,9 +89,9 @@ def register() -> Blueprint:
         order_tickets = [dto_from_dict(TicketDTO, t) for t in raw_tickets]
         await g.s.flush()
 
-        html = await render_template(
-            "_types/cart/checkout_return.html",
-            order=order, status=status,
+        tctx = await get_template_context()
+        html = await render_checkout_return_page(
+            tctx, order=order, status=status,
             calendar_entries=calendar_entries,
             order_tickets=order_tickets,
         )
diff --git a/orders/sx/checkout.sx b/orders/sx/checkout.sx
new file mode 100644
index 0000000..7c6eeeb
--- /dev/null
+++ b/orders/sx/checkout.sx
@@ -0,0 +1,54 @@
+;; Checkout return page components
+
+(defcomp ~checkout-return-header (&key status)
+  (header :class "mb-1 sm:mb-2 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
+    (div :class "space-y-1"
+      (h1 :class "text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight"
+        (cond
+          ((= status "paid") "Payment received")
+          ((= status "failed") "Payment failed")
+          ((= status "missing") "Order not found")
+          (t (str "Payment status: " (capitalize status)))))
+      (p :class "text-xs sm:text-sm text-stone-600"
+        (cond
+          ((= status "paid") "Thanks for your order.")
+          ((= status "failed") "Something went wrong while processing your payment. You can try again below.")
+          ((= status "missing") "We couldn\u2019t find that order \u2013 it may have expired or never been created.")
+          (t "We\u2019re still waiting for a final confirmation from SumUp."))))))
+
+(defcomp ~checkout-return-missing ()
+  (div :class "max-w-full px-1 py-1"
+    (div :class "rounded-2xl border border-dashed border-rose-300 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-800"
+      "We couldn\u2019t find that order. If you reached this page from an old link, please start a new order.")))
+
+(defcomp ~checkout-return-failed (&key order-id)
+  (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" "Your payment was not completed.")
+    (p "You can go back to your cart and try checkout again. If the problem persists, please contact us and mention order "
+      (span :class "font-mono" (str "#" order-id)) ".")))
+
+(defcomp ~checkout-return-paid ()
+  (div :class "rounded-2xl border border-emerald-200 bg-emerald-50/80 p-4 sm:p-6 text-sm text-emerald-900 space-y-2"
+    (p :class "font-medium" "All done!")
+    (p "We\u2019ll start processing your order shortly.")))
+
+(defcomp ~checkout-return-ticket (&key name pill state type-name date-str code price)
+  (li :class "px-4 py-3 flex items-start justify-between text-sm"
+    (div
+      (div :class "font-medium flex items-center gap-2"
+        name (span :class pill state))
+      (when type-name (div :class "text-xs text-stone-500" type-name))
+      (div :class "text-xs text-stone-500" date-str)
+      (div :class "text-xs text-stone-400 font-mono mt-0.5" code))
+    (div :class "ml-4 font-medium" price)))
+
+(defcomp ~checkout-return-tickets (&key items)
+  (section :class "mt-6 space-y-3"
+    (h2 :class "text-base sm:text-lg font-semibold" "Event tickets in this order")
+    (ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" items)))
+
+(defcomp ~checkout-return-content (&key summary items calendar tickets status-message)
+  (div :class "max-w-full px-1 py-1"
+    (when summary
+      (div :class "rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6 space-y-2" summary))
+    items calendar tickets status-message))
diff --git a/orders/sx/sx_components.py b/orders/sx/sx_components.py
index d91f16b..fb8c142 100644
--- a/orders/sx/sx_components.py
+++ b/orders/sx/sx_components.py
@@ -394,3 +394,82 @@ async def render_checkout_error_page(ctx: dict, error: str | None = None, order:
     filt = _checkout_error_filter_sx()
     content = _checkout_error_content_sx(error, order)
     return full_page_sx(ctx, header_rows=hdr, filter=filt, content=content)
+
+
+# ---------------------------------------------------------------------------
+# Public API: Checkout return
+# ---------------------------------------------------------------------------
+
+def _ticket_items_sx(order_tickets: list | None) -> str:
+    """Render ticket items for an order as sx."""
+    if not order_tickets:
+        return ""
+    items = []
+    for tk in order_tickets:
+        st = tk.state or ""
+        pill = (
+            "bg-emerald-100 text-emerald-800" if st == "confirmed"
+            else "bg-amber-100 text-amber-800" if st == "reserved"
+            else "bg-blue-100 text-blue-800" if st == "checked_in"
+            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 = tk.entry_start_at.strftime("%-d %b %Y, %H:%M") if tk.entry_start_at else ""
+        if tk.entry_end_at:
+            ds += f" – {tk.entry_end_at.strftime('%-d %b %Y, %H:%M')}"
+        items.append(sx_call(
+            "checkout-return-ticket",
+            name=tk.entry_name,
+            pill=pill_cls,
+            state=st.replace("_", " ").capitalize(),
+            type_name=tk.ticket_type_name or None,
+            date_str=ds,
+            code=tk.code,
+            price=f"£{tk.price or 0:.2f}",
+        ))
+    items_sx = "(<> " + " ".join(items) + ")"
+    return sx_call("checkout-return-tickets", items=SxExpr(items_sx))
+
+
+async def render_checkout_return_page(ctx: dict, order: Any | None,
+                                      status: str,
+                                      calendar_entries: list | None = None,
+                                      order_tickets: list | None = None) -> str:
+    """Full page: checkout return after SumUp payment (sx wire format)."""
+    filt = sx_call("checkout-return-header", status=status)
+
+    if not order:
+        content = sx_call("checkout-return-missing")
+    else:
+        summary = sx_call(
+            "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,
+        )
+        items = _order_items_sx(order)
+        calendar = _calendar_items_sx(calendar_entries)
+        tickets = _ticket_items_sx(order_tickets)
+
+        status_msg = ""
+        if order.status == "failed":
+            status_msg = sx_call("checkout-return-failed", order_id=order.id)
+        elif order.status == "paid":
+            status_msg = sx_call("checkout-return-paid")
+
+        content = sx_call(
+            "checkout-return-content",
+            summary=SxExpr(summary),
+            items=SxExpr(items) if items else None,
+            calendar=SxExpr(calendar) if calendar else None,
+            tickets=SxExpr(tickets) if tickets else None,
+            status_message=SxExpr(status_msg) if status_msg else None,
+        )
+
+    hdr = root_header_sx(ctx)
+    inner = _auth_header_sx(ctx)
+    hdr = "(<> " + hdr + " " + header_child_sx(inner) + ")"
+
+    return full_page_sx(ctx, header_rows=hdr, filter=filt, content=content)