ovh · ppprevost · Dec 31, 2024 · Dec 30, 2024 · Dec 30, 2024 · Dec 30, 2024
@@ -27,7 +27,7 @@
   },
   "scripts": {
     "build": "yarn run build:turbo",
-    "build:turbo": "turbo run build --concurrency=5",
+    "build:turbo": "turbo run build --concurrency=5 --filter=\"@ovh-ux/manager-pci-common\"",
     "dev": "turbo run dev",
     "clean": "lerna clean -y && yarn run clean:dist && rimraf node_modules",
     "clean:dist": "rimraf \"packages/**/dist\"",
@@ -51,7 +51,7 @@
     "start": "node -r esm scripts/start-application.js",
     "test:jest": "jest --runInBand",
     "test": "yarn lint",
-    "test:turbo": "turbo run test --concurrency=1",
+    "test:turbo": "turbo run test --concurrency=1 --filter=\"@ovh-ux/manager-pci-common\"",
     "test:scripts": "make test",
     "test:playwright:run": "lerna run test:e2e:ci --stream --concurrency=1 --no-bail"
   },

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigation } from '@ovh-ux/manager-react-shell-client';
 import { ODS_MESSAGE_TYPE } from '@ovhcloud/ods-components';

@@ -0,0 +1,58 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import {
+  ShellContext,
+  ShellContextType,
+} from '@ovh-ux/manager-react-shell-client';
+import { describe, it, vi } from 'vitest';
+import PciSavingPlanBanner from './PciSavingsPlanBanner';
+import { wrapper } from '@/wrapperRenders';
+
+const mockNavigateTo = vi.fn();
+
+const mockShellContext = {
+  shell: {
+    navigation: {
+      navigateTo: mockNavigateTo,
+    },
+  },
+};
+
+describe('PciSavingPlanBanner tests', () => {
+  it('should render the banner with the correct message and CTA', () => {
+    const { container } = render(
+      <PciSavingPlanBanner className="test-class" />,
+      { wrapper },
+    );
+
+    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(
+      <ShellContext.Provider
+        value={(mockShellContext as unknown) as ShellContextType}
+      >
+        <PciSavingPlanBanner className="test-class" />
+      </ShellContext.Provider>,
+    );
+
+    const ctaButton = screen.getByText('pci_projects_savings_plan_cta');
+
+    fireEvent.click(ctaButton);
+
+    expect(mockNavigateTo).toHaveBeenCalledWith(
+      'public-cloud',
+      `#/pci/projects/mockProjectUrl/savings-plan`,
+      {},
+    );
+  });
+});
@@ -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('savings-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;
@@ -0,0 +1,4 @@
+{
+  "pci_projects_savings_plan_banner": "Profitieren Sie von günstigen monatlichen Preisen mit den Savings Plans und behalten Sie die Flexibilität der Instanzen auf Stundenbasis bei.",
+  "pci_projects_savings_plan_cta": "Ihre Savings Plans konfigurieren"
+}
@@ -0,0 +1,4 @@
+{
+  "pci_projects_savings_plan_banner": "Take advantage of low monthly rates with Savings Plans — save money without sacrificing the flexibility to use instances whenever you need them.",
+  "pci_projects_savings_plan_cta": "Set up your Savings Plans"
+}
@@ -0,0 +1,4 @@
+{
+  "pci_projects_savings_plan_banner": "Disfrute de tarifas mensuales más económicas gracias a los Savings Plans, manteniendo la flexibilidad de las instancias por horas.",
+  "pci_projects_savings_plan_cta": "Configure sus Savings Plans"
+}
@@ -0,0 +1,4 @@
+{
+  "pci_projects_savings_plan_banner": "Bénéficiez de tarifs mensuels avantageux grâce aux Savings Plans, tout en gardant la flexibilité des instances à l'heure.",
+  "pci_projects_savings_plan_cta": "Configurez vos Savings Plans"
+}
@@ -0,0 +1,4 @@
+{
+  "pci_projects_savings_plan_banner": "Bénéficiez de tarifs mensuels avantageux grâce aux Savings Plans, tout en gardant la flexibilité des instances à l'heure.",
+  "pci_projects_savings_plan_cta": "Configurez vos Savings Plans"
+}
@@ -0,0 +1,4 @@
+{
+  "pci_projects_savings_plan_banner": "Usufruisci di tariffe mensili vantaggiose grazie ai Savings Plan, conservando la flessibilità delle istanze all’ora.",
+  "pci_projects_savings_plan_cta": "Configura i tuoi Savings Plan"
+}
@@ -0,0 +1,4 @@
+{
+  "pci_projects_savings_plan_banner": "Dzięki Savings Plan zyskujesz korzystne opłaty miesięczne, a jednocześnie zachowujesz możliwość płatności za instancje w trybie za godzinę.",
+  "pci_projects_savings_plan_cta": "Skonfiguruj swoje plany Savings"
+}
@@ -0,0 +1,4 @@
+{
+  "pci_projects_savings_plan_banner": "Graças aos Savings Plans, beneficie de preços mensais vantajosos, enquanto conserva a flexibilidade das instâncias à hora.",
+  "pci_projects_savings_plan_cta": "Configure os seus Savings Plans"
+}
@@ -0,0 +1,27 @@
+import i18next from 'i18next';
+
+import de_DE from './Messages_de_DE.json';
+import en_GB from './Messages_en_GB.json';
+import es_ES from './Messages_es_ES.json';
+import fr_CA from './Messages_fr_CA.json';
+import fr_FR from './Messages_fr_FR.json';
+import it_IT from './Messages_it_IT.json';
+import pl_PL from './Messages_pl_PL.json';
+import pt_PT from './Messages_pt_PT.json';
+
+function addTranslations() {
+  i18next.addResources('de_DE', 'savings-plan-banner', de_DE);
+  i18next.addResources('en_GB', 'savings-plan-banner', en_GB);
+  i18next.addResources('es_ES', 'savings-plan-banner', es_ES);
+  i18next.addResources('fr_CA', 'savings-plan-banner', fr_CA);
+  i18next.addResources('fr_FR', 'savings-plan-banner', fr_FR);
+  i18next.addResources('it_IT', 'savings-plan-banner', it_IT);
+  i18next.addResources('pl_PL', 'savings-plan-banner', pl_PL);
+  i18next.addResources('pt_PT', 'savings-plan-banner', pt_PT);
+}
+
+if (i18next.isInitialized) {
+  addTranslations();
+} else {
+  i18next.on('initialized', addTranslations);
+}