feat: [M3-7035] - Add DC-specific pricing to Linode backups

packages/manager/src/features/Backups/BackupLinodeRow.tsx

@@ -1,4 +1,4 @@
-import { Linode } from '@linode/api-v4';
+import { Linode, PriceObject } from '@linode/api-v4';
 import * as React from 'react';
 
 import { TableCell } from 'src/components/TableCell';
@@ -7,7 +7,7 @@ import { Typography } from 'src/components/Typography';
 import { useFlags } from 'src/hooks/useFlags';
 import { useRegionsQuery } from 'src/queries/regions';
 import { useTypeQuery } from 'src/queries/types';
-import { getLinodeBackupPrice } from 'src/utilities/pricing/linodes';
+import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 
 interface Props {
   error?: string;
@@ -20,11 +20,11 @@ export const BackupLinodeRow = (props: Props) => {
   const { data: regions } = useRegionsQuery();
   const flags = useFlags();
 
-  const backupsMonthlyPrice = flags.dcSpecificPricing
-    ? type
-      ? getLinodeBackupPrice(type, linode.region).monthly
-      : undefined
-    : type?.addons.backups.price.monthly;
+  const backupsMonthlyPrice: PriceObject['monthly'] = getMonthlyBackupsPrice({
+    flags,
+    region: linode.region,
+    type,
+  });
 
   const regionLabel =
     regions?.find((r) => r.id === linode.region)?.label ?? linode.region;
@@ -52,7 +52,9 @@ export const BackupLinodeRow = (props: Props) => {
         <TableCell parentColumn="Region">{regionLabel ?? 'Unknown'}</TableCell>
       )}
       <TableCell parentColumn="Price">
-        {`$${backupsMonthlyPrice?.toFixed(2) ?? 'Unknown'}/mo`}
+        {backupsMonthlyPrice !== 0
+          ? `$${backupsMonthlyPrice?.toFixed(2)}/mo`
+          : '$Unknown/mo'}
       </TableCell>
     </TableRow>
   );

packages/manager/src/features/Backups/utils.ts

@@ -4,9 +4,9 @@ import { useMutation, useQueryClient } from 'react-query';
 import { FlagSet } from 'src/featureFlags';
 import { queryKey } from 'src/queries/linodes/linodes';
 import { pluralize } from 'src/utilities/pluralize';
-import { getLinodeBackupPrice } from 'src/utilities/pricing/linodes';
+import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 
-import type { APIError, Linode, LinodeType } from '@linode/api-v4';
+import type { APIError, Linode, LinodeType, PriceObject } from '@linode/api-v4';
 
 export interface TotalBackupsPriceOptions {
   /**
@@ -31,13 +31,15 @@ export const getTotalBackupsPrice = ({
 }: TotalBackupsPriceOptions) => {
   return linodes.reduce((prevValue: number, linode: Linode) => {
     const type = types.find((type) => type.id === linode.type);
-    const backupsMonthlyPrice = flags.dcSpecificPricing
-      ? type && linode
-        ? getLinodeBackupPrice(type, linode.region).monthly
-        : undefined
-      : type?.addons?.backups?.price?.monthly;
 
-    return prevValue + (backupsMonthlyPrice ?? 0);
+    const backupsMonthlyPrice: PriceObject['monthly'] =
+      getMonthlyBackupsPrice({
+        flags,
+        region: linode.region,
+        type,
+      }) || 0;
+
+    return prevValue + backupsMonthlyPrice;
   }, 0);
 };
 

packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { linodeTypeFactory } from 'src/factories/linodes';
-import { getLinodeBackupPrice } from 'src/utilities/pricing/linodes';
+import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 import { renderWithTheme, wrapWithTheme } from 'src/utilities/testHelpers';
 
 import { AddonsPanel, AddonsPanelProps } from './AddonsPanel';
@@ -200,7 +200,11 @@ describe('AddonsPanel', () => {
   });
 
   it('Should display backups price when Backups checkbox is checked', () => {
-    const backupsMonthlyPrice = getLinodeBackupPrice(type, 'us-east').monthly;
+    const backupsMonthlyPrice = getMonthlyBackupsPrice({
+      flags: { dcSpecificPricing: false },
+      region: 'us-east',
+      type,
+    });
     const addOnProps = {
       ...props,
       backups: true,
@@ -218,7 +222,11 @@ describe('AddonsPanel', () => {
   });
 
   it('Should display DC-specific backups price when Backups checkbox is checked with the dcSpecificPricing feature flag on', () => {
-    const backupsMonthlyPrice = getLinodeBackupPrice(type, 'id-cgk').monthly;
+    const backupsMonthlyPrice = getMonthlyBackupsPrice({
+      flags: { dcSpecificPricing: true },
+      region: 'id-cgk',
+      type,
+    });
     const addOnProps = {
       ...props,
       backups: true,

packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx

@@ -94,13 +94,11 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
     : null;
 
   const renderBackupsPrice = () => {
-    return (
-      backupsMonthlyPrice && (
-        <Typography variant="body1">
-          <Currency quantity={backupsMonthlyPrice} /> per month
-        </Typography>
-      )
-    );
+    return backupsMonthlyPrice && backupsMonthlyPrice > 0 ? (
+      <Typography variant="body1">
+        <Currency quantity={backupsMonthlyPrice} /> per month
+      </Typography>
+    ) : undefined;
   };
 
   const checkBackupsWarning = () => {

packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx

@@ -1,6 +1,6 @@
 import {
   InterfacePayload,
-  LinodeType,
+  PriceObject,
   restoreBackup,
 } from '@linode/api-v4/lib/linodes';
 import { Tag } from '@linode/api-v4/lib/tags/types';
@@ -55,7 +55,6 @@ import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature
 import { getErrorMap } from 'src/utilities/errorUtils';
 import { extendType } from 'src/utilities/extendType';
 import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes';
-import { getLinodeBackupPrice } from 'src/utilities/pricing/linodes';
 import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 
 import { AddonsPanel } from './AddonsPanel';
@@ -88,6 +87,7 @@ import {
 } from './types';
 
 import type { Tab } from 'src/components/TabLinkList/TabLinkList';
+import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 
 export interface LinodeCreateProps {
   checkValidation: LinodeCreateValidation;
@@ -312,11 +312,11 @@ export class LinodeCreate extends React.PureComponent<
       (type) => type.id === this.props.selectedTypeID
     );
 
-    const backupsMonthlyPrice = this.props.flags.dcSpecificPricing
-      ? this.props.selectedTypeID && selectedRegionID
-        ? getLinodeBackupPrice(type as LinodeType, selectedRegionID).monthly
-        : undefined
-      : type?.addons?.backups?.price?.monthly;
+    const backupsMonthlyPrice: PriceObject['monthly'] = getMonthlyBackupsPrice({
+      flags: this.props.flags,
+      region: selectedRegionID,
+      type,
+    });
 
     if (hasBackups && typeDisplayInfo && backupsMonthlyPrice) {
       displaySections.push(

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx

@@ -1,3 +1,4 @@
+import { PriceObject } from '@linode/api-v4';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -10,7 +11,7 @@ import { LinodePermissionsError } from '../LinodePermissionsError';
 import { EnableBackupsDialog } from './EnableBackupsDialog';
 
 interface Props {
-  backupsMonthlyPrice?: number;
+  backupsMonthlyPrice?: PriceObject['monthly'];
   disabled: boolean;
   linodeId: number;
 }

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/EnableBackupsDialog.tsx

@@ -1,3 +1,4 @@
+import { PriceObject } from '@linode/api-v4';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -10,7 +11,7 @@ import { useFlags } from 'src/hooks/useFlags';
 import { useLinodeBackupsEnableMutation } from 'src/queries/linodes/backups';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
 import { useTypeQuery } from 'src/queries/types';
-import { getLinodeBackupPrice } from 'src/utilities/pricing/linodes';
+import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 
 interface Props {
   linodeId: number | undefined;
@@ -40,11 +41,11 @@ export const EnableBackupsDialog = (props: Props) => {
     Boolean(linode?.type)
   );
 
-  const backupsMonthlyPrice = flags.dcSpecificPricing
-    ? type && linode
-      ? getLinodeBackupPrice(type, linode.region).monthly
-      : undefined
-    : type?.addons?.backups?.price?.monthly;
+  const backupsMonthlyPrice: PriceObject['monthly'] = getMonthlyBackupsPrice({
+    flags,
+    region: linode?.region,
+    type,
+  });
 
   const { enqueueSnackbar } = useSnackbar();
 

packages/manager/src/mocks/serverHandlers.ts

@@ -641,6 +641,9 @@ export const handlers = [
       ctx.json(
         linodeFactory.build({
           id,
+          backups: { enabled: false },
+          label: 'DC-Specific Pricing Linode',
+          region: 'id-cgk',
         })
       )
     );

packages/manager/src/utilities/pricing/backups.ts

@@ -0,0 +1,29 @@
+import { LinodeType, PriceObject } from '@linode/api-v4';
+
+import { FlagSet } from 'src/featureFlags';
+
+import { ExtendedType } from '../extendType';
+import { getLinodeBackupPrice } from './linodes';
+
+interface BackupsPriceOptions {
+  flags: FlagSet;
+  region: string | undefined;
+  type: ExtendedType | LinodeType | undefined;
+}
+
+/**
+ *
+ */
+export const getMonthlyBackupsPrice = ({
+  flags,
+  region,
+  type,
+}: BackupsPriceOptions): PriceObject['monthly'] => {
+  if (!region || !type) {
+    return 0;
+  }
+
+  return flags.dcSpecificPricing
+    ? getLinodeBackupPrice(type, region).monthly
+    : type?.addons.backups.price.monthly;
+};