@plusscommunities/pluss-core-web 1.6.13-beta.0 → 1.6.15-beta.0

package/src/components/AudienceSelector.js

@@ -12,689 +12,689 @@ 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>
-    );
-  }
+	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,
+	AudienceSelector,
 );
 
 export { toExport as AudienceSelector };