@capillarytech/creatives-library 8.0.114 → 8.0.115

package/utils/tests/tagValidations.test.js

@@ -1,6 +1,15 @@
-import React from 'react';
 import '@testing-library/jest-dom';
-import { checkSupport, extractNames, getTagMapValue,getForwardedMapValues, preprocessHtml, validateIfTagClosed,validateTags, skipTags } from '../tagValidations';
+import {
+  checkSupport,
+  extractNames,
+  getTagMapValue,
+  getForwardedMapValues,
+  preprocessHtml,
+  validateIfTagClosed,
+  validateTags,
+  skipTags,
+  isInsideLiquidBlock,
+} from '../tagValidations';
 import { eventContextTags } from '../../v2Containers/TagList/tests/mockdata';
 
 describe("check if curly brackets are balanced", () => {
@@ -170,6 +179,45 @@ describe("validateTags", () => {
     expect(result.unsupportedTags).toEqual([]);
     expect(result.isBraceError).toEqual(true);
   });
+
+  it("should remove 'unsubscribe' from missingTags if skipTags logic is triggered", () => {
+    const tagsParam = [
+      {
+        definition: {
+          supportedModules: [{ context: "DEFAULT", mandatory: true }],
+          value: "unsubscribe",
+        },
+      },
+    ];
+    // Content does not include {{unsubscribe}}, so it would be missing
+    const contentMissing = "Hello {{tag1}}";
+    const injectedTagsParams = [];
+    const location = { query: { module: "DEFAULT" } };
+    const tagModule = null;
+
+    // First, verify unsubscribe is missing if not present
+    const resultMissing = validateTags({
+      content: contentMissing,
+      tagsParam,
+      injectedTagsParams,
+      location,
+      tagModule,
+    });
+    expect(resultMissing.missingTags).toContain("unsubscribe");
+
+    // Now, content includes a tag that triggers skipTags logic for unsubscribe
+    // e.g., {{unsubscribe(#123456)}} matches the skipTags regex
+    const contentWithSkippedUnsubscribe = "Hello {{unsubscribe(#123456)}}";
+    const resultSkipped = validateTags({
+      content: contentWithSkippedUnsubscribe,
+      tagsParam,
+      injectedTagsParams,
+      location,
+      tagModule,
+    });
+    expect(resultSkipped.missingTags).not.toContain("unsubscribe");
+    expect(resultSkipped.valid).toBe(true);
+  });
 });
 
 describe("extractNames", () => {
@@ -806,4 +854,82 @@ describe('getForwardedMapValues', () => {
 
     expect(input).toEqual(inputCopy);
   });
-});
+});
+
+describe('isInsideLiquidBlock', () => {
+  it('returns true for index inside a single block', () => {
+    const content = 'Hello {% assign foo = 1 %} World';
+    // Index of 'a' in 'assign' inside the block
+    const tagIndex = content.indexOf('assign');
+    expect(isInsideLiquidBlock(content, tagIndex)).toBe(true);
+  });
+
+  it('returns false for index outside any block', () => {
+    const content = 'Hello {% assign foo = 1 %} World';
+    // Index of 'H' in 'Hello'
+    expect(isInsideLiquidBlock(content, 0)).toBe(false);
+    // Index of 'W' in 'World'
+    expect(isInsideLiquidBlock(content, content.indexOf('World'))).toBe(false);
+  });
+
+  it('returns true for index at the start of a block', () => {
+    const content = 'Hello {% assign foo = 1 %} World';
+    // Index of '{' in '{%'
+    const tagIndex = content.indexOf('{%');
+    expect(isInsideLiquidBlock(content, tagIndex)).toBe(true);
+  });
+
+  it('returns false for index at the end of a block (exclusive)', () => {
+    const content = 'Hello {% assign foo = 1 %} World';
+    // Index just after the closing '%}'
+    const blockEnd = content.indexOf('%}') + 2;
+    expect(isInsideLiquidBlock(content, blockEnd)).toBe(false);
+  });
+
+  it('returns true for index inside the second of multiple blocks', () => {
+    const content = 'A {% first %} B {% second %} C';
+    const tagIndex = content.indexOf('second');
+    expect(isInsideLiquidBlock(content, tagIndex)).toBe(true);
+  });
+
+  it('returns false for index between blocks', () => {
+    const content = 'A {% first %} B {% second %} C';
+    // Index of 'B' (between blocks)
+    const tagIndex = content.indexOf('B');
+    expect(isInsideLiquidBlock(content, tagIndex)).toBe(false);
+  });
+
+  it('returns false for empty string', () => {
+    expect(isInsideLiquidBlock('', 0)).toBe(false);
+  });
+
+  it('returns false if there are no blocks', () => {
+    const content = 'Just some text with no blocks';
+    expect(isInsideLiquidBlock(content, 5)).toBe(false);
+  });
+
+  it('returns false for negative index', () => {
+    const content = 'Hello {% assign foo = 1 %} World';
+    expect(isInsideLiquidBlock(content, -1)).toBe(false);
+  });
+
+  it('returns false for index beyond string length', () => {
+    const content = 'Hello {% assign foo = 1 %} World';
+    expect(isInsideLiquidBlock(content, 100)).toBe(false);
+  });
+
+  it('works for nested-like blocks (not truly nested)', () => {
+    const content = 'A {% outer {% inner %} outer %} B';
+    // Index of 'inner' (should be inside the first block)
+    const tagIndex = content.indexOf('inner');
+    expect(isInsideLiquidBlock(content, tagIndex)).toBe(true);
+  });
+
+  it('returns true for index at last char inside block', () => {
+    const content = 'A {% foo %} B';
+    // Index of last char inside block (just before %})
+    const blockStart = content.indexOf('{%');
+    const blockEnd = content.indexOf('%}');
+    expect(isInsideLiquidBlock(content, blockEnd - 1)).toBe(true);
+  });
+});

package/v2Components/ErrorInfoNote/ErrorTypeRenderer.js

@@ -0,0 +1,125 @@
+// app/v2Components/ErrorInfoNote/ErrorTypeRenderer.js
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapDivider from "@capillarytech/cap-ui-library/CapDivider";
+import { getLiquidProps, hasPlatformErrors } from './utils';
+
+/**
+ * Renders error sections for either generic (non-platform) or platform-specific (Android/iOS) errors.
+ * - If `genericErrors` is provided, renders standard and liquid errors (if present) without platform labels.
+ * - If `androidErrors`/`iosErrors` are provided, renders merged errors for each platform with platform labels and dividers.
+ */
+const ErrorTypeRenderer = ({
+  genericErrors,
+  androidErrors,
+  iosErrors,
+  ErrorSectionComponent,
+}) => {
+  // Render generic (non-platform) errors
+  if (genericErrors) {
+    const hasStandard = genericErrors?.standard?.errorsToShow?.length > 0;
+    const hasLiquid = genericErrors?.liquid?.errorsToShow?.length > 0;
+    if (!hasStandard && !hasLiquid) return null;
+
+    const liquidGenericProps = {
+      title: genericErrors?.liquid?.title,
+      errors: genericErrors?.liquid?.errorsToShow,
+      platformLabel: null,
+    };
+
+    return (
+      <div className="error-container">
+        {hasStandard && (
+          <ErrorSectionComponent
+            title={genericErrors?.standard?.title}
+            errors={genericErrors?.standard?.errorsToShow}
+            liquidError={false}
+            platformLabel={null}
+          />
+        )}
+        {hasStandard && hasLiquid && <CapDivider className="liquid-divider" />}
+        {hasLiquid && (
+          <ErrorSectionComponent
+            {...liquidGenericProps}
+            liquidError
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Render platform-specific errors (Android/iOS)
+  const hasAndroid = hasPlatformErrors(androidErrors);
+  const hasIos = hasPlatformErrors(iosErrors);
+
+  if (!hasAndroid && !hasIos) return null;
+  
+  const showPlatformLabels = !!androidErrors?.standard?.platformLabel || !!iosErrors?.standard?.platformLabel;
+  const showTitle = hasAndroid && hasIos && showPlatformLabels;
+  const liquidAndroidProps = getLiquidProps(androidErrors, true, showTitle, showPlatformLabels);
+  const liquidIosProps = getLiquidProps(iosErrors, false, showTitle, showPlatformLabels);
+
+  return (
+    <div className="error-container">
+      {hasAndroid && (
+        <ErrorSectionComponent
+          {...liquidAndroidProps}
+        />
+      )}
+      {hasAndroid && hasIos && showPlatformLabels && (
+        <CapDivider className="platform-divider" />
+      )}
+      {hasIos && (
+        <ErrorSectionComponent
+          {...liquidIosProps}
+        />
+      )}
+    </div>
+  );
+};
+
+ErrorTypeRenderer.propTypes = {
+  genericErrors: PropTypes.shape({
+    standard: PropTypes.shape({
+      errorsToShow: PropTypes.array.isRequired,
+      title: PropTypes.node.isRequired,
+    }),
+    liquid: PropTypes.shape({
+      errorsToShow: PropTypes.array.isRequired,
+      title: PropTypes.node.isRequired,
+    }),
+  }),
+  androidErrors: PropTypes.shape({
+    standard: PropTypes.shape({
+      errorsToShow: PropTypes.array.isRequired,
+      title: PropTypes.node.isRequired,
+      platformLabel: PropTypes.string,
+    }),
+    liquid: PropTypes.shape({
+      errorsToShow: PropTypes.array.isRequired,
+      title: PropTypes.node.isRequired,
+      platformLabel: PropTypes.string,
+    }),
+  }),
+  iosErrors: PropTypes.shape({
+    standard: PropTypes.shape({
+      errorsToShow: PropTypes.array.isRequired,
+      title: PropTypes.node.isRequired,
+      platformLabel: PropTypes.string,
+    }),
+    liquid: PropTypes.shape({
+      errorsToShow: PropTypes.array.isRequired,
+      title: PropTypes.node.isRequired,
+      platformLabel: PropTypes.string,
+    }),
+  }),
+  ErrorSectionComponent: PropTypes.elementType.isRequired,
+};
+
+ErrorTypeRenderer.defaultProps = {
+  genericErrors: null,
+  androidErrors: null,
+  iosErrors: null,
+};
+
+export default ErrorTypeRenderer;

package/v2Components/ErrorInfoNote/ErrorTypeRenderer.test.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ErrorTypeRenderer from './ErrorTypeRenderer';
+import { ANDROID, IOS } from '../../v2Containers/CreativesContainer/constants';
+
+describe('ErrorTypeRenderer', () => {  const ErrorSectionComponent = jest.fn(({
+    title,
+    errors,
+    liquidError,
+    platformLabel,
+  }) => (
+    <div data-testid="error-section">
+      <span>{title}</span>
+      <span>{errors && errors.join(',')}</span>
+      <span>{liquidError ? 'liquid' : 'standard'}</span>
+      <span>{platformLabel}</span>
+    </div>
+  ));
+
+  afterEach(() => {
+    ErrorSectionComponent.mockClear();
+  });
+
+  it('renders nothing if all errors are empty', () => {
+    const { container } = render(
+      <ErrorTypeRenderer
+        genericErrors={{ standard: { errorsToShow: [], title: 'Standard' }, liquid: { errorsToShow: [], title: 'Liquid' } }}
+        ErrorSectionComponent={ErrorSectionComponent}
+      />
+    );
+    expect(container.firstChild).toBeNull();
+    expect(ErrorSectionComponent).not.toHaveBeenCalled();
+  });
+
+  it('renders generic standard errors only', () => {
+    render(
+      <ErrorTypeRenderer
+        genericErrors={{ standard: { errorsToShow: ['err1', 'err2'], title: 'Standard' }, liquid: { errorsToShow: [], title: 'Liquid' } }}
+        ErrorSectionComponent={ErrorSectionComponent}
+      />
+    );
+    expect(ErrorSectionComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Standard',
+        errors: ['err1', 'err2'],
+        liquidError: false,
+        platformLabel: null,
+      }),
+      expect.anything()
+    );
+  });
+
+  it('renders generic liquid errors only', () => {
+    render(
+      <ErrorTypeRenderer
+        genericErrors={{ standard: { errorsToShow: [], title: 'Standard' }, liquid: { errorsToShow: ['l1'], title: 'Liquid' } }}
+        ErrorSectionComponent={ErrorSectionComponent}
+      />
+    );
+    expect(ErrorSectionComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Liquid',
+        errors: ['l1'],
+        liquidError: true,
+        platformLabel: null,
+      }),
+      expect.anything()
+    );
+  });
+
+  it('renders both generic standard and liquid errors', () => {
+    render(
+      <ErrorTypeRenderer
+        genericErrors={{ standard: { errorsToShow: ['err1'], title: 'Standard' }, liquid: { errorsToShow: ['l1'], title: 'Liquid' } }}
+        ErrorSectionComponent={ErrorSectionComponent}
+      />
+    );
+    expect(ErrorSectionComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Standard',
+        errors: ['err1'],
+        liquidError: false,
+        platformLabel: null,
+      }),
+      expect.anything()
+    );
+    expect(ErrorSectionComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Liquid',
+        errors: ['l1'],
+        liquidError: true,
+        platformLabel: null,
+      }),
+      expect.anything()
+    );
+  });
+
+  it('renders merged android errors with platform label', () => {
+    render(
+      <ErrorTypeRenderer
+        androidErrors={{
+          standard: { errorsToShow: ['a1'], title: 'Android Standard', platformLabel: ANDROID },
+          liquid: { errorsToShow: ['al1'], title: 'Android Liquid', platformLabel: ANDROID },
+        }}
+        iosErrors={{
+          standard: { errorsToShow: [], title: 'iOS Standard', platformLabel: IOS },
+          liquid: { errorsToShow: [], title: 'iOS Liquid', platformLabel: IOS },
+        }}
+        ErrorSectionComponent={ErrorSectionComponent}
+      />
+    );
+    expect(ErrorSectionComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: false,
+        errors: ['a1', 'al1'],
+        liquidError: true,
+        platformLabel: ANDROID,
+      }),
+      expect.anything()
+    );
+  });
+
+  it('renders merged ios errors with platform label', () => {
+    render(
+      <ErrorTypeRenderer
+        androidErrors={{
+          standard: { errorsToShow: [], title: 'Android Standard', platformLabel: ANDROID },
+          liquid: { errorsToShow: [], title: 'Android Liquid', platformLabel: ANDROID },
+        }}
+        iosErrors={{
+          standard: { errorsToShow: ['i1'], title: 'iOS Standard', platformLabel: IOS },
+          liquid: { errorsToShow: ['il1'], title: 'iOS Liquid', platformLabel: IOS },
+        }}
+        ErrorSectionComponent={ErrorSectionComponent}
+      />
+    );
+    expect(ErrorSectionComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'iOS Liquid',
+        errors: ['i1', 'il1'],
+        liquidError: true,
+        platformLabel: IOS,
+      }),
+      expect.anything()
+    );
+  });
+}); 

package/v2Components/ErrorInfoNote/index.js

@@ -9,19 +9,25 @@ import {
   FormattedMessage,
   FormattedNumber,
   injectIntl,
-  intlShape,
 } from "react-intl";
 import "./style.scss";
 import messages from "./messages";
+import { processErrors } from "./utils";
+import ErrorTypeRenderer from "./ErrorTypeRenderer";
+import { ANDROID, GENERIC, IOS } from "../../v2Containers/CreativesContainer/constants";
 
-export const ErrorInfoNote = (props) => {
-
-  const { LIQUID_ERROR_MSG = [], STANDARD_ERROR_MSG = [] } = props?.errorMessages || {};
-
-  const ErrorSection = ({ title = "", errors = [], liquidError = false }) => (
-    <>
+const ErrorSection = ({
+  title,
+  errors,
+  liquidError,
+  platformLabel,
+}) => (
+  <>
+    {title && (
       <CapRow
-        className={`error-header ${!liquidError ? "standard-error-header": ""}`}
+        className={`error-header ${
+          !liquidError ? "standard-error-header" : ""
+        }`}
       >
         <>
           <CapIcon size="s" type="warning" className="warning-icon" />
@@ -32,8 +38,7 @@ export const ErrorInfoNote = (props) => {
             <CapButton
               type="flat"
               className="add-btn"
-              onClick={() =>
-                window.open(`https://docs.capillarytech.com/docs/liquid-language-in-messages`, "_blank")
+              onClick={() => window.open("https://docs.capillarytech.com/docs/liquid-language-in-messages", "_blank")
               }
             >
               <FormattedMessage {...messages.liquidDoc} />
@@ -42,48 +47,110 @@ export const ErrorInfoNote = (props) => {
           )}
         </>
       </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> 
+    )}
+    {platformLabel && (
+      <CapRow className="error-header-sub-title">
+        <CapLabel type="label2">{platformLabel}</CapLabel>
+      </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>
-          </CapList.Item>
-        )}
+            <CapLabel type="label2">{error}</CapLabel>
+          </CapLabel>
+        </CapList.Item>
+      )}
+    />
+  </>
+);
+
+ErrorSection.propTypes = {
+  title: PropTypes.node.isRequired,
+  errors: PropTypes.array,
+  liquidError: PropTypes.bool,
+  platformLabel: PropTypes.string,
+};
+
+ErrorSection.defaultProps = {
+  errors: [],
+  liquidError: false,
+  platformLabel: null,
+};
+
+export const ErrorInfoNote = (props) => {
+  const { errorMessages } = props;
+
+  const {
+    LIQUID_ERROR_MSG: rawLiquidErrors = [],
+    STANDARD_ERROR_MSG: rawStandardErrors = [],
+  } = errorMessages || {};
+
+  // Detect if platform-specific (ANDROID/IOS) or GENERIC
+  const isObject = typeof rawStandardErrors === 'object' && rawStandardErrors !== null;
+  const isNotArray = !Array.isArray(rawStandardErrors);
+  const hasPlatformKeys = isObject && isNotArray && [ANDROID, IOS, GENERIC].some((key) => key in rawStandardErrors);
+
+  if (hasPlatformKeys) {
+    // Platform-specific
+    const androidErrors = {
+      standard: processErrors(rawStandardErrors, 'standard', ANDROID, messages),
+      liquid: processErrors(rawLiquidErrors, 'liquid', ANDROID, messages),
+    };
+    const iosErrors = {
+      standard: processErrors(rawStandardErrors, 'standard', IOS, messages),
+      liquid: processErrors(rawLiquidErrors, 'liquid', IOS, messages),
+    };
+    return (
+      <ErrorTypeRenderer
+        androidErrors={androidErrors}
+        iosErrors={iosErrors}
+        ErrorSectionComponent={ErrorSection}
       />
-    </>
-  );
-  const liquidErrors = LIQUID_ERROR_MSG?.length;
+    );
+  }
+  // GENERIC (not platform-specific)
+  const genericStandard = processErrors(rawStandardErrors, 'standard', null, messages);
+  const genericLiquid = processErrors(rawLiquidErrors, 'liquid', null, messages);
   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>
+    <ErrorTypeRenderer
+      genericErrors={{ standard: genericStandard, liquid: genericLiquid }}
+      ErrorSectionComponent={ErrorSection}
+    />
   );
 };
-ErrorInfoNote.propTypes = {
-  errorMessage: PropTypes.string,
-  errorType: PropTypes.string,
-  intl: intlShape.isRequired,
+
+ErrorInfoNote.defaultProps = {
+  errorMessages: {
+    LIQUID_ERROR_MSG: [],
+    STANDARD_ERROR_MSG: [],
+  },
 };
 
+ErrorInfoNote.propTypes = {
+  errorMessages: PropTypes.shape({
+    LIQUID_ERROR_MSG: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.shape({
+        ANDROID: PropTypes.array,
+        IOS: PropTypes.array,
+        GENERIC: PropTypes.array,
+      }),
+    ]),
+    STANDARD_ERROR_MSG: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.shape({
+        ANDROID: PropTypes.array,
+        IOS: PropTypes.array,
+        GENERIC: PropTypes.array,
+      }),
+    ]),
+  }),
+};
 export default injectIntl(ErrorInfoNote);

package/v2Components/ErrorInfoNote/messages.js

@@ -26,4 +26,29 @@ export default defineMessages({
     defaultMessage:
       "Aira can make mistakes. Please verify the suggestions before applying them"
   },
+  liquidDocLink: {
+    id: `${scope}.liquidDocLink`,
+    defaultMessage:
+      "https://docs.capillarytech.com/docs/liquid-language-in-messages"
+  },
+  androidDynamicErrorHeader: {
+    id: `${scope}.androidDynamicErrorHeader`,
+    defaultMessage:
+      "Errors found in Android Dynamic Tags"
+  },
+  iosDynamicErrorHeader: {
+    id: `${scope}.iosDynamicErrorHeader`,
+    defaultMessage:
+      "Errors found in iOS Dynamic Tags"
+  },
+  androidStandardErrorHeader: {
+    id: `${scope}.androidStandardErrorHeader`,
+    defaultMessage:
+      "Errors found in Android Standard Tags"
+  },
+  iosStandardErrorHeader: {
+    id: `${scope}.iosStandardErrorHeader`,
+    defaultMessage:
+      "Errors found in iOS Standard Tags"
+  },
 });

package/v2Components/ErrorInfoNote/style.scss

@@ -58,15 +58,28 @@
     gap: $CAP_SPACE_04;
   }
 }
+
 .liquid-divider {
-  &.ant-divider.cap-divider-v2{
+  &.ant-divider.cap-divider-v2 {
     background: $FONT_COLOR_04;
   }
   margin: $CAP_SPACE_08 0;
 }
 
+.platform-divider {
+  &.ant-divider.cap-divider-v2 {
+    background: $FONT_COLOR_04;
+    margin: $CAP_SPACE_12 0;
+  }
+}
+
 .aria-error-footer {
   display: flex;
   align-items: center;
   gap: $CAP_SPACE_04;
+}
+
+.error-header-sub-title {
+  margin-left: $CAP_SPACE_04;
+  font-weight: 500;
 }