Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/donate-form.tsx (TypeScript)

Code before:
import { withTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import Spinner from 'react-spinkit';
import { createSelector } from 'reselect';
import type { TFunction } from 'i18next';
import { Button } from '@freecodecamp/react-bootstrap';

import {
  defaultDonation,
  DonationAmount,
  type DonationConfig
} from '../../../../shared/config/donation-settings';
import { defaultDonationFormState } from '../../redux';
import { updateDonationFormState, postCharge } from '../../redux/actions';
import {
  isSignedInSelector,
  userSelector,
  isDonatingSelector,
  signInLoadingSelector,
  donationFormStateSelector,
  completedChallengesSelector
} from '../../redux/selectors';
import Spacer from '../helpers/spacer';
import { Themes } from '../settings/theme';
import { DonateFormState } from '../../redux/types';
import { CompletedChallenge } from '../../redux/prop-types';
import {
  CENTS_IN_DOLLAR,
  convertToTimeContributed,
  formattedAmountLabel
} from './utils';
import DonateCompletion from './donate-completion';
import PatreonButton from './patreon-button';
import PaypalButton from './paypal-button';
import StripeCardForm from './stripe-card-form';
import WalletsWrapper from './wallets-button';
import SecurityLockIcon from './security-lock-icon';
import {
  PaymentProvider,
  PaymentContext,
  PostPayment,
  HandleAuthentication,
  DonationApprovalData
} from './types';

import './donation.css';

type DonateFormComponentState = DonationConfig;

type PostCharge = (data: {
  paymentProvider: PaymentProvider;

Review comment (suggestion):
```suggestion
import type { CompletedChallenge } from '../../redux/prop-types';
```
Nit

Code after:
import { withTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import Spinner from 'react-spinkit';
import { createSelector } from 'reselect';
import type { TFunction } from 'i18next';
import { Button } from '@freecodecamp/react-bootstrap';

import {
  defaultDonation,
  DonationAmount,
  type DonationConfig
} from '../../../../shared/config/donation-settings';
import { defaultDonationFormState } from '../../redux';
import { updateDonationFormState, postCharge } from '../../redux/actions';
import {
  isSignedInSelector,
  userSelector,
  isDonatingSelector,
  signInLoadingSelector,
  donationFormStateSelector,
  completedChallengesSelector
} from '../../redux/selectors';
import Spacer from '../helpers/spacer';
import { Themes } from '../settings/theme';
import { DonateFormState } from '../../redux/types';
import type { CompletedChallenge } from '../../redux/prop-types';
import {
  CENTS_IN_DOLLAR,
  convertToTimeContributed,
  formattedAmountLabel
} from './utils';
import DonateCompletion from './donate-completion';
import PatreonButton from './patreon-button';
import PaypalButton from './paypal-button';
import StripeCardForm from './stripe-card-form';
import WalletsWrapper from './wallets-button';
import SecurityLockIcon from './security-lock-icon';
import {
  PaymentProvider,
  PaymentContext,
  PostPayment,
  HandleAuthentication,
  DonationApprovalData
} from './types';

import './donation.css';

type DonateFormComponentState = DonationConfig;

type PostCharge = (data: {
  paymentProvider: PaymentProvider;