Payment form label and styles

src/containers/CheckoutPage/CheckoutPage.css

@@ -88,7 +88,7 @@
   @media (--viewportLarge) {
     flex-grow: 0;
     flex-basis: 519px;
-    margin-top: 177px;
+    margin-top: 121px;
     margin-right: 132px;
   }
 }

src/containers/StripePaymentForm/StripePaymentForm.css

@@ -5,17 +5,6 @@
   flex-direction: column;
 }
 
-.label {
-  margin: 0;
-
-  @media (--viewportMedium) {
-    margin-bottom: 2px;
-  }
-  @media (--viewportLarge) {
-    margin-bottom: 4px;
-  }
-}
-
 .card {
   @apply --marketplaceInputStyles;
 
@@ -52,9 +41,20 @@
   }
 }
 
+.paymentLabel {
+  margin: 0;
+
+  @media (--viewportMedium) {
+    margin-bottom: 2px;
+  }
+  @media (--viewportLarge) {
+    margin-bottom: 4px;
+  }
+}
+
 .messageHeading {
   color: var(--matterColorAnti);
-  margin: 40px 0 44px 0;
+  margin: 40px 0 14px 0;
 
   @media (--viewportMedium) {
     margin: 41px 0 26px 0;
@@ -64,6 +64,18 @@
   }
 }
 
+.messageLabel {
+  margin: 0 0 5px 0;
+
+  @media (--viewportMedium) {
+    margin: 0 0 6px 0;
+  }
+}
+
+.messageOptional {
+  color: var(--matterColorAnti);
+}
+
 .message {
   border-bottom-color: var(--matterColorAnti);
 }
@@ -72,7 +84,7 @@
   margin-top: auto;
 
   @media (--viewportLarge) {
-    margin-top: 133px;
+    margin-top: 72px;
   }
 }
 
@@ -81,6 +93,7 @@
   color: var(--matterColorAnti);
   text-align: center;
   padding: 0 42px;
+  margin: 28px 0 0 0;
 
   @media (--viewportLarge) {
     /* TODO this is ugly overwrite to fix unconsistent font styles */
@@ -90,9 +103,12 @@
 }
 
 .submitButton {
-  margin-top: 21px;
+  margin-top: 22px;
 
+  @media (--viewportMedium) {
+    margin-top: 26px;
+  }
   @media (--viewportLarge) {
-    margin-top: 18px;
+    margin-top: 17px;
   }
 }

src/containers/StripePaymentForm/StripePaymentForm.example.js

@@ -6,6 +6,7 @@ export const Empty = {
   props: {
     formId: 'StripePaymentFormExample',
     authorDisplayName: 'Janne K',
+    paymentInfo: 'You might or might not be charged yet',
     onChange: values => {
       console.log('form onChange:', values);
     },

src/containers/StripePaymentForm/StripePaymentForm.js

@@ -222,12 +222,18 @@ class StripePaymentForm extends Component {
       });
     };
 
+    const messageOptionalText = (
+      <span className={css.messageOptional}>
+        <FormattedMessage id="StripePaymentForm.messageOptionalText" />
+      </span>
+    );
+
     return (
       <Form className={classes} onSubmit={this.handleSubmit}>
         <h3 className={css.paymentHeading}>
           <FormattedMessage id="StripePaymentForm.paymentHeading" />
         </h3>
-        <label className={css.label} htmlFor={`${formId}-card`}>
+        <label className={css.paymentLabel} htmlFor={`${formId}-card`}>
           <FormattedMessage id="StripePaymentForm.creditCardDetails" />
         </label>
         <div
@@ -241,14 +247,18 @@ class StripePaymentForm extends Component {
         <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 className={css.submitContainer}>
-          {paymentInfo ? <p className={css.paymentInfo}>{paymentInfo}</p> : null}
+          <p className={css.paymentInfo}>{paymentInfo}</p>
           <PrimaryButton
             className={css.submitButton}
             type="submit"
@@ -267,7 +277,6 @@ StripePaymentForm.defaultProps = {
   className: null,
   rootClassName: null,
   inProgress: false,
-  paymentInfo: null,
   onChange: () => null,
 };
 
@@ -281,7 +290,7 @@ StripePaymentForm.propTypes = {
   intl: intlShape.isRequired,
   onSubmit: func.isRequired,
   onChange: func,
-  paymentInfo: string,
+  paymentInfo: string.isRequired,
   authorDisplayName: string.isRequired,
 };
 

src/translations/en.json

@@ -521,6 +521,8 @@
   "StripePaymentForm.creditCardDetails": "Credit card details",
   "StripePaymentForm.genericError": "Could not handle payment data. Please try again.",
   "StripePaymentForm.messageHeading": "Message",
+  "StripePaymentForm.messageLabel": "Say hello to your host {messageOptionalText}",
+  "StripePaymentForm.messageOptionalText": "• optional",
   "StripePaymentForm.messagePlaceholder": "Hello {name}! I'm looking forward to…",
   "StripePaymentForm.paymentHeading": "Payment",
   "StripePaymentForm.stripe.api_connection_error": "Could not connect to Stripe API.",