EditListingWizard: pricing tab

src/components/EditListingPricingPanel/EditListingPricingPanel.css

@@ -1,10 +1,10 @@
 .root {
+  flex-grow: 1;
   width: 100%;
   height: 100%;
   display: flex;
-  flex: 1;
   flex-direction: column;
-  padding: 0 1rem;
+  padding: 11px 24px 0 24px;
 }
 
 .form {

src/components/EditListingPricingPanel/EditListingPricingPanel.js

@@ -8,8 +8,7 @@ import css from './EditListingPricingPanel.css';
 const EditListingPricingPanel = props => {
   const { className, rootClassName, listing, onSubmit } = props;
 
-  const rootClass = rootClassName || css.root;
-  const classes = classNames(rootClass, className);
+  const classes = classNames(rootClassName || css.root, className);
   const { attributes: { price } } = listing || { attributes: {} };
 
   return (

src/containers/EditListingPricingForm/EditListingPricingForm.css

@@ -7,25 +7,12 @@
   flex-grow: 1;
 }
 
-.priceWrapper {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  flex-grow: 1;
-}
-
 .priceInput {
-  flex-basis: 70%;
-}
-
-.perNight {
-  flex-basis: 80px;
-  font-size: 14px;
-  line-height: 50px;
-  margin-left: 1rem;
+  flex-shrink: 0;
+  width: 100%;
 }
 
 .submitButton {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: auto;
+  margin-bottom: 24px;
 }

src/containers/EditListingPricingForm/EditListingPricingForm.js

@@ -1,11 +1,11 @@
 import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import config from '../../config';
 import { required } from '../../util/validators';
-import { Button, CurrencyInputField } from '../../components';
+import { PrimaryButton, CurrencyInputField } from '../../components';
 
 import css from './EditListingPricingForm.css';
 
@@ -20,32 +20,32 @@ export const EditListingPricingFormComponent = props => {
     submitting,
   } = props;
 
+  const pricePerNightMessage = intl.formatMessage({ id: 'EditListingPricingForm.pricePerNight' });
   const priceRequiredMessage = intl.formatMessage({ id: 'EditListingPricingForm.priceRequired' });
+  const pricePlaceholderMessage = intl.formatMessage({ id: 'EditListingPricingForm.priceInputPlaceholder' });
 
   const classes = classNames(css.root, className);
 
   return (
     <form className={classes} onSubmit={handleSubmit}>
-      <div className={css.priceWrapper}>
-        <CurrencyInputField
-          className={css.priceInput}
-          name="price"
-          currencyConfig={config.currencyConfig}
-          validate={[required(priceRequiredMessage)]}
-          autoFocus
-        />
-        <div className={css.perNight}>
-          <FormattedMessage id="EditListingPricingForm.perNight" />
-        </div>
-      </div>
+      <CurrencyInputField
+        id="EditListingPricingForm.CurrencyInputField"
+        className={css.priceInput}
+        autoFocus
+        name="price"
+        label={pricePerNightMessage}
+        placeholder={pricePlaceholderMessage}
+        currencyConfig={config.currencyConfig}
+        validate={[required(priceRequiredMessage)]}
+      />
 
-      <Button
+      <PrimaryButton
         className={css.submitButton}
         type="submit"
         disabled={invalid || submitting || disabled}
       >
         {saveActionMsg}
-      </Button>
+      </PrimaryButton>
     </form>
   );
 };

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

@@ -3,26 +3,21 @@ exports[`EditListingPricingForm matches snapshot 1`] = `
   className=""
   onSubmit={[Function]}>
   <div
-    className={undefined}>
-    <div
-      className="">
-      <input
-        autoFocus={true}
-        className=""
-        id={null}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder="$0.00"
-        type="text"
-        value="" />
-    </div>
-    <div
-      className={undefined}>
-      <span>
-        per night
-      </span>
-    </div>
+    className="">
+    <label
+      htmlFor="EditListingPricingForm.CurrencyInputField">
+      Price per night in euros
+    </label>
+    <input
+      autoFocus={true}
+      className=""
+      id="EditListingPricingForm.CurrencyInputField"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Choose your price..."
+      type="text"
+      value="" />
   </div>
   <button
     className=""

src/translations/en.json

@@ -60,7 +60,8 @@
   "EditListingPhotosForm.bankAccountNumberRequired": "You need to add a bank account number.",
   "EditListingPhotosForm.imageRequired": "You need to add at least one image.",
   "EditListingPhotosPanel.title": "Add photos",
-  "EditListingPricingForm.perNight": "per night",
+  "EditListingPricingForm.priceInputPlaceholder": "Choose your price...",
+  "EditListingPricingForm.pricePerNight": "Price per night in euros",
   "EditListingPricingForm.priceRequired": "You need to add a valid price.",
   "EditListingPricingPanel.title": "How much does it cost?",
   "HeroSection.mobileSearchButtonText": "Search saunas",