@capillarytech/creatives-library 8.0.108 → 8.0.109

package/v2Containers/Cap/tests/saga.test.js

@@ -1,8 +1,22 @@
 import { take, fork, cancel, takeLatest } from 'redux-saga/effects';
 import { expectSaga } from 'redux-saga-test-plan';
 import * as matchers from 'redux-saga-test-plan/matchers';
-import { authorize, loginFlow, fetchSchemaForEntity,v2CapSagas, getSupportVideosConfig, watchForGetVideosConfig, watchFetchSchemaForEntity,watchLiquidEntity, getLiquidTags, logoutFlow, capSagaLiquidEntity } from '../sagas';
 import { throwError } from 'redux-saga-test-plan/providers';
+import {
+  authorize,
+  loginFlow,
+  fetchSchemaForEntity,
+  v2CapSagas,
+  getSupportVideosConfig,
+  watchForGetVideosConfig,
+  watchFetchSchemaForEntity,
+  watchLiquidEntity,
+  getLiquidTags,
+  logoutFlow,
+  capSagaLiquidEntity,
+  createCentralCommsMetaId,
+  watchMetaId,
+} from '../sagas';
 import * as api from '../../../services/api';
 import {
   LOGIN_REQUEST,
@@ -17,6 +31,9 @@ import {
   GET_LIQUID_TAGS_SUCCESS,
   GET_LIQUID_TAGS_FAILURE,
   GET_LIQUID_TAGS_REQUEST,
+  CREATE_CENTRAL_COMMS_META_ID_SUCCESS,
+  CREATE_CENTRAL_COMMS_META_ID_FAILURE,
+  CREATE_CENTRAL_COMMS_META_ID_REQUEST,
 } from '../constants';
 import { callback, error, error2, videoConfigData } from '../../mockdata';
 import { LOGOUT_FAILURE, LOGOUT_REQUEST, LOGOUT_SUCCESS } from '../../../containers/Cap/constants';
@@ -365,4 +382,76 @@ describe('watchForGetLiquidTags saga', () => {
       takeLatest(GET_LIQUID_TAGS_REQUEST, getLiquidTags),
     );
   });
+});
+
+describe('createCentralCommsMetaId saga', () => {
+  const mockCallback = jest.fn();
+  
+  it('handles successful API response', () => {
+    const action = { 
+      data: { templateId: '123456' }, 
+      callback: mockCallback
+    };
+    const result = { 
+      status: { code: 200 }, 
+      data: { id: '123456' } 
+    };
+
+    expectSaga(createCentralCommsMetaId, action)
+      .provide([
+        [matchers.call.fn(api.createCentralCommsMetaId, action.data), result],
+      ])
+      .call(action.callback, result)
+      .put({
+        type: CREATE_CENTRAL_COMMS_META_ID_SUCCESS,
+        result,
+      })
+      .run();
+  });
+
+  it('handles unsuccessful API response', () => {
+    const action = { 
+      data: { templateId: '123456' } 
+    };
+    const result = { 
+      status: { code: 400 },
+      message: 'Failed to create meta ID'
+    };
+
+    expectSaga(createCentralCommsMetaId, action)
+      .provide([
+        [matchers.call.fn(api.createCentralCommsMetaId, action.data), result],
+      ])
+      .put({
+        type: CREATE_CENTRAL_COMMS_META_ID_FAILURE,
+        error: result.message,
+      })
+      .run();
+  });
+
+  it('handles error thrown during API call', () => {
+    const action = { 
+      data: { templateId: '123456' } 
+    };
+    const error = new Error('API error');
+
+    expectSaga(createCentralCommsMetaId, action)
+      .provide([
+        [matchers.call.fn(api.createCentralCommsMetaId, action.data), throwError(error)],
+      ])
+      .put({
+        type: CREATE_CENTRAL_COMMS_META_ID_FAILURE,
+        error,
+      })
+      .run();
+  });
+});
+
+describe('watchMetaId saga', () => {
+  it('should watch for CREATE_CENTRAL_COMMS_META_ID_REQUEST actions', () => {
+    const generator = watchMetaId();
+    expect(generator.next().value).toEqual(
+      takeLatest(CREATE_CENTRAL_COMMS_META_ID_REQUEST, createCentralCommsMetaId),
+    );
+  });
 });

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -158,6 +158,7 @@ export function SlideBoxContent(props) {
       hostName = '',
       eventContextTags,
       isLoyaltyModule,
+      loyaltyMetaData = {},
     } = 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};
@@ -434,6 +435,8 @@ export function SlideBoxContent(props) {
         enableNewChannels={enableNewChannels}
         hideTestAndPreviewBtn={hideTestAndPreviewBtn}
         eventContextTags={eventContextTags}
+        loyaltyMetaData={loyaltyMetaData}
+        isLoyaltyModule={isLoyaltyModule}
         />
       )}
       {isPreview && (
@@ -934,6 +937,7 @@ SlideBoxContent.propTypes = {
   weChatTemplateType: PropTypes.string,
   onWechatTemplateChange: PropTypes.func,
   selectedWeChatAccount: PropTypes.object,
+  loyaltyMetaData: PropTypes.object,
   onWeChatMaptemplateStepChange: PropTypes.func,
   weChatMaptemplateStep: PropTypes.string,
   onFacebookSubmit: PropTypes.func,
@@ -950,6 +954,6 @@ SlideBoxContent.propTypes = {
   moduleType: PropTypes.string,
   showLiquidErrorInFooter: PropTypes.bool,
   creativesMode: PropTypes.string,
-  hostName: PropTypes.string,
+  hostName: PropTypes.string
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/constants.js

@@ -17,6 +17,7 @@ export const FTP = "FTP";
 export const NO_COMMUNICATION = "NO_COMMUNICATION";
 export const VIBER = "VIBER";
 export const WHATSAPP = "WHATSAPP";
+export const PUSH = "PUSH";
 export const RCS = "RCS";
 export const ZALO = "ZALO";
 export const INAPP = "INAPP";
@@ -24,10 +25,22 @@ export const PREVIEW = "preview";
 export const EDIT_TEMPLATE = "editTemplate";
 export const JOURNEY = "journey";
 
+export const LOYALTY_SUPPORTED_ACTION = "SEND_COMMUNICATION_ACTION";
+
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
 
 export const WHATSAPP_HELP_DOC_LINK = "https://docs.capillarytech.com/docs/create-whatsapp-template";
 
 export const ENABLE_AI_SUGGESTIONS = "ENABLE_AI_SUGGESTIONS";
-export const LIQUID_SUPPORTED_CHANNELS = [EMAIL];
+export const LIQUID_SUPPORTED_CHANNELS = [EMAIL];
+
+export const EMF = "EMF";
+export const VENENO = "VENENO";
+export const TEXT = "TEXT";
+export const IOS = "IOS";
+export const ANDROID = "ANDROID";
+export const EXTERNAL_URL = "EXTERNAL_URL";
+
+export const TRANSACTION = "TRANSACTION";
+export const BIG_TEXT = "BIG_TEXT";

package/v2Containers/CreativesContainer/index.js

@@ -60,6 +60,11 @@ import {
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
 import { DYNAMIC_URL } from '../../v2Components/CapWhatsappCTA/constants';
 
+import {
+  transformChannelPayload,
+  // getTemplateDiffState
+} from "../../utils/transformerUtils";
+
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
 
@@ -490,7 +495,8 @@ export class Creatives extends React.Component {
           };
           break;
         }
-        case constants.WHATSAPP: {
+        case constants.WHATSAPP:
+        case constants.WHATSAPP?.toLowerCase(): {
           const {
             messageBody = '',
             templateConfigs: {
@@ -1109,11 +1115,50 @@ export class Creatives extends React.Component {
           const creativesData = this.getCreativesData(channel, template, templateData);// convers data to consumer understandable format
           creativesData.then((data) => {
             this.logGTMEvent(channel, data);
-            this.props.getCreativesData(data);// send data to consumer
+            this.processCentralCommsMetaId(channel, data);
           });
         },
       );
     }
+  }
+  
+  processCentralCommsMetaId = (channel, creativesData) => {
+    // Create the payload for the centralcommnsmetaId API call
+    const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
+    const { actionName, setMetaData = () => {} } = loyaltyMetaData;
+
+    // const isTemplateModified = getTemplateDiffState(
+    //   channel,
+    //   loyaltyMetaData,
+    //   creativesData
+    // );
+    if (
+      loyaltyMetaData
+      && isLoyaltyModule
+      // && isTemplateModified
+      && actionName === constants.LOYALTY_SUPPORTED_ACTION
+    ) {
+      const payload = transformChannelPayload(creativesData, {
+        channel,
+        loyaltyMetaData,
+      });
+
+      // Callback function to handle API response
+      const handleMetaIDResult = (result) => {
+        if (result?.status?.code === 200) {
+          setMetaData(result);
+          this.props.getCreativesData(creativesData);
+        } else {
+          CapNotification.error({ message: <FormattedMessage {...messages.somethingWentWrong} /> });
+        }
+      };
+
+      // Call the action to create central comms meta ID
+      this.props.globalActions.createCentralCommsMetaId(payload, handleMetaIDResult);
+    } else {
+      // If not a loyalty module or different action, should work as usual
+      this.props.getCreativesData(creativesData);
+    }
   };
 
   setIsLoadingContent = (isLoadingContent) => {
@@ -1365,6 +1410,7 @@ export class Creatives extends React.Component {
       enableNewChannels,
       eventContextTags,
       isLoyaltyModule,
+      loyaltyMetaData = {},
     } = this.props;
     const mapTemplateCreate =
       slidBoxContent === "createTemplate" &&
@@ -1470,6 +1516,7 @@ export class Creatives extends React.Component {
               hostName={this.props?.hostName || ''}
               eventContextTags={eventContextTags}
               isLoyaltyModule={isLoyaltyModule}
+              loyaltyMetaData={loyaltyMetaData}
             />
           )}
           footer={this.shouldShowFooter() && (
@@ -1530,6 +1577,7 @@ Creatives.propTypes = {
   orgUnitId: PropTypes.number,
   hostName: PropTypes.string,
   eventContextTags: PropTypes.array,
+  stopValidation: PropTypes.func,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -651,6 +651,7 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
         "search": "",
       }
     }
+    loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
     slidBoxContent="templates"
@@ -1042,6 +1043,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
         "search": "",
       }
     }
+    loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
     slidBoxContent="templates"

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

@@ -15,6 +15,11 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}
@@ -92,6 +97,11 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}
@@ -169,6 +179,11 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}
@@ -250,6 +265,11 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}
@@ -331,6 +351,11 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}

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

@@ -16,6 +16,7 @@ const {
   smsTemplates,
   emailEditTemplateData,
   emailTemplates,
+  loyaltyMetaData,
 } = mockdata;
 
 jest.mock('../../../v2Components/FormBuilder', () => ({
@@ -40,6 +41,7 @@ describe('Test SlideBoxContent container', () => {
   const renderFunction = (channel, mode, templates, templateData) => {
     renderedComponent = shallowWithIntl(
       <Creatives
+        loyaltyMetaData={loyaltyMetaData}
         Templates={templates}
         channel={channel}
         slidBoxContent={mode}

package/v2Containers/MobilePush/Create/index.js

@@ -1809,6 +1809,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&

package/v2Containers/Sms/Edit/index.js

@@ -992,6 +992,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 onTestContentClicked={this.props.onTestContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/TemplatesV2/index.js

@@ -34,7 +34,7 @@ import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCA
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
 import { makeSelectAuthenticated, selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
-
+import { LOYALTY_SUPPORTED_ACTION } from "../CreativesContainer/constants";
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -56,6 +56,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       enableNewChannels = [],
       currentOrgDetails = {},
       cap = {},
+      loyaltyMetaData = {},
+      isLoyaltyModule = false,
     } = props;
 
     const defaultPanes = {
@@ -98,6 +100,11 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       }
       const commonChannels = ['sms', 'email', 'wechat', 'mobilepush', 'line', 'viber', 'facebook', 'call_task', 'ftp', 'assets'];
 
+      const { actionName = ''} = loyaltyMetaData;
+      if (isLoyaltyModule && actionName === LOYALTY_SUPPORTED_ACTION) {
+        commonChannels.push(WHATSAPP, ZALO);
+      }
+
       // we only show channels which other than commonChannels
       // if it is coming in enableNewChannels array
       filteredPanes = filteredPanes.filter((item) => {

package/v2Containers/Whatsapp/constants.js

@@ -653,3 +653,5 @@ export const CATEGORY_OPTIONS_MAP = {
   [HOST_GUPSHUP]: KARIX_GUPSHUP_CATEGORY_OPTIONS,
   [HOST_ICS]: ICS_CATEGORY_OPTIONS,
 };
+
+export const REQUEST = "REQUEST";

package/v2Containers/Whatsapp/index.js

@@ -44,7 +44,8 @@ import {
   makeSelectMetaEntities,
   selectCurrentOrgDetails,
   setInjectedTags,
-} from '../Cap/selectors';
+  selectMetaDataStatus,
+} from "../Cap/selectors";
 import * as WhatsappActions from './actions';
 import './index.scss';
 import {
@@ -97,6 +98,7 @@ import {
   IMAGE,
   VIDEO,
   URL,
+  REQUEST
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -152,6 +154,7 @@ export const Whatsapp = (props) => {
     selectedOfferDetails,
     currentOrgDetails,
     eventContextTags,
+    metaDataStatus = "",
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -2807,7 +2810,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   }
 
   return (
-    <CapSpin spinning={spin}>
+    <CapSpin spinning={spin || metaDataStatus === REQUEST}>
       <CapRow className="cap-whatsapp-creatives">
         <CapColumn span={14}>
           {isEditFlow ? editModeContent() : createModeContent()}
@@ -2878,7 +2881,8 @@ const mapStateToProps = createStructuredSelector({
   metaEntities: makeSelectMetaEntities(),
   loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
-  currentOrgDetails: selectCurrentOrgDetails()
+  currentOrgDetails: selectCurrentOrgDetails(),
+  metaDataStatus: selectMetaDataStatus(),
 });
 
 const mapDispatchToProps = (dispatch) => ({

package/v2Containers/Zalo/index.js

@@ -24,7 +24,7 @@ import {
   CAP_WHITE,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { makeSelectZalo, makeSelectAccount } from './selectors';
-import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
+import { makeSelectMetaEntities, setInjectedTags, selectMetaDataStatus } from '../Cap/selectors';
 import * as zaloActions from './actions';
 import './index.scss';
 import {
@@ -56,6 +56,7 @@ import { v2ZaloSagas } from './saga';
 import { CapIcon } from '@capillarytech/cap-ui-library';
 import { isTagIncluded } from '../../utils/commonUtils';
 
+
 export const Zalo = (props) => {
   const {
     intl,
@@ -74,6 +75,7 @@ export const Zalo = (props) => {
     selectedOfferDetails,
     hostName: zaloHostName = '',
     eventContextTags,
+    metaDataStatus = "",
   } = props || {};
   // Since zalo supports now multiple accounts, we need to get the hostname from the selected account or passed props.
   const hostName = selectedZaloAccount?.hostName || zaloHostName;
@@ -435,7 +437,7 @@ export const Zalo = (props) => {
   });
 
   return (
-    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST}>
+    <CapSpin spinning={[zaloTemplateInfoStatus, metaDataStatus].includes(REQUEST)}>
       <CapRow type="flex" className="cap-zalo-creatives">
         <CapColumn span={14}>
           {templateStatus && (
@@ -530,6 +532,7 @@ const mapStateToProps = createStructuredSelector({
   accountData: makeSelectAccount(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),
+  metaDataStatus: selectMetaDataStatus(),
 });
 
 const mapDispatchToProps = (dispatch) => ({

package/v2Containers/mockdata.js

@@ -2584,6 +2584,9 @@ export default {
     },
     demoVideoAndLinkJSONStatus: "SUCCESS",
   },
+  loyaltyMetaData: {
+    actionName: "SEND_COMMUNICATION_ACTION",
+  },
   getWhatsappAutoFillData: 
     < CapLabel
       className="whatsapp-autofill-btn"