muba-posting 8.0.4 → 8.0.6

package/Publish5.js

@@ -4,6 +4,12 @@ import { strings } from 'muba-i18n';
 import commonStyles from './commonStyles';
 import InputSelect from 'muba-input-select';
 import { Views } from './utils/Views';
+import { createIconSetFromIcoMoon } from '@expo/vector-icons';
+const AdFeatureIcon = createIconSetFromIcoMoon(
+  require('./fonts/selection-ad.json'),
+  'PostingFontAwesomeAd',
+  'Font-Awesome-ad.ttf'
+);
 
 export default class Publish5 extends React.Component {
   constructor(props) {
@@ -20,58 +26,27 @@ export default class Publish5 extends React.Component {
       floorType: floorType,
       floorNumber: floorNumber,
       orientation: orientationType,
+      mainFeatures: [],
+      insideFeatures: [],
+      otherFeatures: [],
       ageOptions: {
         elements:
           [
-            { section: true, value: null, label: age[0] ? age[0].label : 'age' },
-            { label: strings('setup.L1'), value: 'L1' },
-            { label: strings('setup.F1T5'), value: 'F1T5' },
-            { label: strings('setup.F5T10'), value: 'F5T10' },
-            { label: strings('setup.F10T20'), value: 'F10T20' },
-            { label: strings('setup.F20T30'), value: 'F20T30' },
-            { label: strings('setup.F30T50'), value: 'F30T50' },
-            { label: strings('setup.F50T70'), value: 'F50T70' },
-            { label: strings('setup.F70T100'), value: 'F70T100' },
-            { label: strings('setup.G100'), value: 'G100' },
+            { section: true, value: null, label: '' }
           ],
         selectedItem: this.props.postingAd.age
       },
       floorTypeOptions: {
         elements:
           [
-            { section: true, value: null, label: floorType[0] ? floorType[0].label : 'floorType' },
-            { label: strings('setup.parquet'), value: 'PARQUET' },
-            { label: strings('setup.marble'), value: 'MARBLE' },
-            { label: strings('setup.tile'), value: 'TILE' },
-            { label: strings('setup.others'), value: 'OTHERS' }
+            { section: true, value: null, label: '' }
           ],
         selectedItem: this.props.postingAd.floorType
       },
       floorNumberOptions: {
         elements:
           [
-            { section: true, value: null, label: floorNumber[0] ? floorNumber[0].label : 'floorNumber' },
-            { label: '0', value: '0' },
-            { label: '1', value: '1' },
-            { label: '2', value: '2' },
-            { label: '3', value: '3' },
-            { label: '4', value: '4' },
-            { label: '5', value: '5' },
-            { label: '6', value: '6' },
-            { label: '7', value: '7' },
-            { label: '8', value: '8' },
-            { label: '9', value: '9' },
-            { label: '10', value: '10' },
-            { label: '11', value: '11' },
-            { label: '12', value: '12' },
-            { label: '13', value: '13' },
-            { label: '14', value: '14' },
-            { label: '15', value: '15' },
-            { label: '16', value: '16' },
-            { label: '17', value: '17' },
-            { label: '18', value: '18' },
-            { label: '19', value: '19' },
-            { label: '20', value: '20' },
+            { section: true, value: null, label: '' }
           ],
         selectedItem: this.props.postingAd.floorNumber,
         adType: this.props.postingAd.adType,
@@ -80,19 +55,62 @@ export default class Publish5 extends React.Component {
       orientationOptions: {
         elements:
           [
-            { section: true, value: null, label: orientationType[0] ? orientationType[0].label : 'orientation' },
-            { label: strings('setup.north'), value: 'NORTH' },
-            { label: strings('setup.west'), value: 'WEST' },
-            { label: strings('setup.est'), value: 'EST' },
-            { label: strings('setup.south'), value: 'SOUTH' }
+            { section: true, value: null, label: '' }
           ],
         selectedItem: this.props.postingAd.orientation
       },
+      numberOfFloorsLabel: '',
+      numberOfFloorsOptions: {
+        elements: [
+          { section: true, value: null, label: '' }
+        ],
+        selectedItem: this.props.postingAd.numberOfFloors
+      },
+      deliveryLabel: '',
+      deliveryOptions: {
+        elements: [
+          { section: true, value: null, label: '' }
+        ],
+        selectedItem: this.props.postingAd.delivery
+      },
+      landStatusLabel: '',
+      landStatusOptions: {
+        elements: [
+          { section: true, value: null, label: '' }
+        ],
+        selectedItem: this.props.postingAd.landStatus
+      },
     }
   }
 
   componentDidMount = () => {
     this.refreshData();
+    this.loadFeaturesOptions();
+  }
+
+  async loadFeaturesOptions() {
+    const labels = {}
+    const options = {};
+    this.props.features.forEach(feature => {
+      if (feature.name === 'landTypes') {
+        options[feature.name + 'Options'] = [];
+        feature.options.map((item) => {
+          options[feature.name + 'Options'].push(item);
+        });
+      } else if (this.state[feature.name + 'Options']) {
+        options[feature.name + 'Options'] = { ...this.state[feature.name + 'Options'], elements: [...this.state[feature.name + 'Options'].elements] };
+        options[feature.name + 'Options'].elements[0].label = feature.label;
+        feature.options.map((item) => {
+          options[feature.name + 'Options'].elements.push(item);
+        });
+      }
+      labels[feature.name + 'Label'] = feature.label;
+    });
+
+    this.setState({
+      ...labels,
+      ...options
+    });
   }
 
   async refreshData() {
@@ -168,9 +186,9 @@ export default class Publish5 extends React.Component {
           <View style={commonStyles.progressbarInputArea}>
             <Text style={commonStyles.progressbarInputAreaH3}>{strings('setup.features')}</Text>
 
-            <View style={commonStyles.row}>
+            <View style={[commonStyles.row, { flexWrap: 'wrap' }]}>
               {this.state.age.length > 0 ?
-                <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
+                <View style={[commonStyles.col, commonStyles.col6Sep]}>
                   <InputSelect
                     options={this.state.ageOptions}
                     placeholder={strings('setup.select')}
@@ -187,7 +205,7 @@ export default class Publish5 extends React.Component {
                 null
               }
               {this.state.floorType.length > 0 ?
-                <View style={[commonStyles.col, commonStyles.col6]}>
+                <View style={[commonStyles.col, commonStyles.col6Sep]}>
                   <InputSelect
                     options={this.state.floorTypeOptions}
                     placeholder={strings('setup.select')}
@@ -203,10 +221,8 @@ export default class Publish5 extends React.Component {
                 :
                 null
               }
-            </View>
-            <View style={commonStyles.row}>
               {this.state.floorNumber.length > 0 ?
-                <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
+                <View style={[commonStyles.col, commonStyles.col6Sep]}>
                   <InputSelect
                     options={this.state.floorNumberOptions}
                     placeholder={strings('setup.select')}
@@ -223,7 +239,7 @@ export default class Publish5 extends React.Component {
                 null
               }
               {this.state.orientation.length > 0 ?
-                <View style={[commonStyles.col, commonStyles.col6, commonStyles.selectPublish]}>
+                <View style={[commonStyles.col, commonStyles.col6Sep]}>
                   <InputSelect
                     options={this.state.orientationOptions}
                     placeholder={strings('setup.select')}
@@ -239,6 +255,54 @@ export default class Publish5 extends React.Component {
                 :
                 null
               }
+              {this.state.numberOfFloorsOptions.elements.length > 1 ?
+                <View style={[commonStyles.col, commonStyles.col6Sep]}>
+                  <InputSelect
+                    options={this.state.numberOfFloorsOptions}
+                    placeholder={strings('setup.select')}
+                    required={false}
+                    scroll={(ref) => this.props.scroll(ref)}
+                    label={this.state.numberOfFloorsLabel}
+                    labelStyle={commonStyles.progressbarField}
+                    selectStyle={commonStyles.inputSelect}
+                    disabled={!this.props.allowedToModify.numberOfFloors}
+                    onChange={(value) => this.props.postingAd.numberOfFloors = value}
+                    ref={(element) => this.inputSelectNumberOfFloors = element} />
+                </View>
+                :
+                null}
+              {this.state.deliveryOptions.elements.length > 1 ?
+                <View style={[commonStyles.col, commonStyles.col6Sep]}>
+                  <InputSelect
+                    options={this.state.deliveryOptions}
+                    placeholder={strings('setup.select')}
+                    required={false}
+                    scroll={(ref) => this.props.scroll(ref)}
+                    label={this.state.deliveryLabel}
+                    labelStyle={commonStyles.progressbarField}
+                    selectStyle={commonStyles.inputSelect}
+                    disabled={!this.props.allowedToModify.delivery}
+                    onChange={(value) => this.props.postingAd.delivery = value}
+                    ref={(element) => this.inputSelectDelivery = element} />
+                </View>
+                :
+                null}
+              {this.state.landStatusOptions.elements.length > 1 ?
+                <View style={[commonStyles.col, commonStyles.col6Sep]}>
+                  <InputSelect
+                    options={this.state.landStatusOptions}
+                    placeholder={strings('setup.select')}
+                    required={false}
+                    scroll={(ref) => this.props.scroll(ref)}
+                    label={this.state.landStatusLabel}
+                    labelStyle={commonStyles.progressbarField}
+                    selectStyle={commonStyles.inputSelect}
+                    disabled={!this.props.allowedToModify.landStatus}
+                    onChange={(value) => this.props.postingAd.landStatus = value}
+                    ref={(element) => this.inputSelectLandStatus = element} />
+                </View>
+                :
+                null}
             </View>
           </View>
 
@@ -246,293 +310,46 @@ export default class Publish5 extends React.Component {
             <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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                onPress={(value) => this.props.postingAd.exteriorFacade = value}
-                ref={(element) => this.inputExteriorFacade = element} />
+              {this.props.mainFeatures.map(feature =>
+                <IconFeature
+                  key={feature.name}
+                  name={feature.name}
+                  iconText={feature.label}
+                  visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value === feature.name }).length > 0}
+                  selected={this.props.postingAd[feature.name]}
+                  disabled={!this.props.allowedToModify.features}
+                  onPress={(value) => this.props.postingAd[feature.name] = value} />
+              )}
             </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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                onPress={(value) => this.props.postingAd.reinforcedDoor = value}
-                ref={(element) => this.inputReinforcedDoor = element} />
+              {this.props.insideFeatures.map(feature =>
+                <IconFeature
+                  key={feature.name}
+                  name={feature.name}
+                  iconText={feature.label}
+                  visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value === feature.name }).length > 0}
+                  selected={this.props.postingAd[feature.name]}
+                  disabled={!this.props.allowedToModify.features}
+                  onPress={(value) => this.props.postingAd[feature.name] = value} />
+              )}
             </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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                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}
-                disabled={!this.props.allowedToModify.features}
-                onPress={(value) => this.props.postingAd.animals = value}
-                ref={(element) => this.inputAnimals = element} />
+              {this.props.otherFeatures.map(feature =>
+                <IconFeature
+                  key={feature.name}
+                  name={feature.name}
+                  iconText={feature.label}
+                  visible={this.state.adTypeDetails?.filter(function (detail) { return detail.value === feature.name }).length > 0}
+                  selected={this.props.postingAd[feature.name]}
+                  disabled={!this.props.allowedToModify.features}
+                  onPress={(value) => this.props.postingAd[feature.name] = value} />
+              )}
             </View>
           </View>
         </View>
@@ -548,7 +365,7 @@ export default class Publish5 extends React.Component {
   }
 }
 
-class IconFeatures extends React.Component {
+class IconFeature extends React.Component {
   constructor(props) {
     super(props);
 
@@ -566,11 +383,11 @@ class IconFeatures extends React.Component {
     return (
       this.props.visible ?
         <View style={[commonStyles.characLinkBox, commonStyles.col, commonStyles.col3]}>
-          <TouchableOpacity activeOpacity={1} style={[commonStyles.characIcon, this.state.selected ? commonStyles.characIconSelected : commonStyles.characIcon, this.props.disabled ? commonStyles.disabled : null]} onPress={() => this.onPressIcon()}
+          <TouchableOpacity activeOpacity={1} style={[commonStyles.characIcon, commonStyles.characIcon, this.props.disabled ? commonStyles.disabled : null]} onPress={() => this.onPressIcon()}
             disabled={this.props.disabled}>
-            <Image style={commonStyles.characImage} source={this.state.selected ? this.props.iconHoverSource : this.props.iconSource} />
+            <AdFeatureIcon style={[commonStyles.characImage, this.state.selected ? commonStyles.characImageSelected : null]} name={this.props.name} />
           </TouchableOpacity>
-          <Text style={commonStyles.characIconText}>{this.props.iconText}</Text>
+          <Text style={[commonStyles.characIconText, this.state.selected ? commonStyles.characIconTextSelected : null]}>{this.props.iconText}</Text>
         </View>
         : null
     );

package/Publish6.js

@@ -205,7 +205,7 @@ export default class Publish6 extends React.Component {
               <PhoneGroup
                 ref={(phoneGroup) => this.phoneGroup = phoneGroup}
                 inputStyle={commonStyles.input}
-                phoneBoxStyle={this.state.requiredPhoneError ? commonStyles.inputPhoneBoxError : commonStyles.inputPhoneBox}
+                phoneBoxStyle={this.state.requiredPhoneError ? commonStyles.inputPhoneBoxError : null}
                 value={this.props.postingAd.phonesObject}
                 country={this.props.country}
                 maxPhones={3}