@capillarytech/creatives-library 8.0.113 → 8.0.114-alpha.0

package/v2Components/ErrorInfoNote/ErrorTypeRenderer.js

@@ -0,0 +1,130 @@
+// app/v2Components/ErrorInfoNote/ErrorTypeRenderer.js
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapDivider from "@capillarytech/cap-ui-library/CapDivider";
+
+/**
+ * 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;
+    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
+            title={genericErrors.liquid.title}
+            errors={genericErrors.liquid.errorsToShow}
+            liquidError
+            platformLabel={null}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Render platform-specific errors (Android/iOS)
+  const hasAndroid = (androidErrors?.standard?.errorsToShow?.length || 0) > 0
+    || (androidErrors?.liquid?.errorsToShow?.length || 0) > 0;
+  const hasIos = (iosErrors?.standard?.errorsToShow?.length || 0) > 0
+    || (iosErrors?.liquid?.errorsToShow?.length || 0) > 0;
+
+  if (!hasAndroid && !hasIos) return null;
+
+  const showPlatformLabels = !!androidErrors?.standard?.platformLabel || !!iosErrors?.standard?.platformLabel;
+  const showTitle = hasAndroid && hasIos && showPlatformLabels;
+  return (
+    <div className="error-container">
+      {hasAndroid && (
+        <ErrorSectionComponent
+          title={showTitle && androidErrors.liquid?.title}
+          errors={[
+            ...(androidErrors.standard?.errorsToShow || []),
+            ...(androidErrors.liquid?.errorsToShow || []),
+          ]}
+          liquidError={!!androidErrors.liquid?.errorsToShow?.length}
+          platformLabel={showPlatformLabels ? 'ANDROID' : null}
+        />
+      )}
+      {hasAndroid && hasIos && showPlatformLabels && (
+        <CapDivider className="platform-divider" />
+      )}
+      {hasIos && (
+        <ErrorSectionComponent
+          title={!showTitle && iosErrors.liquid?.title}
+          errors={[
+            ...(iosErrors.standard?.errorsToShow || []),
+            ...(iosErrors.liquid?.errorsToShow || []),
+          ]}
+          liquidError={!!iosErrors.liquid?.errorsToShow?.length}
+          platformLabel={showPlatformLabels ? 'IOS' : null}
+        />
+      )}
+    </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,146 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ErrorTypeRenderer from './ErrorTypeRenderer';
+
+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,111 @@ 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.defaultProps = {
+  errorMessages: {
+    LIQUID_ERROR_MSG: [],
+    STANDARD_ERROR_MSG: [],
+  },
+};
+
 ErrorInfoNote.propTypes = {
-  errorMessage: PropTypes.string,
-  errorType: PropTypes.string,
-  intl: intlShape.isRequired,
+  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;
 }

package/v2Components/ErrorInfoNote/utils.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { ANDROID, GENERIC, IOS } from '../../v2Containers/CreativesContainer/constants';
+
+export const processErrors = (rawErrorData, errorType, platform, messages) => {
+  let errorsToShow = [];
+  let titleMsg = messages.standardErrorHeader;
+  let platformLabel = null;
+
+  const isObject = typeof rawErrorData === 'object' && rawErrorData !== null;
+  const isNotArray = !Array.isArray(rawErrorData);
+  const hasPlatformKeys = isObject && isNotArray && [ANDROID, IOS, GENERIC].some((key) => key in rawErrorData);
+  if (hasPlatformKeys) {
+    if (errorType === "liquid") {
+      titleMsg = messages.dynamicErrorHeader;
+    }
+    errorsToShow = rawErrorData[platform] || [];
+    platformLabel = platform; // Only set platform label for new structure
+  } else if (Array.isArray(rawErrorData)) {
+    errorsToShow = rawErrorData;
+    if (errorType === "liquid") {
+      titleMsg = messages.dynamicErrorHeader;
+    }
+  }
+
+  const title = <FormattedMessage {...titleMsg} />;
+  return { errorsToShow, title, platformLabel };
+};

package/v2Components/ErrorInfoNote/utils.test.js

@@ -0,0 +1,93 @@
+import { processErrors } from './utils';
+
+const makeMessages = (overrides = {}) => ({
+  standardErrorHeader: { id: 'standard', defaultMessage: 'Standard' },
+  dynamicErrorHeader: { id: 'liquid', defaultMessage: 'Liquid' },
+  ...overrides,
+});
+
+describe('processErrors', () => {
+  it('returns empty errors if platform is not specified and input has GENERIC key', () => {
+    const messages = makeMessages();
+    const raw = { ANDROID: ['a1'], IOS: ['i1'], GENERIC: ['g1', 'g2'] };
+    const result = processErrors(raw, 'standard', undefined, messages);
+    expect(result.errorsToShow).toEqual([]);
+    expect(result.platformLabel).toBeUndefined();
+  });
+
+  it('returns empty errors for object input with missing keys', () => {
+    const messages = makeMessages();
+    const raw = { ANDROID: [], IOS: [], GENERIC: [] };
+    const result = processErrors(raw, 'standard', 'ANDROID', messages);
+    expect(result.errorsToShow).toEqual([]);
+    expect(result.platformLabel).toBe('ANDROID');
+  });
+
+  it('returns empty errors for null/undefined/empty input', () => {
+    const messages = makeMessages();
+    expect(processErrors(null, 'standard', undefined, messages).errorsToShow).toEqual([]);
+    expect(processErrors(undefined, 'standard', undefined, messages).errorsToShow).toEqual([]);
+    expect(processErrors([], 'standard', undefined, messages).errorsToShow).toEqual([]);
+  });
+
+  it('returns empty errors for object input with only GENERIC key', () => {
+    const messages = makeMessages();
+    const raw = { GENERIC: ['g1', 'g2'] };
+    const result = processErrors(raw, 'standard', undefined, messages);
+    expect(result.errorsToShow).toEqual([]);
+    expect(result.platformLabel).toBeUndefined();
+  });
+
+  it('handles object input with only ANDROID/IOS keys', () => {
+    const messages = makeMessages();
+    const raw = { ANDROID: ['a1'], IOS: ['i1'] };
+    const result = processErrors(raw, 'standard', 'ANDROID', messages);
+    expect(result.errorsToShow).toEqual(['a1']);
+    expect(result.platformLabel).toBe('ANDROID');
+  });
+
+  it('handles object input with no errors for currentTab', () => {
+    const messages = makeMessages();
+    const raw = { ANDROID: [], IOS: ['i1'] };
+    const result = processErrors(raw, 'standard', 'ANDROID', messages);
+    expect(result.errorsToShow).toEqual([]);
+    expect(result.platformLabel).toBe('ANDROID');
+  });
+
+  it('returns undefined platformLabel for object input with no GENERIC key and no platform', () => {
+    const messages = makeMessages();
+    const raw = { ANDROID: ['a1'], IOS: ['i1'] };
+    const result = processErrors(raw, 'standard', undefined, messages);
+    expect(result.errorsToShow).toEqual([]);
+    expect(result.platformLabel).toBeUndefined();
+  });
+
+  it('returns correct title and errors for array input with errorType liquid', () => {
+    const messages = makeMessages();
+    const result = processErrors(['liquidErr1', 'liquidErr2'], 'liquid', undefined, messages);
+    expect(result.errorsToShow).toEqual(['liquidErr1', 'liquidErr2']);
+    expect(result.title.props.id).toBe('liquid');
+    expect(result.title.props.defaultMessage).toBe('Liquid');
+    expect(result.platformLabel).toBeNull();
+  });
+
+  it('returns correct title and errors for object input with errorType liquid and platform', () => {
+    const messages = makeMessages();
+    const raw = { ANDROID: ['l1', 'l2'], IOS: ['l3'], GENERIC: ['lg1'] };
+    const result = processErrors(raw, 'liquid', 'ANDROID', messages);
+    expect(result.errorsToShow).toEqual(['l1', 'l2']);
+    expect(result.title.props.id).toBe('liquid');
+    expect(result.title.props.defaultMessage).toBe('Liquid');
+    expect(result.platformLabel).toBe('ANDROID');
+  });
+
+  it('returns empty errors for object input with errorType liquid and no platform', () => {
+    const messages = makeMessages();
+    const raw = { ANDROID: ['l1'], IOS: ['l2'], GENERIC: ['lg1', 'lg2'] };
+    const result = processErrors(raw, 'liquid', undefined, messages);
+    expect(result.errorsToShow).toEqual([]);
+    expect(result.title.props.id).toBe('liquid');
+    expect(result.title.props.defaultMessage).toBe('Liquid');
+    expect(result.platformLabel).toBeUndefined();
+  });
+});