@capillarytech/creatives-library 8.0.108 → 8.0.109

package/utils/transformerUtils.js

@@ -0,0 +1,421 @@
+// Import channel constants from the existing constants file
+import { isEqual } from "lodash";
+import {
+  SMS,
+  EMAIL,
+  MOBILE_PUSH,
+  WHATSAPP,
+  PUSH,
+  ZALO,
+  EMF,
+  VENENO,
+  TEXT,
+  IOS,
+  ANDROID,
+  EXTERNAL_URL,
+  BIG_TEXT
+} from "../v2Containers/CreativesContainer/constants";
+
+// Creates a base payload structure common to all channels
+const createBasePayload = (channelType, metadata = {}) => {
+  const { actionId, ouId, clientName, module } = metadata;
+
+  return {
+    centralCommsPayload: {
+      ouId: ouId || -1,
+      sourceEntityId: actionId,
+      channel: channelType,
+      module,
+      executionParams: {},
+      clientName:
+        clientName || ([SMS, EMAIL].includes(channelType) ? EMF : VENENO)
+    }
+  };
+};
+
+// Transforms the channel payload based on the channel type
+/**
+ * General transformer function that handles different channel types
+ * @param {Object} data - The input data
+ * @param {Object} options - Additional options for transformation
+ * @returns {Object} - Transformed payload based on channel type
+ */
+export const transformChannelPayload = (data, options = {}) => {
+  const channel = data.channel?.toUpperCase();
+
+  switch (channel) {
+    case SMS:
+      return transformSmsPayload(data, options);
+    case MOBILE_PUSH:
+      return transformMpushPayload(data, options);
+    case EMAIL:
+      return transformEmailPayload(data, options);
+    case WHATSAPP:
+      return transformWhatsappPayload(data, options);
+    case ZALO:
+      return transformZaloPayload(data, options);
+    default:
+      return data; // Return unchanged for unsupported channels
+  }
+};
+/**
+ * Transforms SMS data to the required payload format
+ * @param {Object} smsData - Current SMS data
+ * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
+ * @returns {Object} - Transformed SMS payload
+ */
+const transformSmsPayload = (smsData, options = {}) => {
+  const { loyaltyMetaData = {} } = options;
+  const { transformedMessageDetails = {} } = loyaltyMetaData;
+  const { smsDeliverySettings } = transformedMessageDetails;
+
+  // Get base payload structure
+  const payload = createBasePayload(SMS, loyaltyMetaData);
+
+  // Add SMS-specific properties
+  payload.centralCommsPayload.smsMessageContent = {
+    channel: SMS,
+    // Override the message property if messageBody exists
+    message: smsData?.messageBody || "",
+    ...smsData
+  };
+  payload.centralCommsPayload.smsDeliverySettings = smsDeliverySettings || {};
+
+  return payload;
+};
+/**
+ * Transforms Email data to the required payload format
+ * @param {Object} emailData - Current email data
+ * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
+ * @returns {Object} - Transformed Email payload
+ */
+const transformEmailPayload = (emailData, options = {}) => {
+  const { loyaltyMetaData = {} } = options;
+  const { transformedMessageDetails = {} } = loyaltyMetaData;
+  const { emailDeliverySettings = {} } = transformedMessageDetails;
+
+  // Get base payload structure
+  const payload = createBasePayload(EMAIL, loyaltyMetaData);
+
+  // Add Email-specific properties
+  payload.centralCommsPayload.emailMessageContent = {
+    channel: EMAIL,
+    messageBody: emailData?.emailBody || "",
+    messageSubject: emailData?.emailSubject || "",
+    ...emailData
+  };
+  payload.centralCommsPayload.emailDeliverySettings =
+    emailDeliverySettings || {};
+
+  return payload;
+};
+/**
+ * Transforms Mobile Push data to the required payload format
+ * @param {Object} mpushData - Current mobile push data
+ * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
+ * @returns {Object} - Transformed Mobile Push payload
+ */
+const transformMpushPayload = (mpushData, options = {}) => {
+  const { loyaltyMetaData = {} } = options;
+  const { transformedMessageDetails = {} } = loyaltyMetaData;
+  const { mobilePushDeliverySettings = {} } = transformedMessageDetails;
+
+  // Get default values for Android and iOS content
+  const androidContent = mpushData?.androidContent || {};
+  const iosContent = mpushData?.iosContent || {
+    type: androidContent?.type || TEXT,
+    deviceType: IOS,
+    title: mpushData?.messageSubject || "",
+    message: ""
+  };
+
+  // Get base payload structure
+  const payload = createBasePayload(PUSH, loyaltyMetaData);
+
+  // Add Mobile Push-specific properties with spread operator
+  payload.centralCommsPayload.mpushMessageContent = {
+    channel: PUSH,
+    messageSubject: mpushData?.messageSubject || "",
+    androidContent: {
+      type: TEXT,
+      deviceType: ANDROID,
+      ...androidContent,
+      cta: {
+        type: EXTERNAL_URL,
+        actionText: null,
+        templateCtaId: null,
+        ...(androidContent?.cta || {})
+      },
+      expandableDetails: {
+        style: BIG_TEXT,
+        ...androidContent?.expandableDetails
+      },
+      customProperties: androidContent?.custom || {}
+    },
+    iosContent: {
+      type: TEXT,
+      deviceType: IOS,
+      ...iosContent,
+      cta: {
+        type: EXTERNAL_URL,
+        actionText: null,
+        templateCtaId: null,
+        ...(iosContent?.cta || {})
+      },
+      expandableDetails: {
+        style: BIG_TEXT,
+        ...iosContent?.expandableDetails
+      },
+      customProperties: iosContent?.custom || {}
+    },
+    accountId: mpushData?.accountId || 0
+  };
+  payload.centralCommsPayload.mpushDeliverySettings =
+    mobilePushDeliverySettings || {};
+
+  return payload;
+};
+/**
+ * Transforms WhatsApp data to the required payload format
+ * @param {Object} whatsappData - Current WhatsApp data
+ * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
+ * @returns {Object} - Transformed WhatsApp payload
+ */
+const transformWhatsappPayload = (whatsappData, options = {}) => {
+  const { loyaltyMetaData = {} } = options;
+  const { transformedMessageDetails = {} } = loyaltyMetaData;
+  const { whatsappDeliverySettings = {} } = transformedMessageDetails;
+
+  // Get base payload structure
+  const payload = createBasePayload(WHATSAPP, loyaltyMetaData);
+
+  // Add WhatsApp-specific properties
+  payload.centralCommsPayload.whatsappMessageContent = {
+    channel: WHATSAPP,
+    messageBody: "",
+    ...whatsappData,
+    // Ensure templateConfigs is preserved (it might contain complex nested objects)
+    templateConfigs: whatsappData?.templateConfigs || {}
+  };
+  payload.centralCommsPayload.whatsappDeliverySettings =
+    whatsappDeliverySettings || {};
+
+  return payload;
+};
+/**
+ * Transforms Zalo data to the required payload format
+ * @param {Object} zaloData - Current Zalo data
+ * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
+ * @returns {Object} - Transformed Zalo payload
+ */
+const transformZaloPayload = (zaloData, options = {}) => {
+  const { loyaltyMetaData = {} } = options;
+  const { transformedMessageDetails = {} } = loyaltyMetaData;
+  const { zaloDeliverySettings = {} } = transformedMessageDetails;
+
+  // Get base payload structure
+  const payload = createBasePayload(ZALO, loyaltyMetaData);
+
+  // Add Zalo-specific properties
+  payload.centralCommsPayload.zaloMessageContent = {
+    channel: ZALO,
+    messageBody: "",
+    accountId: "",
+    accountName: "",
+    token: "",
+    ...zaloData,
+    // Ensure templateConfigs is preserved (it might contain complex nested objects)
+    templateConfigs: zaloData?.templateConfigs || {}
+  };
+  payload.centralCommsPayload.zaloDeliverySettings = zaloDeliverySettings || {};
+
+  return payload;
+};
+
+// Checks if the template has changed
+export const getTemplateDiffState = (channel, oldData, newData) => {
+  switch (channel.toUpperCase()) {
+    case SMS:
+      return checkSmsDiff(oldData, newData);
+    case EMAIL:
+      return checkEmailDiff(oldData, newData);
+    case MOBILE_PUSH:
+    case PUSH:
+      return checkPushDiff(oldData, newData);
+    case WHATSAPP:
+      return checkWhatsappDiff(oldData, newData);
+    case ZALO:
+      return checkZaloDiff(oldData, newData);
+    default:
+      return false;
+  }
+};
+/**
+ * Checks differences between old and new SMS data
+ * @param {Object} oldData - Previous SMS template data
+ * @param {Object} newData - Updated SMS template data
+ * @returns {Boolean} - Whether the template has changed
+ */
+const checkSmsDiff = (oldData, newData) => {
+  // Extract old message content
+  const oldMessage =
+    oldData?.transformedMessageDetails?.smsMessageContent?.message || "";
+
+  // Extract new message content
+  const newMessage = newData?.messageBody || "";
+
+  // Compare message content
+  return oldMessage !== newMessage;
+};
+/**
+ * Checks differences between old and new Email data
+ * @param {Object} oldData - Previous Email template data
+ * @param {Object} newData - Updated Email template data
+ * @returns {Boolean} - Whether the template has changed
+ */
+const checkEmailDiff = (oldData, newData) => {
+  // Extract old email content
+  const oldEmailBody =
+    oldData?.transformedMessageDetails?.emailMessageContent?.messageBody || "";
+  const oldEmailSubject =
+    oldData?.transformedMessageDetails?.emailMessageContent?.messageSubject ||
+    "";
+
+  // Extract new email content
+  const newEmailBody = newData?.emailBody || "";
+  const newEmailSubject = newData?.emailSubject || "";
+
+  // Check if subject has changed
+  if (oldEmailSubject !== newEmailSubject) {
+    return true;
+  }
+
+  // Use lodash's isEqual for deep comparison of email body content --> more efficient for complex HTML content
+  return !isEqual(oldEmailBody, newEmailBody);
+};
+/**
+ * Checks differences between old and new Push data
+ * @param {Object} oldData - Previous Push template data
+ * @param {Object} newData - Updated Push template data
+ * @returns {Boolean} - Whether the template has changed
+ */
+const checkPushDiff = (oldData, newData) => {
+  // Extract old push content
+  const oldAndroidContent =
+    oldData?.transformedMessageDetails?.mpushMessageContent?.androidContent ||
+    {};
+  const oldIosContent =
+    oldData?.transformedMessageDetails?.mpushMessageContent?.iosContent || {};
+  const oldSubject =
+    oldData?.transformedMessageDetails?.mpushMessageContent?.messageSubject ||
+    "";
+
+  // Extract new push content
+  const newAndroidContent = newData?.androidContent || {};
+  const newIosContent = newData?.iosContent || {};
+  const newSubject = newData?.messageSubject || "";
+
+  // Compare subject
+  if (oldSubject !== newSubject) return true;
+
+  // Compare Android content
+  if (oldAndroidContent.title !== newAndroidContent.title) return true;
+  if (oldAndroidContent.message !== newAndroidContent.message) return true;
+  if (oldAndroidContent.cta?.actionLink !== newAndroidContent.cta?.actionLink) {
+    return true;
+  }
+
+  // Compare iOS content
+  if (oldIosContent.title !== newIosContent.title) return true;
+  if (oldIosContent.message !== newIosContent.message) return true;
+  if (oldIosContent.cta?.actionLink !== newIosContent.cta?.actionLink) {
+    return true;
+  }
+
+  return false;
+};
+/**
+ * Checks differences between old and new WhatsApp data
+ * @param {Object} oldData - Previous WhatsApp template data
+ * @param {Object} newData - Updated WhatsApp template data
+ * @returns {Boolean} - Whether the template has changed
+ */
+const checkWhatsappDiff = (oldData, newData) => {
+  // Extract old WhatsApp content
+  const oldMessage =
+    oldData?.transformedMessageDetails?.whatsappMessageContent?.messageBody ||
+    "";
+  const oldTemplateConfigs =
+    oldData?.transformedMessageDetails?.whatsappMessageContent
+      ?.templateConfigs || {};
+
+  // Extract new WhatsApp content
+  const newMessage = newData?.messageBody || "";
+  const newTemplateConfigs = newData?.templateConfigs || {};
+
+  // Compare message content
+  if (oldMessage !== newMessage) return true;
+
+  // Compare account IDs for quick rejection
+  if (
+    oldData?.transformedMessageDetails?.whatsappMessageContent?.accountId !==
+    newData?.accountId
+  ) {
+    return true;
+  }
+
+  // Compare source account identifiers for quick rejection
+  if (
+    oldData?.transformedMessageDetails?.whatsappMessageContent
+      ?.sourceAccountIdentifier !== newData?.sourceAccountIdentifier
+  ) {
+    return true;
+  }
+
+  // If template configs have different structures, they've changed
+  if (
+    Object.keys(newTemplateConfigs).length !==
+    Object.keys(oldTemplateConfigs).length
+  ) {
+    return true;
+  }
+
+  // Use deep comparison for template configs
+  return !isEqual(oldTemplateConfigs, newTemplateConfigs);
+};
+/**
+ * Checks differences between old and new Zalo data
+ * @param {Object} oldData - Previous Zalo template data
+ * @param {Object} newData - Updated Zalo template data
+ * @returns {Boolean} - Whether the template has changed
+ */
+const checkZaloDiff = (oldData, newData) => {
+  // Extract old Zalo content
+  const oldTemplateConfigs =
+    oldData?.transformedMessageDetails?.zaloMessageContent?.templateConfigs ||
+    {};
+  const oldAccountId =
+    oldData?.transformedMessageDetails?.zaloMessageContent?.accountId || "";
+  const oldToken =
+    oldData?.transformedMessageDetails?.zaloMessageContent?.token || "";
+
+  // Extract new Zalo content
+  const newTemplateConfigs = newData?.templateConfigs || {};
+  const newAccountId = newData?.accountId || "";
+  const newToken = newData?.token || "";
+
+  // Compare simple properties for quick rejection
+  if (oldAccountId !== newAccountId) return true;
+  if (oldToken !== newToken) return true;
+
+  // If template configs have different structures, they've changed
+  if (
+    Object.keys(newTemplateConfigs).length !==
+    Object.keys(oldTemplateConfigs).length
+  ) {
+    return true;
+  }
+
+  // Use deep comparison for template configs
+  return !isEqual(oldTemplateConfigs, newTemplateConfigs);
+};

package/v2Components/FormBuilder/index.js

@@ -44,7 +44,7 @@ import EDMEditor from "../Edmeditor";
 import BeeEditor from '../../v2Containers/BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
-import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetails } from "../../v2Containers/Cap/selectors";
+import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetails, selectMetaDataStatus } from "../../v2Containers/Cap/selectors";
 import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
@@ -56,6 +56,7 @@ import { GLOBAL_CONVERT_OPTIONS, OUTBOUND } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
+import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
@@ -1082,6 +1083,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
     });}
   }
+  
   saveForm(saveForm) {
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
@@ -3793,7 +3795,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
-      <CapSpin spinning={Boolean(this.liquidFlow && this.props.liquidExtractionInProgress)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
+      <CapSpin spinning={Boolean((this.liquidFlow && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
       <CapRow>
         {this.props.schema && this.renderForm()}
         <SlideBox
@@ -3827,6 +3829,7 @@ FormBuilder.defaultProps = {
   isNewVersionFlow: false,
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
+  metaDataStatus: "",
 };
 
 FormBuilder.propTypes = {
@@ -3874,12 +3877,13 @@ FormBuilder.propTypes = {
   isFullMode: PropTypes.bool,
   currentOrgDetails: PropTypes.object,
   liquidExtractionInProgress: PropTypes.bool,
-  showLiquidErrorInFooter: PropTypes.func,
+  showLiquidErrorInFooter: PropTypes.func
 };
 
 const mapStateToProps = createStructuredSelector({
   currentOrgDetails: selectCurrentOrgDetails(),
   liquidExtractionInProgress: selectLiquidStateDetails(),
+  metaDataStatus: selectMetaDataStatus(),
   metaEntities: makeSelectMetaEntities(),
 });
 

package/v2Containers/Cap/actions.js

@@ -85,3 +85,11 @@ export const getLiquidTags = (data,callback) => {
     callback,
   };
 };
+
+export const createCentralCommsMetaId = (data, callback) => {
+  return {
+    type: types.CREATE_CENTRAL_COMMS_META_ID_REQUEST,
+    data,
+    callback,
+  };
+};

package/v2Containers/Cap/constants.js

@@ -63,3 +63,7 @@ export const DEFAULT_MODULE = 'creatives';
 export const GET_LIQUID_TAGS_FAILURE = 'cap/GET_LIQUID_TAGS_FAILURE_V2';
 export const GET_LIQUID_TAGS_REQUEST = 'cap/GET_LIQUID_TAGS_REQUEST_V2';
 export const GET_LIQUID_TAGS_SUCCESS = 'cap/GET_LIQUID_TAGS_SUCCESS_V2';
+
+export const CREATE_CENTRAL_COMMS_META_ID_FAILURE = 'cap/CREATE_CENTRAL_COMMS_META_ID_FAILURE_V2';
+export const CREATE_CENTRAL_COMMS_META_ID_REQUEST = 'cap/CREATE_CENTRAL_COMMS_META_ID_REQUEST_V2';
+export const CREATE_CENTRAL_COMMS_META_ID_SUCCESS = 'cap/CREATE_CENTRAL_COMMS_META_ID_SUCCESS_V2';

package/v2Containers/Cap/reducer.js

@@ -199,6 +199,12 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state
         .set('demoVideoAndLinkJSONStatus', types.FAILURE)
         .set('demoVideoAndLinkJSONError', action?.error);
+    case types.CREATE_CENTRAL_COMMS_META_ID_REQUEST:
+      return state.set('metaDataStatus', types.REQUEST);
+    case types.CREATE_CENTRAL_COMMS_META_ID_SUCCESS:
+      return state.set('metaDataStatus', types.SUCCESS);
+    case types.CREATE_CENTRAL_COMMS_META_ID_FAILURE:
+      return state.set('metaDataStatus', types.FAILURE);
     default:
       return state;
   }

package/v2Containers/Cap/sagas.js

@@ -186,6 +186,22 @@ const getTopbarData = (parentModule) => {
   }
 };
 
+export function* createCentralCommsMetaId(action) {
+  try {
+    const result = yield call(Api.createCentralCommsMetaId, action?.data);
+    if (result?.status?.code === 200) {
+      if (action?.callback) {
+        yield call(action?.callback, result);
+      }
+      yield put({ type: types.CREATE_CENTRAL_COMMS_META_ID_SUCCESS, result });
+    } else {
+      yield put({ type: types.CREATE_CENTRAL_COMMS_META_ID_FAILURE, error: result?.message });
+    }
+  } catch (error) {
+    yield put({ type: types.CREATE_CENTRAL_COMMS_META_ID_FAILURE, error });
+  }
+}
+
 function* getTopbarMenuData(params) {
   const {parentModule} = params;
   try {
@@ -225,6 +241,10 @@ export function* watchLiquidEntity() {
   yield takeLatest(types.GET_LIQUID_TAGS_REQUEST, getLiquidTags);
 }
 
+export function* watchMetaId() {
+  yield takeLatest(types.CREATE_CENTRAL_COMMS_META_ID_REQUEST, createCentralCommsMetaId);
+}
+
 function* watchForOrgChange() {
   yield takeLatest(types.SWITCH_ORG_REQUEST, switchOrg);
 }
@@ -257,6 +277,7 @@ export default [
   watchGetTopbarMenuData,
   watchForGetVideosConfig,
   watchLiquidEntity,
+  watchMetaId,
 ];
 
 
@@ -268,6 +289,7 @@ export function* capSagaForFetchSchemaForEntity() {
 export function* capSagaLiquidEntity() {
   yield all([
     watchLiquidEntity(),
+    watchMetaId(),
   ]);
 };
 
@@ -279,5 +301,6 @@ export function* v2CapSagas() {
     watchForFetchUserInfo(),
     watchGetTopbarMenuData(),
     watchForGetVideosConfig(),
+    watchMetaId(),
   ]);
 }

package/v2Containers/Cap/selectors.js

@@ -72,6 +72,11 @@ const selectLiquidStateDetails = () => createSelector(
   (globalState) => globalState.get('fetchingLiquidTags')
 );
 
+const selectMetaDataStatus = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('metaDataStatus')
+);
+
 const makeSelectFetchingSchema = () => createSelector(
   selectCapDomain,
   (globalState) => globalState.get('fetchingSchema')
@@ -113,4 +118,5 @@ export {
   makeSelectFetchingSchemaError,
   makeSelectDemoVideoAndLink,
   selectLiquidStateDetails,
+  selectMetaDataStatus,
 };

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

@@ -40,6 +40,7 @@ exports[`<Cap /> should render correct component 1`] = `
       "changeOrg": [Function],
       "clearMetaEntities": [Function],
       "clearTopbarMenuData": [Function],
+      "createCentralCommsMetaId": [Function],
       "fetchSchemaForEntity": [Function],
       "getLiquidTags": [Function],
       "getSupportVideosConfig": [Function],