} = {
+ tutoLink1: {
+ DE: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ ES: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ IE: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ IT: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ PL: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ PT: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ FR: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ GB: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ CA: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ QC: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ WE: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ WS: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ US: 'https://blog.ovhcloud.com/tag/ai-endpoints/',
+ },
+};
+
+type GetGuideLinkProps = {
+ name?: string;
+ subsidiary: CountryCode | string;
+};
+
+function getGuideListLink({ subsidiary }: GetGuideLinkProps) {
+ const list: { [guideName: string]: string } = {};
+ const keys = Object.entries(GUIDE_LIST);
+ keys.forEach((key) => {
+ list[key[0]] = docUrl + GUIDE_LIST[key[0]][subsidiary as CountryCode];
+ });
+
+ const tutos = Object.entries(TUTO_LIST);
+ tutos.forEach((key) => {
+ list[key[0]] = TUTO_LIST[key[0]][subsidiary as CountryCode];
+ });
+ return list;
+}
+
+interface GuideLinkProps {
+ [guideName: string]: string;
+}
+
+function useGuideUtils() {
+ const { shell } = useContext(ShellContext);
+ const { environment } = shell;
+ const [list, setList] = useState({});
+
+ useEffect(() => {
+ const getSubSidiary = async () => {
+ const env = await environment.getEnvironment();
+ const { ovhSubsidiary } = env.getUser();
+ const guideList = getGuideListLink({ subsidiary: ovhSubsidiary });
+ setList(guideList);
+ };
+ getSubSidiary();
+ }, []);
+ return list as GuideLinkProps;
+}
+
+export default useGuideUtils;
diff --git a/packages/manager/apps/pci-ai-endpoints/src/hooks/usePageTracking.ts b/packages/manager/apps/pci-ai-endpoints/src/hooks/usePageTracking.ts
new file mode 100644
index 000000000000..643388a143f8
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/hooks/usePageTracking.ts
@@ -0,0 +1,33 @@
+import { useContext, useEffect } from 'react';
+import { useLocation, useRouteLoaderData } from 'react-router-dom';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { TProject } from '@ovh-ux/manager-pci-common';
+import { PAGE_PREFIX, PCI_LEVEL2 } from '@/tracking.constants';
+
+const DISCOVERY_PLANCODE = 'project.discovery';
+
+export default function usePageTracking() {
+ const location = useLocation();
+ const project = useRouteLoaderData('public-gateway') as TProject;
+ const { setPciProjectMode, trackPage } = useContext(
+ ShellContext,
+ ).shell.tracking;
+
+ useEffect(() => {
+ if (project) {
+ setPciProjectMode({
+ projectId: project.project_id,
+ isDiscoveryProject: project.planCode === DISCOVERY_PLANCODE,
+ });
+ }
+ }, [project]);
+
+ useEffect(() => {
+ const pageId = location.pathname.split('/').pop();
+ const pageKey = pageId === 'public-gateway' ? '' : `::${pageId}`;
+ trackPage({
+ name: `${PAGE_PREFIX}::public-gateway${pageKey}`,
+ level2: PCI_LEVEL2,
+ });
+ }, [location]);
+}
diff --git a/packages/manager/apps/pci-ai-endpoints/src/index.scss b/packages/manager/apps/pci-ai-endpoints/src/index.scss
new file mode 100644
index 000000000000..65dd5f63a7df
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/index.scss
@@ -0,0 +1 @@
+@tailwind utilities;
diff --git a/packages/manager/apps/pci-ai-endpoints/src/index.tsx b/packages/manager/apps/pci-ai-endpoints/src/index.tsx
new file mode 100644
index 000000000000..7f4ab09081e1
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+ ShellContext,
+ initShellContext,
+ initI18n,
+} from '@ovh-ux/manager-react-shell-client';
+import App from './App';
+import '@ovhcloud/ods-theme-blue-jeans/dist/index.css';
+import './index.scss';
+import './vite-hmr';
+
+import { UNIVERSE, SUB_UNIVERSE, APP_NAME, LEVEL2 } from './tracking.constant';
+
+const trackingContext = {
+ chapter1: UNIVERSE,
+ chapter2: SUB_UNIVERSE,
+ chapter3: APP_NAME,
+ appName: APP_NAME,
+ pageTheme: UNIVERSE,
+ level2Config: LEVEL2,
+};
+
+const init = async (appName: string) => {
+ const context = await initShellContext(appName, trackingContext);
+
+ await initI18n({
+ context,
+ reloadOnLocaleChange: true,
+ defaultNS: appName,
+ ns: ['onboarding'],
+ });
+
+ const region = context.environment.getRegion();
+ context.shell.tracking.setConfig(region, LEVEL2);
+ try {
+ await import(`./config-${region}.js`);
+ } catch (error) {
+ // nothing to do
+ }
+
+ ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+ ,
+ );
+};
+
+init('pci-ai-endpoints');
diff --git a/packages/manager/apps/pci-ai-endpoints/src/pages/404.tsx b/packages/manager/apps/pci-ai-endpoints/src/pages/404.tsx
new file mode 100644
index 000000000000..a699dc45f8da
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/pages/404.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function NotFound() {
+ return 404 - route not found
;
+}
diff --git a/packages/manager/apps/pci-ai-endpoints/src/pages/index.tsx b/packages/manager/apps/pci-ai-endpoints/src/pages/index.tsx
new file mode 100644
index 000000000000..d341b8a602bf
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/pages/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function PciAiEndpoints() {
+ const { t } = useTranslation('pci-ai-endpoints');
+
+ return (
+
+
{t('title')}
+
Start your application
+
+
+
+ {isSuccess && (
+ <>
+
+
+
+ )}
+
+
+ );
+}
+
+export const ErrorBoundary = () => {
+ const error = useRouteError() as ResponseAPIError;
+ const { navigation } = useContext(ShellContext).shell;
+
+ const redirectionApplication = 'public-cloud';
+
+ const navigateToHomePage = () => {
+ navigation.navigateTo(redirectionApplication, '', {});
+ };
+
+ const reloadPage = () => {
+ navigation.reload();
+ };
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/index.scss b/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/index.scss
new file mode 100644
index 000000000000..995e5c3b0be6
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/index.scss
@@ -0,0 +1,10 @@
+.tile-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 30px;
+ padding-top: 3rem;
+
+ @media (min-width: 1024px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
diff --git a/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/index.tsx b/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/index.tsx
new file mode 100644
index 000000000000..9a686b639988
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/index.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card, OnboardingLayout } from '@ovh-ux/manager-react-components';
+import { OsdsText } from '@ovhcloud/ods-components/react';
+import {
+ ODS_THEME_COLOR_INTENT,
+ ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import { ODS_TEXT_LEVEL } from '@ovhcloud/ods-components';
+import useGuideUtils from '@/hooks/guide/useGuideUtils';
+import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
+import onboardingImgSrc from './onboarding-img.png';
+
+export default function Onboarding() {
+ const { t } = useTranslation('onboarding');
+ const link = useGuideUtils();
+
+ const tileList = [
+ {
+ id: 1,
+ texts: {
+ title: t('guide1Title'),
+ description: t('guide1Description'),
+ category: t('guideCategory'),
+ },
+ href: link?.guideLink1,
+ },
+ {
+ id: 2,
+ texts: {
+ title: t('guide2Title'),
+ description: t('guide2Description'),
+ category: t('guideCategory'),
+ },
+ href: link?.guideLink2,
+ },
+ {
+ id: 3,
+ texts: {
+ title: t('guide3Title'),
+ description: t('guide3Description'),
+ category: t('tutoCategory'),
+ },
+ href: link?.tutoLink1,
+ },
+ ];
+
+ const title: string = t('title');
+ const imgSrc = {
+ src: onboardingImgSrc,
+ };
+ const descBis: string = t('descriptionBis');
+
+ return (
+ <>
+
+
+
+ {t('description')}
+
+
+
+
+
+ }
+ moreInfoButtonLabel={t('goToAiEndpoint')}
+ moreInfoHref="https://endpoints.ai.cloud.ovh.net/"
+ >
+ {tileList.map((tile) => (
+
+ ))}
+
+
+ );
+}
diff --git a/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/onboarding-img.png b/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/onboarding-img.png
new file mode 100644
index 000000000000..e2fe73837401
Binary files /dev/null and b/packages/manager/apps/pci-ai-endpoints/src/pages/onboarding/onboarding-img.png differ
diff --git a/packages/manager/apps/pci-ai-endpoints/src/pci-ai-endpoints.config.ts b/packages/manager/apps/pci-ai-endpoints/src/pci-ai-endpoints.config.ts
new file mode 100644
index 000000000000..2ff8b25a2bdc
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/pci-ai-endpoints.config.ts
@@ -0,0 +1,8 @@
+export default {
+ listing: {
+ datagrid: {
+ serviceKey: 'pci-ai-endpoints',
+ },
+ },
+ rootLabel: 'pci-ai-endpoints',
+};
diff --git a/packages/manager/apps/pci-ai-endpoints/src/routes/routes.constant.ts b/packages/manager/apps/pci-ai-endpoints/src/routes/routes.constant.ts
new file mode 100644
index 000000000000..a2a71cf31dd0
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/routes/routes.constant.ts
@@ -0,0 +1,4 @@
+export const urls = {
+ root: '/',
+ onboarding: 'onboarding',
+};
diff --git a/packages/manager/apps/pci-ai-endpoints/src/routes/routes.tsx b/packages/manager/apps/pci-ai-endpoints/src/routes/routes.tsx
new file mode 100644
index 000000000000..21d33fee52ea
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/routes/routes.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { RouteObject } from 'react-router-dom';
+import { PageType } from '@ovh-ux/manager-react-shell-client';
+import NotFound from '@/pages/404';
+import { urls } from '@/routes/routes.constant';
+
+const lazyRouteConfig = (importFn: CallableFunction): Partial => {
+ return {
+ lazy: async () => {
+ const { default: moduleDefault, ...moduleExports } = await importFn();
+ return {
+ Component: moduleDefault,
+ ...moduleExports,
+ };
+ },
+ };
+};
+
+export const Routes: any = [
+ {
+ path: '/',
+ ...lazyRouteConfig(() => import('@/pages/layout')),
+ },
+ {
+ path: '/pci/projects/:projectId/ai/endpoints',
+ ...lazyRouteConfig(() => import('@/pages/layout')),
+ children: [
+ {
+ id: 'onboarding',
+ path: '',
+ ...lazyRouteConfig(() => import('@/pages/onboarding')),
+ handle: {
+ tracking: {
+ pageName: 'onboarding',
+ pageType: PageType.onboarding,
+ },
+ },
+ },
+ ],
+ },
+ {
+ path: '*',
+ element: ,
+ },
+];
diff --git a/packages/manager/apps/pci-ai-endpoints/src/tracking.constant.ts b/packages/manager/apps/pci-ai-endpoints/src/tracking.constant.ts
new file mode 100644
index 000000000000..a8423b9d8b79
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/tracking.constant.ts
@@ -0,0 +1,20 @@
+export const LEVEL2 = {
+ EU: {
+ config: {
+ level2: '86',
+ },
+ },
+ CA: {
+ config: {
+ level2: '86',
+ },
+ },
+ US: {
+ config: {
+ level2: '86',
+ },
+ },
+};
+export const UNIVERSE = 'PublicCloud';
+export const SUB_UNIVERSE = 'PublicCloud';
+export const APP_NAME = 'pci-ai-endpoints';
diff --git a/packages/manager/apps/pci-ai-endpoints/src/tracking.constants.ts b/packages/manager/apps/pci-ai-endpoints/src/tracking.constants.ts
new file mode 100644
index 000000000000..4b28ddb077db
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/tracking.constants.ts
@@ -0,0 +1,4 @@
+export const PCI_LEVEL2 = '86';
+export const PAGE_PREFIX = 'PublicCloud::pci::projects::project';
+export const ACTION_PREFIX = `${PAGE_PREFIX}::ai-endpoints`;
+export const DISCOVERY_PLANCODE = 'project.discovery';
diff --git a/packages/manager/apps/pci-ai-endpoints/src/vite-hmr.ts b/packages/manager/apps/pci-ai-endpoints/src/vite-hmr.ts
new file mode 100644
index 000000000000..473d87630039
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/src/vite-hmr.ts
@@ -0,0 +1,5 @@
+if (import.meta.hot) {
+ import.meta.hot.on('iframe-reload', () => {
+ window.location.reload();
+ });
+}
diff --git a/packages/manager/apps/pci-ai-endpoints/tailwind.config.js b/packages/manager/apps/pci-ai-endpoints/tailwind.config.js
new file mode 100644
index 000000000000..657ab11bb87d
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/tailwind.config.js
@@ -0,0 +1,14 @@
+import path from 'path';
+import config from '@ovh-ux/manager-tailwind-config';
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ ...config,
+ content: [
+ './src/**/*.{js,jsx,ts,tsx}',
+ path.join(
+ path.dirname(require.resolve('@ovh-ux/manager-react-components')),
+ '**/*.{js,jsx,ts,tsx}',
+ ),
+ ],
+};
diff --git a/packages/manager/apps/pci-ai-endpoints/tsconfig.json b/packages/manager/apps/pci-ai-endpoints/tsconfig.json
new file mode 100644
index 000000000000..cf730882826c
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "es2020", "ESNext"],
+ "noEmit": true,
+ "target": "ESNext",
+ "types": ["vite/client", "node", "jest", "@testing-library/jest-dom"],
+ "module": "esnext",
+ "moduleResolution": "Node",
+ "removeComments": true,
+ "outDir": "dist",
+ "esModuleInterop": true,
+ "isolatedModules": true,
+ "allowSyntheticDefaultImports": true,
+ "skipLibCheck": true,
+ "noImplicitAny": true,
+ "declaration": true,
+ "resolveJsonModule": true,
+ "allowJs": true,
+ "jsx": "react",
+ "paths": {
+ "@/*": ["./src/*"],
+ "@playwright-helpers/*": ["../../../../playwright-helpers/*"],
+ "@translation/*": ["./public/translations/*"]
+ }
+ },
+ "include": ["src"],
+ "exclude": ["node_modules", "dist", "types", "src/__tests__"]
+}
diff --git a/packages/manager/apps/pci-ai-endpoints/tsconfig.test.json b/packages/manager/apps/pci-ai-endpoints/tsconfig.test.json
new file mode 100644
index 000000000000..7048c297c8f6
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/tsconfig.test.json
@@ -0,0 +1,6 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "module": "CommonJS"
+ }
+}
diff --git a/packages/manager/apps/pci-ai-endpoints/vite.config.mjs b/packages/manager/apps/pci-ai-endpoints/vite.config.mjs
new file mode 100644
index 000000000000..f33ab6dc98cd
--- /dev/null
+++ b/packages/manager/apps/pci-ai-endpoints/vite.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import { getBaseConfig } from '@ovh-ux/manager-vite-config';
+import { resolve } from 'path';
+
+export default defineConfig({
+ ...getBaseConfig(),
+ root: resolve(process.cwd()),
+});
diff --git a/yarn.lock b/yarn.lock
index 15601c181765..c2b4e92c1417 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29137,4 +29137,4 @@ zustand@^4.5.5:
zwitch@^1.0.0:
version "1.0.5"
resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
- integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
+ integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
\ No newline at end of file