@capillarytech/creatives-library 8.0.10 → 8.0.11

package/config/app.js

@@ -6,6 +6,7 @@ const config = {
     api_endpoint: '/arya/api/v1/creatives',
     campaigns_api_endpoint: '/iris/v2/campaigns',
     campaigns_api_org_endpoint: '/iris/v2/org/campaign',
+    liquid_endpoint:'/iris/v2/template',
     auth_endpoint: '/arya/api/v1/auth',
     arya_endpoint: '/arya/api/v1',
     login_url: '/auth/login',
@@ -25,6 +26,7 @@ const config = {
     exports_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/export/data',
     login_url: '/auth/login',
     dashboard_url: '/sms',
+    liquid_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/template',
     dashboard_url_v2: '/v2',
   },
   testing: {

package/containers/App/constants.js

@@ -9,6 +9,7 @@ export const HOSPITALITY_BASED_SCOPE = 'HOSPITALITY_BASED_SCOPE';
 export const REGISTRATION_CUSTOM_FIELD = 'Registration custom fields';
 export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
+export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';

package/initialState.js

@@ -14,7 +14,10 @@ export default {
     metaEntities: {
       tags: [],
       layouts: [],
+      tagLookupMap: {},
     },
+    liquidTags: [],
+    fetchingLiquidTags: false,
     fetchingSchema: true,
     fetchingSchemaError: '',
     // isLoggedIn,

package/package.json

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

package/services/api.js

@@ -14,6 +14,7 @@ let API_ENDPOINT = config.development.api_endpoint;
 let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
 let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
 let CAMPAIGNS_API_ORG_ENDPOINT = config.development.campaigns_api_org_endpoint;
+let LIQUID_API_ENDPOINT = config.development.liquid_endpoint;
 
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
 let ARYA_ENDPOINT = config.development.arya_endpoint;
@@ -26,6 +27,7 @@ if (process.env.NODE_ENV === 'production') {
   ARYA_ENDPOINT = config.production.arya_endpoint;
   SUBSCRIPTION_API_ENDPOINT = config.production.subscription_api_endpoint;
   EXPORT_API_ENDPOINT = config.production.exports_api_endpoint;
+  LIQUID_API_ENDPOINT = config.production.liquid_endpoint;
 }
 let requestCallerName = '';
 const isProd = process.env.NODE_ENV === 'production';
@@ -438,6 +440,19 @@ export const getLocizMessage = async (locale) => {
   return response;
 };
 
+export const askAiraForLiquid = async ({ templateContent = '', errorMessage = '' }) => {
+  const url = `${ARYA_ENDPOINT}/ask-aira-service/creatives_ai/liquidValidation`;
+  const response = await request(
+    url,
+    getAPICallObject("POST", {
+      temperature: 0.8,
+      templateContent,
+      parserError: errorMessage,
+    })
+  );
+  return response;
+};
+
 export const getUnsubscribeUrl = () => {
   const body = {
     orgUnitId: -1,
@@ -543,4 +558,9 @@ export const getNavigationConfigApi = async () => {
   return await request(url, getAPICallObject('GET'));
 };
 
+export const getLiquidTags = (content) => {
+  const url = `${LIQUID_API_ENDPOINT}/extractTags`;
+  return request(url, getAPICallObject("POST", { content }, false, true));
+};
+
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -9,6 +9,8 @@ import {
   getAllTemplates,
   getTemplateDetails,
   getTemplateInfoById,
+  askAiraForLiquid,
+  getLiquidTags,
 } from '../api';
 import { mockData } from './mockData';
 const sampleFile = require('../../assets/line.png');
@@ -291,3 +293,149 @@ describe('getTemplateInfoById -- Test with valid responses', () => {
     });
   });
 });
+
+describe('askAiraForLiquid -- Test with various responses', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn(); // Mocking global fetch function
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks(); // Restore all mocks after each test
+  });
+
+  it('Should return correct response when syntax errors are present', async () => {
+    global.fetch.mockReturnValue(
+      Promise.resolve({
+        status: 200,
+        json: () =>
+          Promise.resolve({
+            status: 200,
+            response: 'Error description here',
+          }),
+      })
+    );
+
+    const templateContent = 'Invalid Liquid Template';
+    const errorMessage = 'Parser error message';
+    const response = await askAiraForLiquid({ templateContent, errorMessage });
+
+    expect(response).toEqual({
+      status: 200,
+      response: 'Error description here',
+    });
+  });
+
+  it('Should return empty string when no syntax errors are present', async () => {
+    global.fetch.mockReturnValue(
+      Promise.resolve({
+        status: 200,
+        json: () =>
+          Promise.resolve({
+            status: 200,
+            response: '',
+          }),
+      })
+    );
+
+    const templateContent = 'Valid Liquid Template';
+    const errorMessage = '';
+    const response = await askAiraForLiquid({ templateContent, errorMessage });
+
+    expect(response).toEqual({
+      status: 200,
+      response: '',
+    });
+  });
+
+  it('Should handle server errors gracefully', async () => {
+    global.fetch.mockReturnValue(
+      Promise.resolve({
+        status: 500,
+        json: () =>
+          Promise.resolve({
+            status: 500,
+            error: 'Internal Server Error',
+          }),
+      })
+    );
+
+    const templateContent = 'Any Template';
+    const errorMessage = 'Any Error Message';
+    const response = await askAiraForLiquid({ templateContent, errorMessage });
+
+    expect(response).toEqual({
+      status: 500,
+      error: 'Internal Server Error',
+    });
+  });
+});
+
+describe('getLiquidTags -- Test with various responses', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn(); // Mocking global fetch function
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks(); // Restore all mocks after each test
+  });
+
+  it('Should return correct tags when content has Liquid syntax', async () => {
+    const mockResponse = {
+      status: 200,
+      json: () =>
+        Promise.resolve({
+          status: 200,
+          response: ['tag1', 'tag2'],
+        }),
+    };
+    global.fetch.mockReturnValue(Promise.resolve(mockResponse));
+
+    const content = 'Some Liquid content with tags';
+    const response = await getLiquidTags(content);
+
+    expect(response).toEqual({
+      status: 200,
+      response: ['tag1', 'tag2'],
+    });
+  });
+
+  it('Should return empty array when content has no Liquid tags', async () => {
+    const mockResponse = {
+      status: 200,
+      json: () =>
+        Promise.resolve({
+          status: 200,
+          response: [],
+        }),
+    };
+    global.fetch.mockReturnValue(Promise.resolve(mockResponse));
+
+    const content = 'Plain content without Liquid tags';
+    const response = await getLiquidTags(content);
+
+    expect(response).toEqual({
+      status: 200,
+      response: [],
+    });
+  });
+
+  it('Should handle server errors gracefully', async () => {
+    const mockResponse = {
+      status: 500,
+      json: () =>
+        Promise.resolve({
+          status: 500,
+          error: 'Internal Server Error',
+        }),
+    };
+    global.fetch.mockReturnValue(Promise.resolve(mockResponse));
+
+    const content = 'Any content';
+    const response = await getLiquidTags(content);
+
+    expect(response).toEqual({
+      status: 500,
+      error: 'Internal Server Error',
+    });
+  });
+});

package/utils/common.js

@@ -21,6 +21,7 @@ import {
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
   BADGES_ISSUE,
   ENABLE_WECHAT,
+  LIQUID_SUPPORT,
 } from '../containers/App/constants';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -88,6 +89,12 @@ export const hasPromoFeature = Auth.hasFeatureAccess.bind(
   PROMO_ENGINE,
 );
 
+export const hasLiquidSupportFeature = Auth.hasFeatureAccess.bind(
+  null,
+  LIQUID_SUPPORT,
+);
+
+
 export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
   null,
   GIFT_CARDS,

package/utils/commonUtils.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import get from 'lodash/get';
+import { EMBEDDED } from '../v2Containers/Whatsapp/constants';
+import { EDIT, PREVIEW } from '../v2Containers/App/constants';
 
 export const apiMessageFormatHandler = (id, fallback) => (
-    <FormattedMessage id={id} defaultMessage={fallback} />
+  <FormattedMessage id={id} defaultMessage={fallback} />
 );
 
 export const addBaseToTemplate = (template) => {
@@ -20,3 +23,6 @@ export const addBaseToTemplate = (template) => {
   }
   return template;
 };
+
+export const isEmbeddedEditOrPreview = (queryType, creativesMode) => queryType === EMBEDDED &&
+  [EDIT, PREVIEW].includes(creativesMode);

package/utils/tagValidations.js

@@ -12,6 +12,81 @@ import lodashCloneDeep from 'lodash/cloneDeep';
 const DEFAULT = 'default';
 const SUBTAGS = 'subtags';
 
+/**
+ * Checks if the response object of Tags supports the Tags added in the Add Labels Section
+ * @param {Object} response - The response object to check.
+ * @param {Object} tagObject - The tagLookupMap.
+ */
+export const checkSupport = (response = {}, tagObject = {}) => {
+  const supportedList = [];
+  // Verifies the presence of the tag in the 'Add Labels' section.
+  const checkNameInTagObject = (name) => !!tagObject[name];
+
+  // Verify if childTag is a valid sub-tag of parentTag from the 'Add Labels' section or if it's unsupported.
+  const checkSubtags = (parentTag, childName) => {
+    if (!tagObject?.[parentTag]) return false;
+    let updatedChildName = childName;
+    if (childName?.includes(".")) {
+      updatedChildName = "." + childName?.split(".")?.[1];
+    }
+    const subTags = tagObject?.[parentTag]?.definition?.subtags;
+    return subTags?.includes(updatedChildName);
+  };
+
+  //Recursively checks if the childTag is actually a Sub-tag of the ParentTag
+  const processChildren = (parentTag = "", children = []) => {
+    for (const child of children) {
+      if (checkSubtags(parentTag, child?.name)) {
+        supportedList.push(child?.name);
+      }
+      if (child?.children?.length) {
+        processChildren(child?.name, child?.children);
+      }
+    }
+  };
+
+  //Checks if the tag is present in the Add Label Section
+  for (const item of response?.data || []) {
+    if (checkNameInTagObject(item?.name)) {
+      supportedList?.push(item?.name);
+    }
+    //Repeat the process for subtags
+    if (item?.children?.length) {
+      processChildren(item?.name, item?.children);
+    }
+
+  }
+
+  return supportedList;
+};
+
+/**
+ * Extracts the names from the given data.
+ * @param {Array} data - The data to extract names from.
+ * @returns {Array} - The extracted names.
+ */
+export function extractNames(data) {
+  const names = [];
+
+  function traverse(node) {
+    if (node?.name) {
+      names.push(node?.name);
+    }
+
+    if (node?.children?.length > 0) {
+      node?.children?.forEach((child) => traverse(child));
+    }
+  }
+
+  data?.forEach((item) => traverse(item));
+
+  return names;
+}
+
+/**
+ * Validates the tags based on the provided parameters.
+ * @param {Object} params - The parameters for tag validation.
+ */
 export const validateTags = ({
   content,
   tagsParam,
@@ -21,7 +96,8 @@ export const validateTags = ({
 }) => {
   const tags = tagsParam;
   const injectedTags = transformInjectedTags(injectedTagsParams);
-  let currentModule = location.query.module ? location.query.module : DEFAULT;
+  let currentModule = location?.query?.module ? location?.query?.module : DEFAULT;
+
   if (tagModule) {
     currentModule = tagModule;
   }
@@ -86,6 +162,12 @@ export const validateTags = ({
   return response;
 }
 
+/**
+ * Checks if the given tag is supported based on the injected tags.
+ * @param {string} checkingTag - The tag to check.
+ * @param {Array} injectedTags - The injected tags.
+ * @returns {boolean} - True if the tag is supported, false otherwise.
+ */
 export const checkIfSupportedTag = (checkingTag, injectedTags) => {
   let result = false;
   lodashForEach(injectedTags, (tag, key) => {
@@ -156,4 +238,20 @@ export const validateIfTagClosed = (value) => {
 
   return (l1 == l2 && l2 == l3 && l1 == l3);
   
+};
+
+//replaces encoded string with their respective characters
+export const preprocessHtml = (content) => {
+  
+  const replacements = {
+    "'": "'",
+    """: "'",
+    '"': "'",
+    "&": "&",
+    "&lt;": "<",
+    "&gt;": ">",
+    "\n": "",  // Handling newlines by replacing them with an empty string
+  };
+
+  return content?.replace(/&#39;|&quot;|&amp;|&lt;|&gt;|"|\n/g, match => replacements[match]);
 };

package/utils/tests/commonUtil.test.js

@@ -1,7 +1,11 @@
 import "@testing-library/jest-dom";
+import get from 'lodash/get';
 import { getTreeStructuredTags } from "../common";
 import * as mockdata from "./common.mockdata";
-import { addBaseToTemplate } from "../commonUtils";
+import { addBaseToTemplate, isEmbeddedEditOrPreview } from "../commonUtils";
+import { EMBEDDED, FULL } from "../../v2Containers/Whatsapp/constants";
+import { CREATE, EDIT, PREVIEW } from "../../v2Containers/App/constants";
+import { query } from "express";
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
   Auth: {
@@ -12,6 +16,8 @@ jest.mock('@capillarytech/cap-ui-utils', () => ({
   },
 }));
 
+jest.mock('lodash/get');
+
 describe("common utils test", () => {
   it("test for getTreeStructuredTags when tagsList is not empty", () => {
     expect(getTreeStructuredTags({tagsList: mockdata.tagsList})).toEqual(mockdata.output2);
@@ -77,3 +83,33 @@ describe('addBaseToTemplate', () => {
     expect(template).toEqual(originalTemplateCopy);
   });
 });
+
+describe('isEmbeddedEditOrPreview', () => {
+  beforeEach(() => {
+    get.mockClear();
+  });
+
+  it('should return true when query type is embedded and creatives mode is edit', () => {
+    const queryType = EMBEDDED;
+    const creativesMode = EDIT;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(true);
+  });
+
+  it('should return true when query type is embedded and creatives mode is preview', () => {
+    const queryType = EMBEDDED;
+    const creativesMode = PREVIEW;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(true);
+  });
+
+  it('should return false when query type is not embedded', () => {
+    const queryType = FULL;
+    const creativesMode = PREVIEW;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(false);
+  });
+
+  it('should return false when creatives mode is not edit or preview', () => {
+    const queryType = EMBEDDED;
+    const creativesMode = CREATE;
+    expect(isEmbeddedEditOrPreview(queryType, creativesMode)).toBe(false);
+  });
+});