@capillarytech/creatives-library 7.10.48 → 7.10.49

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, intl, templateData } = this.props;
+    const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName, whatsappAccountName, whatsappContentLen = 0, intl, templateData } = this.props;
     const { formatMessage } = intl;
     const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
@@ -663,35 +663,46 @@ 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="msgContainer"
-                  style={{
-                    maxHeight: 292,
-                    marginLeft: 28,
-                  }}
-                >
+              <>
+                <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="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>
+                    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>
                   </div>
                 </div>
-              </div>
-            ) : ('')
-            }
+                <CapHeading type="h3" style={{ margin: '24px 0px 0px 36px' }}>
+                  <FormattedMessage {...messages.whatsappMessageLength} values={{ length: 36 + whatsappContentLen }} />
+                </CapHeading>
+              </>
+            ) : (
+              ''
+            )}
             {channel && channel.toLowerCase() === FACEBOOK && (
               <div style={{position: 'absolute', left: '80%'}} id="facebook-preview">
                 <CapFacebookPreview

package/v2Components/TemplatePreview/messages.js

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

package/v2Containers/CreativesContainer/index.js

@@ -364,28 +364,6 @@ 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;
       }
@@ -442,8 +420,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');
@@ -517,27 +495,6 @@ 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);
-          console.log("accountDetailsaccountDetails", accountDetails, accountDetails.name)
-          templateData = {
-            channel,
-            accountId,
-            accountName: accountDetails.name,
-            messageBody: JSON.stringify(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;
@@ -703,11 +660,13 @@ 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);
+    }), () => this.props.handleCloseCreatives(reloadTemplates));
   };
   saveMessage = () => {
     this.setState({ isGetFormData: true });
@@ -862,7 +821,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} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor, smsRegister, enableNewChannels} = 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 (
@@ -943,6 +902,7 @@ class Creatives extends React.Component {
               smsRegister={smsRegister}
               messageStrategy={this.props.strategy}
               orgUnitId={this.props.orgUnitId}
+              enableNewChannels={enableNewChannels}
           />
           }
           footer={this.shouldShowFooter() &&

package/v2Containers/Templates/index.js

@@ -77,7 +77,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 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -568,9 +568,8 @@ 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 || isWhatsappEdit)) {
+      if (this.isFullMode() && isReloadTemplates) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -706,16 +705,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   isStatusMatching = (status, selectedWhatsappStatus) => {
-    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;
+    if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
+      return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
     }
-    return true;
+      return selectedWhatsappStatus === status;
   }
 
   filterWhatsappTemplates = (templates) => {
@@ -725,7 +718,9 @@ 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 (
-        this.isStatusMatching(status, selectedWhatsappStatus)
+        selectedWhatsappStatus
+        ? this.isStatusMatching(status, selectedWhatsappStatus)
+        : true
       ) && (
         selectedWhatsappCategory
         ? category === selectedWhatsappCategory
@@ -755,7 +750,6 @@ 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);
@@ -1006,11 +1000,22 @@ 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'} : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+              <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>
             )
           }
@@ -2300,9 +2305,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       type={"primary"}
       disabled={this.isCreateDisabled()}
       style={{marginLeft: '8px', marginBottom: '12px'}}
-      onClick={this.createTemplate}
-      target={channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode ? "_blank" : null}
-      >
+      onClick={this.createTemplate} >
       { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
     </CapButton>);
 
@@ -2336,19 +2339,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       {
         channel.toUpperCase() === WHATSAPP && (
           <div className="whatsapp-filters">
-            {
-              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={STATUS_OPTIONS}
+              onSelect={this.setWhatsappStatus}
+              selectedValue={this.state.selectedWhatsappStatus}
+              placeholder="Status"
+              showBadge={true}
+              width="90px"
+              overlayStyle={{ overflowY: "hidden" }}
+            />
             <CapSelectFilter
               placement="bottomLeft"
               data={CATEGORY_OPTIONS}
@@ -2357,6 +2357,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               placeholder="Category"
               showBadge={true}
               width="105px"
+              overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
           
@@ -2480,21 +2481,10 @@ 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

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

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

package/v2Containers/Whatsapp/index.js

@@ -73,7 +73,6 @@ export const Whatsapp = (props) => {
     metaEntities,
     injectedTags,
     loadingTags,
-    getFormData
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -92,9 +91,7 @@ export const Whatsapp = (props) => {
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
-  const [templateStatus, setTemplateStatus] = useState(
-    WHATSAPP_STATUSES.unsubmitted,
-  );
+  const [templateStatus, setTemplateStatus] = useState();
   const [templateRejectionReason, setTemplateRejectionReason] = useState(null);
   const [tempMsgArray, updateTempMsgArray] = useState([]);
   const [updatedSmsEditor, setUpdatedSmsEditor] = useState([]);
@@ -111,8 +108,7 @@ 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};
     }
@@ -144,6 +140,7 @@ export const Whatsapp = (props) => {
         setSpin(true);
         actions.getTemplateDetails(id);
       }
+      setEditFlow(true);
     }
     //cleanup code
     return () => {
@@ -157,10 +154,9 @@ export const Whatsapp = (props) => {
       name = '',
       versions = {},
       createdAt = '',
-    } = isFullMode ? editData.templateDetails : templateData;
+    } = editData.templateDetails || templateData || {};
     editContent = get(versions, `base.content.whatsapp`, {});
     if (editContent && !isEmpty(editContent)) {
-      setEditFlow(true);
       setTemplateName(name);
       setTemplateDate(createdAt);
       const {
@@ -471,16 +467,13 @@ export const Whatsapp = (props) => {
             languages: [
               {
                 language: 'en',
-                content: 
-                  isEditFlow 
-                  ? `${updatedSmsEditor.join('')} ${formatMessage(messages.templateMessageUnsubscribeText)}`
-                  : `$'${templateMessage}\nClick {{${
-                    addedVarCount + 1 }}} to unsubscribe'`,
+                content: `$'${templateMessage}\nClick {{${
+                  addedVarCount + 1
+                }}} to unsubscribe'`,
               },
             ],
-            mediaType: 'TEXT',
-            varMapped: varMap,
-            templateEditor: templateMessage,
+            mediaType: 'text',
+            varMapped: {},
             accountId,
             accessToken,
             accountName,
@@ -525,15 +518,6 @@ export const Whatsapp = (props) => {
     }
   };
 
-  const saveToMessage = () => {
-    getFormData({
-      value: createPayload(),
-      _id: params?.paramObj?.id,
-      validity: true,
-      type: 'WHATSAPP',
-    });
-  }
-
   const isDisableDone = () => {
     //if template name is not entered
     if (templateName.trim() === '' || templateNameError) {
@@ -791,10 +775,12 @@ export const Whatsapp = (props) => {
 
   const editModeContent = (
     <>
-      <CapAlert
-        message={getTemplateStatusMessage()}
-        type={getTemplateStatusType()}
-      />
+      {templateStatus && (
+        <CapAlert
+          message={getTemplateStatusMessage()}
+          type={getTemplateStatusType()}
+        />
+      )}
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -848,6 +834,7 @@ export const Whatsapp = (props) => {
       <TemplatePreview
         channel={WHATSAPP}
         content={{ templateMsg }}
+        whatsappContentLen={isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length}
         whatsappAccountName={accountName}
       />
     );
@@ -887,17 +874,6 @@ export const Whatsapp = (props) => {
             </CapButton>
           </>
         )}
-        {!isFullMode && isEditFlow && (
-          <>
-            <CapButton
-              onClick={saveToMessage}
-              //disabled={isDisableDone()}
-              className="whatsapp-create-btn"
-            >
-              <FormattedMessage {...messages.done} />
-            </CapButton>
-          </>
-        )}
       </WhatsappFooter>
     </CapSpin>
   );

package/v2Containers/Whatsapp/messages.js

@@ -232,8 +232,4 @@ export default defineMessages({
     id: `${prefix}.disabledEditTooltipStatus`,
     defaultMessage: 'awaiting for approval',
   },
-  done: {
-    id: `${prefix}.done`,
-    defaultMessage: 'Done',
-  },
 });