You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat(OD-8789): rebuild thank-you page from modular order components - #1048
Rebuilds pages/thank-you.twig as a composition of order components, rendered by order state. Depends on SallaApp/twilight#2264 (salla-order-items, items/sticky-cta on salla-order-branch, sticky-cta on salla-order-shipments).
Order of sections (column max-w-xl ≈ the 570px design column, gradient band behind the header):
Header — check badge, merchant title/subtext, order number with copy, date and time
Items + fulfilment
order.is_pickable → <salla-order-branch items="{{ order.items|json_encode }}" sticky-cta> — one collapsible card titled with the preparation time; branch name/address/working hours + "توجه لموقع الاستلام" as its footer; sticky pickup bar
otherwise → <salla-order-shipments sticky-cta> — one collapsible card per shipment (collapsed: thumbs + carrier logo + count • SLA); split orders get a bottom sheet from the sticky CTA
{% hook 'thank-you:payment.end' %} — slot for the merchant custom component story
<salla-next-order-coupon>
Contact channels (<salla-contacts icons-only>)
Removed: breadcrumb, illustration/wave header, resend-invoice form (+ its handler in thankyou.js), inline support block. Existing hooks (thank-you:start, items.start/end, end) kept.
Assemble the confirmation page from the new twilight components and wire
them to order state:
- header: merchant title/subtext, order number (copy), date and time
- pickup orders: <salla-order-items> + <salla-order-branch sticky-cta>
- delivery orders: <salla-order-shipments sticky-cta> (one card per
shipment, bottom sheet for split orders)
- payment card (method logo, subtotal, tax, shipping, total) + invoice CTA
- `thank-you:payment.end` hook for the merchant custom component
- next-order coupon and contact channels
Drops the resend-invoice form and its JS handler.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XjSGbZZH86aHHs9GT2bFGL
AI Reviewer: run a review on demand. To trigger the first review automatically, go to your organization or repository integration settings. AI can make mistakes. Always validate suggestions.
TIP This summary will be updated as you push new changes.
Follow the new Figma sections and order: header -> tracking CTA -> shipment
card -> payment card -> rewards -> gifts -> contacts.
- header: 4/12px rhythm, store logo badge on the success mark, divider under
the subtitle, plain 12px meta row (order number with page-check + copy
glyphs, click-to-copy; clock + date)
- payment: radius 8, 12px padding, 12px gray rows, bold 14px total, and the
design's light-bordered 40px "view invoice" button
- rewards: cashback + loyalty tiles (#effbf6, 24px icon, value, chevron).
The thank-you contract exposes no cashback/loyalty data yet, so each tile
self-hides; the assumed field names are documented inline.
- gifts: <salla-next-order-coupon> now renders the full grid
- contacts: design copy, 12px gap
New locale keys: view_invoice, contact_us, cashback, loyalty_points,
gifts_title.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XjSGbZZH86aHHs9GT2bFGL
public/ is committed in this repo but had not been rebuilt since 20 Sep, so
none of the Tailwind classes the new thank-you markup uses were in app.css
and the page rendered unstyled.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XjSGbZZH86aHHs9GT2bFGL
…ve the cards
`class="block"` on <salla-order-shipments> overrode the component's own flex
column, so the sticky CTA's `md:-order-1` never applied and the primary
"track shipment" button rendered below the shipment card instead of directly
under the header. `empty:hidden` is kept.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XjSGbZZH86aHHs9GT2bFGL
The page was built against the earlier frame (1433-82017): a max-w-xl
column under a primary gradient band, with the Tailwind greys. The design
has since moved to node 1941:21996 — a plain white page with an 800px
column — so nothing lined up any more.
Measured every node of the frame against the rendered page and corrected
what was off:
- 800px column, 32px top/bottom, 24px between sections; the gradient band
is gone with the old frame.
- Totals card padding 12px -> 11px: Figma draws the 1px stroke inside the
12px padding and CSS adds it on top, so the card came out 2px taller.
- Invoice button fixed at 40px; its icon's line-height was making it 42.
- Rewards: loyalty is the right-most tile in the design, so it comes first
in RTL. The tiles now use 24px icon boxes and a 16px chevron box instead
of the icon font's own line boxes, and the sparkle is the design's
stars-outline inlined from its export (sallaicons has no sparkle glyph).
- Neutrals are the design tokens (#333 / #666 / #f4f4f4 / #eee); the
Tailwind greys are a different scale and never matched.
- Header, divider and meta row span the column rather than shrink-wrapping.
All 30 probed boxes now match the frame to the pixel and the page is
1155px tall, same as Figma.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XjSGbZZH86aHHs9GT2bFGL
Temporary. Replaces the page with a single line saying which branch is
being served, so we can tell whether the preview env is really building
this submodule commit before judging any styling.
The real page is disabled with `{% if false %}` rather than a Twig
comment: it already contains nine comments and Twig comments do not nest.
Revert this commit once the wiring is confirmed.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XjSGbZZH86aHHs9GT2bFGL
Temporary, revert me. The page is one line of text so the preview makes it
obvious whether this submodule commit is the one being served.
The real page is at b4a55df; `git revert` this commit restores it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XjSGbZZH86aHHs9GT2bFGL
Use |money for payment amounts and item prices, as the order page does, so Multimarket market switches no longer change the currency shown.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Only the footer stays hidden on mobile; the sticky CTA owns the bottom of the screen.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
With the store header shown, its top bar can be wider than narrow screens, so the page scrolled horizontally: content looked off-centre and the fixed CTA left a gap. Clip horizontal overflow on mobile (clip keeps the sticky header working; hidden as fallback).
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Drop |money: it fails for order currencies the store has not configured. The components format the amounts in the order currency.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The thank-you components use Hugeicons glyphs (e.g. unfold-more / unfold-less) from cdn fonts/hugeicons-font.css.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Rebuilds
pages/thank-you.twigas a composition of order components, rendered by order state. Depends on SallaApp/twilight#2264 (salla-order-items,items/sticky-ctaonsalla-order-branch,sticky-ctaonsalla-order-shipments).Order of sections (column
max-w-xl≈ the 570px design column, gradient band behind the header):order.is_pickable→<salla-order-branch items="{{ order.items|json_encode }}" sticky-cta>— one collapsible card titled with the preparation time; branch name/address/working hours + "توجه لموقع الاستلام" as its footer; sticky pickup bar<salla-order-shipments sticky-cta>— one collapsible card per shipment (collapsed: thumbs + carrier logo + count • SLA); split orders get a bottom sheet from the sticky CTAsalla.order.show){% hook 'thank-you:payment.end' %}— slot for the merchant custom component story<salla-next-order-coupon><salla-contacts icons-only>)Removed: breadcrumb, illustration/wave header, resend-invoice form (+ its handler in
thankyou.js), inline support block. Existing hooks (thank-you:start,items.start/end,end) kept.Figma: https://www.figma.com/design/rL4qiLlhsEKzW4LpxjHKQD/General-Tasks---Supporting-Design-Team?node-id=1433-82017
Known gaps (other stories / backend)
OrderPresenter::shipping_cost()returns null onstore.thankyou→ shipping row is hidden until the guard includesisThankYou.OrderItemsPresenter::image()returns the placeholder onstore.thankyou→ pickup item thumbnails are placeholders.Test plan
tracking_urlthankyou-page-multi-shipmentsflag): one card per shipment ("الشحنة رقم N" when expanded), sticky CTA opens bottom sheet🤖 Generated with Claude Code
https://claude.ai/code/session_01XjSGbZZH86aHHs9GT2bFGL