From c2d52681eda374a3129fe5a0020c29de8eaadaef Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Tue, 28 Jul 2020 18:18:31 +0530
Subject: [PATCH] Added error handling for plan checkout

refs https://github.com/TryGhost/members.js/issues/78

- Adds error handling for plan checkout when trying to checkout existing plan
---
 .../src/components/pages/AccountPlanPage.js   | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js
index 6af12ff00d..b57a7b24ab 100644
--- a/ghost/portal/src/components/pages/AccountPlanPage.js
+++ b/ghost/portal/src/components/pages/AccountPlanPage.js
@@ -60,33 +60,34 @@ export default class AccountPlanPage extends React.Component {
 
     onPlanCheckout(e) {
         e.preventDefault();
-        const {onAction, member} = this.context;
-        const plan = this.state.plan;
-        const errors = this.validateForm();
-        if (errors && Object.keys(errors).length > 0) {
-            this.setState({
+        this.setState((state) => {
+            const errors = this.validateForm({state});
+            return {
                 errors
-            });
-        } else {
-            this.setState({
-                errors: {}
-            });
-            if (member.paid) {
-                const {subscriptions} = member;
-                const subscriptionId = subscriptions[0].id;
-                onAction('updateSubscription', {plan, subscriptionId});
-            } else {
-                onAction('checkoutPlan', {plan});
+            };
+        }, () => {
+            const {onAction, member} = this.context;
+            const {plan, errors} = this.state;
+            if (!(errors && Object.keys(errors).length > 0)) {
+                if (member.paid) {
+                    const {subscriptions} = member;
+                    const subscriptionId = subscriptions[0].id;
+                    onAction('updateSubscription', {plan, subscriptionId});
+                } else {
+                    onAction('checkoutPlan', {plan});
+                }
             }
-        }
+        });
     }
 
     onPlanSelect(e, name) {
         e.preventDefault();
         // Hack: React checkbox gets out of sync with dom state with instant update
         setTimeout(() => {
-            this.setState({
-                plan: name
+            this.setState((state) => {
+                return {
+                    plan: name
+                };
             });
         }, 5);
     }
@@ -99,10 +100,10 @@ export default class AccountPlanPage extends React.Component {
         return null;
     }
 
-    validateForm() {
+    validateForm({state}) {
         const {member} = this.context;
         const activePlan = this.getActivePlanName({member});
-        if (activePlan === this.state.plan) {
+        if (activePlan === state.plan) {
             return {
                 global: 'Please select a different plan'
             };