@capillarytech/creatives-library 2.0.81 → 2.0.83

package/v2Components/CapTagList/index.js

@@ -0,0 +1,232 @@
+/**
+*
+* CapTagList
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+import { CapSpin, CapModal, CapButton, CapPopover, CapInput, CapTree, CapSelect } from '@capillarytech/cap-ui-library';
+
+import _ from 'lodash';
+import { injectIntl, intlShape } from 'react-intl';
+import messages from './messages';
+
+const {Search} = CapInput;
+const {CapTreeNode} = CapTree;
+class CapTagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tagValue: '',
+      expandedKeys: [],
+      searchValue: '',
+      autoExpandParent: true,
+      visible: false,
+      dynamicDateValue: '',
+      showModal: false,
+    };
+    this.renderTags = this.renderTags.bind(this);
+    this.getSearchedExpandedKeys = this.getSearchedExpandedKeys.bind(this);
+  }
+
+  onChange = (e) => {
+    const value = e.target.value;
+    let expandedKeys = this.getSearchedExpandedKeys(this.props.tags, value);
+    if (value === '') {
+      expandedKeys = [];
+    }
+    this.setState({
+      expandedKeys,
+      searchValue: value,
+      autoExpandParent: true,
+    });
+  };
+  onExpand = (expandedKeys, info) => {
+    this.handleOnExpand(info.node.props.eventKey);
+  };
+
+  getSearchedExpandedKeys(tags, value) {
+    let list = [];
+    _.forEach(tags, (val, key) => {
+      if (_.has(val, 'subtags')) {
+        if (val.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
+          list.push(key);
+        }
+        const temp = this.getSearchedExpandedKeys(val.subtags, value);
+        list = list.concat(temp);
+      } else if (val.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
+        list.push(key);
+      }
+    });
+    return list;
+  }
+
+  handleOnChange = (data) => {
+    this.props.onContextChange(data);
+  };
+
+  handleDynamicDateChange = (data) => {
+    this.setState({dynamicDateValue: data.target.value});
+  };
+
+  handleOk = () => {
+    const days = this.state.dynamicDateValue;
+    let tagValue = this.state.tagValue;
+    tagValue = tagValue.replace("(N)", `${days}`);
+    const resultArray = [];
+    resultArray.push(tagValue);
+    this.setState({showModal: false, dynamicDateValue: ''});
+    this.props.onSelect(resultArray);
+  };
+
+  handleCancel = () => {
+    this.setState({showModal: false, dynamicDateValue: ''});
+  };
+
+  checkIfDynamicTag = (tag) => {
+    const regex = /dynamic_expiry_date_after_\(N\)_days.FORMAT_\d/g;
+    const match = regex.exec(tag);
+    if (match !== null) {
+      return true;
+    }
+    return false;
+  };
+
+  handleOnSelect = (selectedKeys, info) => {
+    if (selectedKeys.length > 0) {
+      if (info && info.selectedNodes && info.selectedNodes.length > 0 && info.selectedNodes[0].props.isLeaf) {
+        this.setState({tagValue: selectedKeys[0]});
+        const ifDynamicTag = this.checkIfDynamicTag(selectedKeys[0]);
+        if (ifDynamicTag) {
+          this.renderDynamicTagFlow();
+        } else {
+          this.props.onSelect(selectedKeys, info);
+          this.setState({visible: false});
+        }
+      } else if (info && info.selectedNodes && info.selectedNodes.length > 0 && !info.selectedNodes[0].props.isLeaf) {
+        this.handleOnExpand(selectedKeys[0]);
+      }
+    }
+  };
+
+  handleOnExpand = (key) => {
+    const expandedKeys = this.state.expandedKeys.slice();
+    const index = _.indexOf(expandedKeys, key);
+    if (index !== -1) {
+      expandedKeys.splice(index, 1);
+    } else {
+      expandedKeys.push(key);
+    }
+    this.setState({expandedKeys, autoExpandParent: false});
+  };
+  togglePopoverVisibility = (visible) => {
+    this.setState({visible});
+  };
+
+  renderDynamicTagFlow = () => {
+    this.setState({showModal: true, visible: false});
+  };
+
+  renderTags(tags, searchString) {
+    const list = [];
+    _.forEach(tags, (val, key) => {
+      let supportedTagsString = '';
+      _.forEach(val.supportedTags, (supportedTag) => {
+        supportedTagsString += `${supportedTag} ,`;
+      });
+      supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
+      if (_.has(val, 'subtags')) {
+        const temp = this.renderTags(val.subtags);
+        list.push((
+          <CapTreeNode title={val.name} key={key}>
+            {temp}
+          </CapTreeNode>
+        ));
+      } else if (searchString === '' || !searchString || val.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1) {
+        const tempNode = (<CapTreeNode title={val.name} isLeaf key={key}></CapTreeNode>);
+        list.push(tempNode);
+      }
+    });
+    return list;
+  }
+
+  render() {
+    const tg = this.props.tags;
+    const options = [
+      {
+        value: "All",
+        label: "All",
+        key: 'all',
+      },
+      {
+        value: "Outbound",
+        label: "Outbound",
+        key: 'outbound',
+      },
+      {
+        value: "Loyalty",
+        label: "Loyalty",
+        key: 'loyalty',
+      },
+    ];
+    return (
+      <div>
+        <CapPopover
+          visible={this.state.visible}
+          onVisibleChange={this.togglePopoverVisibility}
+          content={<div>
+            <CapSpin tip="Getting tags..." spinning={this.props.loading}>
+              <Search style={{ marginBottom: 8, width: '250px'}} placeholder="Search" onChange={this.onChange} />
+              {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
+              </CapSelect> : ''}
+              <CapTree
+                styling={{height: '350px', overflow: 'auto'}}
+                onSelect={this.handleOnSelect}
+                selectedKeys={this.state.tagValue}
+                expandedKeys={this.state.expandedKeys}
+                autoExpandParent={this.state.autoExpandParent}
+                onExpand={this.onExpand}
+              >
+                {this.renderTags(tg, this.state.searchValue)}
+              </CapTree>
+            </CapSpin>
+          </div>}
+          trigger="click"
+          placement="bottomRight">
+          <CapButton isAddBtn type="flat">{this.props.label !== '' ? this.props.label : ''}</CapButton>
+        </CapPopover>
+        <CapModal
+          visible={this.state.showModal}
+          title={this.props.intl.formatMessage(messages["Dynamic Days before Expiry"])}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          footer={[
+            <CapButton key="back" onClick={this.handleCancel}>{this.props.intl.formatMessage(messages.Cancel)}</CapButton>,
+            <CapButton key="submit" type="primary" id="delete-version" onClick={this.handleOk}>
+              {this.props.intl.formatMessage(messages.Ok)}
+            </CapButton>,
+          ]}
+        >
+          <p>{this.props.intl.formatMessage(messages.numberOfDaysBeforeExpiry)}</p>
+          <CapInput onChange={this.handleDynamicDateChange} value={this.state.dynamicDateValue}></CapInput>
+        </CapModal>
+      </div>
+    );
+  }
+}
+
+CapTagList.propTypes = {
+  tags: PropTypes.object,
+  onSelect: PropTypes.func,
+  label: PropTypes.string,
+  onContextChange: PropTypes.func,
+  loading: PropTypes.bool,
+  moduleFilterEnabled: PropTypes.bool,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CapTagList);

package/v2Components/CapTagList/messages.js

@@ -0,0 +1,25 @@
+/*
+ * CapTagList Messages
+ *
+ * This contains all the text for the CapTagList component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  Ok: {
+    id: 'app.components.CapTagList.Ok',
+    defaultMessage: 'Ok',
+  },
+  numberOfDaysBeforeExpiry: {
+    id: 'app.components.CapTagList.numberOfDaysBeforeExpiry',
+    defaultMessage: 'Number of days before expiry',
+  },
+  Cancel: {
+    id: 'app.components.CapTagList.Cancel',
+    defaultMessage: 'Cancel',
+  },
+  "Dynamic Days before Expiry": {
+    id: 'app.components.CapTagList.dynamic_days_before_expiry',
+    defaultMessage: 'Dynamic Days before Expiry',
+  },
+});

package/{containers/TemplatesV2 → v2Components/CapTagList}/tests/index.test.js

@@ -1,9 +1,9 @@
 // import React from 'react';
 // import { shallow } from 'enzyme';
 
-// import { TemplatesV2 } from '../index';
+// import CapTagList from '../index';
 
-describe('<TemplatesV2 />', () => {
+describe('<CapTagList />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(false);
   });

package/v2Components/Card/_customCard.scss

@@ -0,0 +1,27 @@
+.custom-card {
+  &:hover {
+    box-shadow: none !important;
+    border-color: #1D5B96 !important
+  }
+  .ant-card-body {
+    padding: 0px;
+    border-radius: 4px;
+  }
+
+  .content-wrapper {
+    width: 100%;
+    height: 246px;
+    overflow: hidden;
+  }
+
+  .footer-wrapper {
+    width: 100%;
+   // height: 64px;
+  }
+
+  .seperator-line{
+    color: #e9e9e9;
+    border-style: solid;
+    border-bottom: none;
+  }
+}

package/v2Components/Card/index.js

@@ -0,0 +1,78 @@
+/**
+*
+* Card
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { Card } from 'antd';
+import './_customCard.scss';
+
+class CustomCard extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.handleMouseHover = this.handleMouseHover.bind(this);
+    this.handleMouseClick = this.handleMouseClick.bind(this);
+    this.state = {
+      isHovering: false,
+      isClicked: false,
+    };
+  }
+
+  handleMouseClick() {
+    this.setState(this.toggleClickedState);
+    this.props.onClick(!this.state.isClicked, this.props.id);
+  }
+
+  toggleClickedState(state) {
+    return {
+      isClicked: !state.isClicked,
+    };
+  }
+
+  handleMouseHover(data) {
+    console.log('hover mouse data', data);
+    this.setState({isHovering: data});
+    this.props.onHover(!this.state.isHovering, this.props.id);
+  }
+
+  toggleHoverState(state) {
+    return {
+      isHovering: !state.isHovering,
+    };
+  }
+
+  render() {
+    return (
+      <Card
+        className="custom-card"
+        id={this.props.id}
+        title={this.props.title}
+        style={{ width: this.props.width, height: this.props.height }}
+        onMouseEnter={() => this.handleMouseHover(true)}
+        onClick={this.handleMouseClick}
+        onMouseLeave={() => this.handleMouseHover(false)}>
+        <div>
+          <div className="content-wrapper">{this.props.content}</div>
+          {this.props.footer ? <hr className="seperator-line" /> : ''}
+          {this.props.footer ? <div className="footer-wrapper">{this.props.footer}</div> : ''}
+        </div>
+      </Card>
+    );
+  }
+}
+
+CustomCard.propTypes = {
+  content: PropTypes.element.isRequired,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  footer: PropTypes.element,
+  title: PropTypes.string,
+  onHover: PropTypes.func,
+  onClick: PropTypes.func,
+  id: PropTypes.string.isRequired,
+};
+
+export default CustomCard;

package/{containers/WeChat → v2Components/Card}/tests/index.test.js

@@ -1,9 +1,9 @@
 // import React from 'react';
 // import { shallow } from 'enzyme';
 
-// import { WeChat } from '../index';
+// import Card from '../index';
 
-describe('<WeChat />', () => {
+describe('<Card />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(false);
   });

package/v2Components/CardGrid/index.js

@@ -0,0 +1,77 @@
+/**
+*
+* CardGrid
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import {CapSpin, CapRow, CapColumn} from '@capillarytech/cap-ui-library';
+import CustomCard from '../Card';
+
+class CardGrid extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.handleOnItemHover = this.handleOnItemHover.bind(this);
+    this.handleOnItemClick = this.handleOnItemClick.bind(this);
+    this.delayTimer = 0;
+  }
+
+  handleOnItemHover(state, id) {
+    this.delay(() => {
+      this.props.onHoverItem(state, id);
+    }, 200);
+  }
+
+  delay(callback, ms) {
+    clearTimeout(this.delayTimer);
+    this.delayTimer = setTimeout(callback, ms);
+  }
+
+  handleOnItemClick(state, id) {
+    this.props.onItemClick(state, id);
+  }
+
+  render() {
+    return (
+      <div className={this.props.className}>
+        <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
+        <CapSpin spinning={this.props.isLoading} tip={this.props.loadingTip}>
+          <div className={this.props.enablePagination ? 'pagination-container' : ''}>
+            <CapRow gutter={this.props.gutterSize}>
+              { this.props.listItem.length > 0 ? this.props.listItem.map( (item) => (
+                <CapColumn style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>
+                  <CustomCard id={item.id} onHover={this.handleOnItemHover} onClick={this.handleOnItemClick} content={item.content} footer={item.footer} height={item.footer ? "312px" : "258px"}></CustomCard>
+                </CapColumn>
+              )) : ''}
+            </CapRow>
+          </div>
+        </CapSpin>
+
+      </div>
+    );
+  }
+}
+
+CardGrid.propTypes = {
+  listItem: PropTypes.array.isRequired,
+  filterContent: PropTypes.element,
+  colNumber: PropTypes.number,
+  gutterSize: PropTypes.number,
+  onHoverItem: PropTypes.func,
+  onItemClick: PropTypes.func,
+  className: PropTypes.string,
+  enablePagination: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  loadingTip: PropTypes.string,
+};
+
+CardGrid.defaultProps = {
+  gutterSize: 16,
+  colNumber: 4,
+  className: '',
+  isLoading: false,
+};
+
+export default CardGrid;

package/{containers/EmailWrapper → v2Components/CardGrid}/tests/index.test.js

@@ -1,9 +1,9 @@
 // import React from 'react';
 // import { shallow } from 'enzyme';
 
-// import { EmailWrapper } from '../index';
+// import CardGrid from '../index';
 
-describe('<EmailWrapper />', () => {
+describe('<CardGrid />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(false);
   });