cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/CreativesContainer/tests/index.test.js

@@ -173,19 +173,35 @@ describe('Test SlideBoxContent container', () => {
     expect(getCreativesData).toHaveBeenCalledWith({ channel: 'RCS' });
   });
 
-  it('RCS getFormData does not attach smsFallBackContent to templateData', async () => {
-    renderFunction('RCS', 'editTemplate', rcsTemplates, rcsEditTemplateData);
+  it('RCS getFormData mirrors smsFallBackContent onto templateData for library round-trip', async () => {
+    renderedComponent = shallowWithIntl(
+      <Creatives
+        loyaltyMetaData={loyaltyMetaData}
+        Templates={rcsTemplates}
+        channel="RCS"
+        slidBoxContent="editTemplate"
+        templateData={rcsEditTemplateData}
+        handleCloseCreatives={handleCloseCreatives}
+        getCreativesData={getCreativesData}
+        isFullMode={false}
+        templateActions={{
+          getCdnTransformationConfig,
+        }}
+      />,
+    );
     renderedComponent.instance().onEditTemplate();
 
     const mockValue = {
+      validity: true,
       value: {
         name: 'rcs_creative_name',
+        type: 'RCS',
         versions: {
           base: {
             content: {
               RCS: {
                 rcsContent: { contentType: 'RICHCARD', cardType: 'STANDALONE', cardSettings: {}, cardContent: [{}] },
-                smsFallBackContent: { message: 'should-not-be-copied' },
+                smsFallBackContent: { message: 'fallback-body' },
               },
             },
           },
@@ -193,16 +209,62 @@ describe('Test SlideBoxContent container', () => {
       },
     };
 
-    renderedComponent
-      .find('CapSlideBox')
-      .props()
-      .content.props.getFormData(mockValue);
+    // Call getFormData on the container instance — shallow CapSlideBox `content` shape can differ across wrappers
+    renderedComponent.instance().getFormData(mockValue);
     await tick();
 
     const instance = renderedComponent.instance();
     expect(instance.state.templateData).toBeDefined();
-    // sms fallback content should not be set on templateData per current logic
-    expect(instance.state.templateData.smsFallBackContent).toBeUndefined();
+    expect(instance.state.templateData.smsFallBackContent).toEqual({ message: 'fallback-body' });
+  });
+
+  it('RCS getFormData mirrors rcsCardVarMapped onto templateData for campaign reopen', async () => {
+    renderedComponent = shallowWithIntl(
+      <Creatives
+        loyaltyMetaData={loyaltyMetaData}
+        Templates={rcsTemplates}
+        channel="RCS"
+        slidBoxContent="editTemplate"
+        templateData={rcsEditTemplateData}
+        handleCloseCreatives={handleCloseCreatives}
+        getCreativesData={getCreativesData}
+        isFullMode={false}
+        templateActions={{
+          getCdnTransformationConfig,
+        }}
+      />,
+    );
+    renderedComponent.instance().onEditTemplate();
+
+    const cardVarMapped = { 1: '[Name]', user_name: '[Name]' };
+    const mockValue = {
+      validity: true,
+      value: {
+        name: 'rcs_creative_name',
+        type: 'RCS',
+        versions: {
+          base: {
+            content: {
+              RCS: {
+                rcsContent: {
+                  contentType: 'RICHCARD',
+                  cardType: 'STANDALONE',
+                  cardSettings: {},
+                  cardContent: [{ title: 'Hi {{user_name}}', cardVarMapped }],
+                },
+                smsFallBackContent: {},
+              },
+            },
+          },
+        },
+      },
+    };
+
+    renderedComponent.instance().getFormData(mockValue);
+    await tick();
+
+    const instance = renderedComponent.instance();
+    expect(instance.state.templateData.rcsCardVarMapped).toEqual(cardVarMapped);
   });
 
   it('Text getCreatives data for rcs, data from creatives done to campaigns', async () => {

package/app/v2Containers/CreativesContainer/tests/useLocalTemplatesProp.test.js

@@ -0,0 +1,125 @@
+/**
+ * Covers local-templates flag resolution: nested `localTemplatesConfig.useLocalTemplates`
+ * vs top-level `useLocalTemplates` (embedded consumers / SlideBoxContent).
+ */
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { Creatives } from '../index';
+import mockdata from '../../mockdata';
+
+const { smsTemplates, loyaltyMetaData } = mockdata;
+
+jest.mock('../../../v2Components/FormBuilder', () => ({
+  __esModule: true,
+  default: (props) => (
+    <div className="FormBuilder-mock" {...props}>
+      FormBuilder
+    </div>
+  ),
+}));
+
+const baseProps = {
+  loyaltyMetaData,
+  Templates: smsTemplates,
+  channel: 'SMS',
+  creativesMode: 'create',
+  templateData: null,
+  isFullMode: true,
+  handleCloseCreatives: jest.fn(),
+  getCreativesData: jest.fn(),
+  templateActions: {
+    getCdnTransformationConfig: jest.fn(),
+    resetTemplateStoreData: jest.fn(),
+  },
+  globalActions: {
+    clearMetaEntities: jest.fn(),
+  },
+};
+
+describe('CreativesContainer useLocalTemplates prop resolution', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('initial slidebox is templates when only top-level useLocalTemplates is true', () => {
+    const wrapper = shallowWithIntl(
+      <Creatives
+        {...baseProps}
+        useLocalTemplates
+      />,
+    );
+    expect(wrapper.instance().state.slidBoxContent).toBe('templates');
+  });
+
+  it('initial slidebox is templates when localTemplatesConfig.useLocalTemplates is true', () => {
+    const wrapper = shallowWithIntl(
+      <Creatives
+        {...baseProps}
+        localTemplatesConfig={{ useLocalTemplates: true }}
+      />,
+    );
+    expect(wrapper.instance().state.slidBoxContent).toBe('templates');
+  });
+
+  it('does not reset template store on unmount when embedded and top-level useLocalTemplates is true', () => {
+    const wrapper = shallowWithIntl(
+      <Creatives
+        {...baseProps}
+        location={{ query: { type: 'embedded' } }}
+        useLocalTemplates
+      />,
+    );
+    wrapper.unmount();
+    expect(baseProps.templateActions.resetTemplateStoreData).not.toHaveBeenCalled();
+    expect(baseProps.globalActions.clearMetaEntities).toHaveBeenCalled();
+  });
+
+  it('resets template store on unmount when embedded and local templates are not used', () => {
+    const wrapper = shallowWithIntl(
+      <Creatives
+        {...baseProps}
+        location={{ query: { type: 'embedded' } }}
+        useLocalTemplates={false}
+      />,
+    );
+    wrapper.unmount();
+    expect(baseProps.templateActions.resetTemplateStoreData).toHaveBeenCalled();
+    expect(baseProps.globalActions.clearMetaEntities).toHaveBeenCalled();
+  });
+
+  it('prefers nested localTemplatesConfig.useLocalTemplates=false over top-level true (not local list mode)', () => {
+    const wrapper = shallowWithIntl(
+      <Creatives
+        {...baseProps}
+        localTemplatesConfig={{ useLocalTemplates: false }}
+        useLocalTemplates
+      />,
+    );
+    expect(wrapper.instance().state.slidBoxContent).toBe('createTemplate');
+  });
+
+  it('uses top-level useLocalTemplates when localTemplatesConfig omits the flag', () => {
+    const wrapper = shallowWithIntl(
+      <Creatives
+        {...baseProps}
+        localTemplatesConfig={{}}
+        useLocalTemplates
+      />,
+    );
+    expect(wrapper.instance().state.slidBoxContent).toBe('templates');
+  });
+
+  it('resets template store when nested useLocalTemplates is false even if top-level is true', () => {
+    const wrapper = shallowWithIntl(
+      <Creatives
+        {...baseProps}
+        location={{ query: { type: 'embedded' } }}
+        localTemplatesConfig={{ useLocalTemplates: false }}
+        useLocalTemplates
+      />,
+    );
+    wrapper.unmount();
+    expect(baseProps.templateActions.resetTemplateStoreData).toHaveBeenCalled();
+    expect(baseProps.globalActions.clearMetaEntities).toHaveBeenCalled();
+  });
+});

package/app/v2Containers/Email/index.js

@@ -26,7 +26,7 @@ import * as globalActions from '../Cap/actions';
 import './_email.scss';
 import {getMessageObject} from '../../utils/messageUtils';
 import EmailPreview from '../../v2Components/EmailPreview';
-import { getDecodedFileName, hasLiquidSupportFeature, hasSupportCKEditor } from '../../utils/common';
+import { getDecodedFileName, hasSupportCKEditor } from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
@@ -170,7 +170,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         deleteLanguage: this.deleteLanguage,
       },
     };
-    this.liquidFlow =  hasLiquidSupportFeature();
   }
   componentWillMount() {
     const formData = this.initFormData(this.props, true); //_.cloneDeep(this.state.formData);
@@ -255,7 +254,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       layout: 'EMAIL',
       type: 'LAYOUT',
       version: 'v2',
-      liquidFlow:this.liquidFlow,
     };
     this.props.globalActions.fetchSchemaForEntity(query);
     window.addEventListener("message", this.handleFrameTasks);
@@ -347,7 +345,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           type: 'TAG',
           context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
           embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-          liquidFlow:this.liquidFlow
         };
         if (this.props.getDefaultTags) {
           query.context = this.props.getDefaultTags;
@@ -2373,7 +2370,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       type: 'TAG',
       context: (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
       embedded: 'full',
-      liquidFlow:this.liquidFlow
     };
     this.props.globalActions.fetchSchemaForEntity(query);
   }
@@ -3138,6 +3134,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   moduleType={moduleType}
                   showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
                   eventContextTags={this.props?.eventContextTags}
+                  waitEventContextTags={this.props?.waitEventContextTags}
                   forwardedTags={this.props?.forwardedTags}
                   isLoyaltyModule={this.props?.isLoyaltyModule}
                   isTestAndPreviewMode={this.state.isTestAndPreviewMode} // Add flag to prevent validation

package/app/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -15,7 +15,7 @@ import HTMLEditor from '../../../v2Components/HtmlEditor';
 import CapTagListWithInput from '../../../v2Components/CapTagListWithInput';
 import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
-import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../../utils/common';
+import { isEmailUnsubscribeTagOptional } from '../../../utils/common';
 import history from '../../../utils/history';
 import messages from '../messages';
 import emailMessages from '../../Email/messages';
@@ -54,6 +54,7 @@ const EmailHTMLEditor = (props) => {
     globalActions,
     loadingTags,
     eventContextTags,
+    waitEventContextTags,
     forwardedTags,
     selectedOfferDetails,
     currentOrgDetails,
@@ -108,6 +109,21 @@ const EmailHTMLEditor = (props) => {
     standardErrors: [],
   });
 
+  // Merge tag validation errors (missing) into apiValidationErrors so they show in ValidationErrorDisplay
+  const mergedApiValidationErrors = useMemo(() => {
+    const tagMessages = [];
+    if (tagValidationError?.missingTags?.length && !isEmailUnsubscribeTagOptional()) {
+      tagMessages.push(`Missing tags are: ${tagValidationError.missingTags.join(', ')}`);
+    }
+    if (tagMessages.length === 0) {
+      return apiValidationErrors;
+    }
+    return {
+      liquidErrors: apiValidationErrors?.liquidErrors || [],
+      standardErrors: [...(apiValidationErrors?.standardErrors || []), ...tagMessages],
+    };
+  }, [apiValidationErrors, tagValidationError]);
+
   // Refs for tracking initialization and previous values
   const contentInitializedRef = useRef(false);
   const subjectInitializedRef = useRef(false);
@@ -172,9 +188,6 @@ const EmailHTMLEditor = (props) => {
     },
   }), [htmlContent, subject, currentOrgDetails]);
 
-  // Check if liquid support is enabled
-  const isLiquidEnabled = hasLiquidSupportFeature();
-
   // Detect edit mode: when isEditEmail is false (create flow), never treat as edit or fetch template details
   const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
   const currentTemplateId = isEditEmail
@@ -470,15 +483,27 @@ const EmailHTMLEditor = (props) => {
   const handleContentChange = useCallback((content) => {
     setHtmlContent(content);
 
+    // Clear previous liquid/API validation errors so Done button can be enabled after user fixes content
+    setApiValidationErrors({
+      liquidErrors: [],
+      standardErrors: [],
+    });
+    if (showLiquidErrorInFooter) {
+      showLiquidErrorInFooter({
+        STANDARD_ERROR_MSG: [],
+        LIQUID_ERROR_MSG: [],
+      });
+    }
+
     // Validate tags
     if (tags.length > 0 || !isEmpty(injectedTags)) {
       const validationResult = validateTags({
         content,
         tagsParam: tags,
-        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
-        eventContextTags,
+        isFullMode,
+        waitEventContextTags,
       });
 
       if (!validationResult.valid) {
@@ -487,7 +512,7 @@ const EmailHTMLEditor = (props) => {
         setTagValidationError(null);
       }
     }
-  }, [tags, injectedTags, location, getDefaultTags, eventContextTags]);
+  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, waitEventContextTags, showLiquidErrorInFooter]);
 
   // Store the last validation state received from HTMLEditor
   const lastValidationStateRef = useRef(null);
@@ -631,7 +656,7 @@ const EmailHTMLEditor = (props) => {
     // IMPORTANT: Clear API validation errors FIRST before checking for validation errors
     // This ensures that old API errors don't block the save when user fixes content and clicks Update again
     // We'll re-validate with fresh API call anyway
-    if (isLiquidEnabled && getLiquidTags) {
+    if (getLiquidTags) {
       setApiValidationErrors({
         liquidErrors: [],
         standardErrors: [],
@@ -691,26 +716,27 @@ const EmailHTMLEditor = (props) => {
     // 2. Validate Unsubscribe Tag when feature is OFF (when flag is false we require unsubscribe)
     // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is true: do NOT validate for unsubscribe (aligned with FormBuilder).
     // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false: validate and require unsubscribe tag.
-    if (!isEmailUnsubscribeTagMandatory() && moduleType === OUTBOUND) {
-      // Check if content contains unsubscribe tag (either {{unsubscribe}} or {{unsubscribe(#...)})
+    // 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) {
       const unsubscribeRegex = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g; // eslint-disable-line no-useless-escape
       const hasUnsubscribeTag = unsubscribeRegex.test(htmlContent);
 
       if (!hasUnsubscribeTag) {
-        // Show error notification
+        setTagValidationError({ valid: false, missingTags: ['unsubscribe'] });
         const missingTagsMsg = intl.formatMessage(formBuilderMessages.missingTags);
         const errorMessage = `${missingTagsMsg} unsubscribe`;
-        CapNotification.error({
-          message: 'ERROR ! ! !',
-          description: errorMessage,
-          duration: 5,
-        });
+        setTimeout(() => {
+          CapNotification.error({
+            message: 'ERROR ! ! !',
+            description: errorMessage,
+            duration: 5,
+          });
+        }, 0);
 
-        // Reset parent state so next click is detected as a change
         if (onValidationFail) {
           onValidationFail();
         }
-        // Block save - unsubscribe tag is required when validation is enabled
         return;
       }
     }
@@ -718,56 +744,23 @@ const EmailHTMLEditor = (props) => {
     // 3. Validate Content Tags
     // For NON-liquid orgs: BLOCKING validation (matches CK/BEE behavior)
     // For liquid orgs: Non-blocking (extractTags API will validate)
-    if (tags.length > 0 || !isEmpty(injectedTags)) {
+    // In library mode, always validate when there is content (even if tags list is empty)
+    const shouldValidateTags = (tags.length > 0 || !isEmpty(injectedTags)) || (!isFullMode && !!htmlContent);
+    if (shouldValidateTags) {
       const validationResult = validateTags({
         content: htmlContent,
         tagsParam: tags,
-        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
-        eventContextTags,
+        isFullMode,
       });
 
-      const hasUnsupportedTags = validationResult?.unsupportedTags?.length > 0;
-      if (!validationResult?.valid || hasUnsupportedTags) {
+      if (!validationResult?.valid) {
         setTagValidationError(validationResult);
-
-        // IMPORTANT: For non-liquid orgs, block save (like CK/BEE editor)
-        // For liquid orgs, continue (extractTags API will validate)
-        if (!isLiquidEnabled) {
-          // Show notification popup like CK/BEE editor
-          const baseLanguage = get(currentOrgDetails, 'basic_details.base_language', 'en');
-
-          const contentNotValidMsg = intl.formatMessage(formBuilderMessages.contentNotValidLanguage);
-          let errorMessage = `${contentNotValidMsg} ${baseLanguage}`;
-
-          if (hasUnsupportedTags) {
-            const unsupportedTagsMsg = intl.formatMessage(formBuilderMessages.unsupportedTags);
-            errorMessage += `\n${unsupportedTagsMsg} ${validationResult?.unsupportedTags?.join(', ')}`;
-          }
-          if (validationResult?.missingTags?.length > 0) {
-            const missingTagsMsg = intl.formatMessage(formBuilderMessages.missingTags);
-            errorMessage += `\n${missingTagsMsg} ${validationResult?.missingTags?.join(', ')}`;
-          }
-
-          const type = 'error';
-          CapNotification[type]({
-            message: `${type.toUpperCase()} ! ! ! `,
-            description: errorMessage,
-            duration: 5,
-          });
-
-          // Reset parent state so next click is detected as a change
-          if (onValidationFail) {
-            onValidationFail();
-          }
-          // Block save for non-liquid orgs
-          return;
-        }
-        // For liquid orgs, just show warning and continue
+        // For liquid orgs, show warning and continue (extractTags API will validate)
       }
       // Clear tag errors if valid
-      if (tagValidationError && validationResult?.valid && !hasUnsupportedTags) {
+      if (tagValidationError && validationResult?.valid) {
         setTagValidationError(null);
       }
     }
@@ -934,13 +927,9 @@ const EmailHTMLEditor = (props) => {
       }
     };
 
-    // If liquid enabled, validate first using extractTags API
-    if (isLiquidEnabled && getLiquidTags) {
-      // Note: API validation errors are already cleared at the start of handleSave
-      // This ensures fresh validation on every save attempt
-
+    // Liquid validation (extractTags) only in library mode
+    if (getLiquidTags && !isFullMode) {
       const onError = ({ standardErrors, liquidErrors }) => {
-        // Store API validation errors in state so they can be displayed in UI
         setApiValidationErrors({
           liquidErrors: liquidErrors || [],
           standardErrors: standardErrors || [],
@@ -952,15 +941,12 @@ const EmailHTMLEditor = (props) => {
             LIQUID_ERROR_MSG: liquidErrors || [],
           });
         }
-        // Don't reset ref here - liquid validation is async and resetting causes infinite loop
-        // The parent's isGetFormData will be reset by onValidationFail, and the next click will be detected
         if (onValidationFail) {
           onValidationFail();
         }
       };
 
       const onSuccess = () => {
-        // Clear API validation errors on success
         setApiValidationErrors({
           liquidErrors: [],
           standardErrors: [],
@@ -976,10 +962,6 @@ const EmailHTMLEditor = (props) => {
         messages: formBuilderMessages,
         onError,
         onSuccess,
-        tagLookupMap: metaEntities?.tagLookupMap,
-        eventContextTags,
-        isLiquidFlow: true,
-        forwardedTags: forwardedTags || {},
       });
     } else {
       performSave();
@@ -991,7 +973,6 @@ const EmailHTMLEditor = (props) => {
     injectedTags,
     location,
     getDefaultTags,
-    eventContextTags,
     formatMessage,
     subjectError,
     isFullMode,
@@ -1003,11 +984,8 @@ const EmailHTMLEditor = (props) => {
     emailActions,
     getFormdata,
     isGetFormData,
-    isLiquidEnabled,
     getLiquidTags,
     showLiquidErrorInFooter,
-    metaEntities,
-    forwardedTags,
     globalActions,
     intl,
     extractedTemplateName,
@@ -1124,6 +1102,7 @@ const EmailHTMLEditor = (props) => {
               injectedTags={injectedTags || {}}
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               showHeading
               showTagList
               showInput
@@ -1148,16 +1127,16 @@ const EmailHTMLEditor = (props) => {
             injectedTags={injectedTags}
             location={location}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             selectedOfferDetails={selectedOfferDetails}
             channel={EMAIL}
             userLocale={intl.locale || 'en'}
             moduleFilterEnabled={location?.query?.type !== EMBEDDED}
             onTagContextChange={handleOnTagsContextChange}
-            isLiquidEnabled={isLiquidEnabled}
             isFullMode={isFullMode}
             onErrorAcknowledged={handleErrorAcknowledged}
             onValidationChange={handleValidationChange}
-            apiValidationErrors={apiValidationErrors}
+            apiValidationErrors={mergedApiValidationErrors}
           />
         </CapColumn>
       </CapRow>
@@ -1176,6 +1155,7 @@ EmailHTMLEditor.propTypes = {
   globalActions: PropTypes.object,
   loadingTags: PropTypes.bool,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   forwardedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   currentOrgDetails: PropTypes.object,
@@ -1222,6 +1202,7 @@ EmailHTMLEditor.defaultProps = {
   globalActions: {},
   loadingTags: false,
   eventContextTags: [],
+  waitEventContextTags: {},
   forwardedTags: {},
   selectedOfferDetails: [],
   currentOrgDetails: {},

package/app/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -173,6 +173,7 @@ const EmailWrapperView = ({
   forwardedTags,
   selectedOfferDetails,
   eventContextTags,
+  waitEventContextTags,
   getFormdata,
   isGetFormData,
   getLiquidTags,
@@ -246,6 +247,7 @@ const EmailWrapperView = ({
     globalActions,
     loadingTags,
     eventContextTags,
+    waitEventContextTags,
     forwardedTags,
     selectedOfferDetails,
     currentOrgDetails,
@@ -371,6 +373,7 @@ EmailWrapperView.propTypes = {
   forwardedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   emailActions: PropTypes.object,
   Email: PropTypes.object,
   templateData: PropTypes.object,