Handle errors better

webkom · Apr 21, 2020 · e31cc9e · e31cc9e
1 parent 9dfebcc
commit e31cc9e
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 29 deletions.
diff --git a/app/models.js b/app/models.js
@@ -142,7 +142,8 @@ export type EventRegistration = {
   feedback: string,
   sharedMemberships?: number,
   consent: EventRegistrationPhotoConsent,
-  clientSecret?: string
+  clientSecret?: string,
+  paymentError?: string
 };
 
 type EventPoolBase = {

diff --git a/app/reducers/registrations.js b/app/reducers/registrations.js
@@ -31,7 +31,6 @@ export default createEntityReducer({
         case Event.REQUEST_REGISTER.SUCCESS:
         case Event.ADMIN_REGISTER.SUCCESS:
         case Event.SOCKET_REGISTRATION.SUCCESS:
-        case Event.PAYMENT_QUEUE.SUCCESS:
         case Event.SOCKET_PAYMENT.FAILURE: {
           const registration = normalize(action.payload, registrationSchema)
             .entities.registrations[action.payload.id];
@@ -40,7 +39,8 @@ export default createEntityReducer({
           }
           newState.byId[registration.id] = {
             ...omit(newState.byId[registration.id], 'unregistrationDate'),
-            ...registration
+            ...registration,
+            paymentError: (action.meta && action.meta.paymentError) || null
           };
           newState.items = union(newState.items, [registration.id]);
           break;
@@ -69,6 +69,18 @@ export default createEntityReducer({
           };
           break;
         }
+        case Event.PAYMENT_QUEUE.FAILURE: {
+          const registration = normalize(action.payload, registrationSchema)
+            .entities.registrations[action.payload.id];
+          if (!registration) {
+            return;
+          }
+          newState.byId[registration.id] = {
+            ...omit(newState.byId[registration.id], 'unregistrationDate'),
+            paymentError: action.payload.response.jsonData.detail
+          };
+          break;
+        }
         case Event.SOCKET_INITIATE_PAYMENT.SUCCESS: {
           const registration = normalize(action.payload, registrationSchema)
             .entities.registrations[action.payload.id];

diff --git a/app/routes/events/components/JoinEventForm.js b/app/routes/events/components/JoinEventForm.js
@@ -120,6 +120,7 @@ const PaymentForm = ({
       <b>{(event.price / 100).toFixed(2).replace('.', ',')} kr</b>
     </div>
     <PaymentRequestForm
+      paymentError={registration.paymentError}
       createPaymentIntent={createPaymentIntent}
       event={event}
       currentUser={currentUser}

diff --git a/app/routes/events/components/Stripe.css b/app/routes/events/components/Stripe.css
@@ -1,4 +1,4 @@
-@import 'app/styles/variables.css';
+@import '~app/styles/variables.css';
 
 .StripeLabel {
   color: #6b7c93;

diff --git a/app/routes/events/components/StripeElement.js b/app/routes/events/components/StripeElement.js
@@ -25,23 +25,8 @@ type Props = {
   currentUser: User,
   createPaymentIntent: () => Promise<*>,
   paymentStatus: EventRegistrationPaymentStatus,
-  clientSecret?: string
-};
-
-/*
- * Taken from https://stripe.com/docs/api/errors
- */
-type StripeError = {
-  type: string,
-  charge: string,
-  code: string,
-  decline_code: string,
-  message: string,
-  param: string,
-  doc_url: string,
-  payment_intent: Object,
-  setup_intent: Object,
-  source: Object
+  clientSecret?: string,
+  paymentError?: string
 };
 
 type FormProps = Props & {
@@ -50,23 +35,23 @@ type FormProps = Props & {
 
 type CardFormProps = FormProps & {
   ledgend: string,
-  setError: StripeError => void,
+  setError: string => void,
   setSuccess: () => void,
   setLoading: boolean => void,
   stripe: Stripe,
   paymentStarted: boolean
 };
 
 type PaymentRequestFormProps = FormProps & {
-  setError: StripeError => void,
+  setError: string => void,
   setSuccess: () => void,
   setLoading: boolean => void,
   setPaymentRequest: boolean => void,
   stripe: Stripe
 };
 
 type FormState = {
-  error?: StripeError | null,
+  error?: string | null,
   success?: boolean,
   loading: boolean,
   paymentRequest: boolean
@@ -83,6 +68,16 @@ type PaymentRequestFormState = {
   complete?: string => void
 };
 
+// See https://stripe.com/docs/js/appendix/payment_response#payment_response_object-complete
+// for the statuses
+type CompleteStatus =
+  | 'success'
+  | 'fail'
+  | 'invalid_payer_name'
+  | 'invalid_payer_phone'
+  | 'invalid_payer_email'
+  | 'invalid_shipping_address';
+
 const StripeElementStyle = {
   style: {
     base: {
@@ -119,7 +114,7 @@ class CardForm extends React.Component<CardFormProps, CardFormState> {
     const { stripe } = this.props;
     const { error } = await stripe.handleCardPayment(clientSecret);
     if (error) {
-      this.props.setError(error);
+      this.props.setError(error.message);
     } else {
       this.props.setSuccess();
     }
@@ -210,9 +205,28 @@ class PaymentRequestForm extends React.Component<
   }
 
   componentDidUpdate(prevProps) {
-    if (!prevProps.clientSecret && this.props.clientSecret) {
-      this.completePayment(this.props.clientSecret);
+    const { clientSecret, paymentError } = this.props;
+
+    if (!prevProps.clientSecret && clientSecret) {
+      this.completePayment(clientSecret);
     }
+    if (paymentError) {
+      this.completePaymentManual('fail');
+      this.props.setError(paymentError);
+    }
+  }
+
+  componentWillUnmount() {
+    /*
+     * If the component unmounts, the registration will have updated,
+     * and the user will not be able to pay.
+     * This can be because the payment updated in the backend,
+     * or the user has unregistered. In the rare case that the payment has started
+     * processing, we cancel just so the user does not have to wait until the
+     * payment request times out.
+     *
+     */
+    this.completePaymentManual('fail');
   }
 
   completePayment = async clientSecret => {
@@ -238,13 +252,27 @@ class PaymentRequestForm extends React.Component<
 
     const { error } = await stripe.handleCardPayment(clientSecret);
     if (error) {
-      this.props.setError(error);
+      this.props.setError(error.message);
     } else {
       this.props.setSuccess();
     }
     this.props.setLoading(false);
   };
 
+  completePaymentManual = async (status: CompleteStatus) => {
+    const { complete } = this.state;
+
+    if (!complete) {
+      return;
+    }
+
+    complete(status);
+
+    if (status === 'success') {
+      this.props.setSuccess();
+    }
+  };
+
   render() {
     return (
       <div style={{ flex: 1 }}>
@@ -299,7 +327,7 @@ class PaymentForm extends React.Component<FormProps, FormState> {
     ) : (
       <>
         {loading && <LoadingIndicator loading />}
-        {error && <div className={stripeStyles.error}>{error.message}</div>}
+        {error && <div className={stripeStyles.error}>{error}</div>}
         <div style={{ display: loading ? 'none' : 'block' }}>
           <Elements locale="no">
             <InjectedPaymentRequestForm