@capillarytech/creatives-library 8.0.11 → 8.0.12

package/package.json

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

package/services/api.js

@@ -351,10 +351,11 @@ export const getUserList = () => {
   return API.get(url);// request(url, getAPICallObject('GET'));
 };
 
-export const fetchSchemaForEntity = ({queryParams}) => {
+export const fetchSchemaForEntity = async ({queryParams}) => {
   if (queryParams.version === "v2" && queryParams.type === "LAYOUT") {
     const schema = getSchema(queryParams.layout);
-    return schema.then((layout) => layout).catch((err) => {
+    // Added async/await to ensure the schema object is resolved before returning it
+    return await schema.then((layout) => layout).catch((err) => {
       console.error(err);
     });
   }

package/services/tests/api.test.js

@@ -11,8 +11,10 @@ import {
   getTemplateInfoById,
   askAiraForLiquid,
   getLiquidTags,
+  fetchSchemaForEntity,
 } from '../api';
 import { mockData } from './mockData';
+import getSchema from '../getSchema';
 const sampleFile = require('../../assets/line.png');
 
 let mockDecompressJsonObject;
@@ -24,6 +26,8 @@ jest.mock('@capillarytech/cap-ui-utils', () => {
   };
 });
 
+jest.mock('../getSchema', () => jest.fn());
+
 describe('getSenderDetails -- Test with valid responses', () => {
   it('Should return correct response', () =>
     expect(getSenderDetails('WHATSAPP', -1)).toEqual(Promise.resolve()));
@@ -438,4 +442,33 @@ describe('getLiquidTags -- Test with various responses', () => {
       error: 'Internal Server Error',
     });
   });
-});
+});
+
+describe('fetchSchemaForEntity', () => {
+  it('should fetch schema for version v2 and type LAYOUT', async () => {
+    const queryParams = { version: 'v2', type: 'LAYOUT', layout: 'testLayout' };
+    const mockLayout = { id: 'layout1', name: 'Test Layout' };
+
+    getSchema.mockReturnValue(Promise.resolve(mockLayout));
+
+    const result = await fetchSchemaForEntity({ queryParams });
+
+    expect(getSchema).toHaveBeenCalledWith(queryParams.layout);
+    expect(result).toEqual(mockLayout);
+  });
+
+  it('should handle errors when fetching schema', async () => {
+    const queryParams = { version: 'v2', type: 'LAYOUT', layout: 'testLayout' };
+    const mockError = new Error('Failed to fetch schema');
+
+    getSchema.mockReturnValue(Promise.reject(mockError));
+
+    console.error = jest.fn();
+
+    const result = await fetchSchemaForEntity({ queryParams });
+
+    expect(getSchema).toHaveBeenCalledWith(queryParams.layout);
+    expect(result).toBeUndefined();
+    expect(console.error).toHaveBeenCalledWith(mockError);
+  });
+});

package/v2Components/FormBuilder/index.js

@@ -98,7 +98,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       customPopoverVisible: false,
       isDrawerVisible: false,
       translationLang: 'en',
-      showLiquidValidation: false,
       liquidErrorMessage: {
         STANDARD_ERROR_MSG: [],
         LIQUID_ERROR_MSG: [],
@@ -494,7 +493,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
     const currentModule = (this.props.location && this.props.location.query.module) ? this.props.location.query.module : 'default';
     let errorData = _.cloneDeep(this.state.errorData);
-    const stateFormData = _.cloneDeep(this.state.formData);
     if (channel && channel.toUpperCase() === SMS) {
       for (let count = 0; count < this.state.tabCount; count += 1) {
         if (_.isEmpty(errorData[count])) {
@@ -961,7 +959,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         } else if(index === 'template-version' && data !== '') {
           errorData[index] = false;
         }
-
+        isLiquidValid = isValid; // Existing validations support for liquid enabled orgs
         // Check error for the versions
         if (!isNaN(index) || index === 'base') {
           if (errorData[index] === undefined) {
@@ -1002,7 +1000,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   // Adds a bypass for cases where content is initially empty in the creation flow.
                   if(this.liquidFlow && !this.props.isEdit){
                     errorString = "";
-                    isValid = true;
                     isLiquidValid = true;
                   }
                 }
@@ -1013,7 +1010,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (this.liquidFlow) {
               this.setState(
                 (prevState) => ({
-                  showLiquidValidation: true,
                   liquidErrorMessage: {
                     ...prevState.liquidErrorMessage,
                     STANDARD_ERROR_MSG: [errorString],
@@ -1036,15 +1032,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       });
     }
+
+    const isTemplateValid = this.liquidFlow ? isLiquidValid : isValid;
     //Updating the state with the error data
     this.setState((prevState) => ({
-      isFormValid: isValid,
-      showLiquidValidation: prevState.liquidErrorMessage?.LIQUID_ERROR_MSG?.length > 0 ? true : !isLiquidValid,
+      isFormValid: isTemplateValid,
       liquidErrorMessage: {
         //Do not update the LIQUID_ERROR_MSG validation error message
         ...prevState.liquidErrorMessage,
         //update Standard error message based on the updated content
-        STANDARD_ERROR_MSG: isValid ? [] : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
+        STANDARD_ERROR_MSG: isTemplateValid ? [] : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
       },
       errorData,
     }), () => {
@@ -1054,8 +1051,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
     });
     
-    this.props.onFormValidityChange(isValid, errorData);
-    return isValid;
+    this.props.onFormValidityChange(isTemplateValid, errorData);
+    return isTemplateValid;
   }
 
   indexOfEnd(targetString, string) {
@@ -1083,9 +1080,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       */
         const handleResult = (result) => {
           const {formatMessage} = this.props.intl;
+          // Checks for errors in the result and displays them if any are found.
           if (result?.errors?.length > 0) {
             this.setState((prevState) => ({
-              showLiquidValidation: true,
               liquidErrorMessage: {
                 ...prevState.liquidErrorMessage,
                 LIQUID_ERROR_MSG: result?.errors?.map(error => error?.message) ?? [formatMessage(messages.somethingWentWrong)],
@@ -1096,22 +1093,22 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             this.props.stopValidation();
             return;
           }
-          else if (result?.data?.length > 0) {
-            const extractedLiquidTags = extractNames(result?.data);
+          // Extracts the supported liquid tags from the given content and do the necessary checks.
+          else {
+            const extractedLiquidTags = extractNames(result?.data || []);
             // Extracts the supported liquid tags from the given content.
             const supportedLiquidTags = checkSupport(
               result,
               this.props?.metaEntities?.tagLookupMap
             );
             const unsupportedLiquidTags = extractedLiquidTags?.filter(
-              (tag) => !supportedLiquidTags?.includes(tag)
+              (tag) => !supportedLiquidTags?.includes(tag) && !this.skipTags(tag)
             );
             if (
               unsupportedLiquidTags?.length > 0
             ) {
               this.setState(
                 (prevState) => ({
-                  showLiquidValidation: true,
                   liquidErrorMessage: {
                     ...prevState.liquidErrorMessage,
                     LIQUID_ERROR_MSG: [formatMessage(messages.unsupportedTagsValidationError, {
@@ -3425,7 +3422,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <CapColumn
                   style={val.colStyle ? val.colStyle : {border : ""}}
                   span={val.width}
-                  className={`${this.state.showLiquidValidation && this.liquidFlow && "error-boundary"}  `}
+                  className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow && "error-boundary"}  `}
                 >
                   <CKEditor
                     id={val.id}
@@ -3469,7 +3466,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isModuleFilterEnabled = this.props.isFullMode;
             }
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${this.state.showLiquidValidation && this.liquidFlow && "error-boundary"}`}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow && "error-boundary"}`}>
                 <BeeEditor
                   uid={uuid}
                   tokenData={beeToken}

package/v2Containers/MobilePush/Edit/index.js

@@ -41,6 +41,8 @@ import v2MobilePushEditReducer from './reducer';
 import * as globalActions from '../../Cap/actions';
 import { MAPP_SDK } from './constants';
 import { isEmbeddedEditOrPreview } from '../../../utils/commonUtils';
+import { EMBEDDED } from '../../Whatsapp/constants';
+import { OUTBOUND } from '../../../v2Components/FormBuilder/constants';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -115,27 +117,53 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     let selectedWeChatAccount = {};
     const queryType = String(get(this.props, 'location.query.type', ''))?.toLowerCase();
     const creativesMode = String(get(this.props, 'creativesMode', ''))?.toLowerCase();
+    const { Edit: EditProps, templateData, Templates, type } = this.props || {};
+    const { selectedWeChatAccount: editSelectedWeChatAccount, templateDetails } = EditProps || {};
+    const { id: selectedWeChatAccountId } = editSelectedWeChatAccount || {};
+    const { definition } = templateDetails || {};
+    const { accountId: templateAccountId } = definition || {};
+    const { Edit: nextEdit } = nextProps || {};
     if (isEmbeddedEditOrPreview(queryType, creativesMode)) {
-      selectedWeChatAccount = !_.isEmpty(this.props.Edit.selectedWeChatAccount)
-        ? this.props.Edit.selectedWeChatAccount
-        : nextProps.Edit.selectedWeChatAccount;
-    } else if (!_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
-      selectedWeChatAccount = this.props.Templates.selectedWeChatAccount;
-    }
-
-    if (this.props.location.query.type === 'embedded' && !nextProps.Edit.fetchingWeCrmAccounts && !_.isEqual(this.props.Edit.weCrmAccounts, nextProps.Edit.weCrmAccounts) && (!selectedWeChatAccount || _.isEmpty(selectedWeChatAccount))) {
-      this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, get(this.props, "templateData.definition.accountId"));
-    }
-    // Check if the query type is 'embedded' and the creatives mode is either 'edit' or 'preview'. Also, ensure that the selected WeChat account ID is not equal to the account ID in the template details.
-   // If all conditions are met, set the mobile push account options using the provided weCrmAccounts and the account ID from templateData.
-    if (isEmbeddedEditOrPreview(queryType, creativesMode) && !_.isEqual(this.props.Edit.selectedWeChatAccount?.id, this.props.Edit.templateDetails?.definition?.accountId)) {
-      this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts, get(this.props, "templateData.definition.accountId"));
-    }
-    if (!_.isEmpty(nextProps.Edit.selectedWeChatAccount) && !_.isEqual(this.props.Edit.selectedWeChatAccount, nextProps.Edit.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && this.props.location.query.module === "loyalty") {
+      selectedWeChatAccount = !_.isEmpty(editSelectedWeChatAccount)
+        ? editSelectedWeChatAccount
+        : nextEdit?.selectedWeChatAccount;
+    } else if (!_.isEmpty(Templates?.selectedWeChatAccount)) {
+      selectedWeChatAccount = Templates?.selectedWeChatAccount;
+    }
+
+    if (queryType === EMBEDDED && !nextEdit?.fetchingWeCrmAccounts && !_.isEqual(EditProps?.weCrmAccounts, nextEdit?.weCrmAccounts) && (!selectedWeChatAccount || _.isEmpty(selectedWeChatAccount))) {
+      this.setMobilePushAccountOptions(nextEdit?.weCrmAccounts, templateData?.definition?.accountId);
+    }
+    // Check if the query type is 'embedded' and the creatives mode is either 'edit' or 'preview'.
+    // If the type is not 'outbound', ensure that the selected WeChat account ID is not equal to the account ID in the template details.
+    // If all conditions are met, set the mobile push account options using the provided weCrmAccounts and the account ID from templateData.
+    if (
+      isEmbeddedEditOrPreview(queryType, creativesMode) &&
+      type !== OUTBOUND.toLowerCase() &&
+      nextEdit?.weCrmAccounts &&
+      !EditProps?.fetchingWeCrmAccounts &&
+      templateData?.definition?.accountId &&
+      !_.isEqual(templateAccountId, templateData?.definition?.accountId)
+    ) {
+      this.setMobilePushAccountOptions(nextEdit?.weCrmAccounts, templateData?.definition?.accountId);
+    }
+    // If the type is 'outbound', ensure that the selected WeChat account ID is not equal to the account ID in the template details.
+    // If all conditions are met, set the mobile push account options using the provided weCrmAccounts and the template account ID.
+    if (
+      isEmbeddedEditOrPreview(queryType, creativesMode) &&
+      type === OUTBOUND.toLowerCase() &&
+      nextEdit?.weCrmAccounts &&
+      selectedWeChatAccountId &&
+      templateAccountId &&
+      !_.isEqual(selectedWeChatAccountId, templateAccountId)
+    ) {
+      this.setMobilePushAccountOptions(nextEdit?.weCrmAccounts, templateAccountId);
+    }
+    if (!_.isEmpty(nextEdit?.selectedWeChatAccount) && !_.isEqual(editSelectedWeChatAccount, nextEdit?.selectedWeChatAccount) && (queryType === EMBEDDED) && this.props.location.query.module === "loyalty") {
       const params = {
         name: '',
         sortBy: 'Most Recent',
-        accountId: nextProps.Edit.selectedWeChatAccount.id,
+        accountId: nextEdit?.selectedWeChatAccount?.id,
       };
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
@@ -164,7 +192,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         this.setTemplateOptions(nextProps.Edit.mobilepushTemplates);
       }
     }
-
     this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
     if (nextProps.Edit.uploadedAssetData) {
       const formData = _.cloneDeep(this.state.formData);