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

package/src/components/InputGroup.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormGroup, FormControl, FormLabel, FormText } from 'react-bootstrap';
+import { COLOUR_RED } from '../colours';
+
+function InputGroup({ id, label, help, showError, required, ...props }) {
+  return (
+    <FormGroup controlId={id} validationState={showError ? 'error' : null}>
+      <FormLabel>
+        <span>{label}</span>
+        {required && <span style={{ color: COLOUR_RED, marginLeft: 5 }}>*</span>}
+      </FormLabel>
+      <FormControl {...props} />
+      {help && <FormText>{help}</FormText>}
+    </FormGroup>
+  );
+}
+
+export { InputGroup };

package/src/components/MakerPopup.js

@@ -0,0 +1,310 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Lottie from 'react-lottie';
+import _ from 'lodash';
+import { unauthedFunction } from '../session';
+import { Popup } from './Popup';
+import { GenericInput } from './GenericInput';
+import { Text } from './Text';
+import { Button } from './Button';
+import { DropdownInput } from './DropdownInput';
+import { typeActions, utilityActions } from '../apis';
+import Config from '../config';
+import { COLOUR_BRANDING_APP } from '../colours';
+import { getPluralOptions } from '../helper';
+
+class MakerPopup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.sizes = [
+      { Key: 'A3', Title: 'A3' },
+      { Key: 'A4', Title: 'A4' },
+      { Key: 'A5', Title: 'A5' },
+    ];
+    this.formats = [
+      { Key: 'pdf', Title: 'PDF' },
+      { Key: 'png', Title: 'PNG' },
+      { Key: 'jpg', Title: 'JPEG' },
+    ];
+
+    this.lottieAnimationUrl =
+      'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json';
+
+    this.state = {
+      ...this.props.initialData,
+      logo: null,
+      colour: null,
+      submitting: false,
+      loadingBranding: true,
+      asset: null,
+      selectedSize: 'A4',
+      selectedFormat: 'pdf',
+      lottieConfig: {
+        loop: true,
+        autoplay: true,
+        name: 'lottie-layout',
+      },
+    };
+  }
+
+  componentDidMount() {
+    this.getBranding();
+    this.getLottieConfig();
+  }
+
+  getBranding() {
+    typeActions.getSiteBranding(this.props.auth.site).then((res) => {
+      console.log(res.data);
+      this.setState({
+        loadingBranding: false,
+        siteName: res.data.Name,
+        colour: res.data.MainBrandingColour || COLOUR_BRANDING_APP,
+        logo: res.data.Logo || Config.env.logo,
+        headerType: res.data.HeaderType || 'white',
+      });
+    });
+  }
+
+  getLottieConfig() {
+    unauthedFunction({
+      method: 'GET',
+      url: this.lottieAnimationUrl,
+    }).then((res) => {
+      this.setState({
+        lottieConfig: {
+          ...this.state.lottieConfig,
+          animationData: res.data,
+        },
+      });
+    });
+  }
+
+  handleChange(key, value) {
+    this.setState({ [key]: value });
+  }
+
+  selectSize = (size) => {
+    this.setState({
+      selectedSize: size,
+    });
+  };
+
+  getSelectedSizeTitle = () => {
+    return _.find(this.sizes, (f) => {
+      return f.Key === this.state.selectedSize;
+    }).Title;
+  };
+
+  selectFormat = (format) => {
+    this.setState({
+      selectedFormat: format,
+    });
+  };
+
+  getSelectedFormatTitle = () => {
+    return _.find(this.formats, (f) => {
+      return f.Key === this.state.selectedFormat;
+    }).Title;
+  };
+
+  compileData = () => {
+    const result = {};
+    this.props.inputs.forEach((input) => {
+      result[input.key] = this.state[input.key];
+    });
+    result.colour = this.state.colour;
+    result.logo = this.state.logo;
+    result.headerType = this.state.headerType;
+    return { ...result, ...this.props.requestData };
+  };
+
+  compileRequestData = () => {
+    const result = {};
+
+    if (!this.props.hideFormat) {
+      result.format = this.state.selectedFormat;
+    }
+    if (!this.props.hideSize) {
+      result.size = this.state.selectedSize;
+    }
+    return { ...result, ...this.props.requestData, data: this.compileData() };
+  };
+
+  isReadyToSubmit = () => {
+    if (this.state.loadingBranding) {
+      return false;
+    }
+    if (this.state.submitting) {
+      return false;
+    }
+    return true;
+  };
+
+  onGenerateAsset = () => {
+    if (!this.isReadyToSubmit()) {
+      return;
+    }
+    const data = this.compileRequestData();
+    this.setState({
+      submitting: true,
+    });
+
+    utilityActions
+      .generateMake(this.props.templateId, data)
+      .then((res) => {
+        this.setState({
+          submitting: false,
+          asset: res.data.resultUrl,
+        });
+      })
+      .catch((err) => {
+        this.setState({
+          submitting: false,
+        });
+      });
+  };
+
+  downloadAsset = () => {
+    window.open(this.state.asset, '_blank');
+  };
+
+  getButtons() {
+    if (this.state.submitting) {
+      return [];
+    }
+    if (this.state.asset) {
+      return [
+        {
+          type: 'tertiary',
+          onClick: this.props.onClose,
+          isActive: true,
+          text: 'Done',
+        },
+      ];
+    }
+    return [
+      {
+        type: 'primary',
+        onClick: this.onGenerateAsset,
+        isActive: this.isReadyToSubmit(),
+        text: 'Create',
+      },
+      {
+        type: 'tertiary',
+        onClick: this.props.onClose,
+        isActive: true,
+        text: 'Cancel',
+      },
+    ];
+  }
+
+  renderInput(input) {
+    if (input.type === 'array') {
+      return (
+        <div className="marginTop-16">
+          <Text type="formLabel">{input.title}</Text>
+          <Text type="body">
+            {this.state[input.key].length} {getPluralOptions(this.state[input.key].length, 'entry', 'entries')}
+          </Text>
+        </div>
+      );
+    }
+    return (
+      <GenericInput
+        key={input.key}
+        id={`maker_${input.key}`}
+        type={input.type}
+        label={input.title}
+        value={this.state[input.key]}
+        onChange={(e) => this.setState({ [input.key]: e.target.value })}
+        alwaysShowLabel
+        disabled={input.readOnly}
+        placeholder={input.placeholder}
+      />
+    );
+  }
+
+  renderContent() {
+    if (this.state.submitting) {
+      return (
+        <div className="flex flex-column flex-center">
+          {this.state.lottieConfig.animationData && (
+            <Lottie
+              key="lottie-layout"
+              height={260}
+              width={260}
+              options={this.state.lottieConfig}
+              isClickToPauseDisabled
+            />
+          )}
+          <Text type="h3" className="marginTop-16">
+            Generating
+          </Text>
+        </div>
+      );
+    }
+    if (this.state.asset) {
+      return (
+        <div>
+          <Text type="h4">Your file is ready</Text>
+          <Button leftIcon="download" buttonType="primary" onClick={this.downloadAsset} isActive className="marginTop-16">
+            Download
+          </Button>
+        </div>
+      );
+    }
+    return (
+      <div>
+        {!this.props.hideSize && (
+          <DropdownInput
+            id="size"
+            label="Size"
+            placeholder="Size"
+            value={this.getSelectedSizeTitle()}
+            options={this.sizes}
+            onSelect={this.selectSize}
+          />
+        )}
+        {!this.props.hideFormat && (
+          <DropdownInput
+            id="format"
+            label="Format"
+            placeholder="Format"
+            value={this.getSelectedFormatTitle()}
+            options={this.formats}
+            onSelect={this.selectFormat}
+          />
+        )}
+        {this.props.inputs.map((input) => {
+          return this.renderInput(input);
+        })}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Popup
+        title={this.props.title}
+        buttons={this.getButtons()}
+        onClose={this.props.onClose}
+        hasPadding
+        minWidth={this.props.minWidth}
+        maxWidth={this.props.maxWidth}
+        minHeight={this.props.minHeight}
+        maxHeight={this.props.maxHeight}
+      >
+        {this.renderContent()}
+      </Popup>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return { auth: state.auth };
+};
+
+let exportObj = connect(mapStateToProps, {})(MakerPopup);
+
+export { exportObj as MakerPopup };

package/src/components/MoreMenu.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+class MoreMenu extends Component {
+  render() {
+    return (
+      <div className="moreMenu">
+        {this.props.options.map((ev, index) => {
+          if (ev != null) {
+            return (
+              <div className="moreMenu_option" key={ev.key} onClick={ev.onPress}>
+                {ev.text}
+              </div>
+            );
+          }
+          return null;
+        })}
+      </div>
+    );
+  }
+}
+
+export { MoreMenu };

package/src/components/OptionsSection.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { COLOUR_BRANDING_MAIN } from '../colours';
+import { SVGIcon } from './SVGIcon';
+import { Text } from './Text';
+
+class OptionsSection extends Component {
+  getSelectedOption() {
+    return _.find(this.props.options, (o) => this.props.selected === o.key);
+  }
+
+  getTitle() {
+    const selectedOption = this.getSelectedOption();
+    if (!selectedOption) {
+      return '';
+    }
+    return selectedOption.text;
+  }
+
+  renderIcon(o, isSelected) {
+    switch (o.iconType) {
+      case 'fa':
+        return <FontAwesomeIcon className="optionsButton_icon" icon={o.icon} />;
+      default:
+        return <SVGIcon icon={o.icon} colour={isSelected ? '#fff' : COLOUR_BRANDING_MAIN} />;
+    }
+  }
+
+  renderOptionButton(o) {
+    const isSelected = this.props.selected === o.key;
+    return (
+      <div
+        className={`optionsButton${isSelected ? ' optionsButton-selected' : ''}`}
+        key={o.key}
+        onClick={() => {
+          this.props.selectOption(o.key);
+        }}
+      >
+        <div className="optionsButton_iconContainer">{this.renderIcon(o, isSelected)}</div>
+        <Text type="formLabelSmall" className="optionsButton_text">
+          {o.text}
+        </Text>
+      </div>
+    );
+  }
+
+  renderContent() {
+    const selectedOption = this.getSelectedOption();
+    if (selectedOption && selectedOption.content) {
+      return selectedOption.content;
+    }
+    return this.props.children;
+  }
+
+  render() {
+    return (
+      <div className={`optionsSection${this.props.overflowButtons ? ' optionsSection-overflowButtons' : ''}`}>
+        <div className="optionsSection_banner">
+          <div className="optionsSection_banner_top">
+            <Text type="formTitleMedium" className="optionsSection_banner_top_title">
+              More Options
+            </Text>
+          </div>
+          <div className="optionsSection_banner_buttonSection">
+            {this.props.options.map((o) => {
+              return this.renderOptionButton(o);
+            })}
+          </div>
+        </div>
+        <div className="optionsContent">
+          <div className="optionsContent_box">
+            <div className="optionsContent_box_top">
+              <Text type="formTitleSmall">{this.getTitle()}</Text>
+            </div>
+            {this.renderContent()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export { OptionsSection };

package/src/components/OverlayPage.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+
+class OverlayPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: 0,
+      height: 0,
+    };
+    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+  }
+
+  componentDidMount() {
+    this.updateWindowDimensions();
+    window.addEventListener('resize', this.updateWindowDimensions);
+    // setTimeout(() => {
+    //     this.setState({ opacity: 1 });
+    // }, 100);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateWindowDimensions);
+  }
+
+  updateWindowDimensions() {
+    this.setState({ width: window.innerWidth, height: window.innerHeight });
+  }
+
+  renderContent() {
+    if (this.props.fullPage) {
+      return (
+        <div className="overlayPage-full" style={this.props.fullPageStyle}>
+          {this.props.children}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+
+  render() {
+    return (
+      <div style={{ ...styles.pageWrapper, ...this.props.style }}>
+        <div
+          style={{
+            ...styles.backgroundOverlay,
+            ...this.props.backgroundStyle,
+          }}
+        />
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  pageWrapper: {
+    position: 'fixed',
+    zIndex: 100,
+    top: 0,
+    left: 0,
+    height: '100vh',
+  },
+  backgroundOverlay: {
+    position: 'fixed',
+    width: '100vw',
+    height: '100vh',
+    backgroundColor: '#3f4264',
+    top: 0,
+    left: 0,
+    zIndex: -1,
+  },
+};
+
+export { OverlayPage };

package/src/components/OverlayPageBottomButtons.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { LINEGREY } from '../colours';
+
+class OverlayPageBottomButtons extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      opacity: 0,
+    };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({ opacity: 1 });
+    }, 100);
+  }
+
+  render() {
+    return (
+      <div
+        className="animateOpacity"
+        style={{
+          ...styles.wrapper,
+          opacity: this.state.opacity,
+          ...this.props.style,
+        }}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  wrapper: {
+    padding: 12,
+    paddingRight: 24,
+    width: '100%',
+    maxWidth: '100vw',
+    backgroundColor: '#fff',
+    borderTop: '1px solid',
+    borderTopColor: LINEGREY,
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+};
+
+export { OverlayPageBottomButtons };

package/src/components/OverlayPageContents.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+
+class OverlayPageContents extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      opacity: 0,
+    };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({ opacity: 1 });
+    }, 100);
+  }
+
+  render() {
+    return (
+      <div
+        id={this.props.id}
+        className="animateOpacity"
+        style={{
+          ...styles.wrapper,
+          height: this.props.noBottomButtons ? '100%' : 'calc(100% - 57px)',
+          opacity: this.state.opacity,
+          ...this.props.style,
+        }}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  wrapper: {
+    clear: 'both',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    overflowX: 'auto',
+    fontSize: 0,
+    width: 'fit-content',
+    maxWidth: '100vw',
+    opacity: 0,
+  },
+};
+
+export { OverlayPageContents };

package/src/components/OverlayPageSection.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+class OverlayPageSection extends Component {
+  getClassName() {
+    if (this.props.className) {
+      return 'pageSectionWrapper ' + this.props.className;
+    }
+    return 'pageSectionWrapper';
+  }
+
+  render() {
+    return (
+      <div
+        {...this.props}
+        className={this.getClassName()}
+        style={{
+          ...styles.wrapper,
+          ...this.props.style,
+        }}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  wrapper: {
+    /* height: '100%',
+        overflowY: 'auto',
+        backgroundColor: '#fff',
+        padding: 24,
+        display: 'inline-block',
+        verticalAlign: 'top' */
+  },
+};
+
+export { OverlayPageSection };

package/src/components/P60Icon.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+
+class P60Icon extends Component {
+  state = {
+    doublePaths: ['add-image', 'add-circle', 'facility', 'news'],
+    triplePaths: [],
+  };
+
+  renderIconPaths() {
+    if (_.includes(this.state.doublePaths, this.props.icon)) {
+      return (
+        <span>
+          <span className="path1" />
+          <span className={`path2${this.props.icon !== 'add-image' ? ' text-white' : ''}`} />
+        </span>
+      );
+    }
+    if (_.includes(this.state.triplePaths, this.props.icon)) {
+      return (
+        <span>
+          <span className="path1" />
+          <span className="path2" />
+          <span className="path3" />
+        </span>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    return (
+      <div {...this.props} className={`${this.props.className} p60icon-${this.props.icon}`}>
+        {this.renderIconPaths()}
+      </div>
+    );
+  }
+}
+
+export { P60Icon };

package/src/components/PageTitle.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class PageTitle extends Component {
+  render() {
+    return (
+      <p className="managingPageTitle" {...this.props}>
+        {this.props.children}
+      </p>
+    );
+  }
+}
+
+export { PageTitle };