Hide initial message on booking after enquiry

src/containers/CheckoutPage/CheckoutPage.js

@@ -198,6 +198,7 @@ export class CheckoutPageComponent extends Component {
       speculateTransactionInProgress,
       speculateTransactionError,
       speculatedTransaction,
+      enquiredTransaction,
       initiateOrderError,
       intl,
       params,
@@ -384,6 +385,8 @@ export class CheckoutPageComponent extends Component {
       </div>
     );
 
+    const showInitialMessageInput = !enquiredTransaction;
+
     const pageProps = { title, scrollingDisabled };
 
     if (isLoading) {
@@ -443,6 +446,7 @@ export class CheckoutPageComponent extends Component {
                   formId="CheckoutPagePaymentForm"
                   paymentInfo={intl.formatMessage({ id: 'CheckoutPage.paymentInfo' })}
                   authorDisplayName={currentAuthor.attributes.profile.displayName}
+                  showInitialMessageInput={showInitialMessageInput}
                 />
               ) : null}
             </section>

src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap

@@ -90,6 +90,7 @@ exports[`CheckoutPage matches snapshot 1`] = `
           inProgress={false}
           onSubmit={[Function]}
           paymentInfo="CheckoutPage.paymentInfo"
+          showInitialMessageInput={true}
         />
       </section>
     </div>

src/forms/StripePaymentForm/StripePaymentForm.js

@@ -192,6 +192,7 @@ class StripePaymentForm extends Component {
       paymentInfo,
       onChange,
       authorDisplayName,
+      showInitialMessageInput,
       intl,
     } = this.props;
     const submitInProgress = this.state.submitting || inProgress;
@@ -225,6 +226,24 @@ class StripePaymentForm extends Component {
       </span>
     );
 
+    const initialMessage = showInitialMessageInput ? (
+      <div>
+        <h3 className={css.messageHeading}>
+          <FormattedMessage id="StripePaymentForm.messageHeading" />
+        </h3>
+        <label className={css.messageLabel} htmlFor={`${formId}-message`}>
+          <FormattedMessage id="StripePaymentForm.messageLabel" values={{ messageOptionalText }} />
+        </label>
+        <ExpandingTextarea
+          id={`${formId}-message`}
+          className={css.message}
+          placeholder={messagePlaceholder}
+          value={this.state.message}
+          onChange={handleMessageChange}
+        />
+      </div>
+    ) : null;
+
     return (
       <Form className={classes} onSubmit={this.handleSubmit}>
         <h3 className={css.paymentHeading}>
@@ -243,19 +262,7 @@ class StripePaymentForm extends Component {
         {this.state.error && !submitInProgress ? (
           <span style={{ color: 'red' }}>{this.state.error}</span>
         ) : null}
-        <h3 className={css.messageHeading}>
-          <FormattedMessage id="StripePaymentForm.messageHeading" />
-        </h3>
-        <label className={css.messageLabel} htmlFor={`${formId}-message`}>
-          <FormattedMessage id="StripePaymentForm.messageLabel" values={{ messageOptionalText }} />
-        </label>
-        <ExpandingTextarea
-          id={`${formId}-message`}
-          className={css.message}
-          placeholder={messagePlaceholder}
-          value={this.state.message}
-          onChange={handleMessageChange}
-        />
+        {initialMessage}
         <div className={css.submitContainer}>
           <p className={css.paymentInfo}>{paymentInfo}</p>
           <PrimaryButton
@@ -277,6 +284,7 @@ StripePaymentForm.defaultProps = {
   rootClassName: null,
   inProgress: false,
   onChange: () => null,
+  showInitialMessageInput: true,
 };
 
 const { bool, func, string } = PropTypes;
@@ -291,6 +299,7 @@ StripePaymentForm.propTypes = {
   onChange: func,
   paymentInfo: string.isRequired,
   authorDisplayName: string.isRequired,
+  showInitialMessageInput: bool,
 };
 
 export default injectIntl(StripePaymentForm);