refactor: [M3-6300] - MUI v5 Migration - Components > CheckoutBar

CHANGELOG.md

@@ -35,7 +35,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - MUIv5 Migration - `Components > DateTimeDisplay, DebouncedSearchTextField` #9007
 - MUIv5 Migration - `SRC > Components > ConfirmationDialog` #9016
 - MUIv5 Migration - `SRC > Components > CopyTooltip` #9040
-- - MUIv5 Migration - `SRC > Components > CopyTooltip` #9040
+- MUIv5 Migration - `SRC > Components > CopyTooltip` #9040
+- MUIv5 Migration - `SRC > Components > CheckoutBar` #9051
 - Add basic Adobe Analytics tracking #8989
 
 ## [2023-04-18] - v1.91.1

packages/manager/src/components/CheckoutBar/CheckoutBar.tsx

@@ -1,10 +1,15 @@
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
-import Button from 'src/components/Button';
 import Typography from 'src/components/core/Typography';
 import { DisplayPrice } from 'src/components/DisplayPrice';
-import useStyles from './styles';
+import {
+  StyledButton,
+  StyledCheckoutSection,
+  StyledRoot,
+  SxTypography,
+} from './styles';
 
-interface Props {
+interface CheckoutBarProps {
   onDeploy: () => void;
   heading: string;
   calculatedPrice?: number;
@@ -17,11 +22,7 @@ interface Props {
   agreement?: JSX.Element;
 }
 
-type CombinedProps = Props;
-
-const CheckoutBar: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
-
+const CheckoutBar = (props: CheckoutBarProps) => {
   const {
     onDeploy,
     heading,
@@ -32,44 +33,57 @@ const CheckoutBar: React.FC<CombinedProps> = (props) => {
     submitText,
     footer,
     agreement,
+    children,
   } = props;
 
+  const theme = useTheme();
+
   const price = calculatedPrice ?? 0;
 
   return (
-    <div className={classes.root}>
+    <StyledRoot>
       <Typography
         variant="h2"
-        className={classes.sidebarTitle}
+        sx={{
+          color: theme.color.headline,
+          fontSize: '1.125rem',
+          wordBreak: 'break-word',
+        }}
         data-qa-order-summary
       >
         {heading}
       </Typography>
-      {props.children}
+      {children}
       {
-        <div className={classes.checkoutSection} data-qa-total-price>
+        <StyledCheckoutSection data-qa-total-price>
           <DisplayPrice price={price} interval="mo" />
           {priceHelperText && price > 0 && (
-            <Typography className={classes.price}>{priceHelperText}</Typography>
+            <Typography
+              sx={{
+                ...SxTypography,
+                marginTop: theme.spacing(),
+              }}
+            >
+              {priceHelperText}
+            </Typography>
           )}
-        </div>
+        </StyledCheckoutSection>
       }
       {agreement ? agreement : null}
-      <div className={classes.checkoutSection}>
-        <Button
+      <StyledCheckoutSection>
+        <StyledButton
           buttonType="primary"
-          className={classes.createButton}
           disabled={disabled}
           onClick={onDeploy}
           data-qa-deploy-linode
           loading={isMakingRequest}
         >
           {submitText ?? 'Create'}
-        </Button>
-      </div>
+        </StyledButton>
+      </StyledCheckoutSection>
       {footer ? footer : null}
-    </div>
+    </StyledRoot>
   );
 };
 
-export default CheckoutBar;
+export { CheckoutBar };

packages/manager/src/components/CheckoutBar/DisplaySection.tsx

@@ -1,33 +1,33 @@
 import * as React from 'react';
 import Typography from 'src/components/core/Typography';
-import useStyles from './styles';
+import { StyledCheckoutSection, SxTypography } from './styles';
 
-export interface Props {
+export interface DisplaySectionProps {
   title: string;
   details?: string | number;
 }
 
-export const DisplaySection: React.FC<Props> = (props) => {
+const DisplaySection = React.memo((props: DisplaySectionProps) => {
   const { title, details } = props;
-  const classes = useStyles();
+
   return (
-    <div className={classes.checkoutSection}>
+    <StyledCheckoutSection>
       {title && (
         <Typography variant="h3" data-qa-subheading={title}>
           {title}
         </Typography>
       )}
-      {details && (
+      {details ? (
         <Typography
           component="span"
           data-qa-details={details}
-          className={classes.detail}
+          sx={SxTypography}
         >
           {details}
         </Typography>
-      )}
-    </div>
+      ) : null}
+    </StyledCheckoutSection>
   );
-};
+});
 
-export default React.memo(DisplaySection);
+export { DisplaySection };

packages/manager/src/components/CheckoutBar/DisplaySectionList.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import Divider from '../core/Divider';
-import DisplaySection from './DisplaySection';
+import { DisplaySection } from './DisplaySection';
 
-interface Props {
+interface DisplaySectionListProps {
   displaySections?: { title: string; details?: string | number }[];
 }
 
-export const DisplaySectionList: React.FC<Props> = ({ displaySections }) => {
+const DisplaySectionList = ({ displaySections }: DisplaySectionListProps) => {
   if (!displaySections) {
     return null;
   }
@@ -27,4 +27,4 @@ export const DisplaySectionList: React.FC<Props> = ({ displaySections }) => {
   );
 };
 
-export default DisplaySectionList;
+export { DisplaySectionList };

packages/manager/src/components/CheckoutBar/styles.ts

@@ -1,16 +1,18 @@
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import { styled } from '@mui/system';
+import Button from 'src/components/Button';
 
-export const useStyles = makeStyles((theme: Theme) => ({
-  '@keyframes fadeIn': {
-    from: {
-      opacity: 0,
-    },
-    to: {
-      opacity: 1,
-    },
+const StyledButton = styled(Button)(({ theme }) => ({
+  marginTop: 18,
+  [theme.breakpoints.up('lg')]: {
+    width: '100%',
   },
-  root: {
+}));
+
+const StyledRoot = styled('div')(() => {
+  const theme = useTheme();
+
+  return {
     minHeight: '24px',
     minWidth: '24px',
     [theme.breakpoints.down('md')]: {
@@ -20,42 +22,29 @@ export const useStyles = makeStyles((theme: Theme) => ({
       left: '0 !important' as '0',
       bottom: '0 !important' as '0',
     },
-  },
-  sidebarTitle: {
-    color: theme.color.headline,
-    fontSize: '1.125rem',
-    wordBreak: 'break-word',
-  },
-  checkoutSection: {
-    animation: '$fadeIn 225ms linear forwards',
-    opacity: 0,
-    padding: '12px 0',
-    [theme.breakpoints.down('md')]: {
-      '& button': {
-        marginLeft: 0,
-      },
-    },
-    [theme.breakpoints.down('lg')]: {
-      paddingBottom: `0px !important`,
+  };
+});
+
+const StyledCheckoutSection = styled('div')(({ theme }) => ({
+  padding: '12px 0',
+  [theme.breakpoints.down('md')]: {
+    '& button': {
+      marginLeft: 0,
     },
   },
-  price: {
-    color: theme.color.headline,
-    fontSize: '.8rem',
-    lineHeight: '1.5em',
-    marginTop: theme.spacing(),
+  [theme.breakpoints.down('lg')]: {
+    paddingBottom: `0px !important`,
   },
-  detail: {
+}));
+
+const SxTypography = () => {
+  const theme = useTheme();
+
+  return {
     color: theme.color.headline,
     fontSize: '.8rem',
     lineHeight: '1.5em',
-  },
-  createButton: {
-    marginTop: 18,
-    [theme.breakpoints.up('lg')]: {
-      width: '100%',
-    },
-  },
-}));
+  };
+};
 
-export default useStyles;
+export { StyledButton, StyledRoot, StyledCheckoutSection, SxTypography };

packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx

@@ -1,6 +1,6 @@
 import { KubeNodePoolResponse } from '@linode/api-v4';
 import * as React from 'react';
-import CheckoutBar from 'src/components/CheckoutBar';
+import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar';
 import { CircleProgress } from 'src/components/CircleProgress';
 import Divider from 'src/components/core/Divider';
 import Notice from 'src/components/Notice';
@@ -14,11 +14,11 @@ import { useAccount } from 'src/queries/account';
 import { useAccountAgreements } from 'src/queries/accountAgreements';
 import { useProfile } from 'src/queries/profile';
 import { useSpecificTypes } from 'src/queries/types';
+import { extendTypesQueryResult } from 'src/utilities/extendType';
 import { isEURegion } from 'src/utilities/formatRegion';
 import { getTotalClusterPrice, nodeWarning } from '../kubeUtils';
 import HACheckbox from './HACheckbox';
 import NodePoolSummary from './NodePoolSummary';
-import { extendTypesQueryResult } from 'src/utilities/extendType';
 
 export interface Props {
   pools: KubeNodePoolResponse[];