@capillarytech/creatives-library 9.0.67-beta.test-cap-204791-beta-publish-yogesh.4 → 9.0.68

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.67-beta.test-cap-204791-beta-publish-yogesh.4",
+  "version": "9.0.68",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/ErrorInfoNote/index.js

@@ -18,6 +18,7 @@ import { ANDROID, GENERIC, IOS } from '../../v2Containers/CreativesContainer/con
 import { ERROR_TAB_KEYS } from '../HtmlEditor/utils/validationConstants';
 import { SEVERITY } from '../HtmlEditor/components/ValidationPanel/constants';
 import { LIQUID_DOC_URL } from './constants';
+import renderIssueMessage from '../HtmlEditor/utils/renderIssueMessage';
 
 const { CapLabelInline } = CapLabel;
 
@@ -120,7 +121,7 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
           >
             <CapRow useLegacy className="error-info-note__item-content">
               <CapLabelInline type="label2" className="error-info-note__item-message">
-                {displayMessage}
+                {renderIssueMessage(displayMessage)}
               </CapLabelInline>
               {line && (
                 <CapLabelInline type="label2" className="error-info-note__item-location">
@@ -426,7 +427,7 @@ const ErrorSection = ({
       {(errors || []).map((error) => (
         <CapRow useLegacy key={`${error}`} className="error-list-legacy__item">
           <CapLabel type="label2" className="cap-list-v2-error-item">
-            <CapLabel type="label2">{error}</CapLabel>
+            <CapLabel type="label2">{renderIssueMessage(error)}</CapLabel>
           </CapLabel>
         </CapRow>
       ))}

package/v2Components/FormBuilder/Classic.js

@@ -592,6 +592,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (!_.isEqual(prevProps.isTransactional, this.props.isTransactional)) {
+      this.validateForm(this.props.tags, this.props.injectedTags);
+    }
+  }
+
   onEdit() {
 
   }
@@ -1581,7 +1587,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content;
     const isOutboundModule = (currentModule || '').toUpperCase() === OUTBOUND;
 
-    const initialMissingTags = (tags && tags.length && !isFullMode && isEmail && isOutboundModule && !isEmailUnsubscribeTagOptional() && !hasUnsubscribeTag(content))
+    const isTransactional = this.props.isTransactional;
+
+    const initialMissingTags = (tags && tags.length && !isFullMode && isEmail && isOutboundModule && !isEmailUnsubscribeTagOptional() && !isTransactional && !hasUnsubscribeTag(content))
       ? ['unsubscribe']
       : [];
 
@@ -1598,7 +1606,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
     // When unsubscribe tag is optional (isEmailUnsubscribeTagOptional): do not enforce unsubscribe (defensive splice); set isContentEmpty only when content is empty. Do not override response.valid so brace/format errors are preserved.
     const validString = /\S/.test(contentForValidation);
-    if (isEmailUnsubscribeTagOptional() && isEmail && isOutboundModule) {
+    if ((isEmailUnsubscribeTagOptional() || isTransactional) && isEmail && isOutboundModule) {
       const missingTagIndex = response.missingTags.indexOf('unsubscribe');
       if (missingTagIndex !== -1) {
         response.missingTags.splice(missingTagIndex, 1);

package/v2Components/HtmlEditor/components/ValidationTabs/index.js

@@ -18,6 +18,7 @@ import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 // Messages
 import messages from './messages';
 import { BLOCKING_ERROR_RULE_IDS, VALIDATION_SEVERITY } from '../../constants';
+import renderIssueMessage from '../../utils/renderIssueMessage';
 
 // Styles
 import './_validationTabs.scss';
@@ -109,7 +110,7 @@ const ValidationTabContent = ({
           >
             <div className="validation-tabs__item-content">
               <span className="validation-tabs__item-message">
-                {message}
+                {renderIssueMessage(message)}
               </span>
               {line && (
                 <span className="validation-tabs__item-location">

package/v2Components/HtmlEditor/utils/__tests__/renderIssueMessage.test.js

@@ -0,0 +1,74 @@
+/**
+ * renderIssueMessage Tests
+ *
+ * Tests for rendering AI-generated liquid validation messages, including tolerance for
+ * non-guaranteed LLM formatting quirks (lead-in text before the first label, markdown-wrapped
+ * labels).
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import renderIssueMessage from '../renderIssueMessage';
+
+const renderMessage = (message) => render(<div>{renderIssueMessage(message)}</div>);
+
+describe('renderIssueMessage', () => {
+  it('returns non-string input unchanged', () => {
+    const node = <span>already a node</span>;
+    expect(renderIssueMessage(node)).toBe(node);
+    expect(renderIssueMessage(null)).toBeNull();
+    expect(renderIssueMessage(undefined)).toBeUndefined();
+  });
+
+  it('returns a plain message unchanged when no known labels are present', () => {
+    expect(renderIssueMessage('Something went wrong')).toBe('Something went wrong');
+  });
+
+  it('renders all three labels in order, bolding only "Issue text:" and stripping it from the body', () => {
+    const message = 'Issue text: bad tag Explanation: the tag is malformed Solution: fix the tag';
+    const { container } = renderMessage(message);
+
+    const strong = container.querySelector('strong');
+    expect(strong).toHaveTextContent('Issue text:');
+    expect(container).toHaveTextContent('Issue text: bad tag');
+    expect(container).toHaveTextContent('Explanation: the tag is malformed');
+    expect(container).toHaveTextContent('Solution: fix the tag');
+    // Only the "Issue text:" label should be wrapped in <strong>.
+    expect(container.querySelectorAll('strong')).toHaveLength(1);
+  });
+
+  it('renders correctly when only some labels are present', () => {
+    const message = 'Issue text: bad tag Solution: fix the tag';
+    const { container } = renderMessage(message);
+
+    expect(container).toHaveTextContent('Issue text: bad tag');
+    expect(container).toHaveTextContent('Solution: fix the tag');
+    expect(container).not.toHaveTextContent('Explanation:');
+  });
+
+  it('preserves lead-in text before the first recognized label instead of dropping it', () => {
+    const message = "Here's what I found. Issue text: bad tag Explanation: the tag is malformed";
+    const { container } = renderMessage(message);
+
+    expect(container).toHaveTextContent("Here's what I found.");
+    expect(container).toHaveTextContent('Issue text: bad tag');
+  });
+
+  it('strips markdown bold wrapping around a label instead of leaking asterisks', () => {
+    const message = '**Issue text:** bad tag **Explanation:** the tag is malformed';
+    const { container } = renderMessage(message);
+
+    expect(container.textContent).not.toContain('*');
+    expect(container.querySelector('strong')).toHaveTextContent('Issue text:');
+    expect(container).toHaveTextContent('Explanation: the tag is malformed');
+  });
+
+  it('strips markdown underscore-bold wrapping around a label', () => {
+    const message = '__Issue text:__ bad tag';
+    const { container } = renderMessage(message);
+
+    expect(container.textContent).not.toContain('_');
+    expect(container.querySelector('strong')).toHaveTextContent('Issue text:');
+  });
+});

package/v2Components/HtmlEditor/utils/renderIssueMessage.js

@@ -0,0 +1,56 @@
+import React, { Fragment } from 'react';
+import {
+  AI_ISSUE_TEXT_LABEL,
+  AI_ISSUE_MESSAGE_LABELS,
+  AI_ISSUE_MESSAGE_LEADING_SEGMENT_KEY,
+} from './validationConstants';
+
+// Renders askAiraForLiquid's LLM-generated messages, splitting on known labels rather than "\n"
+// since the API doesn't guarantee newlines; tolerates lead-in text and markdown-wrapped labels.
+
+const stripLabelMarkdown = (text) => AI_ISSUE_MESSAGE_LABELS.reduce(
+  (acc, label) => acc.split(`**${label}**`).join(label).split(`__${label}__`).join(label),
+  text
+);
+
+const renderIssueMessage = (message) => {
+  if (typeof message !== 'string') {
+    return message;
+  }
+
+  const normalizedMessage = stripLabelMarkdown(message);
+
+  const labelPositions = AI_ISSUE_MESSAGE_LABELS
+    .map((label) => ({ label, index: normalizedMessage.indexOf(label) }))
+    .filter(({ index }) => index !== -1)
+    .sort((a, b) => a.index - b.index);
+
+  if (labelPositions.length === 0) {
+    return normalizedMessage;
+  }
+
+  const segments = labelPositions.map(({ label, index }, i) => {
+    const end = i + 1 < labelPositions.length ? labelPositions[i + 1].index : normalizedMessage.length;
+    return { key: label, label, text: normalizedMessage.slice(index, end).trim() };
+  });
+
+  const leadingText = normalizedMessage.slice(0, labelPositions[0].index).trim();
+  if (leadingText) {
+    segments.unshift({ key: AI_ISSUE_MESSAGE_LEADING_SEGMENT_KEY, label: null, text: leadingText });
+  }
+
+  return segments.map(({ key, label, text }, index) => (
+    <Fragment key={key}>
+      {index > 0 && <br />}
+      {index > 0 && '  - '}
+      {label === AI_ISSUE_TEXT_LABEL ? (
+        <>
+          <strong>{label}</strong>
+          {text.slice(label.length)}
+        </>
+      ) : text}
+    </Fragment>
+  ));
+};
+
+export default renderIssueMessage;

package/v2Components/HtmlEditor/utils/validationConstants.js

@@ -36,3 +36,8 @@ export const ERROR_TAB_KEYS = {
   ERRORS: 'errors',
   WARNINGS: 'warnings',
 };
+
+// Labels used to segment AI-generated liquid validation messages (see renderIssueMessage.js)
+export const AI_ISSUE_TEXT_LABEL = 'Issue text:';
+export const AI_ISSUE_MESSAGE_LABELS = [AI_ISSUE_TEXT_LABEL, 'Explanation:', 'Solution:'];
+export const AI_ISSUE_MESSAGE_LEADING_SEGMENT_KEY = 'leading-text';

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -143,6 +143,7 @@ export function SlideBoxContent(props) {
       supportedTags = [],
       selectedOfferDetails,
       channelsToDisable,
+      isTransactional,
       weChatTemplateType,
       onWechatTemplateChange,
       selectedWeChatAccount,
@@ -734,6 +735,7 @@ export function SlideBoxContent(props) {
         onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
         restrictPersonalization={restrictPersonalization}
         isAnonymousType={isAnonymousType}
+        isTransactional={isTransactional}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -783,7 +785,8 @@ export function SlideBoxContent(props) {
               handleCloseTestAndPreview={handleCloseTestAndPreview}
               isTestAndPreviewMode={isTestAndPreviewMode}
               onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
-            />
+                isTransactional={isTransactional}
+              />
             );
           }     
           // HTML template: Use EmailWrapper component (which uses EmailWithoutSaga)
@@ -823,6 +826,7 @@ export function SlideBoxContent(props) {
               handleCloseTestAndPreview={handleCloseTestAndPreview}
               isTestAndPreviewMode={isTestAndPreviewMode}
               onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
+              isTransactional={isTransactional}
               location={{
                 pathname: `/email/edit/${templateData._id || ''}`,
                 query: {

package/v2Containers/CreativesContainer/index.js

@@ -2398,6 +2398,7 @@ export class Creatives extends React.Component {
               forwardedTags={forwardedTags}
               selectedOfferDetails={selectedOfferDetails}
               channelsToDisable={channelsToDisable}
+              isTransactional={this.props.isTransactional}
               restrictPersonalization={restrictPersonalization}
               isAnonymousType={isAnonymousType}
               customerType={customerType}

package/v2Containers/Email/index.js

@@ -3278,6 +3278,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   exportHtmlLocked={this.state.exportHtmlContentLocked}
                   exportHtmlTooltip={getExportHtmlDisabledTooltip(this.state.isEdit, this.state.exportHtmlContentLocked, this.props.intl.formatMessage)}
                   isTestAndPreviewMode={this.state.isTestAndPreviewMode} // Add flag to prevent validation
+                  isTransactional={this.props.isTransactional}
               /> : ''}
             </CapColumn>
           </CapRow>

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -93,10 +93,13 @@ const EmailHTMLEditor = (props) => {
     forwardedRef,
     // Module type for unsubscribe tag validation
     moduleType,
+    isTransactional,
     // Validation state callback
     onHtmlEditorValidationStateChange,
   } = props;
 
+  const isUnsubscribeOptional = isEmailUnsubscribeTagOptional() || isTransactional;
+
   const { formatMessage } = intl;
 
   // State for content and subject
@@ -127,7 +130,7 @@ const EmailHTMLEditor = (props) => {
   // Merge tag validation errors (missing) into apiValidationErrors so they show in ValidationErrorDisplay
   const mergedApiValidationErrors = useMemo(() => {
     const tagMessages = [];
-    if (tagValidationError?.missingTags?.length && !isEmailUnsubscribeTagOptional()) {
+    if (tagValidationError?.missingTags?.length && !isUnsubscribeOptional) {
       tagMessages.push(`Missing tags are: ${tagValidationError.missingTags.join(', ')}`);
     }
     if (tagMessages.length === 0) {
@@ -137,7 +140,7 @@ const EmailHTMLEditor = (props) => {
       liquidErrors: apiValidationErrors?.liquidErrors || [],
       standardErrors: [...(apiValidationErrors?.standardErrors || []), ...tagMessages],
     };
-  }, [apiValidationErrors, tagValidationError]);
+  }, [apiValidationErrors, tagValidationError, isUnsubscribeOptional]);
 
   // Refs for tracking initialization and previous values
   const contentInitializedRef = useRef(false);
@@ -738,7 +741,7 @@ const EmailHTMLEditor = (props) => {
     // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false: validate and require unsubscribe tag.
     // Run for both library and full mode so liquid-enabled orgs also get the error (notification + ValidationErrorDisplay).
     const isModuleTypeOutbound = (moduleType || '').toUpperCase() === OUTBOUND;
-    if (!isEmailUnsubscribeTagOptional() && isModuleTypeOutbound) {
+    if (!isUnsubscribeOptional && isModuleTypeOutbound) {
       const unsubscribeRegex = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g; // eslint-disable-line no-useless-escape
       const hasUnsubscribeTag = unsubscribeRegex.test(htmlContent);
 
@@ -1009,6 +1012,7 @@ const EmailHTMLEditor = (props) => {
     globalActions,
     intl,
     extractedTemplateName,
+    isUnsubscribeOptional,
   ]);
 
   // Keep handleSave ref up to date - MUST be before isGetFormData effect

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -193,6 +193,7 @@ const EmailWrapperView = ({
   showTemplateName,
   onHtmlEditorValidationStateChange,
   moduleType,
+  isTransactional,
 }) => {
   const htmlEditorRef = useRef(null);
   const supportCKEditor = hasSupportCKEditor();
@@ -275,6 +276,7 @@ const EmailWrapperView = ({
     onFormDataChange: handleFormDataChange,
     // Module type for unsubscribe tag validation
     moduleType,
+    isTransactional,
     // Loading states
     fetchingLiquidTags: fetchingLiquidTags || false,
     createTemplateInProgress: createTemplateInProgress || false,

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -51,6 +51,7 @@ const useEmailWrapper = ({
   editor,
   moduleType,
   eventContextTags,
+  isTransactional,
   waitEventContextTags,
   isLoyaltyModule,
   // Props for CmsTemplates component
@@ -746,6 +747,7 @@ const useEmailWrapper = ({
       eventContextTags,
       waitEventContextTags,
       isLoyaltyModule,
+      isTransactional,
       showTestAndPreviewSlidebox,
       handleTestAndPreview,
       handleCloseTestAndPreview,
@@ -776,6 +778,7 @@ const useEmailWrapper = ({
     eventContextTags,
     waitEventContextTags,
     isLoyaltyModule,
+    isTransactional,
     showTestAndPreviewSlidebox,
     handleTestAndPreview,
     handleCloseTestAndPreview,

package/v2Containers/EmailWrapper/index.js

@@ -87,6 +87,7 @@ const EmailWrapper = (props) => {
     fetchingCmsData,
     onHtmlEditorValidationStateChange,
     isEditEmail = true,
+    isTransactional,
   } = props;
 
   // Pass destructured props to the custom hook
@@ -207,6 +208,7 @@ const EmailWrapper = (props) => {
         fetchingCmsData={fetchingCmsData}
         onHtmlEditorValidationStateChange={onHtmlEditorValidationStateChange}
         moduleType={moduleType}
+        isTransactional={isTransactional}
       />
 
       {/* HTMLEditor Testing Component - Console Controlled */}