@capillarytech/creatives-library 8.0.136 → 8.0.137-alpha.0

package/components/CapTagList/index.js

@@ -1,235 +0,0 @@
-/**
-*
-* 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

@@ -1,45 +0,0 @@
-/*
- * 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

@@ -1,40 +0,0 @@
-.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

@@ -1,78 +0,0 @@
-/**
-*
-* 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

@@ -1,22 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-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

@@ -1,71 +0,0 @@
-/**
-*
-* 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;