Merge pull request #157 from sharetribe/pricing-tab-restyled

Per night added to pricing and title removed.

src/containers/EditListingPricingForm/EditListingPricingForm.css

@@ -5,6 +5,22 @@
   flex-direction: column;
 }
 
+.priceWrapper {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.priceInput {
+  flex-basis: 70%;
+}
+
+.perNight {
+  flex-basis: 80px;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 1rem;}
+
 .submitButton {
   margin-top: 1rem;
 }

src/containers/EditListingPricingForm/EditListingPricingForm.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { compose } from 'redux';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import config from '../../config';
 import { enhancedField } from '../../util/forms';
 import { required } from '../../util/validators';
@@ -16,7 +16,7 @@ export class EditListingPricingFormComponent extends Component {
     // We must create the enhanced components outside the render function
     // to avoid losing focus.
     // See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14
-    this.EnhancedCurrencyInput = enhancedField(CurrencyInput);
+    this.EnhancedCurrencyInput = enhancedField(CurrencyInput, { rootClassName: css.priceInput });
   }
 
   render() {
@@ -29,7 +29,6 @@ export class EditListingPricingFormComponent extends Component {
       submitting,
     } = this.props;
 
-    const priceMessage = intl.formatMessage({ id: 'EditListingPricingForm.price' });
     const priceRequiredMessage = intl.formatMessage({ id: 'EditListingPricingForm.priceRequired' });
     const pricePlaceholderMessage = intl.formatMessage({
       id: 'EditListingPricingForm.pricePlaceholder',
@@ -37,14 +36,18 @@ export class EditListingPricingFormComponent extends Component {
 
     return (
       <form onSubmit={handleSubmit}>
-        <Field
-          name="price"
-          label={priceMessage}
-          component={this.EnhancedCurrencyInput}
-          currencyConfig={config.currencyConfig}
-          validate={[required(priceRequiredMessage)]}
-          placeholder={pricePlaceholderMessage}
-        />
+        <div className={css.priceWrapper}>
+          <Field
+            name="price"
+            component={this.EnhancedCurrencyInput}
+            currencyConfig={config.currencyConfig}
+            validate={[required(priceRequiredMessage)]}
+            placeholder={pricePlaceholderMessage}
+          />
+          <div className={css.perNight}>
+            <FormattedMessage id="EditListingPricingForm.perNight" />
+          </div>
+        </div>
 
         <Button
           className={css.submitButton}

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

@@ -2,21 +2,25 @@ exports[`EditListingPricingForm matches snapshot 1`] = `
 <form
   onSubmit={[Function]}>
   <div
-    className="">
-    <label
-      className=""
-      htmlFor="price">
-      Price
-    </label>
-    <input
-      className=""
-      label="Price"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="$0.00"
-      type="text"
-      value="" />
+    className={undefined}>
+    <div
+      className="">
+      <input
+        className=""
+        label={null}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        placeholder="$0.00"
+        type="text"
+        value="" />
+    </div>
+    <div
+      className={undefined}>
+      <span>
+        per night
+      </span>
+    </div>
   </div>
   <button
     className=""

src/translations/en.json

@@ -46,7 +46,7 @@
   "EditListingPhotosForm.imageRequired": "You need to add at least one image.",
   "EditListingPhotosForm.bankAccountNumberRequired": "You need to add a bank account number.",
   "EditListingPhotosPanel.title": "Add photos",
-  "EditListingPricingForm.price": "Price",
+  "EditListingPricingForm.perNight": "per night",
   "EditListingPricingForm.pricePlaceholder": "$0.00",
   "EditListingPricingForm.priceRequired": "You need to add a valid price.",
   "EditListingPricingPanel.title": "How much does it cost?",

src/util/forms.js

@@ -27,9 +27,13 @@ export const enhancedField = (Comp, options = {}) => {
     } else {
       component = <Input {...otherProps} {...input} type={type} placeholder={placeholder} />;
     }
+    const labelInfo = label
+      ? <label className={labelClassName} htmlFor={input.name}>{label}</label>
+      : null;
+
     return (
       <div className={rootClassName}>
-        <label className={labelClassName} htmlFor={input.name}>{label}</label>
+        {labelInfo}
         {component}
         <ValidationError className={errorClassName} fieldMeta={meta} />
       </div>
@@ -41,7 +45,7 @@ export const enhancedField = (Comp, options = {}) => {
   }
   EnhancedField.displayName = `EnhancedField(${displayName})`;
 
-  EnhancedField.defaultProps = { type: null, placeholder: '' };
+  EnhancedField.defaultProps = { type: null, placeholder: '', label: null };
 
   const { shape, func, string, object } = PropTypes;
 
@@ -51,7 +55,7 @@ export const enhancedField = (Comp, options = {}) => {
       name: string.isRequired,
     }).isRequired,
     type: string,
-    label: string.isRequired,
+    label: string,
     placeholder: string,
     meta: object.isRequired,
   };