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

package/src/components/AudienceSelector.js

@@ -1,700 +0,0 @@
-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 };