@capillarytech/creatives-library 8.0.15 → 8.0.18

package/package.json

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

package/utils/tagValidations.js

@@ -253,5 +253,25 @@ export const preprocessHtml = (content) => {
     "\n": "",  // Handling newlines by replacing them with an empty string
   };
 
-  return content?.replace(/'|"|&|<|>|"|\n/g, match => replacements[match]);
+
+  const styleTagRegex = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
+
+  const contentWithStyleFixes = content?.replace(styleTagRegex, (match, styleContent) => {
+    // Replace all occurrences of %} with % } within the style content
+    const modifiedStyleContent = styleContent?.replace(/%}/g, '% }');
+    // Reconstruct the <style> tag with the modified content
+    return match.replace(styleContent, modifiedStyleContent);
+  });
+
+  // Step 2: Perform the standard replacements on the entire content
+  return contentWithStyleFixes?.replace(/&#39;|&quot;|&amp;|&lt;|&gt;|"|\n/g, match => replacements[match]);
+};
+
+//this is used to get the subtags from custom or extended tags
+export const getTagMapValue = (object = {}) => {
+  return Object.values(
+    object
+  ).reduce((acc, current) => {
+    return { ...acc?.subtags ?? {}, ...current?.subtags ?? {} };
+  }, {});
 };

package/utils/tests/tagValidations.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed,validateTags} from '../tagValidations';
+import { checkSupport, extractNames, getTagMapValue, preprocessHtml, validateIfTagClosed,validateTags} from '../tagValidations';
 
 describe("check if curly brackets are balanced", () => {
     it("test for balanced curly brackets", () => {
@@ -415,5 +415,32 @@ describe('preprocessHtml', () => {
     const expectedOutput = "This is &amplt; not an entity.";
     expect(preprocessHtml(input)).toEqual(expectedOutput);
   });
+  it('Should handle style tags with %}', () => {
+    const input = "<style {line-height:0;font-size:75%} >sup{line-height:0;font-size:75%}</style> ";
+    const expectedOutput = "<style {line-height:0;font-size:75%} >sup{line-height:0;font-size:75% }</style> ";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+
+});
+
 
+describe("getTagMapValue", () => {
+  it("should return an empty object when no object is provided", () => {
+    const result = getTagMapValue();
+    expect(result).toEqual({});
+  });
+
+  it("should return the tag map value when an object is provided", () => {
+    const object = {
+      "key 1": {
+        name: "23",
+        subtags: {
+          name: "233",
+        },
+      },
+    };
+    const result = getTagMapValue(object);
+    expect(result).toEqual({ name: "233" });
+  });
 });

package/v2Components/Ckeditor/index.js

@@ -19,8 +19,9 @@ import './style.scss';
 const loadScript = require('load-script');
 
 const defaultScriptUrl = `${window.location.origin}/arya/ui/library/ckeditor/ckeditor.js`;
-// const defaultScriptUrl = 'https://crm-nightly-new.cc.capillarytech.com/arya/ui/library/ckeditor/ckeditor.js';
-//Uncomment the above line to use CKEDITOR in local
+//const defaultScriptUrl = 'https://nightly.intouch.capillarytech.com/arya/ui/library/ckeditor/ckeditor.js';
+/*Uncomment the above line to use CKEDITOR in local
+*/
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {

package/v2Components/FormBuilder/index.js

@@ -1062,6 +1062,26 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   continueSaveForm = (id) => {
 
   };
+  handleLiquidTemplateSubmit =(templateContent) => {
+    if(templateContent){this.setState((prevState) => {
+      return {
+        formData: {
+          ...prevState?.formData,
+          base: {
+            ...prevState?.formData?.base,
+            en: {
+              ...prevState?.formData?.base?.en,
+              "template-content": preprocessHtml(templateContent)
+            }
+          }
+        }
+      };
+    }, () => {
+      if (this.props.onSubmit) {
+        this.props.onSubmit(this.state.formData);
+      }
+    });}
+  }
   saveForm(saveForm) {
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
@@ -1069,9 +1089,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     if ( this.state.isFormValid ) {
       if (this.liquidFlow) {
+        const templateContent = this.state.formData?.base?.en?.["template-content"] || "";
         //Converts given HTML content to plain text string.
         const content = convert(
-          this.state.formData?.base?.en?.["template-content"]
+          templateContent
         );
       /* 
         The `handleResult` function is used as a callback for `getLiquidTags` to handle the results post-processing. 
@@ -1124,7 +1145,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               this.props.stopValidation();
               return;
             }
-            this.props.onSubmit(this.state.formData);
+            this.handleLiquidTemplateSubmit(templateContent);
           }
         };
         this.props.actions.getLiquidTags(preprocessHtml(content), handleResult);

package/v2Containers/Cap/mockData.js

@@ -51,7 +51,7 @@ export const expectedStateGetLiquidTagsRequest = {
     messages: [],
     metaEntities: {
       layouts: undefined,
-      tagLookupMap: { undefined: "32" },
+      tagLookupMap: { undefined: {definition: {}} },
       tags: { standard: { random: "32" } }
     },
     orgID: "",

package/v2Containers/Cap/reducer.js

@@ -7,6 +7,7 @@ import * as types from './constants';
 import initialState from '../../initialState';
 import { FAILURE } from '../App/constants';
 import { TAG } from '../Whatsapp/constants';
+import { getTagMapValue } from '../../utils/tagValidations';
 
 function capReducer(state = fromJS(initialState.cap), action) {
   switch (action.type) {
@@ -96,14 +97,34 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state
         .set('fetchingLiquidTags', false)
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
-      const stateMeta = state.get('metaEntities');
-      const standardTagMap = _.keyBy(action?.data?.metaEntities?.standard, item => item?.definition?.value);
+      //Process standard tags
+      const standardTagMapInitial = _.keyBy(
+        action?.data?.metaEntities?.standard,
+        item => item?.definition?.value
+      );
+      // Mapping only the `definition` object instead of the entire item, to reduce space used
+      const standardTagMap = _.mapValues(standardTagMapInitial, item => ({
+        definition: item?.definition ?? {},
+      }));
+
+      // Process custom tags
+      const customSubtags = getTagMapValue(action?.data?.metaEntities?.custom)
+      // Process extended tags
+      const extendedSubtags = getTagMapValue(action?.data?.metaEntities?.extended);
+
+      // Combine all maps
+      const combinedTagMap = {
+        ...standardTagMap,
+        ...customSubtags,
+        ...extendedSubtags
+      };
+      const stateMeta = state.get("metaEntities");
       return state
         .set('fetchingSchema', false)
         .set('metaEntities', {
           layouts: action.data && action.entityType === 'LAYOUT' ? action.data.metaEntities : stateMeta.layouts,
           tags: action.data && action.entityType === 'TAG' ? action.data.metaEntities : stateMeta.tags,
-          tagLookupMap: action?.data && action?.entityType === TAG ? standardTagMap : stateMeta?.tagLookupMap,
+          tagLookupMap: action?.data && action?.entityType === TAG ? combinedTagMap : stateMeta?.tagLookupMap,
         })
         .set('fetchingSchemaError', false);
     }