@capillarytech/creatives-library 7.10.47 → 7.10.49

package/package.json

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

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 && (

package/v2Containers/CreativesContainer/index.js

@@ -420,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');
@@ -821,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 (
@@ -902,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/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

@@ -834,6 +834,7 @@ export const Whatsapp = (props) => {
       <TemplatePreview
         channel={WHATSAPP}
         content={{ templateMsg }}
+        whatsappContentLen={isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length}
         whatsappAccountName={accountName}
       />
     );