@plusscommunities/pluss-newsletter-web-sharing 1.2.16 → 1.3.6

package/dist/index.cjs.js

@@ -545,6 +545,14 @@ var newsletterActions = {
       method: 'GET',
       url: getUrl(values.serviceKey, 'content/published', query)
     });
+  },
+  getOpenGraph: function getOpenGraph(url) {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, "get2/opengraph", {
+        url: encodeURIComponent(url)
+      })
+    });
   }
 };
 
@@ -942,7 +950,9 @@ var ListNewsletter$1 = /*#__PURE__*/function (_Component) {
         style: {
           minWidth: '100%'
         }
-      }, this.renderContent());
+      }, this.renderContent(), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "hub_tidioPadding"
+      }));
     }
   }]);
 
@@ -964,6 +974,7 @@ var ListNewsletterEntries = reactRedux.connect(mapStateToProps$9, {
 
 var Helper = PlussCore__namespace.Helper;
 var isEmail = Helper.isEmail;
+var isUrl = Helper.isUrl;
 var getPluralS = Helper.getPluralS;
 var getUrlParams = Helper.getUrlParams;
 var safeReadParams = Helper.safeReadParams;
@@ -1313,7 +1324,9 @@ var NewsletterSubmissions = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           _this7.sortByCol('SubmittedBy');
         }
-      }, "Submitted By", this.renderSort('SubmittedBy')))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.renderNewsletter())));
+      }, "Submitted By", this.renderSort('SubmittedBy')))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.renderNewsletter())), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "hub_tidioPadding"
+      }));
     }
   }]);
 
@@ -2318,13 +2331,68 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
       links: [],
       authorDisplay: false,
       customAuthorInput: '',
-      isAudienceValid: true,
       textFormatOpen: false,
-      selectedOption: 'audience'
+      selectedOption: 'audience',
+      isAudienceValid: true,
+      audienceType: '',
+      audienceTypeSelection: []
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", _objectSpread$8({}, _this.initialState));
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "validateLoadFromWebsite", function () {
+      return isUrl(_this.state.loadFromWebsiteInput) && !_this.state.loadingFromWebsite;
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleLoadFromWebsite", function () {
+      if (!_this.validateLoadFromWebsite()) {
+        return;
+      }
+
+      _this.setState({
+        loadingFromWebsite: true
+      });
+
+      newsletterActions.getOpenGraph(_this.state.loadFromWebsiteInput).then(function (res) {
+        console.log(res.data);
+        var newState = {
+          loadingFromWebsite: false,
+          loadFromWebsiteInput: '',
+          titleInput: res.data.hybridGraph.title,
+          textInput: res.data.hybridGraph.description
+        };
+
+        if (res.data.hybridGraph.video) {
+          newState.videoInput = res.data.hybridGraph.video;
+          newState.selectedOption = 'video';
+        } else {
+          newState.links = [{
+            Text: "Read more ".concat(res.data.hybridGraph.site_name ? "on ".concat(res.data.hybridGraph.site_name) : 'here'),
+            Url: _this.state.loadFromWebsiteInput
+          }];
+          newState.selectedOption = 'attachments';
+        }
+
+        _this.setState(newState);
+
+        if (res.data.hybridGraph.image) {
+          _this.checkSetImage({
+            Images: [res.data.hybridGraph.image]
+          });
+        } else if (res.data.hybridGraph.imageSecureUrl) {
+          _this.checkSetImage({
+            Images: [res.data.hybridGraph.imageSecureUrl]
+          });
+        }
+      }).catch(function (err) {
+        window.alert('Could not load website. Try again or try a different URL.');
+
+        _this.setState({
+          loadingFromWebsite: false
+        });
+      });
+    });
+
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "selectOption", function (o) {
       _this.setState({
         selectedOption: o
@@ -2391,10 +2459,6 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleSubmit", function () {
-      console.log(_this.audienceSelector);
-
-      _this.audienceSelector.getWrappedInstance().onSubmit();
-
       if (!_this.validateForm()) {
         _this.setState({
           showWarnings: true
@@ -2425,6 +2489,14 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onChangeAudience", function (audienceType, audienceTypeSelection, isAudienceValid) {
+      _this.setState({
+        audienceType: audienceType,
+        audienceTypeSelection: audienceTypeSelection,
+        isAudienceValid: isAudienceValid
+      });
+    });
+
     return _this;
   }
 
@@ -2469,13 +2541,6 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         textFormatOpen: isOpen
       });
     }
-  }, {
-    key: "updateAudienceValidation",
-    value: function updateAudienceValidation(valid) {
-      this.setState({
-        isAudienceValid: valid
-      });
-    }
   }, {
     key: "getData",
     value: function getData() {
@@ -2498,7 +2563,9 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         allowComments: Boolean(update.AllowComments),
         featuredExpiryDate: moment__default['default'](update.FeaturedExpiry || undefined).format('YYYY-MM-DD'),
         featuredExpiryDateText: moment__default['default'](update.FeaturedExpiry || undefined).format('DD/MM/YYYY'),
-        authorDisplay: update.AuthorDisplay
+        authorDisplay: update.AuthorDisplay,
+        audienceType: update.AudienceType || '',
+        audienceTypeSelection: update.AudienceTypeSelection || []
       };
 
       if (update.AuthorDisplay === 'custom') {
@@ -2823,8 +2890,8 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         Text: this.state.textInput,
         Thumbnail: '',
         Video: this.state.videoInput,
-        AudienceType: this.audienceSelector.getWrappedInstance().getAudienceType(),
-        AudienceTypeSelection: this.audienceSelector.getWrappedInstance().getAudienceTypeSelection(),
+        AudienceType: this.state.audienceType,
+        AudienceTypeSelection: this.state.audienceTypeSelection,
         Site: this.props.auth.site,
         Tagged: this.state.tagged,
         HasSponsor: this.state.HasSponsor,
@@ -3056,19 +3123,20 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderAudience",
     value: function renderAudience() {
-      var _this9 = this;
-
+      var auth = this.props.auth;
+      var _this$state = this.state,
+          audienceType = _this$state.audienceType,
+          audienceTypeSelection = _this$state.audienceTypeSelection;
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "optionsContent_bottom"
       }, /*#__PURE__*/React__default['default'].createElement(AudienceSelector, {
-        updateValidation: this.updateAudienceValidation.bind(this),
-        ref: function ref(a) {
-          _this9.audienceSelector = a;
-        },
-        auth: this.props.auth,
+        onChange: this.onChangeAudience,
+        auth: auth,
+        custom: true,
+        audienceType: audienceType,
+        audienceTypeSelection: audienceTypeSelection,
         disallowSingleUsers: true,
-        disallowUserType: this.props.auth.site === 'hq',
-        customSite: this.props.auth.site === 'hq' ? 'All sites' : false
+        disallowUserType: true
       }));
     }
   }, {
@@ -3166,7 +3234,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderForm",
     value: function renderForm() {
-      var _this10 = this;
+      var _this9 = this;
 
       if (this.state.success) {
         return null;
@@ -3177,42 +3245,69 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement(Text, {
         type: "formTitleLarge",
         className: "marginBottom-24"
-      }, this.state.updateId == null ? 'New' : 'Edit', " Post"), /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+      }, this.state.updateId == null ? 'New' : 'Edit', " Post"), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "flex"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "flex-1"
+      }, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
         id: "titleInput",
         type: "text",
         label: "Title",
         placeholder: "Insert title here",
         showError: function showError() {
-          return _this10.state.showWarnings && _this10.isEmpty(_this10.state.titleInput);
+          return _this9.state.showWarnings && _this9.isEmpty(_this9.state.titleInput);
         },
         isValid: function isValid() {
-          return !_this10.isEmpty(_this10.state.titleInput);
+          return !_this9.isEmpty(_this9.state.titleInput);
         },
         value: this.state.titleInput,
         onChange: function onChange(e) {
-          return _this10.handleChange(e);
+          return _this9.handleChange(e);
         },
         isRequired: true,
         alwaysShowLabel: true
-      }), /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+      })), /*#__PURE__*/React__default['default'].createElement(Text, {
+        type: "formLabel",
+        className: "padding-20"
+      }, "or"), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "flex-1 flex flex-reverse flex-center"
+      }, /*#__PURE__*/React__default['default'].createElement(Button, {
+        inline: true,
+        buttonType: "primary",
+        className: "marginLeft-20",
+        onClick: this.handleLoadFromWebsite,
+        isActive: this.validateLoadFromWebsite()
+      }, "Load"), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "flex-1"
+      }, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+        id: "loadFromWebsiteInput",
+        type: "text",
+        label: "Load from website",
+        placeholder: "https://",
+        value: this.state.loadFromWebsiteInput,
+        onChange: function onChange(e) {
+          return _this9.handleChange(e);
+        },
+        alwaysShowLabel: true
+      })))), /*#__PURE__*/React__default['default'].createElement(GenericInput, {
         id: "textInput",
         type: "textarea",
         label: "Text",
         placeholder: "Enter story here",
         value: this.state.textInput,
         onChange: function onChange(e) {
-          return _this10.handleChange(e);
+          return _this9.handleChange(e);
         },
         isRequired: true,
         showError: function showError() {
-          return _this10.state.showWarnings && _this10.isEmpty(_this10.state.textInput);
+          return _this9.state.showWarnings && _this9.isEmpty(_this9.state.textInput);
         },
         isValid: function isValid() {
-          return !_this10.isEmpty(_this10.state.textInput);
+          return !_this9.isEmpty(_this9.state.textInput);
         },
         help: /*#__PURE__*/React__default['default'].createElement("a", {
           onClick: function onClick() {
-            _this10.toggleTextFormat(true);
+            _this9.toggleTextFormat(true);
           },
           className: "pointer"
         }, "Text formatting"),
@@ -3235,7 +3330,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderAddAttachment",
     value: function renderAddAttachment() {
-      var _this11 = this;
+      var _this10 = this;
 
       if (this.inputsDisabled()) {
         return null;
@@ -3243,7 +3338,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/React__default['default'].createElement(FileInput, {
         ref: function ref(_ref) {
-          _this11.pdFileInput = _ref;
+          _this10.pdFileInput = _ref;
         },
         style: {
           height: 120,
@@ -3257,7 +3352,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderAttachments",
     value: function renderAttachments() {
-      var _this12 = this;
+      var _this11 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "optionsContent_bottom"
@@ -3278,9 +3373,9 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           placeholder: "Enter Title",
           value: link.Text,
           onChange: function onChange(e) {
-            return _this12.handleLinkChange(index, 'Text', e.target.value);
+            return _this11.handleLinkChange(index, 'Text', e.target.value);
           },
-          disabled: _this12.inputsDisabled(),
+          disabled: _this11.inputsDisabled(),
           alwaysShowLabel: true,
           style: {
             margin: 0,
@@ -3294,9 +3389,9 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           placeholder: "https://",
           value: link.Url,
           onChange: function onChange(e) {
-            return _this12.handleLinkChange(index, 'Url', e.target.value);
+            return _this11.handleLinkChange(index, 'Url', e.target.value);
           },
-          disabled: _this12.inputsDisabled(),
+          disabled: _this11.inputsDisabled(),
           alwaysShowLabel: true,
           style: {
             margin: 0,
@@ -3306,7 +3401,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           className: "removeoption pdfAttachmentInput_remove",
           icon: "remove-circle",
           onClick: function onClick() {
-            _this12.removeLink(index);
+            _this11.removeLink(index);
           }
         }));
       }), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -3344,9 +3439,9 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           placeholder: "Title",
           value: attachment.Title,
           onChange: function onChange(e) {
-            return _this12.handleAttachmentChange(index, 'Title', e);
+            return _this11.handleAttachmentChange(index, 'Title', e);
           },
-          disabled: _this12.inputsDisabled(),
+          disabled: _this11.inputsDisabled(),
           alwaysShowLabel: true,
           style: {
             margin: 0,
@@ -3356,7 +3451,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           className: "removeoption pdfAttachmentInput_remove",
           icon: "remove-circle",
           onClick: function onClick() {
-            _this12.removeAttachment(index);
+            _this11.removeAttachment(index);
           }
         }));
       }), this.renderAddAttachment()));
@@ -3364,7 +3459,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFeatured",
     value: function renderFeatured() {
-      var _this13 = this;
+      var _this12 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "optionsContent_bottom"
@@ -3375,7 +3470,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'Yes',
           Value: true,
           onChange: function onChange() {
-            return _this13.setState({
+            return _this12.setState({
               isFeatured: true
             });
           }
@@ -3383,7 +3478,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'No',
           Value: false,
           onChange: function onChange() {
-            return _this13.setState({
+            return _this12.setState({
               isFeatured: false
             });
           }
@@ -3401,11 +3496,11 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         alwaysShowLabel: true,
         value: this.state.featuredExpiryDateText,
         onChange: function onChange(e) {
-          return _this13.handleExpiryDateTextChange(e.target.value);
+          return _this12.handleExpiryDateTextChange(e.target.value);
         },
         onClick: function onClick(e) {
-          return _this13.setState({
-            showExpiryDate: !_this13.state.showExpiryDate
+          return _this12.setState({
+            showExpiryDate: !_this12.state.showExpiryDate
           });
         }
       }), this.state.showExpiryDate && /*#__PURE__*/React__default['default'].createElement(DatePicker, {
@@ -3416,7 +3511,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderComments",
     value: function renderComments() {
-      var _this14 = this;
+      var _this13 = this;
 
       if (___default['default'].includes(this.props.auth.hidden, values.optionNewsComments)) return null;
       return /*#__PURE__*/React__default['default'].createElement(CheckBox, {
@@ -3424,8 +3519,8 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         label: "Allow comments",
         isActive: this.state.allowComments,
         onChange: function onChange() {
-          _this14.setState({
-            allowComments: !_this14.state.allowComments
+          _this13.setState({
+            allowComments: !_this13.state.allowComments
           });
         }
       });
@@ -3433,7 +3528,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTags",
     value: function renderTags() {
-      var _this15 = this;
+      var _this14 = this;
 
       if (!newsHaveTags) return null;
       return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -3446,7 +3541,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         placeholder: "Humour, Social, etc.",
         value: this.state.tagsInput,
         onChange: function onChange(e) {
-          return _this15.handleChange(e);
+          return _this14.handleChange(e);
         },
         alwaysShowLabel: true
       }));
@@ -3454,7 +3549,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderNotify",
     value: function renderNotify() {
-      var _this16 = this;
+      var _this15 = this;
 
       if (this.state.eventId || ___default['default'].includes(this.props.auth.hidden, 'eventNotifications')) {
         return null;
@@ -3469,7 +3564,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'Yes',
           Value: true,
           onChange: function onChange() {
-            return _this16.setState({
+            return _this15.setState({
               shouldNotify: true
             });
           }
@@ -3477,7 +3572,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'No',
           Value: false,
           onChange: function onChange() {
-            return _this16.setState({
+            return _this15.setState({
               shouldNotify: false
             });
           }
@@ -3492,7 +3587,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTvMode",
     value: function renderTvMode() {
-      var _this17 = this;
+      var _this16 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "marginTop-16"
@@ -3503,7 +3598,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'Yes',
           Value: true,
           onChange: function onChange() {
-            return _this17.setState({
+            return _this16.setState({
               isTvMode: true
             });
           }
@@ -3511,7 +3606,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'No',
           Value: false,
           onChange: function onChange() {
-            return _this17.setState({
+            return _this16.setState({
               isTvMode: false
             });
           }
@@ -3523,7 +3618,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderAuthor",
     value: function renderAuthor() {
-      var _this18 = this;
+      var _this17 = this;
 
       if (this.props.forceNewsAuthorName) return null;
       return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -3535,7 +3630,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'No',
           Value: true,
           onChange: function onChange() {
-            return _this18.setState({
+            return _this17.setState({
               authorDisplay: false
             });
           }
@@ -3549,7 +3644,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'Yes, use my name',
           Value: true,
           onChange: function onChange() {
-            return _this18.setState({
+            return _this17.setState({
               authorDisplay: 'name'
             });
           }
@@ -3563,7 +3658,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           Label: 'Yes, use the following:',
           Value: true,
           onChange: function onChange() {
-            return _this18.setState({
+            return _this17.setState({
               authorDisplay: 'custom'
             });
           }
@@ -3577,14 +3672,14 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         placeholder: "Enter custom name",
         value: this.state.customAuthorInput,
         onChange: function onChange(e) {
-          return _this18.handleChange(e);
+          return _this17.handleChange(e);
         }
       }));
     }
   }, {
     key: "renderVideo",
     value: function renderVideo() {
-      var _this19 = this;
+      var _this18 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "optionsContent_bottom"
@@ -3596,7 +3691,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         placeholder: "https://...",
         value: this.state.videoInput,
         onChange: function onChange(e) {
-          return _this19.handleChange(e);
+          return _this18.handleChange(e);
         },
         alwaysShowLabel: true
       }));
@@ -3665,23 +3760,23 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderResults",
     value: function renderResults() {
-      var _this20 = this;
+      var _this19 = this;
 
       if (this.state.userSearch == null) {
         return null;
       }
 
       var source = ___default['default'].sortBy(___default['default'].filter(this.state.contacts, function (ev) {
-        return ev.displayName.toLowerCase().indexOf(_this20.state.userSearch.toLowerCase()) > -1 && ev.category === 'resident';
+        return ev.displayName.toLowerCase().indexOf(_this19.state.userSearch.toLowerCase()) > -1 && ev.category === 'resident';
       }), 'displayName');
 
       return source.map(function (user, index) {
         return /*#__PURE__*/React__default['default'].createElement(UserListing, {
           user: user,
-          onClick: _this20.tagUser.bind(_this20, user),
+          onClick: _this19.tagUser.bind(_this19, user),
           key: user.id,
-          rightContent: _this20.renderTick(user),
-          subContent: _this20.renderSubText(user),
+          rightContent: _this19.renderTick(user),
+          subContent: _this19.renderSubText(user),
           size: 50
         });
       });
@@ -3689,7 +3784,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTagged",
     value: function renderTagged() {
-      var _this21 = this;
+      var _this20 = this;
 
       if (!this.state.showTagged || this.state.success) {
         return null;
@@ -3711,7 +3806,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
           user: user,
           key: user.userId,
           whiteText: true,
-          rightContent: _this21.renderRemoveTag(user)
+          rightContent: _this20.renderRemoveTag(user)
         });
       })), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "marginTop-24"
@@ -3727,7 +3822,7 @@ var AddNewsletterEntry = /*#__PURE__*/function (_Component) {
         placeholder: "Search for user",
         value: this.state.userSearch,
         onChange: function onChange(e) {
-          return _this21.handleSearchChange(e);
+          return _this20.handleSearchChange(e);
         }
       }), this.renderResults()))));
     }
@@ -3801,11 +3896,21 @@ var PublishAvailableNews = /*#__PURE__*/function (_Component) {
       publishDate: moment__default['default']().format('YYYY-MM-DD'),
       publishDateText: moment__default['default']().format('DD/MM/YYYY'),
       publishTime: '12:00pm',
-      isAudienceValid: true
+      isAudienceValid: true,
+      audienceType: '',
+      audienceTypeSelection: []
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", _objectSpread$7({}, _this.initialState));
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onChangeAudience", function (audienceType, audienceTypeSelection, isAudienceValid) {
+      _this.setState({
+        audienceType: audienceType,
+        audienceTypeSelection: audienceTypeSelection,
+        isAudienceValid: isAudienceValid
+      });
+    });
+
     return _this;
   }
 
@@ -3895,13 +4000,6 @@ var PublishAvailableNews = /*#__PURE__*/function (_Component) {
 
       return moment__default['default'].utc(this.state.update.Timestamp).local().format('D MMM');
     }
-  }, {
-    key: "updateAudienceValidation",
-    value: function updateAudienceValidation(valid) {
-      this.setState({
-        isAudienceValid: valid
-      });
-    }
   }, {
     key: "validatePublishTime",
     value: function validatePublishTime() {
@@ -3933,8 +4031,6 @@ var PublishAvailableNews = /*#__PURE__*/function (_Component) {
     value: function handleSubmit() {
       var _this3 = this;
 
-      this.audienceSelector.getWrappedInstance().onSubmit();
-
       if (!this.validateForm()) {
         return;
       }
@@ -3949,8 +4045,8 @@ var PublishAvailableNews = /*#__PURE__*/function (_Component) {
         Timestamp: timeToUse.toISOString(),
         UnixTimestamp: timeToUse.valueOf(),
         Site: this.props.auth.site,
-        AudienceType: this.audienceSelector.getWrappedInstance().getAudienceType(),
-        AudienceTypeSelection: this.audienceSelector.getWrappedInstance().getAudienceTypeSelection(),
+        AudienceType: this.state.audienceType,
+        AudienceTypeSelection: this.state.audienceTypeSelection,
         IsFeatured: this.state.isFeatured,
         FeaturedExpiry: this.state.isFeatured ? getUTCFromTimeDatePickers(this.state.featuredExpiryDate, '23:59').valueOf() : undefined,
         AllowComments: this.state.allowComments
@@ -4116,14 +4212,14 @@ var PublishAvailableNews = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "padding-60 paddingVertical-40 bottomDivideBorder"
       }, /*#__PURE__*/React__default['default'].createElement(AudienceSelector, {
-        updateValidation: this.updateAudienceValidation.bind(this),
-        ref: function ref(a) {
-          _this5.audienceSelector = a;
-        },
+        onChange: this.onChangeAudience,
         auth: this.props.auth,
+        custom: true,
+        audienceType: this.state.audienceType,
+        audienceTypeSelection: this.state.audienceTypeSelection,
         disallowSingleUsers: true,
-        disallowUserType: this.props.auth.site === 'hq',
-        customSite: this.props.auth.site === 'hq' ? 'All sites' : false
+        disallowUserType: true,
+        maxWidth: 300
       })), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "padding-60 paddingVertical-40 bottomDivideBorder"
       }, /*#__PURE__*/React__default['default'].createElement("p", {