diff --git a/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx b/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx index 8155b819091c..9cadb57534ec 100644 --- a/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx +++ b/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx @@ -26,6 +26,7 @@ import { MutationStatus, useMutationState } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; +import clsx from 'clsx'; import useTechnicalInfo, { usePricingInfo } from '@/hooks/useCatalogCommercial'; import { getMutationKeyCreateSavingsPlan, @@ -55,9 +56,10 @@ const COMMON_SPACING = 'my-4'; export const DescriptionWrapper: React.FC<{ children: string; -}> = ({ children }) => { + className?: string; +}> = ({ children, className }) => { return ( -
+
{children}
); @@ -272,7 +274,7 @@ const CreatePlanForm: FC = ({ {t('select_model')} {isInstance && ( -
+
{tabsList.map((tab) => ( = ({ {t(getDescriptionInstanceKey(instanceCategory))} {!isTechnicalInfoLoading ? ( -
+
{currentInstanceSelected.technical?.map(({ name, technical }) => ( = ({ {t('select_quantity')} - + {t('select_quantity_description')} - + {t('quantity_label')} { @@ -395,9 +397,9 @@ const CreatePlanForm: FC = ({ - + -
+
{ +type TLegalLinksProps = { + className?: string; +}; + +const LegalLinks: React.FC = ({ className = '' }) => { const { data = [] } = useSavingsPlanContract(); return ( <> {data.map((link) => (