Merge pull request #277 from sharetribe/payoutdetailsform

Payoutdetailsform

src/components/BirthdayInputField/BirthdayInputField.css

@@ -1,20 +1,43 @@
+@import '../../marketplace.css';
+
 .fieldRoot {
 
 }
 
 .inputRoot {
   display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
 }
 
-.dropdown {
+.selectWrapper {
+  flex-basis: calc(33% - 12px);
+}
+
+.select {
   display: inline-block;
-  flex: 1;
 
   /* Border */
-  border: 1px solid #979797;
-  border-left-width: 0;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  border-bottom-color: var(--attentionColor);
 
-  &:first-child {
-    border-left-width: 1px;
+  &:hover,
+  &:focus {
+    border-bottom-color: var(--matterColorDark);
+    outline: none;
   }
 }
+
+.notSet {
+  color: var(--matterColorAnti);
+}
+
+.selectSuccess {
+  color: var(--matterColor);
+  border-bottom-color: var(--successColor);
+}
+
+.selectError {
+  border-bottom-color: var(--failColor);
+}

src/components/BirthdayInputField/BirthdayInputField.js

@@ -1,8 +1,9 @@
 import React, { Component, PropTypes } from 'react';
 import { Field } from 'redux-form';
+import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import { range } from 'lodash';
-import { Select, ValidationError } from '../../components';
+import { ValidationError } from '../../components';
 
 import css from './BirthdayInputField.css';
 
@@ -70,7 +71,7 @@ const currentYear = new Date().getFullYear();
 const yearsToShow = 80;
 const years = range(currentYear, currentYear - yearsToShow, -1);
 
-class BirthdayInput extends Component {
+class BirthdayInputComponent extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -123,74 +124,144 @@ class BirthdayInput extends Component {
     });
   }
   render() {
-    const { id } = this.props;
+    const {
+      selectClassName,
+      dateId,
+      monthId,
+      yearId,
+      dateLabel,
+      monthLabel,
+      yearLabel,
+      intl,
+    } = this.props;
 
     const selectedValue = n => {
       return typeof n === 'number' ? n : '';
     };
 
+    const datePlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.birthdayDatePlaceholder' });
+    const monthPlaceholder = intl.formatMessage({
+      id: 'PayoutDetailsForm.birthdayMonthPlaceholder',
+    });
+    const yearPlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.birthdayYearPlaceholder' });
+
     return (
       <div className={css.inputRoot}>
-        <Select
-          id={id}
-          value={selectedValue(this.state.selected.day)}
-          className={css.dropdown}
-          onFocus={() => this.handleSelectFocus()}
-          onBlur={() => this.handleSelectBlur()}
-          onChange={e => this.handleSelectChange('day', e.target.value)}
-        >
-          <option />
-          {days.map(d => <option key={d} value={d}>{pad(d)}</option>)}
-        </Select>
-        <Select
-          value={selectedValue(this.state.selected.month)}
-          className={css.dropdown}
-          onFocus={() => this.handleSelectFocus()}
-          onBlur={() => this.handleSelectBlur()}
-          onChange={e => this.handleSelectChange('month', e.target.value)}
-        >
-          <option />
-          {months.map(m => <option key={m} value={m}>{pad(m)}</option>)}
-        </Select>
-        <Select
-          value={selectedValue(this.state.selected.year)}
-          className={css.dropdown}
-          onFocus={() => this.handleSelectFocus()}
-          onBlur={() => this.handleSelectBlur()}
-          onChange={e => this.handleSelectChange('year', e.target.value)}
-        >
-          <option />
-          {years.map(y => <option key={y} value={y}>{y}</option>)}
-        </Select>
+        <div className={css.selectWrapper}>
+          {dateLabel}
+          <select
+            id={dateId}
+            value={selectedValue(this.state.selected.day)}
+            className={classNames(css.select, selectClassName, {
+              [css.notSet]: !parseNum(this.state.selected.day),
+            })}
+            onFocus={() => this.handleSelectFocus()}
+            onBlur={() => this.handleSelectBlur()}
+            onChange={e => this.handleSelectChange('day', e.target.value)}
+          >
+            <option>{datePlaceholder}</option>
+            {days.map(d => <option key={d} value={d}>{pad(d)}</option>)}
+          </select>
+        </div>
+        <div className={css.selectWrapper}>
+          {monthLabel}
+          <select
+            id={monthId}
+            value={selectedValue(this.state.selected.month)}
+            className={classNames(css.select, selectClassName, {
+              [css.notSet]: !parseNum(this.state.selected.month),
+            })}
+            onFocus={() => this.handleSelectFocus()}
+            onBlur={() => this.handleSelectBlur()}
+            onChange={e => this.handleSelectChange('month', e.target.value)}
+          >
+            <option>{monthPlaceholder}</option>
+            {months.map(m => <option key={m} value={m}>{pad(m)}</option>)}
+          </select>
+        </div>
+        <div className={css.selectWrapper}>
+          {yearLabel}
+          <select
+            id={yearId}
+            value={selectedValue(this.state.selected.year)}
+            className={classNames(css.select, selectClassName, {
+              [css.notSet]: !parseNum(this.state.selected.year),
+            })}
+            onFocus={() => this.handleSelectFocus()}
+            onBlur={() => this.handleSelectBlur()}
+            onChange={e => this.handleSelectChange('year', e.target.value)}
+          >
+            <option>{yearPlaceholder}</option>
+            {years.map(y => <option key={y} value={y}>{y}</option>)}
+          </select>
+        </div>
       </div>
     );
   }
 }
 
-BirthdayInput.defaultProps = { value: null };
+BirthdayInputComponent.defaultProps = {
+  selectClassName: null,
+  dateLabel: null,
+  monthLabel: null,
+  yearLabel: null,
+  value: null,
+};
 
-const { string, instanceOf, func, object } = PropTypes;
+const { func, instanceOf, object, node, string } = PropTypes;
 
-BirthdayInput.propTypes = {
-  id: string.isRequired,
+BirthdayInputComponent.propTypes = {
+  selectClassName: string,
+  dateId: string.isRequired,
+  monthId: string.isRequired,
+  yearId: string.isRequired,
+  dateLabel: node,
+  monthLabel: node,
+  yearLabel: node,
   value: instanceOf(Date),
   onChange: func.isRequired,
   onFocus: func.isRequired,
   onBlur: func.isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
+const BirthdayInput = injectIntl(BirthdayInputComponent);
+
 const BirthdayInputFieldComponent = props => {
-  const { rootClassName, className, id, label, input, meta } = props;
+  const { rootClassName, className, id, label, labelForMonth, labelForYear, input, meta } = props;
+  const { valid, invalid, touched, error } = meta;
 
-  if (label && !id) {
-    throw new Error('id required when a label is given');
-  }
+  // Error message and input error styles are only shown if the
+  // field has been touched and the validation has failed.
+  const hasError = touched && invalid && error;
 
+  const dateId = id;
+  const monthId = `${id}-month`;
+  const yearId = `${id}-year`;
+  const dateLabel = label ? <label htmlFor={dateId}>{label}</label> : null;
+  const monthLabel = labelForMonth ? <label htmlFor={monthId}>{labelForMonth}</label> : null;
+  const yearLabel = labelForYear ? <label htmlFor={yearId}>{labelForYear}</label> : null;
+
+  const selectClassName = classNames({
+    [css.selectSuccess]: valid,
+    [css.selectError]: hasError,
+  });
+
+  const inputProps = {
+    selectClassName,
+    dateId,
+    monthId,
+    yearId,
+    dateLabel,
+    monthLabel,
+    yearLabel,
+    ...input,
+  };
   const classes = classNames(rootClassName || css.fieldRoot, className);
-  const inputProps = { id, ...input };
   return (
     <div className={classes}>
-      {label ? <label htmlFor={id}>{label}</label> : null}
       <BirthdayInput {...inputProps} />
       <ValidationError fieldMeta={meta} />
     </div>
@@ -200,15 +271,18 @@ const BirthdayInputFieldComponent = props => {
 BirthdayInputFieldComponent.defaultProps = {
   rootClassName: null,
   className: null,
-  id: null,
   label: null,
+  labelForMonth: null,
+  labelForYear: null,
 };
 
 BirthdayInputFieldComponent.propTypes = {
   rootClassName: string,
   className: string,
-  id: string,
+  id: string.isRequired,
   label: string,
+  labelForMonth: string,
+  labelForYear: string,
   input: object.isRequired,
   meta: object.isRequired,
 };

src/components/EditListingPhotosPanel/EditListingPhotosPanel.css

@@ -19,3 +19,8 @@
   margin: 24px;
 }
 
+.modalHeading {
+  margin-top: 89px;
+  margin-bottom: 36px;
+  padding: 0 24px;
+}

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -101,6 +101,16 @@ class EditListingPhotosPanel extends Component {
           onClose={this.handlePayoutModalClose}
           onManageDisableScrolling={onManageDisableScrolling}
         >
+          <div className={css.modalHeading}>
+            <h1 className={css.payoutModalTitle}>
+              <FormattedMessage id="EditListingPhotosPanel.payoutModalTitleOneMoreThing" />
+              <br />
+              <FormattedMessage id="EditListingPhotosPanel.payoutModalTitlePayoutPreferences" />
+            </h1>
+            <p>
+              <FormattedMessage id="EditListingPhotosPanel.payoutModalInfo" />
+            </p>
+          </div>
           <PayoutDetailsForm
             className={css.payoutDetails}
             currency={currency}

src/components/SelectField/SelectField.css

@@ -5,10 +5,12 @@
 }
 
 .select {
+  color: var(--matterColorAnti);
   border-bottom-color: var(--attentionColor);
 }
 
 .selectSuccess {
+  color: var(--matterColor);
   border-bottom-color: var(--successColor);
 }
 

src/containers/PayoutDetailsForm/PayoutDetailsForm.css

@@ -1,27 +1,55 @@
+@import '../../marketplace.css';
+
 .root {
 
 }
 
-.field {
-  margin-top: 24px;
+.sectionContainer {
+  margin-bottom: 35px;
 }
 
-.countries {
-  border: 1px solid #979797;
+.subTitle {
+  /* Font */
+  color: var(--matterColorAnti);
+
+  margin-top: 0;
+  margin-bottom: 13px;
+  @media (--desktopViewport) {
+    margin-top: 0;
+    margin-bottom: 13px;
+  }
+}
+
+.formRow {
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+  width: 100%;
+  margin-bottom: 24px;
+}
+
+.field {
+  width: 100%;
+}
+
+.selectCountry {
+  margin-bottom: 24px;
+}
+
+.postalCode {
+  margin-top: 24px;
+  width: calc(40% - 9px);
+}
+
+.city {
+  margin-top: 24px;
+  width: calc(60% - 9px);
 }
 
 .error {
   color: red;
 }
 
-.formTitle {
-  margin-top: 0;
-}
-
-.subTitle {
-  margin-top: 60px;
-}
-
 .submitButton {
   margin-top: 40px;
 }

src/containers/PayoutDetailsForm/PayoutDetailsForm.js

@@ -6,7 +6,7 @@ import { reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-
 import classNames from 'classnames';
 import config from '../../config';
 import {
-  Button,
+  PrimaryButton,
   StripeBankAccountTokenInputField,
   SelectField,
   BirthdayInputField,
@@ -36,10 +36,12 @@ const PayoutDetailsFormComponent = props => {
     handleSubmit,
     pristine,
     submitting,
+    invalid,
     intl,
   } = props;
 
   const firstNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.firstNameLabel' });
+  const firstNamePlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.firstNamePlaceholder' });
   const firstNameRequired = validators.required(
     intl.formatMessage({
       id: 'PayoutDetailsForm.firstNameRequired',
@@ -47,6 +49,7 @@ const PayoutDetailsFormComponent = props => {
   );
 
   const lastNameLabel = intl.formatMessage({ id: 'PayoutDetailsForm.lastNameLabel' });
+  const lastNamePlaceholder = intl.formatMessage({ id: 'PayoutDetailsForm.lastNamePlaceholder' });
   const lastNameRequired = validators.required(
     intl.formatMessage({
       id: 'PayoutDetailsForm.lastNameRequired',
@@ -55,6 +58,8 @@ const PayoutDetailsFormComponent = props => {
 
   const birthdayId = `${form}.birthday`;
   const birthdayLabel = intl.formatMessage({ id: 'PayoutDetailsForm.birthdayLabel' });
+  const birthdayLabelMonth = intl.formatMessage({ id: 'PayoutDetailsForm.birthdayLabelMonth' });
+  const birthdayLabelYear = intl.formatMessage({ id: 'PayoutDetailsForm.birthdayLabelYear' });
   const birthdayRequired = validators.required(
     intl.formatMessage({
       id: 'PayoutDetailsForm.birthdayRequired',
@@ -110,26 +115,28 @@ const PayoutDetailsFormComponent = props => {
           validate={streetAddressRequired}
           clearOnUnmount
         />
-        <TextInputField
-          className={css.field}
-          type="text"
-          name="postalCode"
-          id={`${form}.postalCode`}
-          label={postalCodeLabel}
-          placeholder={postalCodePlaceholder}
-          validate={postalCodeRequired}
-          clearOnUnmount
-        />
-        <TextInputField
-          className={css.field}
-          type="text"
-          name="city"
-          id={`${form}.city`}
-          label={cityLabel}
-          placeholder={cityPlaceholder}
-          validate={cityRequired}
-          clearOnUnmount
-        />
+        <div className={css.formRow}>
+          <TextInputField
+            className={css.postalCode}
+            type="text"
+            name="postalCode"
+            id={`${form}.postalCode`}
+            label={postalCodeLabel}
+            placeholder={postalCodePlaceholder}
+            validate={postalCodeRequired}
+            clearOnUnmount
+          />
+          <TextInputField
+            className={css.city}
+            type="text"
+            name="city"
+            id={`${form}.city`}
+            label={cityLabel}
+            placeholder={cityPlaceholder}
+            validate={cityRequired}
+            clearOnUnmount
+          />
+        </div>
       </div>
     : null;
 
@@ -139,10 +146,10 @@ const PayoutDetailsFormComponent = props => {
   const bankAccountRequired = validators.required(' ');
 
   const bankAccountSection = country
-    ? <div>
-        <h2 className={css.subTitle}>
+    ? <div className={css.sectionContainer}>
+        <h3 className={css.subTitle}>
           <FormattedMessage id="PayoutDetailsForm.bankDetails" />
-        </h2>
+        </h3>
         <StripeBankAccountTokenInputField
           name="bankAccountToken"
           routingNumberId={`${form}.bankAccountToken.routingNumber`}
@@ -155,60 +162,67 @@ const PayoutDetailsFormComponent = props => {
     : null;
 
   const classes = classNames(css.root, className);
-  const submitDisabled = pristine || submitting || disabled;
+  const submitDisabled = pristine || submitting || invalid || disabled;
 
   return (
     <form className={classes} onSubmit={handleSubmit}>
-      <h2 className={css.formTitle}>
-        <FormattedMessage id="PayoutDetailsForm.title" />
-      </h2>
-      <p>
-        <FormattedMessage id="PayoutDetailsForm.information" />
-      </p>
-      <h2 className={css.subTitle}>
-        <FormattedMessage id="PayoutDetailsForm.personalDetailsTitle" />
-      </h2>
-      <TextInputField
-        className={css.field}
-        type="text"
-        name="firstName"
-        id={`${form}.firstName`}
-        label={firstNameLabel}
-        validate={firstNameRequired}
-      />
-      <TextInputField
-        className={css.field}
-        type="text"
-        name="lastName"
-        id={`${form}.lastName`}
-        label={lastNameLabel}
-        validate={lastNameRequired}
-      />
-      <BirthdayInputField
-        className={css.field}
-        id={birthdayId}
-        name="birthDate"
-        label={birthdayLabel}
-        format={null}
-        validate={birthdayRequired}
-      />
-      <h2 className={css.subTitle}>
-        <FormattedMessage id="PayoutDetailsForm.addressTitle" />
-      </h2>
-      <SelectField
-        name="country"
-        id={`${form}.country`}
-        label={countryLabel}
-        validate={countryRequired}
-      >
-        <option value="">{countryPlaceholder}</option>
-        {supportedCountries.map(c => <option key={c} value={c}>{c}</option>)}
-      </SelectField>
-      {addressSection}
+
+      <div className={css.sectionContainer}>
+        <h3 className={css.subTitle}>
+          <FormattedMessage id="PayoutDetailsForm.personalDetailsTitle" />
+        </h3>
+        <div className={css.formRow}>
+          <TextInputField
+            className={css.field}
+            type="text"
+            name="firstName"
+            id={`${form}.firstName`}
+            label={firstNameLabel}
+            placeholder={firstNamePlaceholder}
+            validate={firstNameRequired}
+          />
+          <TextInputField
+            className={css.field}
+            type="text"
+            name="lastName"
+            id={`${form}.lastName`}
+            label={lastNameLabel}
+            placeholder={lastNamePlaceholder}
+            validate={lastNameRequired}
+          />
+        </div>
+        <BirthdayInputField
+          className={css.field}
+          id={birthdayId}
+          name="birthDate"
+          label={birthdayLabel}
+          labelForMonth={birthdayLabelMonth}
+          labelForYear={birthdayLabelYear}
+          format={null}
+          validate={birthdayRequired}
+        />
+      </div>
+
+      <div className={css.sectionContainer}>
+        <h3 className={css.subTitle}>
+          <FormattedMessage id="PayoutDetailsForm.addressTitle" />
+        </h3>
+        <SelectField
+          className={css.selectCountry}
+          name="country"
+          id={`${form}.country`}
+          label={countryLabel}
+          validate={countryRequired}
+        >
+          <option value="">{countryPlaceholder}</option>
+          {supportedCountries.map(c => <option key={c} value={c}>{c}</option>)}
+        </SelectField>
+        {addressSection}
+      </div>
       {bankAccountSection}
-      <Button className={css.submitButton} type="submit" disabled={submitDisabled}>
+      <PrimaryButton className={css.submitButton} type="submit" disabled={submitDisabled}>
         <FormattedMessage id="PayoutDetailsForm.submitButtonText" />
-      </Button>
+      </PrimaryButton>
     </form>
   );
 };

src/marketplace.css

@@ -203,7 +203,7 @@
     display: block;
     width: 100%;
     margin: 0;
-    padding: 5px 0 4px 0;
+    padding: 5px 0 5px 0;
 
     /* Unset user agent styles */
     appearance: none;
@@ -216,7 +216,7 @@
     border-radius: 0;
 
     /* Background */
-    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="10" viewBox="0 0 16 10" xmlns="http://www.w3.org/2000/svg"><path d="M15.027 2.5a.577.577 0 0 0 0-.813L13.545.214a.566.566 0 0 0-.804 0L8 4.955 3.259.215a.566.566 0 0 0-.804 0L.973 1.686a.577.577 0 0 0 0 .813l6.625 6.616c.223.223.58.223.804 0L15.027 2.5z" fill="#4A4A4A" fill-rule="evenodd"/></svg>');
+    background-image: url('data:image/svg+xml;utf8,<svg width="14" height="9" viewBox="0 0 14 9" xmlns="http://www.w3.org/2000/svg"><path d="M6.53 7.472c.26.26.68.26.94 0l5.335-5.333c.26-.263.26-.684 0-.944-.26-.26-.683-.26-.943 0L7 6.056l-4.862-4.86c-.26-.26-.683-.26-.943 0-.26.26-.26.68 0 .943L6.53 7.47z" stroke="#4A4A4A" fill="#4A4A4A" fill-rule="evenodd"/></svg>');
     background-size: 16px 16px;
     background-position: center right;
 

src/translations/en.json

@@ -64,6 +64,9 @@
   "EditListingPhotosForm.chooseImage": "+ Choose an image...",
   "EditListingPhotosForm.imageTypes": ".JPG, .GIF or .PNG max. 5mb",
   "EditListingPhotosForm.addImagesTip": "Tip: Choose 2-3 best photos of your sauna from different angles in a good light that really show the space.",
+  "EditListingPhotosPanel.payoutModalInfo": "Since this was the first listing you created, we need to know bit more information about you in order to send you money. We only ask these once.",
+  "EditListingPhotosPanel.payoutModalTitleOneMoreThing": "One more thing:",
+  "EditListingPhotosPanel.payoutModalTitlePayoutPreferences": "Payout preferences",
   "EditListingPhotosPanel.title": "Add a few photos",
   "EditListingPricingForm.priceInputPlaceholder": "Choose your price...",
   "EditListingPricingForm.pricePerNight": "Price per night in euros",
@@ -127,22 +130,29 @@
   "PaginationLinks.toPage": "Go to page {page}",
   "PayoutDetailsForm.addressTitle": "Address",
   "PayoutDetailsForm.bankDetails": "Bank details",
-  "PayoutDetailsForm.birthdayLabel": "Date of birth",
-  "PayoutDetailsForm.birthdayRequired": "This field is required",
+  "PayoutDetailsForm.birthdayLabel": "Birth date",
+  "PayoutDetailsForm.birthdayLabelMonth": "Month",
+  "PayoutDetailsForm.birthdayLabelYear": "Year",
+  "PayoutDetailsForm.birthdayDatePlaceholder": "dd",
+  "PayoutDetailsForm.birthdayMonthPlaceholder": "mm",
+  "PayoutDetailsForm.birthdayYearPlaceholder": "yyyy",
+  "PayoutDetailsForm.birthdayRequired": "Birthday is required and must be a valid date.",
   "PayoutDetailsForm.cityLabel": "City",
-  "PayoutDetailsForm.cityPlaceholder": "Enter your city...",
+  "PayoutDetailsForm.cityPlaceholder": "Helsinki",
   "PayoutDetailsForm.cityRequired": "This field is required",
   "PayoutDetailsForm.countryLabel": "Country",
   "PayoutDetailsForm.countryPlaceholder": "Select your country...",
   "PayoutDetailsForm.countryRequired": "This field is required",
   "PayoutDetailsForm.firstNameLabel": "First name",
+  "PayoutDetailsForm.firstNamePlaceholder": "John",
   "PayoutDetailsForm.firstNameRequired": "This field is required",
   "PayoutDetailsForm.information": "Since this was the first listing you created, we need to know bit more information about you in order to send you money. We only ask these once.",
   "PayoutDetailsForm.lastNameLabel": "Last name",
+  "PayoutDetailsForm.lastNamePlaceholder": "Doe",
   "PayoutDetailsForm.lastNameRequired": "This field is required",
   "PayoutDetailsForm.personalDetailsTitle": "Personal details",
   "PayoutDetailsForm.postalCodeLabel": "Postal code",
-  "PayoutDetailsForm.postalCodePlaceholder": "Enter your postal code...",
+  "PayoutDetailsForm.postalCodePlaceholder": "E.g. 00100",
   "PayoutDetailsForm.postalCodeRequired": "This field is required",
   "PayoutDetailsForm.streetAddressLabel": "Street address",
   "PayoutDetailsForm.streetAddressPlaceholder": "Enter your street address...",
@@ -192,7 +202,7 @@
   "StripeBankAccountTokenInputField.accountNumberLabel": "Bank account number",
   "StripeBankAccountTokenInputField.accountNumberLabelIban": "Bank account number (IBAN)",
   "StripeBankAccountTokenInputField.accountNumberPlaceholder": "Type in bank account number...",
-  "StripeBankAccountTokenInputField.accountNumberPlaceholderIban": "Type in bank account number (IBAN)...",
+  "StripeBankAccountTokenInputField.accountNumberPlaceholderIban": "e.g. DE89 3704 0044 0532 0130 00",
   "StripeBankAccountTokenInputField.accountNumberRequired": "Bank account number is required",
   "StripeBankAccountTokenInputField.accountNumberRequiredIban": "Bank account number (IBAN) is required",
   "StripeBankAccountTokenInputField.genericStripeError": "Could not connect account number. Please double-check that your routing number and account number are valid in {country} when using {currency}",