@capillarytech/creatives-library 7.9.14 → 7.9.16

package/v2Containers/SmsTrai/Edit/tests/index.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { browserHistory } from 'react-router';
+import configureStore from '../../../../store';
+import { Provider } from 'react-redux';
+import { mountWithIntl } from '../../../../../app/helpers/intl-enzym-test-helpers';
+import { SmsTraiEdit } from '../index';
+import { mockData } from './mockData';
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, browserHistory);
+});
+
+describe('Creatives SmsTraiEdit test/>', () => {
+  let renderedComponent;
+  const getTemplateDetails = jest.fn();
+  const resetEditTemplate = jest.fn();
+  const clearEditResponse = jest.fn();
+  const editTemplate = jest.fn();
+  const fetchSchemaForEntity = jest.fn();
+  const formatMessage = jest.fn();
+  const handleClose = jest.fn();
+  const params = {
+    id: mockData.templateDetails._id,
+  };
+  const location = mockData.location;
+  const templateDetails = mockData.templateDetails;
+  beforeEach(() => {
+    renderedComponent = mountWithIntl(
+      <Provider store={store}>
+        <SmsTraiEdit
+          actions={{
+            getTemplateDetails,
+            resetEditTemplate,
+            clearEditResponse,
+            editTemplate,
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          handleClose={handleClose}
+          params={params}
+          templateDetails={templateDetails}
+          location={location}
+          intl={{ formatMessage }}
+        />
+      </Provider>,
+    );
+  });
+  it('should render', () => {
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('should save', () => {
+    renderedComponent.find('button.create-msg').props().onClick();
+    renderedComponent.update();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('should cancel', () => {
+    renderedComponent.find('button.cancel-msg').props().onClick();
+    renderedComponent.update();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

package/v2Containers/SmsTrai/Edit/tests/mockData.js

@@ -0,0 +1,36 @@
+export const mockData = {
+  templateDetails: {
+    _id: '6125eec5feae248f88e6a634',
+    name: 'CAP71871_4',
+    type: 'SMS',
+    versions: {
+      history: [],
+      base: {
+        template_id: "'1107160207324585172'",
+        template_name: 'CAP71871_4',
+        type: 'Service-Explicit',
+        header: 'VISHMM',
+        category: '--',
+        'sms-editor':
+          'LATEST FASHION@VISHAL\n{#var#}\n\nBUY1GET1-\n{#var#}\n{#var#}\n{#var#}\n\nFREE GIFTS-\n{#var#}\n{#var#}',
+        'consent-type': 'Explicit',
+        'unicode-validity': false,
+        tabKey: 1,
+      },
+    },
+    isActive: true,
+    orgId: 50146,
+    createdBy: '15000449',
+    updatedBy: '15000449',
+    createdAt: '2021-08-25T07:25:12.559Z',
+    updatedAt: '2021-08-30T05:54:59.951Z',
+  },
+  location: {
+    pathname: '/sms/edit',
+    query: {
+      type: false,
+      module: 'default',
+    },
+    search: '',
+  },
+};

package/v2Containers/SmsWrapper/index.js

@@ -0,0 +1,75 @@
+/*
+ *
+ * SmsWrapper
+ *
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import SmsCreate from '../Sms/Create';
+import { hasTraiDltFeature } from '../../utils/common';
+import SmsEdit from '../Sms/Edit';
+import SmsTraiCreate from '../SmsTrai/Create';
+import SmsTraiEdit from '../SmsTrai/Edit';
+const SmsWrapper = (props) => {
+  const {
+    isCreateSms,
+    isEditSms,
+    setIsLoadingContent,
+    location,
+    isGetFormData,
+    getFormSubscriptionData,
+    isFullMode,
+    templateData,
+    getDefaultTags,
+    forwardedTags,
+    selectedOfferDetails,
+    onPreviewContentClicked,
+    onTestContentClicked,
+    onCreateComplete,
+    handleClose
+  } = props;
+
+  const smsProps = {
+    onCreateComplete,
+    setIsLoadingContent,
+    location,
+    route: { name: 'sms' },
+    isGetFormData,
+    getFormSubscriptionData,
+    getDefaultTags,
+    isFullMode,
+    forwardedTags,
+    selectedOfferDetails,
+    onPreviewContentClicked,
+    onTestContentClicked,
+  };
+  const isTraiDltFeature = hasTraiDltFeature();
+  return <>
+    {
+      isCreateSms && (isTraiDltFeature ?
+        <SmsTraiCreate
+          isComponent
+          {...smsProps}/> :
+          <SmsCreate
+            isComponent {
+              ...smsProps
+            }
+          />
+      )
+    }
+    {isEditSms && (isTraiDltFeature ?
+      <SmsTraiEdit
+        {...smsProps}
+        params={{id: templateData._id}}
+        templateData={templateData}
+        handleClose={handleClose}
+          />:<SmsEdit
+        {...smsProps}
+        params={{id: templateData._id}}
+        templateData={templateData}
+          />
+      )}
+      </>;
+};
+
+export default SmsWrapper;

package/v2Containers/SmsWrapper/tests/index.test.js

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

package/v2Containers/Templates/_templates.scss

@@ -481,6 +481,7 @@
 .line-filters {
   width: 100%;
   padding-left: 12px;
+  padding-bottom: 16px;
   .ant-radio-button-wrapper {
     line-height: 32px;
     border-radius: 16px;
@@ -494,6 +495,7 @@
   }
   .ant-radio-button-wrapper-checked {
     background-color: #ecece7;
+    border: 0px white;
     box-shadow: none;
   }
 }

package/v2Containers/Templates/index.js

@@ -98,6 +98,13 @@ const LINE_FILTERS = {
   IMAGE_MAP_VIDEO: 'video',
 };
 
+const SMS_FILTERS = {
+  ALL: 'all',
+  PROMOTIONAL: 'promotional',
+  SERVICE_EXPLICIT: 'service-explicit',
+  SERVICE_IMPLICIT: 'service-implicit',
+};
+
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -125,6 +132,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       activeMode: TEMPLATES_MODE,
       wechatFilter: WECHAT_FILTERS.ALL,
       lineFilter: LINE_FILTERS.ALL,
+      smsFilter: SMS_FILTERS.ALL,
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -147,7 +155,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.prepareMobilePushPreviewData = this.prepareMobilePushPreviewData.bind(this);
     this.menuOnClickEvent = this.menuOnClickEvent.bind(this);
   }
-
+  
   componentWillMount() {
     if (this.state.channel === '') {
       let channel = '';
@@ -215,6 +223,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
       const channel = this.state.channel;
+      const isTraiDltFeature = commonUtil.hasTraiDltFeature();
+      if ((this.state.channel || '').toLowerCase() === "sms" && isTraiDltFeature) {
+        queryParams.traiEnable = true;
+      }
       this.props.actions.getAllTemplates(channel, queryParams);
     }
 
@@ -230,7 +242,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { templatesCount } = this.state || {};
 
     if (nextPropsTotalTemplatesCount && nextPropsTotalTemplatesCount !== propsTotalTemplatesCount && templatesCount === 0) {
-      this.setState({ templatesCount:  nextPropsTotalTemplatesCount });
+      this.setState({ templatesCount: nextPropsTotalTemplatesCount });
     }
     if (!isEqual(nextProps.route.name, this.props.route.name)) {
       let channel = '';
@@ -503,7 +515,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.getAllTemplates({params, resetPage: true});
     });
   }
-  onPaginationChange = () => { this.getAllTemplates({getNextPage: true}); }
+  onPaginationChange = () => {
+    this.getAllTemplates({getNextPage: true});
+  }
   onCreateComplete = (isReloadTemplates) => {
     this.setState({routeParams: null, previewOpen: false}, () => {
       if (this.isFullMode() && isReloadTemplates) {
@@ -572,6 +586,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (activeMode === ACCOUNT_SELECTION_MODE) {
       this.setTemplatesMode();
     }
+    const isTraiDltFeature = commonUtil.hasTraiDltFeature();
+    if ((this.state.channel || '').toLowerCase() === "sms" && isTraiDltFeature) {
+      queryParams.traiEnable = true;
+    }
     if (resetTemplates) {
       queryParams.name = this.state.searchText;
       queryParams.sortBy = this.state.sortBy;
@@ -610,6 +628,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
         }
       }
+     
       this.setState({page, templatesCount}, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
@@ -629,18 +648,30 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         return templates;
     }
   }
+  filterSMSTemplates = (templates) => {
+    const { smsFilter } = this.state;
+    if (SMS_FILTERS.ALL === smsFilter) {
+      return templates;
+    }
+    return templates.filter((template) => template.versions.base.type.toLowerCase() === smsFilter);
+  }
 
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
+    let isTraiDltFeature = false;
     if (currentChannel === WECHAT) {
       filteredTemplates = this.filterWechatTemplates(templates);
     }
     if (currentChannel === LINE) {
       filteredTemplates = this.filterLineTemplates(templates);
     }
+    if (currentChannel === SMS) {
+      filteredTemplates = this.filterSMSTemplates(templates);
+      isTraiDltFeature = commonUtil.hasTraiDltFeature();
+    }
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const templateData =
         {
@@ -660,7 +691,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
-              {this.state.channel.toUpperCase() !== WECHAT && <CapMenu.Item className={`duplicate-${channelLowerCase}`} onClick={() => this.duplicateTemplate(template)}>
+              {this.state.channel.toUpperCase() !== WECHAT && !isTraiDltFeature && <CapMenu.Item className={`duplicate-${channelLowerCase}`} onClick={() => this.duplicateTemplate(template)}>
                 <FormattedMessage {...messages.duplicateButton} />
               </CapMenu.Item>}
               <CapMenu.Item
@@ -677,7 +708,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       switch (currentChannel) {
         case SMS:
-          templateData.content = template.versions.base['sms-editor'];
+          templateData.content = isTraiDltFeature ? (
+            <>
+              <CapLabel type="label3" style={{ marginBottom: CAP_SPACE_16 }}>
+                {template.versions.base.type}
+              </CapLabel>
+              <CapLabel type="label1">
+                {template.versions.base['updated-sms-editor'] === ''
+                  ? template.versions.base['sms-editor']
+                  : template.versions.base['updated-sms-editor']?.join('')}
+              </CapLabel>
+            </>
+          ) : (
+            template.versions.base['sms-editor']
+          );
           break;
         case EMAIL: {
           const url = template.versions.base.preview_http_url;
@@ -1407,9 +1451,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
-      let data =id;
-      if(this.props.fbAdManager){
-        data = this.selectTemplate(id) 
+      let data = id;
+      if (this.props.fbAdManager) {
+        data = this.selectTemplate(id);
       }
       this.props.onSelectTemplate(data, this.props.fbAdManager);
     } else {
@@ -1942,10 +1986,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   setWechatFilter = (e) => this.setState({wechatFilter: e.target.value});
   setLineFilter = (e) => this.setState({lineFilter: e.target.value});
+  setSMSFilter = (e) => this.setState({smsFilter: e.target.value});
+
 
   render() {
     const isFullMode = this.isFullMode();
-    const { activeMode, channel, wechatFilter, lineFilter } = this.state;
+    const { activeMode, channel, wechatFilter, lineFilter, smsFilter } = this.state;
     let showFbAds = false;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
       const {campaignSettings, fetchedOrgLevelCampaignSettings} = this?.props?.Templates || {};
@@ -2008,6 +2054,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isfilterContentVisisble = true;
     const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const channelLowerCase = (channel || '').toLowerCase();
+    const isTraiDltFeature = commonUtil.hasTraiDltFeature();
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
@@ -2068,14 +2115,44 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           )
           : () => null
       }
+      {
+        channel.toUpperCase() === SMS &&
+        isTraiDltFeature
+          ? (
+            <CapRadio.CapRadioGroup className="line-filters" defaultValue={smsFilter} onChange={this.setSMSFilter}>
+              {
+                (() => {
+                  const { ALL, SERVICE_IMPLICIT, SERVICE_EXPLICIT, PROMOTIONAL } = SMS_FILTERS;
+                  return (
+                    <>
+                      <CapRadio.Button value={ALL}><CapLabel type="label2">
+                        <FormattedMessage {...messages.all} />
+                      </CapLabel></CapRadio.Button>
+                      <CapRadio.Button value={PROMOTIONAL}><CapLabel type="label2">
+                        <FormattedMessage {...messages.promotional} />
+                      </CapLabel></CapRadio.Button>
+                      <CapRadio.Button value={SERVICE_EXPLICIT}><CapLabel type="label2">
+                        <FormattedMessage {...messages.serviceExplicit} />
+                      </CapLabel></CapRadio.Button>
+                      <CapRadio.Button value={SERVICE_IMPLICIT}><CapLabel type="label2">
+                        <FormattedMessage {...messages.serviceImplicit} />
+                      </CapLabel></CapRadio.Button>
+                    </>
+                  );
+                })()
+              }
+            </CapRadio.CapRadioGroup>
+          )
+          : () => null
+      }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {isfilterContentVisisble && !isWechatEmbedded && <CapButton
           className={`create-new-${channelLowerCase}`}
           type={"primary"}
           disabled={this.isCreateDisabled()}
-          style={{marginLeft: '8px'}}
+          style={{marginLeft: '8px', marginBottom: '12px'}}
           onClick={this.createTemplate} >
-          { this.props.intl.formatMessage(messages.createNewActionButton) }
+          { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
         </CapButton>}
       </div>
 

package/v2Containers/Templates/messages.js

@@ -374,4 +374,20 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentFacebook`,
     defaultMessage: "Please setup the Facebook account & Facebook page to start creating content in Capillary's FB content creator.",
   },
+  "promotional": {
+    id: `${scope}.promotional`,
+    defaultMessage: 'Promotional',
+  },
+  "serviceExplicit": {
+    id: `${scope}.serviceExplicit`,
+    defaultMessage: 'Service explicit',
+  },
+  "serviceImplicit": {
+    id: `${scope}.serviceImplicit`,
+    defaultMessage: 'Service implicit',
+  },
+  "uploadTemplate": {
+    id: `${scope}.uploadTemplate`,
+    defaultMessage: 'Upload template',
+  },
 });