Merge pull request #165 from sharetribe/location-form-building

Field for building number (overloading address field with that data)

src/components/EditListingLocationPanel/EditListingLocationPanel.js

@@ -15,11 +15,25 @@ const EditListingLocationPanel = props => {
   // Only render current search if full place object is available in the URL params
   // TODO bounds and country are missing - those need to be queried directly from Google Places
   const locationFieldsPresent = address && geolocation;
+
+  // TODO location address is currently serialized inside address field (API will change later)
+  // Content is something like { locationAddress: 'Street, Province, Country', building: 'A 42' };
+  let locationAddress = "";
+  let building = "";
+  try {
+    const deserializedAddress = JSON.parse(address || "{}");
+    locationAddress = deserializedAddress.locationAddress;
+    building = deserializedAddress.building;
+  } catch(e) {
+    locationAddress = address;
+  }
+
   const initialSearchFormValues = {
+    building,
     location: locationFieldsPresent
       ? {
-          search: address,
-          selectedPlace: { address, origin: geolocation },
+          search: locationAddress,
+          selectedPlace: { address: locationAddress, origin: geolocation },
         }
       : null,
   };

src/components/EditListingWizard/EditListingWizard.js

@@ -120,8 +120,14 @@ const EditListingWizard = props => {
         disabled={!stepsStatus[LOCATION]}
         listing={listing}
         onSubmit={values => {
-          const { selectedPlace: { address, origin } } = values.location;
-          onUpdateListingDraft({ address, geolocation: origin });
+          const { building, location } = values;
+          const { selectedPlace: { address, origin } } = location;
+
+          // TODO When API supports building number, etc. change this to use those fields instead.
+          onUpdateListingDraft({
+            address: JSON.stringify({ locationAddress: address, building }),
+            geolocation: origin,
+          });
 
           // Redirect to EditListingPricingPage
           history.push(

src/containers/EditListingLocationForm/EditListingLocationForm.js

@@ -18,6 +18,7 @@ export class EditListingLocationFormComponent extends Component {
     // to avoid losing focus.
     // See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14
     this.EnhancedLocationAutocompleteInput = enhancedField(LocationAutocompleteInput);
+    this.EnhancedInput = enhancedField('input');
   }
 
   render() {
@@ -30,12 +31,17 @@ export class EditListingLocationFormComponent extends Component {
       submitting,
     } = this.props;
 
-    const titleRequiredMessage = intl.formatMessage({ id: 'EditListingLocationForm.location' });
-    const locationRequiredMessage = intl.formatMessage({
-      id: 'EditListingLocationForm.locationRequired',
+    const titleRequiredMessage = intl.formatMessage({ id: 'EditListingLocationForm.address' });
+    const addressRequiredMessage = intl.formatMessage({
+      id: 'EditListingLocationForm.addressRequired',
     });
-    const locationNotRecognizedMessage = intl.formatMessage({
-      id: 'EditListingLocationForm.locationNotRecognized',
+    const addressNotRecognizedMessage = intl.formatMessage({
+      id: 'EditListingLocationForm.addressNotRecognized',
+    });
+
+    const buildingMessage = intl.formatMessage({ id: 'EditListingLocationForm.building' });
+    const buildingPlaceholderMessage = intl.formatMessage({
+      id: 'EditListingLocationForm.buildingPlaceholder',
     });
 
     return (
@@ -47,11 +53,19 @@ export class EditListingLocationFormComponent extends Component {
           format={null}
           component={this.EnhancedLocationAutocompleteInput}
           validate={[
-            autocompleteSearchRequired(locationRequiredMessage),
-            autocompletePlaceSelected(locationNotRecognizedMessage),
+            autocompleteSearchRequired(addressRequiredMessage),
+            autocompletePlaceSelected(addressNotRecognizedMessage),
           ]}
         />
 
+        <Field
+          name="building"
+          label={buildingMessage}
+          placeholder={buildingPlaceholderMessage}
+          component={this.EnhancedInput}
+          type="text"
+        />
+
         <Button
           className={css.submitButton}
           type="submit"

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

@@ -5,7 +5,7 @@ exports[`EditListingLocationForm matches snapshot 1`] = `
     autoFocus={true}
     component={[Function]}
     format={null}
-    label="EditListingLocationForm.location"
+    label="EditListingLocationForm.address"
     name="location"
     validate={
       Array [
@@ -13,6 +13,12 @@ exports[`EditListingLocationForm matches snapshot 1`] = `
         [Function],
       ]
     } />
+  <Field
+    component={[Function]}
+    label="EditListingLocationForm.building"
+    name="building"
+    placeholder="EditListingLocationForm.buildingPlaceholder"
+    type="text" />
   <Button
     className={null}
     rootClassName=""

src/containers/ListingPage/ListingPage.js

@@ -95,9 +95,19 @@ export class ListingPageComponent extends Component {
       title = '',
     } = attributes;
 
+    // TODO location address is currently serialized inside address field (API will change later)
+    // Content is something like { locationAddress: 'Street, Province, Country', building: 'A 42' };
+    let locationAddress = "";
+    try {
+      const deserializedAddress = JSON.parse(address || "{}");
+      locationAddress = deserializedAddress.locationAddress;
+    } catch(e) {
+      locationAddress = address;
+    }
+
     const bookBtnMessage = intl.formatMessage({ id: 'ListingPage.ctaButtonMessage' }, { title });
     const { formattedPrice, priceTitle } = priceData(price, currencyConfig, intl);
-    const map = geolocation ? <Map center={geolocation} address={address} /> : null;
+    const map = geolocation ? <Map center={geolocation} address={locationAddress} /> : null;
 
     // TODO Responsive image-objects need to be thought through when final image sizes are known
     const images = currentListing && currentListing.images

src/translations/en.json

@@ -39,9 +39,11 @@
   "EditListingDescriptionForm.titlePlaceholder": "What's the name of your sauna?",
   "EditListingDescriptionForm.titleRequired": "You need to add a name.",
   "EditListingDescriptionPanel.title": "Add your sauna",
-  "EditListingLocationForm.location": "Location",
-  "EditListingLocationForm.locationRequired": "You need to provide a location",
-  "EditListingLocationForm.locationNotRecognized": "We didn't recognize this location. Please try another location.",
+  "EditListingLocationForm.address": "Address",
+  "EditListingLocationForm.addressRequired": "You need to provide a location",
+  "EditListingLocationForm.addressNotRecognized": "We didn't recognize this location. Please try another location.",
+  "EditListingLocationForm.building": "Apt, suite, building # (optional)",
+  "EditListingLocationForm.buildingPlaceholder": "E.g. A 42",
   "EditListingLocationPanel.title": "Where's your sauna located?",
   "EditListingPhotosForm.imageRequired": "You need to add at least one image.",
   "EditListingPhotosForm.bankAccountNumberRequired": "You need to add a bank account number.",