@plusscommunities/pluss-newsletter-web-sharing 1.2.8

package/src/screens/Newsletter/AddNewsletterEntry.js

@@ -0,0 +1,1186 @@
+import React, { Component } from 'react';
+import { FormGroup } from 'react-bootstrap';
+import _ from 'lodash';
+import $ from 'jquery';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import FontAwesome from 'react-fontawesome';
+import { newsUpdate, usersLoaded, addRecentlyCreated } from '../../actions';
+import {
+  Button,
+  GenericInput,
+  ImageInput,
+  RadioButton,
+  OverlayPage,
+  OverlayPageContents,
+  OverlayPageSection,
+  OverlayPageBottomButtons,
+  UserListing,
+  P60Icon,
+  DatePicker,
+  TimePicker,
+  SuccessPopup,
+  AudienceSelector,
+  CheckBox,
+  TextFormatPopup,
+  OptionsSection,
+  FileInput,
+} from '../../components';
+import { newsletterActions, fileActions, userActions } from '../../webapi';
+import { safeReadParams, getThumb300, get1400, getUTCFromTimeDatePickers, getPluralOptions, isVideo, getFileName } from '../../helper';
+import { newsHaveTags, DEFAULT_ALLOW_COMMENTS } from '../../config';
+import { checkLoggedIn, validateAccess } from '../../session';
+import { Text } from '../../components/text';
+import { values } from '../../feature.config';
+
+class AddNewsletterEntry extends Component {
+  initialState = {
+    updateId: safeReadParams(this.props, 'updateId'),
+    titleInput: '',
+    textInput: '',
+    videoInput: '',
+    tagsInput: '',
+    publisherTitleInput: '',
+    tagged: [],
+    contacts: [],
+    showTagged: false,
+    showWarnings: false,
+    success: false,
+    submitting: false,
+    userSearch: '',
+    HasSponsor: false,
+    Sponsor: null,
+    isFeatured: false,
+    featuredExpiryDate: moment().format('YYYY-MM-DD'),
+    featuredExpiryDateText: moment().format('DD/MM/YYYY'),
+    differentPublish: false,
+    isTvMode: false,
+    allowComments: DEFAULT_ALLOW_COMMENTS,
+    shouldNotify: false,
+    publishDate: moment().format('YYYY-MM-DD'),
+    publishDateText: moment().format('DD/MM/YYYY'),
+    publishTime: '12:00pm',
+    attachments: [],
+    authorDisplay: false,
+    customAuthorInput: '',
+
+    isAudienceValid: true,
+    textFormatOpen: false,
+    selectedOption: 'audience',
+  };
+
+  state = { ...this.initialState };
+
+  UNSAFE_componentWillMount() {
+    checkLoggedIn(this, this.props.auth);
+    if (this.state.updateId) {
+      this.getData();
+    }
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      if (
+        validateAccess(this.props.auth.site, values.permissionNewsletterSubmit, this.props.auth) &&
+        !validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth) &&
+        this.state.updateId != null
+      ) {
+        window.history.back();
+      } else {
+        this.getUsers();
+      }
+    }, 500);
+    this.props.addRecentlyCreated(values.featureKey);
+  }
+
+  getUsers() {
+    userActions.fetchUsers(this.props.auth.site).then((res) => {
+      if (res.data != null && !_.isEmpty(res.data.results.Items) && res.data.results.Items[0].site === this.props.auth.site) {
+        this.props.usersLoaded(res.data.results.Items);
+      }
+    });
+  }
+
+  toggleTextFormat(isOpen) {
+    this.setState({
+      textFormatOpen: isOpen,
+    });
+  }
+
+  updateAudienceValidation(valid) {
+    this.setState({
+      isAudienceValid: valid,
+    });
+  }
+
+  getData() {
+    newsletterActions.getNewsletterEntry(this.state.updateId).then((res) => {
+      this.parseUpdate(res.data);
+    });
+  }
+
+  parseUpdate(update) {
+    const newState = {
+      titleInput: update.Title,
+      textInput: update.Text,
+      videoInput: update.Video,
+      attachments: _.isEmpty(update.Attachments) ? [] : update.Attachments,
+      isTvMode: Boolean(update.TVMode),
+      isFeatured: Boolean(update.IsFeatured),
+      allowComments: Boolean(update.AllowComments),
+      featuredExpiryDate: moment(update.FeaturedExpiry || undefined).format('YYYY-MM-DD'),
+      featuredExpiryDateText: moment(update.FeaturedExpiry || undefined).format('DD/MM/YYYY'),
+      authorDisplay: update.AuthorDisplay,
+    };
+    if (update.AuthorDisplay === 'custom') {
+      newState.customAuthorInput = update.Author ? update.Author.displayName : '';
+    }
+
+    if (!_.isEmpty(update.Tags)) {
+      newState.tagsInput = update.Tags.join(', ');
+    }
+
+    if (!_.isEmpty(update.Tagged)) {
+      newState.tagged = update.Tagged;
+    }
+
+    if (!_.isUndefined(update.HasSponsor)) {
+      newState.HasSponsor = update.HasSponsor;
+    }
+    if (!_.isUndefined(update.Sponsor)) {
+      newState.Sponsor = update.Sponsor;
+    }
+    if (update.Publisher && !_.isEmpty(update.Publisher.Title)) {
+      newState.publisherTitleInput = update.Publisher.Title;
+    }
+
+    this.checkSetImage(update);
+    // this.checkSetPublisherImage(update);
+
+    this.setState(newState);
+  }
+
+  handlePDFFileChange(event, attachment) {
+    const file = event.target.files[0];
+    if (!file || attachment.Uploading) {
+      return;
+    }
+    attachment.Uploading = true;
+    this.setState({
+      attachments: this.state.attachments,
+    });
+    /* fileActions.readBase64(file)
+            .then((res) => { */
+    fileActions
+      .uploadMediaAsync(file, file.name)
+      .then((fileRes) => {
+        const newAttachments = [...this.state.attachments];
+        const attachmentIndex = newAttachments.indexOf(attachment);
+        if (attachmentIndex !== -1) {
+          newAttachments[attachmentIndex].Uploading = false;
+          newAttachments[attachmentIndex].Source = fileRes;
+          const fileSplit = fileRes.split('/');
+          newAttachments[attachmentIndex].Title = _.last(fileSplit).split('.')[0];
+          this.setState({
+            attachments: newAttachments,
+          });
+        }
+      })
+      .catch((uploadErrorRes) => {
+        attachment.Uploading = false;
+        this.setState({
+          attachments: this.state.attachments,
+        });
+      });
+  }
+
+  selectOption = (o) => {
+    this.setState({
+      selectedOption: o,
+    });
+  };
+
+  handleAttachmentChange(index, column, event) {
+    var stateChange = {
+      attachments: this.state.attachments,
+    };
+    stateChange.attachments[index][column] = event.target.value;
+    this.setState(stateChange);
+  }
+
+  setAttachments(input) {
+    input.Attachments = [];
+    this.state.attachments.forEach((attachment) => {
+      if (!attachment.Removed && !_.isEmpty(attachment.Source)) {
+        input.Attachments.push({
+          Id: attachment.Id,
+          Title: attachment.Title,
+          Source: attachment.Source,
+        });
+      }
+    });
+  }
+
+  addAttachment = (url) => {
+    if (_.isEmpty(url)) {
+      return;
+    }
+    const newReps = [...this.state.attachments];
+    const id = _.isEmpty(this.state.attachments) ? 0 : _.maxBy(this.state.attachments, 'Id').Id + 1;
+    newReps.push({
+      Id: id,
+      Title: getFileName(url, true),
+      Source: url,
+      Uploading: false,
+      Type: 'pdf',
+    });
+    this.setState({
+      attachments: newReps,
+    });
+
+    this.pdFileInput && this.pdFileInput.getWrappedInstance().setValue('');
+  };
+
+  removeAttachment(index) {
+    const newReps = [...this.state.attachments];
+    newReps[index].Removed = true;
+    this.setState({
+      attachments: newReps,
+    });
+  }
+
+  inputsDisabled() {
+    if (this.state.submitting) {
+      return true;
+    }
+    return false;
+  }
+
+  checkSetPublisherImage(update) {
+    if (this.refs.publisherImage) {
+      if (update.Publisher && !_.isEmpty(update.Publisher.Image)) {
+        console.log(update.Publisher.Image);
+        this.refs.publisherImage.getWrappedInstance().setValue(update.Publisher.Image);
+      } else {
+        setTimeout(() => {
+          this.checkSetPublisherImage(update);
+        }, 100);
+      }
+    }
+  }
+
+  checkSetImage(update) {
+    if (this.refs.imageInput) {
+      if (update.Images) {
+        this.refs.imageInput.getWrappedInstance().setValue(update.Images);
+      } else {
+        this.refs.imageInput.getWrappedInstance().setValue(update.Image);
+      }
+    } else {
+      setTimeout(() => {
+        this.checkSetImage(update);
+      }, 100);
+    }
+  }
+
+  isEmpty(text) {
+    return text === '';
+  }
+
+  handleChange(event) {
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  }
+
+  handleExpiryDateTextChange(value) {
+    const newState = { featuredExpiryDateText: value };
+    const m = moment(value, 'DD/MM/YYYY');
+
+    if (m.isValid() && m.year() > 1900) {
+      newState.featuredExpiryDate = m.format('YYYY-MM-DD');
+    }
+    this.setState(newState);
+  }
+
+  handleExpiryDateChange(date) {
+    var stateChange = {
+      featuredExpiryDate: date,
+      featuredExpiryDateText: moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY'),
+      showExpiryDate: false,
+    };
+    this.setState(stateChange);
+  }
+
+  handlePublishDateTextChange(value) {
+    const newState = { publishDateText: value };
+    const m = moment(value, 'DD/MM/YYYY');
+
+    if (m.isValid() && m.year() > 1900) {
+      newState.publishDate = m.format('YYYY-MM-DD');
+    }
+    this.setState(newState);
+  }
+
+  handlePublishDateChange(date) {
+    var stateChange = {
+      publishDate: date,
+      publishDateText: moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY'),
+      showPublishDate: false,
+    };
+    this.setState(stateChange);
+  }
+
+  validateLoading() {
+    if (this.state.submitting) {
+      return false;
+    }
+    return true;
+  }
+
+  validateImage() {
+    if (_.isEmpty(this.state.imageInput)) {
+      return true;
+    }
+    return this.state.imageInput.match(/\.(jpeg|jpg|gif|png|ashx)/) != null;
+  }
+
+  validateCompulsoryText() {
+    if (this.isEmpty(this.state.titleInput)) {
+      return false;
+    }
+    if (this.isEmpty(this.state.textInput)) {
+      return false;
+    }
+    return true;
+  }
+
+  validateForm() {
+    if (!this.validateCompulsoryText()) {
+      return false;
+    }
+    if (!this.validateImage()) {
+      return false;
+    }
+    if (!this.validateLoading()) {
+      return false;
+    }
+    if (!this.validatePublishTime()) {
+      return false;
+    }
+    if (!this.state.isAudienceValid) {
+      return false;
+    }
+    if (this.state.authorDisplay === 'custom' && _.isEmpty(this.state.customAuthorInput)) {
+      return false;
+    }
+    return true;
+  }
+
+  validatePublishTime() {
+    if (!this.state.differentPublish) {
+      return true;
+    }
+    if (!_.isUndefined(this.state.publishTime)) {
+      return this.state.publishTime.trim() !== '';
+    }
+    return false;
+  }
+
+  setTags(input) {
+    const tags = [];
+
+    if (!this.isEmpty(this.state.tagsInput)) {
+      this.state.tagsInput.split(',').forEach((tag) => {
+        tags.push(tag.trim());
+      });
+    }
+
+    input.Tags = tags;
+  }
+
+  toggleTagged() {
+    if (!this.state.showTagged) {
+      setTimeout(() => {
+        $('#NewsContainer').animate({ scrollLeft: '1000px' });
+      }, 50);
+    }
+    this.setState({
+      showTagged: !this.state.showTagged,
+      userSearch: '',
+    });
+  }
+
+  compileJson() {
+    const result = {
+      Title: this.state.titleInput,
+      Image: '',
+      Images: this.refs.imageInput
+        .getWrappedInstance()
+        .getValue()
+        .map((url) => {
+          return isVideo(url) ? url : get1400(url);
+        }),
+      Text: this.state.textInput,
+      Thumbnail: '',
+      Video: this.state.videoInput,
+      AudienceType: this.audienceSelector.getWrappedInstance().getAudienceType(),
+      AudienceTypeSelection: this.audienceSelector.getWrappedInstance().getAudienceTypeSelection(),
+      Site: this.props.auth.site,
+      Tagged: this.state.tagged,
+      HasSponsor: this.state.HasSponsor,
+      Sponsor: null,
+      Tags: [],
+      TVMode: this.state.isTvMode,
+      AllowComments: _.includes(this.props.auth.hidden, values.optionNewsComments) ? false : this.state.allowComments,
+      Notification: _.includes(this.props.auth.hidden, values.optionNewsNotifications) ? false : this.state.shouldNotify,
+      IsFeatured: this.state.isFeatured,
+      FeaturedExpiry: this.state.isFeatured ? getUTCFromTimeDatePickers(this.state.featuredExpiryDate, '23:59').valueOf() : undefined,
+      Publisher: null,
+      AuthorDisplay: this.state.authorDisplay,
+    };
+    if (this.state.authorDisplay === 'custom') {
+      result.Author = { displayName: this.state.customAuthorInput };
+    }
+    if (!_.isEmpty(result.Images)) {
+      result.Thumbnail = getThumb300(result.Images[0]);
+      result.Image = get1400(result.Images[0]);
+    }
+
+    // if (baseClient === 'pluss60') {
+    //   const publisherImage = this.refs.publisherImage.getWrappedInstance().getValue();
+    //   if (!_.isEmpty(publisherImage) || !_.isEmpty(this.state.publisherTitleInput)) {
+    //     result.Publisher = {
+    //       Image: publisherImage,
+    //       Title: this.state.publisherTitleInput,
+    //     };
+    //   }
+    // }
+
+    if (this.state.updateId != null) {
+      result.RowId = this.state.updateId;
+    }
+
+    if (this.state.differentPublish) {
+      const timeToUse = getUTCFromTimeDatePickers(this.state.publishDate, this.state.publishTime);
+      result.Timestamp = timeToUse.toISOString();
+      result.UnixTimestamp = timeToUse.valueOf();
+    }
+
+    if (newsHaveTags) {
+      this.setTags(result);
+    }
+    this.setAttachments(result);
+
+    return result;
+  }
+
+  handleSearchChange(event) {
+    if (this.state.searchUserLoading) {
+      return;
+    }
+    var stateChange = {};
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+    this.setState(stateChange);
+  }
+
+  handleSubmit = () => {
+    console.log(this.audienceSelector);
+    this.audienceSelector.getWrappedInstance().onSubmit();
+    if (!this.validateForm()) {
+      this.setState({ showWarnings: true });
+      return;
+    }
+    this.setState({ submitting: true });
+    const data = this.compileJson();
+
+    newsletterActions
+      .addOrEditNewsletterEntry(data, this.props.auth.site)
+      .then((res) => {
+        this.setState({
+          success: true,
+          submitting: false,
+        });
+        this.props.newsUpdate(this.props.auth.site);
+      })
+      .catch((res) => {
+        this.setState({ submitting: false });
+        alert('Something went wrong with the request. Please try again.');
+      });
+  };
+
+  tagUser(user) {
+    if (
+      _.some(this.state.tagged, (u) => {
+        return u.userId === user.Id;
+      })
+    ) {
+      return this.removeTaggedUser({ userId: user.Id });
+    }
+    const newTagged = _.clone(this.state.tagged);
+    newTagged.push({
+      profilePic: user.profilePic,
+      displayName: user.displayName,
+      userId: user.Id,
+    });
+    this.setState({
+      tagged: newTagged,
+    });
+  }
+
+  removeTaggedUser(user) {
+    this.setState({
+      tagged: _.filter(this.state.tagged, (u) => {
+        return u.userId !== user.userId;
+      }),
+    });
+  }
+
+  clearForm() {
+    this.setState(this.initialState);
+  }
+
+  clearSuccess() {
+    this.setState({
+      success: false,
+      submitting: false,
+      showWarnings: false,
+    });
+  }
+
+  renderSuccess() {
+    if (!this.state.success) {
+      return null;
+    }
+    return (
+      <SuccessPopup
+        text={`Article has been ${this.state.updateId != null ? 'edited' : 'added'}`}
+        buttons={[
+          {
+            type: 'outlined',
+            onClick: () => {
+              window.history.back();
+            },
+            text: 'Go to home',
+          },
+        ]}
+      />
+    );
+  }
+
+  renderSubmit() {
+    if (this.state.submitting) {
+      return <Button buttonType="secondary">Saving...</Button>;
+    }
+    return (
+      <div>
+        <Button
+          inline
+          buttonType="tertiary"
+          onClick={() => {
+            window.history.back();
+          }}
+          isActive
+          style={{ marginRight: 16 }}
+        >
+          {this.state.updateId == null ? 'Cancel' : 'Back'}
+        </Button>
+        <Button inline buttonType="primary" onClick={this.handleSubmit} isActive={this.validateForm()}>
+          Save
+        </Button>
+      </div>
+    );
+  }
+
+  renderPublishOptions() {
+    return (
+      <div className="optionsContent_bottom optionsContent_bottom-noTopPadding">
+        {this.renderNotify()}
+        {this.renderTvMode()}
+        {this.renderComments()}
+      </div>
+    );
+  }
+
+  renderPublishTime() {
+    return (
+      <div className="optionsContent_bottom">
+        <RadioButton
+          label={
+            this.state.updateId ? 'Do you want to change the publish date?' : 'Should this post be published on a different day than today?'
+          }
+          isActive={this.state.differentPublish}
+          options={[
+            { Label: 'Yes', Value: true, onChange: () => this.setState({ differentPublish: true }) },
+            { Label: 'No', Value: false, onChange: () => this.setState({ differentPublish: false }) },
+          ]}
+        />
+        {this.state.differentPublish && (
+          <div>
+            <GenericInput
+              id={`publishTime`}
+              type="time"
+              label="Time"
+              className="marginTop-16"
+              value={this.state.publishTime}
+              isValid={() => {
+                return this.validatePublishTime();
+              }}
+              showError={() => {
+                return this.state.showWarnings && !this.validatePublishTime();
+              }}
+              style={{ marginBottom: 0 }}
+              inputComponent={
+                <TimePicker
+                  selectedTime={this.state.publishTime}
+                  selectTime={(val) => {
+                    this.setState({ publishTime: val });
+                  }}
+                />
+              }
+            />
+            {/* Test Input Date Selector */}
+            <GenericInput
+              className="marginTop-16"
+              id="publishDateText"
+              label="Publish Date"
+              alwaysShowLabel
+              value={this.state.publishDateText}
+              onChange={(e) => this.handlePublishDateTextChange(e.target.value)}
+              onClick={(e) => this.setState({ showPublishDate: !this.state.showPublishDate })}
+            />
+            {this.state.showPublishDate && (
+              <DatePicker selectedDate={this.state.publishDate} selectDate={this.handlePublishDateChange.bind(this)} />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  renderAudience() {
+    return (
+      <div className="optionsContent_bottom">
+        <AudienceSelector
+          updateValidation={this.updateAudienceValidation.bind(this)}
+          ref={(a) => {
+            this.audienceSelector = a;
+          }}
+          auth={this.props.auth}
+          disallowSingleUsers
+          disallowUserType={this.props.auth.site === 'hq'}
+          customSite={this.props.auth.site === 'hq' ? 'All sites' : false}
+        />
+      </div>
+    );
+  }
+
+  renderSelectedOption() {
+    return (
+      <div>
+        <div style={{ display: this.state.selectedOption === 'audience' ? 'block' : 'none' }}>{this.renderAudience()}</div>
+        <div style={{ display: this.state.selectedOption === 'publishOptions' ? 'block' : 'none' }}>{this.renderPublishOptions()}</div>
+        <div style={{ display: this.state.selectedOption === 'attachments' ? 'block' : 'none' }}>{this.renderAttachments()}</div>
+        <div style={{ display: this.state.selectedOption === 'featured' ? 'block' : 'none' }}>{this.renderFeatured()}</div>
+        <div style={{ display: this.state.selectedOption === 'publishTime' ? 'block' : 'none' }}>{this.renderPublishTime()}</div>
+        <div style={{ display: this.state.selectedOption === 'author' ? 'block' : 'none' }}>{this.renderAuthor()}</div>
+        <div style={{ display: this.state.selectedOption === 'video' ? 'block' : 'none' }}>{this.renderVideo()}</div>
+        <div style={{ display: this.state.selectedOption === 'tags' ? 'block' : 'none' }}>{this.renderTags()}</div>
+      </div>
+    );
+  }
+
+  renderOptionsSection() {
+    let options = [
+      {
+        key: 'audience',
+        icon: 'audience',
+        text: 'Audience',
+      },
+      {
+        key: 'publishOptions',
+        icon: 'bell',
+        text: 'Publish Options',
+      },
+      {
+        key: 'publishTime',
+        icon: 'clock',
+        text: 'Schedule Post',
+      },
+      {
+        key: 'featured',
+        icon: 'star',
+        text: values.textFeaturedNews,
+      },
+      {
+        key: 'attachments',
+        icon: 'attachments',
+        text: 'Attachments',
+      },
+      {
+        key: 'author',
+        icon: 'user-card',
+        text: 'Author Name',
+      },
+      {
+        key: 'video',
+        icon: 'videocamera',
+        text: 'Video',
+      },
+      {
+        key: 'tags',
+        icon: 'tag',
+        text: 'Tags',
+      },
+    ];
+    if (this.props.forceNewsAuthorName) {
+      options = _.filter(options, (o) => {
+        return o.key !== 'author';
+      });
+    }
+    if (!newsHaveTags) {
+      options = _.filter(options, (o) => {
+        return o.key !== 'tags';
+      });
+    }
+    return (
+      <OptionsSection options={options} selected={this.state.selectedOption} selectOption={this.selectOption}>
+        {this.renderSelectedOption()}
+      </OptionsSection>
+    );
+  }
+
+  renderForm() {
+    if (this.state.success) {
+      return null;
+    }
+    return (
+      <div>
+        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+          <Text type="formTitleLarge" className="marginBottom-24">
+            {this.state.updateId == null ? 'New' : 'Edit'} Post
+          </Text>
+          {/* title */}
+          <GenericInput
+            id="titleInput"
+            type="text"
+            label="Title"
+            placeholder="Insert title here"
+            showError={() => {
+              return this.state.showWarnings && this.isEmpty(this.state.titleInput);
+            }}
+            isValid={() => {
+              return !this.isEmpty(this.state.titleInput);
+            }}
+            value={this.state.titleInput}
+            onChange={(e) => this.handleChange(e)}
+            isRequired
+            alwaysShowLabel
+          />
+          {/* description */}
+          <GenericInput
+            id="textInput"
+            type="textarea"
+            label="Text"
+            placeholder="Enter story here"
+            value={this.state.textInput}
+            onChange={(e) => this.handleChange(e)}
+            isRequired
+            showError={() => {
+              return this.state.showWarnings && this.isEmpty(this.state.textInput);
+            }}
+            isValid={() => {
+              return !this.isEmpty(this.state.textInput);
+            }}
+            help={
+              <a
+                onClick={() => {
+                  this.toggleTextFormat(true);
+                }}
+                className="pointer"
+              >
+                Text formatting
+              </a>
+            }
+            alwaysShowLabel
+          />
+        </div>
+        <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+          {/* image */}
+          <Text type="formTitleSmall" className="marginBottom-16">
+            Images & Videos
+          </Text>
+          {/* image */}
+          <ImageInput ref="imageInput" multiple limit={50} allowVideo containerStyle={{ width: 960 }} />
+        </div>
+        {this.renderOptionsSection()}
+      </div>
+    );
+  }
+
+  renderAddAttachment() {
+    if (this.inputsDisabled()) {
+      return null;
+    }
+    return (
+      <FileInput
+        ref={(ref) => {
+          this.pdFileInput = ref;
+        }}
+        style={{ height: 120, width: 240 }}
+        refreshCallback={this.addAttachment}
+        accept="application/pdf"
+        simpleStyle
+      />
+    );
+  }
+
+  renderAttachments() {
+    return (
+      <div className="optionsContent_bottom">
+        <FormGroup controlId="eventAttachment">
+          {this.state.attachments.map((attachment, index) => {
+            if (attachment.Removed) {
+              return null;
+            }
+            return (
+              <div key={index} className="pdfAttachmentInput">
+                <img
+                  src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
+                  className="pdfAttachmentInput_icon"
+                  alt="file"
+                />
+                <Text type="formTitleSmall" className="pdfAttachmentInput_title">
+                  {getFileName(attachment.Source)}
+                </Text>
+                <GenericInput
+                  id={`eventAttachmentTitle${index}`}
+                  label="Title"
+                  type="text"
+                  placeholder="Title"
+                  value={attachment.Title}
+                  onChange={(e) => this.handleAttachmentChange(index, 'Title', e)}
+                  disabled={this.inputsDisabled()}
+                  alwaysShowLabel
+                  style={{ margin: 0, flex: 1 }}
+                />
+                <P60Icon
+                  className="removeoption pdfAttachmentInput_remove"
+                  icon="remove-circle"
+                  onClick={() => {
+                    this.removeAttachment(index);
+                  }}
+                />
+              </div>
+            );
+          })}
+          {this.renderAddAttachment()}
+        </FormGroup>
+      </div>
+    );
+  }
+
+  renderFeatured() {
+    return (
+      <div className="optionsContent_bottom">
+        <RadioButton
+          label={values.textIsThisAFeaturedNewsArticle}
+          isActive={this.state.isFeatured}
+          options={[
+            { Label: 'Yes', Value: true, onChange: () => this.setState({ isFeatured: true }) },
+            { Label: 'No', Value: false, onChange: () => this.setState({ isFeatured: false }) },
+          ]}
+          disabled={this.inputsDisabled()}
+        />
+        <div className="genericInput-help" style={{ marginTop: 4 }}>
+          {values.textFeaturedNewsArticlesWillBeHighlighted}
+        </div>
+        {this.state.isFeatured && (
+          <div>
+            <GenericInput
+              className="marginTop-16"
+              id="featuredExpiryDateText"
+              label="Expiry Date"
+              alwaysShowLabel
+              value={this.state.featuredExpiryDateText}
+              onChange={(e) => this.handleExpiryDateTextChange(e.target.value)}
+              onClick={(e) => this.setState({ showExpiryDate: !this.state.showExpiryDate })}
+            />
+            {this.state.showExpiryDate && (
+              <DatePicker selectedDate={this.state.featuredExpiryDate} selectDate={this.handleExpiryDateChange.bind(this)} />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  renderComments() {
+    if (_.includes(this.props.auth.hidden, values.optionNewsComments)) return null;
+
+    return (
+      <CheckBox
+        className="marginTop-16"
+        label="Allow comments"
+        isActive={this.state.allowComments}
+        onChange={() => {
+          this.setState({ allowComments: !this.state.allowComments });
+        }}
+      />
+    );
+  }
+
+  renderTags() {
+    if (!newsHaveTags) return null;
+    return (
+      <div className="optionsContent_bottom">
+        <GenericInput
+          id="tagsInput"
+          type="text"
+          label="Tags"
+          help="Separate tags by commas"
+          placeholder="Humour, Social, etc."
+          value={this.state.tagsInput}
+          onChange={(e) => this.handleChange(e)}
+          alwaysShowLabel
+        />
+      </div>
+    );
+  }
+
+  renderNotify() {
+    if (this.state.eventId || _.includes(this.props.auth.hidden, 'eventNotifications')) {
+      return null;
+    }
+    return (
+      <div className="marginTop-16">
+        <RadioButton
+          label="Do you want to send a notification with this post?"
+          isActive={this.state.shouldNotify}
+          options={[
+            { Label: 'Yes', Value: true, onChange: () => this.setState({ shouldNotify: true }) },
+            { Label: 'No', Value: false, onChange: () => this.setState({ shouldNotify: false }) },
+          ]}
+        />
+        <div className="genericInput-help" style={{ marginTop: 4 }}>
+          This will send an alert to all users who have enabled push notifications.
+        </div>
+      </div>
+    );
+  }
+
+  renderTvMode() {
+    return (
+      <div className="marginTop-16">
+        <RadioButton
+          label="Do you want to publish this article to TV Mode?"
+          isActive={this.state.isTvMode}
+          options={[
+            { Label: 'Yes', Value: true, onChange: () => this.setState({ isTvMode: true }) },
+            { Label: 'No', Value: false, onChange: () => this.setState({ isTvMode: false }) },
+          ]}
+        />
+        <div className="highlightedHelp marginTop-8">{values.textTipKeepYourTVNewsFeedActiveAndCurrent}</div>
+      </div>
+    );
+  }
+
+  renderAuthor() {
+    if (this.props.forceNewsAuthorName) return null;
+
+    return (
+      <div className="optionsContent_bottom">
+        <RadioButton
+          label="Do you want to show the author of this article?"
+          isActive={!this.state.authorDisplay}
+          options={[{ Label: 'No', Value: true, onChange: () => this.setState({ authorDisplay: false }) }]}
+        />
+        <RadioButton
+          style={{ marginTop: 8 }}
+          isActive={this.state.authorDisplay === 'name'}
+          options={[{ Label: 'Yes, use my name', Value: true, onChange: () => this.setState({ authorDisplay: 'name' }) }]}
+        />
+        <RadioButton
+          style={{ marginTop: 8 }}
+          isActive={this.state.authorDisplay === 'custom'}
+          options={[{ Label: 'Yes, use the following:', Value: true, onChange: () => this.setState({ authorDisplay: 'custom' }) }]}
+        />
+        {this.state.authorDisplay === 'custom' && (
+          <GenericInput
+            style={{ marginTop: 8 }}
+            id="customAuthorInput"
+            type="text"
+            placeholder="Enter custom name"
+            value={this.state.customAuthorInput}
+            onChange={(e) => this.handleChange(e)}
+          />
+        )}
+      </div>
+    );
+  }
+
+  renderVideo() {
+    return (
+      <div className="optionsContent_bottom">
+        <GenericInput
+          id="videoInput"
+          type="text"
+          // label="Video"
+          help="Enter a direct URL to a video file (i.e. .mp4) or a YouTube video"
+          placeholder="https://..."
+          value={this.state.videoInput}
+          onChange={(e) => this.handleChange(e)}
+          alwaysShowLabel
+        />
+      </div>
+    );
+  }
+
+  renderSideForm() {
+    if (this.state.success) {
+      return null;
+    }
+    return (
+      <OverlayPageSection className="pageSectionWrapper--newPopupSide">
+        <div>
+          <div
+            className={`sideSection padding-60 paddingVertical-40 bottomDivideBorder pointer ${
+              this.state.showTagged ? 'sideSection--highlighted' : ''
+            }`}
+            onClick={this.toggleTagged.bind(this)}
+          >
+            <Text type="formTitleSmall" className="marginBottom-16">
+              Tagged People
+            </Text>
+            <p className="fieldLabel">
+              {this.state.tagged.length} {getPluralOptions(this.state.tagged.length, 'person', 'people')}
+            </p>
+          </div>
+        </div>
+      </OverlayPageSection>
+    );
+  }
+
+  renderRemoveTag(user) {
+    return (
+      <div onClick={this.removeTaggedUser.bind(this, user)}>
+        <P60Icon className="actionIcon" icon="remove-circle" />
+      </div>
+    );
+  }
+
+  renderTick(user) {
+    if (
+      !_.some(this.state.tagged, (u) => {
+        return u.userId === user.Id;
+      })
+    ) {
+      return null;
+    }
+    return (
+      <div className={`aCheck aCheck--active`}>
+        <div className="aCheck-Tick">
+          <FontAwesome className="aCheck-font" name={'check'} />
+        </div>
+      </div>
+    );
+  }
+
+  renderSubText(user) {
+    if (_.isEmpty(user.unit)) {
+      return null;
+    }
+    return (
+      <p className="text-subtitle" style={{ margin: 0 }}>
+        {user.unit}
+      </p>
+    );
+  }
+
+  renderResults() {
+    if (this.state.userSearch == null) {
+      return null;
+    }
+    let source = _.sortBy(
+      _.filter(this.state.contacts, (ev) => {
+        return ev.displayName.toLowerCase().indexOf(this.state.userSearch.toLowerCase()) > -1 && ev.category === 'resident';
+      }),
+      'displayName',
+    );
+
+    return source.map((user, index) => {
+      return (
+        <UserListing
+          user={user}
+          onClick={this.tagUser.bind(this, user)}
+          key={user.id}
+          rightContent={this.renderTick(user)}
+          subContent={this.renderSubText(user)}
+          size={50}
+        />
+      );
+    });
+  }
+
+  renderTagged() {
+    if (!this.state.showTagged || this.state.success) {
+      return null;
+    }
+    return (
+      <OverlayPageSection className="pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide--purple">
+        <div className="paddingVertical-40">
+          <div className="paddingHorizontal-32">
+            <Text type="formTitleSmall" className="text-white">
+              Tagged People
+            </Text>
+          </div>
+          <div className="marginTop-24 paddingHorizontal-32">
+            {this.state.tagged.map((user, index) => {
+              return <UserListing user={user} key={user.userId} whiteText rightContent={this.renderRemoveTag(user)} />;
+            })}
+          </div>
+          <div className="marginTop-24">
+            <div className="paddingHorizontal-32 paddingVertical-16" style={{ backgroundColor: '#fff' }}>
+              {' '}
+              {/* Search for peeps */}
+              <GenericInput
+                id="userSearch"
+                type="text"
+                label="Search for User"
+                placeholder="Search for user"
+                value={this.state.userSearch}
+                onChange={(e) => this.handleSearchChange(e)}
+              />
+              {this.renderResults()}
+            </div>
+          </div>
+        </div>
+      </OverlayPageSection>
+    );
+  }
+
+  render() {
+    return (
+      <OverlayPage>
+        <TextFormatPopup onClose={this.toggleTextFormat.bind(this, false)} isOpen={this.state.textFormatOpen} />
+        <OverlayPageContents id="NewsContainer" noBottomButtons={this.state.success}>
+          <OverlayPageSection className="pageSectionWrapper--newPopup">
+            {this.renderForm()}
+            {this.renderSuccess()}
+          </OverlayPageSection>
+          {this.renderSideForm()}
+          {this.renderTagged()}
+        </OverlayPageContents>
+        <OverlayPageBottomButtons>{this.renderSubmit()}</OverlayPageBottomButtons>
+      </OverlayPage>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  const { allUsers } = state.users;
+  return { auth, users: allUsers, forceNewsAuthorName: auth && auth.siteSettings && auth.siteSettings[values.optionForceNewsAuthorName] };
+};
+
+export default connect(mapStateToProps, { newsUpdate, usersLoaded, addRecentlyCreated })(AddNewsletterEntry);