@capillarytech/creatives-library 8.0.353-alpha.5 → 8.0.353-alpha.6

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');
     },
   };
@@ -191,6 +196,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)) {
@@ -245,6 +252,24 @@ describe('CommonTestAndPreview', () => {
       });
     });
 
+    it('should call getSenderDetailsRequested for RCS and SMS when channel is RCS', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.RCS} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(mockActions.getSenderDetailsRequested).toHaveBeenCalledWith({
+          channel: CHANNELS.RCS,
+          orgUnitId: -1,
+        });
+        expect(mockActions.getSenderDetailsRequested).toHaveBeenCalledWith({
+          channel: CHANNELS.SMS,
+          orgUnitId: -1,
+        });
+      });
+    });
+
     it('should not call getSenderDetailsRequested when channel is INAPP', async () => {
       render(
         <TestWrapper>
@@ -303,7 +328,7 @@ describe('CommonTestAndPreview', () => {
       });
       expect(lastSendTestMessageProps).toBeDefined();
       expect(lastSendTestMessageProps.deliverySettings).toBeDefined();
-      expect(lastSendTestMessageProps.senderDetailsOptions).toEqual(senderDetailsByChannel[CHANNELS.SMS]);
+      expect(lastSendTestMessageProps.senderDetailsByChannel).toEqual(senderDetailsByChannel);
       expect(lastSendTestMessageProps.wecrmAccounts).toEqual([]);
       expect(typeof lastSendTestMessageProps.onSaveDeliverySettings).toBe('function');
       expect(lastSendTestMessageProps.isLoadingSenderDetails).toBe(false);
@@ -1174,50 +1199,6 @@ describe('CommonTestAndPreview', () => {
         expect(screen.getByTestId('preview-section')).toBeTruthy();
       });
     });
-
-    it('should handle WEBPUSH channel', async () => {
-      const webpushContent = {
-        content: { title: 'Web Push', message: 'Hello from web push' },
-        accountId: 'acc-001',
-      };
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        content: webpushContent,
-      };
-
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview {...props} />
-        </TestWrapper>
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTestId('left-panel')).toBeTruthy();
-        expect(screen.getByTestId('preview-section')).toBeTruthy();
-      });
-    });
-
-    it('should treat WEBPUSH content as object (same branch as WHATSAPP)', async () => {
-      // The WEBPUSH channel uses the same contentObj branch as WHATSAPP (JSON string or object)
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        content: JSON.stringify({
-          content: { title: 'Stringified', message: 'Content' },
-        }),
-      };
-
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview {...props} />
-        </TestWrapper>
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTestId('preview-section')).toBeTruthy();
-      });
-    });
   });
 
   describe('Device Initialization', () => {
@@ -2673,156 +2654,6 @@ describe('CommonTestAndPreview', () => {
         });
       });
     });
-
-    describe('preparePreviewPayload - WEBPUSH', () => {
-      it('should build WEBPUSH payload with title and message', async () => {
-        const webpushContent = {
-          content: {
-            title: 'Push Title',
-            message: 'Push message body',
-          },
-          accountId: 'acc-123',
-          messageSubject: 'Push Title',
-        };
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: JSON.stringify(webpushContent),
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('left-panel')).toBeTruthy();
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH content with iconImageUrl', async () => {
-        const webpushContent = {
-          content: {
-            title: 'Hello',
-            message: 'World',
-            iconImageUrl: 'https://example.com/icon.png',
-          },
-          accountId: 'acc-123',
-        };
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: webpushContent,
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH content with cta', async () => {
-        const webpushContent = {
-          content: {
-            title: 'Hello',
-            message: 'World',
-            cta: { type: 'EXTERNAL_URL', actionLink: 'https://example.com' },
-          },
-          accountId: 'acc-123',
-        };
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: webpushContent,
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH content with expandableDetails', async () => {
-        const webpushContent = {
-          content: {
-            title: 'Hello',
-            message: 'World',
-            expandableDetails: {
-              media: [{ url: 'https://example.com/image.jpg', type: 'IMAGE' }],
-              ctas: [{ title: 'Click', actionLink: 'https://example.com', type: 'EXTERNAL_URL' }],
-            },
-          },
-          accountId: 'acc-123',
-        };
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: webpushContent,
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH with null formData gracefully', async () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          formData: null,
-          content: null,
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH channel with object content (non-string)', async () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: {
-            content: { title: 'ObjTitle', message: 'ObjMessage' },
-            accountId: 'acc-999',
-          },
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-    });
   });
 
   describe('Tag Extraction', () => {
@@ -3475,4 +3306,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/CommonTestAndPreview/tests/previewApiUtils.test.js

@@ -0,0 +1,67 @@
+import {
+  normalizePreviewApiPayload,
+  extractPreviewFromLiquidResponse,
+  getSmsFallbackTextForTagExtraction,
+} from '../previewApiUtils';
+import { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../constants';
+
+describe('previewApiUtils', () => {
+  describe('normalizePreviewApiPayload', () => {
+    it('maps messageBody to resolvedBody when resolvedBody is missing', () => {
+      expect(normalizePreviewApiPayload({ messageBody: 'Hello' }).resolvedBody).toBe('Hello');
+    });
+  });
+
+  describe('extractPreviewFromLiquidResponse', () => {
+    it('accepts nested data shape', () => {
+      const r = { data: { resolvedBody: 'ok' } };
+      expect(extractPreviewFromLiquidResponse(r)).toEqual({ resolvedBody: 'ok' });
+    });
+
+    it('accepts top-level preview (typical SMS)', () => {
+      const r = { messageBody: 'sms text' };
+      expect(extractPreviewFromLiquidResponse(r)).toMatchObject({
+        messageBody: 'sms text',
+        resolvedBody: 'sms text',
+      });
+    });
+
+    it('returns null when errors array is non-empty', () => {
+      expect(extractPreviewFromLiquidResponse({ errors: [{ code: 1 }] })).toBeNull();
+    });
+  });
+
+  describe('getSmsFallbackTextForTagExtraction', () => {
+    it('returns empty string when context is missing or has no template body', () => {
+      expect(getSmsFallbackTextForTagExtraction(null)).toBe('');
+      expect(getSmsFallbackTextForTagExtraction({})).toBe('');
+      expect(getSmsFallbackTextForTagExtraction({ templateContent: '', content: '' })).toBe('');
+    });
+
+    it('returns raw template when rcsSmsFallbackVarMapped is absent or empty', () => {
+      const raw = '{{optout}} {{fullname}} test SMS';
+      expect(getSmsFallbackTextForTagExtraction({ templateContent: raw })).toBe(raw);
+      expect(getSmsFallbackTextForTagExtraction({
+        content: raw,
+        [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: {},
+      })).toBe(raw);
+    });
+
+    it('prefers templateContent over content when both are set', () => {
+      expect(getSmsFallbackTextForTagExtraction({
+        templateContent: 'A',
+        content: 'B',
+      })).toBe('A');
+    });
+
+    it('applies VarSegment slot map so preview / meta payloads are not stale vs raw template', () => {
+      const rawTemplateWithSlots = '{{optout}} tail';
+      const rcsSmsFallbackVarMappedSlots = { '{{optout}}_0': 'STOP' };
+      const resolvedFallbackText = getSmsFallbackTextForTagExtraction({
+        templateContent: rawTemplateWithSlots,
+        [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: rcsSmsFallbackVarMappedSlots,
+      });
+      expect(resolvedFallbackText).toBe('STOP tail');
+    });
+  });
+});

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

@@ -5,7 +5,7 @@
  */
 
 import {
-  call, put, takeLatest, all,
+  call, put, takeLatest, takeEvery, all, take, fork, cancel,
 } from 'redux-saga/effects';
 import {
   searchCustomersSaga,
@@ -1333,9 +1333,26 @@ describe('CommonTestAndPreview Sagas', () => {
     it('should watch for GET_SENDER_DETAILS_REQUESTED', () => {
       const generator = watchGetSenderDetails();
       expect(generator.next().value).toEqual(
-        takeLatest('app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED', getSenderDetailsSaga)
+        take('app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED')
+      );
+      const firstAction = {
+        payload: { channel: 'RCS', orgUnitId: 10 },
+      };
+      expect(generator.next(firstAction).value).toEqual(
+        fork(getSenderDetailsSaga, firstAction)
+      );
+      expect(generator.next({ '@@redux-saga/TASK': true }).value).toEqual(
+        take('app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED')
+      );
+      const secondAction = {
+        payload: { channel: 'RCS', orgUnitId: 20 },
+      };
+      expect(generator.next(secondAction).value).toEqual(
+        cancel({ '@@redux-saga/TASK': true })
+      );
+      expect(generator.next().value).toEqual(
+        fork(getSenderDetailsSaga, secondAction)
       );
-      expect(generator.next().done).toBe(true);
     });
 
     it('should watch for GET_WECRM_ACCOUNTS_REQUESTED', () => {
@@ -1454,34 +1471,27 @@ describe('CommonTestAndPreview Sagas', () => {
       const action = { payload: {} };
       const generator = getWeCrmAccountsSaga(action);
       generator.next();
-      const err = generator.throw(new Error('API failed'));
-      expect(err.value).toEqual(
-        put({ type: GET_WECRM_ACCOUNTS_FAILURE, payload: { error: 'API failed' } })
-      );
+      try {
+        generator.throw(new Error('API failed'));
+      } catch (errValue) {
+        expect(errValue).toEqual(
+          put({ type: GET_WECRM_ACCOUNTS_FAILURE, payload: { error: 'API failed' } })
+        );
+      }
       expect(generator.next().done).toBe(true);
     });
   });
 
-  describe('commonTestAndPreviewSaga', () => {
-    it('should fork all watcher sagas', () => {
-      const generator = commonTestAndPreviewSaga();
+  it('should initialize all watcher sagas', () => {
+    const generator = commonTestAndPreviewSaga();
 
-      expect(generator.next().value).toEqual(
-        all([
-          watchSearchCustomers(),
-          watchExtractTags(),
-          watchUpdatePreview(),
-          watchSendTestMessage(),
-          watchFetchTestCustomers(),
-          watchFetchTestGroups(),
-          watchCreateMessageMeta(),
-          watchGetPrefilledValues(),
-          watchGetSenderDetails(),
-          watchGetWeCrmAccounts(),
-        ])
-      );
+    const effect = generator.next().value;
 
-      expect(generator.next().done).toBe(true);
-    });
+    // redux-saga v0.x stores the array under effect[ALL] key; v1.x uses effect.payload
+    const effectData = effect?.payload || effect?.ALL;
+    const watchers = Array.isArray(effectData) ? effectData : Object.values(effectData || {});
+    expect(Array.isArray(watchers)).toBe(true);
+    expect(watchers.length).toBeGreaterThan(0);
+    expect(generator.next().done).toBe(true);
   });
 });

package/v2Components/FormBuilder/index.js

@@ -37,6 +37,7 @@ import { createStructuredSelector } from 'reselect';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import UnifiedPreview from '../CommonTestAndPreview/UnifiedPreview';
 import { ANDROID } from '../CommonTestAndPreview/constants';
+import TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
 import CapTagListWithInput from '../CapTagListWithInput';
 import SlideBox from '../SlideBox';
@@ -2989,8 +2990,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 userLocale={this.props.userLocale}
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 eventContextTags={this.props?.eventContextTags}
-                restrictPersonalization={this.props.restrictPersonalization}
                 waitEventContextTags={this.props?.waitEventContextTags}
+                restrictPersonalization={this.props.restrictPersonalization}
               />
             </CapColumn>
           );
@@ -3659,8 +3660,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     selectedOfferDetails={this.props.selectedOfferDetails}
                     channel={channel}
                     eventContextTags={this.props?.eventContextTags}
-                    restrictPersonalization={this.props.restrictPersonalization}
                     waitEventContextTags={this.props?.waitEventContextTags}
+                    restrictPersonalization={this.props.restrictPersonalization}
+                    getPopupContainer={this.props.tagListGetPopupContainer}
+                    popoverOverlayStyle={this.props.tagListPopoverOverlayStyle}
+                    popoverOverlayClassName={this.props.tagListPopoverOverlayClassName}
                   />
                 </CapColumn>
               );
@@ -4003,8 +4007,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   moduleFilterEnabled={isModuleFilterEnabled}
                   eventContextTags={this.props?.eventContextTags}
                   waitEventContextTags={this.props?.waitEventContextTags}
-                  isGetBeeData={this.props?.isGetBeeData}
-                  getBEEData={this.props?.getBEEData}
                 />
               </CapColumn>
             );
@@ -4307,8 +4309,8 @@ FormBuilder.defaultProps = {
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
   metaDataStatus: "",
-  waitEventContextTags: {},
   isTestAndPreviewMode: false, // Default to false to maintain existing behavior
+  waitEventContextTags: {},
 };
 
 FormBuilder.propTypes = {
@@ -4356,13 +4358,16 @@ FormBuilder.propTypes = {
   type: PropTypes.string.isRequired,
   isEmailLoading: PropTypes.bool.isRequired,
   moduleType: PropTypes.string.isRequired,
-  showLiquidErrorInFooter: PropTypes.bool.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
   restrictPersonalization: PropTypes.bool,
+  tagListGetPopupContainer: PropTypes.func,
+  tagListPopoverOverlayStyle: PropTypes.object,
+  tagListPopoverOverlayClassName: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({