diff --git a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
index 4f65aaf0..34cede2f 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
@@ -35,5 +35,40 @@ test.describe('Header', () => {
name: 'profile picture',
}),
).toBeVisible();
+
+ await expect(
+ header.getByRole('button', {
+ name: 'Les services de La Suite numérique',
+ }),
+ ).toBeVisible();
+ });
+
+ test('checks La Gauffre interaction', async ({ page }) => {
+ const header = page.locator('header').first();
+
+ await expect(
+ header.getByRole('button', {
+ name: 'Les services de La Suite numérique',
+ }),
+ ).toBeVisible();
+
+ /**
+ * La gaufre load a js file from a remote server,
+ * it takes some time to load the file and have the interaction available
+ */
+ // eslint-disable-next-line playwright/no-wait-for-timeout
+ await page.waitForTimeout(1500);
+
+ await header
+ .getByRole('button', {
+ name: 'Les services de La Suite numérique',
+ })
+ .click();
+
+ await expect(
+ page.getByRole('link', { name: 'France Transfert' }),
+ ).toBeVisible();
+
+ await expect(page.getByRole('link', { name: 'Grist' })).toBeVisible();
});
});
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
index ff9bb916..019ffeb1 100644
--- a/src/frontend/apps/impress/package.json
+++ b/src/frontend/apps/impress/package.json
@@ -18,6 +18,7 @@
"@blocknote/core": "0.13.2",
"@blocknote/mantine": "0.13.2",
"@blocknote/react": "0.13.2",
+ "@gouvfr-lasuite/integration": "0.1.3",
"@openfun/cunningham-react": "2.9.0",
"@tanstack/react-query": "5.36.0",
"grapesjs-blocks-basic": "1.0.2",
diff --git a/src/frontend/apps/impress/src/features/header/ApplicationsMenu.tsx b/src/frontend/apps/impress/src/features/header/ApplicationsMenu.tsx
deleted file mode 100644
index ca777561..00000000
--- a/src/frontend/apps/impress/src/features/header/ApplicationsMenu.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Script from 'next/script';
-import React from 'react';
-
-/**
- * ApplicationsMenu Component
- *
- * This component is a work in progress (WIP) and serves as a proof of concept (POC) to showcase a future advanced feature.
- * The purpose of this component is to render an applications menu for La Suite, allowing users to switch between different La Suite apps seamlessly.
- * To ensure synchronized content across applications, it utilizes an iframe hosted on Scalingo.
- *
- * This PoC has been created by @manuhabitela.
- *
- * It includes external CSS and JavaScript files for styling and functionality.
- *
- * Style has to be included as well: https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/styles/gaufre-vanilla.css \
- * To respect next.js standards, the css is included using the `_document.ts` component.
- * @see https://github.com/numerique-gouv/impress/blob/main/src/frontend/apps/impress/src/pages/_document.tsx#L8
- */
-export const ApplicationsMenu = () => (
- <>
-
-
- >
-);
diff --git a/src/frontend/apps/impress/src/features/header/Header.tsx b/src/frontend/apps/impress/src/features/header/Header.tsx
index 14f442ef..91497279 100644
--- a/src/frontend/apps/impress/src/features/header/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/Header.tsx
@@ -9,6 +9,7 @@ import { Box, StyledLink, Text } from '@/components/';
import { LanguagePicker } from '../language/';
+import { LaGaufre } from './LaGaufre';
import { default as IconImpress } from './assets/icon-impress.svg?url';
import IconMyAccount from './assets/icon-my-account.png';
@@ -89,6 +90,7 @@ export const Header = () => {
src={IconMyAccount}
alt={t(`Profile picture`)}
/>
+
diff --git a/src/frontend/apps/impress/src/features/header/LaGaufre.tsx b/src/frontend/apps/impress/src/features/header/LaGaufre.tsx
new file mode 100644
index 00000000..58dbdefa
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/header/LaGaufre.tsx
@@ -0,0 +1,15 @@
+import { Gaufre } from '@gouvfr-lasuite/integration';
+import '@gouvfr-lasuite/integration/dist/css/gaufre.css';
+import Script from 'next/script';
+import React from 'react';
+
+export const LaGaufre = () => (
+ <>
+
+
+ >
+);
diff --git a/src/frontend/apps/impress/src/pages/_document.tsx b/src/frontend/apps/impress/src/pages/_document.tsx
index feb0bfb3..282e0d3f 100644
--- a/src/frontend/apps/impress/src/pages/_document.tsx
+++ b/src/frontend/apps/impress/src/pages/_document.tsx
@@ -2,12 +2,6 @@ import { Head, Html, Main, NextScript } from 'next/document';
import '@/i18n/initI18n';
-/**
- * About the Gaufre Vanilla CSS
- * To respect next.js standards, the css is included here.
- * This css is used with features/header/ApplicationsMenu component.
- * If the ApplicationsMenu component is removed, this css can be removed as well.
- */
export default function RootLayout() {
return (
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index f0e444e7..855ad912 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -1489,6 +1489,11 @@
dependencies:
tslib "^2.4.0"
+"@gouvfr-lasuite/integration@0.1.3":
+ version "0.1.3"
+ resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-0.1.3.tgz#cbf44473cd2a5b9497814faff459c3d88bc1ddce"
+ integrity sha512-WvAaMyEcNZkNX88Rbi6xo1rxFIGjsg3w8Gxi5NKVyNY0Ph2dXcGkP63ybCKD8JAsWHfxwAvs82wqXFZk5RCJ1g==
+
"@humanwhocodes/config-array@^0.11.14":
version "0.11.14"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -3717,7 +3722,7 @@
resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
-"@types/node@*":
+"@types/node@*", "@types/node@20.12.11":
version "20.12.11"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.11.tgz#c4ef00d3507000d17690643278a60dc55a9dc9be"
integrity sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==
@@ -3744,7 +3749,7 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
-"@types/react-dom@*", "@types/react-dom@^18.0.0":
+"@types/react-dom@*", "@types/react-dom@18.3.0", "@types/react-dom@^18.0.0":
version "18.3.0"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
@@ -10721,7 +10726,7 @@ typed-array-length@^1.0.6:
is-typed-array "^1.1.13"
possible-typed-array-names "^1.0.0"
-typescript@*, typescript@^5.0.4:
+typescript@*, typescript@5.4.5, typescript@^5.0.4:
version "5.4.5"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==