@capillarytech/creatives-library 8.0.125 → 8.0.127-alpha.0

package/v2Containers/Templates/_templates.scss

@@ -219,6 +219,106 @@
         }
       }
     }
+
+    .MOBILEPUSH {
+        .ant-card-body {
+          padding: 0;
+          background-color: $CAP_WHITE;
+          border-top: 1px solid $CAP_COLOR_16;
+          .ant-card-meta {
+            background-color: $CAP_G09;
+            padding: 0;
+            .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 +602,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';
@@ -53,23 +53,20 @@ import {
   CapSpin
 } 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 +76,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';
@@ -108,11 +110,6 @@ import {
   WHATSAPP_STATUSES,
   HOST_GUPSHUP,
   CATEGORY_OPTIONS_MAP,
-  HOST_TWILIO,
-  TWILIO_CATEGORY_OPTIONS,
-  KARIX_GUPSHUP_CATEGORY_OPTIONS,
-  ICS_CATEGORY_OPTIONS,
-  HOST_ICS,
   IMAGE,
   VIDEO,
 } from '../Whatsapp/constants';
@@ -147,6 +144,8 @@ 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';
+const withMobilePushNewSaga = injectSaga({ key: 'mobilePushNew', saga: v2MobilePushSagas, mode: DAEMON });
 
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -235,28 +234,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.
@@ -396,6 +396,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,
@@ -565,6 +566,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 === "mobilepush" && 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);
@@ -1236,6 +1262,82 @@ 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 = (
+              <div className='mobilepush-container'>
+                <div className="app-header">
+                  <div className="app-header-left">
+                    <span className="app-icon">{""}</span>
+                    <CapLabel type="label4">{title}</CapLabel>
+                  </div>
+                </div>
+                <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') && (
+                  <div className="scroll-container">
+                  {carouselData.map((data, index) => {
+                    return (
+                      <div
+                        key={`carousel-${index + 1}`}
+                        className="whatsapp-carousel-container"
+                        role="group"
+                      >
+                      <div className="whatsapp-carousel-card">
+                        {data?.mediaType === IMAGE.toLowerCase() && (
+                          <CapImage
+                            src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
+                            className="whatsapp-image"
+                          />
+                        )}
+                        {data?.mediaType === VIDEO.toLowerCase() && (
+                          <div className="video-preview">
+                            <CapImage
+                              src={data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
+                              className="whatsapp-image"
+                            />
+                            <div className="icon-position">
+                              <CapImage
+                                className="video-icon"
+                                src={videoPlay}
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                      </div>
+                    )
+                  })}
+                </div>
+                )}
+                {ctas.length > 0 && (
+                  <div className="actions">
+                    {ctas.map((cta) => (
+                      <span
+                        className="action"
+                        key={`action-${cta?.actionText}`}
+                      >
+                        {cta?.actionText && cta?.actionText.toUpperCase()}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+            templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
+          }
+          break;
         case INAPP:
           templateData.content = template;
           break;
@@ -2051,12 +2153,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;
@@ -3397,6 +3505,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,
@@ -3429,6 +3538,7 @@ const mapStateToProps = createStructuredSelector({
   TemplatesList: makeSelectTemplatesResponse(),
   Create: makeSelectCreateSms(),
   CreateMobilePush: makeSelectCreateMobilePush(),
+  MobilePushNew: makeSelectMobilePushNew(),
   CreateEbill: makeSelectCreateEbill(),
   Edit: makeSelectEdit(),
   EmailCreate: makeSelectCreateEmail(),
@@ -3444,6 +3554,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),
@@ -3467,6 +3578,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 {
@@ -252,6 +253,7 @@ export function* v2TemplateSaga() {
     watchFetchWeCrmAccounts(),
     watchGetSenderDetails(),
     watchForGetTemplateInfoById(),
+    // watchCreateTemplate(),
   ]);
 }
 

package/v2Containers/Whatsapp/constants.js

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