@capillarytech/creatives-library 8.0.206-alpha.0 → 8.0.206

package/package.json

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

package/v2Containers/Templates/index.js

@@ -37,6 +37,7 @@ import {
   CapLink,
   CapHeading,
   CapNotification,
+  CapIllustration,
   CapHeader,
   CapLabel,
   CapRadio,
@@ -96,7 +97,6 @@ import CreativesContainer from '../CreativesContainer';
 import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import CapCustomSkeleton from '../../v2Components/CapCustomSkeleton';
-import ChannelTypeIllustration from './ChannelTypeIllustration';
 import {
   CHANNEL_CREATE_TRACK_MAPPING,
   CHANNEL_EDIT_TRACK_MAPPING,
@@ -139,6 +139,14 @@ import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP
 
 import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
+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 whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAccountIllustration.svg';
+import rcsIllustration from '../Assets/images/rcsIllustration.png';
+import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
+import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 import whatsappImageEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_image_preview.svg';
 import whatsappVideoEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_video_preview.svg';
 import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -1156,7 +1164,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     />
 
-  getSmsEmailIllustration = () => {
+  getSmsEmailIllustration = () =>
     this.props.isDltFromRcs ? (
       <CapHeader
         title={
@@ -1171,9 +1179,13 @@ 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}/>
+      <CapIllustration
+        buttonClassName={`create-new-${this.state.channel.toLowerCase()}`}
+        {...this.getChannelTypeIllustrationInfo(
+          this.state.channel.toUpperCase(),
+        )}
+      />
     );
-  }
 
   getHoverComponent = (children) => {
     return this.state.channel.toLowerCase() === ZALO_LOWERCASE ? (
@@ -1766,14 +1778,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel} hostName={this.state?.hostName}/>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel, this.state?.hostName)} />
               </div>
             )
           }
           {(showWhatsappIllustration || showZaloIllustration) && (
             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}/>}
+                {noWhatsappZaloTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel, isEmpty(this.state?.hostName))} />}
                 {noFilteredWhatsappZaloTemplates && this.state?.hostName && this.whatsappZaloIllustrationText('noFilteredWhatsappZaloTemplatesTitle', 'noFilteredWhatsappZaloTemplatesDesc')}
                 {noApprovedWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noApprovedWhatsappZaloTemplatesTitle', showWhatsappIllustration ? 'noApprovedWhatsappTemplatesDesc' : 'zaloDescIllustration')}
               </div>
@@ -1783,7 +1795,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             (
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
                 {noApprovedRcsTemplates && this.whatsappZaloIllustrationText('noApprovedRcsTemplatesTitle', 'noApprovedRcsTemplatesDesc')}
               </div>
             )
@@ -1792,7 +1804,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             (
             noLoaderAndSearchText &&
               <div className={`${this.isFullMode() ? 'inapp-illustration-parent' : ''}`}>
-                <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
             )
           }
@@ -2871,7 +2883,99 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (rcsLoader !== undefined ? rcsLoader : false);
     return isLoading;
   }
- 
+  getChannelTypeIllustrationInfo = (type, hostNameNotFound) => {
+    const { isFullMode, intl } = this.props;
+    const templateIntlMsg = intl.formatMessage(messages.template);
+    const templateText = isFullMode ? templateIntlMsg : '';
+    switch (type) {
+      case 'SMS':
+        return {
+          buttonLabel: <FormattedMessage {...messages.newSMSTemplate} values={{ template: templateText }} />,
+          onClick: this.createTemplate,
+          illustrationImage: smsIllustration,
+          title: <FormattedMessage {...messages.smsTitleIllustartion} values={{ template: templateText }} />,
+        };
+      case 'EMAIL':
+        return {
+          buttonLabel: <FormattedMessage {...messages.newEmailTemplate} values={{ template: templateText }} />,
+          onClick: this.createTemplate,
+          illustrationImage: emailIllustration,
+          title: <FormattedMessage {...messages.emailTitleIllustartion} values={{ template: templateText }} />,
+        };
+      case 'MOBILEPUSH':
+        return {
+          buttonLabel: <FormattedMessage {...messages.newNotificationTemplate} values={{ template: templateText }} />,
+          onClick: this.createTemplate,
+          illustrationImage: pushIllustration,
+          title: <FormattedMessage {...messages.pushTitleIllustartion} values={{ template: templateText }} />,
+        };
+      case WHATSAPP: {
+        if (hostNameNotFound) {
+          return {
+            illustrationImage: whatsappOrZaloAccountIllustration,
+            title: <FormattedMessage {...messages.whatsappAccountNotConfiguredTitle} />,
+            description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
+            descriptionPosition: 'bottom',
+            descriptionClassName: 'illustration-desc zalo-illustration',
+            buttonClassName: "zalo-illustration-button",
+          };
+        } else {
+          return {
+            buttonLabel: <FormattedMessage {...messages.newWhatsappTemplate} values={{ template: templateText }} />,
+            onClick: this.createTemplate,
+            illustrationImage: whatsappIllustration,
+            title: <FormattedMessage {...messages.whatsappTitleIllustration} values={{ template: templateText }} />,
+            description: <FormattedMessage {...messages.whatsappDescIllustration} />,
+            descriptionPosition: 'bottom',
+            descriptionClassName: 'illustration-desc',
+            
+          };
+        }
+      }
+      case RCS:
+        return {
+          buttonLabel: <FormattedMessage {...messages.newRCSTemplate} values={{ template: templateText }} />,
+          onClick: this.createTemplate,
+          illustrationImage: rcsIllustration,
+          title: <FormattedMessage {...messages.rcsTitleIllustartion} values={{ template: templateText }} />,
+          description: <FormattedMessage {...messages.rcsDescIllustartion} />,
+          descriptionPosition: 'bottom',
+          descriptionClassName: 'illustration-desc rcs-illustration',
+        };
+      case ZALO:{
+        if (hostNameNotFound) {
+          return {
+            illustrationImage: whatsappOrZaloAccountIllustration,
+            title: <FormattedMessage {...messages.zaloAccountNotConfiguredTitle} />,
+            description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
+            descriptionPosition: 'bottom',
+            descriptionClassName: 'illustration-desc zalo-illustration',
+            buttonClassName: "zalo-illustration-button",
+          };
+        } else {
+          return {
+            illustrationImage: zaloillustration,
+            title: <FormattedMessage {...messages.zaloTitleIllustration} />,
+            description: <FormattedMessage {...messages.zaloDescIllustration} />,
+            descriptionPosition: 'bottom',
+            descriptionClassName: 'illustration-desc zalo-illustration',
+            buttonClassName: "zalo-illustration-button",
+          };
+        }
+      }
+      case INAPP:
+        return {
+          illustrationImage: inAppIllustration,
+          title: <FormattedMessage {...messages.inAppTitleIllustration} />,
+          description: <FormattedMessage {...messages.inAppDescIllustration} />,
+          descriptionPosition: 'bottom',
+          descriptionClassName: 'illustration-desc inapp-illustration',
+          buttonClassName: "inapp-illustration-button",
+        }
+      default:
+        return {};
+    }
+  }
   checkSearchDisabled = () => (this.props.route.name === "mobilepush" && !(this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier && this.props.Templates.selectedWeChatAccount.configs && (this.props.Templates.selectedWeChatAccount.configs.ios === '1' || this.props.Templates.selectedWeChatAccount.configs.android === '1')))
   renderEmailPreviewModal() {
     const slideboxContent = (

package/v2Containers/Templates/messages.js

@@ -326,18 +326,6 @@ export default defineMessages({
     id: `${scope}.newEmailTemplate`,
     defaultMessage: 'New email {template}',
   },
-  "newViberTemplate": {
-    id: `${scope}.newViberTemplate`,
-    defaultMessage: 'New Viber {template}',
-  },
-  "newLineTemplate": {
-    id: `${scope}.newLineTemplate`,
-    defaultMessage: 'New Line {template}',
-  },
-  "newFacebookTemplate": {
-    id: `${scope}.newFacebookTemplate`,
-    defaultMessage: 'New Facebook {template}',
-  },
   "newWhatsappTemplate": {
     id: `${scope}.newWhatsappTemplate`,
     defaultMessage: 'Add new Whatsapp {template}',
@@ -358,18 +346,6 @@ export default defineMessages({
     id: `${scope}.emailTitleIllustartion`,
     defaultMessage: 'Create an email {template}',
   },
-  "viberTitleIllustartion": {
-    id: `${scope}.viberTitleIllustartion`,
-    defaultMessage: 'Create a viber {template}',
-  },
-  "lineTitleIllustartion": {
-    id: `${scope}.lineTitleIllustartion`,
-    defaultMessage: 'Create a line {template}',
-  },
-  "facebookTitleIllustartion": {
-    id: `${scope}.facebookTitleIllustartion`,
-    defaultMessage: 'Create a facebook {template}',
-  },
   "whatsappTitleIllustration": {
     id: `${scope}.whatsappTitleIllustration`,
     defaultMessage: 'Add a new Whatsapp creative {template}',

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

@@ -184,136 +184,6 @@ exports[`Test Templates container Should render illustration when no templates a
 </CapSkeleton>
 `;
 
-exports[`Test Templates container Should render sms illustration when no templates are passed 1`] = `
-<Fragment>
-  <div
-    className="creatives-templates-list library-mode"
-  >
-    <input
-      accept=".zip, .html, .htm"
-      id="filename"
-      onChange={[Function]}
-      style={
-        Object {
-          "display": "none",
-        }
-      }
-      type="file"
-    />
-    <CapRow>
-      <Pagination
-        onPageChange={[Function]}
-        paginationContainer="pagination-container"
-        paginationSelector="pagination-container"
-      >
-        <div>
-          <div
-            className="action-container"
-          >
-            <_Class
-              className="search-text"
-              disabled={false}
-              labelPosition="top"
-              onChange={[Function]}
-              onClear={[Function]}
-              onScroll={[Function]}
-              placeholder="Search"
-              style={
-                Object {
-                  "width": "210px",
-                }
-              }
-              value=""
-            />
-            <Component />
-            <Component />
-            <div
-              style={
-                Object {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "justifyContent": "space-between",
-                }
-              }
-            >
-              <CapButton
-                className="create-new-sms margin-l-8 margin-b-12"
-                disabled={false}
-                isAddBtn={false}
-                onClick={[Function]}
-                type="primary"
-              >
-                Create new
-              </CapButton>
-            </div>
-          </div>
-          <CapCustomSkeleton>
-            <div>
-              <div
-                style={
-                  Object {
-                    "height": "calc(100vh - 325px)",
-                    "overflow": "auto",
-                  }
-                }
-              >
-                <ChannelTypeIllustration
-                  createTemplate={[Function]}
-                  currentChannel="SMS"
-                  hostName=""
-                />
-              </div>
-            </div>
-          </CapCustomSkeleton>
-        </div>
-      </Pagination>
-    </CapRow>
-    <CapRow />
-    <CapRow>
-      <CapSlideBox
-        closeIconPosition="right"
-        closeIconSize="m"
-        closeIconType="close"
-        content={
-          <CardGrid
-            className=""
-            colNumber={2}
-            gutterSize={16}
-            isLoading={false}
-            listItem={Array []}
-            onHoverItem={[Function]}
-            onItemClick={[Function]}
-          />
-        }
-        handleClose={[Function]}
-        header={
-          <h3>
-            Select layout
-          </h3>
-        }
-        loadingText="Loading EDM Templates"
-        position="right"
-        show={false}
-        size="size-r"
-        width={60}
-      />
-      <InjectIntl(Wrapper)
-        centered={true}
-        className="delete-template-confirm"
-        closeText="Cancel"
-        okText="Yes, delete"
-        onCancel={[Function]}
-        onOk={[Function]}
-        title="Confirm delete template"
-        visible={false}
-      >
-        Are you sure you wish to delete this template?
-      </InjectIntl(Wrapper)>
-    </CapRow>
-  </div>
-</Fragment>
-`;
-
 exports[`Test Templates container Should render temlates when Zalo templates are passed in full mode 1`] = `
 <CapSkeleton
   active={true}

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

@@ -28,26 +28,13 @@ describe('Test Templates container', () => {
     jest.clearAllMocks();
   });
 
-  const getTemplateProps =(channel)=>{
-    switch(channel){
-      case 'whatsapp':
-        return TemplatesProp;
-      case 'zalo':
-        return ZaloTemplateProp;
-      case 'rcs':
-        return rcsTemplates;
-      default:
-        return TemplatesProp;
-    }
-  }
-
-  const RenderFunctionFor = (channel, isFullMode) => {
+  const renderFunction = (isFullMode) => {
     renderedComponent = shallowWithIntl(
       <Templates
         route={{
-          name: channel,
+          name: 'whatsapp',
         }}
-        Templates={getTemplateProps(channel)}
+        Templates={TemplatesProp}
         actions={{
           getWeCrmAccounts,
           setChannelAccount,
@@ -56,7 +43,67 @@ describe('Test Templates container', () => {
           getSenderDetails,
         }}
         location={{
-          pathname: `/${channel}`,
+          pathname: '/whatsapp',
+          query: {},
+          search: '',
+        }}
+        EmailCreate={{
+          duplicateTemplateInProgress: false,
+        }}
+        isFullMode={isFullMode}
+        intl={{
+          formatMessage: () => {},
+        }}
+      />,
+    );
+  };
+
+  const renderZaloFunction = (isFullMode) => {
+    renderedComponent = shallowWithIntl(
+      <Templates
+        route={{
+          name: 'Zalo',
+        }}
+        Templates={ZaloTemplateProp}
+        actions={{
+          getWeCrmAccounts,
+          setChannelAccount,
+          getAllTemplates,
+          getUserList,
+          getSenderDetails,
+        }}
+        location={{
+          pathname: '/Zalo',
+          query: {},
+          search: '',
+        }}
+        EmailCreate={{
+          duplicateTemplateInProgress: false,
+        }}
+        isFullMode={isFullMode}
+        intl={{
+          formatMessage: () => {},
+        }}
+      />,
+    );
+  };
+
+  const renderRcsFunction = (isFullMode) => {
+    renderedComponent = shallowWithIntl(
+      <Templates
+        route={{
+          name: 'RCS',
+        }}
+        Templates={rcsTemplates}
+        actions={{
+          getWeCrmAccounts,
+          setChannelAccount,
+          getAllTemplates,
+          getUserList,
+          getSenderDetails,
+        }}
+        location={{
+          pathname: '/rcs',
           query: {},
           search: '',
         }}
@@ -72,7 +119,7 @@ describe('Test Templates container', () => {
   };
 
   it('Should render correct component for whatsapp channel', () => {
-    RenderFunctionFor('whatsapp');
+    renderFunction();
     expect(renderedComponent).toMatchSnapshot();
     expect(getSenderDetails).toHaveBeenCalledTimes(1);
     expect(getSenderDetails).toHaveBeenCalledWith({
@@ -82,22 +129,13 @@ describe('Test Templates container', () => {
   });
 
   it('Should render temlates when whatsapp templates are passed', () => {
-    RenderFunctionFor('whatsapp');
+    renderFunction();
     renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render illustration when no templates are passed', () => {
-    RenderFunctionFor('whatsapp');
-    renderedComponent.setProps({
-      TemplatesList: [],
-      Templates: {},
-    });
-    expect(renderedComponent).toMatchSnapshot();
-  });
-
-  it('Should render sms illustration when no templates are passed', () => {
-    RenderFunctionFor('sms');
+    renderFunction();
     renderedComponent.setProps({
       TemplatesList: [],
       Templates: {},
@@ -106,14 +144,14 @@ describe('Test Templates container', () => {
   });
 
   it('Should render temlates when whatsapp templates are passed in full mode', () => {
-    RenderFunctionFor('whatsapp',true);
+    renderFunction(true);
     renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
     renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Test getCreatives params in edit mode', () => {
-    RenderFunctionFor('whatsapp');
+    renderFunction();
     renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
     renderedComponent.setState({ routeParams: { pathname: '/edit' } });
     expect(renderedComponent.instance().getCreativesParams()).toEqual(
@@ -121,21 +159,21 @@ describe('Test Templates container', () => {
     );
   });
   it('Should render correct component for zalo channel', () => {
-    RenderFunctionFor('zalo');
+    renderZaloFunction();
     expect(renderedComponent).toMatchSnapshot();
   });
   it('Should render temlates when zalo templates are passed', () => {
-    RenderFunctionFor('zalo');
+    renderZaloFunction();
     renderedComponent.setProps({ TemplatesList: ZaloTemplateProp.templates });
     expect(renderedComponent).toMatchSnapshot();
   });
   it('Should render temlates when Zalo templates are passed in full mode', () => {
-    RenderFunctionFor('zalo',true);
+    renderZaloFunction(true);
     renderedComponent.setProps({ TemplatesList: ZaloTemplateProp.templates });
     expect(renderedComponent).toMatchSnapshot();
   });
   it('Should render illustration when no templates are passed', () => {
-    RenderFunctionFor('zalo');
+    renderZaloFunction();
     renderedComponent.setProps({
       TemplatesList: [],
       Templates: {},
@@ -149,7 +187,7 @@ describe('Test Templates container', () => {
     return shallowWithIntl(<FilterContainer />);
   };
   it('Test removing single filter', () => {
-    RenderFunctionFor('whatsapp');
+    renderFunction();
     renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
     renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
     getFilterContainer().find('CapTag').props().onClose();
@@ -157,7 +195,7 @@ describe('Test Templates container', () => {
   });
 
   it('Test removing all whatsapp filterss', () => {
-    RenderFunctionFor('whatsapp');
+    renderFunction();
     renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
 
     renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
@@ -170,7 +208,7 @@ describe('Test Templates container', () => {
   });
 
   it('Test max templates not exceeded', () => {
-    RenderFunctionFor('whatsapp',true);
+    renderFunction(true);
     renderedComponent.setProps({
       TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 260 }],
     });
@@ -178,7 +216,7 @@ describe('Test Templates container', () => {
   });
 
   it('Test max templates exceeded', () => {
-    RenderFunctionFor('whatsapp',true);
+    renderFunction(true);
     renderedComponent.setProps({
       TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 1510 }],
     });
@@ -186,7 +224,7 @@ describe('Test Templates container', () => {
   });
 
   it('Test max templates warning', () => {
-    RenderFunctionFor('whatsapp',true);
+    renderFunction(true);
     renderedComponent.setProps({
       TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 248 }],
     });
@@ -194,7 +232,7 @@ describe('Test Templates container', () => {
   });
 
   it('Should render correct component for RCS channel', () => {
-    RenderFunctionFor('rcs');
+    renderRcsFunction();
     expect(renderedComponent).toMatchSnapshot();
     expect(getSenderDetails).toHaveBeenCalledTimes(1);
     expect(getSenderDetails).toHaveBeenCalledWith({
@@ -204,13 +242,13 @@ describe('Test Templates container', () => {
   });
 
   it('Should render templates when RCS templates are passed', () => {
-    RenderFunctionFor('rcs');
+    renderRcsFunction();
     renderedComponent.setProps({ TemplatesList: rcsTemplates.templates });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render illustration when no RCS templates are passed', () => {
-    RenderFunctionFor('rcs');
+    renderRcsFunction();
     renderedComponent.setProps({
       TemplatesList: [],
       Templates: {},
@@ -219,14 +257,14 @@ describe('Test Templates container', () => {
   });
 
   it('Should render templates when RCS templates are passed in full mode', () => {
-    RenderFunctionFor('rcs',true);
+    renderRcsFunction(true);
     renderedComponent.setProps({ TemplatesList: rcsTemplates.templates });
     renderedComponent.setState({ selectedRcsStatus: 'approved' });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Test getCreatives params in edit mode for RCS', () => {
-    RenderFunctionFor('rcs');
+    renderRcsFunction();
     renderedComponent.setProps({ TemplatesList: rcsTemplates.templates });
     renderedComponent.setState({ routeParams: { pathname: '/edit' } });
     const getCreativesParamsOutputRcs = {

package/v2Containers/Whatsapp/index.js

@@ -101,7 +101,8 @@ import {
   IMAGE,
   VIDEO,
   URL,
-  REQUEST
+  REQUEST,
+  HOST_KARIX
 } from './constants';
 import { transformAssetData, transformToVendorFormat, VENDOR_TYPES } from '../../utils/vendorDataTransformers';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
@@ -1313,6 +1314,9 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     } else {
       setKarixFileHandle('');
     }
+    if(host === HOST_KARIX) {
+      setSecurityWarningReqd(true);
+    }
   };
 
   const onTemplateCategoryChange = (value) => {
@@ -1754,6 +1758,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       //if button type is cta and there are no buttons saved
       return true;
     }
+    //karix expiry minutes validation
+    if(host === HOST_KARIX && (expiryMinutes <=0 || expiryMinutes > 90)){
+      return true;
+    }
 
     if(isAuthenticationTemplate && securityWarningReqd && !expiryMinutes){
       return true;