feat(pci-kubernetes): add savings plan banner (#13708)

ref: TAPC-1911 Signed-off-by: Lionel Bueno <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]>
ovh · Jan 3, 2025 · 4b17307 · 4b17307
1 parent 003e4eb
commit 4b17307
Show file tree

Hide file tree

Showing 18 changed files with 73 additions and 33 deletions.
diff --git a/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_de_DE.json b/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_de_DE.json
@@ -43,5 +43,7 @@
   "kube_update_policy_picker_documentation_text": "Mehr Informationen zu den Sicherheitsrichtlinien von Managed Kubernetes Service:",
   "kube_update_policy_picker_documentation_link": "Siehe Dokumentation",
   "kubernetes_add_update_policy_title": "Sicherheitsrichtlinie auswählen",
-  "kubernetes_select_version_title": "Eine Version auswählen"
+  "kubernetes_select_version_title": "Eine Version auswählen",
+  "kubernetes_add_billing_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.",
+  "kubernetes_add_billing_savings_plan_cta": "Ihre Savings Plans konfigurieren"
 }
diff --git a/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_en_GB.json b/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_en_GB.json
@@ -43,5 +43,7 @@
   "kube_update_policy_picker_documentation_text": "Learn more about Managed Kubernetes Service security policies.",
   "kube_update_policy_picker_documentation_link": "See documentation",
   "kubernetes_add_update_policy_title": "Select security policy",
-  "kubernetes_select_version_title": "Select a version"
+  "kubernetes_select_version_title": "Select a version",
+  "kubernetes_add_billing_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.",
+  "kubernetes_add_billing_savings_plan_cta": "Set up your Savings Plan"
 }
diff --git a/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_es_ES.json b/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_es_ES.json
@@ -43,5 +43,7 @@
   "kube_update_policy_picker_documentation_text": "Más información sobre las políticas de seguridad de Managed Kubernetes Service.",
   "kube_update_policy_picker_documentation_link": "Consulte la documentación",
   "kubernetes_add_update_policy_title": "Seleccione la política de seguridad",
-  "kubernetes_select_version_title": "Seleccione una versión"
+  "kubernetes_select_version_title": "Seleccione una versión",
+  "kubernetes_add_billing_savings_plan_banner": "Disfrute de tarifas mensuales más económicas gracias a los Savings Plans, manteniendo la flexibilidad de las instancias por horas.",
+  "kubernetes_add_billing_savings_plan_cta": "Configure sus Savings Plans"
 }
diff --git a/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_fr_CA.json b/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_fr_CA.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/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/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_it_IT.json b/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_it_IT.json
@@ -43,5 +43,7 @@
   "kube_update_policy_picker_documentation_text": "Maggiori informazioni sulle politiche di sicurezza di Managed Kubernetes Service.",
   "kube_update_policy_picker_documentation_link": "Consulta la documentazione",
   "kubernetes_add_update_policy_title": "Seleziona la politica di sicurezza",
-  "kubernetes_select_version_title": "Seleziona una versione"
+  "kubernetes_select_version_title": "Seleziona una versione",
+  "kubernetes_add_billing_savings_plan_banner": "Usufruisci di tariffe mensili vantaggiose grazie ai Savings Plan, conservando la flessibilità delle istanze all’ora.",
+  "kubernetes_add_billing_savings_plan_cta": "Configura i tuoi Savings Plan"
 }
diff --git a/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_pl_PL.json b/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_pl_PL.json
@@ -43,5 +43,7 @@
   "kube_update_policy_picker_documentation_text": "Dowiedz się więcej o zasadach bezpieczeństwa Managed Kubernetes Service.",
   "kube_update_policy_picker_documentation_link": "Sprawdź dokumentację",
   "kubernetes_add_update_policy_title": "Wybierz politykę bezpieczeństwa",
-  "kubernetes_select_version_title": "Wybierz wersję"
+  "kubernetes_select_version_title": "Wybierz wersję",
+  "kubernetes_add_billing_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ę.",
+  "kubernetes_add_billing_savings_plan_cta": "Skonfiguruj Savings Plans"
 }
diff --git a/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_pt_PT.json b/packages/manager/apps/pci-kubernetes/public/translations/add/Messages_pt_PT.json
@@ -43,5 +43,7 @@
   "kube_update_policy_picker_documentation_text": "Saber mais sobre as políticas de segurança do Managed Kubernetes Service",
   "kube_update_policy_picker_documentation_link": "Consulte a documentação",
   "kubernetes_add_update_policy_title": "Selecione a política de segurança",
-  "kubernetes_select_version_title": "Selecione uma versão"
+  "kubernetes_select_version_title": "Selecione uma versão",
+  "kubernetes_add_billing_savings_plan_banner": "Graças aos Savings Plans, beneficie de preços mensais vantajosos, enquanto conserva a flexibilidade das instâncias à hora.",
+  "kubernetes_add_billing_savings_plan_cta": "Configure os seus Savings Plans"
 }
diff --git a/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_de_DE.json b/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_de_DE.json
@@ -23,5 +23,7 @@
   "kubernetes_add_billing_anti_affinity_coming_soon_message_title": "Monatliche Preise",
   "kubernetes_add_billing_anti_affinity_coming_soon_message_description": "Die monatlichen Preise werden mit der Einführung der Saving Plans in Kürze verfügbar sein.",
   "kubernetes_node_pool_anti_affinity": "Anti-Affinität",
-  "kubernetes_node_pool_anti_affinity_description": "Durch die Aktivierung der Anti-Affinität werden vorhandene und zukünftige Nodes auf verschiedenen Hypervisoren (physischen Servern) gestartet. Dies garantiert eine höhere Fehlertoleranz. Node-Pools mit Anti-Affinität können höchstens {{ maxNodes }} Nodes umfassen."
+  "kubernetes_node_pool_anti_affinity_description": "Durch die Aktivierung der Anti-Affinität werden vorhandene und zukünftige Nodes auf verschiedenen Hypervisoren (physischen Servern) gestartet. Dies garantiert eine höhere Fehlertoleranz. Node-Pools mit Anti-Affinität können höchstens {{ maxNodes }} Nodes umfassen.",
+  "kubernetes_add_billing_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.",
+  "kubernetes_add_billing_savings_plan_cta": "Ihre Savings Plans konfigurieren"
 }
diff --git a/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_en_GB.json b/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_en_GB.json
@@ -23,5 +23,7 @@
   "kubernetes_add_billing_anti_affinity_coming_soon_message_title": "Monthly prices",
   "kubernetes_add_billing_anti_affinity_coming_soon_message_description": "With the launch of Saving Plans, we will soon be able to bill you monthly.",
   "kubernetes_node_pool_anti_affinity": "Anti-affinity",
-  "kubernetes_node_pool_anti_affinity_description": "By enabling anti-affinity, current and future nodes will be launched on different hypervisors (physical servers), guaranteeing higher fault tolerance. Anti-affinity node pools can only include up to {{ maxNodes }} nodes."
+  "kubernetes_node_pool_anti_affinity_description": "By enabling anti-affinity, current and future nodes will be launched on different hypervisors (physical servers), guaranteeing higher fault tolerance. Anti-affinity node pools can only include up to {{ maxNodes }} nodes.",
+  "kubernetes_add_billing_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.",
+  "kubernetes_add_billing_savings_plan_cta": "Set up your Savings Plan"
 }
diff --git a/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_es_ES.json b/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_es_ES.json
@@ -23,5 +23,7 @@
   "kubernetes_add_billing_anti_affinity_coming_soon_message_title": "Precios mensuales",
   "kubernetes_add_billing_anti_affinity_coming_soon_message_description": "Los precios mensuales estarán disponibles próximamente con la llegada de los Saving Plans.",
   "kubernetes_node_pool_anti_affinity": "Antiafinidad",
-  "kubernetes_node_pool_anti_affinity_description": "Al activar la antiafinidad, los nodos presentes y futuros se lanzarán en hipervisores (servidores físicos) diferentes, garantizando una mayor tolerancia a fallos. Los pools de nodos con antiafinidad solo pueden incluir hasta {{ maxNodes }} nodos."
+  "kubernetes_node_pool_anti_affinity_description": "Al activar la antiafinidad, los nodos presentes y futuros se lanzarán en hipervisores (servidores físicos) diferentes, garantizando una mayor tolerancia a fallos. Los pools de nodos con antiafinidad solo pueden incluir hasta {{ maxNodes }} nodos.",
+  "kubernetes_add_billing_savings_plan_banner": "Disfrute de tarifas mensuales más económicas gracias a los Savings Plans, manteniendo la flexibilidad de las instancias por horas.",
+  "kubernetes_add_billing_savings_plan_cta": "Configure sus Savings Plans"
 }
diff --git a/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_fr_CA.json b/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_fr_CA.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/...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/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_it_IT.json b/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_it_IT.json
@@ -23,5 +23,7 @@
   "kubernetes_add_billing_anti_affinity_coming_soon_message_title": "Prezzi mensili",
   "kubernetes_add_billing_anti_affinity_coming_soon_message_description": "I prezzi mensili saranno disponibili a breve con l'arrivo dei Saving Plans.",
   "kubernetes_node_pool_anti_affinity": "Anti-affinità",
-  "kubernetes_node_pool_anti_affinity_description": "L’attivazione dell'anti-affinità permette di avviare i nodi correnti e futuri su hypervisor (server fisici) differenti, garantendo una maggiore tolleranza ai guasti. I pool di nodi con anti-affinità possono contenere un massimo di {{ maxNodes }} nodi."
+  "kubernetes_node_pool_anti_affinity_description": "L’attivazione dell'anti-affinità permette di avviare i nodi correnti e futuri su hypervisor (server fisici) differenti, garantendo una maggiore tolleranza ai guasti. I pool di nodi con anti-affinità possono contenere un massimo di {{ maxNodes }} nodi.",
+  "kubernetes_add_billing_savings_plan_banner": "Usufruisci di tariffe mensili vantaggiose grazie ai Savings Plan, conservando la flessibilità delle istanze all’ora.",
+  "kubernetes_add_billing_savings_plan_cta": "Configura i tuoi Savings Plan"
 }
diff --git a/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_pl_PL.json b/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_pl_PL.json
@@ -23,5 +23,7 @@
   "kubernetes_add_billing_anti_affinity_coming_soon_message_title": "Ceny miesięczne",
   "kubernetes_add_billing_anti_affinity_coming_soon_message_description": "Ceny miesięczne będą dostępne wkrótce, wraz z uruchomieniem Saving Plans.",
   "kubernetes_node_pool_anti_affinity": "Ochrona przed koligacją (anti-affinity)",
-  "kubernetes_node_pool_anti_affinity_description": "Po włączeniu ochrony przed koligacją (anti-affinity) węzły, działające aktualnie i te, które zostaną utworzone w przyszłości, będą uruchamiane na różnych hiperwizorach (serwerach fizycznych), co zapewni większą odporność na awarie. Pule węzłów z włączoną ochroną przed koligacją (anti-affinity) mogą zawierać tylko {{maxNodes}} węzłów."
+  "kubernetes_node_pool_anti_affinity_description": "Po włączeniu ochrony przed koligacją (anti-affinity) węzły, działające aktualnie i te, które zostaną utworzone w przyszłości, będą uruchamiane na różnych hiperwizorach (serwerach fizycznych), co zapewni większą odporność na awarie. Pule węzłów z włączoną ochroną przed koligacją (anti-affinity) mogą zawierać tylko {{maxNodes}} węzłów.",
+  "kubernetes_add_billing_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ę.",
+  "kubernetes_add_billing_savings_plan_cta": "Skonfiguruj Savings Plans"
 }
diff --git a/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_pt_PT.json b/...manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_pt_PT.json
@@ -23,5 +23,7 @@
   "kubernetes_add_billing_anti_affinity_coming_soon_message_title": "Preços mensais",
   "kubernetes_add_billing_anti_affinity_coming_soon_message_description": "Os preços mensais estarão disponíveis em breve com a chegada dos Saving Plans.",
   "kubernetes_node_pool_anti_affinity": "Anti-afinidade",
-  "kubernetes_node_pool_anti_affinity_description": "Ao ativar a anti-afinidade, os nós presentes e futuros serão lançados em hipervisores (servidores físicos) diferentes, garantindo uma maior tolerância às falhas. Os pools de nós com anti-afinidade só podem conter até {{ maxNodes }} nós."
+  "kubernetes_node_pool_anti_affinity_description": "Ao ativar a anti-afinidade, os nós presentes e futuros serão lançados em hipervisores (servidores físicos) diferentes, garantindo uma maior tolerância às falhas. Os pools de nós com anti-afinidade só podem conter até {{ maxNodes }} nós.",
+  "kubernetes_add_billing_savings_plan_banner": "Graças aos Savings Plans, beneficie de preços mensais vantajosos, enquanto conserva a flexibilidade das instâncias à hora.",
+  "kubernetes_add_billing_savings_plan_cta": "Configure os seus Savings Plans"
 }
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,16 @@
 import {
   OsdsCheckbox,
   OsdsCheckboxButton,
+  OsdsIcon,
+  OsdsLink,
   OsdsMessage,
   OsdsText,
   OsdsTile,
 } from '@ovhcloud/ods-components/react';
 import {
   ODS_CHECKBOX_BUTTON_SIZE,
+  ODS_ICON_NAME,
+  ODS_ICON_SIZE,
   ODS_MESSAGE_TYPE,
   ODS_TEXT_LEVEL,
   ODS_TEXT_SIZE,
@@ -18,7 +22,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 +60,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 +111,28 @@ 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 flex items-center"
+                target={OdsHTMLAnchorElementTarget._blank}
+                color={ODS_THEME_COLOR_INTENT.primary}
+                href={savingsPlanUrl}
+              >
+                {t('kubernetes_add_billing_savings_plan_cta')}
+                <OsdsIcon
+                  className="ml-5"
+                  aria-hidden="true"
+                  name={ODS_ICON_NAME.ARROW_RIGHT}
+                  size={ODS_ICON_SIZE.xxs}
+                  color={ODS_THEME_COLOR_INTENT.primary}
+                />
+              </OsdsLink>
             </div>
           </OsdsMessage>
         ) : (