muba-posting 5.0.2 → 5.0.4

package/Posting.js

@@ -35,6 +35,7 @@ const BUSINESS_PRODUCTS = { method: 'GET', url: '/controller/products/{key}/rema
 const MAX_PICTURES = { method: 'GET', url: '/controller/posting/max-pictures' };
 const COUNTRY_PHONE = { method: 'GET', url: '/controller/countries/{countryCode}/phones' };
 const LOAD_PENDING_CREATED = { method: 'GET', url: '/controller/ads/pending-created/posting' };
+const PAYMENT_ONLINE_ACTIVE = { method: 'GET', url: '/controller/payments-online/{countryCode}/active' };
 
 export default class Posting extends React.Component {
   constructor(props) {
@@ -65,7 +66,6 @@ export default class Posting extends React.Component {
       countryPhone: '',
       businessId: this.props.businessId,
       picturesUploaded: 0,
-      images: [],
       params: null,
       postingAd: {
         transaction: null,
@@ -400,6 +400,11 @@ export default class Posting extends React.Component {
     } else {
       await this.setState({ postingAd: { ...this.state.postingAd, adId: response.id } });
       this._goToPage(Views.PREVIEW, null, response);
+
+      const paymentOnlineActive = await this.props.request(this, PAYMENT_ONLINE_ACTIVE, { regionId: this.state.postingAd.region });
+      if (!this.businessId && paymentOnlineActive.value === 'true') {
+        this._goToPage(Views.PAYMENT_ONLINE);
+      }
     }
     this._hideLoading();
 
@@ -427,8 +432,11 @@ export default class Posting extends React.Component {
 
   imageBrowserCallback = async (photos) => {
     this.setState({
-      showImageBrowser: false,
-      images: photos
+      showImageBrowser: false
+    }, () => {
+      for (let photo of photos) {
+        this.publish4?.loadUri(photo)
+      }
     });
   }
 
@@ -442,9 +450,8 @@ export default class Posting extends React.Component {
 
   _savePicture = async (picture) => {
     this.setState({
-      showImageBrowser: false,
-      images: [picture]
-    });
+      showImageBrowser: false
+    }, () => this.publish4?.loadUri(picture));
   }
 
   render() {
@@ -552,6 +559,7 @@ export default class Posting extends React.Component {
 
                 {this.state.view === Views.PUBLISH_4 ?
                   <Publish4 postingAd={this.state.postingAd}
+                    ref={publish4 => this.publish4 = publish4}
                     saveEditAd={() => this._saveEditAd()}
                     goToPage={(view) => this._goToPage(view)}
                     request={this.props.request}
@@ -562,8 +570,7 @@ export default class Posting extends React.Component {
                     progressBarHeight={this.state.progressBarHeight}
                     headerHeight={this.state.headerHeight}
                     openPictureSelector={() => this._openPictureSelector()}
-                    maxPictures={this.state.maxPictures}
-                    images={this.state.images} />
+                    maxPictures={this.state.maxPictures} />
                   :
                   null
                 }
@@ -642,7 +649,7 @@ export default class Posting extends React.Component {
                 }
 
               </CustomScrollView>
-              <PopupAdvice icon={<FontAwesomeIcon name='block' />} title={strings('setup.noPromoteTitle', { product: '' })} headerColor={commonStyles.red} ref={(popupAdvice) => { this.popupNoListings = popupAdvice; }}
+              <PopupAdvice icon={<FontAwesomeIcon name='block' />} title={strings('setup.noPromoteTitle', { product: '' })} headerColor={commonStyles.red} ref={popupAdvice => this.popupNoListings = popupAdvice}
                 onClose={async () => this.state.view !== Views.PREVIEW ? this.goBack() : null} hideButton={true}>
                 <OutputText style={commonStyles.popupText}>{strings('setup.noPromoteSubtitle', { countryPhone: this.state.countryPhone })}</OutputText>
                 <TouchableOpacity style={[commonStyles.okBtnBoxPopup, commonStyles.okBtnPopup]} onPress={() => this.popupNoListings.hide()} >

package/Publish4.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View, TouchableHighlight, TouchableOpacity, ImageBackground, Dimensions } from 'react-native';
+import { Text, View, TouchableHighlight, TouchableOpacity, ImageBackground, Dimensions, Image } from 'react-native';
 import PopupAdvice from 'muba-popup-advice';
 import { strings } from 'muba-i18n';
 import commonStyles from './commonStyles';
@@ -20,12 +20,15 @@ export default class Publish4 extends React.Component {
       allPhotosSelected: false,
       updateMainPhoto: false,
       isLoading: false,
-      imageBrowserOpen: false
+      imageBrowserOpen: false,
+      imageSize: [],
+      containerWidth: 0,
+      containerHeight: 0
     }
   }
 
   componentDidMount() {
-    for (let photo of this.props.images) {
+    for (let photo of this.props.postingAd.images) {
       this.loadImage(photo);
     }
 
@@ -37,9 +40,9 @@ export default class Publish4 extends React.Component {
   }
 
   componentDidUpdate = async (prevProps) => {
-    if (!this.isSameList(prevProps.images, this.props.images)) {
+    if (!this.isSameList(prevProps.postingAd.images, this.props.postingAd.images)) {
       this.setState({ images: [] }, () => {
-        for (let photo of this.props.images) {
+        for (let photo of this.props.postingAd.images) {
           this.loadImage(photo);
         }
       });
@@ -58,7 +61,7 @@ export default class Publish4 extends React.Component {
     return true;
   }
 
-  async loadImage(imgUri) {
+  async loadUri(imgUri) {
     if (imgUri) {
       let fileType = imgUri.substring(imgUri.lastIndexOf('.') + 1).toLowerCase();
 
@@ -72,20 +75,26 @@ export default class Publish4 extends React.Component {
         extraInfo: this.state.images.length
       }
 
-      let imagesArray = this.state.images;
-      imagesArray.push(image);
+      this.loadImage(image);
+    }
+  }
 
-      await this.setState({
-        showErrorNoSelectedImages: false,
-        images: imagesArray
-      });
+  loadImage(image) {
+    let imagesArray = this.state.images;
+    imagesArray.push(image);
 
+    this.calculateImageSize(image, imagesArray.length - 1)
+
+    this.setState({
+      showErrorNoSelectedImages: false,
+      images: imagesArray
+    }, () => {
       if (this.state.images.length == this.props.maxPictures) {
         this.setState({ allPhotosSelected: true });
       } else if (this.state.images.length == 1) {
         this.selectMainPhoto(this.state.images[0]);
       }
-    }
+    });
   }
 
   async deleteImage(itemId, index) {
@@ -170,6 +179,58 @@ export default class Publish4 extends React.Component {
     }, 500);
   }
 
+  calculateImageSize = (image) => {
+    let imageSize = this.state.imageSize;
+    Image.getSize(image.uri, (width, height) => {
+      if (this.state.containerWidth !== 0 && this.state.containerHeight !== 0) {
+        const containerRatio = this.state.containerWidth / this.state.containerHeight;
+        const imageRatio = width / height;
+
+        let finalWidth;
+        let finalHeight;
+        if (imageRatio > containerRatio) {
+          if (width > this.state.containerWidth) {
+            finalWidth = this.state.containerWidth;
+          } else {
+            finalWidth = width;
+          }
+          finalHeight = height * (finalWidth / width);
+        } else if (imageRatio < containerRatio) {
+          if (height > this.state.containerHeight) {
+            finalHeight = this.state.containerHeight;
+          } else {
+            finalHeight = height;
+          }
+          finalWidth = width * (finalHeight / height);
+        } else {
+          if (width > this.state.containerWidth) {
+            finalWidth = this.state.containerWidth;
+            finalHeight = this.state.containerHeight;
+          } else {
+            finalWidth = width;
+            finalHeight = height;
+          }
+        }
+        imageSize.push({
+          width: finalWidth,
+          height: finalHeight,
+          marginVertical: (this.state.containerHeight - finalHeight) / 2,
+          marginHorizontal: (this.state.containerWidth - finalWidth) / 2
+        });
+      } else {
+        imageSize.push({
+          width: '100%',
+          height: '100%',
+          marginVertical: 0,
+          marginHorizontal: 0
+        })
+      }
+      this.setState({
+        imageSize: imageSize
+      });
+    });
+  }
+
   render() {
     return (
       <View style={{ minHeight: this.state.minHeight }}>
@@ -208,9 +269,10 @@ export default class Publish4 extends React.Component {
                 }
                 {this.state.images.map((item, index) => {
                   return (
-                    <ImageBackground style={[commonStyles.photoBox, commonStyles.photoBoxImage]} source={{ uri: item.uri }} borderRadius={10} key={index}
-                      onError={() => this.rerenderImage(index)}>
-                      <ImageBackground style={[commonStyles.photoControls, commonStyles.row]} source={require('./assets/images/bg-shadow.png')} resizeMode='stretch' borderRadius={1.5}>
+                    <View style={[commonStyles.photoBox]} onLayout={(event) => this.setState({ containerWidth: event.nativeEvent.layout.width, containerHeight: event.nativeEvent.layout.height })} key={index}>
+                      <Image style={{ width: this.state.imageSize[index]?.width, height: this.state.imageSize[index]?.height, marginVertical: this.state.imageSize[index]?.marginVertical, marginHorizontal: this.state.imageSize[index]?.marginHorizontal }}
+                        resizeMode='center' source={{ uri: item.uri }} borderRadius={10} onError={() => this.rerenderImage(index)} />
+                      <ImageBackground style={[commonStyles.photoControls, commonStyles.row]} source={require('./assets/images/bg-shadow.png')} resizeMode='center' borderRadius={1.5}>
 
                         <TouchableHighlight style={commonStyles.leftIcon} onPress={() => this.deleteImage(item.id, index)}>
                           <FontAwesomeIcon style={commonStyles.whiteIcon} name="cancel-circled" />
@@ -220,7 +282,7 @@ export default class Publish4 extends React.Component {
                         </TouchableHighlight>
 
                       </ImageBackground>
-                    </ImageBackground>
+                    </View>
                   )
                 })}
               </View>

package/commonStyles.js

@@ -576,10 +576,6 @@ export default StyleSheet.create({
     backgroundColor: '#fff'
   },
 
-  photoBoxImage: {
-    alignSelf: 'stretch'
-  },
-
   photoBoxAddIcon: {
     alignItems: 'center',
     justifyContent: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muba-posting",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Posting",
   "main": "Posting.js",
   "scripts": {