Add SendMessageForm component

src/containers/SendMessageForm/SendMessageForm.css

@@ -0,0 +1,11 @@
+@import '../../marketplace.css';
+
+.root {
+}
+
+.textarea {
+  border-bottom-color: var(--attentionColor);
+}
+
+.submitButton {
+}

src/containers/SendMessageForm/SendMessageForm.example.js

@@ -0,0 +1,21 @@
+import SendMessageForm from './SendMessageForm';
+
+export const Empty = {
+  component: SendMessageForm,
+  props: {
+    messagePlaceholder: 'Send message to Juho…',
+    onChange: values => {
+      console.log('values changed to:', values);
+    },
+    onSubmit: values => {
+      console.log('submit values:', values);
+    },
+    onFocus: () => {
+      console.log('focus on message form');
+    },
+    onBlur: () => {
+      console.log('blur on message form');
+    },
+  },
+  group: 'forms',
+};

src/containers/SendMessageForm/SendMessageForm.js

@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import { string, bool, func } from 'prop-types';
+import { compose } from 'redux';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import classNames from 'classnames';
+import { Form, TextInputField, SecondaryButton } from '../../components';
+
+import css from './SendMessageForm.css';
+
+const BLUR_TIMEOUT_MS = 100;
+
+class SendMessageFormComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.blurTimeoutId = null;
+  }
+  handleFocus() {
+    this.props.onFocus();
+    window.clearTimeout(this.blurTimeoutId);
+  }
+  handleBlur() {
+    // We only trigger a blur if another focus event doesn't come
+    // within a timeout. This enables keeping the focus synced when
+    // focus is switched between the message area and the submit
+    // button.
+    this.blurTimeoutId = window.setTimeout(() => {
+      this.props.onBlur();
+    }, BLUR_TIMEOUT_MS);
+  }
+  render() {
+    const {
+      rootClassName,
+      className,
+      messagePlaceholder,
+      form,
+      handleSubmit,
+      submitting,
+      inProgress,
+      invalid,
+    } = this.props;
+
+    const classes = classNames(rootClassName || css.root, className);
+    const submitInProgress = submitting || inProgress;
+    const submitDisabled = invalid || submitInProgress;
+
+    return (
+      <Form className={classes} onSubmit={handleSubmit}>
+        <TextInputField
+          inputRootClass={css.textarea}
+          type="textarea"
+          id={`${form}.message`}
+          name="message"
+          placeholder={messagePlaceholder}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+        />
+        <SecondaryButton
+          className={css.submitButton}
+          inProgress={submitInProgress}
+          disabled={submitDisabled}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+        >
+          <FormattedMessage id="SendMessageForm.sendMessage" />
+        </SecondaryButton>
+      </Form>
+    );
+  }
+}
+
+SendMessageFormComponent.defaultProps = {
+  rootClassName: null,
+  className: null,
+  inProgress: false,
+  messagePlaceholder: null,
+  onFocus: () => null,
+  onBlur: () => null,
+};
+
+SendMessageFormComponent.propTypes = {
+  ...formPropTypes,
+  rootClassName: string,
+  className: string,
+  inProgress: bool,
+
+  messagePlaceholder: string,
+  onFocus: func,
+  onBlur: func,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
+};
+
+const defaultFormName = 'SendMessageForm';
+
+const SendMessageForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(
+  SendMessageFormComponent
+);
+
+export default SendMessageForm;

src/containers/index.js

@@ -37,6 +37,7 @@ export { default as ProfileSettingsForm } from './ProfileSettingsForm/ProfileSet
 export { default as ProfileSettingsPage } from './ProfileSettingsPage/ProfileSettingsPage';
 export { default as SalePage } from './SalePage/SalePage';
 export { default as SearchPage } from './SearchPage/SearchPage';
+export { default as SendMessageForm } from './SendMessageForm/SendMessageForm';
 export { default as SignupForm } from './SignupForm/SignupForm';
 export { default as StaticPage } from './StaticPage/StaticPage';
 export { default as StripePaymentForm } from './StripePaymentForm/StripePaymentForm';

src/examples.js

@@ -55,6 +55,7 @@ import * as LoginForm from './containers/LoginForm/LoginForm.example';
 import * as PasswordRecoveryForm from './containers/PasswordRecoveryForm/PasswordRecoveryForm.example';
 import * as PasswordResetForm from './containers/PasswordResetForm/PasswordResetForm.example';
 import * as PayoutDetailsForm from './containers/PayoutDetailsForm/PayoutDetailsForm.example';
+import * as SendMessageForm from './containers/SendMessageForm/SendMessageForm.example';
 import * as SignupForm from './containers/SignupForm/SignupForm.example';
 import * as StripePaymentForm from './containers/StripePaymentForm/StripePaymentForm.example';
 import * as Typography from './containers/StyleguidePage/Typography.example';
@@ -108,6 +109,7 @@ export {
   PayoutDetailsForm,
   ResponsiveImage,
   SelectField,
+  SendMessageForm,
   SignupForm,
   StripeBankAccountTokenInputField,
   StripePaymentForm,

src/translations/en.json

@@ -470,6 +470,7 @@
   "SectionLocations.listingsInLocation": "Saunas in {location}",
   "SectionLocations.subtitle": "We have more than 1000 saunas around Finland. Here are some of our most popular locations.",
   "SectionLocations.title": "We have wooden saunas, electric saunas and even tent saunas.",
+  "SendMessageForm.sendMessage": "Send message",
   "SignupForm.emailInvalid": "A valid email address is required",
   "SignupForm.emailLabel": "Email",
   "SignupForm.emailPlaceholder": "john.doe@example.com",