Conversation
Adds a two-column desktop breakpoint (>=1024px, CSS Grid) for the standard and Write&Pray fast-checkout steps, and the thank-you/details and all-set pages, reusing the existing child-summary card as the sidebar. Mobile layout is unchanged below the breakpoint.
Matches the Figma desktop layout: the standard and Write&Pray fast-checkout steps get their own left-column title/description (hidden on mobile), and the shared wizard-chrome title is hidden on desktop for these two steps specifically (wizard.details_deferred) to avoid double-titling. Other steps (payment-methods, wap_options, etc.) keep the generic chrome title on desktop unchanged.
TitleComponent centers by default (theme_compassion_2025's title-component base rule), fine for the shared wizard-chrome title but not for the new left-column headings sitting beside the sidebar.
The file had grown to 1382 lines across 11 templates spanning several unrelated flows (standard checkout, Write&Pray, the older logged-in steps, the thank-you page), making it hard to navigate. Split into templates/pages/my2_new_sponsorship_wizard/, one file per logical group, no behavioral change: t-call resolves by module+id at render time regardless of which file defines a template, and the same 32 fast-checkout tests pass/fail identically before and after (2 pre-existing, unrelated failures).
The previous split commit removed the monolithic my2_new_sponsorship_wizard.xml but never updated the manifest's data list, so none of the 7 split templates have actually been loading since that commit.
…t-checkout step Adds a flexbox-based two-column desktop layout to standard_step.xml (donation summary + Sponsorship Plus on one side, contact info + payment mode on the other), alongside the pre-existing CSS-grid .ns-columns pattern used by the thank-you page. Converts the fast-checkout page's payment-mode buttons to radios, moved into the step's own left column instead of the parent chrome's button-per-mode row (deleted, now dead code). The eBill extension's click-time data-payment-code detection is kept working via a JS handler that syncs the checked radio onto the shared Continue button, which itself also moved into the left column so the desktop layout's highlighted column can stretch down to the footer.
…r the fast-checkout step - Full-viewport-width blue/white split background (a breakout pseudo- element) behind the two-column layout, instead of a color scoped to one column's own box. - Live "Total" amount in the right column, kept in sync with the Sponsorship Plus toggle client-side (no step round-trip). - Payment-mode radios: bigger circles, custom checked/hover styling, corner rounding only on the first/last row. - Continue button goes full-width on mobile. - Sponsorship Plus's checkmark is now a real icon instead of a raw ✓ character, which wasn't rendering consistently. - Copy and color tweaks: step heading/description, E-mail label, "Already have an account" banner hidden on desktop.
…he thank-you page Reuses the .ns-flex-columns/.ns-highlight-panel/.ns-split-blue-* pattern built for the fast-checkout step, this time with the blue column on the left (new .ns-split-blue-left variant) - donation summary/status details on the blue side, the "who shall we thank" form and the "all set" actions on the white side. Also reworks the "who shall we thank" post-payment details form: firstname/surname side by side on desktop, address disclosure and button spacing, left-aligned heading on desktop, and the letter card (name/subtext/photo, price hidden, white background) that replaces the country/price framing for that specific card only.
…ove payment/details pages into it The folder held every wizard step template already; moving in my2_new_sponsorship_payment.xml (provider-payment checkout) and my2_new_sponsorship_details.xml (post-payment "Who shall we thank?" form) groups the whole /my2/new-sponsorship/ journey together instead of splitting it across two locations. Dropping "_wizard" from the folder name reflects that it's no longer wizard-steps-only.
Move the thank-you page's "All set" branch (public-signup summary: status box, child/WAP card, dashboard link) out of thank_you_page.xml into a new all_set.xml, called via t-call from the parent template's t-elif chain. It was the largest, most self-contained of that template's four branches.
Merge the standalone sign-in-link paragraph into the title's own description slot (theme_compassion_2025.TitleComponent), mid-grey. Rework the two-column split: left column keeps the title/description, the volunteering opt-in card and the dashboard button; right column now holds only the sponsorship summary box, with the light-blue split background moved to that side to match. Remove the child card. Add mid-grey dividers with more breathing room between summary rows (none after the last one), and use a smaller border radius on the dashboard button. Hide the page's own top-level "Thank you for sponsoring..." title for this branch specifically, since it now has its own. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…t" page Reorder the DOM so the summary column comes before the title/ volunteering-card/dashboard-button column - mobile's plain block stacking then reads summary, then the volunteering section and button, at the very end of the page, with no extra CSS needed. On desktop, use plain flex `order` (not CSS Grid) to put the columns back in their usual visual positions: this avoids Grid's row-span height coupling, which was stretching the title/volunteering column to match the summary box's height and inserting a visible gap between the title's description and the volunteering card - unequal column heights are accepted instead. Also scope the thank-you page's added bottom margin to mobile only. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…class Same fix as the volunteering info modal: the close button was sitting in normal document flow above the title instead of floating in the corner, pushing the title down. Also fix "Your contact information"'s heading margin - "smt-5" isn't a real utility class, so the intended top margin was silently a no-op; corrected to "mt-5". Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…eckout step Add the ns-flex-columns/ns-split-blue-right wrapper (matching standard_step.xml's reversed layout) and move the child summary card and the desktop title/form fields into their respective columns - previously only a couple of the desktop-specific classes were sprinkled on with no actual two-column wrapper. Also: date of birth and email side by side on desktop; a desktop-only Continue button in the left column instead of relying on the shared chrome's button below the columns (same reasoning as standard_step.xml's own button), which now hides itself with d-lg-none specifically for this flow on mobile still using the shared one; a "How Write&Pray works" info box below the child card, desktop only. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…nslatable "<Child> is expecting your letter" and the gender-aware "He/She writes back by name..." subtext were built via Python string concatenation inside t-value expressions, which Odoo's translation extraction never sees - these strings were never even present in the .po files to translate, in any language. Restructured into the standard block-form t-set pattern (literal text + a nested t-out for the child's name, a t-if/t-else pair instead of a ternary) already used elsewhere on this page, which is what actually gets picked up by --i18n-export. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
http_routing.400 (Odoo's core error page, shown for UserError-type exceptions like "child no longer available") gets the same branded treatment as the existing custom_404 override - only the production (non-debug) branch is touched, the debug/traceback accordion is left alone since that's what's actually needed while developing. Also fixes a dead parameter: http_error_custom already received an error_message value (used by the 404 override) but never displayed it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…e label Consistency tweak in the "All set" summary row and its matching docstring comment. Also drop a stray nbsp between the currency name and the amount in the standard-flow monthly-gift row. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Covers the "All set" page redesign, the Write&Pray fast-checkout step's new content, and the thank-you page's now-translatable letter card text - none of it existed in these three locales' .po files before. Also carries the Godparent -> Sponsorship rename's msgid across fi_FI/nb_NO/sv_SE, keeping their existing translations attached instead of losing them to a stale-entry drop. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Same bug as the letter-card text: built via a Python ternary inside t-out="...", which Odoo's translation extraction never sees. Restructured into a t-if/t-else pair. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…_SE) Same T3423 scope already translated for de/fr_CH/it: the "All set" page redesign, the Write&Pray fast-checkout step's new content, the custom_400 error page, and the thank-you page's now-translatable letter card text - plus "Pending" on the All Set page's payment status. Followed glossary-nordic.md (informal du/sinä register, fadder/kummi for sponsor terminology). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…, it "Received" was already translated (reused from my2_child_letters_page); only "Pending" was genuinely missing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…path oca-checks-odoo-module flags position="replace" on a view without a high enough priority (xml-dangerous-qweb-replace-low-priority) - a low-priority replace risks silently clashing with other modules extending the same node. custom_404 doesn't need this since it only uses attributes/after. Co-Authored-By: Claude Sonnet 5 <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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
T3423 — Desktop layout for the new-sponsorship flow
Original ask
Redesign the new-sponsorship wizard flow's desktop layout. The flow was built mobile-first (single column); desktop needs a two-column layout (form/summary on one side, a highlighted status/child-summary panel on the other) across every page in the flow: the fast-checkout step (standard flow), the Write&Pray fast-checkout step, the thank-you page (all its branches, including the public "All set" summary), and the post-payment contact-details form. Mobile layout is unchanged throughout.
Related PR
CompassionCH/compassion-switzerland#1818
What changed
Two repos
compassion-website(my_compassionmodule)Established pattern, reused on every page:
.ns-flex-columns(desktop-only two-column flex row,@media (min-width: 992px)),.ns-highlight-panel/.ns-aside-itemfor the two columns,.ns-split-blue-left/-right(a full-viewport-width::beforegradient behind the row, independent of which physical column holds which content).73366c5,ed7abd0,7c33005,bb14441,37ee41d— initial desktop layout and left-column headings for the fast-checkout step, then splitmy2_new_sponsorship_wizard.xmlinto per-step partial files.1d673c2,d50f368— full two-column layout, payment-mode radios, live total, full-width split background for the standard fast-checkout step.eba393b,127023d— same two-column pattern applied to the thank-you page; folder reorganized (my2_new_sponsorship_wizard/→my2_new_sponsorship/) to hold the whole flow's non-wizard-step pages too (payment redirect, post-payment details form, thank-you page).fc05e16,ab6f16e,e356a73,1c890dc— the "All set" public-signup summary branch extracted out of the thank-you page into its own template (all_set.xml), then iterated on extensively per design feedback: title + description merged into one component call, two-column layout, mobile ordering (summary before the volunteering card + dashboard button, at the very end of the page), unequal column heights accepted instead of forcing a shared height, Sponsorship+ modal close-button float fix.112c48b— same two-column layout for the Write&Pray fast-checkout step (previously had a couple of the right CSS classes sprinkled on with no actual two-column wrapper); date of birth + email side by side on desktop; a desktop-only Continue button in the left column instead of the shared chrome's button below the columns; a "How Write&Pray works" info box.e3d3403— "Godparent" → "Sponsorship" wording for the free W&P role label (design/copy consistency, not structural).ce5d81b— the generic Odoo core error page (http_routing.400, shown forUserErrors like "child no longer available") restyled to match the site's branding — only the production branch, debug/traceback view for developers is untouched.bbe41c6,9b52d39— two real translatability bugs found and fixed: the thank-you page's letter-card text ("<Child>is expecting your letter", "He/She writes back by name...") and the All Set page's "Received"/"Pending" payment status were built via Python string concatenation/ternaries insidet-value/t-outexpressions, which Odoo's--i18n-exportnever parses into — these strings were never present in any.pofile, in any language, regardless of how long the module had shipped. Restructured into the standard block-formt-set/t-ifpattern.0827b16,a025f92,89336a2— translated all of the above (plus everything else new on these pages) into German, Swiss French, Italian, Finnish and Swedish. See "Translations" below.compassion-switzerland8e609ce9— the "All set" extraction (above) broke two CH-only inherited views that anchored on content that moved into the new template (new_sponsorship_wizard_volunteering's xpath onwap-preferences-card, andmy2_new_sponsorship_thank_you_pending_payment's xpath on amx-4div — the latter's anchor turned out to have never matched the page's real top-level title at all, since that title sets its class viat-attf-class, invisible to a static-XMLhasclass()xpath; it was actually matching the All-Set branch's own title div all along). Re-pointed bothinherit_ids to the new template.a4dc6a67,1a03e339— follow-up polish on the CH-specific pieces of the same page: pending-payment notice relocated to the bottom of the summary column and restyled, "Want to do more?" alignment.31234ab6— real bug, unrelated to the redesign but found while testing it: the/legalredirect (used by every privacy-policy link across the site, not just this flow) was landing on a broken local path.request.redirect()defaults tolocal=True, which unconditionally strips the scheme/host from any URL passed to it — so the absolutehttps://compassion.ch/...targets were silently turned into same-site relative redirects. Fixed withlocal=False; also fixed a stray double-slash in the Italian URL.cf2c962d— translated the volunteering opt-in card + its info modal (de, fr_CH, it) — see "Translations" below.Translations
Full T3423 scope (All Set page, Write&Pray step, thank-you page letter card, custom_400 error page, volunteering opt-in card + modal) translated into German, Swiss French, Italian (
my_compassion+my_compassion_switzerland) and Finnish, Swedish (my_compassiononly — Nordic doesn't installmy_compassion_switzerland).How to test manually
-u my_compassion(and-u my_compassion_switzerlandfor the CH-specific pieces) on a dev server,--dev=all./legal: Check the Privacy policy in the new-sponsorships page. Hit it directly in French/German/Italian browser locale (or/de/legal,/it/legal) and confirm it 301s to the realcompassion.chpage, not a local path.UserErroron a/my2/...route in a non-debug session and confirm the branded design shows instead of Odoo's plain "Oops!" page;compassion-websitecheckout only)Screencast.From.2026-09-09.14-40-27.mp4
Screencast.From.2026-09-09.14-42-37.mp4
Screencast.From.2026-09-10.09-59-17.mp4