diff --git a/packages/manager-ui-kit/src/components/filters/filter-add/__tests__/FilterAdd.snapshot.spec.tsx b/packages/manager-ui-kit/src/components/filters/filter-add/__tests__/FilterAdd.snapshot.spec.tsx index c0ccd828751f..d825173c14f4 100644 --- a/packages/manager-ui-kit/src/components/filters/filter-add/__tests__/FilterAdd.snapshot.spec.tsx +++ b/packages/manager-ui-kit/src/components/filters/filter-add/__tests__/FilterAdd.snapshot.spec.tsx @@ -1,5 +1,5 @@ import { act } from '@testing-library/react'; -import { beforeEach, vi } from 'vitest'; +import { afterEach, beforeEach, vi } from 'vitest'; import { cleanup, render } from '@/setupTest'; @@ -30,9 +30,11 @@ describe('FilterAdd Snapshot Tests', () => { isLoading: false, isFetched: true, }); + vi.useFakeTimers(); }); afterEach(async () => { + vi.useRealTimers(); // Wait for all pending async operations and state updates await act(async () => { await new Promise((resolve) => setTimeout(resolve, 100)); @@ -69,6 +71,7 @@ describe('FilterAdd Snapshot Tests', () => { }); it('should match snapshot with date filter type', () => { + vi.setSystemTime(new Date(2025, 9, 23, 13)); const props = { columns: [ { diff --git a/packages/manager-ui-kit/src/components/price/Price.component.tsx b/packages/manager-ui-kit/src/components/price/Price.component.tsx index ed80e203a9a6..f862f2e8af6a 100644 --- a/packages/manager-ui-kit/src/components/price/Price.component.tsx +++ b/packages/manager-ui-kit/src/components/price/Price.component.tsx @@ -25,6 +25,9 @@ export function Price({ ovhSubsidiary, locale, isConvertIntervalUnit, + isStartingPrice, + suffix = '', + freePriceLabel, }: Readonly) { const { t } = useTranslation('price'); @@ -53,7 +56,7 @@ export function Price({ const components = [ { condition: value === 0, - component: {t('price_free')}, + component: {freePriceLabel ?? t('price_free')}, }, { condition: isFrenchFormat && tax > 0, @@ -63,6 +66,7 @@ export function Price({ price={priceWithoutTax} label={t('price_ht_label')} intervalUnitText={intervalUnitText} + suffix={suffix} /> ), }, { condition: isGermanFormat && tax > 0, - component: , + component: ( + + ), }, { condition: isAsiaFormat && (!tax || tax === 0), @@ -93,6 +100,7 @@ export function Price({ price={priceWithoutTax} label={t('price_gst_excl_label')} intervalUnitText={intervalUnitText} + suffix={suffix} /> ), }, @@ -104,6 +112,7 @@ export function Price({ price={priceWithoutTax} label={t('price_gst_excl_label')} intervalUnitText={intervalUnitText} + suffix={suffix} /> , + component: ( + + ), }, ]; @@ -124,7 +135,12 @@ export function Price({ return null; } - return {matchingComponent.component}; + return ( + + {isStartingPrice && value > 0 ? t('price_from_label') : ''} + {matchingComponent.component} + + ); } export default Price; diff --git a/packages/manager-ui-kit/src/components/price/Price.props.ts b/packages/manager-ui-kit/src/components/price/Price.props.ts index 8cd6b3f32c1b..d577480d8bff 100644 --- a/packages/manager-ui-kit/src/components/price/Price.props.ts +++ b/packages/manager-ui-kit/src/components/price/Price.props.ts @@ -13,4 +13,10 @@ export type PriceProps = { isConvertIntervalUnit?: boolean; /** The locale for price formatting */ locale: string; + /** The suffix for price formatting */ + suffix?: string; + /** states if the price should be displayed as a starting price */ + isStartingPrice?: boolean; + /** the label to display when the price is free */ + freePriceLabel?: string; }; diff --git a/packages/manager-ui-kit/src/components/price/price-text/PriceText.component.tsx b/packages/manager-ui-kit/src/components/price/price-text/PriceText.component.tsx index a7888e675d8c..80d9f28e11cc 100644 --- a/packages/manager-ui-kit/src/components/price/price-text/PriceText.component.tsx +++ b/packages/manager-ui-kit/src/components/price/price-text/PriceText.component.tsx @@ -11,6 +11,7 @@ export const PriceText: React.FC = ({ price, intervalUnitText, label, + suffix, }) => ( = ({ {intervalUnitText} )} + {suffix && ( + + {suffix} + + )} {preset === PriceTextPreset.WITH_TAX && ')'} ); diff --git a/packages/manager-ui-kit/src/components/price/price-text/PriceText.props.ts b/packages/manager-ui-kit/src/components/price/price-text/PriceText.props.ts index 02297e0500cd..a99f13e053ce 100644 --- a/packages/manager-ui-kit/src/components/price/price-text/PriceText.props.ts +++ b/packages/manager-ui-kit/src/components/price/price-text/PriceText.props.ts @@ -8,4 +8,5 @@ export type PriceTextProps = { price: string; label?: string; intervalUnitText?: string; + suffix?: string; }; diff --git a/packages/manager-ui-kit/src/components/price/translations/Messages_fr_FR.json b/packages/manager-ui-kit/src/components/price/translations/Messages_fr_FR.json index 9900052fa486..ce894ba22570 100644 --- a/packages/manager-ui-kit/src/components/price/translations/Messages_fr_FR.json +++ b/packages/manager-ui-kit/src/components/price/translations/Messages_fr_FR.json @@ -1,6 +1,7 @@ { "price_ht_label": "HT", "price_ttc_label": "TTC", + "price_from_label": "à partir de ", "price_free": "Inclus", "price_gst_excl_label": "ex. GST", "price_gst_incl_label": "incl. GST",