refactor: [M3-7532] - Payment Method Row Storybook v7 Story (#9958)

* props and export cleanup

* add tests, start story

* starting story

* stories for storybook

* update comments

* Added changeset: Payment Method Row V7 story migration

* address feedback

* update key

* feedback

packages/manager/.changeset/pr-9958-tech-stories-1701721635562.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Payment Method Row V7 story migration ([#9958](https://github.com/linode/manager/pull/9958))

packages/manager/src/components/PaymentMethodRow/DeletePaymentMethodDialog.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { DeletePaymentMethodDialog } from './DeletePaymentMethodDialog';
+
+const props = {
+  error: 'some error',
+  loading: false,
+  onClose: vi.fn(),
+  onDelete: vi.fn(),
+  open: true,
+  paymentMethod: undefined,
+};
+
+describe('Delete Payment Method Dialog', () => {
+  it('renders the delete payment method dialog', () => {
+    const screen = renderWithTheme(<DeletePaymentMethodDialog {...props} />);
+
+    const headerText = screen.getByText('Delete Payment Method');
+    expect(headerText).toBeVisible();
+
+    const deleteText = screen.getByText(
+      'Are you sure you want to delete this payment method?'
+    );
+    expect(deleteText).toBeVisible();
+
+    const buttons = screen.getAllByRole('button');
+    expect(buttons?.length).toBe(3);
+  });
+
+  it('calls the corresponding functions when buttons are clicked', () => {
+    const screen = renderWithTheme(<DeletePaymentMethodDialog {...props} />);
+
+    const deleteButton = screen.getByText('Delete');
+    expect(deleteButton).toBeVisible();
+    fireEvent.click(deleteButton);
+    expect(props.onDelete).toHaveBeenCalled();
+
+    const cancelButton = screen.getByText('Cancel');
+    expect(cancelButton).toBeVisible();
+    fireEvent.click(cancelButton);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+});

packages/manager/src/components/PaymentMethodRow/DeletePaymentMethodDialog.tsx

@@ -1,16 +1,16 @@
 import { PaymentMethod } from '@linode/api-v4/lib/account/types';
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
 
 import { ActionsPanel } from '../ActionsPanel/ActionsPanel';
 import { Grid } from '../Grid';
-import ThirdPartyPayment from './ThirdPartyPayment';
+import { ThirdPartyPayment } from './ThirdPartyPayment';
 
-export const useStyles = makeStyles((theme: Theme) => ({
+export const useStyles = makeStyles()((theme: Theme) => ({
   container: {
     flexWrap: 'nowrap',
     marginTop: theme.spacing(1),
@@ -30,9 +30,9 @@ interface Props {
   paymentMethod: PaymentMethod | undefined;
 }
 
-export const DeletePaymentMethodDialog: React.FC<Props> = (props) => {
+export const DeletePaymentMethodDialog = React.memo((props: Props) => {
   const { error, loading, onClose, onDelete, open, paymentMethod } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const actions = (
     <ActionsPanel
@@ -70,6 +70,4 @@ export const DeletePaymentMethodDialog: React.FC<Props> = (props) => {
       </Grid>
     </ConfirmationDialog>
   );
-};
-
-export default React.memo(DeletePaymentMethodDialog);
+});

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.stories.tsx

@@ -0,0 +1,78 @@
+import { CardType } from '@linode/api-v4';
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+
+import { paymentMethodFactory } from 'src/factories';
+
+import { PaymentMethodRow } from './PaymentMethodRow';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof PaymentMethodRow>;
+
+const onDelete = action('onDelete');
+
+const supportedCreditCards: (CardType | undefined)[] = [
+  'Visa',
+  'MasterCard',
+  'American Express',
+  'Discover',
+  'JCB',
+  undefined,
+];
+
+const CreditCardExamples = () => {
+  const paymentMethods = supportedCreditCards.map((creditCard) => (
+    <PaymentMethodRow
+      paymentMethod={paymentMethodFactory.build({
+        data: {
+          card_type: creditCard,
+        },
+        type: 'credit_card',
+      })}
+      key={creditCard ?? 'undefined-credit-card'}
+      onDelete={onDelete}
+    />
+  ));
+
+  return <>{paymentMethods}</>;
+};
+
+export const CreditCards: Story = {
+  render: () => <CreditCardExamples />,
+};
+
+export const GooglePay: Story = {
+  render: (args) => <PaymentMethodRow {...args} />,
+};
+
+export const PayPal: Story = {
+  render: (args) => (
+    <PaymentMethodRow
+      {...args}
+      paymentMethod={paymentMethodFactory.build({
+        data: {
+          email: '[email protected]',
+          paypal_id: 'ABCDEFG123',
+        },
+        type: 'paypal',
+      })}
+    />
+  ),
+};
+
+const meta: Meta<typeof PaymentMethodRow> = {
+  args: {
+    onDelete,
+    paymentMethod: paymentMethodFactory.build({
+      data: {
+        card_type: 'Visa',
+      },
+      type: 'google_pay',
+    }),
+  },
+  component: PaymentMethodRow,
+  title: 'Components/Payment Method Row',
+};
+
+export default meta;

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.test.tsx

@@ -8,7 +8,7 @@ import { paymentMethodFactory } from 'src/factories';
 import BillingSummary from 'src/features/Billing/BillingPanels/BillingSummary';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import PaymentMethodRow from './PaymentMethodRow';
+import { PaymentMethodRow } from './PaymentMethodRow';
 
 vi.mock('@linode/api-v4/lib/account', async () => {
   const actual = await vi.importActual<any>('@linode/api-v4/lib/account');

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx

@@ -13,14 +13,24 @@ import { Paper } from 'src/components/Paper';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
 import { queryKey } from 'src/queries/accountPayment';
 
-import ThirdPartyPayment from './ThirdPartyPayment';
+import { ThirdPartyPayment } from './ThirdPartyPayment';
 
 interface Props {
+  /**
+   * Function called when the delete button in the Action Menu is pressed.
+   */
   onDelete: () => void;
+  /**
+   * Payment method type and data.
+   */
   paymentMethod: PaymentMethod;
 }
 
-const PaymentMethodRow = (props: Props) => {
+/**
+ * The `PaymentMethodRow` displays the given payment method and supports various actions for each payment method. It can be used
+ * for credit cards, Google Pay, and PayPal.
+ */
+export const PaymentMethodRow = (props: Props) => {
   const theme = useTheme();
   const { onDelete, paymentMethod } = props;
   const { is_default, type } = paymentMethod;
@@ -125,5 +135,3 @@ const PaymentMethodRow = (props: Props) => {
     </Paper>
   );
 };
-
-export default PaymentMethodRow;

packages/manager/src/components/PaymentMethodRow/ThirdPartyPayment.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { paymentMethodFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import ThirdPartyPayment from './ThirdPartyPayment';
+import { ThirdPartyPayment } from './ThirdPartyPayment';
 
 it('Displays credit card type and last four digits when payment method is Google Pay', () => {
   const googlePayPaymentMethod = paymentMethodFactory.build({