@capillarytech/creatives-library 8.0.87-alpha.2 → 8.0.87-alpha.21

package/initialState.js

@@ -50,4 +50,5 @@ export default {
   facebook: {
 
   },
+  metaTagsStatus: '',
 };

package/package.json

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

package/services/api.js

@@ -118,7 +118,7 @@ function request(url, options, handleUnauthorizedStatus) {
     .catch((error) => error);
 }
 
-function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false, orgUnitId = false) {
+function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false, orgUnitId = false, allowOrgInProd = false) {
   const token = loadItem('token');
   const orgID = loadItem('orgID');
   const user = loadItem('user');
@@ -145,8 +145,8 @@ function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeader
       headers['X-CAP-REMOTE-USER'] = user.refID;
     }
 
-    if (process.env.NODE_ENV !== 'production' && orgID !== undefined) {
-      headers['X-CAP-API-AUTH-ORG-ID'] = orgID;
+    if ((allowOrgInProd || process.env.NODE_ENV !== "production") && orgID !== undefined) {
+      headers["X-CAP-API-AUTH-ORG-ID"] = orgID;
     }
 
     if (process.env.NODE_ENV !== 'production' && token !== undefined) {
@@ -520,13 +520,7 @@ export const checkBulkDuplicates = (data) => {
 export const createWhatsappTemplate = ({payload, gupshupMediaFile }) => {
   const data = new FormData();
   data.append('payload', JSON.stringify(payload));
-  if (Array.isArray(gupshupMediaFile) && gupshupMediaFile.length) {
-    gupshupMediaFile.forEach((file, index) => {
-      data.append(`gupshupMediaFile_${index}`, file);
-    });
-  } else {
-    data.append('gupshupMediaFile', gupshupMediaFile);
-  }
+  data.append('gupshupMediaFile', gupshupMediaFile);
   const url = `${API_ENDPOINT}/templates/WHATSAPP`;
   return request(url, getAPICallObject('POST', data, true));
 };
@@ -575,4 +569,9 @@ export const getLiquidTags = (content) => {
   return request(url, getAPICallObject("POST", { content }, false, true));
 };
 
+export const createCentralCommsMetaId = (payload, metaId = 'TRANSACTION') => {
+  const url = `${API_ENDPOINT}/common/central-comms/meta-id/${metaId}`;
+  return request(url, getAPICallObject('POST', payload, false, false, false, true));
+};
+
 export {request, getAPICallObject};

package/utils/transformerUtils.js

@@ -0,0 +1,474 @@
+// Import channel constants from the existing constants file
+import {
+  SMS,
+  EMAIL,
+  MOBILE_PUSH,
+  WHATSAPP,
+  PUSH,
+  ZALO
+} 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 ||
+        (channelType === SMS || channelType === EMAIL ? "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 || "";
+
+  // Compare both subject and body
+  return oldEmailBody !== newEmailBody || oldEmailSubject !== newEmailSubject;
+};
+/**
+ * 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;
+
+  // If new data has template configs but old data doesn't, there is a change
+  if (
+    Object.keys(newTemplateConfigs).length > 0 &&
+    Object.keys(oldTemplateConfigs).length === 0
+  ) {
+    return true;
+  }
+
+  // If both have template configs, perform detailed comparison
+  if (
+    Object.keys(newTemplateConfigs).length > 0 &&
+    Object.keys(oldTemplateConfigs).length > 0
+  ) {
+    // Compare template names and IDs
+    if (oldTemplateConfigs.id !== newTemplateConfigs.id) return true;
+    if (oldTemplateConfigs.name !== newTemplateConfigs.name) return true;
+    if (oldTemplateConfigs.template !== newTemplateConfigs.template) {
+      return true;
+    }
+
+    // Compare template variables
+    if (
+      JSON.stringify(oldTemplateConfigs.varMapped) !==
+      JSON.stringify(newTemplateConfigs.varMapped)
+    ) {
+      return true;
+    }
+
+    // Compare media settings
+    if (
+      JSON.stringify(oldTemplateConfigs.whatsappMedia) !==
+      JSON.stringify(newTemplateConfigs.whatsappMedia)
+    ) {
+      return true;
+    }
+
+    // Compare other template properties
+    if (oldTemplateConfigs.category !== newTemplateConfigs.category) {
+      return true;
+    }
+    if (oldTemplateConfigs.language !== newTemplateConfigs.language) {
+      return true;
+    }
+    if (oldTemplateConfigs.buttonType !== newTemplateConfigs.buttonType) {
+      return true;
+    }
+    if (
+      JSON.stringify(oldTemplateConfigs.buttons) !==
+      JSON.stringify(newTemplateConfigs.buttons)
+    ) {
+      return true;
+    }
+  }
+
+  // Check if account details have changed
+  if (
+    oldData?.transformedMessageDetails?.whatsappMessageContent?.accountId !==
+    newData?.accountId
+  ) {
+    return true;
+  }
+  if (
+    oldData?.transformedMessageDetails?.whatsappMessageContent
+      ?.sourceAccountIdentifier !== newData?.sourceAccountIdentifier
+  ) {
+    return true;
+  }
+
+  return false;
+};
+/**
+ * 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 account ID
+  if (oldAccountId !== newAccountId) return true;
+
+  // Compare token
+  if (oldToken !== newToken) return true;
+
+  // If new data has template configs but old data doesn't, there is a change
+  if (
+    Object.keys(newTemplateConfigs).length > 0 &&
+    Object.keys(oldTemplateConfigs).length === 0
+  ) {
+    return true;
+  }
+
+  // If both have template configs, perform detailed comparison
+  if (
+    Object.keys(newTemplateConfigs).length > 0 &&
+    Object.keys(oldTemplateConfigs).length > 0
+  ) {
+    // Compare template IDs and names
+    if (oldTemplateConfigs.id !== newTemplateConfigs.id) return true;
+    if (oldTemplateConfigs.name !== newTemplateConfigs.name) return true;
+    if (oldTemplateConfigs.template !== newTemplateConfigs.template) {
+      return true;
+    }
+
+    // Compare template variables
+    if (
+      JSON.stringify(oldTemplateConfigs.varMapped) !==
+      JSON.stringify(newTemplateConfigs.varMapped)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+};

package/v2Components/CapWhatsappCTA/messages.js

@@ -104,8 +104,4 @@ export default defineMessages({
     id: `${prefix}.whatsappCtaTagListRevert`,
     defaultMessage: 'Reset website URL label to default value',
   },
-  url: {
-    id: `${prefix}.url`,
-    defaultMessage: 'URL',
-  },
 });

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, selectMetaTagsStatus } 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 { 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.metaIdStatus === 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: () => {},
+  metaIdStatus: false,
 };
 
 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(),
+  metaIdStatus: selectMetaTagsStatus(),
   metaEntities: makeSelectMetaEntities(),
 });
 

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -567,10 +567,6 @@
         font-size: 10px;
         font-family: 'open-sans';
       }
-      &.message-pop-carousel {
-        position: relative; 
-        margin-right: 4px;
-      }
     }
   }
   .android-push-message-Container, .iphone-push-message-Container{
@@ -751,11 +747,6 @@
       width: 153px;
     }
   }
-
-  .msg-container-carousel {
-    display: flex;
-    flex-direction: column;
-  }
 }
 
 .align-center {