@plusscommunities/pluss-maintenance-app 6.0.0-auth.0 → 6.0.1-auth.0

package/dist/module/screens/ServiceRequest.js

@@ -1,748 +0,0 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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: ({
-        item,
-        index
-      }) => 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