feat: Integrate Sign-In Gate Portal into Sticky Bottom Banner #14408

juabara · 2025-08-14T16:05:59Z

What does this change?

Centralise sign-in gate rendering inside the StickyBottomBanner message picker so banners and the sign‑in gate cannot display at the same time.

Main changes

Introduce a portal wrapper for sign-in gates:
- src/components/StickyBottomBanner/SignInGatePortal.tsx — new portal component that uses useSignInGateSelector and renders gates into #sign-in-gate.
- Test: src/components/StickyBottomBanner/SignInGatePortal.test.tsx (covers edge cases).
Make StickyBottomBanner the single source of truth for bottom messages:
- src/components/StickyBottomBanner.importable.tsx — add sign-in gate as a messagePicker candidate and prioritise message ordering (CMP → SignInGate → Braze → ReaderRevenue).
Remove legacy gate coordination:
- src/components/StickyBottomBanner/ReaderRevenueBanner.tsx — remove legacy signInGateWillShow dependency from reader revenue canShow logic.
- Deleted/removed usages of legacy signInGateWillShow logic from banner flow.
Playwright - Banner e2e:
- Check if auxia/get-treatments endpoint is called on page load.
- Wrap the sign-in gate selector inside an Island in the portal to defer activation until visible.
Layout updates:
- Added host prop to layouts that require it so StickyBottomBanner can pass host through.

Why?

Problem: legacy sign-in gate flow (signInGateWillShow) could not coordinate with the new SDC/Auxia flow and allowed simultaneous display of banners and gates.
Goal: ensure only one bottom message (banner OR sign-in gate) is visible at a time and keep the system extensible and testable.
Centralising selection in the StickyBottomBanner messagePicker provides a single priority-based decision point and removes fragile cross-component coordination.

Testing & validation

Unit tests: SignInGatePortal unit tests added
Playwright: Banner e2e was changed to check if auxia/get-treatments is called on page load.

Notes for reviewers

I intentionally removed the island & selector from the legacy withSignInGateSlot helper; that helper now only injects the #sign-in-gate placeholder so StickyBottomBanner owns gate rendering.

- Removed unused sign-in gate logic and integrated new Sign-In Gate Portal component. - Updated StickyBottomBanner to include host prop for Sign-In Gate functionality. - Enhanced message picking logic to prioritize Sign-In Gate over other banners. - Added tests for Sign-In Gate Portal to ensure correct behavior under various conditions. - Updated Reader Revenue Banner logic to remove dependency on sign-in gate visibility. - Created Storybook stories for various scenarios including mock implementations for better testing. - Added host prop to multiple layouts to support Sign-In Gate rendering.

github-actions · 2025-08-14T16:07:23Z

Deploy build 45155 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

…message handling in Storybook

…r controls rendering

…tomBanner, and SignInGatePortal components

…eat-prevent-banner-and-sign-in-gate-together

dotcom-rendering/src/lib/messagePicker.ts

dotcom-rendering/src/components/StickyBottomBanner.importable.tsx

…ronments

github-actions · 2025-09-01T12:08:43Z

Deploy build 20919 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

…ther

dotcom-rendering/playwright/tests/banner.e2e.spec.ts

dotcom-rendering/src/components/StickyBottomBanner.importable.tsx

dotcom-rendering/src/lib/auxia.ts

…eat-prevent-banner-and-sign-in-gate-together

…ther

dotcom-rendering/src/components/StickyBottomBanner.importable.tsx

dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx

dotcom-rendering/.storybook/preview.ts

dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx

…ther

pnpm-lock.yaml

tomrf1

great 🎉

…ther

gu-prout · 2025-09-18T08:53:42Z

Seen on PROD (merged by @juabara 8 minutes and 55 seconds ago) Please check your changes!

github-actions bot added the dotcom-rendering label Aug 14, 2025

Juarez Mota added 4 commits August 27, 2025 23:32

feat: Enhance StickyBottomBanner with AB testing support and improve …

b8ce109

…message handling in Storybook

feat: remove sign-in gate selector from slot so only the sticky banne…

b08b4dd

…r controls rendering

feat: remove Auxia AB testing code from SignInGateSelector, StickyBot…

cf3461a

…tomBanner, and SignInGatePortal components

Merge branch 'main' of github.com:guardian/dotcom-rendering into jm/f…

ec85f7c

…eat-prevent-banner-and-sign-in-gate-together

juabara changed the title ~~feat(wip): Integrate Sign-In Gate Portal into Sticky Bottom Banner~~ feat: Integrate Sign-In Gate Portal into Sticky Bottom Banner Sep 1, 2025

juabara added the run_chromatic Runs chromatic when label is applied label Sep 1, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 1, 2025

tomrf1 reviewed Sep 1, 2025

View reviewed changes

dotcom-rendering/src/lib/messagePicker.ts Outdated Show resolved Hide resolved

tomrf1 reviewed Sep 1, 2025

View reviewed changes

dotcom-rendering/src/components/StickyBottomBanner.importable.tsx Outdated Show resolved Hide resolved

Juarez Mota added 2 commits September 1, 2025 12:48

fix: optimize message picking with Promise.allSettled

4190028

fix: set timeoutMillis to null to prevent hanging in problematic envi…

ebd4729

…ronments

juabara and others added 3 commits September 1, 2025 13:40

Merge branch 'main' into jm/feat-prevent-banner-and-sign-in-gate-toge…

98eedb6

…ther

fix: revert message picker changes

15f93d2

test: check if auxia api is being called in sign-in gate

01da7d3

github-advanced-security bot found potential problems Sep 10, 2025

View reviewed changes

dotcom-rendering/playwright/tests/banner.e2e.spec.ts Dismissed Show dismissed Hide dismissed

tomrf1 reviewed Sep 11, 2025

View reviewed changes

dotcom-rendering/src/components/StickyBottomBanner.importable.tsx Outdated Show resolved Hide resolved

tomrf1 reviewed Sep 11, 2025

View reviewed changes

dotcom-rendering/src/components/StickyBottomBanner.importable.tsx Outdated Show resolved Hide resolved

feat: move auxia check from sign-in gate to sticky bottom banner

975f8c7

github-advanced-security bot found potential problems Sep 15, 2025

View reviewed changes

dotcom-rendering/src/lib/auxia.ts Dismissed Show dismissed Hide dismissed

juabara added the run_chromatic Runs chromatic when label is applied label Sep 15, 2025

juabara marked this pull request as ready for review September 15, 2025 08:51

juabara requested a review from a team as a code owner September 15, 2025 08:51

Juarez Mota and others added 2 commits September 15, 2025 10:31

Merge branch 'main' of github.com:guardian/dotcom-rendering into jm/f…

d034044

…eat-prevent-banner-and-sign-in-gate-together

Merge branch 'main' into jm/feat-prevent-banner-and-sign-in-gate-toge…

4b76929

…ther

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 15, 2025

tomrf1 reviewed Sep 15, 2025

View reviewed changes

dotcom-rendering/src/components/StickyBottomBanner.importable.tsx Outdated Show resolved Hide resolved

tomrf1 reviewed Sep 15, 2025

View reviewed changes

dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx Show resolved Hide resolved

tomrf1 reviewed Sep 15, 2025

View reviewed changes

dotcom-rendering/.storybook/preview.ts Show resolved Hide resolved

fix: strong type sign-in gate candidate config

70b36fb

juabara commented Sep 16, 2025

View reviewed changes

dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx Show resolved Hide resolved

juabara and others added 4 commits September 16, 2025 09:36

Merge branch 'main' into jm/feat-prevent-banner-and-sign-in-gate-toge…

f0d994f

…ther

fix: update sign-in gate portal tests

0e6ca1d

Merge branch 'main' into jm/feat-prevent-banner-and-sign-in-gate-toge…

aa031c5

…ther

fix: treatment type values in tests

2831516

tomrf1 reviewed Sep 17, 2025

View reviewed changes

pnpm-lock.yaml Outdated Show resolved Hide resolved

fix: restore pnpm-lock.yaml

0dcbaf5

tomrf1 approved these changes Sep 18, 2025

View reviewed changes

tomrf1 added the run_chromatic Runs chromatic when label is applied label Sep 18, 2025

Merge branch 'main' into jm/feat-prevent-banner-and-sign-in-gate-toge…

5a0077d

…ther

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 18, 2025

tomrf1 added the run_chromatic Runs chromatic when label is applied label Sep 18, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 18, 2025

juabara merged commit be116d8 into main Sep 18, 2025
31 checks passed

juabara deleted the jm/feat-prevent-banner-and-sign-in-gate-together branch September 18, 2025 08:44

gu-prout bot added the Pending-on-PROD label Sep 18, 2025

gu-prout bot added Seen-on-PROD and removed Pending-on-PROD labels Sep 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Integrate Sign-In Gate Portal into Sticky Bottom Banner #14408

feat: Integrate Sign-In Gate Portal into Sticky Bottom Banner #14408

juabara commented Aug 14, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 14, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Sep 1, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tomrf1 left a comment

Uh oh!

Uh oh!

gu-prout bot commented Sep 18, 2025

Uh oh!

Uh oh!

feat: Integrate Sign-In Gate Portal into Sticky Bottom Banner #14408

feat: Integrate Sign-In Gate Portal into Sticky Bottom Banner #14408

Conversation

juabara commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

Why?

Testing & validation

Notes for reviewers

Uh oh!

github-actions bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy build 45155 of Mobile::mobile-apps-rendering to CODE

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Sep 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy build 20919 of dotcom:rendering-all to CODE

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tomrf1 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gu-prout bot commented Sep 18, 2025

Uh oh!

Uh oh!

juabara commented Aug 14, 2025 •

edited

Loading

github-actions bot commented Aug 14, 2025 •

edited

Loading

Deploy build 45155 of `Mobile::mobile-apps-rendering` to CODE

github-actions bot commented Sep 1, 2025 •

edited

Loading

Deploy build 20919 of `dotcom:rendering-all` to CODE