@capillarytech/creatives-library 8.0.130 → 8.0.132

package/v2Containers/TagList/index.js

@@ -39,12 +39,14 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       loading: false,
       tags: [],
       tagsError: false,
+      currentContext: null, // Track current context to detect changes
     };
     this.renderTags = this.renderTags.bind(this);
     this.populateTags = this.populateTags.bind(this);
     this.populateTagForChildren = this.populateTagForChildren.bind(this);
     this.transformInjectedTags = this.transformInjectedTags.bind(this);
     this.transformCouponTags = this.transformCouponTags.bind(this);
+    this.loadingTimeout = null; // Add timeout reference
   }
 
   componentDidMount() {
@@ -52,33 +54,72 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   }
 
   componentWillReceiveProps(nextProps) {
-    if (_.isEmpty(this.props.injectedTags) && _.isEmpty(this.props.tags)) {
+    // Set loading to true in these scenarios:
+    // 1. Both injectedTags and tags are empty (initial load)
+    // 2. Context change is happening (detected by different tag arrays)
+    const { injectedTags: currentInjectedTags, tags: currentTags } = this.props;
+    const { injectedTags: nextInjectedTags, tags: nextTags, fetchingSchemaError } = nextProps;
+    
+    const isInitialLoad = _.isEmpty(currentInjectedTags) && _.isEmpty(currentTags);
+    const isContextChange = !_.isEqual(nextTags, currentTags) && !_.isEmpty(currentTags);
+    
+    if (isInitialLoad || isContextChange) {
       this.setState({loading: true});
     }
-    if (!_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
+    
+    // Only reset loading for injectedTags changes if we're not currently loading due to context change
+    if (!_.isEqual(nextInjectedTags, currentInjectedTags) && !this.state.loading) {
       this.setState({loading: false});
+      this.clearLoadingTimeout();
     }
-    if (!_.isEqual(nextProps.tags, this.props.tags)) {
+    
+    if (!_.isEqual(nextTags, currentTags)) {
       this.setState({loading: false});
+      this.clearLoadingTimeout();
     }
-    if (nextProps?.fetchingSchemaError) {
-      this.setState({tagsError: nextProps?.fetchingSchemaError});
+    if (fetchingSchemaError) {
+      this.setState({tagsError: fetchingSchemaError, loading: false});
+      this.clearLoadingTimeout();
     }
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.tags !== prevProps.tags || this.props.injectedTags !== prevProps.injectedTags || this.props.selectedOfferDetails !== prevProps.selectedOfferDetails) {
+    const { tags, injectedTags, selectedOfferDetails } = this.props;
+    const { tags: prevTags, injectedTags: prevInjectedTags, selectedOfferDetails: prevSelectedOfferDetails } = prevProps;
+    
+    if (tags !== prevTags || injectedTags !== prevInjectedTags || selectedOfferDetails !== prevSelectedOfferDetails) {
       this.generateTags(this.props);
     }
   }
 
+  componentWillUnmount() {
+    this.clearLoadingTimeout();
+  }
+
+  clearLoadingTimeout = () => {
+    if (this.loadingTimeout) {
+      clearTimeout(this.loadingTimeout);
+      this.loadingTimeout = null;
+    }
+  };
+
   onSelect = (selectedKeys) => {
-    this.props.onTagSelect(selectedKeys[0]);
+    const { onTagSelect } = this.props;
+    onTagSelect(selectedKeys[0]);
   };
 
   getTagsforContext = (data) => {
-    //this.setState({loading: true});
-    this.props.onContextChange(data);
+    // Set loading state when context change is requested
+    this.setState({loading: true, currentContext: data});
+    
+    // Set a timeout to prevent infinite loading (fallback safety)
+    this.clearLoadingTimeout();
+    this.loadingTimeout = setTimeout(() => {
+      this.setState({loading: false});
+    }, 5000); // Reduced timeout to 5 seconds for better UX
+    
+    const { onContextChange } = this.props;
+    onContextChange(data);
   }
 
   generateTags = (props) => {
@@ -159,7 +200,8 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     //Form tags object with tag headers
     _.forEach(tagsList, (temp) => {
       const tag = temp.definition;
-      const { locale: userLocale } = this.props?.intl || {};
+      const { intl } = this.props;
+    const { locale: userLocale } = intl || {};
 
       // Check if the tag.value should be skipped based on feature control
       if (_.includes(excludedTags, tag.value)) {
@@ -360,6 +402,10 @@ TagList.propTypes = {
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+    locale: PropTypes.string,
+  }).isRequired,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/_templates.scss

@@ -219,6 +219,105 @@
         }
       }
     }
+
+    .MOBILEPUSH {
+        .ant-card-body {
+          padding: 0;
+          background-color: $CAP_WHITE;
+          border-top: 1px solid $CAP_COLOR_16;
+          .ant-card-meta {
+            background-color: $CAP_G09;
+            .ant-card-meta-description {
+              .mobilepush-container {
+                background-color: $CAP_WHITE;
+                padding: $CAP_SPACE_12;
+                .app-header {
+                  color: #5D5D5D;
+                  font-weight: 600;
+                  padding: 0.285rem 0.571rem 0.285rem 0.571rem;
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  .app-header-left{
+                    display: flex;
+                    align-items: center;
+                    div {
+                      word-break: break-word;
+                    }
+                    .app-icon {
+                      width: 0.857rem;
+                      height: 0.857rem;
+                      border-radius: 50%;
+                      background-color: #737070;
+                    }
+                  }
+                }
+                .mobilepush-message {
+                  padding-left: 1.65rem;
+                }
+                .mobilepush-image {
+                  width: 100%;
+                  height: 120px;
+                  margin-top: 10px;
+                }
+                .mobilepush-image-padding {
+                  padding-left: 1.65rem;
+                }
+                .scroll-container {
+                  overflow-x: auto;
+                  display: flex;
+                  padding-top: $CAP_SPACE_06;
+                  padding-right: $CAP_SPACE_06;
+                  white-space: nowrap;
+                  scrollbar-width: none; // Hide scrollbar in Firefox
+                  &::-webkit-scrollbar {
+                    display: none; // Hide scrollbar in Chrome/Safari/Opera
+                  }
+                  overflow: hidden;
+                  height: 100%;
+                  width: 100%;
+                  margin-left: 1.65rem;
+                  .whatsapp-carousel-container {
+                    padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
+                    border-radius: $CAP_SPACE_06;
+                    background-color: $CAP_WHITE;
+                    width: 80%;
+                    flex-shrink: 0;
+                    white-space: pre-wrap;
+                    word-break: break-word;
+                    overflow: auto;
+                    text-align: left;
+                    margin: 0;
+                    .whatsapp-carousel-card {
+                        margin: $CAP_SPACE_02 $CAP_SPACE_02 $CAP_SPACE_01 $CAP_SPACE_02;
+                        .whatsapp-carousel-body {
+                          margin-bottom: $CAP_SPACE_08;
+                        }
+                    }
+                  }
+                }
+                .actions{
+                  background-color: #ffffff;
+                  height: auto;
+                  padding: $CAP_SPACE_08;
+                  text-align: center;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+                  gap: $CAP_SPACE_08;
+                  .action{
+                    font-size: $FONT_SIZE_S;
+                    font-weight: 600;
+                    color: #1970DA;
+                    height: 1.25rem;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
   }
 
   .create-new-link{
@@ -502,7 +601,7 @@
     }
   }
   .iphone-push-message-Container{
-    top: 8%;
+    top: 10%;
     .message-pop{
       border-radius: 4px;
       word-wrap: break-word;

package/v2Containers/Templates/index.js

@@ -12,7 +12,7 @@ import styled from 'styled-components';
 import {injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
-import Bugsnag from "@bugsnag/js";
+
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -50,26 +50,26 @@ import {
   CapImage,
   CapStatus,
   CapColoredTag,
-  CapSpin
+  CapSpin,
+  CapCard,
+  CapColumn,
+  CapCarousel
 } from "@capillarytech/cap-ui-library";
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
-import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
+import { makeSelectCreate as makeSelectCreateSms } from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
-import { makeSelectInApp } from '../InApp/selectors';
+import { makeSelectMobilePushNew } from '../MobilePushNew/selectors';
 import { makeSelectEbill as makeSelectCreateEbill } from '../Ebill/selectors';
 import { makeSelectEmail as makeSelectCreateEmail } from '../Email/selectors';
 import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { makeSelectLine } from '../Line/Container/selectors';
 import { makeSelectViber } from '../Viber/selectors';
 import { makeSelectZalo } from '../Zalo/selectors';
-import { UserIsAuthenticated } from '../../utils/authWrapper';
-import { getObjFromQueryParams } from '../../utils/v2common';
-import messages from './messages';
-import {checkUnicode} from '../../utils/smsCharCountV2';
+import { makeSelectInApp } from '../InApp/selectors';
 import * as actions from './actions';
 import * as smsActions from '../Sms/Create/actions';
 import * as mobilepushActions from '../MobilePush/Create/actions';
-import * as inAppActions from '../InApp/actions';
+import * as mobilePushNewActions from '../MobilePushNew/actions';
 import * as smsEditActions from '../Sms/Edit/actions';
 import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
@@ -79,11 +79,16 @@ import * as facebookActions from '../Facebook/actions';
 import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
 import * as zaloActions from '../Zalo/actions';
+import * as inAppActions from '../InApp/actions';
+import * as globalActions from '../Cap/actions';
+import { makeSelectAuthenticated } from '../Cap/selectors';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import { getObjFromQueryParams } from '../../utils/v2common';
+import messages from './messages';
+import {checkUnicode} from '../../utils/smsCharCountV2';
 import CardGrid from '../../v2Components/CardGrid';
 import config from '../../config/app';
 import './_templates.scss';
-import * as globalActions from '../Cap/actions';
-import { makeSelectAuthenticated } from '../Cap/selectors';
 import * as commonUtil from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
@@ -117,6 +122,7 @@ import {
   HOST_ICS,
   IMAGE,
   VIDEO,
+  GIF,
 } from '../Whatsapp/constants';
 import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
@@ -149,6 +155,9 @@ import { compose } from 'redux';
 import { v2TemplateSaga } from './sagas';
 import injectSaga from '../../utils/injectSaga';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
+import { v2MobilePushSagas } from '../MobilePushNew/sagas';
+import { AUTO_CAROUSEL, BIG_PICTURE, FILMSTRIP_CAROUSEL, MANUAL_CAROUSEL } from '../MobilePushNew/constants';
+const withMobilePushNewSaga = injectSaga({ key: 'mobilePushNew', saga: v2MobilePushSagas, mode: DAEMON });
 
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -237,28 +246,29 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       searchedZaloTemplates: [],
       searchingZaloTemplate: false,
       zaloPreviewItemId: {},
+      uploadInProgress: false,
+      deleteConfirmationModal: false,
+      templateToDelete: {},
+      edmDefaultTemplateSelection: false,
+      edmSelectedTemplateId: '',
+      edmEmailPreview: false,
+      emailPreviewDevice: 'desktop',
+      // Add flag to prevent duplicate API calls
+      isProcessingEditResponse: false,
     };
-
+    this.getAllTemplates = this.getAllTemplates.bind(this);
+    this.createTemplate = this.createTemplate.bind(this);
+    this.searchTemplate = this.searchTemplate.bind(this);
+    this.handleSortBy = this.handleSortBy.bind(this);
+    this.duplicateTemplate = this.duplicateTemplate.bind(this);
+    this.deleteTemplate = this.deleteTemplate.bind(this);
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
     this.handleOnItemClick = this.handleOnItemClick.bind(this);
     this.handleEditClick = this.handleEditClick.bind(this);
     this.handlePreviewClick = this.handlePreviewClick.bind(this);
-    this.createTemplate = this.createTemplate.bind(this);
-    this.duplicateTemplate = this.duplicateTemplate.bind(this);
-    this.deleteTemplate = this.deleteTemplate.bind(this);
-    this.togglePreview = this.togglePreview.bind(this);
-    this.searchTemplate = this.searchTemplate.bind(this);
-    this.handleSortBy = this.handleSortBy.bind(this);
-    this.getCurrentWindow = this.getCurrentWindow.bind(this);
     this.handleFrameTasks = this.handleFrameTasks.bind(this);
-    this.startTemplateCreation = this.startTemplateCreation.bind(this);
-    this.startLoading = this.startLoading.bind(this);
-    this.prepareWeChatPreviewData = this.prepareWeChatPreviewData.bind(this);
-    this.prepareWeChatMappedPreviewData = this.prepareWeChatMappedPreviewData.bind(this);
     this.onAccountSelect = this.onAccountSelect.bind(this);
-    this.prepareMobilePushPreviewData = this.prepareMobilePushPreviewData.bind(this);
-    this.menuOnClickEvent = this.menuOnClickEvent.bind(this);
-    this.delayTimer = 0;
+    this.onAccountSelect = this.onAccountSelect.bind(this);
   }
 
   // This function is to map the selected source account identifier and the connectionProperties data of domainPropertiesData object to get the hostName.
@@ -398,6 +408,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     window.addEventListener("message", this.handleFrameTasks);
   }
   componentWillReceiveProps(nextProps = {}) {
+    
     const params = {
       name: this.state.searchText,
       sortBy: this.state.sortBy,
@@ -567,6 +578,31 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.props.lineActions.clearCreateResponse();
     }
 
+    // Check for MobilePushNew edit response - prevent duplicate calls
+    if (selectedChannel === MOBILE_PUSH_LOWERCASE && nextProps.MobilePushNew && nextProps.MobilePushNew.editResponse && nextProps.MobilePushNew.editResponse.templateId && nextProps.MobilePushNew.editResponse.templateId !== '' && !this.state.isProcessingEditResponse) {
+      // Set flag to prevent duplicate processing
+      this.setState({ isProcessingEditResponse: true });
+      
+      const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateUpdateSuccess)}`;
+      
+      CapNotification.success({
+        key: 'editSuccess', 
+        message
+      });
+      
+      this.getAllTemplates({params, resetPage: true});
+      
+      this.props.mobilePushNewActions.clearData();
+      
+      this.props.mobilePushNewActions.clearEditResponse();
+      
+      // Reset flag after a delay to allow for next edit
+      setTimeout(() => {
+        this.setState({ isProcessingEditResponse: false });
+      }, 1000);
+    }
+
+
 
     if (nextProps.Create && this.props.Create && nextProps.Create.createTemplateError && !isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
       const message = this.props.intl.formatMessage(messages.somethingWentWrong);
@@ -1238,6 +1274,99 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case MOBILE_PUSH:
+          if (!commonUtil.hasNewMobilePushFeatureEnabled()) {
+            templateData.content = template;
+          } else {
+            const mpushData = get(template, 'versions.base', template);
+            const androidData = get(mpushData, 'ANDROID') || get(mpushData, 'androidContent');
+            const iosData = get(mpushData, 'IOS') || get(mpushData, 'iosContent');
+            let mpushListingData = androidData;
+            if (isEmpty(androidData) || !androidData?.title) {
+              mpushListingData = iosData;
+            };
+            const { title, message, expandableDetails: { style = '', image, carouselData = [], ctas = [] } = {} } = mpushListingData || {};
+            templateData.content = (
+              <CapCard className='mobilepush-container'>
+                <CapHeader className="app-header">
+                  <CapRow className="app-header-left">
+                    <span className="app-icon">{""}</span>
+                    <CapLabel type="label4">{title}</CapLabel>
+                  </CapRow>
+                </CapHeader>
+                <CapLabel className="mobilepush-message" type="label1">{message}</CapLabel>
+                {style === BIG_PICTURE && (
+                  <CapImage src={image} className="mobilepush-image mobilepush-image-padding" />
+                )}
+                {(style === MANUAL_CAROUSEL || style === AUTO_CAROUSEL || style === FILMSTRIP_CAROUSEL) && (
+                  <CapCarousel className="scroll-container">
+                  {carouselData.map((data, index) => {
+                    return (
+                      <CapCard
+                        key={`carousel-${index + 1}`}
+                        className="whatsapp-carousel-container"
+                        role="group"
+                      >
+                      <CapCard className="whatsapp-carousel-card">
+                        {data?.mediaType === IMAGE.toLowerCase() && (
+                          <CapImage
+                            src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
+                            className="whatsapp-image"
+                          />
+                        )}
+                        {data?.mediaType === VIDEO.toLowerCase() && (
+                          <CapCard className="video-preview">
+                            <CapImage
+                              src={data?.videoPreviewUrl ? data?.videoPreviewUrl : data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
+                              className="whatsapp-image"
+                            />
+                            <CapCard className="icon-position">
+                              <CapImage
+                                className="video-icon"
+                                src={videoPlay}
+                              />
+                            </CapCard>
+                          </CapCard>
+                        )}
+                        {
+                          data?.mediaType === GIF.toLowerCase() && (
+                          <CapCard className="image-preview">
+                            <CapImage
+                              src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
+                              className="whatsapp-image"
+                            />
+                            <CapCard className="icon-position">
+                              <CapImage
+                                className="video-icon"
+                                src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
+                              />
+                            </CapCard>
+                          </CapCard>
+                          )
+                        }
+                      </CapCard>
+                      </CapCard>
+                    )
+                  })}
+                </CapCarousel>
+                )}
+                {ctas.length > 0 && (
+                  <CapRow className="actions">
+                    {ctas.map((cta) => (
+                      <CapLabel
+                        className="action"
+                        key={`action-${cta?.actionText}`}
+                        type="label1"
+                      >
+                        {cta?.actionText && cta?.actionText.toUpperCase()}
+                      </CapLabel>
+                    ))}
+                  </CapRow>
+                )}
+              </CapCard>
+            );
+            templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
+          }
+          break;
         case INAPP:
           templateData.content = template;
           break;
@@ -2053,12 +2182,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     delete duplicateObj._id;
 
     if (this.state.channel.toLowerCase() === "mobilepush") {
+      const params = {
+        name: this.state.searchText,
+        sortBy: this.state.sortBy,
+      };
       duplicateObj.definition.accountId = this.props.Templates.selectedWeChatAccount.id;
-      this.props.mobilepushActions.createTemplate(duplicateObj, () => {
-        const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
-        CapNotification.success({key: 'duplicateSuccess', message});
-        this.getAllTemplates({params: {}}, true);
-        this.props.mobilepushActions.clearCreateResponse();
+      this.props.mobilePushNewActions.createTemplate(duplicateObj, (response) => {
+        if (response && (response.templateId || response._id)) {
+          const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+          CapNotification.success({key: 'duplicateSuccess', message});
+          this.getAllTemplates({params, resetPage: true});
+          this.props.mobilePushNewActions.clearCreateResponse();
+        }
       });
     } else if (this.state.channel.toLowerCase() === "inapp") {
       duplicateObj.definition.accountId = this.props.Templates.selectedWeChatAccount.id;
@@ -3399,6 +3534,7 @@ Templates.propTypes = {
   actions: PropTypes.object.isRequired,
   smsActions: PropTypes.object,
   mobilepushActions: PropTypes.object,
+  mobilePushNewActions: PropTypes.object,
   smsEditActions: PropTypes.object,
   ebillActions: PropTypes.object,
   emailActions: PropTypes.object,
@@ -3431,6 +3567,7 @@ const mapStateToProps = createStructuredSelector({
   TemplatesList: makeSelectTemplatesResponse(),
   Create: makeSelectCreateSms(),
   CreateMobilePush: makeSelectCreateMobilePush(),
+  MobilePushNew: makeSelectMobilePushNew(),
   CreateEbill: makeSelectCreateEbill(),
   Edit: makeSelectEdit(),
   EmailCreate: makeSelectCreateEmail(),
@@ -3446,6 +3583,7 @@ function mapDispatchToProps(dispatch) {
     actions: bindActionCreators(actions, dispatch),
     smsActions: bindActionCreators(smsActions, dispatch),
     mobilepushActions: bindActionCreators(mobilepushActions, dispatch),
+    mobilePushNewActions: bindActionCreators(mobilePushNewActions, dispatch),
     inAppActions: bindActionCreators(inAppActions, dispatch),
     smsEditActions: bindActionCreators(smsEditActions, dispatch),
     ebillActions: bindActionCreators(ebillActions, dispatch),
@@ -3469,6 +3607,7 @@ const withSaga = injectSaga({ key: 'templates', saga: v2TemplateSaga, mode: DAEM
 export default compose(
   UserIsAuthenticated,
   withSaga,
+  withMobilePushNewSaga,
   withReducer,
   withConnect,
 )(injectIntl(Templates));

package/v2Containers/Templates/messages.js

@@ -538,4 +538,12 @@ export default defineMessages({
     id: `${scope}.zaloOnlyApprovedTemplates`,
     defaultMessage: 'Only enabled/approved templates are shown here',
   },
+  "templateCreateSuccess": {
+    id: `${scope}.templateCreateSuccess`,
+    defaultMessage: 'Template created successfully',
+  },
+  "templateUpdateSuccess": {
+    id: `${scope}.templateUpdateSuccess`,
+    defaultMessage: 'Template updated successfully',
+  },
 });

package/v2Containers/Templates/sagas.js

@@ -9,6 +9,7 @@ import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTr
 import { COPY_OF } from '../../containers/App/constants';
 import { ZALO_TEMPLATE_INFO_REQUEST } from '../Zalo/constants';
 import { getTemplateInfoById } from '../Zalo/saga';
+import { watchCreateTemplate } from '../MobilePushNew/sagas';
 // Individual exports for testing
 export function* getAllTemplates(channel, queryParams) {
   try {

package/v2Containers/Whatsapp/constants.js

@@ -310,6 +310,7 @@ export const STATIC_URL = 'STATIC_URL';
 export const URL = 'URL';
 export const IMAGE = 'IMAGE';
 export const VIDEO = 'VIDEO';
+export const GIF = 'GIF';
 export const INITIAL_CTA_DATA = [
   {
     index: 0,