feat: add savings plan banner for kubernetes

Signed-off-by: Lionel Bueno <[email protected]>
ovh · Nov 14, 2024 · d2ecefd · d2ecefd
1 parent c622cd7
commit d2ecefd
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_fr_FR.json b/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_fr_FR.json
@@ -25,8 +25,8 @@
   "kubernetes_add_billing_auto_scaling_monthly_warning": "Attention : Vous activez simultanément l'autoscaling et le forfait mensuel pour ce nodepool. Chaque création de nœud par l'autoscaling va entrainer la facturation immédiate d'un nœud au prorata du temps restant sur le mois en cours. Nous vous conseillons d'éviter cette combinaison si vous anticipez que la taille de votre nodepool sera fréquemment réduite.",
   "kubernetes_add_billing_type_payment_method": "Vous serez facturé sur votre mode de paiement par défaut",
   "kubernetes_add_billing_anti_affinity_title": "Facturation et anti-affinité",
-  "kubernetes_add_billing_anti_affinity_coming_soon_message_title": "Prix mensuels",
-  "kubernetes_add_billing_anti_affinity_coming_soon_message_description": "Les tarifications mensuelles seront prochainement disponibles avec l'arrivée des Saving Plans.",
+  "kubernetes_add_billing_savings_plan_banner": "Bénéficiez de tarifs mensuels avantageux grâce aux Savings Plans, tout en gardant la flexibilité des instances à l'heure.",
+  "kubernetes_add_billing_savings_plan_cta": "Configurez vos Savings Plans",
   "kube_add_node_pool_config_title": "Configuration générale",
   "kube_add_node_pool_name_label": "Nom du pool de nœuds",
   "kube_add_node_pool_creating": "Création d'un pool de nœuds",

diff --git a/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_fr_FR.json b/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_fr_FR.json
@@ -20,8 +20,8 @@
   "kubernetes_add_billing_auto_scaling_monthly_warning": "Attention : Vous activez simultanément l'autoscaling et le forfait mensuel pour ce nodepool. Chaque création de nœud par l'autoscaling va entrainer la facturation immédiate d'un nœud au prorata du temps restant sur le mois en cours. Nous vous conseillons d'éviter cette combinaison si vous anticipez que la taille de votre nodepool sera fréquemment réduite.",
   "kubernetes_add_billing_type_payment_method": "Vous serez facturé sur votre mode de paiement par défaut",
   "kubernetes_add_billing_anti_affinity_title": "Facturation et anti-affinité",
-  "kubernetes_add_billing_anti_affinity_coming_soon_message_title": "Prix mensuels",
-  "kubernetes_add_billing_anti_affinity_coming_soon_message_description": "Les tarifications mensuelles seront prochainement disponibles avec l'arrivée des Saving Plans.",
+  "kubernetes_add_billing_savings_plan_banner": "Bénéficiez de tarifs mensuels avantageux grâce aux Savings Plans, tout en gardant la flexibilité des instances à l'heure.",
+  "kubernetes_add_billing_savings_plan_cta": "Configurez vos Savings Plans",
   "kubernetes_node_pool_anti_affinity": "Anti-affinité",
   "kubernetes_node_pool_anti_affinity_description": "En activant l'anti-affinité, les nœuds présents et futurs seront lancés sur des hyperviseurs (serveurs physiques) différents, garantissant une plus grande tolérance à la panne. Les pools de nœuds avec anti-affinité ne peuvent compter que jusque {{ maxNodes }} nœuds."
 }
diff --git a/packages/manager/apps/pci-kubernetes/src/components/create/BillingStep.component.tsx b/packages/manager/apps/pci-kubernetes/src/components/create/BillingStep.component.tsx
@@ -1,12 +1,15 @@
 import {
   OsdsCheckbox,
   OsdsCheckboxButton,
+  OsdsIcon,
+  OsdsLink,
   OsdsMessage,
   OsdsText,
   OsdsTile,
 } from '@ovhcloud/ods-components/react';
 import {
   ODS_CHECKBOX_BUTTON_SIZE,
+  ODS_ICON_NAME,
   ODS_MESSAGE_TYPE,
   ODS_TEXT_LEVEL,
   ODS_TEXT_SIZE,
@@ -18,7 +21,11 @@ import {
   ODS_THEME_TYPOGRAPHY_SIZE,
 } from '@ovhcloud/ods-common-theming';
 import { useTranslation } from 'react-i18next';
-import { useCatalogPrice } from '@ovh-ux/manager-react-components';
+import {
+  useCatalogPrice,
+  useProjectUrl,
+} from '@ovh-ux/manager-react-components';
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { ANTI_AFFINITY_MAX_NODES } from '@/constants';
 
 const checkedClass =
@@ -52,6 +59,9 @@ export default function BillingStep(props: TBillingStepProps): JSX.Element {
     getFormattedHourlyCatalogPrice,
   } = useCatalogPrice(4, { exclVat: true });
 
+  const projectURL = useProjectUrl('public-cloud');
+  const savingsPlanUrl = `${projectURL}/savings-plan`;
+
   return (
     <>
       <div className="mb-6">
@@ -100,24 +110,26 @@ export default function BillingStep(props: TBillingStepProps): JSX.Element {
             color={ODS_THEME_COLOR_INTENT.info}
           >
             <div className="flex flex-col">
-              <OsdsText
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-                color={ODS_THEME_COLOR_INTENT.text}
-              >
-                {t(
-                  'kubernetes_add_billing_anti_affinity_coming_soon_message_title',
-                )}
-              </OsdsText>
               <OsdsText
                 level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
                 size={ODS_THEME_TYPOGRAPHY_SIZE._400}
                 color={ODS_THEME_COLOR_INTENT.text}
               >
-                {t(
-                  'kubernetes_add_billing_anti_affinity_coming_soon_message_description',
-                )}
+                {t('kubernetes_add_billing_savings_plan_banner')}
               </OsdsText>
+              <OsdsLink
+                className="mt-2"
+                target={OdsHTMLAnchorElementTarget._blank}
+                color={ODS_THEME_COLOR_INTENT.primary}
+                href={savingsPlanUrl}
+              >
+                {t('kubernetes_add_billing_savings_plan_cta')}
+                <OsdsIcon
+                  aria-hidden="true"
+                  name={ODS_ICON_NAME.ARROW_RIGHT}
+                  color={ODS_THEME_COLOR_INTENT.primary}
+                />
+              </OsdsLink>
             </div>
           </OsdsMessage>
         ) : (

diff --git a/packages/manager/apps/pci-kubernetes/src/components/create/BillingStep.spec.tsx b/packages/manager/apps/pci-kubernetes/src/components/create/BillingStep.spec.tsx
@@ -19,6 +19,7 @@ const defaultProps: TBillingStepProps = {
 };
 
 vi.mock('@ovh-ux/manager-react-components', () => ({
+  useProjectUrl: vi.fn().mockReturnValue('mockProjectUrl'),
   useCatalogPrice: () => ({
     getTextPrice: (price: number) => price,
     getFormattedCatalogPrice: (price: number) => price,