@capillarytech/creatives-library 8.0.147 → 8.0.149

package/components/BreadCrumbs/index.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+// import styled from 'styled-components';
+import { Link } from 'react-router';
+import _ from 'lodash';
+
+class BreadCrumbs extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.prepareBreadcrumbElement = this.prepareBreadcrumbElement.bind(this);
+    this.disabledBreadcrumb = this.disabledBreadcrumb.bind(this);
+  }
+
+  disabledBreadcrumb(e, location) {
+    if (location.disabled) {
+      e.preventDefault();
+    }
+  }
+
+  prepareBreadcrumbElement() {
+    const breadcrumbs = [];
+    _.forEach(this.props.locations, (location) => {
+      const titleText = (typeof location.text === 'string') ? location.text : location.text.props.defaultMessage;
+      const element = (
+        <Link
+          to={location.url}
+          key={titleText}
+          title={titleText}
+          onClick={(e) => this.disabledBreadcrumb(e, location)}
+        >
+          <span
+            className={location.disabled ? 'disabled-breadcrumb' : 'active-breadcrumb'}
+            disabled={location.disabled}
+          > {location.text}
+          </span>
+        </Link>
+      );
+      if (breadcrumbs.length !== 0) {
+        breadcrumbs.push(
+          <span
+            key={`${titleText}separator`}
+          > {this.props.separator ? this.props.separator : ' / '}
+          </span>
+        );
+      }
+      breadcrumbs.push(element);
+    });
+    return breadcrumbs;
+  }
+
+  render() {
+    return (
+      <div className="breadcrumbs-wrapper">
+        {this.prepareBreadcrumbElement()}
+      </div>
+    );
+  }
+}
+
+BreadCrumbs.propTypes = {
+  locations: PropTypes.array.isRequired,
+  separator: PropTypes.string,
+};
+
+export default BreadCrumbs;

package/components/BreadCrumbs/messages.js

@@ -0,0 +1,13 @@
+/*
+ * BreadCrumbs Messages
+ *
+ * This contains all the text for the BreadCrumbs component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.BreadCrumbs.header',
+    defaultMessage: 'This is the BreadCrumbs component !',
+  },
+});

package/components/CapTagList/index.js

@@ -0,0 +1,235 @@
+/**
+*
+* CapTagList
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+import { Tree, Input, Spin, Modal } from 'antd';
+import _ from 'lodash';
+// import { CapInput } from '@capillarytech/cap-react-ui-library/basic/input';
+import { injectIntl, intlShape } from 'react-intl';
+import { CapButton, CapPopover, CapSelect, CapInput } from '@capillarytech/cap-react-ui-library';
+import messages from './messages';
+const Search = Input.Search;
+const TreeNode = Tree.TreeNode;
+
+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, e) => {
+    
+    this.props.onContextChange(data);
+  };
+
+  handleDynamicDateChange = (data, e) => {
+    
+    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.props.onSelect(resultArray);
+    this.setState({showModal: false, dynamicDateValue: ''});
+  };
+
+  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((
+          <TreeNode title={val.name} key={key}>
+            {temp}
+          </TreeNode>
+        ));
+      } else if (searchString === '' || !searchString || ((val.name || '').toLowerCase().indexOf(searchString.toLowerCase()) !== -1)) {
+        const tempNode = (<TreeNode title={val.name} isLeaf key={key}></TreeNode>);
+        list.push(tempNode);
+      }
+    });
+    return list;
+  }
+
+  render() {
+    const tg = this.props.tags;
+    const options = [
+      {
+        value: "All",
+        label: this.props.intl.formatMessage(messages.all),
+      },
+      {
+        value: "Outbound",
+        label: this.props.intl.formatMessage(messages.outbound),
+      },
+      {
+        value: "Loyalty",
+        label: this.props.intl.formatMessage(messages.loyalty),
+      },
+    ];
+    return (
+      <div>
+        <CapPopover
+          visible={this.state.visible}
+          onVisibleChange={this.togglePopoverVisibility}
+          content={<div>
+            <Spin tip={this.props?.intl?.formatMessage(messages.gettingTags)} spinning={this.props.loading}>
+              <Search style={{ marginBottom: 8, width: '250px'}} placeholder={this.props?.intl?.formatMessage(messages.searchText)} 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> : ''}
+              <Tree
+                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)}
+              </Tree>
+            </Spin>
+          </div>}
+          trigger="click"
+          placement="bottomRight">
+          <CapButton icon="plus-circle-o" type="secondary">{this.props.label !== '' ? this.props.label : ''}</CapButton>
+        </CapPopover>
+        <Modal
+          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>
+        </Modal>
+      </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/components/CapTagList/messages.js

@@ -0,0 +1,45 @@
+/*
+ * CapTagList Messages
+ *
+ * This contains all the text for the CapTagList component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  "Ok": {
+    id: 'creatives.components.CapTagList.Ok',
+    defaultMessage: 'Ok',
+  },
+  "numberOfDaysBeforeExpiry": {
+    id: 'creatives.components.CapTagList.numberOfDaysBeforeExpiry',
+    defaultMessage: 'Number of days before expiry',
+  },
+  "Cancel": {
+    id: 'creatives.components.CapTagList.Cancel',
+    defaultMessage: 'Cancel',
+  },
+  "Dynamic Days before Expiry": {
+    id: 'creatives.components.CapTagList.dynamic_days_before_expiry',
+    defaultMessage: 'Dynamic days before expiry',
+  },
+  "all": {
+    id: 'creatives.components.CapTagList.all',
+    defaultMessage: 'All',
+  },
+  "outbound": {
+    id: 'creatives.components.CapTagList.outbound',
+    defaultMessage: 'Outbound',
+  },
+  "loyalty": {
+    id: 'creatives.components.CapTagList.loyalty',
+    defaultMessage: 'Loyalty',
+  },
+  "searchText": {
+    id: 'creatives.components.CapTagList.searchText',
+    defaultMessage: 'Search',
+  },
+  "gettingTags": {
+    id: 'creatives.components.CapTagList.gettingTags',
+    defaultMessage: "Getting tags...",
+  },
+});

package/components/Card/_customCard.scss

@@ -0,0 +1,40 @@
+.custom-card {
+  &:hover {
+    box-shadow: none !important;
+    border-color: #1D5B96 !important
+  }
+  .ant-card-body {
+    padding: 0px;
+    border-radius: 4px;
+
+    // &:hover {
+    //   border: solid 2px #1D5B96;
+    //   border-radius: 4px;
+    // }
+  }
+
+  .content-wrapper {
+    width: 100%;
+    height: 246px;
+    overflow: hidden;
+    // padding-left: 16px;
+    // padding-right: 8px;
+    // background-image: url('https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/475c8c1b8d07cf1d5e58.png');
+  }
+
+  .footer-wrapper {
+    width: 100%;
+   // height: 64px;
+  }
+
+  .seperator-line{
+    color: #e9e9e9;
+    border-style: solid;
+    border-bottom: none;
+  }
+  .footer-wrapper {
+    .footer-container {
+      margin-top: -14px;
+    }
+  }
+}

package/components/Card/index.js

@@ -0,0 +1,78 @@
+/**
+*
+* Card
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { Card } from 'antd';
+import './_customCard.scss';
+
+export 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) {
+    
+    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/components/Card/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RestrictionPlainInput test Test 1 should render default component when a retriction constant is passed 1`] = `
+<Card
+  className="custom-card"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  style={
+    Object {
+      "height": undefined,
+      "width": undefined,
+    }
+  }
+>
+  <div>
+    <div
+      className="content-wrapper"
+    />
+  </div>
+</Card>
+`;

package/components/Card/tests/index.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { CustomCard } from '../index';
+
+describe('RestrictionPlainInput test', () => {
+  let renderedComponent;
+
+  const renderFunc = () => {
+    renderedComponent = shallowWithIntl(
+      <CustomCard />
+        );
+  };
+
+  describe('Test 1', () => {
+    it('should render default component when a retriction constant is passed', () => {
+      renderFunc();
+      expect(renderedComponent).toMatchSnapshot();
+    });
+  });
+});

package/components/CardGrid/index.js

@@ -0,0 +1,71 @@
+/**
+*
+* CardGrid
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { Row, Col } from 'antd';
+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>
+        <div className={this.props.enablePagination ? 'pagination-container' : ''}>
+          <Row gutter={this.props.gutterSize}>
+            { this.props.listItem.length > 0 ? this.props.listItem.map( (item) => (
+              <Col 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>
+              </Col>
+            )) : ''}
+          </Row>
+        </div>
+      </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,
+};
+
+CardGrid.defaultProps = {
+  gutterSize: 16,
+  colNumber: 4,
+  className: '',
+};
+
+export default CardGrid;