Add EnquiryForm component

src/containers/EnquiryForm/EnquiryForm.css

@@ -0,0 +1,32 @@
+@import '../../marketplace.css';
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.icon {
+  display: none;
+
+  @media (--viewportMedium) {
+    display: block;
+    margin-bottom: 36px;
+  }
+}
+
+.heading {
+  @apply --marketplaceModalTitleStyles;
+}
+
+.field {
+  margin: 25px 0 24px 0;
+
+  @media (--viewportMedium) {
+    margin: 22px 0 24px 0;
+  }
+}
+
+.submitButton {
+  /* Push to bottom of the flex container */
+  margin-top: auto;
+}

src/containers/EnquiryForm/EnquiryForm.example.js

@@ -0,0 +1,13 @@
+import EnquiryForm from './EnquiryForm';
+
+export const Empty = {
+  component: EnquiryForm,
+  props: {
+    listingTitle: 'Sauna with a view',
+    authorDisplayName: 'Janne',
+    onSubmit(values) {
+      console.log('submit with values:', values);
+    },
+  },
+  group: 'forms',
+};

src/containers/EnquiryForm/EnquiryForm.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { string, bool } 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, PrimaryButton, TextInputField, IconEnquiry } from '../../components';
+import * as validators from '../../util/validators';
+
+import css from './EnquiryForm.css';
+
+const EnquiryFormComponent = props => {
+  const {
+    rootClassName,
+    className,
+    form,
+    handleSubmit,
+    submitting,
+    inProgress,
+    intl,
+    listingTitle,
+    authorDisplayName,
+  } = props;
+
+  const messageLabel = intl.formatMessage(
+    {
+      id: 'EnquiryForm.messageLabel',
+    },
+    { authorDisplayName }
+  );
+  const messagePlaceholder = intl.formatMessage(
+    {
+      id: 'EnquiryForm.messagePlaceholder',
+    },
+    { authorDisplayName }
+  );
+  const messageRequiredMessage = intl.formatMessage({
+    id: 'EnquiryForm.messageRequired',
+  });
+  const messageRequired = validators.required(messageRequiredMessage);
+
+  const classes = classNames(rootClassName || css.root, className);
+
+  const submitInProgress = submitting || inProgress;
+  const submitDisabled = submitInProgress;
+
+  return (
+    <Form className={classes} onSubmit={handleSubmit}>
+      <IconEnquiry className={css.icon} />
+      <h2 className={css.heading}>
+        <FormattedMessage id="EnquiryForm.heading" values={{ listingTitle }} />
+      </h2>
+      <TextInputField
+        className={css.field}
+        type="textarea"
+        name="message"
+        id={`${form}.message`}
+        label={messageLabel}
+        placeholder={messagePlaceholder}
+        validate={[messageRequired]}
+      />
+      <PrimaryButton
+        className={css.submitButton}
+        type="submit"
+        inProgress={submitInProgress}
+        disabled={submitDisabled}
+      >
+        <FormattedMessage id="EnquiryForm.submitButtonText" />
+      </PrimaryButton>
+    </Form>
+  );
+};
+
+EnquiryFormComponent.defaultProps = {
+  rootClassName: null,
+  className: null,
+  inProgress: false,
+};
+
+EnquiryFormComponent.propTypes = {
+  ...formPropTypes,
+  rootClassName: string,
+  className: string,
+
+  inProgress: bool,
+
+  listingTitle: string.isRequired,
+  authorDisplayName: string.isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
+};
+
+const defaultFormName = 'EnquiryForm';
+
+const EnquiryForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(EnquiryFormComponent);
+
+export default EnquiryForm;

src/containers/index.js

@@ -15,6 +15,7 @@ export { default as EditListingPhotosForm } from './EditListingPhotosForm/EditLi
 export { default as EditListingPricingForm } from './EditListingPricingForm/EditListingPricingForm';
 export { default as EmailVerificationForm } from './EmailVerificationForm/EmailVerificationForm';
 export { default as EmailVerificationPage } from './EmailVerificationPage/EmailVerificationPage';
+export { default as EnquiryForm } from './EnquiryForm/EnquiryForm';
 export { default as InboxPage } from './InboxPage/InboxPage';
 export { default as LandingPage } from './LandingPage/LandingPage';
 export { default as ListingPage } from './ListingPage/ListingPage';

src/examples.js

@@ -57,6 +57,7 @@ import * as EditListingLocationForm from './containers/EditListingLocationForm/E
 import * as EditListingPhotosForm from './containers/EditListingPhotosForm/EditListingPhotosForm.example';
 import * as EditListingPricingForm from './containers/EditListingPricingForm/EditListingPricingForm.example';
 import * as EmailVerificationForm from './containers/EmailVerificationForm/EmailVerificationForm.example';
+import * as EnquiryForm from './containers/EnquiryForm/EnquiryForm.example';
 import * as LoginForm from './containers/LoginForm/LoginForm.example';
 import * as PasswordRecoveryForm from './containers/PasswordRecoveryForm/PasswordRecoveryForm.example';
 import * as PasswordResetForm from './containers/PasswordResetForm/PasswordResetForm.example';
@@ -85,6 +86,7 @@ export {
   EditListingPricingForm,
   EditListingWizard,
   EmailVerificationForm,
+  EnquiryForm,
   ExpandingTextarea,
   FieldReviewRating,
   Footer,

src/translations/en.json

@@ -169,6 +169,11 @@
   "EmailVerificationForm.verifying": "Verifying…",
   "EmailVerificationPage.loadingUserInformation": "Loading user information…",
   "EmailVerificationPage.title": "Verify your email address",
+  "EnquiryForm.heading": "Enquire about {listingTitle}",
+  "EnquiryForm.messageLabel": "Message to {authorDisplayName}",
+  "EnquiryForm.messagePlaceholder": "Hello {authorDisplayName}! I'm looking forward to…",
+  "EnquiryForm.messageRequired": "A message is required",
+  "EnquiryForm.submitButtonText": "Send enquiry",
   "FieldReviewRating.star1": "Bad experience - 1 star",
   "FieldReviewRating.star2": "Not so nice - 2 stars",
   "FieldReviewRating.star3": "OK - 3 stars",