@plusscommunities/pluss-maintenance-app 1.1.15 → 1.2.0

package/dist/module/screens/ServiceRequest.js

@@ -0,0 +1,803 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { Component } from 'react';
+import { Dimensions, Platform, KeyboardAvoidingView, ScrollView, Text, TouchableOpacity, View, Switch, FlatList, ImageBackground, Keyboard } from 'react-native';
+import _ from 'lodash';
+import { Icon } from 'react-native-elements';
+import { connect } from 'react-redux';
+import { jobAdded } from '../actions';
+import { generalActions } from '../apis';
+import { Services } from '../feature.config';
+import { Components, Colours, Helper, Config } from '../core.config';
+const PHOTO_SIZE = (Dimensions.get('window').width - 64) / 3;
+
+class MaintenanceRequest extends Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "onUploadStarted", (uploadUri, imageUri) => {
+      const images = [...this.state.images];
+      images.splice(images.length - 1, 0, {
+        uploading: true,
+        uploadProgress: '0%',
+        uploadUri,
+        imageUri,
+        allowRetry: true
+      });
+      this.setState({
+        images
+      });
+    });
+
+    _defineProperty(this, "onUploadProgress", progress => {
+      const images = [...this.state.images];
+      images.map(img => {
+        if (img.uploadUri === progress.uri) {
+          img.uploadProgress = progress.percentage;
+          img.uploading = true;
+          img.allowRetry = true;
+        }
+      });
+      this.setState({
+        images
+      });
+    });
+
+    _defineProperty(this, "onUploadSuccess", async (uri, uploadUri) => {
+      const images = [...this.state.images];
+      images.map(img => {
+        if (img.uploadUri === uploadUri && img.uploading) {
+          img.url = uri.replace('/general/', '/general1400/');
+          img.thumbNailExists = false;
+          img.thumbNailUrl = Helper.getThumb300(img.url);
+          img.allowRetry = true;
+        }
+      });
+      this.setState({
+        images
+      }, () => this.waitForThumbnails());
+    });
+
+    _defineProperty(this, "onUploadFailed", uploadUri => {
+      const images = [...this.state.images];
+      images.map(img => {
+        if (img.uploadUri === uploadUri) {
+          img.uploading = true; // Requried for retry
+
+          img.uploadProgress = '';
+          img.allowRetry = true;
+        }
+      });
+      this.setState({
+        images
+      });
+    });
+
+    _defineProperty(this, "onLibrarySelected", uri => {
+      const images = [...this.state.images];
+      images.splice(images.length - 1, 0, {
+        uploading: false,
+        allowRetry: false,
+        url: Helper.get1400(uri),
+        thumbNailExists: true,
+        thumbNailUrl: Helper.getThumb300(uri)
+      });
+      this.setState({
+        images
+      });
+    });
+
+    _defineProperty(this, "showUploadMenu", () => {
+      Keyboard.dismiss();
+
+      if (this.state.uploadingImage || this.state.submitting) {
+        return;
+      }
+
+      this.imageUploader.showUploadMenu();
+    });
+
+    _defineProperty(this, "submit", async () => {
+      this.setState({
+        submitting: true
+      });
+      let description = this.state.description;
+
+      if (this.state.isHome) {
+        description = description + `. --  Times Available: ${this.state.times}`;
+      }
+
+      setTimeout(() => {
+        this.scrollContainer.scrollTo({
+          y: 0
+        });
+      }, 100);
+
+      const images = _.filter(this.state.images, img => {
+        return !img.uploading && !img.add;
+      }).map(img => {
+        return img.url;
+      });
+
+      generalActions.sendMaintenanceRequest(this.props.uid, this.state.userName, this.state.phone, this.state.roomNumber, this.state.title, description, null, this.state.type, images, Helper.getSite(this.props.site), this.state.isHome, this.state.times).then(res => {
+        if (res.data.success) {
+          this.refreshRequest(res.data.searchResult);
+          if (this.props.onSubmissionSuccess) this.props.onSubmissionSuccess(res.data);
+          this.setState({
+            submitting: false,
+            success: true,
+            confirmationToShow: true
+          });
+        } else {
+          this.setState({
+            submitting: false
+          });
+        }
+      }).catch(err => {
+        console.log('maintenance submission fail.');
+        console.log(err);
+        this.setState({
+          submitting: false
+        });
+      });
+    });
+
+    _defineProperty(this, "refreshRequest", async id => {
+      try {
+        const job = await generalActions.getJob(Helper.getSite(this.props.site), id); // console.log('refreshRequest', job?.data);
+
+        this.props.jobAdded(job.data);
+      } catch (error) {
+        console.log('refreshRequest error', error);
+      }
+    });
+
+    _defineProperty(this, "waitForThumbnails", () => {
+      if (this.checkThumb) return;
+      this.checkThumb = setInterval(async () => {
+        const images = [];
+        await Promise.all(this.state.images.map(image => {
+          return new Promise(async resolve => {
+            const newImage = { ...image
+            };
+            images.push(newImage);
+
+            if (newImage.url && !newImage.thumbNailExists) {
+              newImage.uploading = false;
+              newImage.allowRetry = false;
+              newImage.thumbNailExists = await Helper.imageExists(newImage.thumbNailUrl);
+              resolve(newImage.thumbNailExists);
+            }
+
+            resolve(true);
+          });
+        }));
+        const thumbnailsExist = images.every(image => !image.url || image.thumbNailExists);
+
+        if (thumbnailsExist) {
+          clearInterval(this.checkThumb);
+          this.checkThumb = null;
+          this.setState({
+            images
+          });
+        }
+      }, 2000);
+    });
+
+    _defineProperty(this, "removeImage", index => {
+      const images = [...this.state.images];
+      images.splice(index, 1);
+      this.setState({
+        images
+      });
+    });
+
+    _defineProperty(this, "toggleFullscreenVideo", url => {
+      if (typeof url !== 'string') url = '';
+      this.setState({
+        showFullscreenVideo: url.length > 0,
+        currentVideoUrl: url
+      });
+    });
+
+    this.state = {
+      submitting: false,
+      success: false,
+      fail: false,
+      error: null,
+      showError: false,
+      userName: '',
+      roomNumber: '',
+      phone: '',
+      title: '',
+      description: '',
+      times: '',
+      type: 'General',
+      uploadingImage: false,
+      images: [{
+        add: true
+      }],
+      showFullscreenVideo: false,
+      currentVideoUrl: '',
+      isHome: false,
+      types: [],
+      confirmationToShow: false
+    };
+    this.checkThumb = null;
+  }
+
+  componentDidMount() {
+    if (this.props.userType !== 'KIOSK') {
+      this.setState({
+        userName: this.props.displayName,
+        roomNumber: this.props.unit,
+        phone: !_.isEmpty(this.props.phoneNumber) ? this.props.phoneNumber : ''
+      });
+    }
+
+    this.getJobTypes();
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.checkThumb);
+  }
+
+  onPressBack() {
+    Services.navigation.goBack();
+  }
+
+  onPressType() {
+    Services.navigation.navigate('jobTypePicker', {
+      currentType: this.state.type,
+      types: this.state.types,
+      onSelectType: this.pickType.bind(this)
+    });
+  }
+
+  onCloseConfirmationPopup() {
+    this.setState({
+      confirmationToShow: false
+    });
+    Services.navigation.goBack();
+    this.props.onBack && this.props.onBack();
+  }
+
+  onConfirmationReset() {
+    this.setState({
+      confirmationToShow: false,
+      title: '',
+      description: '',
+      times: '',
+      isHome: false,
+      uploadingImage: false,
+      images: [{
+        add: true
+      }],
+      submitting: false,
+      success: false,
+      fail: false
+    });
+  }
+
+  getJobTypes() {
+    const self = this;
+    generalActions.getJobTypes(Helper.getSite(this.props.site)).then(res => {
+      self.setState({
+        types: res.data
+      });
+      self.getDefaultJob();
+    }).catch(() => {});
+  }
+
+  getDefaultJob() {
+    if (this.state.types.length !== 0 && this.state.jobId == null) {
+      this.setState({
+        type: this.state.types[0].typeName
+      });
+    }
+  }
+
+  pickType(type) {
+    this.setState({
+      type
+    });
+  }
+
+  submitRequest() {
+    if (this.state.submitting || !this.props.connected) {
+      if (!this.props.connected) {
+        this.setState({
+          error: {
+            message: 'No internet connection detected'
+          }
+        });
+      }
+
+      return;
+    }
+
+    if (this.state.uploadingImage) {
+      return;
+    }
+
+    this.setState({
+      error: null,
+      showError: false
+    });
+
+    if (this.state.title.length === 0 || !this.state.roomNumber || this.state.roomNumber.length === 0) {
+      this.setState({
+        showError: true
+      });
+      return;
+    }
+
+    if (this.state.isHome && this.state.times.length < 2) {
+      this.setState({
+        showError: true
+      });
+      return;
+    }
+
+    this.submit();
+  }
+
+  renderUploadMenu() {
+    return /*#__PURE__*/React.createElement(Components.ImageUploader, {
+      ref: ref => this.imageUploader = ref,
+      onUploadStarted: this.onUploadStarted,
+      onUploadSuccess: this.onUploadSuccess,
+      onUploadFailed: this.onUploadFailed,
+      onUploadProgress: this.onUploadProgress,
+      onLibrarySelected: this.onLibrarySelected,
+      size: {
+        width: 1400
+      },
+      quality: 0.8,
+      fileName: 'serviceImage',
+      popupTitle: 'Upload Image',
+      userId: this.props.uid,
+      allowsEditing: false,
+      multiple: true,
+      hideLibrary: true
+    });
+  }
+
+  renderImage(item, index) {
+    const isVideoUrl = Helper.isVideo(item.url);
+
+    if (item.add) {
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        activeOpacity: 0.8,
+        onPress: this.showUploadMenu
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.imageContainer, this.state.images.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
+          marginLeft: 0
+        }, index > 2 && {
+          marginTop: 8
+        }]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.imageCircle
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "camera",
+        type: "font-awesome",
+        iconStyle: styles.addImageIcon
+      }))));
+    }
+
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.imageContainer, this.state.images.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
+        marginLeft: 0
+      }, index > 2 && {
+        marginTop: 8
+      }]
+    }, item.uploading ? /*#__PURE__*/React.createElement(Components.ImageUploadProgress, {
+      uploader: this.imageUploader,
+      image: item,
+      color: this.props.colourBrandingMain
+    }) : /*#__PURE__*/React.createElement(ImageBackground, {
+      style: styles.imageBackground,
+      source: Helper.getImageSource(item.thumbNailExists ? item.thumbNailUrl : item.url)
+    }, isVideoUrl && /*#__PURE__*/React.createElement(View, {
+      style: styles.imagePlayContainer
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.toggleFullscreenVideo.bind(this, item.url)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "play",
+      type: "font-awesome",
+      iconStyle: styles.imageControlIcon
+    }))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.removeImage,
+      onPress: this.removeImage.bind(this, index)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "remove",
+      type: "font-awesome",
+      iconStyle: styles.imageControlIcon,
+      style: styles.removeImage
+    }))));
+  }
+
+  renderSuccess() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        padding: 16,
+        flex: 1,
+        backgroundColor: '#fff'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.requestSuccess
+    }, "Your request has been submitted. Thank you."));
+  }
+
+  renderImageList() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.imageSection
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.imageListContainer, this.state.images.length < 2 && styles.imageListContainerEmpty]
+    }, /*#__PURE__*/React.createElement(FlatList, {
+      keyboardShouldPersistTaps: "always",
+      enableEmptySections: true,
+      data: this.state.images,
+      renderItem: _ref => {
+        let {
+          item,
+          index
+        } = _ref;
+        return this.renderImage(item, index);
+      },
+      keyExtractor: (item, index) => index,
+      numColumns: 3
+    })));
+  }
+
+  renderForm() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(ScrollView, {
+      keyboardShouldPersistTaps: "always",
+      style: {
+        flex: 1
+      },
+      ref: ref => this.scrollContainer = ref
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        paddingBottom: 2
+      }
+    }, /*#__PURE__*/React.createElement(Components.LoadingIndicator, {
+      visible: this.state.submitting
+    }), this.state.error && /*#__PURE__*/React.createElement(Text, {
+      style: styles.errorText
+    }, this.state.error), /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16
+      }
+    }, /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Name',
+      placeholder: 'Enter your name',
+      textValue: this.state.userName,
+      onChangeText: userName => this.setState({
+        userName
+      }),
+      editable: this.props.userType === 'KIOSK' && this.state.submitting === false,
+      isValid: () => {
+        return this.state.userName.length > 1;
+      },
+      required: true,
+      errorText: "Please enter your name.",
+      showError: this.state.showError && this.state.userName.length < 2,
+      hasUnderline: true
+    }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Contact number',
+      placeholder: 'Enter phone number',
+      textValue: this.state.phone,
+      onChangeText: phone => this.setState({
+        phone
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      keyboardType: 'phone-pad'
+    }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Address',
+      placeholder: 'Enter your address',
+      textValue: this.state.roomNumber,
+      onChangeText: roomNumber => this.setState({
+        roomNumber
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      isValid: () => {
+        return this.state.roomNumber && this.state.roomNumber.length > 1;
+      },
+      required: true,
+      errorText: "Please provide your address.",
+      showError: this.state.showError && this.state.roomNumber && this.state.roomNumber.length < 2
+    })), /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16,
+        paddingHorizontal: 24,
+        paddingVertical: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.sectionTitle
+    }, Config.env.strings.JOB_TYPE), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.onPressType.bind(this)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.sectionTitle, {
+        color: this.props.colourBrandingMain,
+        marginRight: 16
+      }]
+    }, this.state.type), /*#__PURE__*/React.createElement(Icon, {
+      name: "angle-right",
+      type: "font-awesome",
+      iconStyle: [styles.sectionTitle, {
+        fontSize: 20,
+        color: this.props.colourBrandingMain
+      }]
+    })))), /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16
+      }
+    }, /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Title',
+      placeholder: 'Enter a title for your request',
+      textValue: this.state.title,
+      onChangeText: title => this.setState({
+        title
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      isValid: () => {
+        return this.state.title.length > 1;
+      },
+      required: true,
+      errorText: "Please provide a title.",
+      showError: this.state.showError && this.state.title.length < 2,
+      autoCorrect: true,
+      multiline: true,
+      autoGrow: true
+    }), /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Description',
+      placeholder: 'Describe your request here in detail',
+      textValue: this.state.description,
+      onChangeText: description => this.setState({
+        description
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      autoCorrect: true,
+      multiline: true,
+      autoGrow: true
+    })), /*#__PURE__*/React.createElement(Components.FormCard, {
+      style: {
+        marginTop: 16,
+        paddingHorizontal: 24
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: '100%',
+        paddingVertical: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        position: 'relative'
+      }, this.state.isHome && {
+        borderBottomWidth: 1,
+        borderBottomColor: Colours.LINEGREY
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.sectionTitle
+    }, Config.env.strings.MAINTENANCE_HOME), /*#__PURE__*/React.createElement(Switch, {
+      value: this.state.isHome,
+      disabled: this.state.submitting,
+      onValueChange: value => this.setState({
+        isHome: value
+      }),
+      trackColor: {
+        false: '#ddd',
+        true: this.props.colourBrandingMain
+      },
+      thumbColor: Platform.OS === 'android' ? '#fff' : null
+    })), this.state.isHome && /*#__PURE__*/React.createElement(Components.FormCardSection, {
+      label: 'Available times',
+      placeholder: 'Describe your available times here in detail.',
+      textValue: this.state.times,
+      onChangeText: times => this.setState({
+        times
+      }),
+      editable: this.state.submitting === false,
+      hasUnderline: true,
+      isValid: () => {
+        return this.state.times.length > 1;
+      },
+      required: true,
+      errorText: "Please provide available times.",
+      showError: this.state.showError && this.state.isHome && this.state.times.length < 2,
+      minHeight: 40,
+      autoCorrect: true,
+      multiline: true,
+      autoGrow: true
+    })), this.renderImageList())));
+  }
+
+  renderRegisterConfirmation() {
+    return /*#__PURE__*/React.createElement(Components.ConfirmationPopup, {
+      confirmText: 'Request submitted',
+      repeatText: 'Submit another',
+      visible: this.state.confirmationToShow,
+      onClose: this.onCloseConfirmationPopup.bind(this),
+      onPressAction: this.onConfirmationReset.bind(this)
+    });
+  }
+
+  renderVideoPlayerPopup() {
+    const {
+      showFullscreenVideo,
+      currentVideoUrl
+    } = this.state;
+    if (!currentVideoUrl) return;
+    return /*#__PURE__*/React.createElement(Components.VideoPopup, {
+      uri: currentVideoUrl,
+      visible: showFullscreenVideo,
+      showFullscreenButton: false,
+      onClose: this.toggleFullscreenVideo
+    });
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+      behavior: Platform.OS === 'ios' && 'padding',
+      style: styles.viewContainer
+    }, this.renderUploadMenu(), /*#__PURE__*/React.createElement(View, {
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(Components.Header, {
+      leftIcon: "angle-left",
+      onPressLeft: this.onPressBack.bind(this),
+      text: Config.env.strings.MAINTENANCE,
+      rightText: this.state.submitting || this.state.success ? null : 'Done',
+      onPressRight: this.submitRequest.bind(this),
+      absoluteRight: true
+    }), this.renderForm()), this.renderRegisterConfirmation(), this.renderVideoPlayerPopup());
+  }
+
+}
+
+const styles = {
+  viewContainer: {
+    flex: 1,
+    backgroundColor: '#fff'
+  },
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: '#f0f0f5'
+  },
+  errorText: {
+    fontFamily: 'sf-regular',
+    color: Colours.COLOUR_TANGERINE,
+    fontSize: 16
+  },
+  requestSuccess: {
+    fontFamily: 'sf-regular',
+    color: Colours.TEXT_DARK,
+    fontSize: 17,
+    textAlign: 'center'
+  },
+  sectionTitle: {
+    fontFamily: 'sf-regular',
+    fontSize: 17,
+    color: Colours.TEXT_DARK
+  },
+  imageListContainer: {
+    marginTop: 8,
+    padding: 8,
+    flexDirection: 'row',
+    backgroundColor: Colours.BOXGREY,
+    minHeight: 106
+  },
+  imageListContainerEmpty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  imageContainer: {
+    width: PHOTO_SIZE,
+    height: PHOTO_SIZE,
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colours.LINEGREY,
+    borderRadius: 4,
+    marginLeft: 8
+  },
+  imageContainerNotEmpty: {
+    borderWidth: 1,
+    borderColor: Colours.LINEGREY,
+    backgroundColor: '#fff',
+    borderStyle: 'dashed'
+  },
+  imageBackground: {
+    flex: 1,
+    height: '100%',
+    width: '100%',
+    borderRadius: 4
+  },
+  imageCircle: {
+    width: 90,
+    height: 90,
+    borderRadius: 45,
+    backgroundColor: Colours.PINKISH_GREY,
+    justifyContent: 'center'
+  },
+  addImageIcon: {
+    color: '#fff',
+    fontSize: 32
+  },
+  imagePlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  imageControlIcon: {
+    color: '#fff',
+    fontSize: 20,
+    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowOffset: {
+      width: 2,
+      height: 2
+    }
+  },
+  removeImage: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 4,
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
+
+const mapStateToProps = state => {
+  const {
+    user,
+    connection
+  } = state;
+  const {
+    displayName,
+    profilePic,
+    uid,
+    site,
+    unit,
+    phoneNumber
+  } = user;
+  return {
+    connected: connection.connected,
+    userType: user.type,
+    displayName,
+    profilePic,
+    uid,
+    site,
+    unit,
+    phoneNumber,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state)
+  };
+};
+
+export default connect(mapStateToProps, {
+  jobAdded
+})(MaintenanceRequest);
+//# sourceMappingURL=ServiceRequest.js.map