Mobile styles for PayoutDetailsForm and surrounding modal

2026-07-28 20:53:24 +10:00 · 2017-07-06 12:48:50 +03:00 · 2017-07-06 12:48:50 +03:00 · c8b0a1dd48
commit c8b0a1dd48
parent 2e2ef95489
5 changed files with 157 additions and 90 deletions
--- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
+++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
@ -19,3 +19,8 @@
  margin: 24px;
 }

+.modalHeading {
+  margin-top: 89px;
+  margin-bottom: 36px;
+  padding: 0 24px;
+}
--- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js
+++ b/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}
--- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/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;
 }
--- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.js
+++ b/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>
  );
 };
--- a/src/translations/en.json
+++ b/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}",