+ {children}
);
};
@@ -195,6 +191,8 @@ const CreatePlanForm: FC
{resources.map((resource) => (
onChangeResource(resource.value)}
>
- 
- {resource.label}
+
+
))}
@@ -290,27 +310,25 @@ const CreatePlanForm: FC
+ {resource.label}
+
-
-
- {tabsList.map((tab) => (
- setInstanceCategory(tab.technicalName)}
- >
- {tab.label}
-
- ))}
-
-
+
{t(getDescriptionInstanceKey(instanceCategory))}
{!isTechnicalInfoLoading ? (
- = ({ className = '' }) => {
const { data = [] } = useSavingsPlanContract();
return (
<>
{data.map((link) => (
) {
const { t } = useTranslation('renew');
+ const isReactivate =
+ periodEndAction === SavingsPlanPlanedChangeStatus.REACTIVATE;
return (
-
-
-
-
- {t('buttons_cancel')}
-
-
- {t(
- periodEndAction === SavingsPlanPlanedChangeStatus.REACTIVATE
- ? 'buttons_deactivate'
- : 'buttons_activate',
- )}
-
-
+
+ {t('title')}
+
+
);
}
diff --git a/packages/manager/apps/pci-savings-plan/src/components/PlannedChangeStatusChip/PlannedChangeStatusChip.tsx b/packages/manager/apps/pci-savings-plan/src/components/PlannedChangeStatusChip/PlannedChangeStatusChip.tsx
index b96c8d943df9..d9fea74111af 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/PlannedChangeStatusChip/PlannedChangeStatusChip.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/PlannedChangeStatusChip/PlannedChangeStatusChip.tsx
@@ -1,6 +1,5 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import { OsdsChip, OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { ODS_SPINNER_SIZE, ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
+import { OdsBadge, OdsSpinner } from '@ovhcloud/ods-components/react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SavingsPlanPlanedChangeStatus } from '@/types/api.type';
@@ -8,21 +7,19 @@ import { SavingsPlanPlanedChangeStatus } from '@/types/api.type';
const PlannedChangeStatusChip = ({ label }: { label: string }) => {
const { t } = useTranslation('listing');
const colorByProductStatus: {
- [key in SavingsPlanPlanedChangeStatus]: ODS_THEME_COLOR_INTENT;
+ [key in SavingsPlanPlanedChangeStatus]: ODS_BADGE_COLOR;
} = {
- [SavingsPlanPlanedChangeStatus.REACTIVATE]: ODS_THEME_COLOR_INTENT.success,
- [SavingsPlanPlanedChangeStatus.TERMINATE]: ODS_THEME_COLOR_INTENT.error,
+ [SavingsPlanPlanedChangeStatus.REACTIVATE]: ODS_BADGE_COLOR.success,
+ [SavingsPlanPlanedChangeStatus.TERMINATE]: ODS_BADGE_COLOR.critical,
};
return label ? (
-
- {t(label.toLowerCase() as SavingsPlanPlanedChangeStatus)}
-
+ />
) : (
- = ({
- quantity,
- onMinusClick,
- onPlusClick,
- onChangeQuantity,
-}) => {
- const isDisabledPlus = quantity >= MAX_QUANTITY;
-
- return (
-
-
-
- {
- const value = Number(e.detail.value);
- if (value > 0 && value <= MAX_QUANTITY) {
- onChangeQuantity(value);
- }
- }}
- size={ODS_INPUT_SIZE.md}
- >
-
-
-
- );
-};
-
-export default QuantitySelector;
diff --git a/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx b/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
index 2412cc602ef7..1eb796de13cf 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
@@ -1,28 +1,27 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_TILE_VARIANT } from '@ovhcloud/ods-components';
-import { OsdsTile } from '@ovhcloud/ods-components/react';
+import { OdsCard } from '@ovhcloud/ods-components/react';
+import clsx from 'clsx';
import React from 'react';
const SimpleTile: React.FC void;
isActive?: boolean;
-}>> = ({ children, onClick, isActive }) => (
- > = ({ children, onClick, isActive, className }) => (
+
{children}
-
+
);
export default SimpleTile;
diff --git a/packages/manager/apps/pci-savings-plan/src/components/StatusChip/StatusChip.tsx b/packages/manager/apps/pci-savings-plan/src/components/StatusChip/StatusChip.tsx
index 40ce02e05c87..387a1ca1685a 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/StatusChip/StatusChip.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/StatusChip/StatusChip.tsx
@@ -1,6 +1,5 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import { OsdsChip, OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { ODS_SPINNER_SIZE, ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
+import { OdsBadge, OdsSpinner } from '@ovhcloud/ods-components/react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SavingsPlanStatus } from '@/types/api.type';
@@ -8,19 +7,20 @@ import { SavingsPlanStatus } from '@/types/api.type';
const StatusChip = ({ label }: { label: string }) => {
const { t } = useTranslation('listing');
const colorByProductStatus: {
- [key in SavingsPlanStatus]: ODS_THEME_COLOR_INTENT;
+ [key in SavingsPlanStatus]: ODS_BADGE_COLOR;
} = {
- [SavingsPlanStatus.ACTIVE]: ODS_THEME_COLOR_INTENT.success,
- [SavingsPlanStatus.PENDING]: ODS_THEME_COLOR_INTENT.warning,
- [SavingsPlanStatus.TERMINATED]: ODS_THEME_COLOR_INTENT.error,
+ [SavingsPlanStatus.ACTIVE]: ODS_BADGE_COLOR.success,
+ [SavingsPlanStatus.PENDING]: ODS_BADGE_COLOR.warning,
+ [SavingsPlanStatus.TERMINATED]: ODS_BADGE_COLOR.critical,
};
return label ? (
-
- {t(label.toLowerCase() as SavingsPlanStatus)}
-
+
-
+
-
-
+
+
);
}
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Table/TableContainer.tsx b/packages/manager/apps/pci-savings-plan/src/components/Table/TableContainer.tsx
index 0305f5a13eec..cb71d43db672 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/Table/TableContainer.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/Table/TableContainer.tsx
@@ -1,11 +1,6 @@
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import {
- useLocation,
- useNavigate,
- useParams,
- useSearchParams,
-} from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ShellContext } from '@ovh-ux/manager-react-shell-client';
import {
diff --git a/packages/manager/apps/pci-savings-plan/src/components/TileTechnicalInfo/TileTechnicalInfo.tsx b/packages/manager/apps/pci-savings-plan/src/components/TileTechnicalInfo/TileTechnicalInfo.tsx
index a70fb32f9ff8..00e402827141 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/TileTechnicalInfo/TileTechnicalInfo.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/TileTechnicalInfo/TileTechnicalInfo.tsx
@@ -1,10 +1,5 @@
import React from 'react';
-import {
- ODS_THEME_COLOR_HUE,
- ODS_THEME_COLOR_INTENT,
- ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
import { useTranslation } from 'react-i18next';
import SimpleTile from '../SimpleTile/SimpleTile';
import { formatTechnicalInfo } from '@/utils/formatter/formatter';
@@ -18,30 +13,27 @@ const DisplayTechnicalInfo = ({
const { memory, cpu, storage, bandwidth } = technical;
return (
<>
-
+
{t('resource_model_characteristics_gb', {
value: memory.size,
})}
-
-
+
+
{t('resource_model_characteristics_cpu', {
cores: cpu.cores,
ghz: cpu.frequency,
})}
-
-
+
+
{t('resource_model_characteristics_disk', {
value: storage.disks[0].capacity,
})}
-
-
+
+
{t('resource_model_characteristics_mbits', {
value: bandwidth.level,
})}
-
+
);
};
@@ -61,14 +53,9 @@ export const TileTechnicalInfo: React.FC = ({
}) => (
+
+ {tabsList.map((tab) => (
+ setInstanceCategory(tab.technicalName)}
+ >
+ {tab.label}
+
+ ))}
+
)}
+
{t('select_quantity')}
-
+
{t('select_quantity_description')}
-
-
- {t('quantity_label')}
-
-
- setQuantity(quantity - 1)}
- onPlusClick={() => {
- if (quantity < MAX_QUANTITY) {
- setQuantity(quantity + 1);
- }
- }}
- onChangeQuantity={onChangeQuantity}
- />
-
-
-
-
+
+ {t('quantity_label')}
+
+
+
{t(
isInstance
? 'quantity_banner_instance'
: 'quantity_banner_rancher',
)}
{isInstance && (
-
- {t('quantity_banner_instance_link')}
-
+ target="_blank"
+ icon={ODS_ICON_NAME.externalLink}
+ label={t('quantity_banner_instance_link')}
+ />
)}
-
-
+
+
{t('select_commitment')}
@@ -403,77 +399,54 @@ const CreatePlanForm: FC = ({
);
})
) : (
-
{t('choose_name')}
- ,
- ) => setPlanName(e.target.value as string)}
+ onOdsChange={(e) => setPlanName(e.target.value as string)}
/>
- {t('input_name_rules')}
+
-
- setIsLegalChecked(!isLegalChecked)}
- hasFocus={true}
- >
-
- {t('legal_checkbox')}
-
-
-
- setIsLegalChecked(!isLegalChecked)}
+ />
+
+
-
);
@@ -486,7 +459,11 @@ export const CreatePlanFormContainer = ({
}: {
isDiscoveryProject: boolean;
}) => {
- const { t } = useTranslation('create');
+ const { environment } = useContext(ShellContext);
+ const locale = environment.getUserLocale();
+
+ const { t } = useTranslation(['create', 'listing']);
+ const { addSuccess } = useNotifications();
const [instanceCategory, setInstanceCategory] = useState<
InstanceTechnicalName
@@ -515,7 +492,20 @@ export const CreatePlanFormContainer = ({
}
}, [technicalList]);
- const { mutate: onCreatePlan } = useSavingsPlanCreate();
+ const handleCreateSavingsPlanSuccess = useCallback(
+ (data: { startDate: string }) => {
+ addSuccess(
+ t('listing:banner_create_sp', {
+ startDate: toLocalDateUTC(data.startDate, locale),
+ }),
+ );
+ },
+ [addSuccess, t, locale],
+ );
+
+ const { mutate: onCreatePlan } = useSavingsPlanCreate(
+ handleCreateSavingsPlanSuccess,
+ );
const sortedPriceByDuration = [...pricingByDuration].sort(
(a, b) => a.duration - b.duration,
diff --git a/packages/manager/apps/pci-savings-plan/src/components/LegalLinks/LegalLinks.test.tsx b/packages/manager/apps/pci-savings-plan/src/components/LegalLinks/LegalLinks.test.tsx
index 8f429a7ba9ad..b41d6bc55664 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/LegalLinks/LegalLinks.test.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/LegalLinks/LegalLinks.test.tsx
@@ -1,9 +1,8 @@
import '@testing-library/jest-dom';
-import { screen, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
import { HttpResponse, http } from 'msw';
import { setupServer } from 'msw/node';
import React from 'react';
-import { vi } from 'vitest';
import { render } from '@/utils/testProvider';
import LegalLinks from './LegalLinks';
import { SavingsPlanContract } from '@/types';
@@ -24,15 +23,12 @@ const MOCK_CONTRACTS: SavingsPlanContract[] = [
];
const server = setupServer(
- http.get('/engine/apiv6/services?resourceName=undefined', ({ request }) => {
+ http.get('/engine/apiv6/services?resourceName=undefined', () => {
return HttpResponse.json([123]);
}),
- http.get(
- '/engine/apiv6/services/123/savingsPlans/contracts',
- ({ request }) => {
- return HttpResponse.json(MOCK_CONTRACTS);
- },
- ),
+ http.get('/engine/apiv6/services/123/savingsPlans/contracts', () => {
+ return HttpResponse.json(MOCK_CONTRACTS);
+ }),
);
beforeAll(() => server.listen());
@@ -41,11 +37,16 @@ afterAll(() => server.close());
describe('LegalLinks', async () => {
it('renders the legal links correctly', async () => {
- render(
{currentInstanceSelected.technical?.map(({ name, technical }) => (
= ({
))}
) : (
-
+ {t('input_name_rules')}
+
-
+ {
- trackClick({
- location: PageLocation.funnel,
- buttonType: ButtonType.button,
- actionType: 'action',
- actions: [`add_savings_plan::cancell`],
- });
- navigate('..');
- }}
- >
- {t('cta_cancel')}
-
- navigate('..')}
+ />
+
+
- {t('cta_plan')}
-
+ />
-
);
}
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Modal/RenewModal.tsx b/packages/manager/apps/pci-savings-plan/src/components/Modal/RenewModal.tsx
index 4dc4e3338c75..0cb4333dc292 100644
--- a/packages/manager/apps/pci-savings-plan/src/components/Modal/RenewModal.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/components/Modal/RenewModal.tsx
@@ -1,15 +1,6 @@
import React from 'react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import {
- ODS_BUTTON_VARIANT,
- ODS_TEXT_LEVEL,
- ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import {
- OsdsButton,
- OsdsModal,
- OsdsText,
-} from '@ovhcloud/ods-components/react';
+import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { OdsButton, OdsModal, OdsText } from '@ovhcloud/ods-components/react';
import { useTranslation } from 'react-i18next';
import { SavingsPlanPlanedChangeStatus } from '@/types/api.type';
@@ -26,43 +17,30 @@ export default function RenewModal({
}: Readonly
-
- {t(
- periodEndAction === SavingsPlanPlanedChangeStatus.REACTIVATE
- ? 'message_deactivate'
- : 'message_activate',
- )}
-
-
-
+
+ {t(isReactivate ? 'message_deactivate' : 'message_activate')}
+
+
+
+
+
+
-
- {t('edit')}
-
-
-
-
- {status !== SavingsPlanStatus.TERMINATED && (
-
-
-
-
- {periodEndAction === SavingsPlanPlanedChangeStatus.TERMINATE
- ? t('enableAutoRenew')
- : t('disableAutoRenew')}
-
-
-
-
- )}
+ />
+ )}
-
-
-
- {t(isInstance ? 'order_instance' : 'order_rancher')}
-
-
-
-
+ />
+
+
);
};
@@ -135,24 +116,18 @@ export default function ActionsCell({
const onClickEdit = useCallback(() => onClickEditName(id), [id]);
return (
-
+
-
- {name}
-
+
+ {name}
+
{technical && technical.bandwidth && (
+ <>
{currentPlan ? (
navigate({ pathname: '..', search: searchParams.toString() })
}
defaultValue={currentPlan?.displayName || ''}
updateDisplayName={(displayName) => {
- editName({
- displayName,
+ startTransition(() => {
+ editName({
+ displayName,
+ });
+ navigate({ pathname: '..', search: searchParams.toString() });
});
- navigate({ pathname: '..', search: searchParams.toString() });
}}
- headline={t('title')}
+ headline={t('edit-name:title')}
pattern={REGEX}
- description={t('description')}
- patternMessage={tCreate('input_name_rules')}
+ description={t('edit-name:description')}
+ patternMessage={t('create:input_name_rules')}
/>
) : (
<>
)}
+
+ );
+};
+const EditNamePage = () => {
+ return (
+
+
);
};
diff --git a/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx b/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx
index e51adaeccf5f..95b213965870 100644
--- a/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx
@@ -1,38 +1,32 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
-import { Outlet, useHref, useNavigate, useParams } from 'react-router-dom';
-import { MutationStatus, useMutationState } from '@tanstack/react-query';
+import { Outlet, useNavigate, useParams } from 'react-router-dom';
+
+import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import {
- ODS_BUTTON_SIZE,
- ODS_BUTTON_VARIANT,
- ODS_ICON_NAME,
- ODS_ICON_SIZE,
- ODS_MESSAGE_TYPE,
-} from '@ovhcloud/ods-components';
import {
- OsdsButton,
- OsdsIcon,
- OsdsMessage,
- OsdsText,
-} from '@ovhcloud/ods-components/react';
-import { Title } from '@ovh-ux/manager-react-components';
+ Notifications,
+ Title,
+ useNotifications,
+} from '@ovh-ux/manager-react-components';
import {
ButtonType,
PageLocation,
useOvhTracking,
- ShellContext,
} from '@ovh-ux/manager-react-shell-client';
import TableContainer from '@/components/Table/TableContainer';
-import {
- getMutationKeyCreateSavingsPlan,
- useSavingsPlan,
- useServiceId,
-} from '@/hooks/useSavingsPlan';
+import { useSavingsPlan } from '@/hooks/useSavingsPlan';
import { SavingsPlanService } from '@/types';
-import { toLocalDateUTC } from '@/utils/formatter/date';
+
+interface ListingTablePageProps {
+ data: SavingsPlanService[];
+ refetchSavingsPlans: () => void;
+}
+interface ListingProps {
+ refetchSavingsPlans: () => void;
+}
export const formatDateString = (dateString: string, locale?: string) => {
const date = new Date(dateString);
@@ -47,151 +41,48 @@ export const formatDateString = (dateString: string, locale?: string) => {
: '-';
};
-const Banner = ({ message }: { message: string }) => {
- const [showBanner, setShowBanner] = useState(true);
-
- useEffect(() => {
- if (message) {
- setShowBanner(true);
- }
- }, [message]);
- return (
- showBanner && (
- setShowBanner(false)}
- >
-
- {message}
-
-
- )
- );
-};
-
-export interface ListingProps {
- data: SavingsPlanService[];
- refetchSavingsPlans: () => void;
-}
-
-type MutationInfo = {
- submittedAt: number;
- error?: {
- code: string;
- };
- status: MutationStatus;
- data?: Data;
-};
-
-const getMutationFilters = (filters: (string | number)[]) => ({
+export const getMutationFilters = (filters: (string | number)[]) => ({
filters: { mutationKey: filters },
});
-const ListingTablePage: React.FC = ({
+const ListingTablePage: React.FC = ({
data,
refetchSavingsPlans,
}) => {
const { t } = useTranslation('listing');
- const { environment } = useContext(ShellContext);
- const locale = environment.getUserLocale();
const { trackClick } = useOvhTracking();
- const hrefDashboard = useHref('');
- const serviceId = useServiceId();
- const mutationSPChangePeriod = useMutationState<
- MutationInfo & {
- variables: {
- periodEndAction: 'REACTIVATE' | 'ACTIVATE';
- };
- }
- >(getMutationFilters(['savings-plan', serviceId, 'change-period']));
-
- const mutationSPEditName = useMutationState(
- getMutationFilters(['savings-plan', serviceId, 'edit-name']),
- );
-
- const mutationSpCreate = useMutationState>(
- getMutationFilters(getMutationKeyCreateSavingsPlan(serviceId)),
- );
-
- const lastMutationEditName =
- mutationSPEditName[mutationSPEditName.length - 1];
- const lastMutationChangePeriod =
- mutationSPChangePeriod[mutationSPChangePeriod.length - 1];
- const lastMutationSpCreate = mutationSpCreate[mutationSpCreate.length - 1];
-
- const renewBannerMessage = t(
- lastMutationChangePeriod?.variables.periodEndAction === 'REACTIVATE'
- ? 'banner_renew_activate'
- : 'banner_renew_deactivate',
- {
- planName: lastMutationChangePeriod?.data?.displayName,
- endDate: lastMutationChangePeriod?.data?.endDate,
- },
- );
+ const navigate = useNavigate();
+ const { projectId } = useParams();
+ const { clearNotifications } = useNotifications();
+
+ const handleClick = () => {
+ trackClick({
+ location: PageLocation.page,
+ buttonType: ButtonType.button,
+ actionType: 'navigation',
+ actions: ['add_savings_plan'],
+ });
+ clearNotifications();
+ navigate(`/pci/projects/${projectId}/savings-plan/new`);
+ };
return (
<>
{t('title')}
+
{t('informationMessage')}
-
- {mutationSPChangePeriod.length > 0 && (
- = {
+ submittedAt: number;
+ error?: {
+ code: string;
+ };
+ status: MutationStatus;
+ data?: T;
+};
+
+export type UseSavingsPlanParams = {
+ savingsPlanId: string;
+ onSuccess?: () => void;
+};
diff --git a/packages/manager/apps/pci-savings-plan/vitest.config.js b/packages/manager/apps/pci-savings-plan/vitest.config.js
index c8a1ca9993bb..0b1799e6e234 100644
--- a/packages/manager/apps/pci-savings-plan/vitest.config.js
+++ b/packages/manager/apps/pci-savings-plan/vitest.config.js
@@ -6,6 +6,11 @@ import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
test: {
+ server: {
+ deps: {
+ inline: ['clsx'],
+ },
+ },
globals: true,
environment: 'jsdom',
coverage: {
diff --git a/yarn.lock b/yarn.lock
index 017b6bf43ab0..a1b7e6b64732 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5792,6 +5792,17 @@
date-fns "^3.6.0"
lodash.isequal "^4.5.0"
+"@ovh-ux/manager-pci-common@^1.0.4":
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/@ovh-ux/manager-pci-common/-/manager-pci-common-1.0.4.tgz#9fb79f247208a350d9de6f70178677ee00432ad3"
+ integrity sha512-QKItmyT2Uu4Gpq6RbGm+vsTcN7eSZamvLTswdfkNFH3YHHTx47a1PofCjgsUXlBZ+YD7H0bZl3CVBexGY7T8iw==
+ dependencies:
+ "@ovh-ux/manager-core-utils" "^0.3.0"
+ "@ovh-ux/manager-tailwind-config" "^0.2.1"
+ clsx "2.1.1"
+ date-fns "^3.6.0"
+ lodash.isequal "^4.5.0"
+
"@ovh-ux/manager-react-components@^1.41.1", "@ovh-ux/manager-react-components@^1.41.2":
version "1.41.2"
resolved "https://registry.yarnpkg.com/@ovh-ux/manager-react-components/-/manager-react-components-1.41.2.tgz#087cacbbff37c594201851f5f27d2a0c524545b5"
- {
- trackClick({
- location: PageLocation.page,
- buttonType: ButtonType.button,
- actionType: 'navigation',
- actions: ['add_savings_plan'],
- });
- }}
- >
-
-
+ variant={ODS_BUTTON_VARIANT.outline}
+ onClick={handleClick}
+ label={t('createSavingsPlan')}
+ />
-