@capillarytech/creatives-library 8.0.208 → 8.0.210

package/v2Containers/Templates/index.js

@@ -104,7 +104,7 @@ import {
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
 } from '../App/constants';
-import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL} from './constants';
+import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc} from './constants';
 import { COPY_OF } from '../../constants/unified';
 import {
   STATUS_OPTIONS,
@@ -196,6 +196,9 @@ const SMS_FILTERS = {
 const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
 const RCS_LOWERCASE = RCS.toLowerCase();
 const SMS_LOWERCASE = SMS.toLowerCase();
+const EMAIL_LOWERCASE = EMAIL.toLowerCase();
+const VIBER_LOWERCASE = VIBER.toLowerCase();
+const FB_LOWERCASE = FACEBOOK.toLowerCase();
 const MOBILE_PUSH_LOWERCASE = MOBILE_PUSH.toLowerCase();
 const INAPP_LOWERCASE = INAPP.toLowerCase();
 const EBILL_LOWERCASE = EBILL.toLowerCase();
@@ -1157,7 +1160,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     />
 
   getSmsEmailIllustration = () => {
-    this.props.isDltFromRcs ? (
+    return this.props.isDltFromRcs ? (
       <CapHeader
         title={
           <CapHeading type="h3" className="channel-specific-illustration-text">
@@ -1171,7 +1174,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       />
     ) : (
-      <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={this.state.channel} hostName={this.state?.hostName}/>
+      <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={this.state?.channel?.toUpperCase()} hostName={this.state?.hostName}/>
     );
   }
 
@@ -1716,18 +1719,35 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       return templateData;
     }) : [];
 
+    //no templates available
+    const showIllustrationForChannel = (forChannel) => {
+      return forChannel === channelLowerCase && isEmpty(templates) && isEmpty(this.state.searchText) && !isLoading;
+    }
+    //when filters applied not matching templates
+    const filteredEmptyAndFullModeAs = (fullModeValue) => {
+      return this.isFullMode() === fullModeValue && isEmpty(filteredTemplates);
+    }
+    // // return true when channel matches and either account is selected or hostName is missing
+    const accountWithNoHostWhatsapp = (forChannel) => {
+      return [forChannel]?.includes(channelLowerCase) &&  (!isEmpty(this.props?.Templates?.selectedWhatsappAccount) || !this.state?.hostName);
+    }
+    // // return true when channel matches and either account is selected or hostName is missing
+    const accountWithNoHostZalo = (forChannel) => {
+      return [forChannel]?.includes(channelLowerCase) && (!isEmpty(this.props?.Templates?.selectedZaloAccount) || !this.state?.hostName );
+    }
+    
     const accountId = get(this.props, 'Templates.selectedWeChatAccount.uuid');
     const accounts = get(this.props, 'Templates.weCrmAccounts');
     const getAllTemplatesInProgress = get(this.props, 'Templates.getAllTemplatesInProgress');
+
     const noWhatsappZaloTemplates = this.isFullMode() && isEmpty(templates) || !this.state.hostName;
-    const noFilteredWhatsappZaloTemplates = this.isFullMode() && !isEmpty(templates) && isEmpty(filteredTemplates);
-    const noApprovedRcsTemplates = !this.isFullMode() && isEmpty(filteredTemplates);
-    const noApprovedWhatsappZaloTemplates = !this.isFullMode() && isEmpty(filteredTemplates) && !isEmpty(this.state?.hostName);;
-    const showWhatsappIllustration = (!isEmpty(this.props.Templates.selectedWhatsappAccount) && [WHATSAPP_LOWERCASE].includes(channelLowerCase)) || !this.state?.hostName ;
-    const showZaloIllustration = !isEmpty(this.props.Templates.selectedZaloAccount) && [ZALO_LOWERCASE].includes(channelLowerCase);
-    const showRcsIllustration = channelLowerCase === RCS_LOWERCASE && isEmpty(templates);
-    const showInAppIllustration = channelLowerCase === INAPP_LOWERCASE && isEmpty(templates);
+
+    const noApprovedWhatsappZaloTemplates = filteredEmptyAndFullModeAs(false) && !isEmpty(this.state?.hostName);
+    const showWhatsappIllustration = accountWithNoHostWhatsapp(WHATSAPP_LOWERCASE);
+    const showZaloIllustration = accountWithNoHostZalo(ZALO_LOWERCASE)
+    
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
+
     return (<div>
       {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO].includes(currentChannel) && this.showAccountName()}
       {filterContent}
@@ -1744,10 +1764,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 fbType={"list"}
                 />
             </div>)
-            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && !isLoading && this.getSmsEmailIllustration()
+            : [SMS_LOWERCASE, EMAIL_LOWERCASE].includes(this.state.channel.toLowerCase()) && !isLoading && this.getSmsEmailIllustration()
           }
 
-          {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (['wechat', 'mobilepush', INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) &&
+          {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && ([WECHAT_LOWERCASE, MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) &&
           <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh' }}>
             <CapHeading type="h6">{accounts ? this.props.intl.formatMessage(messages.noAccountMessage) : this.props.intl.formatMessage(messages.noAccountsPresent)}</CapHeading>
           </div>
@@ -1762,9 +1782,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 </InlineDiv>
               </CapHeading>
             </div> : (
-              ["mobilepush"].includes(this.state.channel.toLowerCase()) &&
-              isEmpty(filteredTemplates) &&
-              isEmpty(this.state.searchText) &&
+              showIllustrationForChannel(MOBILE_PUSH_LOWERCASE) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
                 <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>
               </div>
@@ -1774,27 +1792,37 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
                 {noWhatsappZaloTemplates && <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>}
-                {noFilteredWhatsappZaloTemplates && this.state?.hostName && this.whatsappZaloIllustrationText('noFilteredWhatsappZaloTemplatesTitle', 'noFilteredWhatsappZaloTemplatesDesc')}
-                {noApprovedWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noApprovedWhatsappZaloTemplatesTitle', showWhatsappIllustration ? 'noApprovedWhatsappTemplatesDesc' : 'zaloDescIllustration')}
+                {filteredEmptyAndFullModeAs(true) && !isEmpty(templates) && this.state?.hostName && this.whatsappZaloIllustrationText(noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc)}
+                {noApprovedWhatsappZaloTemplates && this.whatsappZaloIllustrationText(noApprovedWhatsappZaloTemplatesTitle, showWhatsappIllustration ? noApprovedWhatsappTemplatesDesc : zaloDescIllustration)}
               </div>
             )
           }
-          {showRcsIllustration &&
-            (
-            noLoaderAndSearchText &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
+          {showIllustrationForChannel(RCS_LOWERCASE) && 
+            <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
+              <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
+              {filteredEmptyAndFullModeAs(false) && this.whatsappZaloIllustrationText(noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc)}
+            </div>
+          }
+          {showIllustrationForChannel(INAPP_LOWERCASE) && 
+            <div className={`${this.isFullMode() ? 'inapp-illustration-parent' : ''}`}>
+              <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} />
+            </div>
+          }
+          
+          {showIllustrationForChannel(VIBER_LOWERCASE) &&
+              <div className={`${this.isFullMode() ? 'viber-illustration-parent' : ''}`}>
                 <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
-                {noApprovedRcsTemplates && this.whatsappZaloIllustrationText('noApprovedRcsTemplatesTitle', 'noApprovedRcsTemplatesDesc')}
               </div>
-            )
           }
-          {showInAppIllustration &&
-            (
-            noLoaderAndSearchText &&
-              <div className={`${this.isFullMode() ? 'inapp-illustration-parent' : ''}`}>
+          {showIllustrationForChannel(FB_LOWERCASE) &&
+              <div className={`${this.isFullMode() ? 'fb-illustration-parent' : ''}`}>
+                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
+              </div>
+          }
+          {showIllustrationForChannel(LINE_LOWERCASE) &&
+              <div className={`${this.isFullMode() ? 'line-illustration-parent' : ''}`}>
                 <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               </div>
-            )
           }
         </div>
         }

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -249,20 +249,11 @@ exports[`Test Templates container Should render sms illustration when no templat
           </div>
           <CapCustomSkeleton>
             <div>
-              <div
-                style={
-                  Object {
-                    "height": "calc(100vh - 325px)",
-                    "overflow": "auto",
-                  }
-                }
-              >
-                <ChannelTypeIllustration
-                  createTemplate={[Function]}
-                  currentChannel="SMS"
-                  hostName=""
-                />
-              </div>
+              <ChannelTypeIllustration
+                createTemplate={[Function]}
+                currentChannel="SMS"
+                hostName=""
+              />
             </div>
           </CapCustomSkeleton>
         </div>

package/v2Containers/Whatsapp/index.js

@@ -1711,6 +1711,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   const saveToMessage = () => {
+    console.log("saveToMessage----> createPayload", createPayload());
     getFormData({
       value: createPayload(),
       _id: params?.id,