@plusscommunities/pluss-newsletter-web-sharing 1.2.8

package/src/screens/Newsletter/PublishAvailableNews.js

@@ -0,0 +1,450 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import moment from 'moment';
+import FontAwesome from 'react-fontawesome';
+import { connect } from 'react-redux';
+import { newsUpdate } from '../../actions';
+import {
+  GenericInput,
+  Button,
+  OverlayPage,
+  OverlayPageContents,
+  OverlayPageSection,
+  OverlayPageBottomButtons,
+  SuccessPopup,
+  TimePicker,
+  DatePicker,
+  AudienceSelector,
+  RadioButton,
+  CheckBox,
+} from '../../components';
+import { newsletterActions } from '../../webapi';
+import { safeReadParams, getUTCFromTimeDatePickers } from '../../helper';
+import { checkLoggedIn } from '../../session';
+import { COLOUR_BRANDING_MAIN, COLOUR_BRANDING_OFF } from '../../js';
+import { DEFAULT_ALLOW_COMMENTS } from '../../config';
+import { values } from '../../feature.config';
+
+class PublishAvailableNews extends Component {
+  initialState = {
+    updateId: safeReadParams(this.props, 'updateId'),
+    success: false,
+    submitting: false,
+    update: {},
+    isFeatured: false,
+    allowComments: DEFAULT_ALLOW_COMMENTS,
+    featuredExpiryDate: moment().format('YYYY-MM-DD'),
+    featuredExpiryDateText: moment().format('DD/MM/YYYY'),
+    publishDate: moment().format('YYYY-MM-DD'),
+    publishDateText: moment().format('DD/MM/YYYY'),
+    publishTime: '12:00pm',
+    isAudienceValid: true,
+  };
+
+  state = { ...this.initialState };
+
+  UNSAFE_componentWillMount() {
+    checkLoggedIn(this, this.props.auth);
+
+    if (this.state.updateId) {
+      this.getData();
+    }
+  }
+
+  handleChange(event) {
+    var stateChange = { newUpdate: { ...this.state.newUpdate } };
+    stateChange.newUpdate[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);
+  }
+
+  getData() {
+    newsletterActions.getPublishedEntries(this.state.updateId).then((res) => {
+      this.setState({
+        update: res.data[0],
+      });
+    });
+  }
+
+  getDate() {
+    if (!this.state.update.Timestamp) {
+      return '';
+    }
+    return moment.utc(this.state.update.Timestamp).local().format('D MMM');
+  }
+
+  updateAudienceValidation(valid) {
+    this.setState({
+      isAudienceValid: valid,
+    });
+  }
+
+  validatePublishTime() {
+    if (!_.isUndefined(this.state.publishTime)) {
+      return this.state.publishTime.trim() !== '';
+    }
+    return false;
+  }
+
+  validateForm() {
+    if (this.state.submitting) {
+      return false;
+    }
+    if (!this.validatePublishTime()) {
+      return false;
+    }
+    if (!this.state.isAudienceValid) {
+      return false;
+    }
+    return true;
+  }
+
+  handleSubmit() {
+    this.audienceSelector.getWrappedInstance().onSubmit();
+    if (!this.validateForm()) {
+      return;
+    }
+
+    this.setState({
+      submitting: true,
+    });
+
+    const timeToUse = getUTCFromTimeDatePickers(this.state.publishDate, this.state.publishTime);
+    const data = {
+      ...this.state.update,
+      SourceId: this.state.updateId,
+      Timestamp: timeToUse.toISOString(),
+      UnixTimestamp: timeToUse.valueOf(),
+      Site: this.props.auth.site,
+      AudienceType: this.audienceSelector.getWrappedInstance().getAudienceType(),
+      AudienceTypeSelection: this.audienceSelector.getWrappedInstance().getAudienceTypeSelection(),
+      IsFeatured: this.state.isFeatured,
+      FeaturedExpiry: this.state.isFeatured ? getUTCFromTimeDatePickers(this.state.featuredExpiryDate, '23:59').valueOf() : undefined,
+      AllowComments: this.state.allowComments,
+    };
+    delete data.RowId;
+    delete data.Id;
+    delete data.SubmittedBy;
+
+    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.');
+      });
+  }
+
+  renderSuccess() {
+    if (!this.state.success) {
+      return null;
+    }
+    return (
+      <SuccessPopup
+        text={`Update has been added`}
+        buttons={[
+          {
+            type: 'outlined',
+            onClick: () => {
+              window.history.back();
+            },
+            text: 'Go to home',
+          },
+        ]}
+      />
+    );
+  }
+
+  validateLoading() {
+    if (this.state.submitting) {
+      return false;
+    }
+    return true;
+  }
+
+  renderSubmit() {
+    if (_.isEmpty(this.state.update)) {
+      return (
+        <div>
+          <Button
+            inline
+            buttonType="tertiary"
+            onClick={() => {
+              window.history.back();
+            }}
+            isActive
+            style={{ marginRight: 16 }}
+          >
+            Cancel
+          </Button>
+          <Button inline buttonType="primary" isActive={false}>
+            Publish
+          </Button>
+        </div>
+      );
+    }
+    if (this.state.submitting) {
+      return <Button buttonType="secondary">Saving...</Button>;
+    }
+    return (
+      <div>
+        <Button
+          inline
+          buttonType="tertiary"
+          onClick={() => {
+            window.history.back();
+          }}
+          isActive
+          style={{ marginRight: 16 }}
+        >
+          Cancel
+        </Button>
+        <Button inline buttonType="primary" onClick={this.handleSubmit.bind(this)} isActive={true}>
+          Publish
+        </Button>
+      </div>
+    );
+  }
+
+  renderFeatured() {
+    return (
+      <div style={{ marginTop: 16 }}>
+        <RadioButton
+          label={values.textIsThisAFeaturedNewsPost}
+          isActive={this.state.isFeatured}
+          options={[
+            { Label: 'Yes', Value: true, onChange: () => this.setState({ isFeatured: true }) },
+            { Label: 'No', Value: false, onChange: () => this.setState({ isFeatured: false }) },
+          ]}
+        />
+        <div className="genericInput-help" style={{ marginTop: 4 }}>
+          {values.textFeaturedNewsPostWillBeHighlighted}
+        </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>
+    );
+  }
+
+  renderSideForm() {
+    if (_.isEmpty(this.state.update)) {
+      return null;
+    }
+    if (this.state.success) {
+      return null;
+    }
+    return (
+      <OverlayPageSection className="pageSectionWrapper--newPopupSide">
+        <div>
+          <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+            <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>
+          <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+            <p className="newTopBarTitle text-sectionTitle">FEATURED</p>
+            {this.renderFeatured()}
+          </div>
+          <div className="padding-60 paddingBottom-40 bottomDivideBorder">
+            <p className="newTopBarTitle text-sectionTitle">DETAILS</p>
+            <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)} />
+              )}
+              <CheckBox
+                className="marginTop-16"
+                label="Allow comments"
+                isActive={this.state.allowComments}
+                onChange={() => {
+                  this.setState({ allowComments: !this.state.allowComments });
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </OverlayPageSection>
+    );
+  }
+
+  renderForm() {
+    if (this.state.success) {
+      return null;
+    }
+    if (_.isEmpty(this.state.update)) {
+      return (
+        <div className="padding-60 bottomPadding-40" style={{ textAlign: 'center' }}>
+          <FontAwesome style={{ fontSize: 32, color: COLOUR_BRANDING_OFF }} name="spinner fa-pulse fa-fw" />
+        </div>
+      );
+    }
+    return (
+      <div>
+        <div className="padding-60 bottomPadding-40">
+          <div className="newTopBar clearfix">
+            <p className="newTopBarTitle text-sectionTitle">{values.textNewsPost}</p>
+          </div>
+          {this.state.update.Publisher && (
+            <div className="newTopBar clearfix">
+              <span className="newTopBarTitle text-sectionTitle">
+                By <span className="text-brandingColour">{this.state.update.Publisher.Title}</span>
+              </span>
+            </div>
+          )}
+          <div className="marginTop-16 fontMedium text-dark" style={{ fontSize: 26 }}>
+            {this.state.update.Title}
+          </div>
+          {!_.isEmpty(this.state.update.Tags) && (
+            <div className="fontMedium marginBottom-8 text-light">
+              {_.map(this.state.update.Tags, (tag, index) => {
+                return (
+                  <span key={index} style={{ color: COLOUR_BRANDING_MAIN }}>
+                    {tag}
+                    {index !== this.state.update.Tags.length - 1 ? ', ' : ''}
+                  </span>
+                );
+              })}
+            </div>
+          )}
+          {!_.isEmpty(this.state.update.Images) &&
+            _.map(this.state.update.Images, (im, index) => {
+              return (
+                <div
+                  key={index}
+                  style={{
+                    height: 250,
+                    backgroundImage: `url(${im})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    marginBottom: 10,
+                    marginTop: 10,
+                  }}
+                />
+              );
+            })}
+          {_.isEmpty(this.state.update.Images) && <div className="fontRegular text-light">No image</div>}
+          <div className="marginTop-16 fontRegular text-dark fontSize-16" style={{ whiteSpace: 'pre-line' }}>
+            {this.state.update.Text}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <OverlayPage>
+        <OverlayPageContents noBottomButtons={this.state.success}>
+          <OverlayPageSection className="pageSectionWrapper--fixedPopupSize">
+            {this.renderForm()}
+            {this.renderSuccess()}
+          </OverlayPageSection>
+          {this.renderSideForm()}
+        </OverlayPageContents>
+        {!this.state.success && <OverlayPageBottomButtons>{this.renderSubmit()}</OverlayPageBottomButtons>}
+      </OverlayPage>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return { auth };
+};
+
+export default connect(mapStateToProps, { newsUpdate })(PublishAvailableNews);

package/src/session/index.js

@@ -0,0 +1,7 @@
+import { PlussCore } from '../feature.config';
+
+const { Session } = PlussCore;
+export const isTheBest = Session.isTheBest;
+export const validateAccess = Session.validateAccess;
+export const authedFunction = Session.authedFunction;
+export const checkLoggedIn = Session.checkLoggedIn;

package/src/webapi/eventActions.js

@@ -0,0 +1,18 @@
+import { getUrl } from './helper';
+import { authedFunction } from '../session';
+
+export const eventActions = {
+  getEvents: (site, time, includePast) => {
+    let query = { site };
+    if (time) {
+      query.time = time;
+    }
+    if (includePast) {
+      query.includePast = 'true';
+    }
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('events', 'get', query),
+    });
+  },
+};

package/src/webapi/helper.js

@@ -0,0 +1,4 @@
+import { PlussCore } from '../feature.config';
+
+const { Helper } = PlussCore;
+export const getUrl = Helper.getUrl;

package/src/webapi/index.js

@@ -0,0 +1,11 @@
+import { PlussCore } from '../feature.config';
+
+const { Apis } = PlussCore;
+export const stringActions = Apis.stringActions;
+export const analyticsActions = Apis.analyticsActions;
+export const fileActions = Apis.fileActions;
+export const userActions = Apis.userActions;
+export const typeActions = Apis.typeActions;
+
+export * from './eventActions';
+export * from './newsletterActions';

package/src/webapi/newsletterActions.js

@@ -0,0 +1,153 @@
+import _ from 'lodash';
+import { getUrl } from './helper';
+import { authedFunction } from '../session';
+import { values } from '../feature.config';
+
+export const newsletterActions = {
+  getRecent: (site, limit, maxTime, noFuture, tvMode) => {
+    const query = { site, limit, noFuture, tvMode };
+    if (maxTime) {
+      query.maxTime = maxTime;
+    }
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, 'recent', query),
+    });
+  },
+  getNewsletterEntries: (site, skip, count) => {
+    const query = { site, noHQ: true, noFilter: true };
+    if (skip) {
+      query.skip = skip;
+    }
+    if (count) {
+      query.count = count;
+    }
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, 'get', query),
+    });
+  },
+  recursiveGetNews: (site, results) => {
+    return new Promise((resolve, reject) => {
+      const resultsToUse = results || [];
+      newsletterActions.getNewsletterEntries(site, resultsToUse.length, 500).then((res) => {
+        const finalResult = _.concat(resultsToUse, res.data.items);
+        if (finalResult.length < res.data.totalCount) {
+          return resolve(newsletterActions.recursiveGetNews(site, finalResult));
+        }
+        return resolve(finalResult);
+      });
+    });
+  },
+  getNewsletterEntry: (id) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, `get/${id}`),
+    });
+  },
+  addOrEditNewsletterEntry: (data, site) => {
+    let url = getUrl(values.serviceKey, 'add');
+    if (data.RowId != null) {
+      url = getUrl(values.serviceKey, 'edit');
+    }
+    return authedFunction({
+      method: 'POST',
+      url,
+      data: {
+        site,
+        update: data,
+      },
+    });
+  },
+  deleteNewsletterEntry: (site, id) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl(values.serviceKey, 'remove'),
+      data: {
+        site,
+        id,
+      },
+    });
+  },
+  getPublishedEntries: (ids) => {
+    const query = {};
+    if (Array.isArray(ids)) {
+      query.ids = ids.join(',');
+    } else {
+      query.ids = ids;
+    }
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, 'content/specific', query),
+    });
+  },
+  getNewsletterSubmissions: (site) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, 'submissions/get', { site }),
+    });
+  },
+  getNewsletterSubmission: (id) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, `submissions/get/${id}`),
+    });
+  },
+  handleNewsletterSubmission: (site, id, action) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl(values.serviceKey, 'submissions/handle'),
+      data: {
+        site,
+        id,
+        action,
+      },
+    });
+  },
+  editNewsletterSubmission: (site, id, update) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl(values.serviceKey, 'editSubmission'),
+      data: {
+        site,
+        id,
+        update,
+      },
+    });
+  },
+  getSubmissionCount: (site) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, `submissions/count`, { site }),
+    });
+  },
+  getAvailableNews: (minTime, maxTime, count) => {
+    const query = {};
+    if (minTime) {
+      query.minTime = minTime;
+    }
+    if (maxTime) {
+      query.maxTime = maxTime;
+    }
+    if (count) {
+      query.count = count;
+    }
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, 'content/get', query),
+    });
+  },
+  getPublishedAvailableNews: (site, sourceId) => {
+    const query = {};
+    if (site) {
+      query.site = site;
+    }
+    if (sourceId) {
+      query.sourceId = sourceId;
+    }
+    return authedFunction({
+      method: 'GET',
+      url: getUrl(values.serviceKey, 'content/published', query),
+    });
+  },
+};