From 1b0ef7dc774b30b54070f9baebd0f291cde8cb8f Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Thu, 5 Oct 2023 12:04:58 -0400
Subject: [PATCH 1/2] hotfix: [M3-7234] - Disable Tokyo in RegionSelect (#9758)

* Implement fake region and logic

* Bump package

* Cleanup

* File renaming

* Changelog entry

* Changelog entry update

* Improve code quality

* Increase width of volume create fields

* Increase width of volume create fields - mobile

* Consolidate API

* Exclude paths logic
---
 packages/manager/CHANGELOG.md                 |  6 ++
 packages/manager/package.json                 |  2 +-
 .../RegionSelect/RegionSelect.test.tsx        | 19 +++++-
 .../variants/RegionSelect/RegionSelect.tsx    | 51 ++++++++++++++-
 .../variants/RegionSelect/disabledRegions.tsx | 65 +++++++++++++++++++
 .../manager/src/dev-tools/FeatureFlagTool.tsx |  1 +
 packages/manager/src/featureFlags.ts          |  1 +
 .../src/features/Volumes/VolumeCreate.tsx     | 20 ++++--
 8 files changed, 151 insertions(+), 14 deletions(-)
 create mode 100644 packages/manager/src/components/EnhancedSelect/variants/RegionSelect/disabledRegions.tsx

diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
index c4470f444c7..21b794450b4 100644
--- a/packages/manager/CHANGELOG.md
+++ b/packages/manager/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2023-10-02] - v1.104.1
+
+### Fixed:
+
+- Add disabled Tokyo RegionSelect menu entry ([#9758](https://github.com/linode/manager/pull/9758))
+
 ## [2023-10-02] - v1.104.0
 
 ### Added:
diff --git a/packages/manager/package.json b/packages/manager/package.json
index dce0cd4ac97..2705aee58f9 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.104.0",
+  "version": "1.104.1",
   "private": true,
   "bugs": {
     "url": "https://github.com/Linode/manager/issues"
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.test.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.test.tsx
index c06f841388a..eee41ff1732 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.test.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.test.tsx
@@ -3,11 +3,16 @@ import { regions } from 'src/__data__/regionsData';
 import { getRegionOptions, getSelectedRegionById } from './RegionSelect';
 
 const fakeRegion = { ...regions[0], country: 'fake iso code' };
+const flags = {};
 
 describe('Region Select helper functions', () => {
   describe('getRegionOptions', () => {
     it('should return a list of items grouped by continent', () => {
-      const groupedRegions = getRegionOptions(regions);
+      const groupedRegions = getRegionOptions(
+        regions,
+        flags,
+        '/linodes/create'
+      );
       const [r1, r2, r3, r4, r5] = groupedRegions;
       expect(groupedRegions).toHaveLength(8);
       expect(r1.options).toHaveLength(5);
@@ -18,7 +23,11 @@ describe('Region Select helper functions', () => {
     });
 
     it('should group unrecognized regions as Other', () => {
-      const groupedRegions = getRegionOptions([fakeRegion]);
+      const groupedRegions = getRegionOptions(
+        [fakeRegion],
+        flags,
+        '/linodes/create'
+      );
       expect(
         groupedRegions.find((group) => group.label === 'Other')
       ).toBeDefined();
@@ -27,7 +36,11 @@ describe('Region Select helper functions', () => {
 
   describe('getSelectedRegionById', () => {
     it('should return the matching Item from a list of GroupedItems', () => {
-      const groupedRegions = getRegionOptions(regions);
+      const groupedRegions = getRegionOptions(
+        regions,
+        flags,
+        '/linodes/create'
+      );
       const selectedID = regions[1].id;
       expect(getSelectedRegionById(selectedID, groupedRegions)).toHaveProperty(
         'value',
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
index bec5e5cdf55..3e4b50da8b0 100644
--- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx
@@ -1,5 +1,7 @@
+/* eslint-disable perfectionist/sort-objects */
 import { Region } from '@linode/api-v4/lib/regions';
 import * as React from 'react';
+import { useLocation } from 'react-router-dom';
 
 import Select, {
   BaseSelectProps,
@@ -8,11 +10,15 @@ import Select, {
 } from 'src/components/EnhancedSelect/Select';
 import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue';
 import { Flag } from 'src/components/Flag';
+import { useFlags } from 'src/hooks/useFlags';
 import { getRegionCountryGroup } from 'src/utilities/formatRegion';
 
 import { RegionItem, RegionOption } from './RegionOption';
+import { listOfDisabledRegions } from './disabledRegions';
 import { ContinentNames, Country } from './utils';
 
+import type { FlagSet } from 'src/featureFlags';
+
 interface Props<IsClearable extends boolean>
   extends Omit<
     BaseSelectProps<Item<string>, false, IsClearable>,
@@ -33,7 +39,11 @@ export const selectStyles = {
 
 type RegionGroup = 'Other' | ContinentNames;
 
-export const getRegionOptions = (regions: Region[]) => {
+export const getRegionOptions = (
+  regions: Region[],
+  flags: FlagSet,
+  path: string
+) => {
   // Note: Do not re-order this list even though ESLint is complaining.
   const groups: Record<RegionGroup, RegionItem[]> = {
     'North America': [],
@@ -46,11 +56,40 @@ export const getRegionOptions = (regions: Region[]) => {
     Other: [],
   };
 
-  for (const region of regions) {
+  const hasUserAccessToDisabledRegions = listOfDisabledRegions.some(
+    (disabledRegion) =>
+      regions.some((region) => region.id === disabledRegion.fakeRegion.id)
+  );
+  const allRegions = [
+    ...regions,
+    ...listOfDisabledRegions
+      .filter(
+        (disabledRegion) =>
+          // Only display a fake region if the feature flag for it is enabled
+          // We may want to consider modifying this logic if we end up with disabled regions that don't rely on feature flags
+          flags[disabledRegion.featureFlag] &&
+          // Don't display a fake region if it's included in the real /regions response
+          !regions.some(
+            (region) => region.id === disabledRegion.fakeRegion.id
+          ) &&
+          // Don't display a fake region if it's excluded by the current path
+          !disabledRegion.excludePaths?.some((pathToExclude) =>
+            path.includes(pathToExclude)
+          )
+      )
+      .map((disabledRegion) => disabledRegion.fakeRegion),
+  ];
+
+  for (const region of allRegions) {
     const group = getRegionCountryGroup(region);
 
     groups[group].push({
       country: region.country,
+      disabledMessage: hasUserAccessToDisabledRegions
+        ? undefined
+        : listOfDisabledRegions.find(
+            (disabledRegion) => disabledRegion.fakeRegion.id === region.id
+          )?.disabledMessage,
       flag: <Flag country={region.country as Lowercase<Country>} />,
       label: `${region.label} (${region.id})`,
       value: region.id,
@@ -108,6 +147,9 @@ export const RegionSelect = React.memo(
       ...restOfReactSelectProps
     } = props;
 
+    const flags = useFlags();
+    const location = useLocation();
+    const path = location.pathname;
     const onChange = React.useCallback(
       (selection: RegionItem | null) => {
         if (selection === null) {
@@ -124,7 +166,10 @@ export const RegionSelect = React.memo(
       [handleSelection]
     );
 
-    const options = React.useMemo(() => getRegionOptions(regions), [regions]);
+    const options = React.useMemo(
+      () => getRegionOptions(regions, flags, path),
+      [flags, regions]
+    );
 
     return (
       <div style={{ width }}>
diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/disabledRegions.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/disabledRegions.tsx
new file mode 100644
index 00000000000..0b3ec94fe8b
--- /dev/null
+++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/disabledRegions.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import { Typography } from 'src/components/Typography';
+
+import type { Capabilities, Region, RegionStatus } from '@linode/api-v4';
+
+// DATA
+const tokyoDisabledMessage = (
+  <Typography>
+    Tokyo is sold out while we expand our capacity. We recommend deploying
+    workloads in Osaka.{` `}
+    <br />
+    <Link to="https://www.linode.com/blog/linode/tokyo-region-availability-update/">
+      Learn more
+    </Link>
+    .
+  </Typography>
+);
+
+const fakeTokyo: FakeRegion = {
+  capabilities: ['Linodes', 'NodeBalancers'] as Capabilities[],
+  country: 'jp',
+  disabled: true,
+  display: 'Tokyo, JP',
+  id: 'ap-northeast',
+  label: 'Tokyo, JP',
+  resolvers: {
+    ipv4:
+      '173.230.129.5,173.230.136.5,173.230.140.5,66.228.59.5,66.228.62.5,50.116.35.5,50.116.41.5,23.239.18.5',
+    ipv6: '',
+  },
+  status: 'ok' as RegionStatus,
+};
+
+type FakeRegion = Region & { disabled: boolean; display: string };
+
+// UTILS
+interface DisabledRegion {
+  /**
+   * The message to display when the region is disabled.
+   */
+  disabledMessage: JSX.Element;
+  /**
+   * A list of paths that should not display the fake region.
+   */
+  excludePaths?: string[];
+  /**
+   * The fake region to display.
+   */
+  fakeRegion: FakeRegion;
+  /**
+   * The feature flag that controls whether the fake region should be displayed.
+   */
+  featureFlag: string;
+}
+
+export const listOfDisabledRegions: DisabledRegion[] = [
+  {
+    disabledMessage: tokyoDisabledMessage,
+    excludePaths: ['/object-storage/buckets/create'],
+    fakeRegion: fakeTokyo,
+    featureFlag: 'soldOutTokyo',
+  },
+];
diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
index 5fd4a62d9a1..051da63d9fa 100644
--- a/packages/manager/src/dev-tools/FeatureFlagTool.tsx
+++ b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -17,6 +17,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'aglb', label: 'AGLB' },
   { flag: 'dcSpecificPricing', label: 'DC-Specific Pricing' },
   { flag: 'selfServeBetas', label: 'Self Serve Betas' },
+  { flag: 'soldOutTokyo', label: 'Sold Out Tokyo' },
 ];
 
 const FeatureFlagTool: React.FC<{}> = () => {
diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
index b5daae97e18..e0fd102aa0b 100644
--- a/packages/manager/src/featureFlags.ts
+++ b/packages/manager/src/featureFlags.ts
@@ -58,6 +58,7 @@ export interface Flags {
   referralBannerText: ReferralBannerText;
   regionDropdown: boolean;
   selfServeBetas: boolean;
+  soldOutTokyo: boolean;
   taxBanner: TaxBanner;
   taxCollectionBanner: TaxCollectionBanner;
   taxes: Taxes;
diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx
index 015406a7352..7c36cc5dce2 100644
--- a/packages/manager/src/features/Volumes/VolumeCreate.tsx
+++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx
@@ -9,7 +9,9 @@ import { useHistory } from 'react-router-dom';
 
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { LandingHeader } from 'src/components/LandingHeader';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { TextField } from 'src/components/TextField';
@@ -38,8 +40,6 @@ import { maybeCastToNumber } from 'src/utilities/maybeCastToNumber';
 
 import { ConfigSelect } from './VolumeDrawer/ConfigSelect';
 import { SizeField } from './VolumeDrawer/SizeField';
-import { LandingHeader } from 'src/components/LandingHeader';
-import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 
 export const SIZE_FIELD_WIDTH = 160;
 
@@ -86,7 +86,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     lineHeight: '18px',
   },
   select: {
-    width: 320,
+    [theme.breakpoints.down('sm')]: {
+      width: 320,
+    },
+    width: 400,
   },
   size: {
     position: 'relative',
@@ -156,6 +159,7 @@ export const VolumeCreate = () => {
     touched,
     values,
   } = useFormik({
+    initialValues,
     onSubmit: (values, { resetForm, setErrors, setStatus, setSubmitting }) => {
       const { config_id, label, linode_id, region, size } = values;
 
@@ -200,7 +204,6 @@ export const VolumeCreate = () => {
           );
         });
     },
-    initialValues,
     validationSchema: CreateVolumeSchema,
   });
 
@@ -317,7 +320,7 @@ export const VolumeCreate = () => {
                 name="region"
                 onBlur={handleBlur}
                 selectedID={values.region}
-                width={320}
+                width={400}
               />
               {renderSelectTooltip(
                 'Volumes must be created in a region. You can choose to create a Volume in a region and attach it later to a Linode in the same region.'
@@ -349,7 +352,10 @@ export const VolumeCreate = () => {
                           linodeRegion === valuesRegion;
                   }}
                   sx={{
-                    width: '320px',
+                    [theme.breakpoints.down('sm')]: {
+                      width: 320,
+                    },
+                    width: '400px',
                   }}
                   clearable
                   disabled={doesNotHavePermission}
@@ -370,7 +376,7 @@ export const VolumeCreate = () => {
                 onBlur={handleBlur}
                 onChange={(id: number) => setFieldValue('config_id', id)}
                 value={config_id}
-                width={320}
+                width={[theme.breakpoints.down('sm')] ? 320 : 400}
               />
             </Box>
             <Box alignItems="flex-end" display="flex" position="relative">

From d1d726c4acfda3073bf67c817cec8e73c7ae8430 Mon Sep 17 00:00:00 2001
From: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
Date: Thu, 5 Oct 2023 10:14:22 -0700
Subject: [PATCH 2/2] hotfix: DC-specific pricing -- monthly price decimals and
 invoice region column (#9759)

* Hide regions in past invoices

* Display two decimal places for monthly prices in plan selections

* Display two decimal places in lke node pools drawers

* Clean up invoice util

* Update e2es

* Fix typo in test comments

* Use two decimals only if not an int

* Add unit test coverage for util

* Unskip a test I forgot to reenable

* Update changelog

* Fix linting warning
---
 packages/manager/CHANGELOG.md                 |  1 +
 .../e2e/core/billing/billing-invoices.spec.ts | 80 +++++++++++++++----
 .../e2e/core/kubernetes/lke-update.spec.ts    | 44 +++++-----
 .../e2e/core/linodes/create-linode.spec.ts    |  4 +-
 .../support/constants/dc-specific-pricing.ts  |  7 +-
 packages/manager/src/factories/types.ts       |  4 +-
 .../Billing/InvoiceDetail/InvoiceDetail.tsx   | 16 +++-
 .../Billing/InvoiceDetail/InvoiceTable.tsx    | 11 ++-
 .../Billing/PdfGenerator/PdfGenerator.ts      |  2 +
 .../Billing/PdfGenerator/utils.test.ts        | 19 ++++-
 .../features/Billing/PdfGenerator/utils.ts    | 38 ++++++++-
 .../NodePoolsDisplay/AddNodePoolDrawer.tsx    |  5 +-
 .../NodePoolsDisplay/ResizeNodePoolDrawer.tsx | 15 +++-
 .../KubernetesPlanSelection.test.tsx          |  2 +-
 .../KubernetesPlanSelection.tsx               | 10 ++-
 .../Linodes/LinodesCreate/LinodeCreate.tsx    | 10 ++-
 .../MigrateLinode/ConfigureForm.test.tsx      |  4 +-
 .../PlansPanel/PlanSelection.test.tsx         |  2 +-
 .../components/PlansPanel/PlanSelection.tsx   | 10 ++-
 .../src/utilities/pricing/constants.ts        |  3 +
 .../utilities/pricing/dynamicPricing.test.ts  | 23 +++++-
 .../src/utilities/pricing/dynamicPricing.ts   | 12 +++
 22 files changed, 250 insertions(+), 72 deletions(-)

diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
index 21b794450b4..da435083957 100644
--- a/packages/manager/CHANGELOG.md
+++ b/packages/manager/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Fixed:
 
 - Add disabled Tokyo RegionSelect menu entry ([#9758](https://github.com/linode/manager/pull/9758))
+- Display DC-specific monthly prices to two decimal places and hide blank Region column on past invoices ([#9759](https://github.com/linode/manager/pull/9759))
 
 ## [2023-10-02] - v1.104.0
 
diff --git a/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts b/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts
index 3ef131194ed..e84d8746146 100644
--- a/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts
+++ b/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts
@@ -5,6 +5,7 @@
 import type { InvoiceItem, TaxSummary } from '@linode/api-v4';
 import { invoiceFactory, invoiceItemFactory } from '@src/factories';
 import { DateTime } from 'luxon';
+import { MAGIC_DATE_THAT_DC_SPECIFIC_PRICING_WAS_IMPLEMENTED } from 'support/constants/dc-specific-pricing';
 import {
   mockGetInvoice,
   mockGetInvoiceItems,
@@ -20,6 +21,18 @@ import { makeFeatureFlagData } from 'support/util/feature-flags';
 import { randomItem, randomLabel, randomNumber } from 'support/util/random';
 import { chooseRegion, getRegionById } from 'support/util/regions';
 
+/**
+ * Returns a string representation of a region, as shown on the invoice details page.
+ *
+ * @param regionId - ID of region for which to get label.
+ *
+ * @returns Region label in `<label> (<id>)` format.
+ */
+const getRegionLabel = (regionId: string) => {
+  const region = getRegionById(regionId);
+  return `${region.label} (${region.id})`;
+};
+
 describe('Account invoices', () => {
   /*
    * - Confirms that invoice items are listed on invoice details page using mock API data.
@@ -106,7 +119,6 @@ describe('Account invoices', () => {
       '@getInvoiceItems',
     ]);
 
-    // TODO: DC Pricing - M3-7073: Remove this and replace with positive assertions when DC pricing goes live.
     // Confirm that "Region" table column is not present.
     cy.findByLabelText('Invoice Details').within(() => {
       cy.get('thead').findByText('Region').should('not.exist');
@@ -171,15 +183,18 @@ describe('Account invoices', () => {
 
   /*
    * - Confirms that invoice item region info is shown when DC-specific pricing is enabled.
-   * - Confirms that table "Region" column is shown when DC-specific pricing is enabled.
+   * - Confirms that table "Region" column is shown when DC-specific pricing is enabled on new invoices.
    * - Confirms that invoice items that do not have a region are displayed as expected.
    * - Confirms that outbound transfer overage items display the associated region when applicable.
    * - Confirms that outbound transfer overage items display "Global" when no region is applicable.
    */
   it('lists invoice item region when DC-specific pricing flag is enabled', () => {
-    // TODO: DC Pricing - M3-7073: Delete this test when DC-specific pricing launches and move assertions to above test.
-    // We don't have to be fancy with the mocks here since we are only concerned with the region.
-    const mockInvoice = invoiceFactory.build({ id: randomNumber() });
+    // TODO: DC Pricing - M3-7073: Delete most of this test when DC-specific pricing launches and move assertions to above test. Use this test for the region invoice column.
+    // We don't have to be fancy with the mocks here since we are only concerned with the region and invoice date.
+    const mockInvoice = invoiceFactory.build({
+      id: randomNumber(),
+      date: MAGIC_DATE_THAT_DC_SPECIFIC_PRICING_WAS_IMPLEMENTED,
+    });
 
     // Regular invoice items.
     const mockInvoiceItemsRegular = [
@@ -209,18 +224,6 @@ describe('Account invoices', () => {
       ...mockInvoiceItemsOverages,
     ];
 
-    /**
-     * Returns a string representation of a region, as shown on the invoice details page.
-     *
-     * @param regionId - ID of region for which to get label.
-     *
-     * @returns Region label in `<label> (<id>)` format.
-     */
-    const getRegionLabel = (regionId: string) => {
-      const region = getRegionById(regionId);
-      return `${region.label} (${region.id})`;
-    };
-
     mockAppendFeatureFlags({
       dcSpecificPricing: makeFeatureFlagData(true),
     }).as('getFeatureFlags');
@@ -291,6 +294,49 @@ describe('Account invoices', () => {
     });
   });
 
+  it('does not list the region on past invoices when DC-specific pricing flag is enabled', () => {
+    const mockInvoice = invoiceFactory.build({
+      id: randomNumber(),
+      date: '2023-09-30 00:00:00Z',
+    });
+
+    // Regular invoice items.
+    const mockInvoiceItems = [
+      ...buildArray(10, () => invoiceItemFactory.build({ region: null })),
+    ];
+
+    mockAppendFeatureFlags({
+      dcSpecificPricing: makeFeatureFlagData(true),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientstream');
+    mockGetInvoice(mockInvoice).as('getInvoice');
+    mockGetInvoiceItems(mockInvoice, mockInvoiceItems).as('getInvoiceItems');
+
+    // Visit invoice details page, wait for relevant requests to resolve.
+    cy.visitWithLogin(`/account/billing/invoices/${mockInvoice.id}`);
+    cy.wait([
+      '@getFeatureFlags',
+      '@getClientstream',
+      '@getInvoice',
+      '@getInvoiceItems',
+    ]);
+
+    cy.findByLabelText('Invoice Details').within(() => {
+      // Confirm that "Region" table column is not present in an invoice created before DC-specific pricing was released.
+      cy.get('thead').findByText('Region').should('not.exist');
+    });
+
+    // Confirm that each regular invoice item is shown, and that the region cell is not displayed for each item.
+    mockInvoiceItems.forEach((invoiceItem: InvoiceItem) => {
+      cy.findByText(invoiceItem.label)
+        .should('be.visible')
+        .closest('tr')
+        .within(() => {
+          cy.get('[data-qa-region]').should('not.exist');
+        });
+    });
+  });
+
   /*
    * - Confirms that invoice item pagination works as expected using mock API data.
    * - Confirms that the expected number of pages are shown for invoice items.
diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
index 5d306dd13f4..cada801cbab 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
@@ -826,7 +826,7 @@ describe('LKE cluster updates for DC-specific prices', () => {
     });
 
     // Confirm total price is listed in Kube Specs.
-    cy.findByText('$14.00/month').should('be.visible');
+    cy.findByText('$14.40/month').should('be.visible');
 
     // Click "Resize Pool" and increase size to 3 nodes.
     ui.button
@@ -850,12 +850,12 @@ describe('LKE cluster updates for DC-specific prices', () => {
           .should('be.visible')
           .should('be.disabled');
 
-        cy.findByText('Current pool: $14/month (1 node at $14/month)').should(
-          'be.visible'
-        );
-        cy.findByText('Resized pool: $14/month (1 node at $14/month)').should(
-          'be.visible'
-        );
+        cy.findByText(
+          'Current pool: $14.40/month (1 node at $14.40/month)'
+        ).should('be.visible');
+        cy.findByText(
+          'Resized pool: $14.40/month (1 node at $14.40/month)'
+        ).should('be.visible');
 
         cy.findByLabelText('Add 1')
           .should('be.visible')
@@ -865,12 +865,12 @@ describe('LKE cluster updates for DC-specific prices', () => {
           .click();
 
         cy.findByLabelText('Edit Quantity').should('have.value', '4');
-        cy.findByText('Current pool: $14/month (1 node at $14/month)').should(
-          'be.visible'
-        );
-        cy.findByText('Resized pool: $56/month (4 nodes at $14/month)').should(
-          'be.visible'
-        );
+        cy.findByText(
+          'Current pool: $14.40/month (1 node at $14.40/month)'
+        ).should('be.visible');
+        cy.findByText(
+          'Resized pool: $57.60/month (4 nodes at $14.40/month)'
+        ).should('be.visible');
 
         cy.findByLabelText('Subtract 1')
           .should('be.visible')
@@ -878,9 +878,9 @@ describe('LKE cluster updates for DC-specific prices', () => {
           .click();
 
         cy.findByLabelText('Edit Quantity').should('have.value', '3');
-        cy.findByText('Resized pool: $42/month (3 nodes at $14/month)').should(
-          'be.visible'
-        );
+        cy.findByText(
+          'Resized pool: $43.20/month (3 nodes at $14.40/month)'
+        ).should('be.visible');
 
         ui.button
           .findByTitle('Save Changes')
@@ -892,7 +892,7 @@ describe('LKE cluster updates for DC-specific prices', () => {
     cy.wait(['@resizeNodePool', '@getNodePools']);
 
     // Confirm total price updates in Kube Specs.
-    cy.findByText('$42.00/month').should('be.visible');
+    cy.findByText('$43.20/month').should('be.visible');
   });
 
   /*
@@ -939,7 +939,7 @@ describe('LKE cluster updates for DC-specific prices', () => {
     cy.findByText('Linode 0 GB', { selector: 'h2' }).should('be.visible');
 
     // Confirm total price is listed in Kube Specs.
-    cy.findByText('$14.00/month').should('be.visible');
+    cy.findByText('$14.40/month').should('be.visible');
 
     // Add a new node pool, select plan, submit form in drawer.
     ui.button
@@ -961,14 +961,14 @@ describe('LKE cluster updates for DC-specific prices', () => {
           .closest('tr')
           .within(() => {
             // Assert that DC-specific prices are displayed the plan table, then add a node pool with 2 linodes.
-            cy.findByText('$14').should('be.visible');
+            cy.findByText('$14.40').should('be.visible');
             cy.findByText('$0.021').should('be.visible');
             cy.findByLabelText('Add 1').should('be.visible').click().click();
           });
 
         // Assert that DC-specific prices are displayed as helper text.
         cy.contains(
-          'This pool will add $28/month (2 nodes at $14/month) to this cluster.'
+          'This pool will add $28.80/month (2 nodes at $14.40/month) to this cluster.'
         ).should('be.visible');
 
         ui.button
@@ -981,7 +981,7 @@ describe('LKE cluster updates for DC-specific prices', () => {
     // Wait for API responses.
     cy.wait(['@addNodePool', '@getNodePools']);
 
-    // Confirm total price updates in Kube Specs: $14/mo existing pool + $28/mo new pool.
-    cy.findByText('$42.00/month').should('be.visible');
+    // Confirm total price updates in Kube Specs: $14.40/mo existing pool + $28.80/mo new pool.
+    cy.findByText('$43.20/month').should('be.visible');
   });
 });
diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts
index 6f6758ed44f..d44049ef2aa 100644
--- a/packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts
@@ -183,7 +183,7 @@ describe('create linode', () => {
       const currentPrice = dcPricingMockLinodeTypes[0].region_prices.find(
         (regionPrice) => regionPrice.id === initialRegion.id
       );
-      cy.findByText(`$${currentPrice.monthly}/month`).should('be.visible');
+      cy.findByText(`$${currentPrice.monthly}0/month`).should('be.visible');
     });
 
     // Confirms that a notice is shown in the "Region" section of the Linode Create form informing the user of tiered pricing
@@ -202,7 +202,7 @@ describe('create linode', () => {
       const currentPrice = dcPricingMockLinodeTypes[1].region_prices.find(
         (regionPrice) => regionPrice.id === newRegion.id
       );
-      cy.findByText(`$${currentPrice.monthly}/month`).should('be.visible');
+      cy.findByText(`$${currentPrice.monthly}0/month`).should('be.visible');
     });
 
     getClick('#linode-label').clear().type(linodeLabel);
diff --git a/packages/manager/cypress/support/constants/dc-specific-pricing.ts b/packages/manager/cypress/support/constants/dc-specific-pricing.ts
index 76c98b6459c..f0cc868327c 100644
--- a/packages/manager/cypress/support/constants/dc-specific-pricing.ts
+++ b/packages/manager/cypress/support/constants/dc-specific-pricing.ts
@@ -63,14 +63,14 @@ export const dcPricingMockLinodeTypes = linodeTypeFactory.buildList(3, {
       // Use `us-east` and `us-west` so we do not have to mock regions request,
       // which otherwise may not include the actual regions which have DC-specific pricing applied.
       id: 'us-east',
-      monthly: 14,
+      monthly: 14.4,
     },
     {
       hourly: 0.018,
       // Use `us-east` and `us-west` so we do not have to mock regions request,
       // which otherwise may not include the actual regions which have DC-specific pricing applied.
       id: 'us-west',
-      monthly: 12,
+      monthly: 12.2,
     },
   ],
 });
@@ -88,3 +88,6 @@ export const dcPricingLkeClusterPlans: LkePlanDescription[] = dcPricingMockLinod
     };
   }
 );
+
+export const MAGIC_DATE_THAT_DC_SPECIFIC_PRICING_WAS_IMPLEMENTED =
+  '2023-10-05 00:00:00Z';
diff --git a/packages/manager/src/factories/types.ts b/packages/manager/src/factories/types.ts
index f925c60c21d..280e2bf9025 100644
--- a/packages/manager/src/factories/types.ts
+++ b/packages/manager/src/factories/types.ts
@@ -40,12 +40,12 @@ export const typeFactory = Factory.Sync.makeFactory<LinodeType>({
     {
       hourly: 0.021,
       id: 'br-gru',
-      monthly: 14,
+      monthly: 14.4,
     },
     {
       hourly: 0.018,
       id: 'id-cgk',
-      monthly: 12,
+      monthly: 12.2,
     },
   ],
   successor: null,
diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
index 92dc17f66c2..3aceb132200 100644
--- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
+++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
@@ -28,6 +28,7 @@ import { useRegionsQuery } from 'src/queries/regions';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getAll } from 'src/utilities/getAll';
 
+import { invoiceCreatedAfterDCPricingLaunch } from '../PdfGenerator/utils';
 import { getShouldUseAkamaiBilling } from '../billingUtils';
 import { InvoiceTable } from './InvoiceTable';
 
@@ -52,6 +53,8 @@ export const InvoiceDetail = () => {
 
   const flags = useFlags();
 
+  const shouldShowRegion = invoiceCreatedAfterDCPricingLaunch(invoice?.date);
+
   const requestData = () => {
     setLoading(true);
 
@@ -93,7 +96,7 @@ export const InvoiceDetail = () => {
       flags,
       invoice,
       items,
-      regions: regions ?? [],
+      regions: shouldShowRegion && regions ? regions : [],
       taxes,
     });
 
@@ -105,7 +108,9 @@ export const InvoiceDetail = () => {
     { key: 'from', label: 'From' },
     { key: 'to', label: 'To' },
     { key: 'quantity', label: 'Quantity' },
-    ...(flags.dcSpecificPricing ? [{ key: 'region', label: 'Region' }] : []),
+    ...(flags.dcSpecificPricing && shouldShowRegion
+      ? [{ key: 'region', label: 'Region' }]
+      : []),
     { key: 'unit_price', label: 'Unit Price' },
     { key: 'amount', label: 'Amount (USD)' },
     { key: 'tax', label: 'Tax (USD)' },
@@ -206,7 +211,12 @@ export const InvoiceDetail = () => {
           {pdfGenerationError && (
             <Notice variant="error">Failed generating PDF.</Notice>
           )}
-          <InvoiceTable errors={errors} items={items} loading={loading} />
+          <InvoiceTable
+            errors={errors}
+            items={items}
+            loading={loading}
+            shouldShowRegion={shouldShowRegion}
+          />
         </Grid>
         <Grid xs={12}>
           {invoice && (
diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx
index d1cf13861d7..9e9a96421af 100644
--- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx
+++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceTable.tsx
@@ -38,13 +38,13 @@ interface Props {
   errors?: APIError[];
   items?: InvoiceItem[];
   loading: boolean;
+  shouldShowRegion: boolean;
 }
 
 export const InvoiceTable = (props: Props) => {
   const { classes } = useStyles();
   const MIN_PAGE_SIZE = 25;
   const flags = useFlags();
-  const NUM_COLUMNS = flags.dcSpecificPricing ? 9 : 8;
 
   const {
     data: regions,
@@ -52,7 +52,8 @@ export const InvoiceTable = (props: Props) => {
     isLoading: regionsLoading,
   } = useRegionsQuery();
 
-  const { errors, items, loading } = props;
+  const { errors, items, loading, shouldShowRegion } = props;
+  const NUM_COLUMNS = flags.dcSpecificPricing && shouldShowRegion ? 9 : 8;
 
   const renderTableContent = () => {
     if (loading || regionsLoading) {
@@ -105,7 +106,7 @@ export const InvoiceTable = (props: Props) => {
                   <TableCell data-qa-quantity parentColumn="Quantity">
                     {renderQuantity(invoiceItem.quantity)}
                   </TableCell>
-                  {flags.dcSpecificPricing && (
+                  {flags.dcSpecificPricing && shouldShowRegion && (
                     <TableCell data-qa-region parentColumn="Region">
                       {getInvoiceRegion(invoiceItem, regions ?? [])}
                     </TableCell>
@@ -165,7 +166,9 @@ export const InvoiceTable = (props: Props) => {
           <TableCell sx={{ minWidth: '125px' }}>From</TableCell>
           <TableCell sx={{ minWidth: '125px' }}>To</TableCell>
           <TableCell>Quantity</TableCell>
-          {flags.dcSpecificPricing && <TableCell>Region</TableCell>}
+          {flags.dcSpecificPricing && shouldShowRegion && (
+            <TableCell>Region</TableCell>
+          )}
           <TableCell noWrap>Unit Price</TableCell>
           <TableCell>Amount (USD)</TableCell>
           <TableCell>Tax (USD)</TableCell>
diff --git a/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts b/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts
index 62da8565f6f..bb7adc9fc2a 100644
--- a/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts
+++ b/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts
@@ -23,6 +23,7 @@ import {
   createPaymentsTable,
   createPaymentsTotalsTable,
   dateConversion,
+  invoiceCreatedAfterDCPricingLaunch,
   pageMargin,
 } from './utils';
 
@@ -288,6 +289,7 @@ export const printInvoice = async (
         flags,
         items: itemsChunk,
         regions,
+        shouldShowRegions: invoiceCreatedAfterDCPricingLaunch(invoice.date),
         startY: titlePosition,
         timezone,
       });
diff --git a/packages/manager/src/features/Billing/PdfGenerator/utils.test.ts b/packages/manager/src/features/Billing/PdfGenerator/utils.test.ts
index 1bbaf6675c4..2d26c080ec3 100644
--- a/packages/manager/src/features/Billing/PdfGenerator/utils.test.ts
+++ b/packages/manager/src/features/Billing/PdfGenerator/utils.test.ts
@@ -1,6 +1,6 @@
 import { invoiceItemFactory, regionFactory } from 'src/factories';
 
-import { getInvoiceRegion } from './utils';
+import { getInvoiceRegion, invoiceCreatedAfterDCPricingLaunch } from './utils';
 
 describe('getInvoiceRegion', () => {
   it('should get a formatted label given invoice items and regions', () => {
@@ -42,3 +42,20 @@ describe('getInvoiceRegion', () => {
     expect(getInvoiceRegion(invoiceItems, regions)).toBe('Global');
   });
 });
+
+describe('invoiceCreatedAfterDCPricingLaunch', () => {
+  it('should return true for an invoice date after 10/05/2023', () => {
+    const invoiceDate = '2023-10-06T12:00:00';
+    expect(invoiceCreatedAfterDCPricingLaunch(invoiceDate)).toBe(true);
+  });
+
+  it('should return false for an invoice date before 10/05/2023', () => {
+    const invoiceDate = '2023-10-01T12:00:00';
+    expect(invoiceCreatedAfterDCPricingLaunch(invoiceDate)).toBe(false);
+  });
+
+  it('should return true for an invoice dated 10/05/2023', () => {
+    const invoiceDate = '2023-10-05T12:00:00';
+    expect(invoiceCreatedAfterDCPricingLaunch(invoiceDate)).toBe(true);
+  });
+});
diff --git a/packages/manager/src/features/Billing/PdfGenerator/utils.ts b/packages/manager/src/features/Billing/PdfGenerator/utils.ts
index 1a56f1a138d..01d58802c5c 100644
--- a/packages/manager/src/features/Billing/PdfGenerator/utils.ts
+++ b/packages/manager/src/features/Billing/PdfGenerator/utils.ts
@@ -11,6 +11,7 @@ import { pathOr } from 'ramda';
 import { ADDRESSES } from 'src/constants';
 import { FlagSet } from 'src/featureFlags';
 import { formatDate } from 'src/utilities/formatDate';
+import { MAGIC_DATE_THAT_DC_SPECIFIC_PRICING_WAS_IMPLEMENTED } from 'src/utilities/pricing/constants';
 
 import { getShouldUseAkamaiBilling } from '../billingUtils';
 
@@ -96,6 +97,7 @@ interface CreateInvoiceItemsTableOptions {
    * Used to add Region labels to the `Region` column
    */
   regions: Region[];
+  shouldShowRegions: boolean;
   /**
    * The start position of the table on the Y axis
    */
@@ -109,7 +111,15 @@ interface CreateInvoiceItemsTableOptions {
 export const createInvoiceItemsTable = (
   options: CreateInvoiceItemsTableOptions
 ) => {
-  const { doc, flags, items, regions, timezone, startY } = options;
+  const {
+    doc,
+    flags,
+    items,
+    regions,
+    timezone,
+    shouldShowRegions,
+    startY,
+  } = options;
 
   autoTable(doc, {
     body: items.map((item) => {
@@ -135,7 +145,7 @@ export const createInvoiceItemsTable = (
           content: item.quantity || '',
           styles: { fontSize: 8, halign: 'center', overflow: 'linebreak' },
         },
-        ...(flags.dcSpecificPricing
+        ...(flags.dcSpecificPricing && shouldShowRegions
           ? [
               {
                 content: getInvoiceRegion(item, regions) ?? '',
@@ -177,7 +187,7 @@ export const createInvoiceItemsTable = (
         'From',
         'To',
         'Quantity',
-        ...(flags.dcSpecificPricing ? ['Region'] : []),
+        ...(flags.dcSpecificPricing && shouldShowRegions ? ['Region'] : []),
         'Unit Price',
         'Amount',
         'Tax',
@@ -400,3 +410,25 @@ export interface PdfResult {
 }
 
 export const dateConversion = (str: string): number => Date.parse(str);
+
+/**
+ * @param _invoiceDate When the invoice was generated
+ * @returns True if invoice is dated on or after the release of DC-specific pricing (10/05/23). From then on, invoice items return a region.
+ */
+export const invoiceCreatedAfterDCPricingLaunch = (_invoiceDate?: string) => {
+  // Default to `true` for bad input.
+  if (!_invoiceDate) {
+    return false;
+  }
+
+  const dcPricingDate = new Date(
+    MAGIC_DATE_THAT_DC_SPECIFIC_PRICING_WAS_IMPLEMENTED
+  ).getTime();
+  const invoiceDate = new Date(_invoiceDate).getTime();
+
+  if (isNaN(invoiceDate)) {
+    return false;
+  }
+
+  return invoiceDate >= dcPricingDate;
+};
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
index c55228bc4fe..19517207c81 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
@@ -14,6 +14,7 @@ import { extendType } from 'src/utilities/extendType';
 import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes';
 import { plansNoticesUtils } from 'src/utilities/planNotices';
 import { pluralize } from 'src/utilities/pluralize';
+import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
 import { getLinodeRegionPrice } from 'src/utilities/pricing/linodes';
 import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 
@@ -221,9 +222,9 @@ export const AddNodePoolDrawer = (props: Props) => {
             <Typography className={classes.priceDisplay}>
               This pool will add{' '}
               <strong>
-                ${totalPrice}/month (
+                ${renderMonthlyPriceToCorrectDecimalPlace(totalPrice)}/month (
                 {pluralize('node', 'nodes', selectedTypeInfo.count)} at $
-                {pricePerNode ?? 0}
+                {renderMonthlyPriceToCorrectDecimalPlace(pricePerNode) ?? 0}
                 /month)
               </strong>{' '}
               to this cluster.
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
index e914531b150..bd3b8642f0a 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
@@ -14,6 +14,7 @@ import { useUpdateNodePoolMutation } from 'src/queries/kubernetes';
 import { useSpecificTypes } from 'src/queries/types';
 import { extendType } from 'src/utilities/extendType';
 import { pluralize } from 'src/utilities/pluralize';
+import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
 import { getKubernetesMonthlyPrice } from 'src/utilities/pricing/kubernetes';
 import { getLinodeRegionPrice } from 'src/utilities/pricing/linodes';
 
@@ -127,8 +128,10 @@ export const ResizeNodePoolDrawer = (props: Props) => {
       >
         <div className={classes.section}>
           <Typography className={classes.summary}>
-            Current pool: ${totalMonthlyPrice}/month (
-            {pluralize('node', 'nodes', nodePool.count)} at ${pricePerNode}
+            Current pool: $
+            {renderMonthlyPriceToCorrectDecimalPlace(totalMonthlyPrice)}/month (
+            {pluralize('node', 'nodes', nodePool.count)} at $
+            {renderMonthlyPriceToCorrectDecimalPlace(pricePerNode)}
             /month)
           </Typography>
         </div>
@@ -148,8 +151,12 @@ export const ResizeNodePoolDrawer = (props: Props) => {
 
         <div className={classes.section}>
           <Typography className={classes.summary}>
-            Resized pool: ${updatedCount * pricePerNode}/month (
-            {pluralize('node', 'nodes', updatedCount)} at ${pricePerNode}/month)
+            Resized pool: $
+            {renderMonthlyPriceToCorrectDecimalPlace(
+              updatedCount * pricePerNode
+            )}
+            /month ({pluralize('node', 'nodes', updatedCount)} at $
+            {renderMonthlyPriceToCorrectDecimalPlace(pricePerNode)}/month)
           </Typography>
         </div>
 
diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx
index 37ba6d4285c..18dbf8344bf 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx
@@ -18,7 +18,7 @@ const planHeader = 'Dedicated 20 GB';
 const baseHourlyPrice = '$0.015';
 const baseMonthlyPrice = '$10';
 const regionHourlyPrice = '$0.018';
-const regionMonthlyPrice = '$12';
+const regionMonthlyPrice = '$12.20';
 const ram = '16 GB';
 const cpu = '8';
 const storage = '1024 GB';
diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.tsx
index 1158dea8096..3b46fe81935 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.tsx
@@ -12,6 +12,7 @@ import { TableCell } from 'src/components/TableCell';
 import { StyledDisabledTableRow } from 'src/features/components/PlansPanel/PlansPanel.styles';
 import { useFlags } from 'src/hooks/useFlags';
 import { ExtendedType } from 'src/utilities/extendType';
+import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
 import { getLinodeRegionPrice } from 'src/utilities/pricing/linodes';
 import { convertMegabytesTo } from 'src/utilities/unitConversions';
 
@@ -53,7 +54,9 @@ export const KubernetesPlanSelection = (
 
   // We don't want flat-rate pricing or network information for LKE so we select only the second type element.
   const subHeadings = [
-    `$${price.monthly}/mo ($${price.hourly}/hr)`,
+    `$${renderMonthlyPriceToCorrectDecimalPlace(price.monthly)}/mo ($${
+      price.hourly
+    }/hr)`,
     type.subHeadings[1],
   ];
 
@@ -88,7 +91,10 @@ export const KubernetesPlanSelection = (
           key={type.id}
         >
           <TableCell data-qa-plan-name>{type.heading}</TableCell>
-          <TableCell data-qa-monthly> ${price.monthly}</TableCell>
+          <TableCell data-qa-monthly>
+            {' '}
+            ${renderMonthlyPriceToCorrectDecimalPlace(price.monthly)}
+          </TableCell>
           <TableCell data-qa-hourly>${price.hourly}</TableCell>
           <TableCell center data-qa-ram>
             {convertMegabytesTo(type.memory, true)}
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
index 25a50c5c0b2..38dcca48e4c 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
@@ -62,6 +62,7 @@ import { getErrorMap } from 'src/utilities/errorUtils';
 import { extendType } from 'src/utilities/extendType';
 import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes';
 import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
+import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
 import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 
 import { SelectFirewallPanel } from '../../../components/SelectFirewallPanel/SelectFirewallPanel';
@@ -318,6 +319,11 @@ export class LinodeCreate extends React.PureComponent<
     if (typeDisplayInfo) {
       const typeDisplayInfoCopy = cloneDeep(typeDisplayInfo);
 
+      // Always display monthly cost to two decimals
+      typeDisplayInfoCopy.details = `$${renderMonthlyPriceToCorrectDecimalPlace(
+        typeDisplayInfo.monthly
+      )}/month`;
+
       if (this.props.createType === 'fromApp' && this.state.numberOfNodes > 0) {
         const { hourlyPrice, monthlyPrice } = getMonthlyAndHourlyNodePricing(
           typeDisplayInfoCopy.monthly,
@@ -325,7 +331,9 @@ export class LinodeCreate extends React.PureComponent<
           this.state.numberOfNodes
         );
 
-        typeDisplayInfoCopy.details = `${this.state.numberOfNodes} Nodes - $${monthlyPrice}/month $${hourlyPrice}/hr`;
+        typeDisplayInfoCopy.details = `${
+          this.state.numberOfNodes
+        } Nodes - $${monthlyPrice.toFixed(2)}/month $${hourlyPrice}/hr`;
       }
 
       displaySections.push(typeDisplayInfoCopy);
diff --git a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.test.tsx b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.test.tsx
index dd9ca401a57..092ab04b926 100644
--- a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.test.tsx
+++ b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.test.tsx
@@ -126,7 +126,7 @@ describe('ConfigureForm component with price comparison', () => {
       '$10.00/month, $0.015/hour | Backups $2.50/month'
     );
     expect(getByTestId(newPricePanel)).toHaveTextContent(
-      '$14.00/month, $0.021/hour | Backups $4.17/month'
+      '$14.40/month, $0.021/hour | Backups $4.17/month'
     );
   });
 
@@ -136,7 +136,7 @@ describe('ConfigureForm component with price comparison', () => {
       '$10.00/month, $0.015/hour'
     );
     expect(getByTestId(newPricePanel)).toHaveTextContent(
-      '$14.00/month, $0.021/hour'
+      '$14.40/month, $0.021/hour'
     );
   });
 
diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx
index 3d16ef64366..94c751867bc 100644
--- a/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx
+++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx
@@ -153,7 +153,7 @@ describe('PlanSelection (card, mobile)', () => {
     ).toHaveTextContent('Dedicated 20 GB');
     expect(
       container.querySelector('[data-qa-select-card-subheading="subheading-1"]')
-    ).toHaveTextContent('$14/mo ($0.021/hr)');
+    ).toHaveTextContent('$14.40/mo ($0.021/hr)');
     expect(
       container.querySelector('[data-qa-select-card-subheading="subheading-2"]')
     ).toHaveTextContent('1 CPU, 50 GB Storage, 2 GB RAM');
diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx
index 3210659d276..68166e28d40 100644
--- a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx
+++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx
@@ -9,6 +9,7 @@ import { TableCell } from 'src/components/TableCell';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { LINODE_NETWORK_IN } from 'src/constants';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
+import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
 import { getLinodeRegionPrice } from 'src/utilities/pricing/linodes';
 import { convertMegabytesTo } from 'src/utilities/unitConversions';
 
@@ -91,7 +92,9 @@ export const PlanSelection = (props: Props) => {
       ? getLinodeRegionPrice(type, selectedRegionId)
       : type.price;
 
-  type.subHeadings[0] = `$${price.monthly}/mo ($${price.hourly}/hr)`;
+  type.subHeadings[0] = `$${renderMonthlyPriceToCorrectDecimalPlace(
+    price.monthly
+  )}/mo ($${price.hourly}/hr)`;
 
   return (
     <React.Fragment key={`tabbed-panel-${idx}`}>
@@ -151,7 +154,10 @@ export const PlanSelection = (props: Props) => {
               />
             )}
           </TableCell>
-          <TableCell data-qa-monthly> ${price?.monthly}</TableCell>
+          <TableCell data-qa-monthly>
+            {' '}
+            ${renderMonthlyPriceToCorrectDecimalPlace(price?.monthly)}
+          </TableCell>
           <TableCell data-qa-hourly>
             {isGPU ? (
               <Currency quantity={price.hourly ?? 0} />
diff --git a/packages/manager/src/utilities/pricing/constants.ts b/packages/manager/src/utilities/pricing/constants.ts
index 6dba1987878..f33f3bf74dc 100644
--- a/packages/manager/src/utilities/pricing/constants.ts
+++ b/packages/manager/src/utilities/pricing/constants.ts
@@ -13,6 +13,7 @@ export const OBJ_STORAGE_PRICE: ObjStoragePriceObject = {
   storage_overage: 0.02,
   transfer_overage: 0.005,
 };
+export const UNKNOWN_PRICE = '--.--';
 
 // Other constants
 export const PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE =
@@ -23,3 +24,5 @@ export const DIFFERENT_PRICE_STRUCTURE_WARNING =
   'The selected region has a different price structure.';
 export const ENABLE_OBJ_ACCESS_KEYS_MESSAGE =
   'Pricing for monthly rate and overage costs will depend on the data center you select for deployment.';
+export const MAGIC_DATE_THAT_DC_SPECIFIC_PRICING_WAS_IMPLEMENTED =
+  '2023-10-05 00:00:00Z';
diff --git a/packages/manager/src/utilities/pricing/dynamicPricing.test.ts b/packages/manager/src/utilities/pricing/dynamicPricing.test.ts
index bf216dbf009..8405cb84013 100644
--- a/packages/manager/src/utilities/pricing/dynamicPricing.test.ts
+++ b/packages/manager/src/utilities/pricing/dynamicPricing.test.ts
@@ -1,4 +1,7 @@
-import { getDCSpecificPrice } from './dynamicPricing';
+import {
+  getDCSpecificPrice,
+  renderMonthlyPriceToCorrectDecimalPlace,
+} from './dynamicPricing';
 import { getDynamicVolumePrice } from './dynamicVolumePrice';
 
 describe('getDCSpecificPricingDisplay', () => {
@@ -60,3 +63,21 @@ describe('getDCSpecificPricingDisplay', () => {
     ).toBe('0.00');
   });
 });
+
+describe('renderMonthlyPriceToCorrectDecimalPlace', () => {
+  it('renders monthly price to two decimal places if the price includes a decimal', () => {
+    expect(renderMonthlyPriceToCorrectDecimalPlace(12.2)).toBe('12.20');
+  });
+
+  it('renders monthly price as an integer if the price does not include a decimal', () => {
+    expect(renderMonthlyPriceToCorrectDecimalPlace(12)).toBe(12);
+  });
+
+  it('renders monthly price as --.-- (unknown price) if the price is undefined', () => {
+    expect(renderMonthlyPriceToCorrectDecimalPlace(undefined)).toBe('--.--');
+  });
+
+  it('renders monthly price as --.-- (unknown price) if the price is null', () => {
+    expect(renderMonthlyPriceToCorrectDecimalPlace(null)).toBe('--.--');
+  });
+});
diff --git a/packages/manager/src/utilities/pricing/dynamicPricing.ts b/packages/manager/src/utilities/pricing/dynamicPricing.ts
index 6e61b9b65e3..578cbe3a414 100644
--- a/packages/manager/src/utilities/pricing/dynamicPricing.ts
+++ b/packages/manager/src/utilities/pricing/dynamicPricing.ts
@@ -1,5 +1,6 @@
 import type { Region } from '@linode/api-v4';
 import type { FlagSet } from 'src/featureFlags';
+import { UNKNOWN_PRICE } from './constants';
 
 export interface DataCenterPricingOptions {
   /**
@@ -70,3 +71,14 @@ export const getDCSpecificPrice = ({
 
   return basePrice.toFixed(2);
 };
+
+export const renderMonthlyPriceToCorrectDecimalPlace = (
+  monthlyPrice: null | number | undefined
+) => {
+  if (!monthlyPrice) {
+    return UNKNOWN_PRICE;
+  }
+  return Number.isInteger(monthlyPrice)
+    ? monthlyPrice
+    : monthlyPrice.toFixed(2);
+};