@capillarytech/creatives-library 8.0.316-alpha.4 → 8.0.317-alpha.0

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/index.test.js

@@ -645,6 +645,105 @@ describe('UnifiedPreview', () => {
         expect(screen.getByTestId('rcs-preview')).toBeInTheDocument();
         expect(screen.getByTestId('rcs-content')).toHaveTextContent(/Only RCS pane/);
       });
+
+      it('on SMS fallback tab, shows raw template when no varmap and no resolved text', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'Hello {{name}}',
+            templateContent: 'Hello {{name}}',
+            // no rcsSmsFallbackVarMapped
+          },
+          smsFallbackResolvedText: undefined,
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        // rawFallbackTemplate is shown directly — {{tags}} remain visible
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello {{name}}');
+      });
+
+      it('on SMS fallback tab, treats empty resolved text as absent and shows raw template', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'Raw {{var}} template',
+            templateContent: 'Raw {{var}} template',
+          },
+          smsFallbackResolvedText: '',
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Raw {{var}} template');
+      });
+
+      it('on SMS fallback tab, applies varmap slot substitution when varmap entries exist and no resolved text', () => {
+        // getFallbackResolvedContent key format: `${fullToken}_${segmentIndex}`
+        // 'Hello {{name}}' → segments ['Hello ', '{{name}}'], so {{name}} is at index 1 → key '{{name}}_1'
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'Hello {{name}}',
+            templateContent: 'Hello {{name}}',
+            rcsSmsFallbackVarMapped: { '{{name}}_1': 'World' },
+          },
+          smsFallbackResolvedText: undefined,
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello World');
+      });
+
+      it('on SMS fallback tab, resolved text takes priority over varmap entries', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'Hello {{name}}',
+            templateContent: 'Hello {{name}}',
+            rcsSmsFallbackVarMapped: { '{{name}}_1': 'World' },
+          },
+          smsFallbackResolvedText: 'Hello John',
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        // resolvedText wins over varmap substitution
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello John');
+      });
     });
   });
 

package/v2Components/CommonTestAndPreview/tests/index.test.js

@@ -30,23 +30,28 @@ jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
 }));
 
 // Mock child components - must use React.createElement to avoid hoisting issues
+let lastLeftPanelContentProps = null;
 jest.mock('../LeftPanelContent', () => {
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
   const ReactLib = require('react');
   return {
     __esModule: true,
-    default: function MockLeftPanelContent() {
-      return ReactLib.createElement('div', { 'data-testid': 'left-panel' }, 'Left Panel');
+    default: function MockLeftPanelContent(props) {
+      lastLeftPanelContentProps = props;
+      const editorEl = props.renderCustomValuesEditor ? props.renderCustomValuesEditor() : null;
+      return ReactLib.createElement('div', { 'data-testid': 'left-panel' }, 'Left Panel', editorEl);
     },
   };
 });
 
+let lastCustomValuesEditorProps = null;
 jest.mock('../CustomValuesEditor', () => {
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
   const ReactLib = require('react');
   return {
     __esModule: true,
-    default: function MockCustomValuesEditor() {
+    default: function MockCustomValuesEditor(props) {
+      lastCustomValuesEditorProps = props;
       return ReactLib.createElement('div', { 'data-testid': 'custom-values-editor' }, 'Custom Values Editor');
     },
   };
@@ -184,6 +189,8 @@ describe('CommonTestAndPreview', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     lastSendTestMessageProps = null;
+    lastLeftPanelContentProps = null;
+    lastCustomValuesEditorProps = null;
     // Reset all mock function implementations
     Object.values(mockActions).forEach((mockFn) => {
       if (jest.isMockFunction(mockFn)) {
@@ -3263,4 +3270,107 @@ describe('CommonTestAndPreview', () => {
       });
     });
   });
+
+  describe('SMS DLT and mustache tag discrimination (smsTemplateHasMustacheTags / buildSyntheticSmsMustacheTags)', () => {
+    it('should return no tags for SMS content that contains only DLT {#var#} tokens', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            formData={{ 0: { 'sms-editor': 'Order {#orderId#} is confirmed' } }}
+            extractedTags={[]}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
+
+      // smsTemplateHasMustacheTags returns false for DLT-only → extractedTags is []
+      expect(lastLeftPanelContentProps.extractedTags).toEqual([]);
+    });
+
+    it('should build synthetic tags from {{mustache}} tokens, excluding DLT {#var#} tokens', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            formData={{ 0: { 'sms-editor': 'Hi {{name}}, order {#orderId#} shipped' } }}
+            extractedTags={[]}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
+
+      const tags = lastLeftPanelContentProps.extractedTags;
+      // Only {{name}} should become a tag — {#orderId#} must be excluded
+      expect(tags).toHaveLength(1);
+      expect(tags[0].name).toBe('name');
+    });
+
+    it('should use API-extracted tags when present instead of building synthetic ones', async () => {
+      const apiTags = [{ name: 'firstName', metaData: { userDriven: true }, children: [] }];
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            formData={{ 0: { 'sms-editor': 'Hi {{firstName}}' } }}
+            extractedTags={apiTags}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
+
+      // API tags take priority over buildSyntheticSmsMustacheTags
+      expect(lastLeftPanelContentProps.extractedTags).toEqual(apiTags);
+    });
+  });
+
+  describe('handleDiscardCustomValues — preview reset', () => {
+    it('should call updatePreviewRequested when handleDiscardCustomValues is invoked', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            formData={{ 0: { 'sms-editor': 'Hi {{name}}' } }}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
+
+      lastCustomValuesEditorProps.handleDiscardCustomValues();
+
+      expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call updatePreviewRequested with RCS channel when handleDiscardCustomValues is invoked for RCS with fallback', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.RCS}
+            smsFallbackContent={{
+              templateContent: 'Fallback {{name}}',
+              content: 'Fallback {{name}}',
+            }}
+            formData={{}}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
+
+      lastCustomValuesEditorProps.handleDiscardCustomValues();
+
+      // updatePreviewRequested is called; syncSmsFallbackPreview (which hits Api directly) is NOT called
+      expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
+    });
+  });
 });
+

package/v2Components/FormBuilder/index.js

@@ -2990,6 +2990,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
                 restrictPersonalization={this.props.restrictPersonalization}
+                waitEventContextTags={this.props?.waitEventContextTags}
               />
             </CapColumn>
           );
@@ -3019,6 +3020,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 userLocale={this.props.userLocale}
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
                 containerStyle={val.style || {}}
                 inputProps={val.inputProps || {}}
@@ -3658,6 +3660,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     channel={channel}
                     eventContextTags={this.props?.eventContextTags}
                     restrictPersonalization={this.props.restrictPersonalization}
+                    waitEventContextTags={this.props?.waitEventContextTags}
                     getPopupContainer={this.props.tagListGetPopupContainer}
                     popoverOverlayStyle={this.props.tagListPopoverOverlayStyle}
                     popoverOverlayClassName={this.props.tagListPopoverOverlayClassName}
@@ -3707,6 +3710,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     userLocale={this.state.translationLang}
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     eventContextTags={this.props?.eventContextTags}
+                    waitEventContextTags={this.props?.waitEventContextTags}
                     moduleFilterEnabled={moduleFilterEnabledForCapTagList}
                     containerStyle={val.style || {}}
                     inputProps={val.inputProps || {}}
@@ -4001,6 +4005,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onContextChange={this.props.onContextChange}
                   moduleFilterEnabled={isModuleFilterEnabled}
                   eventContextTags={this.props?.eventContextTags}
+                  waitEventContextTags={this.props?.waitEventContextTags}
                 />
               </CapColumn>
             );
@@ -4303,6 +4308,7 @@ FormBuilder.defaultProps = {
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
   metaDataStatus: "",
+  waitEventContextTags: {},
   isTestAndPreviewMode: false, // Default to false to maintain existing behavior
 };
 
@@ -4353,6 +4359,7 @@ FormBuilder.propTypes = {
   moduleType: PropTypes.string.isRequired,
   showLiquidErrorInFooter: PropTypes.func.isRequired,
   eventContextTags: PropTypes.array.isRequired,
+  waitEventContextTags: PropTypes.object,
   forwardedTags: PropTypes.object.isRequired,
   isLoyaltyModule: PropTypes.bool.isRequired,
   isTestAndPreviewMode: PropTypes.bool, // Add new prop type

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -94,6 +94,7 @@ const HTMLEditor = forwardRef(({
   injectedTags = {},
   location,
   eventContextTags = [],
+  waitEventContextTags,
   selectedOfferDetails = [],
   channel,
   userLocale = 'en',
@@ -361,7 +362,7 @@ const HTMLEditor = forwardRef(({
     const issueCounts = calculateIssueCounts();
     const isContentEmpty = !currentContent || currentContent.trim() === '';
 
-    // hasErrors = only Rule Group #1 (Input & Sanitization) – gates Done/Update/Preview/Test
+    // hasErrors = only Rule Group #1 (Input & Sanitization) - gates Done/Update/Preview/Test
     const newState = {
       isContentEmpty,
       issueCounts,
@@ -663,6 +664,7 @@ const HTMLEditor = forwardRef(({
               injectedTags={injectedTags}
               location={location}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               selectedOfferDetails={selectedOfferDetails}
               channel={channel}
               userLocale={userLocale}
@@ -734,6 +736,7 @@ const HTMLEditor = forwardRef(({
                   injectedTags={injectedTags}
                   location={location}
                   eventContextTags={eventContextTags}
+                  waitEventContextTags={waitEventContextTags}
                   selectedOfferDetails={selectedOfferDetails}
                   channel={channel}
                   userLocale={userLocale}
@@ -772,6 +775,7 @@ HTMLEditor.propTypes = {
   injectedTags: PropTypes.object,
   location: PropTypes.object,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   channel: PropTypes.string,
   userLocale: PropTypes.string,
@@ -805,6 +809,7 @@ HTMLEditor.defaultProps = {
   injectedTags: {},
   location: null,
   eventContextTags: [],
+  waitEventContextTags: {},
   selectedOfferDetails: [],
   channel: null,
   userLocale: 'en',

package/v2Components/HtmlEditor/__tests__/HTMLEditor.apiErrors.test.js

@@ -225,6 +225,7 @@ const defaultProps = {
   injectedTags: {},
   location: { query: {} },
   eventContextTags: [],
+  waitEventContextTags: {},
   selectedOfferDetails: [],
   channel: 'EMAIL',
   userLocale: 'en',