feat(svp): Bump Savings Plan to ODS 18 - Epic

packages/manager/apps/pci-savings-plan/package.json

@@ -23,16 +23,14 @@
     "@ovh-ux/manager-config": "^8.0.2",
     "@ovh-ux/manager-core-api": "^0.9.0",
     "@ovh-ux/manager-core-utils": "*",
-    "@ovh-ux/manager-pci-common": "^0.14.2",
-    "@ovh-ux/manager-react-components": "^1.43.0",
+    "@ovh-ux/manager-pci-common": "^1.0.4",
     "@ovh-ux/manager-react-core-application": "^0.11.5",
     "@ovh-ux/manager-react-shell-client": "^0.8.5",
+    "@ovh-ux/manager-react-components": "^2.5.1",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/request-tagger": "^0.4.0",
-    "@ovhcloud/ods-common-core": "17.2.2",
-    "@ovhcloud/ods-common-theming": "17.2.2",
-    "@ovhcloud/ods-components": "17.2.2",
-    "@ovhcloud/ods-theme-blue-jeans": "17.2.1",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@tanstack/react-query": "5.51.11",
     "@tanstack/react-query-devtools": "5.29.2",
     "@testing-library/react": "^16.0.0",

packages/manager/apps/pci-savings-plan/src/App.tsx

@@ -1,12 +1,9 @@
 import React, { useEffect, useContext } from 'react';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-import { odsSetup } from '@ovhcloud/ods-common-core';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { RouterProvider, createHashRouter } from 'react-router-dom';
 import { Routes } from './routes/routes';
 
-odsSetup();
-
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

packages/manager/apps/pci-savings-plan/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 import { Params, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import {
+  OdsBreadcrumb,
+  OdsBreadcrumbItem,
+} from '@ovhcloud/ods-components/react';
 import { useNavigation } from '@ovh-ux/manager-react-shell-client';
 
 import { useProject } from '@ovh-ux/manager-pci-common';
@@ -16,6 +19,7 @@ const getPageName = (location: string, t: (key: string) => string) => {
     return [
       {
         label: t('createSavingsPlan'),
+        href: location,
       },
     ];
   }
@@ -45,20 +49,28 @@ const Breadcrumb: React.FC = () => {
     updateNav();
   }, [navigation, projectId]);
 
+  const breadcrumbItems = [
+    {
+      href: urlProject,
+      label: project?.description,
+    },
+    {
+      href: `${urlProject}/savings-plan`,
+      label: t('title'),
+    },
+    ...items,
+  ];
+
   return (
-    <OsdsBreadcrumb
-      items={[
-        {
-          href: urlProject,
-          label: project?.description,
-        },
-        {
-          href: `${urlProject}/savings-plan`,
-          label: t('title'),
-        },
-        ...items,
-      ]}
-    ></OsdsBreadcrumb>
+    <OdsBreadcrumb>
+      {breadcrumbItems.map((item) => (
+        <OdsBreadcrumbItem
+          key={item.href}
+          href={item.href}
+          label={item.label}
+        />
+      ))}
+    </OdsBreadcrumb>
   );
 };
 

packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.test.tsx

@@ -6,6 +6,12 @@ import '@testing-library/jest-dom';
 
 import { render } from '@/utils/testProvider';
 
+vi.mock('@ovh-ux/manager-react-components', () => ({
+  useCatalogPrice: vi.fn().mockReturnValue({
+    getTextPrice: vi.fn().mockReturnValue('€10.00'),
+  }),
+}));
+
 const defaultProps = {
   duration: 1,
   price: '1',
@@ -15,19 +21,6 @@ const defaultProps = {
   quantity: 1,
 };
 
-vi.mock('@ovh-ux/manager-react-components', async (importOriginal) => {
-  const mod = await importOriginal<
-    typeof import('@ovh-ux/manager-react-components')
-  >();
-
-  return {
-    ...mod,
-    useCatalogPrice: vi
-      .fn()
-      .mockReturnValue({ getTextPrice: vi.fn().mockReturnValue('€10.00') }),
-  };
-});
-
 const setupSpecTest = async (props = defaultProps) =>
   render(<Commitment {...props} />);
 

packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx

@@ -1,12 +1,8 @@
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import { ODS_TILE_SIZE, ODS_TILE_VARIANT } from '@ovhcloud/ods-components';
-import { OsdsText, OsdsTile } from '@ovhcloud/ods-components/react';
+import { OdsText, OdsCard } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCatalogPrice } from '@ovh-ux/manager-react-components';
+import clsx from 'clsx';
 import { getDiffInPercent } from './Commitment.utils';
 import {
   CENTS_PRICE,
@@ -42,54 +38,40 @@ const Commitment = ({
   );
 
   return (
-    <OsdsTile
-      size={ODS_TILE_SIZE.sm}
-      rounded
-      inline
-      variant={ODS_TILE_VARIANT.stroked}
-      className={`flex flex-row items-center mr-5 my-4 justify-between w-full cursor-pointer ${
-        isActive
-          ? 'bg-[--ods-color-blue-100] border-[--ods-color-blue-600]'
-          : ''
-      }`}
-      color={
-        isActive
-          ? ODS_THEME_COLOR_INTENT.primary
-          : ODS_THEME_COLOR_INTENT.default
-      }
+    <OdsCard
+      className={clsx(
+        'flex flex-row items-center mr-5 my-4 p-5 justify-between w-full cursor-pointer',
+        { 'border-[--ods-color-primary-500] border-2': isActive },
+      )}
       onClick={onClick}
+      color="neutral"
     >
-      <span slot="start" className="flex flex-row items-center justify-center">
-        <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
-          {t('commitment_month', { value: duration })}
-        </OsdsText>
-        <OsdsText
-          size={ODS_THEME_TYPOGRAPHY_SIZE._500}
-          className="ml-3 text-[#AC246F]"
-        >
-          {diffInPercent ? `- ${diffInPercent} %` : ''}
-        </OsdsText>
+      <span className="flex flex-row items-center justify-center">
+        <OdsText>{t('commitment_month', { value: duration })}</OdsText>
+        {diffInPercent && (
+          <OdsText className="ml-3  text-[16px]">
+            <span className="text-[#AC246F] font-bold">
+              {`- ${diffInPercent} %`}
+            </span>
+          </OdsText>
+        )}
       </span>
-      <span slot="end" className="flex flex-col items-end justify-center">
+      <span className="flex flex-col items-end justify-center">
         <div className="flex flex-row items-center justify-center">
           {priceByMonthWithoutCommitment && (
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              className="line-through"
-            >
+            <OdsText className="line-through">
               {`~ ${getTextPrice(priceByMonthWithoutCommitment * CENTS_PRICE)}`}
-            </OsdsText>
+            </OdsText>
           )}
-          <OsdsText
-            size={ODS_THEME_TYPOGRAPHY_SIZE._500}
-            className="ml-3 text-[#AC246F]"
-          >
-            {getTextPrice(priceNumber * CENTS_PRICE)}
-          </OsdsText>
+          <OdsText className="ml-3  text-[16px]">
+            <span className="text-[#AC246F] font-bold">
+              {getTextPrice(priceNumber * CENTS_PRICE)}
+            </span>
+          </OdsText>
         </div>
-        <OsdsText>{t('commitment_price_month')}</OsdsText>
+        <OdsText>{t('commitment_price_month')}</OdsText>
       </span>
-    </OsdsTile>
+    </OdsCard>
   );
 };
 

packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlan.test.tsx

@@ -10,6 +10,10 @@ import {
 
 import { render } from '@/utils/testProvider';
 
+vi.mock('@ovh-ux/manager-pci-common', () => ({
+  usePciUrl: vi.fn(() => '/url'),
+}));
+
 vi.mock('react-i18next', () => ({
   useTranslation: vi.fn().mockReturnValue({
     t: (key: string) => key,
@@ -26,10 +30,6 @@ vi.mock('react-router-dom', async (importOriginal) => {
   };
 });
 
-vi.mock('@ovh-ux/manager-pci-common', () => ({
-  usePciUrl: vi.fn(() => '/url'),
-}));
-
 const mockOnCreatePlan = vi.fn();
 const mockSetTechnicalModel = vi.fn();
 
@@ -127,30 +127,21 @@ describe('CreatePlanForm', () => {
 
       // Select duration
       fireEvent.click(screen.getByText('commitment_month'));
-      // Select quantity
-      const plusButton = screen.getByTestId('plus-button');
-      fireEvent.click(plusButton);
       // Select model
       fireEvent.click(screen.getByText('select_model_description_instance_b3'));
       // Accept legal checkbox
       fireEvent.click(screen.getByText('legal_checkbox'));
       // Click on create button
-      fireEvent.click(screen.getByText('cta_plan'));
+      fireEvent.click(screen.getByTestId('cta-plan-button'));
 
       expect(defaultProps.onCreatePlan).toHaveBeenCalled();
     });
 
-    it('When no instance selected, create button should be disabled ', async () => {
-      await setupSpecTest();
-
-      fireEvent.click(screen.getByText('cta_plan'));
-      expect(screen.getByText('cta_plan')).toHaveAttribute('disabled');
-    });
-
     it('should not call onCreatePlan if form not valid', async () => {
       await setupSpecTest();
 
-      fireEvent.click(screen.getByText('cta_plan'));
+      const ctaPlanButton = screen.getByTestId('cta-plan-button');
+      fireEvent.click(ctaPlanButton);
 
       expect(defaultProps.onCreatePlan).not.toHaveBeenCalled();
     });