@capillarytech/creatives-library 7.10.3 → 7.10.5

package/containers/App/constants.js

@@ -4,6 +4,7 @@ export const GET_SIDEBAR_FAILURE = 'app/App/GET_SIDEBAR_FAILURE';
 
 export const STORE2DOOR_PLUS_ENABLED = 'STORE2DOOR_PLUS_ENABLED';
 export const TRAI_DLT = 'TRAI_DLT';
+export const CARD_BASED_SCOPE = 'CARD_BASED_SCOPE';
 
 export const CARD_RELATED_TAGS = [
   'card_series',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.10.3",
+  "version": "7.10.5",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/common.js

@@ -1,6 +1,11 @@
 import _ from 'lodash';
 import { Auth } from '@capillarytech/cap-ui-utils';
-import { STORE2DOOR_PLUS_ENABLED, TRAI_DLT, CARD_RELATED_TAGS } from '../containers/App/constants';
+import {
+  STORE2DOOR_PLUS_ENABLED,
+  TRAI_DLT,
+  CARD_RELATED_TAGS,
+  CARD_BASED_SCOPE,
+} from '../containers/App/constants';
 
 export function getUserNameById(userId, allUserList) {
   let userName = "";
@@ -43,14 +48,22 @@ export const hasTraiDltFeature = Auth.hasFeatureAccess.bind(
   TRAI_DLT,
 );
 
+export const hasCardBasedScope = Auth.hasFeatureAccess.bind(
+  null,
+  CARD_BASED_SCOPE,
+);
+
 export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails = [], disableTagsDetails = {}}) {
   console.log('populating tags', (tagsList || []).length);
   const mainTags = {};
-  const { disableRelatedTags, childTagsToDisable, parentTagstoDisable, showCardsRelatedTags} = disableTagsDetails;
+  const { disableRelatedTags, childTagsToDisable, parentTagstoDisable} = disableTagsDetails;
 
-  const clonedTags = _.filter(tagsList, (tag) =>
-    !CARD_RELATED_TAGS.includes(tag?.definition?.value)
-  );
+  let clonedTags = tagsList;
+  if (!hasCardBasedScope()) {
+    clonedTags = _.filter(tagsList, (tag) =>
+      !CARD_RELATED_TAGS.includes(tag?.definition?.value)
+    );
+  }
   _.forEach(clonedTags, (temp) => {
     const tag = temp.definition;
     if (!tag['tag-header']) { //if tag doesn't have subtag(s), which means this tag itself is tag and not a tag header.
@@ -242,3 +255,10 @@ export const bytes2Size = (bytes, decimals = 2) => {
 
   return `${Math.ceil((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 };
+
+export const isTraiDLTEnable = (isFullMode, smsRegister) => {
+  const isTraiDltFeatureForOrg = hasTraiDltFeature();
+  const isTariEnableforLib = (!isFullMode && smsRegister === "DLT" ) || isFullMode;
+  const isTraiDltFeature = isTraiDltFeatureForOrg && isTariEnableforLib;
+  return isTraiDltFeature;
+};

package/v2Components/CapTagList/index.js

@@ -16,6 +16,7 @@ import { createStructuredSelector } from 'reselect';
 import messages from './messages';
 import { makeSelectLoyaltyPromotionDisplay } from '../../v2Containers/Cap/selectors';
 import { CARD_RELATED_TAGS } from '../../containers/App/constants';
+import { hasCardBasedScope } from '../../utils/common';
 
 const {Search} = CapInput;
 const {CapTreeNode} = CapTree;
@@ -139,7 +140,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     const list = [];
     const loyaltyAttrDisableText = <FormattedMessage {...messages.loyaltyAttributeDisable} />;
     let clonedTags = _.cloneDeep(tags);
-    if (!showCardsRelatedTags) {
+    if (!hasCardBasedScope()) {
       clonedTags = _.omit(clonedTags, CARD_RELATED_TAGS);
     }
     _.forEach(clonedTags, (val = '', key) => {

package/v2Containers/Cap/reducer.js

@@ -119,8 +119,7 @@ function capReducer(state = fromJS(initialState.cap), action) {
     case types.SET_LOYALTY_PROMOTION_RELATED_CREATIVE_TAGS_DISPLAY: {
       return state.set('disableLoyaltyPromotionRelatedTags', action.disable)
         .set('tagsToDisable', action.tagsToDisable)
-        .set('parentTagsToDisable', action.parentTagsToDisable)
-        .set('showCardsRelatedTags', action.showCardsRelatedTags);
+        .set('parentTagsToDisable', action.parentTagsToDisable);
     }
     default:
       return state;

package/v2Containers/Cap/selectors.js

@@ -79,7 +79,6 @@ const makeSelectLoyaltyPromotionDisplay = () => createSelector(
     disableRelatedTags: globalState.get('disableLoyaltyPromotionRelatedTags'),
     childTagsToDisable: globalState.get('tagsToDisable') || [],
     parentTagstoDisable: globalState.get('parentTagsToDisable') || [],
-    showCardsRelatedTags: globalState.get('showCardsRelatedTags') || false,
   }),
 );
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -142,6 +142,7 @@ function SlideBoxContent(props) {
       fbAdManager,
       showDisabledFBInfo,
       orgUnitId,
+      smsRegister,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -201,12 +202,18 @@ function SlideBoxContent(props) {
 
   const getChannelPreviewContent = (templateDataObject) => {
     switch (templateDataObject.type.toUpperCase()) {
-      case constants.SMS:
-        if (!commonUtil.hasTraiDltFeature() || get(templateDataObject, `versions.base['updated-sms-editor']`) === "") {
+      case constants.SMS: {
+        const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
+        const updatedSmsEditor = get(
+          templateDataObject,
+          `versions.base['updated-sms-editor']`,
+          '',
+        );
+        if (!isTraiDlt || updatedSmsEditor === '') {
           return get(templateDataObject, `versions.base['sms-editor']`);
-        } else {
-          return templateDataObject.versions.base['updated-sms-editor']?.join('');
         }
+        return updatedSmsEditor.join('');
+      }
       case constants.LINE: {
         const lineContents = get(templateDataObject, `versions.base.content.messages`, [{}]);
         const previewContent = [];
@@ -347,6 +354,7 @@ function SlideBoxContent(props) {
         messageStrategy={messageStrategy}
         showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
+        smsRegister={smsRegister}
         />
       )}
       {isPreview && (
@@ -416,6 +424,7 @@ function SlideBoxContent(props) {
           onTestContentClicked={onTestContentClicked}
           handleClose={handleClose}
           onCreateComplete={onCreateComplete}
+          smsRegister={smsRegister}
         />
       )}
       {isEditFTP && (
@@ -463,6 +472,8 @@ function SlideBoxContent(props) {
         onPreviewContentClicked={onPreviewContentClicked}
         onTestContentClicked={onTestContentClicked}
         onCreateComplete={onCreateComplete}
+        smsRegister={smsRegister}
+        onShowTemplates={onShowTemplates}
       />
         )}
 
@@ -716,5 +727,6 @@ SlideBoxContent.propTypes = {
   fbAdManager: PropTypes.string,
   showDisabledFBInfo: PropTypes.boolean,
   orgUnitId: PropTypes.any,
+  smsRegister: PropTypes.any,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import messages from './messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { NO_COMMUNICATION, FTP } from '../App/constants';
-import { hasTraiDltFeature } from '../../utils/common';
+import { isTraiDLTEnable } from '../../utils/common';
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
@@ -25,11 +25,12 @@ function getChannelLabel(channel = '') {
 
 
 function SlideBoxHeader(props) {
-  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep } = props;
+  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep, smsRegister } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
-  const isTraiDltFeature = hasTraiDltFeature();
-  const showCreateTraiSMSHeader = isTraiDltFeature && channel.toLowerCase() === "sms";
+  const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
+  const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
+
   return (
     <div key="creatives-container-slidebox-header-content">
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (
@@ -103,5 +104,6 @@ SlideBoxHeader.propTypes = {
   channel: PropTypes.string,
   shouldShowTemplateName: PropTypes.bool,
   templateNameRenderProp: PropTypes.func,
+  smsRegister: PropTypes.any,
 };
 export default SlideBoxHeader;

package/v2Containers/CreativesContainer/index.js

@@ -156,7 +156,7 @@ class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
   getTemplateData = (templateData) => { //from consumers to creatives
-    const {isFullMode, messageDetails = {}} = this.props;
+    const { isFullMode, messageDetails = {}, smsRegister } = this.props;
     const { additionalProperties = {} } = messageDetails;
     if (!isFullMode && templateData) { // for component mode
       const {channel} = templateData;
@@ -170,9 +170,28 @@ class Creatives extends React.Component {
           break;
         }
         case constants.SMS: {
-          const formData = {
-            "sms-editor": templateData.messageBody,
-          };
+          const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
+          let formData = {};
+          if (isTraiDlt) {
+            const {
+              template_id = '',
+              header = '',
+              template_name = '',
+              ['sms-editor']: smsEditor = '',
+              ['var-mapped']: varMapped = {},
+            } = templateData;
+            formData = {
+              template_id,
+              header,
+              template_name,
+              'sms-editor': smsEditor,
+              'var-mapped': varMapped
+            };
+          } else {
+            formData = {
+              'sms-editor': templateData.messageBody,
+            };
+          }
           creativesTemplateData = {
             type: channel,
             name: "Campaign message SMS content",
@@ -286,14 +305,14 @@ class Creatives extends React.Component {
               type: constants.FACEBOOK,
               edit: true,
               selectedFacebookAccount,
-              fbContentType
+              fbContentType,
             };
           } else {
             creativesTemplateData = {
               selectedMarketingObjective: templateData.selectedMarketingObjective,
               edit: true,
               type: channel,
-              fbContentType: templateData.fbContentType
+              fbContentType: templateData.fbContentType,
             };
           }
           break;
@@ -357,7 +376,31 @@ class Creatives extends React.Component {
     switch (channel) {
       case constants.SMS:
         if (template.value.base) {
-          templateData.messageBody = template.value.base['sms-editor'];
+          const smsBase = template.value.base || {};
+          const { isFullMode, smsRegister } = this.props;
+          const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
+          const {
+            ['updated-sms-editor']: updatedSmsEditor,
+            ['sms-editor']: smsEditor,
+          } = smsBase;
+          if (!isTraiDlt) {
+            templateData.messageBody = smsEditor;
+          } else {
+            templateData.messageBody = updatedSmsEditor === "" ? smsEditor : updatedSmsEditor.join('');
+            const {
+              template_id,
+              template_name,
+              header,
+              ['var-mapped']: varMapped,
+            } = smsBase;
+            templateData.templateConfigs = {
+              templateId: template_id,
+              templateName: template_name,
+              template: smsEditor,
+              registeredSenderIds: header?.split(','),
+              templateVariableMapping: varMapped
+            };
+          }
         }
         break;
       case constants.EMAIL:
@@ -771,7 +814,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor, smsRegister} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -795,6 +838,7 @@ class Creatives extends React.Component {
               weChatTemplateType={weChatTemplateType}
               showPrefix={!isUploading} // not show back button when email template is being uploaded
               templateStep={this.creativesTemplateSteps[templateStep]}
+              smsRegister={smsRegister}
             />}
           content={
             <SlideBoxContent
@@ -848,6 +892,7 @@ class Creatives extends React.Component {
               handleClose={this.handleCloseSlideBox}
               onFTPSubmit={getCreativesData}
               editor={editor}
+              smsRegister={smsRegister}
               messageStrategy={this.props.strategy}
               orgUnitId={this.props.orgUnitId}
           />

package/v2Containers/SmsTrai/Create/index.js

@@ -18,7 +18,6 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import Papa from 'papaparse';
 import cloneDeep from 'lodash/cloneDeep';
 import {
-  CAP_SPACE_12,
   CAP_SPACE_16,
   CAP_SPACE_24,
   CAP_SPACE_32,
@@ -48,7 +47,13 @@ import messages from './messages';
 import withCreatives from '../../../hoc/withCreatives';
 
 export const SmsTraiCreate = (props) => {
-  const { intl, actions, onCreateComplete } = props;
+  const {
+    intl,
+    actions,
+    onCreateComplete,
+    isFullMode,
+    onShowTemplates,
+  } = props;
   const { formatMessage } = intl;
   const [files, setFiles] = useState([]);
   const [errorText, setErrorText] = useState('');
@@ -451,7 +456,11 @@ export const SmsTraiCreate = (props) => {
       { templates: savedData },
       (resp, errorMessage) => {
         createCallback({ errorMessage });
-        onCreateComplete();
+        if (isFullMode) {
+          onCreateComplete();
+        } else {
+          onShowTemplates();
+        }
       },
     );
   };
@@ -529,7 +538,7 @@ export const SmsTraiCreate = (props) => {
           {previewFileIndex !== null && (
             <>
               <CapRow span={24} className="upload-type-group-create-container">
-                <div className="upload-file-preview">
+                <>
                   <CapDivider
                     type="horizontal"
                     className="upload-file-preview-divider-1"
@@ -634,7 +643,7 @@ export const SmsTraiCreate = (props) => {
                     className="upload-file-preview-divider-2"
                   />
                   {errorText && <CapError>{errorText}</CapError>}
-                </div>
+                </>
               </CapRow>
             </>
           )}

package/v2Containers/SmsTrai/Edit/index.js

@@ -29,6 +29,7 @@ import messages from './messages';
 import TagList from '../../TagList';
 import TemplatePreview from '../../../v2Components/TemplatePreview';
 import withCreatives from '../../../hoc/withCreatives';
+import { validateTags } from '../../../utils/tagValidations';
 
 import {
   CHARLIMIT,
@@ -42,6 +43,7 @@ import {
   LIBRARY,
 } from './constants';
 let varMap = {};
+let traiData = {};
 const { TextArea } = CapInput;
 const { CapLabelInline } = CapLabel;
 export const SmsTraiEdit = (props) => {
@@ -58,6 +60,9 @@ export const SmsTraiEdit = (props) => {
     metaEntities,
     injectedTags,
     onCreateComplete,
+    isFullMode,
+    getFormSubscriptionData,
+    templateData = {},
   } = props || {};
   const { formatMessage } = intl;
   const [loading, updateLoading] = useState(true);
@@ -66,6 +71,7 @@ export const SmsTraiEdit = (props) => {
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
   const [isValidationError, updateIsValidationError] = useState(false);
+  const [isTagValidationError, updateIsTagValidationError] = useState(false);
   let totalVarCount = 0;
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
@@ -86,31 +92,35 @@ export const SmsTraiEdit = (props) => {
     }
   `;
   useEffect(() => {
+    //fetching tags
+    const { type, module } = location.query || {};
+    const isEmbedded = type === EMBEDDED;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context: isEmbedded ? module : DEFAULT,
+      embedded: isEmbedded ? type : FULL,
+    };
+    if (getDefaultTags) {
+      query.context = getDefaultTags;
+    }
+    globalActions.fetchSchemaForEntity(query);
+
     const { id } = params || {};
     if (id) {
       actions.getTemplateDetails(id);
-      //fetching tags
-      const query = {
-        layout: SMS,
-        type: TAG,
-        context:
-          location.query.type === EMBEDDED ? location.query.module : DEFAULT,
-        embedded: location.query.type === EMBEDDED ? location.query.type : FULL,
-      };
-      if (getDefaultTags) {
-        query.context = getDefaultTags;
-      }
-      globalActions.fetchSchemaForEntity(query);
     }
     return () => {
       actions.resetEditTemplate();
+      varMap = {};
     };
   }, []);
 
   //computing placeholder array for mapping values and rendering dynamic form
   useEffect(() => {
-    if (templateDetails && !isEmpty(templateDetails)) {
-      let msg = get(templateDetails, `versions.base.sms-editor`);
+    traiData = isFullMode ? templateDetails : templateData;
+    if (traiData && !isEmpty(traiData)) {
+      let msg = get(traiData, `versions.base.sms-editor`);
       const templateMessageArray = [];
       //converting sms-editor string to an array split at '{#var#}'
       //split and push string before '{#var#}[0 to index]', push '{#var#}',
@@ -134,16 +144,23 @@ export const SmsTraiEdit = (props) => {
       //stop spinner
       updateLoading(false);
     }
-  }, [templateDetails]);
+  }, [templateDetails || templateData]);
 
   useEffect(() => {
     if (tempMsgArray.length !== 0) {
+      const traiBase = traiData?.versions?.base || {};
+      const {
+        ['var-mapped']: varMapped = {},
+        ['updated-sms-editor']: traiSmsEditor = '',
+      } = traiBase;
       //if varMapped and updated-sms-editor is already present on non first edits
-      if (!isEmpty(get(templateDetails, `versions.base.var-mapped`))) {
-        varMap = cloneDeep(get(templateDetails, `versions.base.var-mapped`));
-        setUpdatedSmsEditor(
-          get(templateDetails, `versions.base.updated-sms-editor`),
-        );
+      if (!isEmpty(varMapped)) {
+        varMap = cloneDeep(varMapped);
+        if (isFullMode) {
+          setUpdatedSmsEditor(traiSmsEditor);
+        } else {
+          computeUpdatedSmsEditor();
+        }
       } else {
         //computing varMap for first edit
         let counter = 1;
@@ -176,6 +193,22 @@ export const SmsTraiEdit = (props) => {
     }
   }, []);
 
+  const computeUpdatedSmsEditor = () => {
+    const updatedSmsArray = [...tempMsgArray];
+    for (const key in varMap) {
+      let index = Number(key.slice(8)); //Eg: -> extracting index 1 from keys like {#var# } _1
+      for (let i = 0; i < varMap[key].count; i++) {
+        //when multiple "#var#" come continuously ,it is considered as 1 textbox
+        if (i === 0) {
+          updatedSmsArray[index] = varMap[key].data; //data for first #var# of the textbox
+        } else {
+          updatedSmsArray[index + i] = ''; //"" for remaining #var# of a textbox
+        }
+      }
+    }
+    setUpdatedSmsEditor(updatedSmsArray);
+  };
+
   //Saving on done start
   const onUpdateTemplateComplete = (editResponse, errorMsg) => {
     if (editResponse?.templateId) {
@@ -197,10 +230,21 @@ export const SmsTraiEdit = (props) => {
     } else {
       //start spinner
       updateLoading(true);
-      templateDetails.versions.base['var-mapped'] = varMap;
-      templateDetails.versions.base['updated-sms-editor'] = updatedSmsEditor;
-      templateDetails.versions.history = [templateDetails.versions.base];
-      actions.editTemplate(templateDetails, onUpdateTemplateComplete);
+      const traiVersions = traiData.versions || {};
+      traiVersions.base = {
+        ...traiVersions.base,
+        'var-mapped': varMap,
+        'updated-sms-editor': updatedSmsEditor,
+      };
+      traiVersions.history = [traiVersions.base];
+      isFullMode
+        ? actions.editTemplate(traiData, onUpdateTemplateComplete)
+        : getFormSubscriptionData({
+            value: traiData.versions,
+            _id: params && params.id,
+            validity: true,
+            type: SMS,
+          });
     }
   };
   //Saving on done end
@@ -209,17 +253,16 @@ export const SmsTraiEdit = (props) => {
   useEffect(() => {
     let tag =
       metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
-    if (
-      location.query.type === EMBEDDED &&
-      location.query.module === LIBRARY &&
-      !getDefaultTags
-    ) {
+    const { type, module } = location.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
       tag = supportedTags;
     }
     updateTags(tag);
   }, [metaEntities]);
 
   const handleOnTagsContextChange = (data) => {
+    const { type } = location.query || {};
+    const isEmbedded = type === EMBEDDED;
     const query = {
       layout: SMS,
       type: TAG,
@@ -227,7 +270,7 @@ export const SmsTraiEdit = (props) => {
         (data || '').toLowerCase() === ALL
           ? DEFAULT
           : (data || '').toLowerCase(),
-      embedded: location.query.type === EMBEDDED ? location.query.type : FULL,
+      embedded: isEmbedded ? type : FULL,
     };
     globalActions.fetchSchemaForEntity(query);
   };
@@ -276,6 +319,20 @@ export const SmsTraiEdit = (props) => {
       }
     }
     setUpdatedSmsEditor(arr);
+    if (!isFullMode) {
+      const tagValidationResponse =
+        validateTags({
+          content: arr.join(''),
+          tagsParam: tags,
+          injectedTagsParams: injectedTags,
+          location,
+          tagModule: getDefaultTags,
+        }) || {};
+      if (!tagValidationResponse.valid) {
+        updateIsTagValidationError(true);
+        console.log(tagValidationResponse);
+      }
+    }
   };
 
   const textAreaValue = (idValue) => {
@@ -391,13 +448,13 @@ export const SmsTraiEdit = (props) => {
     <>
       <CapSpin spinning={loading}>
         <CapRow>
-          {templateDetails && !isEmpty(templateDetails) && (
+          {traiData && !isEmpty(traiData) && (
             <TraiEditTemplateDetails>
               <CapLabelInline type="label1">
                 {formatMessage(messages.templateLabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {templateDetails.versions.base.template_name}
+                {traiData.versions.base.template_name}
               </CapLabelInline>
               <CapLabelInline type="label1">
                 {formatMessage(messages.traiEditSeperator)}
@@ -406,7 +463,7 @@ export const SmsTraiEdit = (props) => {
                 {formatMessage(messages.senderIdlabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {templateDetails.versions.base.header}
+                {traiData.versions.base.header}
               </CapLabelInline>
             </TraiEditTemplateDetails>
           )}

package/v2Containers/SmsWrapper/index.js

@@ -6,7 +6,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import SmsCreate from '../Sms/Create';
-import { hasTraiDltFeature } from '../../utils/common';
+import { isTraiDLTEnable } from '../../utils/common';
 import SmsEdit from '../Sms/Edit';
 import SmsTraiCreate from '../SmsTrai/Create';
 import SmsTraiEdit from '../SmsTrai/Edit';
@@ -26,7 +26,9 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     onCreateComplete,
-    handleClose
+    handleClose,
+    smsRegister,
+    onShowTemplates,
   } = props;
 
   const smsProps = {
@@ -43,13 +45,15 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
   };
-  const isTraiDltFeature = hasTraiDltFeature();
+  const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   return <>
     {
-      isCreateSms && (isTraiDltFeature ?
+      isCreateSms && (isTraiDlt ?
         <SmsTraiCreate
           isComponent
-          {...smsProps}/> :
+          {...smsProps}
+          onShowTemplates={onShowTemplates}
+          /> :
           <SmsCreate
             isComponent {
               ...smsProps
@@ -57,16 +61,16 @@ const SmsWrapper = (props) => {
           />
       )
     }
-    {isEditSms && (isTraiDltFeature ?
+    {isEditSms && (isTraiDlt ?
       <SmsTraiEdit
         {...smsProps}
         params={{id: templateData._id}}
         templateData={templateData}
         handleClose={handleClose}
-          />:<SmsEdit
-        {...smsProps}
-        params={{id: templateData._id}}
-        templateData={templateData}
+          /> : <SmsEdit
+            {...smsProps}
+            params={{id: templateData._id}}
+            templateData={templateData}
           />
       )}
       </>;

package/v2Containers/Templates/index.js

@@ -155,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 = '';
@@ -207,7 +207,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
   }
-
+  checkDLTfeatureEnable = () => {
+    const {smsRegister, isFullMode} = this.props;
+    const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
+    return isTraiDlt;
+  }
   componentDidMount() {
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
@@ -223,7 +227,7 @@ 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();
+      const isTraiDltFeature = this.checkDLTfeatureEnable();
       if ((this.state.channel || '').toLowerCase() === "sms" && isTraiDltFeature) {
         queryParams.traiEnable = true;
       }
@@ -586,7 +590,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (activeMode === ACCOUNT_SELECTION_MODE) {
       this.setTemplatesMode();
     }
-    const isTraiDltFeature = commonUtil.hasTraiDltFeature();
+    const isTraiDltFeature = this.checkDLTfeatureEnable();
     if ((this.state.channel || '').toLowerCase() === "sms" && isTraiDltFeature) {
       queryParams.traiEnable = true;
     }
@@ -628,7 +632,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
         }
       }
-     
+
       this.setState({page, templatesCount}, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
@@ -670,7 +674,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     if (currentChannel === SMS) {
       filteredTemplates = this.filterSMSTemplates(templates);
-      isTraiDltFeature = commonUtil.hasTraiDltFeature();
+      isTraiDltFeature = this.checkDLTfeatureEnable();
     }
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const templateData =
@@ -2054,7 +2058,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 isTraiDltFeature = this.checkDLTfeatureEnable();
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
@@ -2271,6 +2275,7 @@ Templates.propTypes = {
   router: PropTypes.object,
   viberActions: PropTypes.object,
   facebookActions: PropTypes.object,
+  smsRegister: PropTypes.any,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/TemplatesV2/index.js

@@ -199,7 +199,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
-    const {isFullMode, messageStrategy} = this.props;
+    const {isFullMode, messageStrategy, smsRegister} = this.props;
     if (!isFullMode) {
       query = {type: 'embedded', module: 'library'};
       switch (channel) {
@@ -232,6 +232,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
           renderNewCardGrid={this.getTemplateDataForGrid}
           handlePeviewTemplate={this.props.handlePeviewTemplate}
           messageStrategy={this.props.messageStrategy}
+          smsRegister={smsRegister}
     />);
     }
   }