@plusscommunities/pluss-core-web 1.7.3-beta.0 → 1.7.3-beta.1

package/src/components/AudienceSelector.js

@@ -0,0 +1,700 @@
+import React, { Component } from "react";
+import FontAwesome from "react-fontawesome";
+import _ from "lodash";
+import { connect } from "react-redux";
+import { setAuth } from "../actions";
+import { profileActions, typeActions, userActions } from "../apis";
+import { COLOUR_DUSK } from "../colours";
+import { AudienceIncluder } from "./AudienceIncluder";
+import { Text } from "./Text";
+import { RadioButton } from "./RadioButton";
+import { DropdownInput } from "./DropdownInput";
+import { Tag } from "./Tag";
+
+class AudienceSelector extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      categories: [
+        {
+          Title: "All Primary Users",
+          Key: "resident",
+          ShortName: "Primary",
+        },
+        {
+          Title: "All Staff Users",
+          Key: "staff",
+          ShortName: "Staff",
+        },
+        {
+          Title: "All Linked Users",
+          Key: "family",
+          ShortName: "Linked",
+        },
+      ],
+      types: [],
+      AudienceType: props.audienceType || "All",
+      showInclude: false,
+      includeList: [],
+      showExclude: false,
+      excludeList: [],
+      Type: "",
+      Category: "",
+
+      userList: [],
+      tagList: [],
+      AudienceTagList: props.audienceTypeSelection || [],
+    };
+  }
+
+  componentDidMount() {
+    const { custom, disallowSingleUsers, allowTags } = this.props;
+    this.getUserTypes();
+    if (!disallowSingleUsers) this.getUsers();
+    if (allowTags || custom) this.getUserTags();
+  }
+
+  componentDidUpdate(prevProps) {
+    const newState = {};
+    if (prevProps.audienceType !== this.props.audienceType)
+      newState.AudienceType = this.props.audienceType;
+    if (
+      !_.isEqual(
+        prevProps.audienceTypeSelection,
+        this.props.audienceTypeSelection,
+      )
+    )
+      newState.AudienceTagList = this.props.audienceTypeSelection;
+    if (!_.isEmpty(newState)) this.setState(newState);
+  }
+
+  onSubmit() {
+    if (
+      this.state.AudienceType === "User" &&
+      _.isEmpty(this.state.includeList)
+    ) {
+      this.setState({ showInclude: true });
+    }
+  }
+
+  getAudienceType() {
+    return this.state.AudienceType;
+  }
+
+  getAudienceTypeSelection() {
+    const { AudienceType, AudienceTagList, Category, Tag, Type } = this.state;
+    if (AudienceType === "Custom") return AudienceTagList || [];
+    if (AudienceType === "Category") return Category;
+    if (AudienceType === "UserTags") return Tag;
+    return Type;
+  }
+
+  getIncludeList() {
+    return this.state.includeList;
+  }
+
+  getExcludeList() {
+    return this.state.excludeList;
+  }
+
+  getUsers() {
+    userActions
+      .fetchUsers(this.props.auth.site)
+      .then((res) => {
+        this.setState({
+          userList: res.data.results.Items,
+        });
+      })
+      .catch((error) => { });
+  }
+
+  getUserTags() {
+    profileActions
+      .getUserTagsBySite(this.props.auth.site)
+      .then((res) => {
+        this.setState({
+          tagList: res.data.map((t) => {
+            return { ...t, Key: t.Id };
+          }),
+        });
+      })
+      .catch((error) => { });
+  }
+
+  setType(type, selection) {
+    const newState = { AudienceType: type };
+    if (type === "Custom") newState.AudienceTagList = selection;
+    if (type === "UserType") newState.Type = selection;
+    if (type === "Category") newState.Category = selection;
+    this.setState(newState);
+  }
+
+  onChangeSelection = () => {
+    const { updateValidation, onChange } = this.props;
+    const isValid = this.validateAudienceSelection();
+    if (updateValidation) updateValidation(isValid);
+    if (onChange)
+      onChange(
+        this.getAudienceType(),
+        this.getAudienceTypeSelection(),
+        isValid,
+      );
+  };
+
+  onChangeOption(type) {
+    this.setState({
+      AudienceType: type,
+      Type: "",
+      Category: "",
+      includeList: [],
+      excludeList: [],
+      AudienceTagList: [],
+    });
+    setTimeout(this.onChangeSelection, 50);
+  }
+
+  getOptions() {
+    const options = [
+      {
+        Label: "All users",
+        Value: "All",
+        onChange: () => this.onChangeOption("All"),
+      },
+    ];
+    if (this.props.custom) {
+      options.push({
+        Label: "Custom",
+        Value: "Custom",
+        onChange: () => this.onChangeOption("Custom"),
+      });
+    } else {
+      options.push({
+        Label: "By user category",
+        Value: "Category",
+        onChange: () => this.onChangeOption("Category"),
+      });
+    }
+    if (!this.props.disallowUserType) {
+      options.push({
+        Label: "By user type",
+        Value: "UserType",
+        onChange: () => this.onChangeOption("UserType"),
+      });
+    }
+    if (this.props.allowTags) {
+      options.push({
+        Label: "By user tag",
+        Value: "UserTags",
+        onChange: () => this.onChangeOption("UserTags"),
+      });
+    }
+    if (!this.props.disallowSingleUsers) {
+      options.push({
+        Label: "To single users",
+        Value: "User",
+        onChange: () => this.onChangeOption("User"),
+      });
+    }
+    return options;
+  }
+
+  validateAudienceSelection() {
+    const { AudienceType, includeList } = this.state;
+    if (AudienceType === "Custom" && !this.validateCustom()) return false;
+    if (AudienceType === "Category" && !this.validateCategory()) return false;
+    if (AudienceType === "UserType" && !this.validateType()) return false;
+    if (AudienceType === "User" && _.isEmpty(includeList)) return false;
+    if (AudienceType === "UserTags" && !this.validateTag()) return false;
+    return true;
+  }
+
+  selectType(key) {
+    this.setState({
+      Type: key,
+      includeList: [],
+      excludeList: [],
+    });
+    setTimeout(this.onChangeSelection, 50);
+  }
+
+  getTypeTitle() {
+    const typeObject = _.find(this.state.types, (t) => {
+      return t.typeName === this.state.Type;
+    });
+    if (typeObject) {
+      return typeObject.displayName;
+    }
+    return "";
+  }
+
+  selectTag = (key) => {
+    this.setState({
+      Tag: key,
+      includeList: [],
+      excludeList: [],
+    });
+    setTimeout(this.onChangeSelection, 50);
+  };
+
+  getTagTitle() {
+    const tag = _.find(this.state.tagList, (t) => {
+      return t.Id === this.state.Tag;
+    });
+    if (tag) {
+      return tag.Title;
+    }
+    return "";
+  }
+
+  getUserTypes() {
+    typeActions
+      .getUserTypes(this.props.auth.site)
+      .then((res) => {
+        this.props.setAuth({ userTypes: _.cloneDeep(res.data) });
+        res.data.forEach((e) => {
+          e.Title = e.displayName;
+          e.Key = e.typeName;
+
+          if (e.category) {
+            const category = _.find(this.state.categories, (c) => {
+              return c.Key === e.category;
+            });
+            const shortName = category ? `(${category.ShortName}) ` : "";
+            e.Title = `${shortName} ${e.Title}`;
+          }
+        });
+        const newState = {
+          types: res.data,
+        };
+        if (!_.some(res.data, (t) => t.category === "family")) {
+          newState.categories = _.filter(
+            this.state.categories,
+            (c) => c.Key !== "family",
+          );
+        }
+        this.setState(newState);
+      })
+      .catch((error) => { });
+  }
+
+  getUserList() {
+    if (this.state.AudienceType === "UserType" && !_.isEmpty(this.state.Type)) {
+      let users = [];
+      this.state.userList.forEach((element) => {
+        if (element.type !== this.state.Type) users.push(element);
+      });
+      return _.sortBy(users, "displayName");
+    }
+    if (
+      this.state.AudienceType === "Category" &&
+      !_.isEmpty(this.state.Category)
+    ) {
+      let users = [];
+      let types = _.filter(this.state.types, (type) => {
+        return type.category === this.state.Category;
+      }).map((type) => {
+        return type.typeName;
+      });
+      this.state.userList.forEach((element) => {
+        if (types.indexOf(element.type) === -1) {
+          users.push(element);
+        }
+      });
+      return _.sortBy(users, "displayName");
+    }
+    return _.sortBy(this.state.userList, "displayName");
+  }
+
+  selectCat(key, e) {
+    this.setState({
+      Category: key,
+      includeList: [],
+      excludeList: [],
+    });
+    setTimeout(this.onChangeSelection, 50);
+  }
+
+  getCatTitle() {
+    const typeObject = _.find(this.state.categories, (t) => {
+      return t.Key === this.state.Category;
+    });
+    if (typeObject) {
+      return typeObject.Title;
+    }
+    return "";
+  }
+
+  validateCustom = () => {
+    return !_.isEmpty(this.state.AudienceTagList);
+  };
+
+  validateCategory() {
+    return (
+      !_.isUndefined(this.state.Category) && !_.isEmpty(this.state.Category)
+    );
+  }
+
+  validateType() {
+    return !_.isUndefined(this.state.Type) && !_.isEmpty(this.state.Type);
+  }
+
+  validateTag() {
+    return !_.isEmpty(this.state.Tag);
+  }
+
+  showUserPickers(isInclude) {
+    if (isInclude && this.state.AudienceType === "User") {
+      return true;
+    }
+    if (isInclude && !this.props.allowIncludes) {
+      return false;
+    }
+    if (!isInclude && !this.props.allowExcludes) {
+      return false;
+    }
+    if (isInclude && this.state.AudienceType === "All") {
+      return false;
+    }
+    if (!isInclude && this.state.AudienceType === "User") {
+      return false;
+    }
+    if (
+      (this.state.AudienceType === "Category" &&
+        _.isEmpty(this.state.Category)) ||
+      (this.state.AudienceType === "UserType" && _.isEmpty(this.state.Type))
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  getUserExcludeList() {
+    if (this.state.AudienceType === "UserType" && !_.isEmpty(this.state.Type)) {
+      let users = [];
+      this.state.userList.forEach((element) => {
+        if (element.type === this.state.Type) users.push(element);
+      });
+      return _.sortBy(users, "displayName");
+    }
+    if (
+      this.state.AudienceType === "Category" &&
+      !_.isEmpty(this.state.Category)
+    ) {
+      let users = [];
+      let types = _.filter(this.state.types, (type) => {
+        return type.category === this.state.Category;
+      }).map((type) => {
+        return type.typeName;
+      });
+      this.state.userList.forEach((element) => {
+        if (types.indexOf(element.type) > -1) {
+          users.push(element);
+        }
+      });
+      return _.sortBy(users, "displayName");
+    }
+    return _.sortBy(this.state.userList, "displayName");
+  }
+
+  addToInc(user) {
+    let list = [...this.state.includeList];
+    list.push({
+      Id: user.Id,
+      displayName: user.displayName,
+      profilePic: user.profilePic,
+    });
+    this.setState({ includeList: list });
+    setTimeout(this.onChangeSelection, 50);
+  }
+
+  removeUserInc(user) {
+    this.setState({
+      includeList: _.filter(this.state.includeList, (ev) => {
+        return ev.Id !== user.Id;
+      }),
+    });
+    setTimeout(this.onChangeSelection, 50);
+  }
+
+  addToEx(user) {
+    let list = [...this.state.excludeList];
+    list.push({
+      Id: user.Id,
+      displayName: user.displayName,
+      profilePic: user.profilePic,
+    });
+    this.setState({ excludeList: list });
+  }
+
+  removeUserEx(user) {
+    this.setState({
+      excludeList: _.filter(this.state.excludeList, (ev) => {
+        return ev.Id !== user.Id;
+      }),
+    });
+  }
+
+  getAvailableAudienceTags = (includeSelected = false) => {
+    const { categories, types, tagList, AudienceTagList } = this.state;
+    const categoryTags = categories.map((c) => {
+      return {
+        AudienceType: "Category",
+        AudienceTypeSelection: c.Key,
+        Id: `category_${c.Key}`,
+        Title: c.Title,
+      };
+    });
+    const userTypeTags = types.map((t) => {
+      return {
+        AudienceType: "UserType",
+        AudienceTypeSelection: t.typeName,
+        Id: `userType_${t.typeName}`,
+        Title: `User Type: ${t.displayName}`,
+      };
+    });
+    const userTagTags = tagList.map((t) => {
+      return {
+        AudienceType: "UserTags",
+        AudienceTypeSelection: t.Id,
+        Id: `userTag_${t.Id}`,
+        Title: `User Tag: ${t.Title}`,
+      };
+    });
+    const result = [...categoryTags, ...userTypeTags, ...userTagTags];
+    return includeSelected
+      ? result
+      : result.filter((t) => !_.some(AudienceTagList, (at) => at.Id === t.Id));
+  };
+
+  onAttachAudienceTag = (tag) => {
+    const AudienceTagList = [...this.state.AudienceTagList, tag];
+    this.setState({ AudienceTagList }, this.onChangeSelection);
+  };
+
+  onDetachAudienceTag = (tag) => {
+    const AudienceTagList = _.filter(
+      this.state.AudienceTagList,
+      (at) => at.Id !== tag.Id,
+    );
+    this.setState({ AudienceTagList }, this.onChangeSelection);
+  };
+
+  renderExcludes() {
+    if (!this.showUserPickers(false)) {
+      return null;
+    }
+    return (
+      <div key="excludes" className="marginTop-16">
+        <div
+          className="flex flex-between pointer"
+          onClick={() => {
+            this.setState({ showExclude: !this.state.showExclude });
+          }}
+        >
+          <div className="flex">
+            <Text type="formTitleSmall" className="marginBottom-16">
+              Exclude Users From Selection{" "}
+              {`(${this.state.excludeList.length})`}
+            </Text>
+          </div>
+          <FontAwesome
+            style={{ color: COLOUR_DUSK, fontSize: 12 }}
+            name={this.state.showExclude ? "chevron-up" : "chevron-down"}
+          />
+        </div>
+        {this.state.showExclude && (
+          <AudienceIncluder
+            add={this.addToEx.bind(this)}
+            remove={this.removeUserEx.bind(this)}
+            selectionList={this.state.excludeList}
+            userList={this.getUserExcludeList()}
+          />
+        )}
+      </div>
+    );
+  }
+
+  renderIncludes() {
+    if (!this.showUserPickers(true)) {
+      return null;
+    }
+    return (
+      <div key="includes" className="marginTop-16">
+        <div
+          className="flex flex-between pointer"
+          onClick={() => {
+            this.setState({ showInclude: !this.state.showInclude });
+          }}
+        >
+          <div className="flex">
+            <Text type="formTitleSmall" className="marginBottom-16">
+              {this.state.AudienceType !== "User" ? "Add Other" : "Select"}{" "}
+              Users {`(${this.state.includeList.length})`}
+            </Text>
+          </div>
+          <FontAwesome
+            style={{ color: COLOUR_DUSK, fontSize: 12 }}
+            name={this.state.showInclude ? "chevron-up" : "chevron-down"}
+          />
+        </div>
+        {this.state.showInclude && (
+          <AudienceIncluder
+            add={this.addToInc.bind(this)}
+            remove={this.removeUserInc.bind(this)}
+            selectionList={this.state.includeList}
+            userList={this.getUserList()}
+          />
+        )}
+      </div>
+    );
+  }
+
+  renderAssignedAudiences() {
+    const { AudienceTagList } = this.state;
+    const { maxWidth } = this.props;
+
+    return (
+      <div className="selectedAudienceTags" style={{ maxWidth }}>
+        {_.isEmpty(AudienceTagList) && (
+          <Text type="body" className="text-italic">
+            No audiences selected
+          </Text>
+        )}
+        {AudienceTagList.map((t) => {
+          return (
+            <Tag
+              key={t.Id}
+              className="marginLeft-16 marginBottom-8"
+              text={t.Title}
+              rightIcon="remove"
+              rightClick={() => this.onDetachAudienceTag(t)}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  renderAvailableAudiences() {
+    const { maxWidth } = this.props;
+    const tags = this.getAvailableAudienceTags();
+
+    return (
+      <div className="availableAudienceTags" style={{ maxWidth }}>
+        {tags.map((t) => {
+          return (
+            <Tag
+              key={t.Id}
+              className="marginLeft-16 marginBottom-8"
+              text={t.Title}
+              onClick={() => this.onAttachAudienceTag(t)}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  renderCustom() {
+    if (this.state.AudienceType !== "Custom") return null;
+
+    return (
+      <div className="optionsContent_bottom">
+        <Text type="formLabel">Selected Audience</Text>
+        {this.renderAssignedAudiences()}
+        <Text type="formLabel" className="marginTop-32">
+          Select Audience
+        </Text>
+        {this.renderAvailableAudiences()}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {/* <div className={this.props.className || 'padding-32 paddingVertical-40 bottomDivideBorder'}> */}
+        <Text type="formTitleSmall" className="marginBottom-16">
+          {this.props.title || "Target Audience"}
+        </Text>
+        <RadioButton
+          isActive={this.state.AudienceType}
+          rowStyle={{ flexDirection: "column" }}
+          buttonStyle={{ marginBottom: 8 }}
+          options={this.getOptions()}
+          disabled={this.props.disabled}
+        />
+        {this.state.AudienceType === "Category" && (
+          <DropdownInput
+            id="typeSelect"
+            // label='User Category'
+            alwaysShowLabel
+            placeholder="User Category"
+            value={this.getCatTitle()}
+            isValid={() => {
+              return this.validateCategory();
+            }}
+            showError={() => {
+              return this.state.showWarnings && !this.validateCategory();
+            }}
+            options={this.state.categories}
+            onSelect={this.selectCat.bind(this)}
+            style={{ width: 325, marginTop: 16 }}
+            isRequired
+            disabled={this.props.disabled}
+          />
+        )}
+        {this.state.AudienceType === "UserType" && (
+          <DropdownInput
+            id="typeSelect"
+            // label='User Type'
+            alwaysShowLabel
+            placeholder="User Type"
+            value={this.getTypeTitle()}
+            isValid={() => {
+              return this.validateType();
+            }}
+            showError={() => {
+              return this.state.showWarnings && !this.validateType();
+            }}
+            options={this.state.types}
+            onSelect={this.selectType.bind(this)}
+            style={{ width: 325, marginTop: 16 }}
+            isRequired
+            disabled={this.props.disabled}
+          />
+        )}
+        {this.state.AudienceType === "UserTags" && (
+          <DropdownInput
+            id="tagSelect"
+            alwaysShowLabel
+            placeholder="User Tag"
+            value={this.getTagTitle()}
+            isValid={() => {
+              return this.validateTag();
+            }}
+            showError={() => {
+              return this.state.showWarnings && !this.validateTag();
+            }}
+            options={this.state.tagList}
+            onSelect={this.selectTag}
+            style={{ width: 325, marginTop: 16 }}
+            isRequired
+            disabled={this.props.disabled}
+          />
+        )}
+        {/* </div> */}
+        {this.renderIncludes()}
+        {this.renderExcludes()}
+        {this.renderCustom()}
+      </div>
+    );
+  }
+}
+
+const toExport = connect(null, { setAuth }, null, { forwardRef: true })(
+  AudienceSelector,
+);
+
+export { toExport as AudienceSelector };