fix: [M3-8553] - DisplayPrice story crash when Currency component's minimumFractionDigits is negative

packages/manager/.changeset/pr-10913-fixed-1725955539025.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+DisplayPrice story crash when Currency component's minimumFractionDigits is negative ([#10913](https://github.com/linode/manager/pull/10913))

packages/manager/src/components/Currency/Currency.test.tsx

@@ -8,69 +8,79 @@ import { Currency } from './Currency';
 describe('Currency Component', () => {
   it('displays a given quantity in USD', () => {
     const { getByText, rerender } = renderWithTheme(<Currency quantity={5} />);
-    getByText('$5.00');
+    expect(getByText('$5.00')).toBeVisible();
     rerender(<Currency quantity={99.99} />);
-    getByText('$99.99');
+    expect(getByText('$99.99')).toBeVisible();
     rerender(<Currency quantity={0} />);
-    getByText('$0.00');
+    expect(getByText('$0.00')).toBeVisible();
   });
 
   it('handles negative quantities', () => {
     const { getByText, rerender } = renderWithTheme(<Currency quantity={-5} />);
-    getByText('-$5.00');
+    expect(getByText('-$5.00')).toBeVisible();
     rerender(<Currency quantity={-99.99} />);
-    getByText('-$99.99');
+    expect(getByText('-$99.99')).toBeVisible();
     rerender(<Currency quantity={-0.01} />);
-    getByText('-$0.01');
+    expect(getByText('-$0.01')).toBeVisible();
   });
 
   it('wraps in parentheses', () => {
     const { getByText, rerender } = renderWithTheme(
       <Currency quantity={5} wrapInParentheses />
     );
-    getByText('($5.00)');
+    expect(getByText('($5.00)')).toBeVisible();
     rerender(<Currency quantity={-5} wrapInParentheses />);
-    getByText('-($5.00)');
+    expect(getByText('-($5.00)')).toBeVisible();
     rerender(<Currency quantity={0} wrapInParentheses />);
-    getByText('($0.00)');
+    expect(getByText('($0.00)')).toBeVisible();
   });
 
   it('handles custom number of decimal places', () => {
     const { getByText, rerender } = renderWithTheme(
       <Currency decimalPlaces={3} quantity={5} />
     );
-    getByText('$5.000');
+    expect(getByText('$5.000')).toBeVisible();
     rerender(<Currency decimalPlaces={3} quantity={99.999} />);
-    getByText('$99.999');
+    expect(getByText('$99.999')).toBeVisible();
     rerender(<Currency decimalPlaces={3} quantity={-5} />);
-    getByText('-$5.000');
+    expect(getByText('-$5.000')).toBeVisible();
   });
 
   it('handles custom default values', () => {
     const { getByText } = renderWithTheme(
       <Currency quantity={UNKNOWN_PRICE} />
     );
-    getByText(`$${UNKNOWN_PRICE}`);
+    expect(getByText(`$${UNKNOWN_PRICE}`)).toBeVisible();
   });
 
   it('groups by comma', () => {
     const { getByText, rerender } = renderWithTheme(
       <Currency quantity={1000} />
     );
-    getByText('$1,000.00');
+    expect(getByText('$1,000.00')).toBeVisible();
     rerender(<Currency quantity={100000} />);
-    getByText('$100,000.00');
+    expect(getByText('$100,000.00')).toBeVisible();
   });
 
   it('displays --.-- when passed in as a quantity', () => {
     const { getByText } = renderWithTheme(<Currency quantity={'--.--'} />);
-    getByText('$--.--');
+    expect(getByText('$--.--')).toBeVisible();
   });
 
   it('applies the passed in data attributes', () => {
     const { getByTestId } = renderWithTheme(
       <Currency dataAttrs={{ 'data-testid': 'currency-test' }} quantity={3} />
     );
-    getByTestId('currency-test');
+    expect(getByTestId('currency-test')).toBeInTheDocument();
+  });
+
+  it('should display price with default 2 decimal places if decimalPlaces is negative or undefined', () => {
+    const { getByText, rerender } = renderWithTheme(
+      <Currency decimalPlaces={-1} quantity={99} />
+    );
+    expect(getByText('$99.00')).toBeVisible();
+
+    rerender(<Currency quantity={99} />);
+    expect(getByText('$99.00')).toBeVisible();
   });
 });

packages/manager/src/components/Currency/Currency.tsx

@@ -22,11 +22,15 @@ interface CurrencyFormatterProps {
 }
 
 export const Currency = (props: CurrencyFormatterProps) => {
-  const { dataAttrs, quantity, wrapInParentheses } = props;
+  const { dataAttrs, decimalPlaces, quantity, wrapInParentheses } = props;
+
+  // Use the default value (2) when decimalPlaces is negative or undefined.
+  const minimumFractionDigits =
+    decimalPlaces !== undefined && decimalPlaces >= 0 ? decimalPlaces : 2;
 
   const formatter = new Intl.NumberFormat('en-US', {
     currency: 'USD',
-    minimumFractionDigits: props.decimalPlaces ?? 2,
+    minimumFractionDigits,
     style: 'currency',
   });