Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/paypal-button-script-loader.tsx (TypeScript)

Code before:
  }
}

export default class PayPalButtonScriptLoader extends Component<
  PayPalButtonScriptLoaderProps,
  PayPalButtonScriptLoaderState
> {
  // Lint says that paypal does not exist on window
  state = {
    isSdkLoaded: window.paypal ? true : false,
    isSubscription: true
  };

  componentDidMount(): void {
    this.loadScript(this.props.isSubscription, true);
  }

  componentWillUnmount(): void {
    scriptRemover('paypal-sdk');
  }

  componentDidUpdate(prevProps: {
    isSubscription: boolean;
    style: {
      color: string;
      height: number;
      tagline: boolean;
    };
    isMinimalForm: boolean | undefined;
  }): void {
    // We need to load a new script if any of the following changes.
    if (
      prevProps.isSubscription !== this.state.isSubscription ||
      prevProps.style.color !== this.props.style.color ||
      prevProps.style.tagline !== this.props.style.tagline ||
      prevProps.style.height !== this.props.style.height ||
      prevProps.isMinimalForm !== this.props.isMinimalForm
    ) {
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({ isSdkLoaded: false });
      this.loadScript(this.state.isSubscription, true);
    }
  }

  loadScript(subscription: boolean, deleteScript: boolean | undefined): void {
    if (deleteScript) scriptRemover('paypal-sdk');
    const allowCardPayment = this.props.isMinimalForm ? 'card,' : '';
    let queries = `?client-id=${this.props.clientId}&disable-funding=${allowCardPayment}credit,bancontact,blik,eps,giropay,ideal,mybank,p24,sepa,sofort,venmo`;
    if (subscription) queries += '&vault=true&intent=subscription';

    scriptLoader(

Review comment (suggestion):
I'm not sure why we're setting `isSubscription` this way, but this code is being used.

Code after:
  }
}

export default class PayPalButtonScriptLoader extends Component<
  PayPalButtonScriptLoaderProps,
  PayPalButtonScriptLoaderState
> {
  // Lint says that paypal does not exist on window
  state = {
    isSdkLoaded: window.paypal ? true : false,
    isSubscription: true
  };

  static displayName = 'PayPalButtonScriptLoader';

  static getDerivedStateFromProps(
    props: PayPalButtonScriptLoaderProps,
    state: PayPalButtonScriptLoaderState
  ): { isSubscription: boolean } | null {
    const { isSubscription } = props;
    if (isSubscription !== state.isSubscription) {
      return { isSubscription: isSubscription };
    }
    return null;
  }

  componentDidMount(): void {
    this.loadScript(this.props.isSubscription, true);
  }

  componentWillUnmount(): void {
    scriptRemover('paypal-sdk');
  }

  componentDidUpdate(prevProps: {
    isSubscription: boolean;
    style: {
      color: string;
      height: number;
      tagline: boolean;
    };
    isMinimalForm: boolean | undefined;
  }): void {
    // We need to load a new script if any of the following changes.
    if (
      prevProps.isSubscription !== this.state.isSubscription ||
      prevProps.style.color !== this.props.style.color ||
      prevProps.style.tagline !== this.props.style.tagline ||
      prevProps.style.height !== this.props.style.height ||
      prevProps.isMinimalForm !== this.props.isMinimalForm
    ) {