@capillarytech/creatives-library 8.0.318 → 8.0.320

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)) {
@@ -238,6 +245,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>
@@ -296,7 +321,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);
@@ -3245,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/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,
 } from 'redux-saga/effects';
 import {
   searchCustomersSaga,
@@ -1333,7 +1333,7 @@ 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)
+        takeEvery('app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED', getSenderDetailsSaga)
       );
       expect(generator.next().done).toBe(true);
     });

package/v2Components/FormBuilder/index.js

@@ -3658,6 +3658,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     channel={channel}
                     eventContextTags={this.props?.eventContextTags}
                     restrictPersonalization={this.props.restrictPersonalization}
+                    getPopupContainer={this.props.tagListGetPopupContainer}
+                    popoverOverlayStyle={this.props.tagListPopoverOverlayStyle}
+                    popoverOverlayClassName={this.props.tagListPopoverOverlayClassName}
                   />
                 </CapColumn>
               );
@@ -4348,12 +4351,15 @@ 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,
   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({

package/v2Components/SmsFallback/SmsFallbackLocalSelector.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CreativesContainer from '../../v2Containers/CreativesContainer';
+import CapPageSpinner from '../CapPageSpinner';
+import {
+  EMBEDDED_SMS_CREATIVES_LOCATION,
+  SMS_FALLBACK_CHANNEL_KEY,
+  SMS_FALLBACK_CREATIVE_EDITOR,
+  SMS_FALLBACK_ENABLE_NEW_CHANNELS,
+} from './constants';
+
+/**
+ * Reuse the exact embedded CreativesContainer SMS flow (same as normal SMS create).
+ * Avoid overriding Templates with local config so "Create new" follows built-in createTemplate path.
+ */
+export function SmsFallbackLocalSelector({
+  hidden,
+  fetchDetailsLoading,
+  templateList,
+  channelsToHide,
+  smsRegister,
+  onCloseCreatives,
+  onSelectTemplate,
+  filterContent,
+  location,
+  /** Required when user completes embedded SMS create/edit — `CreativesContainer` calls this on save (see `processCentralCommsMetaId`). */
+  getCreativesData,
+}) {
+  const rootClassName = [
+    'sms-fallback-selector',
+    hidden ? 'sms-fallback-selector--visually-hidden' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={rootClassName}>
+      {fetchDetailsLoading && (
+        <div className="sms-fallback-selector__loading" aria-busy="true" aria-live="polite">
+          <CapPageSpinner spinning />
+        </div>
+      )}
+      <CreativesContainer
+        creativesMode="create"
+        location={location || EMBEDDED_SMS_CREATIVES_LOCATION}
+        templateData={null}
+        handleCloseCreatives={onCloseCreatives}
+        isFullMode={false}
+        smsRegister={smsRegister}
+        editor={SMS_FALLBACK_CREATIVE_EDITOR}
+        enableNewChannels={SMS_FALLBACK_ENABLE_NEW_CHANNELS}
+        channel={SMS_FALLBACK_CHANNEL_KEY}
+        channelsToHide={channelsToHide}
+        selectedBadges={[]}
+        localTemplatesConfig={{
+          useLocalTemplates: true,
+          localTemplates: templateList.templates,
+          localTemplatesLoading: templateList.loading,
+          localTemplatesFilterContent: filterContent,
+          localTemplatesOnPageChange: templateList.loadMore,
+          localTemplatesUseSkeleton: true,
+        }}
+        onSelectTemplate={onSelectTemplate}
+        getCreativesData={getCreativesData}
+      />
+    </div>
+  );
+}
+
+SmsFallbackLocalSelector.propTypes = {
+  hidden: PropTypes.bool,
+  fetchDetailsLoading: PropTypes.bool,
+  templateList: PropTypes.shape({
+    templates: PropTypes.array,
+    loading: PropTypes.bool,
+    loadMore: PropTypes.func,
+  }).isRequired,
+  channelsToHide: PropTypes.arrayOf(PropTypes.string),
+  smsRegister: PropTypes.any,
+  onCloseCreatives: PropTypes.func.isRequired,
+  onSelectTemplate: PropTypes.func.isRequired,
+  filterContent: PropTypes.node,
+  location: PropTypes.object,
+  getCreativesData: PropTypes.func.isRequired,
+};
+
+export default SmsFallbackLocalSelector;

package/v2Components/SmsFallback/constants.js

@@ -0,0 +1,73 @@
+import {
+  WHATSAPP,
+  RCS,
+  ZALO,
+  WEBPUSH,
+} from '../../v2Containers/CreativesContainer/constants';
+
+/**
+ * View modes for the SMS fallback slidebox (template list, create, edit).
+ * Used by SmsFallback and any channel that reuses it (RCS, etc.).
+ */
+export const SMS_FALLBACK_VIEW = {
+  SELECTING: 'selecting',
+  CREATING: 'creating',
+  EDITING: 'editing',
+};
+
+/**
+ * Channel keys to hide in TemplatesV2 so only SMS tab is shown.
+ * Uses normalized keys matching TemplatesV2 pane.key normalization (lowercase).
+ * Parent can override via channelsToHide prop.
+ */
+export const CHANNELS_TO_HIDE_FOR_SMS_ONLY = [
+  'email',
+  'mobilepush',
+  'webpush',
+  'viber',
+  'whatsapp',
+  'zalo',
+  'facebook',
+  'rcs',
+  'inapp',
+  'line',
+  'wechat',
+  'call_task',
+  'ftp',
+  'assets',
+];
+
+/** DLT category filter values — aligned with Templates `SMS_FILTERS` / `filterSMSTemplates`. */
+export const SMS_CATEGORY_FILTERS = {
+  ALL: 'all',
+  PROMOTIONAL: 'promo',
+  SERVICE_EXPLICIT: 'explicit',
+  SERVICE_IMPLICIT: 'implicit',
+};
+
+/** `location` for embedded SMS creatives picker (CreativesContainer / TemplatesV2). */
+export const EMBEDDED_SMS_CREATIVES_LOCATION = {
+  pathname: '/sms/create',
+  query: { type: 'embedded', module: 'library' },
+  search: '',
+};
+
+/** `location` for embedded SMS TRAI edit inside slidebox. */
+export const EMBEDDED_SMS_CREATIVES_EDIT_LOCATION = {
+  pathname: '/sms/edit',
+  query: { type: 'embedded', module: 'library' },
+  search: '',
+};
+
+/** API `channel` param for `getTemplateDetails` when loading an SMS template by id. */
+export const SMS_TEMPLATE_DETAILS_API_CHANNEL = 'Sms';
+
+export const SMS_FALLBACK_CREATIVE_EDITOR = 'BEE';
+
+export const SMS_FALLBACK_CHANNEL_KEY = 'sms';
+
+/** Route shape passed to SmsWrapper / SmsTraiEdit for embedded SMS flows. */
+export const SMS_FALLBACK_ROUTE = { name: SMS_FALLBACK_CHANNEL_KEY };
+
+/** Channels enabled in the SMS-only embedded picker (hide others via `channelsToHide`). */
+export const SMS_FALLBACK_ENABLE_NEW_CHANNELS = [WHATSAPP, RCS, ZALO, WEBPUSH];