@capillarytech/creatives-library 7.10.48 → 7.10.50

package/package.json

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

package/utils/v2common.js

@@ -0,0 +1,13 @@
+export const getObjFromQueryParams = (searchString) => {
+    const params = new URLSearchParams(searchString);
+    const obj = {};
+    // iterate over all keys
+    for (const key of params.keys()) {
+        if (params.getAll(key).length > 1) {
+            obj[key] = params.getAll(key);
+        } else {
+            obj[key] = params.get(key);
+        }
+    }
+    return obj;
+}

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -698,6 +698,8 @@ function SlideBoxContent(props) {
         isFullMode={isFullMode}
         templateData={templateData}
         getFormData={getFormData}
+        getDefaultTags={type}
+        forwardedTags={forwardedTags}
         params={{
           id: templateData._id,
         }}

package/v2Containers/CreativesContainer/index.js

@@ -526,12 +526,11 @@ class Creatives extends React.Component {
           const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
           const { versions } = template.value;
           const whatsappContent = cloneDeep(versions.base.content.whatsapp);
-          console.log("accountDetailsaccountDetails", accountDetails, accountDetails.name)
           templateData = {
             channel,
             accountId,
             accountName: accountDetails.name,
-            messageBody: JSON.stringify(whatsappContent.languages[0].content),
+            messageBody: whatsappContent.languages[0].content,
             category: whatsappContent.category,
             language: whatsappContent.languages[0].language,
             mediaType: whatsappContent.mediaType,

package/v2Containers/Templates/_templates.scss

@@ -132,6 +132,20 @@
 
     }
   }
+
+  .create-new-link{
+    .ant-anchor-link {
+      display: flex;
+
+      .ant-anchor-link-title {
+        margin: 0;
+      }
+
+      .cap-link-v2-suffix {
+        margin-top: -2px;
+      }
+    }
+  }
 }
 
 .card-title {

package/v2Containers/Templates/index.js

@@ -32,6 +32,7 @@ import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { makeSelectLine } from '../Line/Container/selectors';
 import { makeSelectViber } from '../Viber/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
+import { getObjFromQueryParams } from '../../utils/v2common';
 import messages from './messages';
 import {checkUnicode} from '../../utils/smsCharCountV2';
 import * as actions from './actions';
@@ -240,6 +241,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
+
+    const queryItems = getObjFromQueryParams(location.search);
+
+    if(queryItems.channel === WHATSAPP_LOWERCASE && queryItems.mode === 'create') {
+      this.createTemplate();
+    }
+
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
@@ -1320,7 +1328,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else {
         this.props.createNew();
       }
-    } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
+    } else if (ev?.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
@@ -2222,6 +2230,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   setLineFilter = (e) => this.setState({lineFilter: e.target.value});
   setSMSFilter = (e) => this.setState({smsFilter: e.target.value});
 
+  openCreativesFullMode = () => {
+    window.open("/creatives/ui/v2?channel=WHATSAPP&&mode=create", "_blank");
+  }
 
   render() {
     const isFullMode = this.isFullMode();
@@ -2295,16 +2306,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
 
-    const createButton = (<CapButton
-      className={`create-new-${channelLowerCase}`}
-      type={"primary"}
-      disabled={this.isCreateDisabled()}
-      style={{marginLeft: '8px', marginBottom: '12px'}}
-      onClick={this.createTemplate}
-      target={channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode ? "_blank" : null}
-      >
-      { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
-    </CapButton>);
+    const createButton = 
+      ( channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode )
+      ? (
+        <CapLink 
+          onClick={this.openCreativesFullMode} 
+          title={formatMessage(messages.createNewTemplateLink)} 
+          suffix={<CapIcon type="open-in-new" size="s" />}
+          className="create-new-link"
+        />
+      )
+      : (
+        <CapButton
+          className={`create-new-${channelLowerCase}`}
+          type={"primary"}
+          disabled={this.isCreateDisabled()}
+          style={{marginLeft: '8px', marginBottom: '12px'}}
+          onClick={this.createTemplate}
+        >
+          { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
+        </CapButton>
+      );
 
     const isWhatsappCountExeeded = templatesCount >= MAX_WHATSAPP_TEMPLATES;
     const whatsappCountExceedText = <FormattedMessage {...messages.whatsappMaxTemplates} values={{ maxCount: MAX_WHATSAPP_TEMPLATES }}/>;

package/v2Containers/Templates/messages.js

@@ -274,6 +274,10 @@ export default defineMessages({
     id: `${scope}.createNewActionButton`,
     defaultMessage: `Create new`,
   },
+  "createNewTemplateLink": {
+    id: `${scope}.createNewTemplateLink`,
+    defaultMessage: `Create new template`,
+  },
   "creativeTemplates": {
     id: `${scope}.creativeTemplates`,
     defaultMessage: `Creative templates`,

package/v2Containers/TemplatesV2/index.js

@@ -31,6 +31,7 @@ import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
 import { CREATIVES_UI_VIEW, LOYALTY} from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
+import { getObjFromQueryParams } from '../../utils/v2common';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -120,6 +121,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       onChannelChange(defaultChannel);
     }
   }
+
+  componentDidMount() {
+    const queryItems = getObjFromQueryParams(location.search);
+
+    if(queryItems.channel === 'whatsapp') {
+      console.log("reached whatsapp content");
+      this.channelChange('whatsapp');
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
       const panes = this.setChannelContent(nextProps.channel, this.state.panes);

package/v2Containers/Whatsapp/index.js

@@ -51,9 +51,11 @@ import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import TagList from '../TagList';
 import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
+import { validateTags } from '../../utils/tagValidations';
 
 let varMap = {};
 let editContent = {};
+let tagValidationResponse = {};
 
 export const Whatsapp = (props) => {
   const {
@@ -101,6 +103,7 @@ export const Whatsapp = (props) => {
   //for tag only
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
+  const [isTagValidationError, updateIsTagValidationError] = useState(false);
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
 
@@ -157,7 +160,7 @@ export const Whatsapp = (props) => {
       name = '',
       versions = {},
       createdAt = '',
-    } = isFullMode ? editData.templateDetails : templateData;
+    } = isFullMode ? editData.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content.whatsapp`, {});
     if (editContent && !isEmpty(editContent)) {
       setEditFlow(true);
@@ -264,6 +267,27 @@ export const Whatsapp = (props) => {
     }
   }, [metaEntities, isEditFlow]);
 
+    //performs tag validation
+  useEffect(() => {
+    if (
+      !isFullMode &&
+      updatedSmsEditor?.length > 0 &&
+      !updatedSmsEditor.join('').match(validVarRegex)
+    ) {
+      tagValidationResponse =
+        validateTags({
+          content: updatedSmsEditor.join(''),
+          tagsParam: tags,
+          injectedTagsParams: injectedTags,
+          location,
+          tagModule: getDefaultTags,
+        }) || {};
+      updateIsTagValidationError(
+        tagValidationResponse.unsupportedTags.length > 0,
+      );
+    }
+  }, [updatedSmsEditor, tags]);
+
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;
@@ -789,6 +813,17 @@ export const Whatsapp = (props) => {
     }
   };
 
+  const tagValidationErrorMessage = () => {
+    const { unsupportedTags = [] } = tagValidationResponse;
+    let tagError = '';
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(messages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
+    return <CapError>{tagError}</CapError>;
+  };
+
   const editModeContent = (
     <>
       <CapAlert
@@ -828,6 +863,7 @@ export const Whatsapp = (props) => {
       </CapTooltip>
 
       {renderMessageLength()}
+      {isTagValidationError && tagValidationErrorMessage()}
     </>
   );
   //edit methods end
@@ -853,6 +889,14 @@ export const Whatsapp = (props) => {
     );
   };
 
+  const isEditDoneDisabled = () => {
+    return isTagValidationError || Object.values(varMap).some( (inputValue) => {
+      if (inputValue === '') {
+        return true;
+      }
+    });
+  }
+
   return (
     <CapSpin spinning={spin}>
       <CapRow>
@@ -891,7 +935,7 @@ export const Whatsapp = (props) => {
           <>
             <CapButton
               onClick={saveToMessage}
-              //disabled={isDisableDone()}
+              disabled={isEditDoneDisabled()}
               className="whatsapp-create-btn"
             >
               <FormattedMessage {...messages.done} />

package/v2Containers/Whatsapp/messages.js

@@ -236,4 +236,9 @@ export default defineMessages({
     id: `${prefix}.done`,
     defaultMessage: 'Done',
   },
+  unsupportedTagsValidationError: {
+    id: `${prefix}.unsupportedTagsValidationError`,
+    defaultMessage:
+      'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
+  },
 });