feat: [M3-6968] Add DC specific pricing info to migration modal

packages/manager/.changeset/pr-9570-changed-1692743440177.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add DC dynamic pricing information for Linode migration flow ([#9570](https://github.com/linode/manager/pull/9570))

packages/manager/src/components/DisplayPrice/DisplayPrice.tsx

@@ -5,6 +5,7 @@ import { Currency } from 'src/components/Currency';
 import { Typography } from 'src/components/Typography';
 
 export interface DisplayPriceProps {
+  decimalPlaces?: number;
   fontSize?: string;
   interval?: string;
   price: number;
@@ -14,7 +15,7 @@ export const displayPrice = (price: number) => `$${price.toFixed(2)}`;
 
 export const DisplayPrice = (props: DisplayPriceProps) => {
   const theme = useTheme<Theme>();
-  const { fontSize, interval, price } = props;
+  const { decimalPlaces, fontSize, interval, price } = props;
 
   const sx: SxProps = {
     color: theme.palette.text.primary,
@@ -25,7 +26,7 @@ export const DisplayPrice = (props: DisplayPriceProps) => {
   return (
     <>
       <Typography sx={sx} variant="h3">
-        <Currency quantity={price} />
+        <Currency decimalPlaces={decimalPlaces} quantity={price} />
       </Typography>
       {interval && (
         <Typography sx={sx} variant="h3">

packages/manager/src/factories/linodes.ts

@@ -127,11 +127,11 @@ export const linodeTransferFactory = Factory.Sync.makeFactory<RegionalNetworkUti
   {
     billable: 0,
     quota: 1950,
-    used: 13956637,
     region_transfers: [
-      { id: 'id-cgk', billable: 0, quota: 10000, used: 10 },
-      { id: 'br-gru', billable: 0, quota: 15000, used: 20 },
+      { billable: 0, id: 'id-cgk', quota: 10000, used: 10 },
+      { billable: 0, id: 'br-gru', quota: 15000, used: 20 },
     ],
+    used: 13956637,
   }
 );
 

packages/manager/src/factories/types.ts

@@ -5,8 +5,8 @@ export const typeFactory = Factory.Sync.makeFactory<LinodeType>({
   addons: {
     backups: {
       price: {
-        hourly: 10,
-        monthly: 10,
+        hourly: 0.004,
+        monthly: 2.5,
       },
       region_prices: [
         {
@@ -30,8 +30,8 @@ export const typeFactory = Factory.Sync.makeFactory<LinodeType>({
   memory: 16384,
   network_out: 10000,
   price: {
-    hourly: 0,
-    monthly: 0,
+    hourly: 0.015,
+    monthly: 10,
   },
   region_prices: [
     {

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

@@ -126,7 +126,7 @@ const StyledRootDiv = styled('div', { label: 'StyledRootDiv' })(
   })
 );
 
-const StyledVolumeUl = styled('div', { label: 'StyledVolumeUl' })(
+const StyledVolumeUl = styled('ul', { label: 'StyledVolumeUl' })(
   ({ theme }) => ({
     '& li': {
       fontFamily: theme.font.bold,

packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.styles.ts

@@ -0,0 +1,55 @@
+import { styled } from '@mui/material/styles';
+
+import { Box } from 'src/components/Box';
+import { Paper } from 'src/components/Paper';
+
+export const StyledPaper = styled(Paper, { label: 'StyledPaper' })(
+  ({ theme }) => ({
+    '& > p:first-of-type': {
+      color: theme.color.label,
+      fontFamily: theme.font.bold,
+      marginBottom: theme.spacing(),
+      marginTop: theme.spacing(2),
+    },
+    marginTop: theme.spacing(4),
+    padding: 0,
+  })
+);
+
+export const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: theme.spacing(),
+  marginBottom: theme.spacing(2),
+}));
+
+export const StyledSpan = styled('span', {
+  label: 'StyledSpan',
+})(({ theme }) => ({
+  color: theme.color.label,
+  display: 'block',
+  fontFamily: theme.font.bold,
+  fontSize: theme.typography.body1.fontSize,
+  lineHeight: '1.43rem',
+  marginBottom: theme.spacing(1),
+  marginTop: theme.spacing(2),
+}));
+
+export const StyledMigrationContainer = styled(Box, {
+  label: 'StyledMigrationContainer',
+})(({ theme }) => ({
+  [theme.breakpoints.up('md')]: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+}));
+
+export const StyledMigrationBox = styled(Box, {
+  label: 'StyledMigrationBox',
+})(({ theme }) => ({
+  [theme.breakpoints.up('md')]: {
+    width: '50%',
+  },
+  width: '100%',
+}));

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

@@ -0,0 +1,157 @@
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { typeFactory } from 'src/factories/types';
+import { renderWithTheme, wrapWithTheme } from 'src/utilities/testHelpers';
+
+import { ConfigureForm } from './ConfigureForm';
+
+// Mock the useFlags hook
+jest.mock('src/hooks/useFlags', () => ({
+  useFlags: () => ({
+    dcSpecificPricing: true, // Mock the flag value
+  }),
+}));
+
+// Mock the useTypeQuery hook
+jest.mock('src/queries/types', () => ({
+  useTypeQuery: () => ({
+    data: typeFactory.build(),
+  }),
+}));
+
+// Mock the useRegionsQuery hook
+jest.mock('src/queries/regions', () => ({
+  useRegionsQuery: () => ({
+    data: [],
+  }),
+}));
+
+describe('ConfigureForm component with price comparison', () => {
+  const handleSelectRegion = jest.fn();
+  const currentPriceLabel = 'Current Price';
+  const newPriceLabel = 'New Price';
+  const currentPricePanel = 'current-price-panel';
+  const newPricePanel = 'new-price-panel';
+
+  const props = {
+    backupEnabled: true,
+    currentRegion: 'us-east',
+    handleSelectRegion,
+    linodeType: 'g6-standard-1',
+    selectedRegion: '',
+  };
+
+  const {
+    getByLabelText,
+    getByTestId,
+    getByText,
+    queryByText,
+  } = renderWithTheme(<ConfigureForm {...props} />);
+
+  interface SelectNewRegionOptions {
+    backupEnabled?: boolean;
+    currentRegionId?: string;
+    selectedRegionId: string;
+  }
+
+  const selectNewRegion = ({
+    backupEnabled = true,
+    currentRegionId = 'us-east',
+    selectedRegionId,
+  }: SelectNewRegionOptions) => {
+    const { rerender } = renderWithTheme(<ConfigureForm {...props} />);
+
+    rerender(
+      wrapWithTheme(
+        <ConfigureForm
+          {...props}
+          backupEnabled={backupEnabled}
+          currentRegion={currentRegionId}
+          selectedRegion={selectedRegionId}
+        />
+      )
+    );
+  };
+
+  it('should render the initial ConfigureForm fields', () => {
+    // Test whether the initial component renders the expected content
+    expect(getByText('Configure Migration')).toBeInTheDocument();
+    expect(getByText('Current Region')).toBeInTheDocument();
+
+    // Verify that the RegionSelect component is rendered
+    const regionSelect = getByLabelText('New Region');
+    expect(regionSelect).toBeInTheDocument();
+
+    // Verify that the MigrationPricing component content is not rendered on page load
+    expect(queryByText(currentPriceLabel)).not.toBeInTheDocument();
+    expect(queryByText(newPriceLabel)).not.toBeInTheDocument();
+  });
+
+  it("shouldn't render the MigrationPricing component when the current region is selected", async () => {
+    selectNewRegion({ selectedRegionId: 'us-east' });
+    await waitFor(() => {
+      expect(queryByText(currentPriceLabel)).not.toBeInTheDocument();
+      expect(queryByText(newPriceLabel)).not.toBeInTheDocument();
+    });
+  });
+
+  it("shouldn't render the MigrationPricing component when a region without price increase is selected", async () => {
+    selectNewRegion({ selectedRegionId: 'us-west' });
+    await waitFor(() => {
+      expect(queryByText(currentPriceLabel)).not.toBeInTheDocument();
+      expect(queryByText(newPriceLabel)).not.toBeInTheDocument();
+    });
+  });
+
+  it('should render the MigrationPricing component when a region with price increase is selected', async () => {
+    selectNewRegion({ selectedRegionId: 'br-gru' });
+    await waitFor(() => {
+      expect(getByTestId(currentPricePanel)).toBeDefined();
+      expect(getByTestId(newPricePanel)).toBeDefined();
+    });
+  });
+
+  it('should render the MigrationPricing component when a region with price decrease is selected', async () => {
+    selectNewRegion({ currentRegionId: 'br-gru', selectedRegionId: 'us-east' });
+    await waitFor(() => {
+      expect(getByTestId(currentPricePanel)).toBeDefined();
+      expect(getByTestId(newPricePanel)).toBeDefined();
+    });
+  });
+
+  it('should provide a proper price comparison', async () => {
+    selectNewRegion({ selectedRegionId: 'br-gru' });
+    expect(getByTestId(currentPricePanel)).toHaveTextContent(
+      '$10.00/month, $0.015/hour | Backups $2.50/month'
+    );
+    expect(getByTestId(newPricePanel)).toHaveTextContent(
+      '$14.00/month, $0.021/hour | Backups $4.17/month'
+    );
+  });
+
+  it("shouldn't render the Backup pricing comparison if backups are disabled", () => {
+    selectNewRegion({ backupEnabled: false, selectedRegionId: 'br-gru' });
+    expect(getByTestId(currentPricePanel)).toHaveTextContent(
+      '$10.00/month, $0.015/hour'
+    );
+    expect(getByTestId(newPricePanel)).toHaveTextContent(
+      '$14.00/month, $0.021/hour'
+    );
+  });
+
+  it("shouldn't render the MigrationPricingComponent if the flag is disabled", () => {
+    jest.isolateModules(async () => {
+      jest.mock('src/hooks/useFlags', () => ({
+        useFlags: () => ({
+          dcSpecificPricing: false,
+        }),
+      }));
+
+      await waitFor(() => {
+        expect(queryByText('Current Price')).not.toBeInTheDocument();
+        expect(queryByText('New Price')).not.toBeInTheDocument();
+      });
+    });
+  });
+});