@capillarytech/creatives-library 8.0.9 → 8.0.11

package/utils/tests/tagValidations.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { validateIfTagClosed } from '../tagValidations';
+import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed,validateTags} from '../tagValidations';
 
 describe("check if curly brackets are balanced", () => {
     it("test for balanced curly brackets", () => {
@@ -26,4 +26,394 @@ describe("check if curly brackets are balanced", () => {
         expect(validateIfTagClosed("{{{{Hello}}World}}")).toEqual(false);
         expect(validateIfTagClosed("{{Hello{{World}}")).toEqual(false);
     })
-})
+})
+
+describe("validateTags", () => {
+  const tagsParam = [
+    {
+      definition: {
+        supportedModules: [{ context: "DEFAULT", mandatory: true }],
+        value: "tag1",
+      },
+    },
+    {
+      definition: {
+        supportedModules: [{ context: "DEFAULT", mandatory: true }],
+        value: "tag2",
+      },
+    },
+    {
+      definition: {
+        supportedModules: [{ context: "DEFAULT", mandatory: true }],
+        value: "tag3",
+      },
+    },
+  ];
+  it("should return valid response when all tags are present", () => {
+    const content = "Hello {{tag1}}, {{tag2}}, {{tag3}}";
+
+    const injectedTagsParams = [];
+    const location = { query: { module: "DEFAULT" } };
+    const tagModule = null;
+
+    const result = validateTags({
+      content,
+      tagsParam,
+      injectedTagsParams,
+      location,
+      tagModule,
+    });
+
+    expect(result.valid).toEqual(true);
+    expect(result.missingTags).toEqual([]);
+    expect(result.unsupportedTags).toEqual([]);
+    expect(result.isBraceError).toEqual(false);
+  });
+
+  it("should return invalid response when a mandatory tag is missing", () => {
+    const content = "Hello {{tag1}}, {{tag2}}, {{tag3}}";
+    const updatedTagsParam = [...tagsParam,       {
+      definition: {
+        supportedModules: [{ context: "DEFAULT", mandatory: true }],
+        value: "tag4",
+      },
+    },];
+    const injectedTagsParams = [];
+    const location = { query: { module: "DEFAULT" } };
+    const tagModule = null;
+
+    const result = validateTags({
+      content,
+      updatedTagsParam,
+      injectedTagsParams,
+      location,
+      tagModule,
+    });
+
+    expect(result.valid).toEqual(true);
+    expect(result.unsupportedTags).toEqual([]);
+    expect(result.isBraceError).toEqual(false);
+  });
+
+  it("should return invalid response when an unsupported tag is present", () => {
+    const content = "Hello {{tag1}}, {{tag2}}, {{tag3}}";
+    const tagsParam = [
+      {
+        definition: {
+          supportedModules: [{ context: "DEFAULT", mandatory: true }],
+          value: "tag1",
+        },
+      },
+      {
+        definition: {
+          supportedModules: [{ context: "DEFAULT", mandatory: true }],
+          value: "tag2",
+        },
+      },
+    ];
+    const injectedTagsParams = [];
+    const location = { query: { module: "DEFAULT" } };
+    const tagModule = null;
+
+    const result = validateTags({
+      content,
+      tagsParam,
+      injectedTagsParams,
+      location,
+      tagModule,
+    });
+
+    expect(result.valid).toEqual(true);
+    expect(result.missingTags).toEqual([]);
+    expect(result.unsupportedTags).toEqual(["tag3"]);
+    expect(result.isBraceError).toEqual(false);
+  });
+
+  it("should return invalid response when there is an unbalanced bracket error", () => {
+    const content = "Hello {{tag1}, {{tag2}}, {{tag3}}";
+    const tagsParam = [
+      {
+        definition: {
+          supportedModules: [{ context: "DEFAULT", mandatory: true }],
+          value: "tag1",
+        },
+      },
+      {
+        definition: {
+          supportedModules: [{ context: "DEFAULT", mandatory: true }],
+          value: "tag2",
+        },
+      },
+      {
+        definition: {
+          supportedModules: [{ context: "DEFAULT", mandatory: true }],
+          value: "tag3",
+        },
+      },
+    ];
+    const injectedTagsParams = [];
+    const location = { query: { module: "DEFAULT" } };
+    const tagModule = null;
+
+    const result = validateTags({
+      content,
+      tagsParam,
+      injectedTagsParams,
+      location,
+      tagModule,
+    });
+
+    expect(result.valid).toEqual(false);
+    expect(result.missingTags).toEqual(["tag1"]);
+    expect(result.unsupportedTags).toEqual([]);
+    expect(result.isBraceError).toEqual(true);
+  });
+});
+
+describe("extractNames", () => {
+  it("should return an empty array when data is empty", () => {
+    const data = [];
+    const result = extractNames(data);
+    expect(result).toEqual([]);
+  });
+
+  it("should return an array of names when data contains nodes with names", () => {
+    const data = [
+      {
+        name: "Node 1",
+        children: [
+          {
+            name: "Node 1.1",
+            children: [],
+          },
+          {
+            name: "Node 1.2",
+            children: [],
+          },
+        ],
+      },
+      {
+        name: "Node 2",
+        children: [
+          {
+            name: "Node 2.1",
+            children: [],
+          },
+        ],
+      },
+    ];
+    const result = extractNames(data);
+    expect(result).toEqual([
+      "Node 1",
+      "Node 1.1",
+      "Node 1.2",
+      "Node 2",
+      "Node 2.1",
+    ]);
+  });
+
+  it("should ignore nodes without names", () => {
+    const data = [
+      {
+        name: "Node 1",
+        children: [
+          {
+            name: "Node 1.1",
+            children: [],
+          },
+          {
+            children: [],
+          },
+        ],
+      },
+      {
+        name: "Node 2",
+        children: [
+          {
+            name: "Node 2.1",
+            children: [],
+          },
+          {
+            name: "Node 2.2",
+          },
+        ],
+      },
+    ];
+    const result = extractNames(data);
+    expect(result).toEqual([
+      "Node 1",
+      "Node 1.1",
+      "Node 2",
+      "Node 2.1",
+      "Node 2.2",
+    ]);
+  });
+});
+
+
+describe("checkSupport", () => {
+  it("should return an empty array when args are empty", () => {
+    const result = checkSupport();
+    expect(result).toEqual([]);
+  });
+  it("should return an empty array when response data is empty", () => {
+    const response = { data: [] };
+    const tagObject = {};
+    const result = checkSupport(response, tagObject);
+    expect(result).toEqual([]);
+  });
+
+  it("should return an empty array when tagObject is empty", () => {
+    const response = {
+      data: [{ name: "tag1" }, { name: "tag2" }, { name: "tag3" }],
+    };
+    const tagObject = {};
+    const result = checkSupport(response, tagObject);
+    expect(result).toEqual([]);
+  });
+
+  it("should return an array of supported tags", () => {
+    const response = {
+      data: [{ name: "tag1" }, { name: "tag2" }, { name: "tag3" }],
+    };
+    const tagObject = {
+      tag1: { definition: { subtags: ["tag1.1", "tag1.2"] } },
+      tag2: { definition: { subtags: ["tag2.1", "tag2.2"] } },
+      tag3: { definition: { subtags: ["tag3.1", "tag3.2"] } },
+    };
+    const result = checkSupport(response, tagObject);
+    expect(result).toEqual(["tag1", "tag2", "tag3"]);
+  });
+
+  it("should return an array of supported tags with subtags", () => {
+    const response = {
+      data: [{ name: "tag1" }, { name: "tag2" }, { name: "tag3" }],
+    };
+    const tagObject = {
+      tag1: { definition: { subtags: ["tag1.1", "tag1.2"] } },
+      tag2: { definition: { subtags: ["tag2.1", "tag2.2"] } },
+      tag3: { definition: { subtags: ["tag3.1", "tag3.2"] } },
+      "tag1.1": {},
+      "tag2.1": {},
+      "tag3.1": {},
+    };
+    const result = checkSupport(response, tagObject);
+    expect(result).toEqual(["tag1", "tag2", "tag3"]);
+  });
+
+  it("should return an empty array when no tags are supported", () => {
+    const response = {
+      data: [{ name: "tag1" }, { name: "tag2" }, { name: "tag3" }],
+    };
+    const tagObject = {
+      tag4: {},
+      tag5: {},
+      tag6: {},
+    };
+    const result = checkSupport(response, tagObject);
+    expect(result).toEqual([]);
+  });
+  it("should return an array of supported tags with subtags", () => {
+    const response = {
+      data: [
+        {
+          name: "tag1",
+          children: [{ name: "tag1.1", children: [{ name: "tag1.2" }] }],
+        },
+        { name: "tag2", children: [] },
+        { name: "tag3" },
+      ],
+    };
+    const tagObject = {
+      tag1: { definition: { subtags: [".1", "tag1.2"] } },
+      tag2: { definition: { subtags: ["tag2.1", "tag2.2"] } },
+      tag3: { definition: { subtags: ["tag3.1", "tag3.2"] } },
+      "tag1.1": {},
+      "tag2.1": {},
+      "tag3.1": {},
+    };
+    const result = checkSupport(response, tagObject);
+    expect(result).toEqual(["tag1", "tag1.1", "tag2", "tag3"]);
+  });
+  it("should return an array of supported tags children as an object", () => {
+    const response = {
+      data: [
+        { name: "tag1", children: [{ name: "tag" }] },
+        { name: "tag2", children: [] },
+        { name: "tag3" },
+      ],
+    };
+    const tagObject = {
+      tag1: { definition: { subtags: [".1", "tag1.2"] } },
+      tag2: { definition: { subtags: ["tag2.1", "tag2.2"] } },
+      tag3: { definition: { subtags: ["tag3.1", "tag3.2"] } },
+      "tag1.1": {},
+      "tag2.1": {},
+      "tag3.1": {},
+    };
+    const result = checkSupport(response, tagObject);
+    expect(result).toEqual(["tag1", "tag2", "tag3"]);
+  });
+  it("should return an empty array if tagObject is empty", () => {
+    const response = {
+      data: [
+        { name: "tag1", children: [{ name: "tag" }] },
+        { name: "tag2", children: [] },
+        { name: "tag3" },
+      ],
+    };
+    const result = checkSupport(response, {});
+    expect(result).toEqual([]);
+  });
+});
+
+describe('preprocessHtml', () => {
+  it('should replace HTML entities with their corresponding characters', () => {
+    const input = "This & that < those > these 'quotes'";
+    const expectedOutput = "This & that < those > these 'quotes'";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+  it('should replace &quot; with double quotes', () => {
+    const input = 'She said, &quot;Hello, World!&quot;';
+    const expectedOutput = "She said, 'Hello, World!'";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+  it('should remove newline characters', () => {
+    const input = "Line one\nLine two\nLine three";
+    const expectedOutput = "Line oneLine twoLine three";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+  it('should handle multiple replacements and newlines in the same string', () => {
+    const input = "&lt;div&gt;\nContent &amp; More Content\n&lt;/div&gt;";
+    const expectedOutput = "<div>Content & More Content</div>";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+  it('should return the same string if there are no matching patterns', () => {
+    const input = "No special characters here!";
+    const expectedOutput = "No special characters here!";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+  it('should handle an empty string input', () => {
+    const input = "";
+    const expectedOutput = "";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+  it('should handle strings with only newline characters', () => {
+    const input = "\n\n\n";
+    const expectedOutput = "";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+  it('should not  affect similar but non-matching sequences', () => {
+    const input = "This is &amplt; not an entity.";
+    const expectedOutput = "This is &amplt; not an entity.";
+    expect(preprocessHtml(input)).toEqual(expectedOutput);
+  });
+
+});

package/v2Components/Ckeditor/index.js

@@ -50,16 +50,18 @@ const CKEditorConfig = {
   fullPage: true,
   htmlEncodeOutput: true,
   startupFocus: true,
-  allowedContent: {
-  // Allow all content.
-    $1: {
-      // elements: this.editorInstance.dtd,
-      //elements: window.CKEDITOR.dtd,
-      attributes: true,
-      styles: true,
-      classes: true,
-    },
-  },
+  // allowedContent: {
+  // // Allow all content.
+  //   $1: {
+  //     // elements: this.editorInstance.dtd,
+  //     //elements: window.CKEDITOR.dtd,
+  //     attributes: true,
+  //     styles: true,
+  //     classes: true,
+  //   },
+  // },
+  allowedContent: true, // Allow all content, including attributes and styles
+  extraAllowedContent: 'img[width,height]',
   disallowedContent: 'script; *[on*]',
   language: locale,
   toolbar_Basic:

package/v2Components/ErrorInfoNote/index.js

@@ -0,0 +1,89 @@
+import React from "react";
+import PropTypes from "prop-types";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapList from "@capillarytech/cap-ui-library/CapList";
+import {
+  FormattedMessage,
+  FormattedNumber,
+  injectIntl,
+  intlShape,
+} from "react-intl";
+import "./style.scss";
+import messages from "./messages";
+
+export const ErrorInfoNote = (props) => {
+
+  const { LIQUID_ERROR_MSG = [], STANDARD_ERROR_MSG = [] } = props?.errorMessages || {};
+
+  const ErrorSection = ({ title = "", errors = [], liquidError = false }) => (
+    <>
+      <CapRow
+        className={`error-header ${!liquidError ? "standard-error-header": ""}`}
+      >
+        <>
+          <CapIcon size="s" type="warning" className="warning-icon" />
+          {title}
+        </>
+        <>
+          {liquidError && (
+            <CapButton
+              type="flat"
+              className="add-btn"
+              onClick={() =>
+                window.open(`https://docs.capillarytech.com/docs/liquid-language-in-messages`, "_blank")
+              }
+            >
+              <FormattedMessage {...messages.liquidDoc} />
+              <CapIcon size="s" type="launch" />
+            </CapButton>
+          )}
+        </>
+      </CapRow>
+      <CapList
+        className="error-list"
+        size="small"
+        dataSource={errors}
+        renderItem={(error, index) => (
+          <CapList.Item>
+            <CapLabel type="label2" className="cap-list-v2-error-item">
+              <CapLabel type="label2"><FormattedNumber value={index + 1} />.</CapLabel>
+              <CapLabel type="label2">{error}</CapLabel> 
+            </CapLabel>
+          </CapList.Item>
+        )}
+      />
+    </>
+  );
+  const liquidErrors = LIQUID_ERROR_MSG?.length;
+  return (
+    <div className="error-container">
+      {STANDARD_ERROR_MSG?.length > 0 && (
+        <>
+          <ErrorSection
+            title={
+              <FormattedMessage {...messages.standardErrorHeader} />
+            }
+            errors={STANDARD_ERROR_MSG}
+          />
+        </>
+      )}
+      {liquidErrors > 0 && (
+        <ErrorSection
+          title={<FormattedMessage {...messages.dynamicErrorHeader} />}
+          errors={LIQUID_ERROR_MSG}
+          liquidError={true}
+        />
+      )}
+    </div>
+  );
+};
+ErrorInfoNote.propTypes = {
+  errorMessage: PropTypes.string,
+  errorType: PropTypes.string,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ErrorInfoNote);

package/v2Components/ErrorInfoNote/messages.js

@@ -0,0 +1,29 @@
+/*
+ * ErrorInfoNote Messages
+ *
+ * This contains all the text for the ErrorInfoNote component.
+ */
+import { defineMessages } from "react-intl";
+const scope = "creatives.componentsV2.ErrorInfoNote";
+export default defineMessages({
+  dynamicErrorHeader: {
+    id: `${scope}.dynamicErrorHeader`,
+    defaultMessage:
+      "Errors found. Recommendations to fix the Liquid expression",
+  },
+  standardErrorHeader: {
+    id: `${scope}.standardErrorHeader`,
+    defaultMessage:
+      "Error found in Standard Tags",
+  },
+  liquidDoc: {
+    id: `${scope}.liquidDoc`,
+    defaultMessage:
+      "Liquid documentation",
+  },
+  ariaFooter: {
+    id: `${scope}.ariaFooter`,
+    defaultMessage:
+      "Aira can make mistakes. Please verify the suggestions before applying them"
+  },
+});

package/v2Components/ErrorInfoNote/style.scss

@@ -0,0 +1,72 @@
+@import "~@capillarytech/cap-ui-library/styles/_variables.scss";
+
+.error-container {
+  margin-bottom: $CAP_SPACE_08;
+  margin-top: $CAP_SPACE_12;
+  background-color: $CAP_COLOR_05;
+  border-radius: $CAP_SPACE_04;
+  padding: $CAP_SPACE_08 $CAP_SPACE_12 $CAP_SPACE_08 $CAP_SPACE_08;
+  gap: $CAP_SPACE_08;
+  box-sizing: border-box;
+}
+
+.error-header {
+  width: 100%;
+  height: $CAP_SPACE_32;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 500;
+
+  .ant-btn.cap-button-v2.flat-btn {
+    display: flex;
+    margin-left: auto;
+    background-color: inherit;
+    align-items: center;
+  }
+
+  .warning-icon {
+    vertical-align: text-top;
+    margin-right: $CAP_SPACE_04;
+  }
+}
+
+.standard-error-header {
+  justify-content: flex-start;
+}
+
+.error-list {
+  overflow: scroll;
+  max-height: $CAP_SPACE_80;
+  padding: 0;
+
+  &.ant-list.cap-list-v2.ant-list-split .ant-list-item {
+    padding-top: $CAP_SPACE_04;
+    padding-bottom: $CAP_SPACE_04;
+    border-bottom: 0;
+  }
+
+  &.ant-list .ant-list-item:last-child {
+    border-bottom: none;
+  }
+
+  .cap-list-v2-error-item {
+    color: $CAP_G01;
+    font-size: $CAP_SPACE_12;
+    display: flex;
+    margin-left: $CAP_SPACE_04;
+    gap: $CAP_SPACE_04;
+  }
+}
+.liquid-divider {
+  &.ant-divider.cap-divider-v2{
+    background: $FONT_COLOR_04;
+  }
+  margin: $CAP_SPACE_08 0;
+}
+
+.aria-error-footer {
+  display: flex;
+  align-items: center;
+  gap: $CAP_SPACE_04;
+}

package/v2Components/FormBuilder/_formBuilder.scss

@@ -1,4 +1,4 @@
-
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .form-tab-header{
   display: flex;
@@ -96,3 +96,6 @@
     }
   }
 }
+.error-boundary{
+  border: $CAP_SPACE_02 solid $CAP_RED;
+}