Merge pull request #861 from sharetribe/initial-message-blink

Fix clearing tx initial message before the page change is made
sharetribe · Jul 9, 2018 · 7ada1d9 · 7ada1d9
2 parents 7c7acb4 + 7dd6db1
commit 7ada1d9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version
 
+* [fix] Fix initial message input clearing too early in checkout page.
+  [#861](https://github.com/sharetribe/flex-template-web/pull/861)
 * [fix] Fix setting Topbar search input initial value.
   [#857](https://github.com/sharetribe/flex-template-web/pull/857)
 

diff --git a/src/forms/StripePaymentForm/StripePaymentForm.js b/src/forms/StripePaymentForm/StripePaymentForm.js
@@ -113,9 +113,6 @@ class StripePaymentForm extends Component {
       }
     });
   }
-  componentWillReceiveProps() {
-    this.setState(initialState);
-  }
   componentWillUnmount() {
     if (this.card) {
       this.card.removeEventListener('change', this.handleCardValueChange);
@@ -202,7 +199,7 @@ class StripePaymentForm extends Component {
     const classes = classNames(rootClassName || css.root, className);
     const cardClasses = classNames(css.card, {
       [css.cardSuccess]: this.state.cardValueValid,
-      [css.cardError]: this.state.error,
+      [css.cardError]: this.state.error && !submitInProgress,
     });
 
     const messagePlaceholder = intl.formatMessage(
@@ -243,7 +240,9 @@ class StripePaymentForm extends Component {
             this.cardContainer = el;
           }}
         />
-        {this.state.error ? <span style={{ color: 'red' }}>{this.state.error}</span> : null}
+        {this.state.error && !submitInProgress ? (
+          <span style={{ color: 'red' }}>{this.state.error}</span>
+        ) : null}
         <h3 className={css.messageHeading}>
           <FormattedMessage id="StripePaymentForm.messageHeading" />
         </h3>