muba-posting 4.1.28 → 4.2.0

package/Publish5.js

@@ -76,8 +76,7 @@ export default class Publish5 extends React.Component {
           ],
         selectedItem: this.props.postingAd.floorNumber,
         adType: this.props.postingAd.adType,
-        adTypeDetails: this.props.postingAd.adTypeDetails,
-        viewLoaded: false
+        adTypeDetails: this.props.postingAd.adTypeDetails
       },
       orientationOptions: {
         elements:
@@ -93,18 +92,14 @@ export default class Publish5 extends React.Component {
     }
   }
 
-  componentDidUpdate = (prevProps) => {
-    if (!prevProps.showView && this.props.showView && !this.state.viewLoaded) {
-      this.setState({
-        viewLoaded: true
-      });
-    }
-
+  componentDidMount = () => {
     const componentsHeight = this.props.headerHeight + this.props.progressBarHeight;
     const minHeight = window.height - componentsHeight;
     if (this.state.minHeight != minHeight) {
       this.setState({ minHeight: minHeight })
     }
+
+    this.refreshData();
   }
 
   async refreshData() {
@@ -175,358 +170,354 @@ export default class Publish5 extends React.Component {
 
   render() {
     return (
-      <View style={this.props.showView ? '' : commonStyles.displayNone}>
-        {this.state.viewLoaded ?
-          <View style={{ minHeight: this.state.minHeight }}>
-            <View style={commonStyles.formFieldset}>
-              <View style={commonStyles.progressbarInputArea}>
-                <Text style={commonStyles.progressbarInputAreaH3}>{strings('setup.features')}</Text>
-
-                <View style={commonStyles.row}>
-                  {this.state.age.length > 0 ?
-                    <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
-                      <InputSelect
-                        options={this.state.ageOptions}
-                        placeholder={strings('setup.select')}
-                        required={false}
-                        scroll={(ref) => this.props.scroll(ref)}
-                        label={this.state.age[0].label}
-                        labelStyle={commonStyles.progressbarField}
-                        selectStyle={commonStyles.inputSelect}
-                        onChange={(value) => this.props.postingAd.age = value}
-                        ref={(element) => this.inputSelectAge = element} />
-                    </View>
-                    :
-                    null
-                  }
-                  {this.state.floorType.length > 0 ?
-                    <View style={[commonStyles.col, commonStyles.col6]}>
-                      <InputSelect
-                        options={this.state.floorTypeOptions}
-                        placeholder={strings('setup.select')}
-                        required={false}
-                        scroll={(ref) => this.props.scroll(ref)}
-                        label={this.state.floorType[0].label}
-                        labelStyle={commonStyles.progressbarField}
-                        selectStyle={commonStyles.inputSelect}
-                        onChange={(value) => this.props.postingAd.floorType = value}
-                        ref={(element) => this.inputSelectFloorType = element} />
-                    </View>
-                    :
-                    null
-                  }
+      <View style={{ minHeight: this.state.minHeight }}>
+        <View style={commonStyles.formFieldset}>
+          <View style={commonStyles.progressbarInputArea}>
+            <Text style={commonStyles.progressbarInputAreaH3}>{strings('setup.features')}</Text>
+
+            <View style={commonStyles.row}>
+              {this.state.age.length > 0 ?
+                <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
+                  <InputSelect
+                    options={this.state.ageOptions}
+                    placeholder={strings('setup.select')}
+                    required={false}
+                    scroll={(ref) => this.props.scroll(ref)}
+                    label={this.state.age[0].label}
+                    labelStyle={commonStyles.progressbarField}
+                    selectStyle={commonStyles.inputSelect}
+                    onChange={(value) => this.props.postingAd.age = value}
+                    ref={(element) => this.inputSelectAge = element} />
                 </View>
-                <View style={commonStyles.row}>
-                  {this.state.floorNumber.length > 0 ?
-                    <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
-                      <InputSelect
-                        options={this.state.floorNumberOptions}
-                        placeholder={strings('setup.select')}
-                        required={false}
-                        scroll={(ref) => this.props.scroll(ref)}
-                        label={this.state.floorNumber[0].label}
-                        labelStyle={commonStyles.progressbarField}
-                        selectStyle={commonStyles.inputSelect}
-                        onChange={(value) => this.props.postingAd.floorNumber = value}
-                        ref={(element) => this.inputSelectFloorNumber = element} />
-                    </View>
-                    :
-                    null
-                  }
-                  {this.state.orientation.length > 0 ?
-                    <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
-                      <InputSelect
-                        options={this.state.orientationOptions}
-                        placeholder={strings('setup.select')}
-                        required={false}
-                        scroll={(ref) => this.props.scroll(ref)}
-                        label={this.state.orientation[0].label}
-                        labelStyle={commonStyles.progressbarField}
-                        selectStyle={commonStyles.inputSelect}
-                        onChange={(value) => this.props.postingAd.orientation = value}
-                        ref={(element) => this.inputSelectOrientation = element} />
-                    </View>
-                    :
-                    null
-                  }
+                :
+                null
+              }
+              {this.state.floorType.length > 0 ?
+                <View style={[commonStyles.col, commonStyles.col6]}>
+                  <InputSelect
+                    options={this.state.floorTypeOptions}
+                    placeholder={strings('setup.select')}
+                    required={false}
+                    scroll={(ref) => this.props.scroll(ref)}
+                    label={this.state.floorType[0].label}
+                    labelStyle={commonStyles.progressbarField}
+                    selectStyle={commonStyles.inputSelect}
+                    onChange={(value) => this.props.postingAd.floorType = value}
+                    ref={(element) => this.inputSelectFloorType = element} />
                 </View>
-              </View>
-
-              <View style={commonStyles.progressbarFieldContainer}>
-                <Text style={commonStyles.progressbarFieldH4}>{strings('setup.mainFeatures').toUpperCase()}</Text>
-
-                <View style={[commonStyles.row, commonStyles.rowIcons]}>
-                  <IconFeatures
-                    iconSource={require('./assets/images/garden.png')}
-                    iconHoverSource={require('./assets/images/garden-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "garden" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "garden" }).length > 0}
-                    selected={this.props.postingAd.garden}
-                    onPress={(value) => this.props.postingAd.garden = value}
-                    ref={(element) => this.inputGarden = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/terrace.png')}
-                    iconHoverSource={require('./assets/images/terrace-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "terrace" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "terrace" }).length > 0}
-                    selected={this.props.postingAd.terrace}
-                    onPress={(value) => this.props.postingAd.terrace = value}
-                    ref={(element) => this.inputTerrace = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/garage.png')}
-                    iconHoverSource={require('./assets/images/garage-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "garage" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "garage" }).length > 0}
-                    selected={this.props.postingAd.garage}
-                    onPress={(value) => this.props.postingAd.garage = value}
-                    ref={(element) => this.inputGarage = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/elevator.png')}
-                    iconHoverSource={require('./assets/images/elevator-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "elevator" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "elevator" }).length > 0}
-                    selected={this.props.postingAd.elevator}
-                    onPress={(value) => this.props.postingAd.elevator = value}
-                    ref={(element) => this.inputElevator = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/sea.png')}
-                    iconHoverSource={require('./assets/images/sea-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "seaViews" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "seaViews" }).length > 0}
-                    selected={this.props.postingAd.seaViews}
-                    onPress={(value) => this.props.postingAd.seaViews = value}
-                    ref={(element) => this.inputSeaViews = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/views.png')}
-                    iconHoverSource={require('./assets/images/views-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "mountainsViews" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "mountainsViews" }).length > 0}
-                    selected={this.props.postingAd.mountainsViews}
-                    onPress={(value) => this.props.postingAd.mountainsViews = value}
-                    ref={(element) => this.inputMountainViews = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/pool.png')}
-                    iconHoverSource={require('./assets/images/pool-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "pool" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "pool" }).length > 0}
-                    selected={this.props.postingAd.pool}
-                    onPress={(value) => this.props.postingAd.pool = value}
-                    ref={(element) => this.inputPool = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/concierge.png')}
-                    iconHoverSource={require('./assets/images/concierge-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "doorman" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "doorman" }).length > 0}
-                    selected={this.props.postingAd.doorman}
-                    onPress={(value) => this.props.postingAd.doorman = value}
-                    ref={(element) => this.inputConcierge = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/storage.png')}
-                    iconHoverSource={require('./assets/images/storage-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "storageRoom" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "storageRoom" }).length > 0}
-                    selected={this.props.postingAd.storageRoom}
-                    onPress={(value) => this.props.postingAd.storageRoom = value}
-                    ref={(element) => this.inputStorageRoom = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/furnish.png')}
-                    iconHoverSource={require('./assets/images/furnish-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "furnished" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "furnished" }).length > 0}
-                    selected={this.props.postingAd.furnished}
-                    onPress={(value) => this.props.postingAd.furnished = value}
-                    ref={(element) => this.inputFurnished = element} />
-                  <IconFeatures
-                    iconSource={require('./assets/images/exteriorFacade.png')}
-                    iconHoverSource={require('./assets/images/exteriorFacade-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "exteriorFacade" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "exteriorFacade" }).length > 0}
-                    selected={this.props.postingAd.exteriorFacade}
-                    onPress={(value) => this.props.postingAd.exteriorFacade = value}
-                    ref={(element) => this.inputExteriorFacade = element} />
+                :
+                null
+              }
+            </View>
+            <View style={commonStyles.row}>
+              {this.state.floorNumber.length > 0 ?
+                <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
+                  <InputSelect
+                    options={this.state.floorNumberOptions}
+                    placeholder={strings('setup.select')}
+                    required={false}
+                    scroll={(ref) => this.props.scroll(ref)}
+                    label={this.state.floorNumber[0].label}
+                    labelStyle={commonStyles.progressbarField}
+                    selectStyle={commonStyles.inputSelect}
+                    onChange={(value) => this.props.postingAd.floorNumber = value}
+                    ref={(element) => this.inputSelectFloorNumber = element} />
                 </View>
-
-                <Text style={commonStyles.progressbarFieldH4}>{strings('setup.inside').toUpperCase()}</Text>
-
-                <View style={[commonStyles.row, commonStyles.rowIcons]}>
-                  <IconFeatures
-                    iconSource={require('./assets/images/moroccan.png')}
-                    iconHoverSource={require('./assets/images/moroccan-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "moroccanLounge" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "moroccanLounge" }).length > 0}
-                    selected={this.props.postingAd.moroccanLounge}
-                    onPress={(value) => this.props.postingAd.moroccanLounge = value}
-                    ref={(element) => this.inputSalonMarocain = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/diningroom.png')}
-                    iconHoverSource={require('./assets/images/diningroom-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "europeanLounge" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "europeanLounge" }).length > 0}
-                    selected={this.props.postingAd.europeanLounge}
-                    onPress={(value) => this.props.postingAd.europeanLounge = value}
-                    ref={(element) => this.inputSalonEuropean = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/satellite.png')}
-                    iconHoverSource={require('./assets/images/satellite-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "satellite" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "satellite" }).length > 0}
-                    selected={this.props.postingAd.satellite}
-                    onPress={(value) => this.props.postingAd.satellite = value}
-                    ref={(element) => this.inputSatellite = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/fire.png')}
-                    iconHoverSource={require('./assets/images/fire-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "fireplace" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "fireplace" }).length > 0}
-                    selected={this.props.postingAd.fireplace}
-                    onPress={(value) => this.props.postingAd.fireplace = value}
-                    ref={(element) => this.inputFirePlace = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/air.png')}
-                    iconHoverSource={require('./assets/images/air-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "airConditioning" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "airConditioning" }).length > 0}
-                    selected={this.props.postingAd.airConditioning}
-                    onPress={(value) => this.props.postingAd.airConditioning = value}
-                    ref={(element) => this.inputAir = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/heating.png')}
-                    iconHoverSource={require('./assets/images/heating-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "heating" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "heating" }).length > 0}
-                    selected={this.props.postingAd.heating}
-                    onPress={(value) => this.props.postingAd.heating = value}
-                    ref={(element) => this.inputHeating = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/security.png')}
-                    iconHoverSource={require('./assets/images/security-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "security" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "security" }).length > 0}
-                    selected={this.props.postingAd.security}
-                    onPress={(value) => this.props.postingAd.security = value}
-                    ref={(element) => this.inputSecurity = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/glazing.png')}
-                    iconHoverSource={require('./assets/images/glazing-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "doubleGlazing" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "doubleGlazing" }).length > 0}
-                    selected={this.props.postingAd.doubleGlazing}
-                    onPress={(value) => this.props.postingAd.doubleGlazing = value}
-                    ref={(element) => this.inputDoubleGlazing = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/door.png')}
-                    iconHoverSource={require('./assets/images/door-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "reinforcedDoor" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "reinforcedDoor" }).length > 0}
-                    selected={this.props.postingAd.reinforcedDoor}
-                    onPress={(value) => this.props.postingAd.reinforcedDoor = value}
-                    ref={(element) => this.inputReinforcedDoor = element} />
+                :
+                null
+              }
+              {this.state.orientation.length > 0 ?
+                <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
+                  <InputSelect
+                    options={this.state.orientationOptions}
+                    placeholder={strings('setup.select')}
+                    required={false}
+                    scroll={(ref) => this.props.scroll(ref)}
+                    label={this.state.orientation[0].label}
+                    labelStyle={commonStyles.progressbarField}
+                    selectStyle={commonStyles.inputSelect}
+                    onChange={(value) => this.props.postingAd.orientation = value}
+                    ref={(element) => this.inputSelectOrientation = element} />
                 </View>
+                :
+                null
+              }
+            </View>
+          </View>
 
-                <Text style={commonStyles.progressbarFieldH4}>{strings('setup.otherOptions').toUpperCase()}</Text>
-
-                <View style={[commonStyles.row, commonStyles.rowIcons]}>
-                  <IconFeatures
-                    iconSource={require('./assets/images/kitchen.png')}
-                    iconHoverSource={require('./assets/images/kitchen-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "fullKitchen" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "fullKitchen" }).length > 0}
-                    selected={this.props.postingAd.fullKitchen}
-                    onPress={(value) => this.props.postingAd.fullKitchen = value}
-                    ref={(element) => this.inputFullKitchen = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/fridge.png')}
-                    iconHoverSource={require('./assets/images/fridge-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "fridge" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "fridge" }).length > 0}
-                    selected={this.props.postingAd.fridge}
-                    onPress={(value) => this.props.postingAd.fridge = value}
-                    ref={(element) => this.inputFridge = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/oven.png')}
-                    iconHoverSource={require('./assets/images/oven-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "oven" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "oven" }).length > 0}
-                    selected={this.props.postingAd.oven}
-                    onPress={(value) => this.props.postingAd.oven = value}
-                    ref={(element) => this.inputOven = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/tv.png')}
-                    iconHoverSource={require('./assets/images/tv-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "tv" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "tv" }).length > 0}
-                    selected={this.props.postingAd.tv}
-                    onPress={(value) => this.props.postingAd.tv = value}
-                    ref={(element) => this.inputTv = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/washing.png')}
-                    iconHoverSource={require('./assets/images/washing-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "washer" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "washer" }).length > 0}
-                    selected={this.props.postingAd.washer}
-                    onPress={(value) => this.props.postingAd.washer = value}
-                    ref={(element) => this.inputWashing = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/microwave.png')}
-                    iconHoverSource={require('./assets/images/microwave-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "microwave" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "microwave" }).length > 0}
-                    selected={this.props.postingAd.microwave}
-                    onPress={(value) => this.props.postingAd.microwave = value}
-                    ref={(element) => this.inputMicrowaves = element} />
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/internet.png')}
-                    iconHoverSource={require('./assets/images/internet-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "internet" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "internet" }).length > 0}
-                    selected={this.props.postingAd.internet}
-                    onPress={(value) => this.props.postingAd.internet = value}
-                    ref={(element) => this.inputInternet = element} />
-
-
-                  <IconFeatures
-                    iconSource={require('./assets/images/animals.png')}
-                    iconHoverSource={require('./assets/images/animals-hover.png')}
-                    iconText={this.state.adTypeDetails.filter(function (detail) { return detail.value == "animals" })[0]?.label}
-                    visible={this.state.adTypeDetails.filter(function (detail) { return detail.value == "animals" }).length > 0}
-                    selected={this.props.postingAd.animals}
-                    onPress={(value) => this.props.postingAd.animals = value}
-                    ref={(element) => this.inputAnimals = element} />
-                </View>
-              </View>
+          <View style={commonStyles.progressbarFieldContainer}>
+            <Text style={commonStyles.progressbarFieldH4}>{strings('setup.mainFeatures').toUpperCase()}</Text>
+
+            <View style={[commonStyles.row, commonStyles.rowIcons]}>
+              <IconFeatures
+                iconSource={require('./assets/images/garden.png')}
+                iconHoverSource={require('./assets/images/garden-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "garden" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "garden" }).length > 0}
+                selected={this.props.postingAd.garden}
+                onPress={(value) => this.props.postingAd.garden = value}
+                ref={(element) => this.inputGarden = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/terrace.png')}
+                iconHoverSource={require('./assets/images/terrace-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "terrace" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "terrace" }).length > 0}
+                selected={this.props.postingAd.terrace}
+                onPress={(value) => this.props.postingAd.terrace = value}
+                ref={(element) => this.inputTerrace = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/garage.png')}
+                iconHoverSource={require('./assets/images/garage-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "garage" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "garage" }).length > 0}
+                selected={this.props.postingAd.garage}
+                onPress={(value) => this.props.postingAd.garage = value}
+                ref={(element) => this.inputGarage = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/elevator.png')}
+                iconHoverSource={require('./assets/images/elevator-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "elevator" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "elevator" }).length > 0}
+                selected={this.props.postingAd.elevator}
+                onPress={(value) => this.props.postingAd.elevator = value}
+                ref={(element) => this.inputElevator = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/sea.png')}
+                iconHoverSource={require('./assets/images/sea-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "seaViews" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "seaViews" }).length > 0}
+                selected={this.props.postingAd.seaViews}
+                onPress={(value) => this.props.postingAd.seaViews = value}
+                ref={(element) => this.inputSeaViews = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/views.png')}
+                iconHoverSource={require('./assets/images/views-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "mountainsViews" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "mountainsViews" }).length > 0}
+                selected={this.props.postingAd.mountainsViews}
+                onPress={(value) => this.props.postingAd.mountainsViews = value}
+                ref={(element) => this.inputMountainViews = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/pool.png')}
+                iconHoverSource={require('./assets/images/pool-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "pool" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "pool" }).length > 0}
+                selected={this.props.postingAd.pool}
+                onPress={(value) => this.props.postingAd.pool = value}
+                ref={(element) => this.inputPool = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/concierge.png')}
+                iconHoverSource={require('./assets/images/concierge-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "doorman" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "doorman" }).length > 0}
+                selected={this.props.postingAd.doorman}
+                onPress={(value) => this.props.postingAd.doorman = value}
+                ref={(element) => this.inputConcierge = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/storage.png')}
+                iconHoverSource={require('./assets/images/storage-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "storageRoom" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "storageRoom" }).length > 0}
+                selected={this.props.postingAd.storageRoom}
+                onPress={(value) => this.props.postingAd.storageRoom = value}
+                ref={(element) => this.inputStorageRoom = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/furnish.png')}
+                iconHoverSource={require('./assets/images/furnish-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "furnished" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "furnished" }).length > 0}
+                selected={this.props.postingAd.furnished}
+                onPress={(value) => this.props.postingAd.furnished = value}
+                ref={(element) => this.inputFurnished = element} />
+              <IconFeatures
+                iconSource={require('./assets/images/exteriorFacade.png')}
+                iconHoverSource={require('./assets/images/exteriorFacade-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "exteriorFacade" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "exteriorFacade" }).length > 0}
+                selected={this.props.postingAd.exteriorFacade}
+                onPress={(value) => this.props.postingAd.exteriorFacade = value}
+                ref={(element) => this.inputExteriorFacade = element} />
             </View>
-            <View style={commonStyles.buttomButton}>
-              <TouchableHighlight style={commonStyles.actionButton} underlayColor="#ff5d00" onPress={() => this.nextStep()}>
-                <Text style={commonStyles.actionButtonText}>
-                  {this.props.postingAd.id == null || this.props.fullPosting ? strings('setup.next').toUpperCase() : strings('setup.enregistrer').toUpperCase()}
-                </Text>
-              </TouchableHighlight>
+
+            <Text style={commonStyles.progressbarFieldH4}>{strings('setup.inside').toUpperCase()}</Text>
+
+            <View style={[commonStyles.row, commonStyles.rowIcons]}>
+              <IconFeatures
+                iconSource={require('./assets/images/moroccan.png')}
+                iconHoverSource={require('./assets/images/moroccan-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "moroccanLounge" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "moroccanLounge" }).length > 0}
+                selected={this.props.postingAd.moroccanLounge}
+                onPress={(value) => this.props.postingAd.moroccanLounge = value}
+                ref={(element) => this.inputSalonMarocain = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/diningroom.png')}
+                iconHoverSource={require('./assets/images/diningroom-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "europeanLounge" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "europeanLounge" }).length > 0}
+                selected={this.props.postingAd.europeanLounge}
+                onPress={(value) => this.props.postingAd.europeanLounge = value}
+                ref={(element) => this.inputSalonEuropean = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/satellite.png')}
+                iconHoverSource={require('./assets/images/satellite-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "satellite" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "satellite" }).length > 0}
+                selected={this.props.postingAd.satellite}
+                onPress={(value) => this.props.postingAd.satellite = value}
+                ref={(element) => this.inputSatellite = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/fire.png')}
+                iconHoverSource={require('./assets/images/fire-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "fireplace" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "fireplace" }).length > 0}
+                selected={this.props.postingAd.fireplace}
+                onPress={(value) => this.props.postingAd.fireplace = value}
+                ref={(element) => this.inputFirePlace = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/air.png')}
+                iconHoverSource={require('./assets/images/air-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "airConditioning" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "airConditioning" }).length > 0}
+                selected={this.props.postingAd.airConditioning}
+                onPress={(value) => this.props.postingAd.airConditioning = value}
+                ref={(element) => this.inputAir = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/heating.png')}
+                iconHoverSource={require('./assets/images/heating-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "heating" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "heating" }).length > 0}
+                selected={this.props.postingAd.heating}
+                onPress={(value) => this.props.postingAd.heating = value}
+                ref={(element) => this.inputHeating = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/security.png')}
+                iconHoverSource={require('./assets/images/security-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "security" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "security" }).length > 0}
+                selected={this.props.postingAd.security}
+                onPress={(value) => this.props.postingAd.security = value}
+                ref={(element) => this.inputSecurity = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/glazing.png')}
+                iconHoverSource={require('./assets/images/glazing-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "doubleGlazing" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "doubleGlazing" }).length > 0}
+                selected={this.props.postingAd.doubleGlazing}
+                onPress={(value) => this.props.postingAd.doubleGlazing = value}
+                ref={(element) => this.inputDoubleGlazing = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/door.png')}
+                iconHoverSource={require('./assets/images/door-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "reinforcedDoor" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "reinforcedDoor" }).length > 0}
+                selected={this.props.postingAd.reinforcedDoor}
+                onPress={(value) => this.props.postingAd.reinforcedDoor = value}
+                ref={(element) => this.inputReinforcedDoor = element} />
+            </View>
+
+            <Text style={commonStyles.progressbarFieldH4}>{strings('setup.otherOptions').toUpperCase()}</Text>
+
+            <View style={[commonStyles.row, commonStyles.rowIcons]}>
+              <IconFeatures
+                iconSource={require('./assets/images/kitchen.png')}
+                iconHoverSource={require('./assets/images/kitchen-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "fullKitchen" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "fullKitchen" }).length > 0}
+                selected={this.props.postingAd.fullKitchen}
+                onPress={(value) => this.props.postingAd.fullKitchen = value}
+                ref={(element) => this.inputFullKitchen = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/fridge.png')}
+                iconHoverSource={require('./assets/images/fridge-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "fridge" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "fridge" }).length > 0}
+                selected={this.props.postingAd.fridge}
+                onPress={(value) => this.props.postingAd.fridge = value}
+                ref={(element) => this.inputFridge = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/oven.png')}
+                iconHoverSource={require('./assets/images/oven-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "oven" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "oven" }).length > 0}
+                selected={this.props.postingAd.oven}
+                onPress={(value) => this.props.postingAd.oven = value}
+                ref={(element) => this.inputOven = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/tv.png')}
+                iconHoverSource={require('./assets/images/tv-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "tv" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "tv" }).length > 0}
+                selected={this.props.postingAd.tv}
+                onPress={(value) => this.props.postingAd.tv = value}
+                ref={(element) => this.inputTv = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/washing.png')}
+                iconHoverSource={require('./assets/images/washing-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "washer" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "washer" }).length > 0}
+                selected={this.props.postingAd.washer}
+                onPress={(value) => this.props.postingAd.washer = value}
+                ref={(element) => this.inputWashing = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/microwave.png')}
+                iconHoverSource={require('./assets/images/microwave-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "microwave" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "microwave" }).length > 0}
+                selected={this.props.postingAd.microwave}
+                onPress={(value) => this.props.postingAd.microwave = value}
+                ref={(element) => this.inputMicrowaves = element} />
+
+              <IconFeatures
+                iconSource={require('./assets/images/internet.png')}
+                iconHoverSource={require('./assets/images/internet-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "internet" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "internet" }).length > 0}
+                selected={this.props.postingAd.internet}
+                onPress={(value) => this.props.postingAd.internet = value}
+                ref={(element) => this.inputInternet = element} />
+
+
+              <IconFeatures
+                iconSource={require('./assets/images/animals.png')}
+                iconHoverSource={require('./assets/images/animals-hover.png')}
+                iconText={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "animals" })[0]?.label}
+                visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value == "animals" }).length > 0}
+                selected={this.props.postingAd.animals}
+                onPress={(value) => this.props.postingAd.animals = value}
+                ref={(element) => this.inputAnimals = element} />
             </View>
           </View>
-          : null}
+        </View>
+        <View style={commonStyles.buttomButton}>
+          <TouchableHighlight style={commonStyles.actionButton} underlayColor="#ff5d00" onPress={() => this.nextStep()}>
+            <Text style={commonStyles.actionButtonText}>
+              {this.props.postingAd.id == null || this.props.fullPosting ? strings('setup.next').toUpperCase() : strings('setup.enregistrer').toUpperCase()}
+            </Text>
+          </TouchableHighlight>
+        </View>
       </View>
     );
   }