@capillarytech/creatives-library 7.10.49 → 7.10.50

package/v2Components/TemplatePreview/index.js

@@ -137,7 +137,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-    const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName, whatsappAccountName, whatsappContentLen = 0, intl, templateData } = this.props;
+    const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName, whatsappAccountName, intl, templateData } = this.props;
     const { formatMessage } = intl;
     const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
@@ -663,46 +663,35 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           ) : ''
         }
             {channel && channel?.toUpperCase() === WHATSAPP ? (
-              <>
-                <div className="shell-v2 align-center" id="sms-preview">
-                  <CapImage
-                    className="preview-image"
-                    src={whatsappMobileAndroid}
-                    alt={formatMessage(messages.previewGenerated)}
-                  />
-                  <div className="whatsapp-brand-name">
-                    {whatsappAccountName || ''}
-                  </div>
+              <div className="shell-v2 align-center" id="sms-preview">
+                <CapImage
+                  className="preview-image"
+                  src={whatsappMobileAndroid}
+                  alt={formatMessage(messages.previewGenerated)}
+                />
+                <div className='whatsapp-brand-name'>{whatsappAccountName || ""}</div>
+                <div
+                  className="msgContainer"
+                  style={{
+                    maxHeight: 292,
+                    marginLeft: 28,
+                  }}
+                >
                   <div
-                    className="msgContainer"
-                    style={{
-                      maxHeight: 292,
-                      marginLeft: 28,
-                    }}
-                  >
-                    <div
-                      className="message-pop align-left"
-                      style={whatsappSectionStyle}
-                    >
-                      <p
-                        style={{
-                          color: CAP_G16,
-                          margin: '1.5px 6px 1px 7px',
-                        }}
-                      >
-                        {content?.templateMsg || ''}
-                      </p>
-                      <div style={{ paddingBottom: CAP_SPACE_08 }}></div>
-                    </div>
+                    className="message-pop align-left"
+                    style={whatsappSectionStyle}>
+                    <p
+                      style={{
+                        "color": CAP_G16,
+                        "margin": '1.5px 6px 1px 7px',
+                      }}>{content?.templateMsg || ''}
+                    </p>
+                    <div style={{ paddingBottom: CAP_SPACE_08 }}></div>
                   </div>
                 </div>
-                <CapHeading type="h3" style={{ margin: '24px 0px 0px 36px' }}>
-                  <FormattedMessage {...messages.whatsappMessageLength} values={{ length: 36 + whatsappContentLen }} />
-                </CapHeading>
-              </>
-            ) : (
-              ''
-            )}
+              </div>
+            ) : ('')
+            }
             {channel && channel.toLowerCase() === FACEBOOK && (
               <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
                 <CapFacebookPreview

package/v2Components/TemplatePreview/messages.js

@@ -34,10 +34,6 @@ export default defineMessages({
     id: 'app.components.TemplatePreview.whatsappUnsubscribeLength',
     defaultMessage: "Includes 36 characters of (Click {{unsubscribe}} to unsubscribe)",
   },
-  whatsappMessageLength: {
-    id: 'app.components.TemplatePreview.whatsappMessageLength',
-    defaultMessage: "1 Message ({length} characters)",
-  },
   smsFormatType: {
     id: 'creatives.componentsV2.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -145,7 +145,6 @@ function SlideBoxContent(props) {
       showDisabledFBInfo,
       orgUnitId,
       smsRegister,
-      enableNewChannels,
     } = 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};
@@ -365,7 +364,6 @@ function SlideBoxContent(props) {
         showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
         smsRegister={smsRegister}
-        enableNewChannels={enableNewChannels}
         />
       )}
       {isPreview && (
@@ -699,6 +697,9 @@ function SlideBoxContent(props) {
       {isEditWhatsapp && (<Whatsapp
         isFullMode={isFullMode}
         templateData={templateData}
+        getFormData={getFormData}
+        getDefaultTags={type}
+        forwardedTags={forwardedTags}
         params={{
           id: templateData._id,
         }}

package/v2Containers/CreativesContainer/index.js

@@ -364,6 +364,28 @@ class Creatives extends React.Component {
           };
           break;
         }
+        case constants.WHATSAPP: {
+          const { messageBody } = templateData;
+          const body = JSON.parse(messageBody || '{}');
+          console.log("getTemplateData body", body);
+          creativesTemplateData = {
+            type: constants.WHATSAPP,
+            edit: true,
+            name: "",
+            versions: {
+              base: {
+                content: {
+                  ...body,
+                  whatsapp: {
+                    ...body.whatsapp,
+                    status: 'approved'
+                  }
+                },
+              },
+            },
+          };
+          break;
+        }
         default:
           break;
       }
@@ -420,8 +442,8 @@ class Creatives extends React.Component {
         if (get(template, "value.versions.base")) {
           const mobilpushTemplate = template.value;
           templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
-          const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
-          if (type === LOYALTY) {
+          const type = (get(this.props,"messageDetails.type") || '').toLowerCase();
+          if(type === LOYALTY){
             templateData.licenseCode = get(mobilpushTemplate, 'definition.licenseCode');
           }
           const androidContent = get(mobilpushTemplate, 'versions.base.ANDROID');
@@ -495,6 +517,26 @@ 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 whatsappContent = cloneDeep(versions.base.content.whatsapp);
+          templateData = {
+            channel,
+            accountId,
+            accountName: accountDetails.name,
+            messageBody: whatsappContent.languages[0].content,
+            category: whatsappContent.category,
+            language: whatsappContent.languages[0].language,
+            mediaType: whatsappContent.mediaType,
+          };
+        }
+        break;
       case constants.FACEBOOK: {
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
@@ -660,13 +702,11 @@ class Creatives extends React.Component {
     });
   }
   handleCloseSlideBox = () => {
-    const { currentChannel = '', slidBoxContent = '' } = this.state;
-    const reloadTemplates = currentChannel === constants.WHATSAPP && slidBoxContent === 'editTemplate';
     this.setState((prevState) => ({
       ...prevState,
       templateData: undefined,
       showSlideBox: false,
-    }), () => this.props.handleCloseCreatives(reloadTemplates));
+    }), this.props.handleCloseCreatives);
   };
   saveMessage = () => {
     this.setState({ isGetFormData: true });
@@ -821,7 +861,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, smsRegister, enableNewChannels} = 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 (
@@ -902,7 +942,6 @@ class Creatives extends React.Component {
               smsRegister={smsRegister}
               messageStrategy={this.props.strategy}
               orgUnitId={this.props.orgUnitId}
-              enableNewChannels={enableNewChannels}
           />
           }
           footer={this.shouldShowFooter() &&

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';
@@ -77,7 +78,7 @@ import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
-import { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -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();
     }
@@ -568,8 +576,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.getAllTemplates({getNextPage: true});
   }
   onCreateComplete = (isReloadTemplates) => {
+    const isWhatsappEdit = this.state.routeParams?.pathname?.includes(`${WHATSAPP_LOWERCASE}/edit`);
     this.setState({routeParams: null, previewOpen: false}, () => {
-      if (this.isFullMode() && isReloadTemplates) {
+      if (this.isFullMode() && (isReloadTemplates || isWhatsappEdit)) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -705,10 +714,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) => {
@@ -718,9 +733,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
@@ -750,6 +763,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
     let isTraiDltFeature = false;
+    console.log("getTemplateDataForGrid", currentChannel);
     switch (currentChannel) {
       case WECHAT:
         filteredTemplates = this.filterWechatTemplates(templates);
@@ -1000,22 +1014,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </CapHeading>
             </div> : (
               [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
+              isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               !isLoading &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {isEmpty(templates) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
-                {!isEmpty(templates) && isEmpty(filteredTemplates) && <CapHeader
-                  title={
-                    <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_44 }}>
-                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesTitle)}
-                    </CapHeading>
-                  }
-                  description={
-                    <CapLabel style={{ textAlign: "center" }}>
-                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesDesc)}
-                    </CapLabel>
-                  }
-                />}
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
             )
           }
@@ -1325,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},
@@ -2227,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();
@@ -2300,14 +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} >
-      { 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 }}/>;
@@ -2339,16 +2358,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}
@@ -2357,7 +2379,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               placeholder="Category"
               showBadge={true}
               width="105px"
-              overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
           
@@ -2481,10 +2502,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
+
+          {
+            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
+              <CapAlert message={whatsappCountExceedText} type="info" />
+            ) : null
+          }
               {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
             </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`,
@@ -342,14 +346,6 @@ export default defineMessages({
     id: `${scope}.whatsappDescIllustration`,
     defaultMessage: 'These templates can be reused when creating a\nnew message content.',
   },
-  "noFilteredWhatsappTemplatesTitle": {
-    id: `${scope}.noFilteredWhatsappTemplatesTitle`,
-    defaultMessage: 'Sorry, we couldn’t find any matches',
-  },
-  "noFilteredWhatsappTemplatesDesc": {
-    id: `${scope}.noFilteredWhatsappTemplatesDesc`,
-    defaultMessage: 'Please try searching with another term or apply different filter',
-  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',

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,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       isFullMode,
       onChannelChange,
       showDisabledFBInfo,
-      enableNewChannels,
     } = props;
 
     const defaultPanes = {
@@ -80,9 +80,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         filteredPanes.push({content: <></>, tab: intl.formatMessage(messages.FTP), key: 'ftp'});
         defaultChannel = 'FTP';
       }
-      if (!enableNewChannels.includes('WHATSAPP')) {
-        filteredPanes.splice(7, 1);
-      }
     }
 
 
@@ -124,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);