fix: [M3-7747] - Fix Linode Migration dialog hidden $0 price

packages/manager/.changeset/pr-10166-fixed-1707414781493.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Display $0.00 prices in Linode Migration dialog ([#10166](https://github.com/linode/manager/pull/10166))

packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.test.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { MigrationPricing } from './MigrationPricing';
+
+const backupPricesNull = {
+  monthly: null,
+  hourly: null,
+};
+
+const backupPricesZero = {
+  monthly: 0,
+  hourly: 0,
+};
+
+const backupPricesRegular = {
+  hourly: 0.004,
+  monthly: 2.5,
+};
+
+describe('MigrationPricing component', () => {
+  describe('render condition', () => {
+    it('does not render when prices are not specified', async () => {
+      // Some combinations of props that should prevent component rendering.
+      const propCombinations = [
+        { backups: 'disabled' as const, hourly: undefined, monthly: 0 },
+        { backups: backupPricesNull, hourly: null, monthly: 0.1 },
+        { backups: backupPricesRegular, hourly: null, monthly: null },
+        { backups: backupPricesZero, hourly: undefined, monthly: 1 },
+        { backups: undefined, hourly: 0, monthly: 0 },
+        { backups: undefined, hourly: 1, monthly: undefined },
+        { backups: undefined, hourly: null, monthly: null },
+      ];
+
+      propCombinations.forEach((props) => {
+        const { queryByTestId, unmount } = renderWithTheme(
+          <MigrationPricing panelType="current" {...props} />
+        );
+        expect(queryByTestId('migration-pricing')).toBeNull();
+        unmount();
+      });
+    });
+
+    it('renders when prices are specified', async () => {
+      const props = {
+        backups: 'disabled' as const,
+        hourly: 0.004,
+        monthly: 2.5,
+      };
+
+      const { findByTestId } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(await findByTestId('migration-pricing')).not.toBeNull();
+    });
+
+    it('renders when $0 prices are specified', async () => {
+      const props = {
+        backups: 'disabled' as const,
+        hourly: 0,
+        monthly: 0,
+      };
+
+      const { findByTestId } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(await findByTestId('migration-pricing')).not.toBeNull();
+    });
+  });
+
+  describe('price display', () => {
+    it('displays prices', async () => {
+      const props = {
+        backups: 'disabled' as const,
+        hourly: 0.004,
+        monthly: 2.5,
+      };
+
+      const { findByText } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(await findByText('$0.004')).toBeVisible();
+      expect(await findByText('$2.50')).toBeVisible();
+    });
+
+    it('displays $0 prices', async () => {
+      const props = {
+        backups: 'disabled' as const,
+        hourly: 0,
+        monthly: 0,
+      };
+
+      const { findByText } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(await findByText('$0.000')).toBeVisible();
+      expect(await findByText('$0.00')).toBeVisible();
+    });
+  });
+
+  describe('backup price display', () => {
+    it('shows backup prices', async () => {
+      const props = {
+        backups: backupPricesRegular,
+        hourly: 0.001,
+        monthly: 1.5,
+      };
+
+      const { findByText } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(await findByText('| Backups', { exact: false })).toBeVisible();
+      expect(await findByText('$2.50')).toBeVisible();
+    });
+
+    it('shows $0 backup prices', async () => {
+      const props = {
+        backups: backupPricesZero,
+        hourly: 0.001,
+        monthly: 1.5,
+      };
+
+      const { findByText } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(await findByText('| Backups', { exact: false })).toBeVisible();
+      expect(await findByText('$0.00')).toBeVisible();
+    });
+
+    it('hides backup prices when backups are disabled', () => {
+      const props = {
+        backups: 'disabled' as const,
+        hourly: 0.001,
+        monthly: 1.5,
+      };
+
+      const { queryByText } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(queryByText('| Backups', { exact: false })).toBeNull();
+    });
+
+    it('hides backup prices when backups are undefined', () => {
+      const props = {
+        backups: undefined,
+        hourly: 0.001,
+        monthly: 1.5,
+      };
+
+      const { queryByText } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(queryByText('| Backups', { exact: false })).toBeNull();
+    });
+
+    it('hides backup prices when backup prices are null', () => {
+      const props = {
+        backups: backupPricesNull,
+        hourly: 0.001,
+        monthly: 1.5,
+      };
+
+      const { queryByText } = renderWithTheme(
+        <MigrationPricing panelType="current" {...props} />
+      );
+      expect(queryByText('| Backups', { exact: false })).toBeNull();
+    });
+  });
+});

packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx

@@ -1,6 +1,7 @@
 import { PriceObject } from '@linode/api-v4';
 import { styled } from '@mui/material/styles';
 import { useTheme } from '@mui/material';
+import { isNumber } from 'lodash';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -24,8 +25,17 @@ export const MigrationPricing = (props: MigrationPricingProps) => {
   const theme = useTheme();
   const priceFontSize = `${theme.typography.body1.fontSize}`;
 
-  return monthly && hourly && backups ? (
-    <StyledMigrationPricingContainer panelType={panelType}>
+  const shouldShowPrice =
+    isNumber(monthly) && isNumber(hourly) && backups !== undefined;
+
+  const shouldShowBackupsPrice =
+    backups && backups !== 'disabled' && backups.monthly !== null;
+
+  return shouldShowPrice ? (
+    <StyledMigrationPricingContainer
+      panelType={panelType}
+      data-testid="migration-pricing"
+    >
       <StyledSpan>{currentPanel ? 'Current' : 'New'} Price</StyledSpan>
       <Box
         alignItems="baseline"
@@ -44,7 +54,7 @@ export const MigrationPricing = (props: MigrationPricingProps) => {
           interval="hour"
           price={hourly}
         />
-        {backups !== 'disabled' && backups?.monthly && (
+        {shouldShowBackupsPrice && (
           <>
             &nbsp;
             <Typography fontFamily={theme.font.bold} fontSize={priceFontSize}>
@@ -53,7 +63,7 @@ export const MigrationPricing = (props: MigrationPricingProps) => {
             <DisplayPrice
               fontSize={priceFontSize}
               interval="month"
-              price={backups.monthly}
+              price={backups.monthly ?? '--.--'}
             />
           </>
         )}