From c65f663c46965de2c80567087ca0731951c4de4f Mon Sep 17 00:00:00 2001 From: Lionel Bueno Date: Mon, 21 Oct 2024 17:18:52 +0200 Subject: [PATCH] feat: add savings plan banner for kubernetes Signed-off-by: Lionel Bueno --- .../translations/add/Messages_fr_FR.json | 4 +-- .../billing-anti-affinity/Messages_fr_FR.json | 4 +-- .../create/BillingStep.component.tsx | 30 +++++++++++-------- .../components/create/BillingStep.spec.tsx | 1 + 4 files changed, 22 insertions(+), 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 index 0b649052d38b..84bd12ff8856 100644 --- 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/billing-anti-affinity/Messages_fr_FR.json b/packages/manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_fr_FR.json index 2a18452ec869..3fe533c24d40 100644 --- a/packages/manager/apps/pci-kubernetes/public/translations/billing-anti-affinity/Messages_fr_FR.json +++ b/packages/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 index ab960e34eeab..df926f90ab70 100644 --- 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,6 +1,7 @@ import { OsdsCheckbox, OsdsCheckboxButton, + OsdsLink, OsdsMessage, OsdsText, OsdsTile, @@ -18,7 +19,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 { + ActionBanner, + useCatalogPrice, + useProjectUrl, +} from '@ovh-ux/manager-react-components'; import { ANTI_AFFINITY_MAX_NODES } from '@/constants'; const checkedClass = @@ -52,6 +57,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 ( <>
@@ -100,24 +108,20 @@ export default function BillingStep(props: TBillingStepProps): JSX.Element { color={ODS_THEME_COLOR_INTENT.info} >
- - {t( - 'kubernetes_add_billing_anti_affinity_coming_soon_message_title', - )} - - {t( - 'kubernetes_add_billing_anti_affinity_coming_soon_message_description', - )} + {t('kubernetes_add_billing_savings_plan_banner')} + + {t('kubernetes_add_billing_savings_plan_cta')} +
) : ( 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 index 2ff6d836fb6d..afe9ab0f39bf 100644 --- 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,