rose-ash/shared/sx/templates/orders.sx

;; Shared order components — used by both cart and orders services
;;
;; Order table (list view), order detail panels, and checkout error screens.

;; ---------------------------------------------------------------------------
;; Order table rows
;; ---------------------------------------------------------------------------

(defcomp ~order-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" oid))
    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" created)
    (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" total)
    (td :class "px-3 py-2 align-top" (span :class pill 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 ~order-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" oid)
          (span :class pill status))
        (div :class "text-[11px] text-stone-500 break-words" created)
        (div :class "flex items-center justify-between gap-2"
          (div :class "font-medium text-stone-800" 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 ~order-end-row ()
  (tr (td :colspan "5" :class "px-3 py-4 text-center text-xs text-stone-400"
    (~end-of-results :cls "text-center text-xs text-stone-400"))))

(defcomp ~order-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 ~order-table (&key rows)
  (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 rows)))))

(defcomp ~order-list-header (&key search-mobile)
  (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" search-mobile)))

;; ---------------------------------------------------------------------------
;; Order detail panels
;; ---------------------------------------------------------------------------

(defcomp ~order-item-image (&key src alt)
  (img :src src :alt alt :class "w-full h-full object-contain object-center" :loading "lazy" :decoding "async"))

(defcomp ~order-item-no-image ()
  (div :class "w-full h-full flex items-center justify-center text-[9px] text-stone-400" "No image"))

(defcomp ~order-item-row (&key href img 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" img)
    (div :class "flex-1 flex justify-between gap-3"
      (div
        (p :class "font-medium" title)
        (p :class "text-[11px] text-stone-500" pid))
      (div :class "text-right whitespace-nowrap"
        (p qty)
        (p price))))))

(defcomp ~order-items-panel (&key items)
  (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" items)))

(defcomp ~order-calendar-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"
      name (span :class pill status))
      (div :class "text-xs text-stone-500" date-str))
    (div :class "ml-4 font-medium" cost)))

(defcomp ~order-calendar-section (&key items)
  (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" items)))

(defcomp ~order-detail-panel (&key summary items calendar)
  (div :class "max-w-full px-3 py-3 space-y-4" summary items calendar))

(defcomp ~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 ~order-detail-filter (&key info list-url recheck-url csrf pay)
  (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 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"))
      pay)))

(defcomp ~order-detail-header-stack (&key auth orders order)
  (~header-child-sx :inner
    (<> auth (~header-child-sx :id "auth-header-child" :inner
      (<> orders (~header-child-sx :id "orders-header-child" :inner order))))))

;; ---------------------------------------------------------------------------
;; Data-driven order rows (replaces Python loop)
;; ---------------------------------------------------------------------------

(defcomp ~order-rows-from-data (&key orders page total-pages next-url)
  (<>
    (map (lambda (o)
      (<>
        (~order-row-desktop :oid (get o "oid") :created (get o "created")
          :desc (get o "desc") :total (get o "total")
          :pill (get o "pill_desktop") :status (get o "status") :url (get o "url"))
        (~order-row-mobile :oid (get o "oid") :created (get o "created")
          :total (get o "total") :pill (get o "pill_mobile")
          :status (get o "status") :url (get o "url"))))
      (or orders (list)))
    (if next-url
      (~infinite-scroll :url next-url :page page :total-pages total-pages
        :id-prefix "orders" :colspan 5)
      (~order-end-row))))

;; ---------------------------------------------------------------------------
;; Data-driven order items (replaces Python loop)
;; ---------------------------------------------------------------------------

(defcomp ~order-items-from-data (&key items)
  (~order-items-panel
    :items (<> (map (lambda (item)
      (let* ((img (if (get item "product_image")
                   (~order-item-image :src (get item "product_image") :alt (or (get item "product_title") "Product image"))
                   (~order-item-no-image))))
        (~order-item-row
          :href (get item "href") :img img
          :title (or (get item "product_title") "Unknown product")
          :pid (str "Product ID: " (get item "product_id"))
          :qty (str "Qty: " (get item "quantity"))
          :price (get item "price"))))
      (or items (list))))))

;; ---------------------------------------------------------------------------
;; Data-driven calendar entries (replaces Python loop)
;; ---------------------------------------------------------------------------

(defcomp ~order-calendar-from-data (&key entries)
  (~order-calendar-section
    :items (<> (map (lambda (e)
      (~order-calendar-entry
        :name (get e "name") :pill (get e "pill")
        :status (get e "status") :date-str (get e "date_str")
        :cost (get e "cost")))
      (or entries (list))))))

;; ---------------------------------------------------------------------------
;; Checkout error screens
;; ---------------------------------------------------------------------------

;; ---------------------------------------------------------------------------
;; Assembled order list content — replaces Python _orders_rows_sx / _orders_main_panel_sx
;; ---------------------------------------------------------------------------

;; Status pill class mapping
(defcomp ~order-status-pill-cls (&key status)
  (let* ((sl (lower (or status ""))))
    (cond
      ((= sl "paid") "border-emerald-300 bg-emerald-50 text-emerald-700")
      ((or (= sl "failed") (= sl "cancelled")) "border-rose-300 bg-rose-50 text-rose-700")
      (true "border-stone-300 bg-stone-50 text-stone-700"))))

;; Single order row pair (desktop + mobile) — takes serialized order data dict
(defcomp ~order-row-pair (&key order detail-url-prefix)
  (let* ((status (or (get order "status") "pending"))
         (pill-base (~order-status-pill-cls :status status))
         (oid (str "#" (get order "id")))
         (created (or (get order "created_at_formatted") "\u2014"))
         (desc (or (get order "description") ""))
         (total (str (or (get order "currency") "GBP") " " (or (get order "total_formatted") "0.00")))
         (url (str detail-url-prefix (get order "id") "/")))
    (<>
      (~order-row-desktop
        :oid oid :created created :desc desc :total total
        :pill (str "inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] sm:text-xs " pill-base)
        :status status :url url)
      (~order-row-mobile
        :oid oid :created created :total total
        :pill (str "inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] " pill-base)
        :status status :url url))))

;; Assembled orders list content
(defcomp ~orders-list-content (&key orders page total-pages rows-url detail-url-prefix)
  (if (empty? orders)
    (~order-empty-state)
    (~order-table
      :rows (<>
        (map (lambda (order)
          (~order-row-pair :order order :detail-url-prefix detail-url-prefix))
          orders)
        (if (< page total-pages)
          (~infinite-scroll
            :url (str rows-url "?page=" (inc page))
            :page page :total-pages total-pages
            :id-prefix "orders" :colspan 5)
          (~order-end-row))))))

;; Assembled order detail content — replaces Python _order_main_sx
(defcomp ~order-detail-content (&key order calendar-entries)
  (let* ((items (get order "items")))
    (~order-detail-panel
      :summary (~order-summary-card
        :order-id (get order "id")
        :created-at (get order "created_at_formatted")
        :description (get order "description")
        :status (get order "status")
        :currency (get order "currency")
        :total-amount (get order "total_formatted"))
      :items (when (not (empty? (or items (list))))
        (~order-items-panel
          :items (map (lambda (item)
            (~order-item-row
              :href (get item "product_url")
              :img (if (get item "product_image")
                     (~order-item-image :src (get item "product_image")
                                        :alt (or (get item "product_title") "Product image"))
                     (~order-item-no-image))
              :title (or (get item "product_title") "Unknown product")
              :pid (str "Product ID: " (get item "product_id"))
              :qty (str "Qty: " (get item "quantity"))
              :price (str (or (get item "currency") (get order "currency") "GBP") " " (or (get item "unit_price_formatted") "0.00"))))
            items)))
      :calendar (when (not (empty? (or calendar-entries (list))))
        (~order-calendar-section
          :items (map (lambda (e)
            (let* ((st (or (get e "state") ""))
                   (pill (cond
                     ((= st "confirmed") "bg-emerald-100 text-emerald-800")
                     ((= st "provisional") "bg-amber-100 text-amber-800")
                     ((= st "ordered") "bg-blue-100 text-blue-800")
                     (true "bg-stone-100 text-stone-700"))))
              (~order-calendar-entry
                :name (get e "name")
                :pill (str "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium " pill)
                :status (upper (slice st 0 1))
                :date-str (get e "date_str")
                :cost (str "\u00a3" (or (get e "cost_formatted") "0.00")))))
            calendar-entries))))))

;; Assembled order detail filter — replaces Python _order_filter_sx
(defcomp ~order-detail-filter-content (&key order list-url recheck-url pay-url csrf)
  (let* ((status (or (get order "status") "pending"))
         (created (or (get order "created_at_formatted") "\u2014")))
    (~order-detail-filter
      :info (str "Placed " created " \u00b7 Status: " status)
      :list-url list-url
      :recheck-url recheck-url
      :csrf csrf
      :pay (when (!= status "paid")
             (~order-pay-btn :url pay-url)))))

;; ---------------------------------------------------------------------------
;; Checkout return components
;; ---------------------------------------------------------------------------

(defcomp ~checkout-return-header (&key status)
  (header :class "mb-6 sm:mb-8"
    (h1 :class "text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight" "Payment complete")
    (p :class "text-xs sm:text-sm text-stone-600"
      (str "Your checkout session is " status "."))))

(defcomp ~checkout-return-missing ()
  (div :class "max-w-full px-3 py-3 space-y-4"
    (p :class "text-sm text-stone-600" "Order not found.")))

(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)
      (when code (div :class "font-mono text-xs text-stone-400" 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" "Tickets")
    (ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" items)))

(defcomp ~checkout-return-failed (&key order-id)
  (div :class "rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900"
    (p :class "font-medium" "Payment failed")
    (p "Please try again or contact support."
       (when order-id (span " Order #" (str order-id))))))

(defcomp ~checkout-return-paid ()
  (div :class "rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900"
    (p :class "font-medium" "Payment successful!")
    (p "Your order has been confirmed.")))

(defcomp ~checkout-return-content (&key summary items calendar tickets status-message)
  (div :class "max-w-full px-3 py-3 space-y-4"
    status-message summary items calendar tickets))

;; ---------------------------------------------------------------------------
;; Checkout error screens
;; ---------------------------------------------------------------------------

(defcomp ~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 ~checkout-error-order-id (&key oid)
  (p :class "text-xs text-rose-800/80" "Order ID: " (span :class "font-mono" oid)))

(defcomp ~checkout-error-content (&key msg order 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 msg)
      order)
    (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"))))