feat(mrc): updating the price component with the isStartingPrice, suffix and freePriceLabel props

ref: #MANAGER-15320

Signed-off-by: aderghamov <[email protected]>

Author: aderghamov

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: [
         {

packages/manager-ui-kit/src/components/price/Price.component.tsx

@@ -25,6 +25,9 @@ export function Price({
   ovhSubsidiary,
   locale,
   isConvertIntervalUnit,
+  isStartingPrice,
+  suffix = '',
+  freePriceLabel,
 }: Readonly<PriceProps>) {
   const { t } = useTranslation('price');
 
@@ -53,7 +56,7 @@ export function Price({
   const components = [
     {
       condition: value === 0,
-      component: <span>{t('price_free')}</span>,
+      component: <span>{freePriceLabel ?? t('price_free')}</span>,
     },
     {
       condition: isFrenchFormat && tax > 0,
@@ -63,6 +66,7 @@ export function Price({
             price={priceWithoutTax}
             label={t('price_ht_label')}
             intervalUnitText={intervalUnitText}
+            suffix={suffix}
           />
           <PriceText
             price={priceWithTax}
@@ -79,12 +83,15 @@ export function Price({
           price={priceWithoutTax}
           label={t('price_ht_label')}
           intervalUnitText={intervalUnitText}
+          suffix={suffix}
         />
       ),
     },
     {
       condition: isGermanFormat && tax > 0,
-      component: <PriceText price={priceWithTax} intervalUnitText={intervalUnitText} />,
+      component: (
+        <PriceText price={priceWithTax} intervalUnitText={intervalUnitText} suffix={suffix} />
+      ),
     },
     {
       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}
           />
           <PriceText
             price={priceWithTax}
@@ -115,7 +124,9 @@ export function Price({
     },
     {
       condition: isUSFormat,
-      component: <PriceText price={priceWithoutTax} intervalUnitText={intervalUnitText} />,
+      component: (
+        <PriceText price={priceWithoutTax} intervalUnitText={intervalUnitText} suffix={suffix} />
+      ),
     },
   ];
 
@@ -124,7 +135,12 @@ export function Price({
     return null;
   }
 
-  return <Text>{matchingComponent.component}</Text>;
+  return (
+    <Text>
+      {isStartingPrice && value > 0 ? t('price_from_label') : ''}
+      {matchingComponent.component}
+    </Text>
+  );
 }
 
 export default Price;

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;
 };

packages/manager-ui-kit/src/components/price/price-text/PriceText.component.tsx

@@ -11,6 +11,7 @@ export const PriceText: React.FC<PriceTextProps> = ({
   price,
   intervalUnitText,
   label,
+  suffix,
 }) => (
   <Text
     preset={TEXT_PRESET.span}
@@ -35,6 +36,11 @@ export const PriceText: React.FC<PriceTextProps> = ({
         {intervalUnitText}
       </Text>
     )}
+    {suffix && (
+      <Text preset={TEXT_PRESET.span} className="mr-1">
+        {suffix}
+      </Text>
+    )}
     {preset === PriceTextPreset.WITH_TAX && ')'}
   </Text>
 );

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;
 };

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",