@capillarytech/creatives-library 7.10.54 → 7.10.55

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -700,6 +700,9 @@ function SlideBoxContent(props) {
       {isEditWhatsapp && (<Whatsapp
         isFullMode={isFullMode}
         templateData={templateData}
+        getFormData={getFormData}
+        getDefaultTags={type}
+        forwardedTags={forwardedTags}
         params={{
           id: templateData._id,
         }}

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -22,7 +22,6 @@ const StyledLabel = styled(CapLabelInline)`
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
-
 const renderWhatsappData = (type, value) => (
   <StyledLabel type={type}>
     {value}

package/v2Containers/CreativesContainer/index.js

@@ -31,6 +31,7 @@ import { IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TE
 import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
+import { WHATSAPP_STATUSES } from '../Whatsapp/constants';
 
 
 const classPrefix = 'add-creatives-section';
@@ -364,6 +365,42 @@ class Creatives extends React.Component {
           };
           break;
         }
+        case constants.WHATSAPP: {
+          const { 
+            templateConfigs: {
+              name,
+              template,
+              varMapped,
+              language,
+              category,
+              mediaType
+            }
+          } = templateData;
+          creativesTemplateData = {
+            type: constants.WHATSAPP,
+            edit: true,
+            name,
+            versions: {
+              base: {
+                content: {
+                  whatsapp: {
+                    status: WHATSAPP_STATUSES.approved,
+                    category,
+                    varMapped,
+                    mediaType,
+                    languages: [
+                      {
+                        language,
+                        content: `$'${template}'`,
+                      }
+                    ]
+                  }
+                },
+              },
+            },
+          };
+          break;
+        }
         default:
           break;
       }
@@ -495,6 +532,38 @@ class Creatives extends React.Component {
           };
         }
         break;
+      case constants.WHATSAPP:
+        if (template.value) {
+          const { Templates, templateData: templateDataProps } = this.props;
+          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
+          const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
+          const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
+          const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
+          const { versions } = template.value;
+          const {
+            languages,
+            mediaType,
+            category,
+            templateEditor,
+            varMapped
+          } = cloneDeep(versions.base.content.whatsapp);
+          templateData = {
+            channel,
+            accountId,
+            accountName: accountDetails.name,
+            messageBody: languages[0].content,
+            templateConfigs: {
+              id: template._id,
+              name: template?.value?.name,
+              template, templateEditor,
+              varMapped,
+              category,
+              language: languages[0].language,
+              mediaType,
+            }
+          };
+        }
+        break;
       case constants.FACEBOOK: {
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;

package/v2Containers/Templates/_templates.scss

@@ -151,6 +151,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

@@ -56,6 +56,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';
@@ -84,8 +85,9 @@ import {
   CHANNEL_EDIT_TRACK_MAPPING,
   VIBER as VIBER_CHANNEL,
   FACEBOOK as FACEBOOK_CHANNEL,
+  CREATE,
 } from '../App/constants';
-import { MAX_WHATSAPP_TEMPLATES } from './constants';
+import { MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES } from './constants';
 import {
   CATEGORY_OPTIONS,
   STATUS_OPTIONS,
@@ -265,6 +267,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
+
+    // opening the create slidebox based on query params
+    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();
     }
@@ -594,7 +603,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
   onCreateComplete = (isReloadTemplates) => {
     this.setState({routeParams: null, previewOpen: false}, () => {
-      if (this.isFullMode() && isReloadTemplates) {
+      if (this.isFullMode() && (isReloadTemplates)) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -730,10 +739,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   isStatusMatching = (status, selectedWhatsappStatus) => {
-    if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
-      return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
+    if(this.props.isFullMode && selectedWhatsappStatus) {
+      if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
+        return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
+      }
+        return selectedWhatsappStatus === status;
+    }
+    else if (!this.props.isFullMode){
+      return status === WHATSAPP_STATUSES.approved;
     }
-      return selectedWhatsappStatus === status;
+    return true;
   }
 
   filterWhatsappTemplates = (templates) => {
@@ -743,9 +758,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
       // if status or category filter is applied, filter templates which match these filters
       return (
-        selectedWhatsappStatus
-        ? this.isStatusMatching(status, selectedWhatsappStatus)
-        : true
+        this.isStatusMatching(status, selectedWhatsappStatus)
       ) && (
         selectedWhatsappCategory
         ? category === selectedWhatsappCategory
@@ -1350,7 +1363,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},
@@ -2249,6 +2262,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_LOWERCASE}&mode=${CREATE}`, "_blank");
+  }
 
   render() {
     const isFullMode = this.isFullMode();
@@ -2322,16 +2338,30 @@ 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} >
-      { 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 showWhatsappCountWarning = templatesCount >= WARNING_WHATSAPP_TEMPLATES;
     const whatsappCountExceedText = <FormattedMessage {...messages.whatsappMaxTemplates} values={{ maxCount: MAX_WHATSAPP_TEMPLATES }}/>;
 
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
@@ -2361,16 +2391,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       {
         channel.toUpperCase() === WHATSAPP && (
           <div className="whatsapp-filters">
-            <CapSelectFilter
-              placement="bottomLeft"
-              data={STATUS_OPTIONS}
-              onSelect={this.setWhatsappStatus}
-              selectedValue={this.state.selectedWhatsappStatus}
-              placeholder="Status"
-              showBadge={true}
-              width="90px"
-              overlayStyle={{ overflowY: "hidden" }}
-            />
+            {
+              this.props.isFullMode ? (
+                <CapSelectFilter
+                  placement="bottomLeft"
+                  data={STATUS_OPTIONS}
+                  onSelect={this.setWhatsappStatus}
+                  selectedValue={this.state.selectedWhatsappStatus}
+                  placeholder="Status"
+                  showBadge={true}
+                  width="90px"
+                />
+              ) : null
+            }
             <CapSelectFilter
               placement="bottomLeft"
               data={CATEGORY_OPTIONS}
@@ -2496,7 +2529,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
 
           {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE && isWhatsappCountExeeded ? (
+            channel.toLowerCase() === WHATSAPP_LOWERCASE && showWhatsappCountWarning ? (
               <CapAlert message={whatsappCountExceedText} type="info" />
             ) : null
           }
@@ -2507,6 +2540,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </Pagination>
             {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+                        {
+            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
+              <CapAlert message={whatsappCountExceedText} type="info" />
+            ) : null
+          }
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
           </CapRow>

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;
 
@@ -50,7 +51,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       isFullMode,
       onChannelChange,
       showDisabledFBInfo,
-      enableNewChannels = [],
+      enableNewChannels,
     } = props;
 
     const defaultPanes = {
@@ -124,6 +125,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

@@ -52,9 +52,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 {
@@ -74,6 +76,7 @@ export const Whatsapp = (props) => {
     metaEntities,
     injectedTags,
     loadingTags,
+    getFormData
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -99,6 +102,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;
 
@@ -109,7 +113,8 @@ export const Whatsapp = (props) => {
     width: 100%;
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
-
+    z-index: 1;
+    
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
@@ -141,7 +146,6 @@ export const Whatsapp = (props) => {
         setSpin(true);
         actions.getTemplateDetails(id);
       }
-      setEditFlow(true);
     }
     //cleanup code
     return () => {
@@ -155,9 +159,10 @@ export const Whatsapp = (props) => {
       name = '',
       versions = {},
       createdAt = '',
-    } = editData.templateDetails || templateData || {};
+    } = isFullMode ? editData.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content.whatsapp`, {});
     if (editContent && !isEmpty(editContent)) {
+      setEditFlow(true);
       setTemplateName(name);
       setTemplateDate(createdAt);
       const {
@@ -261,6 +266,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;
@@ -468,13 +494,16 @@ export const Whatsapp = (props) => {
             languages: [
               {
                 language: 'en',
-                content: `$'${templateMessage}\nClick {{${
-                  addedVarCount + 1
-                }}} to unsubscribe'`,
+                content: 
+                  isEditFlow 
+                  ? `${updatedSmsEditor.join('')} ${formatMessage(messages.templateMessageUnsubscribeText)}`
+                  : `$'${templateMessage}\nClick {{${
+                    addedVarCount + 1 }}} to unsubscribe'`,
               },
             ],
-            mediaType: 'text',
-            varMapped: {},
+            mediaType: 'TEXT',
+            varMapped: varMap,
+            templateEditor: tempMsgArray.join(''),
             accountId,
             accessToken,
             accountName,
@@ -519,6 +548,15 @@ export const Whatsapp = (props) => {
     }
   };
 
+  const saveToMessage = () => {
+    getFormData({
+      value: createPayload(),
+      _id: params?.id,
+      validity: true,
+      type: 'WHATSAPP',
+    });
+  }
+
   const isDisableDone = () => {
     //if template name is not entered
     if (templateName.trim() === '' || templateNameError) {
@@ -774,6 +812,16 @@ 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 = (
     <>
       {templateStatus && (
@@ -815,6 +863,7 @@ export const Whatsapp = (props) => {
       </CapTooltip>
 
       {renderMessageLength()}
+      {isTagValidationError && tagValidationErrorMessage()}
     </>
   );
   //edit methods end
@@ -841,6 +890,13 @@ export const Whatsapp = (props) => {
     );
   };
 
+  const isEditDoneDisabled = () => {
+    return isTagValidationError || Object.values(varMap).some( (inputValue) => {
+      if (inputValue === '') {
+        return true;
+      }
+    });
+  }
   return (
     <CapSpin spinning={spin}>
       <CapRow className='cap-whatsapp-creatives'>
@@ -875,6 +931,17 @@ export const Whatsapp = (props) => {
             </CapButton>
           </>
         )}
+        {!isFullMode && isEditFlow && (
+          <>
+            <CapButton
+              onClick={saveToMessage}
+              disabled={isEditDoneDisabled()}
+              className="whatsapp-create-btn"
+            >
+              <FormattedMessage {...messages.done} />
+            </CapButton>
+          </>
+        )}
       </WhatsappFooter>
     </CapSpin>
   );

package/v2Containers/Whatsapp/utils.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { WHATSAPP } from '../CreativesContainer/constants';
 import {
     STATUS_OPTIONS,