feat(pci-common): lint

Signed-off-by: Pierre-Philippe <[email protected]>

packages/manager/modules/manager-pci-common/src/components/banner/savings-plan-banner/PciSavingsPlanBanner.spec.tsx

@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import PciSavingPlanBanner from './PciSavingsPlanBanner';
+
+const mockNavigateTo = vi.fn();
+vi.mock('@ovh-ux/manager-react-shell-client', () => ({
+  useNavigation: () => ({
+    navigateTo: mockNavigateTo,
+  }),
+}));
+
+describe('PciSavingPlanBanner tests', () => {
+  it('should render the banner with the correct message and CTA', () => {
+    const { container } = render(
+      <PciSavingPlanBanner className="test-class" />,
+    );
+
+    expect(
+      screen.getByText('pci_projects_savings_plan_banner'),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText('pci_projects_savings_plan_cta'),
+    ).toBeInTheDocument();
+
+    expect(container.querySelector('.test-class')).toBeInTheDocument();
+  });
+
+  it('should call navigateToSavingsPlan on CTA click', async () => {
+    render(<PciSavingPlanBanner className="test-class" />);
+
+    const ctaButton = screen.getByText('pci_projects_savings_plan_cta');
+
+    fireEvent.click(ctaButton);
+
+    expect(mockNavigateTo).toHaveBeenCalledWith(
+      'public-cloud',
+      `#/pci/projects/mockProjectUrl/savings-plan`,
+      {},
+    );
+  });
+});

packages/manager/modules/manager-pci-common/src/components/banner/savings-plan-banner/PciSavingsPlanBanner.tsx

@@ -0,0 +1,32 @@
+import { ActionBanner, useProjectUrl } from '@ovh-ux/manager-react-components';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useContext } from 'react';
+import { ODS_MESSAGE_TYPE } from '@ovhcloud/ods-components';
+import { useTranslation } from 'react-i18next';
+
+const PciSavingsPlanBanner = ({ className }: { className: string }) => {
+  const { t } = useTranslation('saving-plan-banner');
+  const projectURL = useProjectUrl('public-cloud');
+  const {
+    navigation: { navigateTo },
+  } = useContext(ShellContext).shell;
+  const navigateToSavingsPlan = async () => {
+    await navigateTo(
+      'public-cloud',
+      `#/pci/projects/${projectURL}/savings-plan`,
+      {},
+    );
+  };
+
+  return (
+    <ActionBanner
+      message={t('pci_projects_savings_plan_banner')}
+      cta={t('pci_projects_savings_plan_cta')}
+      type={ODS_MESSAGE_TYPE.info}
+      onClick={navigateToSavingsPlan}
+      className={className}
+    />
+  );
+};
+
+export default PciSavingsPlanBanner;