cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/Sms/Edit/index.js

@@ -52,6 +52,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       modalContent: {title: "Alert", body: "Do you really want to delete this version?", type: 'confirm', id: 'sms-version-modal'},
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false,
+      pendingGetFormData: false,
     };
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
@@ -134,8 +135,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      nextProps.getFormSubscriptionData(this.getFormData());
+    if (!nextProps.isFullMode && nextProps.isGetFormData && !this.props.isGetFormData) {
+      this.setState({ startValidation: true, pendingGetFormData: true });
     }
     if ( nextProps.location.query.module === 'library' && nextProps.subscriptionTemplateDetails && nextProps.subscriptionTemplateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
       this.setEditState(nextProps.subscriptionTemplateDetails);
@@ -189,6 +190,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillUnmount() {
+    if (this.pendingGetFormDataTimeout) {
+      clearTimeout(this.pendingGetFormDataTimeout);
+    }
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
@@ -214,6 +218,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (currentTab) {
       this.setState({currentTab});
     }
+    // Clear footer validation errors on input change so they refresh on next validation
+    if (this.props.showLiquidErrorInFooter) {
+      this.props.showLiquidErrorInFooter({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
+    }
   }
 
   onVersionNameChange() {
@@ -317,7 +325,23 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({isFormValid, errorData});
+    this.setState({ isFormValid, errorData }, () => {
+      if (this.state.pendingGetFormData && !isFormValid) {
+        this.setState({ pendingGetFormData: false, startValidation: false });
+        if (this.props.onValidationFail) {
+          this.props.onValidationFail();
+        }
+        return;
+      }
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData && this.props.isFullMode) {
+        if (this.pendingGetFormDataTimeout) {
+          clearTimeout(this.pendingGetFormDataTimeout);
+          this.pendingGetFormDataTimeout = null;
+        }
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
+    });
   }
 
   getFormData(e, value) {
@@ -923,6 +947,14 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({startValidation: false});
   }
   saveFormData() {
+    // In library mode: FormBuilder calls onSubmit only after liquid validation succeeds.
+    if (!this.props.isFullMode) {
+      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
+        this.props.getFormSubscriptionData(this.getFormData());
+        this.setState({ pendingGetFormData: false, startValidation: false });
+      }
+      return;
+    }
     //Logic to save in db etc
     //saveFormData gets called only when validation result is true
 
@@ -1059,6 +1091,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 onTestContentClicked={this.props.onTestContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
@@ -1099,6 +1132,7 @@ Edit.propTypes = {
   injectedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   messageDetails: PropTypes.object,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,

package/app/v2Containers/Sms/commonMethods.js

@@ -1,17 +1,14 @@
 import isEmpty from 'lodash/isEmpty';
-import { CapNotification } from '@capillarytech/cap-ui-library';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import messages from './Create/messages';
 export function showError() {
   const {intl} = this.props;
   const {errorData} = this.state;
   const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
   if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
-    const isSmsInvalid = Object.values(errorData[0]).includes(true);
+    const err0 = errorData[0] || {};
+    const isSmsInvalid = Object.values(err0).includes(true);
     if (isSmsInvalid) {
-      const invalidTags = errorData[0]['invalid-tags'];
-      if (!isEmpty(invalidTags)) {
-        errorMessage.description = `${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-      }
       CapNotification.error(errorMessage);
     }
   }

package/app/v2Containers/Sms/smsFormDataHelpers.js

@@ -0,0 +1,67 @@
+/**
+ * Shared SMS FormBuilder formData helpers for Sms/Create (and any embedded host).
+ */
+
+/**
+ * @param {object} formData FormBuilder state (same shape as Sms/Create `this.state.formData`)
+ * @param {number} currentTab 1-based tab index
+ * @returns {string} Raw message body or ''
+ */
+export function getSmsMessageFromFormData(formData, currentTab) {
+  if (formData == null || typeof formData !== 'object') {
+    return '';
+  }
+  const tab = currentTab != null && currentTab > 0 ? currentTab : 1;
+  const currentTabData = formData[tab - 1];
+  if (currentTabData && typeof currentTabData === 'object') {
+    const versionedKey = tab > 1 ? `sms-editor${tab}` : 'sms-editor';
+    if (Object.prototype.hasOwnProperty.call(currentTabData, versionedKey)) {
+      const v = currentTabData[versionedKey];
+      // Key exists — commit to this version's value rather than falling through to base.
+      // Treat null/undefined as empty so a cleared version correctly reports as empty.
+      return (v != null && v !== '') ? String(v) : '';
+    }
+    if (currentTabData['sms-editor'] != null) {
+      return String(currentTabData['sms-editor']);
+    }
+    const activeTab = currentTabData.activeTab || 'base';
+    if (currentTabData[activeTab]?.['sms-editor'] != null) {
+      return String(currentTabData[activeTab]['sms-editor']);
+    }
+    if (currentTabData.base?.['sms-editor'] != null) {
+      return String(currentTabData.base['sms-editor']);
+    }
+  }
+  const rootBase = formData.base;
+  if (rootBase && typeof rootBase === 'object' && rootBase['sms-editor'] != null) {
+    return String(rootBase['sms-editor']);
+  }
+  return '';
+}
+
+/**
+ * @param {number} [tabCount] Total number of versions/tabs. When >1 all versions are checked.
+ * @returns {{ isTemplateNameEmpty: boolean, isMessageEmpty: boolean }}
+ */
+export function getSmsEmbeddedFooterValidity(formData, tabCount) {
+  const rawName = formData?.['template-name'];
+  const name = rawName != null && rawName !== '' ? String(rawName).trim() : '';
+
+  // Check ALL versions: if any version's message is empty, Done should be disabled.
+  // With a single version this is equivalent to the previous single-tab check.
+  const count = tabCount != null && tabCount > 1 ? tabCount : 1;
+  let isMessageEmpty = false;
+  for (let i = 1; i <= count; i++) {
+    const content = getSmsMessageFromFormData(formData, i);
+    const msg = content != null && content !== '' ? String(content).trim() : '';
+    if (!msg) {
+      isMessageEmpty = true;
+      break;
+    }
+  }
+
+  return {
+    isTemplateNameEmpty: !name,
+    isMessageEmpty,
+  };
+}

package/app/v2Containers/Sms/tests/commonMethods.test.js

@@ -0,0 +1,122 @@
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import { showError } from '../commonMethods';
+
+jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
+  error: jest.fn(),
+}));
+
+jest.mock('../Create/messages', () => ({
+  __esModule: true,
+  default: {
+    validationError: { defaultMessage: 'Validation error' },
+  },
+}));
+
+describe('Sms commonMethods', () => {
+  describe('showError', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call CapNotification.error when formData is not empty, isFormValid is false, and errorData has at least one true value', () => {
+      const context = {
+        props: {
+          intl: { formatMessage: jest.fn((msg) => msg.defaultMessage || 'Validation error') },
+        },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: false,
+          errorData: [{ message: true }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).toHaveBeenCalledWith({
+        key: 'validation-error',
+        message: 'Validation error',
+      });
+    });
+
+    it('should not call CapNotification.error when formData is empty', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: {},
+          isFormValid: false,
+          errorData: [{ message: true }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should not call CapNotification.error when isFormValid is true', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: true,
+          errorData: [{ message: true }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should not call CapNotification.error when no errorData entry has a true value', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: false,
+          errorData: [{ message: false, title: false }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should not call CapNotification.error when errorData is empty', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: false,
+          errorData: [],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should not call CapNotification.error when errorData[0] is undefined', () => {
+      const context = {
+        props: { intl: { formatMessage: jest.fn() } },
+        state: {
+          formData: { message: 'test' },
+          isFormValid: false,
+          errorData: [],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).not.toHaveBeenCalled();
+    });
+
+    it('should call CapNotification.error when errorData[0] has multiple keys and one is true', () => {
+      const context = {
+        props: {
+          intl: { formatMessage: jest.fn((msg) => msg.defaultMessage || 'Validation error') },
+        },
+        state: {
+          formData: { message: 'hello' },
+          isFormValid: false,
+          errorData: [{ message: false, title: true }],
+        },
+      };
+      showError.call(context);
+      expect(CapNotification.error).toHaveBeenCalledWith({
+        key: 'validation-error',
+        message: 'Validation error',
+      });
+    });
+  });
+});

package/app/v2Containers/Sms/tests/smsFormDataHelpers.test.js

@@ -0,0 +1,253 @@
+import {
+  getSmsMessageFromFormData,
+  getSmsEmbeddedFooterValidity,
+} from '../smsFormDataHelpers';
+
+// ---------------------------------------------------------------------------
+// getSmsMessageFromFormData
+// ---------------------------------------------------------------------------
+
+describe('getSmsMessageFromFormData', () => {
+  describe('null / invalid formData guard', () => {
+    it('returns empty string when formData is null', () => {
+      expect(getSmsMessageFromFormData(null, 1)).toBe('');
+    });
+
+    it('returns empty string when formData is undefined', () => {
+      expect(getSmsMessageFromFormData(undefined, 1)).toBe('');
+    });
+
+    it('returns empty string when formData is a string (not an object)', () => {
+      expect(getSmsMessageFromFormData('bad', 1)).toBe('');
+    });
+
+    it('returns empty string when formData is a number', () => {
+      expect(getSmsMessageFromFormData(42, 1)).toBe('');
+    });
+  });
+
+  describe('currentTab normalisation', () => {
+    it('defaults to tab 1 when currentTab is null', () => {
+      const formData = { 0: { 'sms-editor': 'hello' } };
+      expect(getSmsMessageFromFormData(formData, null)).toBe('hello');
+    });
+
+    it('defaults to tab 1 when currentTab is undefined', () => {
+      const formData = { 0: { 'sms-editor': 'hello' } };
+      expect(getSmsMessageFromFormData(formData, undefined)).toBe('hello');
+    });
+
+    it('defaults to tab 1 when currentTab is 0', () => {
+      const formData = { 0: { 'sms-editor': 'hello' } };
+      expect(getSmsMessageFromFormData(formData, 0)).toBe('hello');
+    });
+
+    it('defaults to tab 1 when currentTab is negative', () => {
+      const formData = { 0: { 'sms-editor': 'hello' } };
+      expect(getSmsMessageFromFormData(formData, -5)).toBe('hello');
+    });
+  });
+
+  describe('versioned key lookup', () => {
+    it('uses "sms-editor" key for tab 1', () => {
+      const formData = { 0: { 'sms-editor': 'tab1 msg' } };
+      expect(getSmsMessageFromFormData(formData, 1)).toBe('tab1 msg');
+    });
+
+    it('uses "sms-editor2" versioned key for tab 2', () => {
+      const formData = { 1: { 'sms-editor2': 'tab2 msg', 'sms-editor': 'fallback' } };
+      expect(getSmsMessageFromFormData(formData, 2)).toBe('tab2 msg');
+    });
+
+    it('uses "sms-editor3" versioned key for tab 3', () => {
+      const formData = { 2: { 'sms-editor3': 'tab3 msg' } };
+      expect(getSmsMessageFromFormData(formData, 3)).toBe('tab3 msg');
+    });
+
+    it('returns empty string when versioned key exists but is null (cleared version)', () => {
+      const formData = { 1: { 'sms-editor2': null } };
+      expect(getSmsMessageFromFormData(formData, 2)).toBe('');
+    });
+
+    it('returns empty string when versioned key exists but is empty string', () => {
+      const formData = { 1: { 'sms-editor2': '' } };
+      expect(getSmsMessageFromFormData(formData, 2)).toBe('');
+    });
+
+    it('coerces a numeric value in versioned key to string', () => {
+      const formData = { 1: { 'sms-editor2': 12345 } };
+      expect(getSmsMessageFromFormData(formData, 2)).toBe('12345');
+    });
+  });
+
+  describe('"sms-editor" flat key fallback (versioned key absent)', () => {
+    it('falls back to "sms-editor" when versioned key is absent for tab 2', () => {
+      const formData = { 1: { 'sms-editor': 'flat fallback' } };
+      expect(getSmsMessageFromFormData(formData, 2)).toBe('flat fallback');
+    });
+  });
+
+  describe('activeTab nested fallback', () => {
+    it('falls back to activeTab["sms-editor"] when neither versioned key nor flat "sms-editor" is present', () => {
+      // The versioned key must be absent entirely for the activeTab fallback to be reached.
+      // (If 'sms-editor' exists but is null, the function commits to '' without falling through.)
+      const formData = {
+        0: {
+          activeTab: 'variant1',
+          variant1: { 'sms-editor': 'variant msg' },
+        },
+      };
+      expect(getSmsMessageFromFormData(formData, 1)).toBe('variant msg');
+    });
+
+    it('falls back to base["sms-editor"] when activeTab entry lacks "sms-editor" and flat key is absent', () => {
+      const formData = {
+        0: {
+          activeTab: 'variant1',
+          variant1: {},
+          base: { 'sms-editor': 'base msg' },
+        },
+      };
+      expect(getSmsMessageFromFormData(formData, 1)).toBe('base msg');
+    });
+
+    it('defaults activeTab to "base" when activeTab prop is not set and flat key is absent', () => {
+      const formData = {
+        0: {
+          base: { 'sms-editor': 'default base msg' },
+        },
+      };
+      expect(getSmsMessageFromFormData(formData, 1)).toBe('default base msg');
+    });
+  });
+
+  describe('root formData.base fallback', () => {
+    it('falls back to formData.base["sms-editor"] when tab slot is missing', () => {
+      const formData = {
+        base: { 'sms-editor': 'root base msg' },
+      };
+      expect(getSmsMessageFromFormData(formData, 1)).toBe('root base msg');
+    });
+
+    it('returns empty string when even root base has no "sms-editor"', () => {
+      const formData = { base: {} };
+      expect(getSmsMessageFromFormData(formData, 1)).toBe('');
+    });
+
+    it('returns empty string when formData has no relevant keys at all', () => {
+      expect(getSmsMessageFromFormData({}, 1)).toBe('');
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// getSmsEmbeddedFooterValidity
+// ---------------------------------------------------------------------------
+
+describe('getSmsEmbeddedFooterValidity', () => {
+  describe('isTemplateNameEmpty', () => {
+    it('is true when template-name is absent', () => {
+      const formData = { 0: { 'sms-editor': 'msg' } };
+      const { isTemplateNameEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(isTemplateNameEmpty).toBe(true);
+    });
+
+    it('is true when template-name is empty string', () => {
+      const formData = { 'template-name': '', 0: { 'sms-editor': 'msg' } };
+      const { isTemplateNameEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(isTemplateNameEmpty).toBe(true);
+    });
+
+    it('is true when template-name is whitespace only', () => {
+      const formData = { 'template-name': '   ', 0: { 'sms-editor': 'msg' } };
+      const { isTemplateNameEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(isTemplateNameEmpty).toBe(true);
+    });
+
+    it('is false when template-name is a non-empty string', () => {
+      const formData = { 'template-name': 'My Template', 0: { 'sms-editor': 'msg' } };
+      const { isTemplateNameEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(isTemplateNameEmpty).toBe(false);
+    });
+  });
+
+  describe('isMessageEmpty — single tab', () => {
+    it('is true when message is empty string', () => {
+      const formData = { 'template-name': 'T', 0: { 'sms-editor': '' } };
+      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(isMessageEmpty).toBe(true);
+    });
+
+    it('is true when message is whitespace only', () => {
+      const formData = { 'template-name': 'T', 0: { 'sms-editor': '   ' } };
+      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(isMessageEmpty).toBe(true);
+    });
+
+    it('is true when no sms-editor key at all', () => {
+      const formData = { 'template-name': 'T', 0: {} };
+      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(isMessageEmpty).toBe(true);
+    });
+
+    it('is false when message is non-empty', () => {
+      const formData = { 'template-name': 'T', 0: { 'sms-editor': 'Hello world' } };
+      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(isMessageEmpty).toBe(false);
+    });
+  });
+
+  describe('isMessageEmpty — multiple tabs', () => {
+    it('is false when all tabs have non-empty messages', () => {
+      const formData = {
+        'template-name': 'T',
+        0: { 'sms-editor': 'Tab 1 message' },
+        1: { 'sms-editor2': 'Tab 2 message' },
+        2: { 'sms-editor3': 'Tab 3 message' },
+      };
+      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 3);
+      expect(isMessageEmpty).toBe(false);
+    });
+
+    it('is true when the second tab has an empty message', () => {
+      const formData = {
+        'template-name': 'T',
+        0: { 'sms-editor': 'Tab 1 message' },
+        1: { 'sms-editor2': '' },
+      };
+      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 2);
+      expect(isMessageEmpty).toBe(true);
+    });
+
+    it('is true when the third tab has no message', () => {
+      const formData = {
+        'template-name': 'T',
+        0: { 'sms-editor': 'msg1' },
+        1: { 'sms-editor2': 'msg2' },
+        2: {},
+      };
+      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData, 3);
+      expect(isMessageEmpty).toBe(true);
+    });
+
+    it('treats tabCount=1 as single-tab check even when not explicitly provided', () => {
+      const formData = { 'template-name': 'T', 0: { 'sms-editor': 'msg' } };
+      const { isMessageEmpty } = getSmsEmbeddedFooterValidity(formData);
+      expect(isMessageEmpty).toBe(false);
+    });
+  });
+
+  describe('both fields together', () => {
+    it('returns both empty when template name absent and message empty', () => {
+      const formData = { 0: { 'sms-editor': '' } };
+      const result = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(result).toEqual({ isTemplateNameEmpty: true, isMessageEmpty: true });
+    });
+
+    it('returns both non-empty when template name and message are present', () => {
+      const formData = { 'template-name': 'My Template', 0: { 'sms-editor': 'Hello!' } };
+      const result = getSmsEmbeddedFooterValidity(formData, 1);
+      expect(result).toEqual({ isTemplateNameEmpty: false, isMessageEmpty: false });
+    });
+  });
+});

package/app/v2Containers/SmsTrai/Create/index.js

@@ -70,6 +70,7 @@ export const SmsTraiCreate = (props) => {
     onCreateComplete,
     isFullMode,
     onShowTemplates,
+    embeddedSmsFallback,
     traiSms: {
       duplicateDetails = {},
       duplicateDetailsError = '',
@@ -659,9 +660,11 @@ export const SmsTraiCreate = (props) => {
 
   const createCallback = ({ errorMessage }) => {
     if (!errorMessage) {
-      CapNotification.success({
-        message: formatMessage(messages.smsCreateNotification),
-      });
+      if (!embeddedSmsFallback) {
+        CapNotification.success({
+          message: formatMessage(messages.smsCreateNotification),
+        });
+      }
       actions.clearCreateResponse();
     } else {
       CapNotification.error({
@@ -741,7 +744,9 @@ export const SmsTraiCreate = (props) => {
       { templates: savedData },
       (resp, errorMessage) => {
         createCallback({ errorMessage });
-        if (isFullMode) {
+        if (embeddedSmsFallback) {
+          if (!errorMessage) onCreateComplete(savedData[0]);
+        } else if (isFullMode) {
           onCreateComplete();
         } else {
           onShowTemplates();

package/app/v2Containers/SmsTrai/Create/index.scss

@@ -98,5 +98,5 @@
 }
 
 .create-dlt-msg {
-  margin-left: 120px;
+  margin-left: 6.25rem;
 }

package/app/v2Containers/SmsTrai/Edit/constants.js

@@ -5,6 +5,8 @@
  */
 
 export const CHARLIMIT = 40;
+/** Display / soft cap label for DLT SMS body length (matches product UI). */
+export const SMS_TRAI_CONTENT_MAX_LENGTH = 1024;
 export const SMS = 'SMS';
 export const SMS_TRAI_VAR = '{#var#}';
 export const TAG = 'TAG';