@plusscommunities/pluss-core-app 1.0.7 → 1.1.2

package/src/apis/userActions.js

@@ -0,0 +1,98 @@
+// import axios from 'axios';
+// import Constants from 'expo-constants';
+import { getUrl } from '../helper';
+import { authedFunction } from '../session';
+
+export default {
+  // registerUserToken: token => {
+  //   return authedFunction({
+  //     method: 'POST',
+  //     url: getUrl('notifications', 'registerNotificationToken'),
+  //     data: { token, deviceId: Constants.installationId },
+  //   });
+  // },
+  // unregisterUserToken: () => {
+  //   return authedFunction({
+  //     method: 'POST',
+  //     url: getUrl('notifications', 'unregisterNotificationToken'),
+  //     data: { deviceId: Constants.installationId },
+  //   });
+  // },
+  // updateProfile: input => {
+  //   return authedFunction({
+  //     method: 'POST',
+  //     url: getUrl('users', 'updateProfile'),
+  //     data: {
+  //       details: input,
+  //     },
+  //   });
+  // },
+  getLinkedUsers: userID => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('linkedusers', 'getLinkedTo', { userID }),
+    });
+  },
+  getLinkedToMe: userID => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('linkedusers', 'getLinkedToMe', { userID }),
+    });
+  },
+  // getInviteCode: site => {
+  //   return authedFunction({
+  //     method: 'GET',
+  //     url: getUrl('users', 'invite/get', { site }),
+  //   });
+  // },
+  // generateInviteCode: site => {
+  //   return authedFunction({
+  //     method: 'POST',
+  //     url: getUrl('users', 'invite/generate'),
+  //     data: {
+  //       site,
+  //     },
+  //   });
+  // },
+  // validateInviteCode: code => {
+  //   return axios({
+  //     method: 'POST',
+  //     url: getUrl('users', 'invite/validate'),
+  //     data: {
+  //       code,
+  //     },
+  //   }).catch(error => {
+  //     console.log('validateInviteCode error', error);
+  //     throw error;
+  //   });
+  // },
+  // signUpViaInviteCode: (user, code, info) => {
+  //   return axios({
+  //     method: 'POST',
+  //     url: getUrl('users', 'invite/signup'),
+  //     data: {
+  //       user,
+  //       code,
+  //       info,
+  //     },
+  //   }).catch(error => {
+  //     console.log('signUpViaInviteCode error', error);
+  //     throw error;
+  //   });
+  // },
+  getSiteUsers: site => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('users', 'getsite', { site }),
+    });
+  },
+  // getUsers: site => {
+  //   return authedFunction({
+  //     method: 'POST',
+  //     url: getUrl('users', 'get'),
+  //     data: {
+  //       site,
+  //     },
+  //   });
+  // },
+};

package/src/colours.js

@@ -7,7 +7,7 @@ const TEXT_BLUEGREY = '#6c7a90';
 // const TEXT_DARK_ALPHA50 = 'rgba(60, 60, 80, .5)';
 // const TEXT_DARK_ALPHA20 = 'rgba(60, 60, 80, .2)';
 // const TEXT_DARK_ALPHA10 = 'rgba(60, 60, 80, .1)';
-// const TEXT_MID = '#5a5a6e';
+const TEXT_MID = '#5a5a6e';
 // const TEXT_MID_ALPHA50 = 'rgba(90, 90, 110, .5)';
 const TEXT_LIGHT = '#717b81';
 const TEXT_LIGHTER = 'rgba(113, 123, 129, 0.8)';
@@ -18,7 +18,7 @@ const BOXGREY = '#ebeff2';
 const PINKISH_GREY = '#c4c4c4';
 // const PALE_GREY = '#f6f7f9';
 const INACTIVE_BUTTON = '#d5d9e1';
-// const INACTIVE_TEXT = 'rgba(113, 123, 130, 0.8)';
+const INACTIVE_TEXT = 'rgba(113, 123, 130, 0.8)';
 const COLOUR_TEAL = '#82d6e5';
 // const COLOUR_TEAL_ALPHA50 = 'rgba(4, 196, 169, 0.2)';
 // const COLOUR_BLUE = '#0083ee';
@@ -44,7 +44,7 @@ const COLOUR_BRANDING_LIGHT = '#FCE1E1';
 const COLOUR_BRANDING_DARK = '#D13636';
 // const COLOUR_DAY = '#89c4f4';
 // const COLOUR_NIGHT = '#003159';
-// const COLOUR_TAN = '#fff3d1';
+const COLOUR_TAN = '#fff3d1';
 
 // const hexToRGB = hex => {
 //   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
@@ -135,7 +135,7 @@ export {
   // TEXT_DARK_ALPHA50,
   // TEXT_DARK_ALPHA20,
   // TEXT_DARK_ALPHA10,
-  // TEXT_MID,
+  TEXT_MID,
   // TEXT_MID_ALPHA50,
   TEXT_LIGHT,
   TEXT_LIGHTER,
@@ -146,7 +146,7 @@ export {
   BOXGREY,
   // PALE_GREY,
   INACTIVE_BUTTON,
-  // INACTIVE_TEXT,
+  INACTIVE_TEXT,
   COLOUR_TEAL,
   // COLOUR_TEAL_ALPHA50,
   // COLOUR_BLUE,
@@ -174,7 +174,7 @@ export {
   COLOUR_GRAPEFRUIT,
   // COLOUR_DAY,
   // COLOUR_NIGHT,
-  // COLOUR_TAN,
+  COLOUR_TAN,
   // getHeaderBrandingColourFromState,
   getMainBrandingColourFromState,
   getDarkBrandingColourFromState,

package/src/components/BackButton.js

@@ -0,0 +1,57 @@
+import React, { PureComponent } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { connect } from 'react-redux';
+import stylez from '../styles';
+import { Pl60Icon } from '../fonts';
+import { getMainBrandingColourFromState } from '../colours';
+
+/* 
+Props- 
+    onPress - onPress action
+    diameter - size of button
+    color - default will be aveoMain
+    style - custom style for container
+*/
+
+class BackButton extends PureComponent {
+  render() {
+    const size = this.props.diameter || 32;
+    const radius = size / 2;
+    if (this.props.noClick) {
+      return (
+        <View
+          style={[
+            stylez.backButton,
+            { backgroundColor: this.props.colourBrandingMain, height: size, width: size, borderRadius: radius },
+            this.props.color && { backgroundColor: this.props.color },
+            this.props.style,
+          ]}
+        >
+          <Pl60Icon name={this.props.flipped ? 'chevron_right' : 'chevron_left'} style={[stylez.backButtonIcon, this.props.iconStyle]} />
+        </View>
+      );
+    }
+    return (
+      <TouchableOpacity
+        style={[
+          stylez.backButton,
+          { backgroundColor: this.props.colourBrandingMain, height: size, width: size, borderRadius: radius },
+          this.props.color && { backgroundColor: this.props.color },
+          this.props.style,
+        ]}
+        onPress={this.props.onPress}
+      >
+        <Pl60Icon name={this.props.flipped ? 'chevron_right' : 'chevron_left'} style={[stylez.backButtonIcon, this.props.iconStyle]} />
+      </TouchableOpacity>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+const backButton = connect(mapStateToProps, {})(BackButton);
+export { backButton as BackButton };

package/src/components/CategoryTabs.js

@@ -0,0 +1,182 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { Text, TouchableOpacity, View, ScrollView } from 'react-native';
+import { connect } from 'react-redux';
+import { TEXT_LIGHT, COLOUR_GREEN, getMainBrandingColourFromState } from '../colours';
+import { getSiteSettingFromState } from '../helper';
+// import { HAS_GRADIENT_HEADER } from '../../config';
+import Config from '../config';
+
+class CategoryTabs extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      categoryKeys: [],
+      selectedCategory: this.props.initialCategory,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.setState({
+      selectedCategory:
+        !_.isUndefined(this.props.currentTab) && !_.isEmpty(this.props.currentTab) ? this.props.currentTab : this.props.initialCategory,
+      categoryKeys: this.props.categoryKeys,
+    });
+  }
+
+  componentDidMount() {
+    this.setState({
+      selectedCategory:
+        !_.isUndefined(this.props.currentTab) && !_.isEmpty(this.props.currentTab) ? this.props.currentTab : this.props.initialCategory,
+    });
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!_.isUndefined(nextProps.currentTab) && !_.isEmpty(nextProps.currentTab)) {
+      this.setState({ selectedCategory: nextProps.currentTab });
+    }
+  }
+
+  selectCategory(key) {
+    this.setState({
+      selectedCategory: key,
+    });
+    this.props.onSelect(key);
+  }
+
+  renderCounter(key) {
+    if (
+      this.props.categoryCounter &&
+      this.props.categoryCounter[key] &&
+      this.props.categoryCounter[key] === true &&
+      this.props.counterValues &&
+      this.props.counterValues[key] > 0
+    ) {
+      return (
+        <View style={styles.counter}>
+          <Text style={styles.counterText}>{this.props.counterValues[key]}</Text>
+        </View>
+      );
+    }
+    return null;
+  }
+
+  renderCategories(noScrollStyle) {
+    const getTextColour = key => {
+      if (this.state.selectedCategory === key) {
+        return this.props.headerType !== 'white' ? '#fff' : this.props.colourBrandingMain;
+      }
+      return this.props.headerType !== 'white' ? '#fff' : TEXT_LIGHT;
+    };
+    const getBottomBorderColour = key => {
+      if (this.state.selectedCategory === key) {
+        return this.props.headerType !== 'white' ? '#fff' : this.props.colourBrandingMain;
+      }
+      return this.props.headerType !== 'white' ? this.props.colourBrandingMain : '#fff';
+    };
+    return this.state.categoryKeys.map((key, index) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          // style={[{ minHeight: this.props.height || 30, justifyContent: 'center' }, noScrollStyle && { flex: 1 }]}
+          style={[{ flex: 1, minHeight: this.props.height || 30, justifyContent: 'center' }, this.props.catWrapperStyle]}
+          onPress={this.selectCategory.bind(this, key)}
+        >
+          <View
+            style={[
+              {
+                borderBottomColor: getBottomBorderColour(key),
+                borderBottomWidth: noScrollStyle ? 0 : 2,
+                marginRight: noScrollStyle ? 0 : 16,
+                marginLeft: index === 0 && !noScrollStyle ? 16 : 0,
+                justifyContent: 'center',
+                alignContent: 'center',
+                minHeight: 30,
+                flexDirection: 'row',
+                backgroundColor: this.props.headerType !== 'white' ? this.props.colourBrandingMain : undefined,
+              },
+              this.props.style,
+            ]}
+          >
+            <View
+              style={[
+                noScrollStyle && styles.innerContainer,
+                {
+                  flex: 1,
+                  borderColor: getBottomBorderColour(key),
+                  justifyContent: 'center',
+                },
+                this.props.catStyle,
+              ]}
+            >
+              <Text
+                style={[
+                  {
+                    fontFamily: 'sf-semibold',
+                    fontSize: 15,
+                    color: getTextColour(key),
+                    textAlign: 'center',
+                    paddingVertical: 8,
+                    width: 'auto',
+                  },
+                  this.props.textStyle,
+                  this.props.colourBrandingHeader &&
+                    this.state.selectedCategory !== key && { color: this.props.colourBrandingMain, opacity: 0.5 },
+                ]}
+              >
+                {key}
+              </Text>
+              {this.renderCounter(key)}
+            </View>
+          </View>
+        </TouchableOpacity>
+      );
+    });
+  }
+
+  render() {
+    if (this.props.noScroll) {
+      // return (<View style={{ flexDirection: 'row', paddingLeft: 16, paddingRight: 16 }}>
+      return <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>{this.renderCategories(true)}</View>;
+    }
+    return <ScrollView horizontal>{this.renderCategories(false)}</ScrollView>;
+  }
+}
+
+const styles = {
+  counter: {
+    backgroundColor: COLOUR_GREEN,
+    height: 16,
+    minWidth: 16,
+    borderRadius: 8,
+    marginLeft: 4,
+    marginTop: 4,
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
+  counterText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontSize: 12,
+    fontFamily: 'sf-semibold',
+  },
+  innerContainer: {
+    borderBottomWidth: 2,
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    headerType: getSiteSettingFromState(
+      state,
+      'HeaderType',
+      getSiteSettingFromState(state, 'UseGradientHeader', Config.env.hasGradientHeader) ? 'gradient' : 'white',
+    ),
+  };
+};
+
+const categoryTabs = connect(mapStateToProps, {})(CategoryTabs);
+export { categoryTabs as CategoryTabs };

package/src/components/DropDownItem.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { Text, TouchableOpacity } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { connect } from 'react-redux';
+import { TEXT_DARK, getMainBrandingColourFromState } from '../colours';
+
+class DropDownItem extends Component {
+  state = {};
+
+  renderIcon() {
+    if (!_.isUndefined(this.props.icon)) {
+      return (
+        <Icon
+          name={this.props.icon}
+          type="font-awesome"
+          style={styles.dropDownItem_Icon}
+          iconStyle={[styles.dropDownItem_IconStyle, { fontSize: 16, color: this.props.colourBrandingMain }]}
+        />
+      );
+    }
+    return null;
+  }
+
+  render() {
+    return (
+      <TouchableOpacity
+        style={[styles.container, this.props.last && { marginBottom: 0 }, this.props.style]}
+        onPress={this.props.onPress}
+        activeOpacity={0.6}
+      >
+        {this.renderIcon()}
+        <Text style={[styles.text, this.props.textStyle]}>{this.props.text}</Text>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flexDirection: 'row',
+    marginBottom: 12,
+    minHeight: 18,
+    width: '100%',
+    position: 'relative',
+  },
+  text: {
+    fontFamily: 'sf-medium',
+    fontSize: 16,
+    lineHeight: 18,
+    color: TEXT_DARK,
+    backgroundColor: 'transparent',
+  },
+  dropDownItem_Icon: {
+    marginRight: 8,
+    width: 18,
+    alignSelf: 'center',
+  },
+  dropDownItem_IconStyle: {
+    fontSize: 16,
+    lineHeight: 18,
+    textAlign: 'center',
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+const dropDownItem = connect(mapStateToProps, {})(DropDownItem);
+export { dropDownItem as DropDownItem };

package/src/components/DropDownMenu.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+
+class DropDownMenu extends Component {
+  state = {};
+
+  render() {
+    if (!this.props.visible) {
+      return null;
+    }
+    return <View style={[styles.container, this.props.style]}>{this.props.children}</View>;
+  }
+}
+
+const styles = {
+  container: {
+    borderRadius: 2,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+    zIndex: 10,
+    backgroundColor: '#fff',
+    padding: 16,
+    paddingVertical: 14,
+
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+};
+
+export { DropDownMenu };

package/src/components/FontScaleButton.js

@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+import { TEXT_DARK } from '../colours';
+
+/* 
+Props- 
+    style - custom style for container
+*/
+
+class FontScaleButton extends PureComponent {
+  render() {
+    return (
+      <TouchableOpacity style={[styles.container, this.props.style]} onPress={this.props.onPress}>
+        <Text style={styles.text}>
+          <Text>A</Text>
+          <Text>{` `}</Text>
+          <Text style={styles.largeText}>A</Text>
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    padding: 15,
+  },
+  text: {
+    fontFamily: 'sf-medium',
+    color: TEXT_DARK,
+    fontSize: 14,
+  },
+  largeText: {
+    fontSize: 24,
+  },
+};
+
+export { FontScaleButton };

package/src/components/FontScalePopup.js

@@ -0,0 +1,73 @@
+import React, { PureComponent } from 'react';
+import { TouchableOpacity, Text, View } from 'react-native';
+import { TEXT_DARK, LINEGREY } from '../colours';
+
+/* 
+Props- 
+    style - custom style for container
+    buttonLeftStyle - custom style for left button
+    buttonRightStyle - custom style for right button
+    onPressSmall - callback function 
+    onPressLarge - custom style for right button
+*/
+
+class FontScalePopup extends PureComponent {
+  render() {
+    if (!this.props.visible) {
+      return null;
+    }
+    return (
+      <View style={[styles.container, this.props.style]}>
+        <TouchableOpacity style={[styles.button, styles.buttonLeft, this.props.buttonLeftStyle]} onPress={this.props.onPressSmall}>
+          <Text style={styles.smallText}>A</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.button, styles.buttonRight, this.props.buttonRightStyle]} onPress={this.props.onPressLarge}>
+          <Text style={styles.largeText}>A</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flexDirection: 'row',
+    borderRadius: 2,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+    zIndex: 10,
+    backgroundColor: '#fff',
+    padding: 2,
+  },
+  button: {
+    height: 50,
+    width: 64,
+    borderColor: LINEGREY,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonLeft: {
+    borderRightWidth: 1,
+  },
+  buttonRight: {
+    borderLeftWidth: 1,
+  },
+  smallText: {
+    fontFamily: 'sf-medium',
+    color: TEXT_DARK,
+    fontSize: 16,
+  },
+  largeText: {
+    fontFamily: 'sf-medium',
+    color: TEXT_DARK,
+    fontSize: 24,
+  },
+};
+
+export { FontScalePopup };