@plusscommunities/pluss-core-web 1.0.5 → 1.0.6

package/src/components/MakerPopup.js

@@ -0,0 +1,300 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Lottie } from '@crello/react-lottie';
+import _ from 'lodash';
+import { unauthedFunction } from '../session';
+import { Popup } from './Popup';
+import { GenericInput } from './GenericInput';
+import { Text } from './';
+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.state = {
+      ...this.props.initialData,
+      logo: null,
+      colour: null,
+      submitting: false,
+      loadingBranding: true,
+      asset: null,
+      selectedSize: 'A4',
+      selectedFormat: 'pdf',
+      lottieConfig: {
+        path: 'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json',
+        loop: 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.state.lottieConfig.path,
+    }).then((res) => {
+      this.setState({
+        lottieConfig: {
+          ...this.state.lottieConfig,
+          path: undefined,
+          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">
+          <Lottie key="lottie-layout" height="260px" width="260px" config={this.state.lottieConfig} />
+          <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/OptionsSection.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { COLOUR_BRANDING_MAIN } from '../colours';
+import { SVGIcon } from './SVGIcon';
+import { Text } from './';
+
+class OptionsSection extends Component {
+  getTitle() {
+    const selectedOption = _.find(this.props.options, (o) => this.props.selected === o.key);
+    if (!selectedOption) {
+      return '';
+    }
+    return selectedOption.text;
+  }
+
+  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">
+          <SVGIcon icon={o.icon} colour={isSelected ? '#fff' : COLOUR_BRANDING_MAIN} />
+        </div>
+        <Text type="formLabelSmall" className="optionsButton_text">
+          {o.text}
+        </Text>
+      </div>
+    );
+  }
+
+  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.props.children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export { OptionsSection };

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/ProfilePic.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import Config from '../config';
+import getAppColourFromState from '../helper/colours.js/getAppColourFromState';
+
+class ProfilePicComponent extends Component {
+  render() {
+    return (
+      <div
+        className={this.props.className}
+        style={{
+          width: this.props.size || 30,
+          height: this.props.size || 30,
+          borderRadius: this.props.size / 2 || 15,
+          backgroundColor: this.props.colourBrandingApp,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundImage: `url(${!_.isEmpty(this.props.image) ? this.props.image : Config.env.defaultProfileImage})`,
+          ...this.props.style,
+        }}
+        alt="Profile Pic"
+      ></div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    colourBrandingApp: getAppColourFromState(state),
+  };
+};
+
+const ProfilePic = connect(mapStateToProps, {})(ProfilePicComponent);
+export { ProfilePic };

package/src/components/Reactions.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { Text } from './Text';
+
+const getReactions = () => {
+  return [
+    {
+      key: 'heart',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/heart.png',
+    },
+    {
+      key: 'smile',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/smile.png',
+    },
+    {
+      key: 'sad',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/sad.png',
+    },
+    {
+      key: 'party',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/party.png',
+    },
+  ];
+};
+
+class Reactions extends Component {
+  state = {
+    reactions: getReactions(),
+  };
+
+  getReaction(key) {
+    if (this.props.reactions) {
+      if (!this.props.reactions[key]) {
+        return 0;
+      }
+      return this.props.reactions[key];
+    }
+    if (!this.props.entity) {
+      return 0;
+    }
+    if (!this.props.entity.Reactions) {
+      return 0;
+    }
+    if (!this.props.entity.Reactions[key]) {
+      return 0;
+    }
+    return Object.keys(this.props.entity.Reactions[key]).length;
+  }
+
+  renderReactions() {
+    return this.state.reactions.map((r, i) => {
+      return (
+        <div className="polloverview_section" key={r.key}>
+          <img src={r.icon} className="polloverview_iconImage" alt={r.key} />
+          <div className="polloverview_right">
+            <p className="polloverview_count">{this.getReaction(r.key)}</p>
+          </div>
+        </div>
+      );
+    });
+  }
+
+  render() {
+    if (this.props.compact) {
+      return <div className="compactreactions">{this.renderReactions()}</div>;
+    }
+    return (
+      <div>
+        <Text type="formTitleSmall" className="marginBottom-16">
+          Reactions
+        </Text>
+        <div className="polloverview">{this.renderReactions()}</div>
+      </div>
+    );
+  }
+}
+
+export { Reactions };