Disable adding of a payment method

OdyseeTeam · Dec 2, 2024 · 73bd129 · 73bd129
1 parent fee48d1
commit 73bd129
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 128 deletions.
diff --git a/ui/component/settingsStripeCard/index.js b/ui/component/settingsStripeCard/index.js
@@ -2,15 +2,13 @@ import { connect } from 'react-redux';
 import { doSetPreferredCurrency } from 'redux/actions/settings';
 import { selectPreferredCurrency } from 'redux/selectors/settings';
 import { selectCustomerStatusFetching, selectCustomerStatus, selectCardDetails } from 'redux/selectors/stripe';
-import { selectUserEmail } from 'redux/selectors/user';
 import { doOpenModal } from 'redux/actions/app';
-import { doGetCustomerStatus, doRemoveCardForPaymentMethodId, doCustomerSetup } from 'redux/actions/stripe';
+import { doGetCustomerStatus, doRemoveCardForPaymentMethodId } from 'redux/actions/stripe';
 import { doToast } from 'redux/actions/notifications';
 
 import SettingsStripeCard from './view';
 
 const select = (state) => ({
-  email: selectUserEmail(state),
   preferredCurrency: selectPreferredCurrency(state),
   customerStatusFetching: selectCustomerStatusFetching(state),
   customerStatus: selectCustomerStatus(state),
@@ -23,7 +21,6 @@ const perform = {
   doToast,
   doSetPreferredCurrency,
   doRemoveCardForPaymentMethodId,
-  doCustomerSetup,
 };
 
 export default connect(select, perform)(SettingsStripeCard);
diff --git a/ui/component/settingsStripeCard/view.jsx b/ui/component/settingsStripeCard/view.jsx
@@ -1,9 +1,9 @@
 // @flow
 import React from 'react';
 
-import { Elements, useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
+import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
-import { Form, FormField, Submit } from 'component/common/form';
+import { FormField } from 'component/common/form';
 import { STRIPE_PUBLIC_KEY } from 'config';
 
 import * as ICONS from 'constants/icons';
@@ -19,13 +19,11 @@ import Spinner from 'component/spinner';
 import './style.scss';
 
 const stripePromise = loadStripe(STRIPE_PUBLIC_KEY);
-const CARD_NAME_REGEX = /[0-9!@#$%^&*()_+=[\]{};:"\\|,<>?~]/;
 
 type WrapperProps = {
   isModal: boolean,
   setIsBusy: (isBusy: boolean) => void,
   // -- redux --
-  email: ?string,
   preferredCurrency: string,
   customerStatusFetching: ?boolean,
   cardDetails: StripeCardDetails,
@@ -34,24 +32,18 @@ type WrapperProps = {
   doToast: (params: { message: string }) => void,
   doOpenModal: (modalId: string, {}) => void,
   doRemoveCardForPaymentMethodId: (paymentMethodId: string) => Promise<any>,
-  doCustomerSetup: () => Promise<StripeCustomerSetupResponse>,
 };
 
 type Props = WrapperProps & {
   promisePending: ?boolean,
-  stripeError: ?string,
   reloadForm: () => void,
 };
 
 const SettingsStripeCard = (props: Props) => {
   const {
     isModal,
-    promisePending,
-    stripeError,
-    reloadForm,
     setIsBusy,
     // -- redux --
-    email,
     preferredCurrency,
     customerStatusFetching,
     cardDetails,
@@ -60,54 +52,8 @@ const SettingsStripeCard = (props: Props) => {
     doToast,
     doOpenModal,
     doRemoveCardForPaymentMethodId,
-    doCustomerSetup,
   } = props;
 
-  const stripe = useStripe();
-  const elements = useElements();
-
-  const [cardNameValue, setCardNameValue] = React.useState('');
-  const [isLoading, setLoading] = React.useState(false);
-  const [formError, setFormError] = React.useState();
-
-  function confirmCardSetup(clientSecret) {
-    const cardElement = elements.getElement(CardElement);
-
-    stripe
-      .confirmCardSetup(clientSecret, {
-        payment_method: { card: cardElement, billing_details: { email, name: cardNameValue } },
-      })
-      .then((result) => {
-        if (result.error) {
-          setLoading(false);
-          setFormError(result.error.message);
-        } else {
-          // The PaymentMethod was successfully set up
-          // hide and show the proper divs
-          stripe.retrieveSetupIntent(clientSecret).then(doGetCustomerStatus);
-        }
-      });
-  }
-
-  function handleSubmit(event) {
-    if (!stripe || !elements) return;
-
-    event.preventDefault();
-    setLoading(true);
-
-    doCustomerSetup()
-      .then((customerSetupResponse: StripeCustomerSetupResponse) => {
-        confirmCardSetup(customerSetupResponse.client_secret);
-      })
-      .catch(() => setLoading(false));
-  }
-
-  React.useEffect(() => {
-    if (stripeError) {
-      setFormError(stripeError);
-    }
-  }, [stripeError]);
-
   React.useEffect(() => {
     if (cardDetails === undefined) {
       doGetCustomerStatus();
@@ -116,33 +62,14 @@ const SettingsStripeCard = (props: Props) => {
 
   React.useEffect(() => {
     if (cardDetails) {
-      setLoading(false);
       if (setIsBusy) setIsBusy(false);
-      setCardNameValue('');
     }
   }, [cardDetails, setIsBusy]);
 
   // $FlowFixMe
   const returnToValue = new URLSearchParams(location.search).get('returnTo');
   let shouldShowBackToMembershipButton = returnToValue === 'premium';
 
-  function clearErrorMessage() {
-    setFormError(undefined);
-  }
-
-  function onChangeCardName(event) {
-    const { value } = event.target;
-
-    if (CARD_NAME_REGEX.test(value)) {
-      setFormError(__('Special characters and numbers are not allowed'));
-    } else if (value.length > 48) {
-      setFormError(__('Name must be less than 48 characters long'));
-    } else {
-      clearErrorMessage();
-      setCardNameValue(value);
-    }
-  }
-
   if (cardDetails) {
     return (
       <div className="successCard">
@@ -228,55 +155,7 @@ const SettingsStripeCard = (props: Props) => {
   }
 
   if (cardDetails === null) {
-    return (
-      <Form className="stripe-card__form" onSubmit={handleSubmit}>
-        <FormField
-          className="stripe-card__form-input"
-          name="name-on-card"
-          type="input"
-          label={__('Name on card')}
-          onChange={onChangeCardName}
-          value={cardNameValue}
-          disabled={stripeError}
-          autoFocus
-        />
-
-        <FormField
-          name="card-details"
-          type="input"
-          label={__('Card details')}
-          inputElem={
-            <CardElement
-              className={'stripe-card__form-input' + (stripeError ? ' disabled' : '')}
-              onChange={(event) => setFormError(event.error?.message)}
-            />
-          }
-        />
-
-        {stripeError ? (
-          <Button
-            className="button--card-link"
-            label={promisePending ? <div className="stripe__spinner" /> : __('Reload')}
-            onClick={reloadForm}
-          />
-        ) : (
-          <Submit
-            className="button--card-link"
-            disabled={isLoading || formError || !cardNameValue}
-            label={isLoading ? <div className="stripe__spinner" /> : __('Add Card')}
-          />
-        )}
-
-        {formError && (
-          <span className="error__text error__text--stripe-card">
-            <p>{formError}</p>
-            {stripeError ? (
-              <p>{__('You may have blockers turned on, try turning them off and reloading.')}</p>
-            ) : undefined}
-          </span>
-        )}
-      </Form>
-    );
+    return <div className="main--empty">{'Adding a payment method has been disabled.'}</div>;
   }
 
   return (