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/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,18 @@ 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 +103,7 @@ export function Price({
           price={priceWithoutTax}
           label={t('price_gst_excl_label')}
           intervalUnitText={intervalUnitText}
+          suffix={suffix}
         />
       ),
     },
@@ -104,6 +115,7 @@ export function Price({
             price={priceWithoutTax}
             label={t('price_gst_excl_label')}
             intervalUnitText={intervalUnitText}
+            suffix={suffix}
           />
           <PriceText
             price={priceWithTax}
@@ -115,7 +127,12 @@ export function Price({
     },
     {
       condition: isUSFormat,
-      component: <PriceText price={priceWithoutTax} intervalUnitText={intervalUnitText} />,
+      component: (
+      <PriceText
+        price={priceWithoutTax}
+        intervalUnitText={intervalUnitText}
+        suffix={suffix}
+      />),
     },
   ];
 
@@ -124,7 +141,11 @@ 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",