From fa08946689107db695ca3fdfb4d2a2ce8a84310b Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 6 Mar 2025 21:45:44 +0100
Subject: [PATCH] :label: [#445] Convert Price component to TS

And immediately there is a type issue where strings are passed down
to FormattedNumber, which is invalid.
---
 src/components/{Price.jsx => Price.tsx} | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)
 rename src/components/{Price.jsx => Price.tsx} (70%)

diff --git a/src/components/Price.jsx b/src/components/Price.tsx
similarity index 70%
rename from src/components/Price.jsx
rename to src/components/Price.tsx
index 2832c2591..9c01a6b2a 100644
--- a/src/components/Price.jsx
+++ b/src/components/Price.tsx
@@ -1,9 +1,12 @@
-import PropTypes from 'prop-types';
 import {FormattedMessage, FormattedNumber} from 'react-intl';
 
 import {getBEMClassName} from 'utils';
 
-const Price = ({price = ''}) => {
+export interface PriceProps {
+  price?: string | number; // the API serializes decimals to strings to not lose precision
+}
+
+const Price: React.FC<PriceProps> = ({price = '0'}) => {
   return (
     <div className={getBEMClassName('price')}>
       <div className={getBEMClassName('price__label')}>
@@ -11,7 +14,7 @@ const Price = ({price = ''}) => {
       </div>
       <div className={getBEMClassName('price__amount')}>
         <FormattedNumber
-          value={price}
+          value={typeof price === 'number' ? price : parseFloat(price)}
           style="currency"
           currency="EUR"
           minimumFractionDigits={2}
@@ -22,8 +25,4 @@ const Price = ({price = ''}) => {
   );
 };
 
-Price.propTypes = {
-  price: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
-
 export default Price;