@capillarytech/creatives-library 8.0.135 → 8.0.136-alpha.1

package/v2Components/CapTagList/index.js

@@ -30,15 +30,8 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import messages from './messages';
 import { makeSelectLoyaltyPromotionDisplay } from '../../v2Containers/Cap/selectors';
-import { CARD_RELATED_TAGS, HOSPITALITY_RELATED_TAGS, CUSTOMER_BARCODE_TAG } from '../../containers/App/constants';
+import { CARD_RELATED_TAGS, HOSPITALITY_RELATED_TAGS, CUSTOMER_BARCODE_TAG, GET_TRANSLATION_MAPPED ,JAPANESE_HELP_TEXT, TAG_TRANSLATION_DOC} from '../../constants/unified';
 import { hasCardBasedScope, hasCustomerBarcodeFeatureEnabled, hasHospitalityBasedScope } from '../../utils/common';
-
-import {
-  GET_TRANSLATION_MAPPED,
-  JAPANESE_HELP_TEXT,
-  TAG_TRANSLATION_DOC,
-  STRING,
-} from "../../containers/TagList/constants";
 import { EMAIL, JP_LOCALE_HIDE_FEATURE, LOYALTY } from '../../v2Containers/App/constants';
 import { hidingDateTagsForJpLocale } from '../../v2Containers/TagList/utils';
 
@@ -132,9 +125,10 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   getSearchedExpandedKeys(tags, value = '') {
     let list = [];
     _.forEach(tags, (val = {}, key) => {
-      const tagName = typeof val?.name === STRING
-        ? _.toLower(_.get(val, "name", ""))
-        : _.toLower(_.get(val, "name.props.defaultMessage", ""));
+      const tagName =
+        typeof val?.name === 'string'
+          ? _.toLower(_.get(val, "name", ""))
+          : _.toLower(_.get(val, "name.props.defaultMessage", ""));
       const tagNameWithoutUnderscore = tagName.replace(/_/g, " ");
       const searchStringLower = _.toLower(value);
       if (_.has(val, "subtags")) {
@@ -267,9 +261,10 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      const tagName = typeof val?.name === STRING
-        ? _.toLower(_.get(val, "name", ""))
-        : _.toLower(_.get(val, "name.props.defaultMessage", ""));
+      const tagName =
+        typeof val?.name === 'string'
+          ? _.toLower(_.get(val, "name", ""))
+          : _.toLower(_.get(val, "name.props.defaultMessage", ""));
       const tagNameWithoutUnderscore = tagName.replace(/_/g, " ");
       const searchStringLower = _.toLower(searchString);
       const tagContainsSearchedString = searchStringLower

package/v2Components/Carousel/style.scss

@@ -26,7 +26,7 @@
     text-align: center;
     width: 120px !important;
     border-radius: 12px;
-    background-color: $CAP_G09,
+    background-color: $CAP_G09;
   }
   
   .ant-carousel .slick-slide {

package/v2Components/EmailMobilePreview/index.js

@@ -19,8 +19,8 @@ import messages from '../EmailPreviewV2/messages';
 import './index.scss';
 import mobileBody from '../../assets/DeviceForEmail.png';
 import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
-import {selectTemplateContent} from '../../containers/Templates/selectors';
-import * as templateActions from '../../containers/Templates/actions';
+import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
+import * as templateActions from '../../v2Containers/Templates/actions';
 
 const deviceAspectRatio = {
   mobile: {

package/v2Components/FormBuilder/index.js

@@ -53,9 +53,9 @@ import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED,
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
 import { OUTBOUND } from './constants';
-import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
+import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
 import moment from 'moment';
-import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
+import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../constants/unified';
 import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';

package/v2Components/TemplatePreview/index.js

@@ -32,10 +32,11 @@ import {
   RCS,
   ZALO,
   INAPP,
+  VIBER, 
+  FACEBOOK,
   MOBILE_PUSH
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
-import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
 import inAppMobileAndroidModal from './assets/images/inapp_mobile_android_modal.svg';
 import inAppMobileAndroidTop from './assets/images/inapp_mobile_android_top.svg';

package/v2Containers/Cap/tests/saga.test.js

@@ -36,7 +36,7 @@ import {
   CREATE_CENTRAL_COMMS_META_ID_REQUEST,
 } from '../constants';
 import { callback, error, error2, videoConfigData } from '../../mockdata';
-import { LOGOUT_FAILURE, LOGOUT_REQUEST, LOGOUT_SUCCESS } from '../../../containers/Cap/constants';
+import { LOGOUT_FAILURE, LOGOUT_SUCCESS } from '../../../constants/unified';
 
 
 

package/v2Containers/Email/index.js

@@ -37,7 +37,7 @@ import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 import { gtmPush } from '../../utils/gtmTrackers';
 const {CapCustomCardList} = CapCustomCard;
 import {storeS3FileSizeDetails, CREATIVES_S3_ASSET_FILESIZES} from '../../utils/cdnTransformation';
-import { CUSTOMER_BARCODE_TAG } from '../../containers/App/constants';
+import { CUSTOMER_BARCODE_TAG } from '../../constants/unified';
 import injectReducer from '../../utils/injectReducer';
 import v2EmailReducer from './reducer';
 import { v2EmailSagas } from './sagas';

package/v2Containers/FTP/index.js

@@ -29,7 +29,7 @@ import { makeSelectLoyaltyPromotionDisplay, setInjectedTags } from '../Cap/selec
 import withCreatives from '../../hoc/withCreatives';
 import messages from './messages';
 import './_FTP.scss';
-import * as globalActions from '../../containers/Cap/actions';
+import * as globalActions from '../Cap/actions';
 import { TagList } from '../TagList';
 import { NO_COMMUNICATION, CREATE, EDIT, PREVIEW } from '../App/constants';
 import { getTreeStructuredTags } from '../../utils/common';

package/v2Containers/Line/Container/Text/index.js

@@ -17,7 +17,7 @@ import withStyles from '../../../../hoc/withStyles';
 import globalMessages from '../../../Cap/messages';
 import { validateTags } from '../../../../utils/tagValidations';
 import moment from 'moment';
-import { GET_TRANSLATION_MAPPED } from '../../../../containers/TagList/constants';
+import { GET_TRANSLATION_MAPPED } from '../../../../constants/unified';
 
 const { TextArea } = CapInput;
 const {CapCustomCardList} = CapCustomCard;

package/v2Containers/Sms/Create/index.js

@@ -18,13 +18,13 @@ import './_smsCreate.scss';
 import FormBuilder from '../../../v2Components/FormBuilder';
 import * as actions from './actions';
 import messages from './messages';
-import * as charCount from '../../../utils/smsCharCount';
+import * as charCount from '../../../legacy/smsCharCount'; //check if we can copy charCount to  smsCharCountV2
 import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import {getMessageObject} from '../../../utils/messageUtils';
 import { gtmPush } from '../../../utils/gtmTrackers';
 import * as creativesContainerActions from '../../CreativesContainer/actions';
 import {SMS} from '../../CreativesContainer/constants';
-// import callNativeEvent from '../../../utils/callNativeEvent';
+// import callNativeEvent from '../../../legacy/callNativeEvent';
 import {showError} from '../commonMethods';
 import withCreatives from '../../../hoc/withCreatives';
 import { GA } from '@capillarytech/cap-ui-utils';

package/v2Containers/Sms/Edit/index.js

@@ -24,7 +24,7 @@ import messages from './messages';
 import {getMessageObject} from '../../../utils/messageUtils';
 import { gtmPush } from '../../../utils/gtmTrackers';
 import * as creativesContainerActions from '../../CreativesContainer/actions';
-// import callNativeEvent from '../../../utils/callNativeEvent';
+// import callNativeEvent from '../../../legacy/callNativeEvent';
 import {showError} from '../commonMethods';
 import withCreatives from '../../../hoc/withCreatives';
 import { EDIT, TRACK_EDIT_SMS } from '../../App/constants';

package/v2Containers/TagList/index.js

@@ -28,7 +28,7 @@ import {
 } from '../../utils/common';
 import {
   GIFT_VOUCHER_RELATED_TAGS, PROMO_ENGINE_RELATED_TAGS, BADGES_RELATED_TAGS, BADGES_ENROLL, BADGES_ISSUE,
-} from '../../containers/App/constants';
+} from '../../constants/unified';
 
 const {TreeNode} = Tree;
 

package/v2Containers/TagList/utils.js

@@ -1,4 +1,4 @@
-import { JAPANESE_HIDE_DATE_TAGS } from "../../containers/TagList/constants";
+import { JAPANESE_HIDE_DATE_TAGS } from "../../constants/unified";
 
 
 export const hidingDateTagsForJpLocale = (hideDateTagsForJpLocale, val, list, value) => {

package/v2Containers/Templates/index.js

@@ -104,7 +104,7 @@ import {
   CREATE,
 } from '../App/constants';
 import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL} from './constants';
-import { COPY_OF } from '../../containers/App/constants';
+import { COPY_OF } from '../../constants/unified';
 import {
   STATUS_OPTIONS,
   CATEGORY,

package/v2Containers/Templates/sagas.js

@@ -6,7 +6,7 @@ import get from 'lodash/get';
 import * as Api from '../../services/api';
 import * as types from './constants';
 import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
-import { COPY_OF } from '../../containers/App/constants';
+import { COPY_OF } from '../../constants/unified';
 import { ZALO_TEMPLATE_INFO_REQUEST } from '../Zalo/constants';
 import { getTemplateInfoById } from '../Zalo/saga';
 import { watchCreateTemplate } from '../MobilePushNew/sagas';

package/components/BreadCrumbs/index.js

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

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

@@ -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;
-    }
-  }
-}