chore(payments): remove legacy code

Because:

* The Payment Checkbox used to be part of the PaymentForm component. However, wherever the PaymentForm is used its PaymentCheckbox is currently hidden and not used. This seems to be legacy.

This commit:

* Removes PaymentCheckbox from PaymentForm and all applicable tests and stories.

Closes FXA-6303

packages/fxa-payments-server/src/components/PaymentForm/index.stories.tsx

@@ -9,7 +9,7 @@ import { SignInLayout } from '../AppLayout';
 import { CUSTOMER, SELECTED_PLAN } from '../../lib/mock-data';
 
 export default {
-  title: 'components/PaymentFormV2',
+  title: 'components/PaymentForm',
   component: PaymentForm,
 } as Meta;
 
@@ -30,13 +30,6 @@ const mockValidatorState = (): ValidatorState => ({
       fieldType: 'stripe',
       required: true,
     },
-    confirm: {
-      value: null,
-      valid: null,
-      error: null,
-      fieldType: 'input',
-      required: true,
-    },
     submit: {
       value: null,
       valid: null,
@@ -52,7 +45,6 @@ type MostPaymentFormProps = Omit<PaymentFormProps, 'submitNonce'>;
 const defaultPaymentFormProps: MostPaymentFormProps = {
   locale: 'auto',
   inProgress: false,
-  confirm: false,
   customer: undefined,
   plan: SELECTED_PLAN,
   onSubmit: action('onSubmit'),
@@ -94,11 +86,6 @@ export const WithoutPlan = storyWithProps({
   plan: undefined,
 });
 
-export const WithoutConfirmation = storyWithProps({
-  ...defaultPaymentFormProps,
-  confirm: false,
-});
-
 export const FrLocale = storyWithProps({
   ...defaultPaymentFormProps,
   locale: 'fr',

packages/fxa-payments-server/src/components/PaymentForm/index.test.tsx

@@ -146,36 +146,6 @@ it('calls onMounted and onEngaged', () => {
   expect(onEngaged).toBeCalledTimes(1);
 });
 
-it('when confirm = true, enables submit button when all fields are valid and checkbox checked', () => {
-  let { getByTestId } = renderWithValidFields({
-    confirm: true,
-    plan: SELECTED_PLAN,
-  });
-  expect(getByTestId('submit')).toHaveClass('payment-button-disabled');
-  fireEvent.click(getByTestId('confirm'));
-  expect(getByTestId('submit')).not.toHaveClass('payment-button-disabled');
-  expect(ReactGALog.logEvent).toBeCalledTimes(1);
-  expect(ReactGALog.logEvent).toBeCalledWith(
-    MOCK_EVENTS.AddPaymentInfo(SELECTED_PLAN)
-  );
-});
-
-it('omits the confirmation checkbox when confirm = false', () => {
-  const { queryByTestId } = renderWithLocalizationProvider(
-    <Subject {...{ confirm: false }} />
-  );
-  expect(queryByTestId('confirm')).not.toBeInTheDocument();
-  expect(ReactGALog.logEvent).not.toBeCalled();
-});
-
-it('includes the confirmation checkbox when confirm = true and plan supplied', () => {
-  const { queryByTestId } = renderWithLocalizationProvider(
-    <Subject {...{ confirm: true, plan: SELECTED_PLAN }} />
-  );
-  expect(queryByTestId('confirm')).toBeInTheDocument();
-  expect(ReactGALog.logEvent).not.toBeCalled();
-});
-
 it('calls onSubmit when all fields valid and submitted', async () => {
   const onSubmit = jest.fn();
   let { getByTestId } = renderWithValidFields({
@@ -254,24 +224,6 @@ it('submit button should still be enabled when all fields are valid', () => {
   expect(ReactGALog.logEvent).toBeCalledTimes(1);
 });
 
-it('does not call onSubmit if somehow submitted without confirm checked', async () => {
-  const onSubmit = jest.fn();
-  // renderWithValidFields does not check the confirm box
-  let { getByTestId } = renderWithValidFields({
-    confirm: true,
-    plan: SELECTED_PLAN,
-    onSubmit,
-    onChange: () => {},
-  });
-  // The user shouldn't be able to click a disabled submit button...
-  const submitButton = getByTestId('submit');
-  expect(submitButton).toHaveClass('payment-button-disabled');
-  // ...but let's force the form to submit and assert nothing happens.
-  fireEvent.submit(getByTestId('paymentForm'));
-  expect(onSubmit).not.toHaveBeenCalled();
-  expect(ReactGALog.logEvent).not.toBeCalled();
-});
-
 it('does not call onSubmit if somehow submitted while in progress', async () => {
   const onSubmit = jest.fn();
   let { getByTestId } = renderWithValidFields({
@@ -316,7 +268,6 @@ describe('with existing card', () => {
       <Subject
         customer={MOCK_CUSTOMER}
         plan={SELECTED_PLAN}
-        confirm={false}
         onSubmit={onSubmit}
       />
     );
@@ -348,14 +299,10 @@ describe('with existing PayPal billing agreement', () => {
       <Subject
         customer={{ ...MOCK_CUSTOMER, payment_provider: 'paypal' }}
         plan={SELECTED_PLAN}
-        confirm={false}
         onSubmit={onSubmit}
       />
     );
     fireEvent.click(getByTestId('submit'));
     expect(onSubmit).toHaveBeenCalledTimes(1);
-
-    // confirm checkbox was not checked
-    expect(ReactGALog.logEvent).not.toBeCalled();
   });
 });

packages/fxa-payments-server/src/components/PaymentForm/index.tsx

@@ -47,7 +47,6 @@ import {
   PaymentProviders,
 } from '../../lib/PaymentProvider';
 import { PaymentProviderDetails } from '../PaymentProviderDetails';
-import { PaymentConsentCheckbox } from '../PaymentConsentCheckbox';
 import { apiInvoicePreview } from '../../lib/apiClient';
 import {
   GAEvent,
@@ -88,7 +87,6 @@ export type PaypalSubmitHandler = (x: PaypalPaymentSubmitResult) => void;
 
 export type BasePaymentFormProps = {
   inProgress?: boolean;
-  confirm?: boolean;
   plan?: Plan;
   customer?: Customer | null;
   getString?: (id: string) => string;
@@ -111,7 +109,6 @@ export type BasePaymentFormProps = {
 
 export const PaymentForm = ({
   inProgress = false,
-  confirm = true,
   plan,
   customer,
   getString,
@@ -414,12 +411,6 @@ export const PaymentForm = ({
       {...{ onChange }}
     >
       {paymentSource}
-      {confirm && plan && (
-        <>
-          <PaymentConsentCheckbox plan={plan} />
-          <hr className="mt-4 tablet:mt-6" />
-        </>
-      )}
       {buttons}
     </Form>
   );

packages/fxa-payments-server/src/routes/Checkout/index.tsx

@@ -513,7 +513,6 @@ export const Checkout = ({
 
                   inProgress,
                   validatorInitialState,
-                  confirm: false,
                   submit: true,
                   plan: selectedPlan,
                   onMounted: onFormMounted,

packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.tsx

@@ -374,7 +374,6 @@ export const SubscriptionCreate = ({
                   shouldAllowSubmit: checkboxSet,
                   inProgress,
                   validatorInitialState,
-                  confirm: false,
                   plan: selectedPlan,
                   onMounted: onFormMounted,
                   onEngaged: onFormEngaged,

packages/fxa-payments-server/src/routes/Subscriptions/PaymentUpdateForm.tsx

@@ -320,7 +320,6 @@ export const PaymentUpdateForm = ({
                 submitNonce,
                 onSubmit,
                 inProgress: stripeSubmitInProgress,
-                confirm: false,
                 onCancel: hideUpdate,
                 onChange,
                 onMounted: onFormMounted,