change: [M3-7561] - UX & Copy Revisions: Monthly Network Transfer Pool Modal

packages/manager/.changeset/pr-10737-changed-1722455526602.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+UX & Copy Revisions: Monthly Network Transfer Pool Modal ([#10737](https://github.com/linode/manager/pull/10737))

packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx

@@ -8,11 +8,11 @@ import {
 } from 'src/factories/account';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { TransferDisplayDialog } from './TransferDisplayDialog';
 import {
-  NETWORK_TRANSFER_QUOTA_DOCS_LINKS,
+  NETWORK_TRANSFER_USAGE_AND_COST_LINK,
   TRANSFER_DISPLAY_BUTTON,
 } from './constants';
+import { TransferDisplayDialog } from './TransferDisplayDialog';
 import { calculatePoolUsagePct, getRegionTransferPools } from './utils';
 
 import type { TransferDisplayDialogProps } from './TransferDisplayDialog';
@@ -53,7 +53,10 @@ describe('TransferDisplayDialog', () => {
     const docsLink = getByRole('link');
 
     expect(docsLink).toBeInTheDocument();
-    expect(docsLink).toHaveAttribute('href', NETWORK_TRANSFER_QUOTA_DOCS_LINKS);
+    expect(docsLink).toHaveAttribute(
+      'href',
+      NETWORK_TRANSFER_USAGE_AND_COST_LINK
+    );
   });
 
   it('renders transfer display dialog without usage or quota data if no quota/resources', async () => {

packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx

@@ -5,11 +5,11 @@ import * as React from 'react';
 import { Box } from 'src/components/Box';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { Divider } from 'src/components/Divider';
+import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';
 
-import { DocsLink } from '../DocsLink/DocsLink';
 import { useIsGeckoEnabled } from '../RegionSelect/RegionSelect.utils';
-import { NETWORK_TRANSFER_QUOTA_DOCS_LINKS } from './constants';
+import { NETWORK_TRANSFER_USAGE_AND_COST_LINK } from './constants';
 import { TransferDisplayDialogHeader } from './TransferDisplayDialogHeader';
 import { TransferDisplayUsage } from './TransferDisplayUsage';
 import { formatRegionList, getDaysRemaining } from './utils';
@@ -76,6 +76,16 @@ export const TransferDisplayDialog = React.memo(
           dataTestId="global-transfer-pool-header"
           headerText="Global Network Transfer Pool"
         />
+        <Typography marginBottom={theme.spacing(2)}>
+          Any additional transfer usage that exceeds this monthly allotment
+          starts at $0.005/GB (or $5/TB) depending on the service’s region.
+          Additional transfer usage is charged at the end of the billing period.
+          For more information, refer to{' '}
+          <Link to={NETWORK_TRANSFER_USAGE_AND_COST_LINK}>
+            Network Transfer Usage and Costs
+          </Link>
+          .
+        </Typography>
         <TransferDisplayUsage
           pullUsagePct={generalPoolUsagePct}
           quota={quota}
@@ -104,10 +114,16 @@ export const TransferDisplayDialog = React.memo(
               >
                 <Typography
                   fontFamily={theme.font.bold}
+                  fontSize={theme.typography.h3.fontSize}
                   marginBottom={theme.spacing()}
                 >
                   {pool.regionName}{' '}
-                  <Typography component="span">({pool.regionID})</Typography>
+                  <Typography
+                    component="span"
+                    fontSize={theme.typography.h3.fontSize}
+                  >
+                    ({pool.regionID})
+                  </Typography>
                 </Typography>
                 <TransferDisplayUsage
                   pullUsagePct={pool.pct}
@@ -133,12 +149,6 @@ export const TransferDisplayDialog = React.memo(
           prorated based on service creation.
         </Typography>
         <Typography>{transferQuotaDocsText}</Typography>
-        <Box marginTop={theme.spacing(2)}>
-          <DocsLink
-            href={NETWORK_TRANSFER_QUOTA_DOCS_LINKS}
-            label="Network Transfer Usage and Costs"
-          />
-        </Box>
       </Dialog>
     );
   }

packages/manager/src/components/TransferDisplay/TransferDisplayUsage.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
@@ -15,20 +16,26 @@ export interface TransferDisplayUsageProps {
 export const TransferDisplayUsage = React.memo(
   (props: TransferDisplayUsageProps) => {
     const { pullUsagePct, quota, used } = props;
+
+    const theme = useTheme();
+
     // Don't display usage, quota, or bar percent if the network transfer pool is empty (e.g. account has no resources).
     const isEmptyPool = quota === 0;
 
     return (
       <>
+        {!isEmptyPool && (
+          <BarPercent max={100} rounded value={Math.ceil(pullUsagePct)} />
+        )}
         <Grid
           container
           justifyContent="space-between"
           spacing={2}
-          sx={{ marginBottom: 0 }}
+          sx={{ marginBottom: 0, marginTop: (theme) => theme.spacing(0.5) }}
         >
           <Grid style={{ marginRight: 10 }}>
             {!isEmptyPool ? (
-              <Typography>
+              <Typography fontSize={theme.typography.h3.fontSize}>
                 {used} GB Used ({formatPoolUsagePct(pullUsagePct)})
               </Typography>
             ) : (
@@ -40,7 +47,7 @@ export const TransferDisplayUsage = React.memo(
           </Grid>
           <Grid>
             {!isEmptyPool && (
-              <Typography>
+              <Typography fontSize={theme.typography.h3.fontSize}>
                 {quota >= used ? (
                   <span>{quota - used} GB Available</span>
                 ) : (
@@ -52,9 +59,6 @@ export const TransferDisplayUsage = React.memo(
             )}
           </Grid>
         </Grid>
-        {!isEmptyPool && (
-          <BarPercent max={100} rounded value={Math.ceil(pullUsagePct)} />
-        )}
       </>
     );
   }

packages/manager/src/components/TransferDisplay/constants.ts

@@ -1,8 +1,8 @@
 // ====================
 // Components constants
 // ====================
-export const NETWORK_TRANSFER_QUOTA_DOCS_LINKS =
-  'https://www.linode.com/docs/guides/network-transfer-quota/';
+export const NETWORK_TRANSFER_USAGE_AND_COST_LINK =
+  'https://www.linode.com/docs/products/platform/get-started/guides/network-transfer/';
 
 // ====================
 // Test constants