Start here

What the overlay project is, in 5 minutes

01What an overlay is

An overlay is any piece of UI that appears on top of a webshop page rather than being part of it: a modal asking you to confirm emptying your cart, a side panel to pick a branch, a toast confirming a product was added, a tooltip or popover explaining a price. They show up on every page type and across all Rexel banners.

overlays on the roadmap

side panels

modals

toast, tooltip, popover

still to design

02Why this project exists

Today most overlays are still legacy: they are built and served by Hybris, the e-commerce platform the webshop is moving away from, and each one has its own look and business rules. The project rebuilds every overlay as an Angular component using our design system (Elektra), the shared library of components and styles that makes every screen look and behave the same. It also moves the data each overlay depends on off Hybris onto the Microservices (MS) platform.

The outcome we are after

Deliver one core overlay solution for all banners, built on our design system, so customers enjoy a consistent experience across the entire webshop.

03Two tracks, run independently

Every overlay is really two migrations that move at their own pace. That is why the hub has two separate tracking tools for the same list of overlays.

Front-end migration

These phases repeat for each overlay, wave by wave, until the last one is migrated.

Discovery
Implementation
Integration
Pilot activation
Global activation

Tracked in the Overlay Roadmap.

Backend migration

Each data call an overlay makes to Hybris moves to the microservices, until the overlay no longer depends on Hybris.

Endpoint analysis
MS / bff-web development
Overlay connected to MS
Hybris call retired

Tracked in the Back Migration Tracker.

An overlay can be Wave 1 on the front and Blocked on the back at the same time. That is not a contradiction, it is the reason the two tools exist.

04Waves and priorities

We do not migrate all overlays at once. Each one is scored on three criteria, and the result decides which wave (batch of delivery) it lands in.

Score	What it measures	Weight
Priority	Business value, customer journey, conversion impact, frequency, visibility, integration risk	50%
Readiness	Lead country validation, implementation risk, test coverage	30%
Page Priority	Which page it lives on	20%

05How one overlay gets to production

Build
→
QA, all banners
→
UAT pilot
→
UAT all banners
→
Prod pilot
→
Prod other banners
→
Pilot activation
→
Global activation
→
Maturity (legacy clean-up)

The pilot country goes first and is where the PO signs off (highlighted stages). Other banners follow once the pilot is validated, with automated and non-regression tests covering them in UAT. Exceptions apply to overlays that are banner-specific.

The Angular overlay and the Hybris trigger are two independent switches, so QA can test the new overlay end to end before either is turned on for real users. Production config flips happen at end of day, not mid-day.

Full detail, including testing process and open items: Overlay Lifecycle.

06The five tickets behind every overlay

Ticket	Purpose
Legacy analysis	Documents the legacy business rules before any code is written
Implementation	Builds the Angular overlay on the Elektra DS
Integration	Wires it into the page and its data
Hybris config	Trigger / enable-disable config, only if the overlay is Hybris-triggered
Clean-up	Retires the legacy path once the new overlay is stable everywhere

07Where to find what

🗺️

Overlay Roadmap

Which wave is this overlay in, what is its front-end status, and why is it prioritised the way it is?

🔌

Back Migration Tracker

Is the backend of this overlay migrated to MS, and if it is blocked, why and on which endpoint?

🗂️

Spring Overlay Coverage

Does this overlay have all five tickets in Jira yet?

🚦

Overlay Lifecycle

What has to be true before an overlay moves from QA to UAT to production?

👥

Overlay Org Chart

Who is on the project, what is their role, and who do I ask about a given topic?

08Glossary

Banner	One Rexel webshop brand in one country (for example AUS is Austria Schacke, AUR is Austria Regro).
Hybris	SAP Commerce, the legacy e-commerce platform the old overlays and many endpoints live on.
Elektra DS	Rexel's Angular design system; new overlays are built from its components (Modal, Side Panel, Toast...).
MS	Microservices, the target backend replacing Hybris endpoints.
bff-web	The backend-for-frontend layer the web calls; it fronts the MS APIs.
Wave	A delivery batch of overlays, ordered by score.
Non-sprintable	Not schedulable into a wave yet, usually because the design is not ready.
Lead country validation	Sign-off from the lead country that the overlay's scope and rules are right; required for Wave 1.
UAT / NRT	User acceptance testing / non-regression testing.
Maturity	Final lifecycle stage: new overlay live everywhere, legacy path removed.