@capillarytech/creatives-library 8.0.168 → 8.0.170-beta.1

package/v2Components/CapTagListWithInput/index.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import TagList from '../../v2Containers/TagList';
+import messages from './messages';
+
+/**
+ * CapTagListWithInput - A reusable component that combines TagList and CapInput
+ * for external links/URLs that can be used across all channels
+ */
+export const CapTagListWithInput = (props) => {
+  const {
+    intl,
+    // TagList props
+    tags = [],
+    injectedTags = {},
+    location = {},
+    selectedOfferDetails = [],
+    onTagSelect,
+    onContextChange,
+    moduleFilterEnabled = true,
+    className = '',
+    userLocale = 'en',
+    eventContextTags = [],
+    // CapInput props
+    inputId,
+    inputValue = '',
+    inputOnChange,
+    inputPlaceholder,
+    inputErrorMessage = '',
+    inputSize = 'default',
+    inputMaxLength,
+    inputRequired = false,
+    inputDisabled = false,
+    // Layout props
+    headingText,
+    headingType = 'h4',
+    headingStyle = {},
+    containerStyle = {},
+    tagListStyle = {},
+    inputStyle = {},
+    // Custom props
+    showHeading = true,
+    showTagList = true,
+    showInput = true,
+    inputProps = {},
+  } = props;
+
+  const { formatMessage } = intl;
+
+  return (
+    <CapColumn style={containerStyle}>
+      <CapRow style={{display: 'flex', flexDirection: 'row'}}>
+        {showHeading && headingText && (
+          <CapHeading type={headingType} style={headingStyle}>
+            {headingText}
+          </CapHeading>
+        )}
+
+        {showTagList && (
+          <TagList
+            key={`${inputId}_tags`}
+            className={className}
+            moduleFilterEnabled={moduleFilterEnabled}
+            label={formatMessage(messages.addLabels)}
+            onTagSelect={onTagSelect}
+            onContextChange={onContextChange}
+            location={location}
+            tags={tags}
+            injectedTags={injectedTags}
+            userLocale={userLocale}
+            selectedOfferDetails={selectedOfferDetails}
+            eventContextTags={eventContextTags}
+            style={tagListStyle}
+          />
+        )}
+      </CapRow>
+      {showInput && (
+        <CapInput
+          id={inputId}
+          onChange={inputOnChange}
+          placeholder={inputPlaceholder}
+          value={inputValue}
+          size={inputSize}
+          maxLength={inputMaxLength}
+          errorMessage={inputErrorMessage}
+          isRequired={inputRequired}
+          disabled={inputDisabled}
+          style={inputStyle}
+          {...inputProps}
+        />
+      )}
+    </CapColumn>
+  );
+};
+
+CapTagListWithInput.propTypes = {
+  intl: intlShape.isRequired,
+  // TagList props
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  location: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  onTagSelect: PropTypes.func.isRequired,
+  onContextChange: PropTypes.func.isRequired,
+  moduleFilterEnabled: PropTypes.bool,
+  className: PropTypes.string,
+  userLocale: PropTypes.string,
+  eventContextTags: PropTypes.array,
+
+  // CapInput props
+  inputId: PropTypes.string.isRequired,
+  inputValue: PropTypes.string,
+  inputOnChange: PropTypes.func.isRequired,
+  inputPlaceholder: PropTypes.string,
+  inputErrorMessage: PropTypes.string,
+  inputSize: PropTypes.oneOf(['small', 'default', 'large']),
+  inputMaxLength: PropTypes.number,
+  inputRequired: PropTypes.bool,
+  inputDisabled: PropTypes.bool,
+  inputProps: PropTypes.object,
+
+  // Layout props
+  headingText: PropTypes.string,
+  headingType: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  headingStyle: PropTypes.object,
+  containerStyle: PropTypes.object,
+  tagListStyle: PropTypes.object,
+  inputStyle: PropTypes.object,
+
+  // Custom props
+  showHeading: PropTypes.bool,
+  showTagList: PropTypes.bool,
+  showInput: PropTypes.bool,
+};
+
+CapTagListWithInput.defaultProps = {
+  tags: [],
+  injectedTags: {},
+  location: {},
+  selectedOfferDetails: [],
+  moduleFilterEnabled: true,
+  className: '',
+  userLocale: 'en',
+  eventContextTags: [],
+  inputValue: '',
+  inputSize: 'default',
+  inputRequired: false,
+  inputDisabled: false,
+  inputPlaceholder: '',
+  inputErrorMessage: '',
+  inputMaxLength: undefined,
+  headingText: '',
+  headingType: 'h4',
+  headingStyle: {},
+  containerStyle: {},
+  tagListStyle: {},
+  inputStyle: {},
+  showHeading: true,
+  showTagList: true,
+  showInput: true,
+  inputProps: {},
+};
+
+export default injectIntl(CapTagListWithInput);

package/v2Components/CapTagListWithInput/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+const prefix = 'creatives.componentsV2.CapTagListWithInput';
+
+export default defineMessages({
+  addLabels: {
+    id: `${prefix}.addLabels`,
+    defaultMessage: 'Add labels',
+  },
+});

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 TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
+import CapTagListWithInput from '../CapTagListWithInput';
 import SlideBox from '../SlideBox';
 import CardGrid from '../CardGrid';
 import CKEditor from "../Ckeditor/";
@@ -2743,6 +2744,40 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             </CapColumn>
           );
           break;
+        case "cap-tag-list-with-input":
+          ifError = this.state.checkValidation && this.state.errorData[val.id];
+          columns.push(
+            <CapColumn key={`input-${val.id}`} span={val.width || 10} offset={val.offset}>
+              <CapTagListWithInput
+                key={`input-${val.id}`}
+                inputId={val.id}
+                inputValue={this.state.formData[val.id] || ''}
+                inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                inputPlaceholder={val.placeholder || ''}
+                inputErrorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                inputRequired={val.required || false}
+                inputDisabled={val.disabled || false}
+                headingText={val.label || ''}
+                headingStyle={val.headingStyle || { marginTop: '3%', marginRight: '79%' }}
+                headingType="h4"
+                onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+                onContextChange={this.props.onContextChange}
+                location={this.props.location}
+                tags={this.props.tags ? this.props.tags : []}
+                injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                className={val.className ? val.className : ''}
+                userLocale={this.props.userLocale}
+                selectedOfferDetails={this.props.selectedOfferDetails}
+                eventContextTags={this.props?.eventContextTags}
+                moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
+                containerStyle={val.style || {}}
+                inputProps={val.inputProps || {}}
+                showInput={val.showInput !== false}
+                showTagList={val.showTagList !== false}
+              />
+            </CapColumn>
+          );
+          break;
         case "tabs":
           columns.push(
             <CapColumn key="input" span={10}>
@@ -3343,7 +3378,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
             const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
 
-            if (!(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLang}].is_drag_drop`, false)) || isBEEAppEnable === false || channel !== 'EMAIL') {
+            // Always render Subject TagList (title-tagList) even when Bee editor is active for EMAIL channel
+            if (
+              val.id === 'title-tagList' ||
+              !(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLang}].is_drag_drop`, false)) ||
+              isBEEAppEnable === false ||
+              channel !== 'EMAIL'
+            ) {
               columns.push(
                 <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
                   <TagList
@@ -3366,6 +3407,57 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               );
             }
             break;
+          case "cap-tag-list-with-input":
+            let moduleFilterEnabledForCapTagList = this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded';
+            const channelForCapTagList = _.get(this.props, 'schema.channel', "");
+            if (channelForCapTagList === 'EMAIL') {
+              moduleFilterEnabledForCapTagList = this.props.isFullMode;
+            }
+            const langIndexForCapTagList = 0;
+            const currentLangForCapTagList = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndexForCapTagList]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndexForCapTagList] : this.props.baseLanguage;
+            const isBEEAppEnableForCapTagList = this.checkBeeEditorAllowedForLibrary();
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+
+            // Always render Subject CapTagListWithInput even when Bee editor is active for EMAIL channel
+            if (
+              val.id === 'template-subject' ||
+              !(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLangForCapTagList}].is_drag_drop`, false)) ||
+              isBEEAppEnableForCapTagList === false ||
+              channelForCapTagList !== 'EMAIL'
+            ) {
+              columns.push(
+                <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
+                  <CapTagListWithInput
+                    key={`input-${val.id}`}
+                    inputId={val.id}
+                    inputValue={this.state.formData[val.id] || ''}
+                    inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                    inputPlaceholder={val.placeholder || ''}
+                    inputErrorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    inputRequired={val.required || false}
+                    inputDisabled={val.disabled || false}
+                    headingText={val.label || ''}
+                    headingStyle={val.headingStyle || { marginTop: '3%', marginRight: '79%' }}
+                    headingType="h4"
+                    onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+                    onContextChange={this.props.onContextChange}
+                    location={this.props.location}
+                    tags={this.props.tags ? this.props.tags : []}
+                    injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                    className={val.className ? val.className : ''}
+                    userLocale={this.state.translationLang}
+                    selectedOfferDetails={this.props.selectedOfferDetails}
+                    eventContextTags={this.props?.eventContextTags}
+                    moduleFilterEnabled={moduleFilterEnabledForCapTagList}
+                    containerStyle={val.style || {}}
+                    inputProps={val.inputProps || {}}
+                    showInput={val.showInput !== false}
+                    showTagList={val.showTagList !== false}
+                  />
+                </CapColumn>
+              );
+            }
+            break;
           case "button":
             if (styling === 'semantic' && val.metaType === 'submit-button') {
               columns.push(

package/v2Components/TestAndPreviewSlidebox/PreviewSection.js

@@ -20,7 +20,7 @@ const PreviewSection = ({
       device={previewDevice}
       onDeviceChange={setPreviewDevice}
       customer={selectedCustomer}
-      subject={formData['template-subject']}
+      subject={previewDataHtml?.resolvedTitle || formData['template-subject']}
     >
       {isUpdatingPreview && (
         <CapRow className="loading-container">

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -108,6 +108,21 @@ const TestAndPreviewSlidebox = (props) => {
     requiredTags.some((tag) => !customValues[tag.fullPath])
   ), [requiredTags, customValues]);
 
+  // Function to resolve tags in text with custom values
+  const resolveTagsInText = (text, tagValues) => {
+    if (!text) return text;
+    let resolvedText = text;
+    
+    // Replace each tag with its custom value
+    Object.keys(tagValues).forEach((tagPath) => {
+      const tagName = tagPath.split('.').pop(); // Get the actual tag name from the path
+      const tagRegex = new RegExp(`{{${tagName}}}`, 'g');
+      resolvedText = resolvedText.replace(tagRegex, tagValues[tagPath] || `{{${tagName}}}`);
+    });
+    
+    return resolvedText;
+  };
+
   // Get the current content based on editor type
   const getCurrentContent = useMemo(() => {
     const currentTabData = formData[currentTab - 1];
@@ -380,9 +395,10 @@ const TestAndPreviewSlidebox = (props) => {
       setCustomValues(updatedValues);
 
       // Update preview with prefilled values
+      const resolvedSubject = resolveTagsInText(formData['template-subject'], updatedValues);
       const payload = {
         channel: EMAIL,
-        messageTitle: formData['template-subject'],
+        messageTitle: resolvedSubject,
         messageBody: getCurrentContent,
         resolvedTags: updatedValues,
         userId: selectedCustomer?.customerId,
@@ -501,9 +517,10 @@ const TestAndPreviewSlidebox = (props) => {
     setCustomValues(emptyValues);
 
     // Update preview with empty values
+    const resolvedSubject = resolveTagsInText(formData['template-subject'], emptyValues);
     const payload = {
       channel: EMAIL,
-      messageTitle: formData['template-subject'],
+      messageTitle: resolvedSubject,
       messageBody: getCurrentContent,
       resolvedTags: emptyValues,
       userId: selectedCustomer?.customerId,
@@ -517,9 +534,12 @@ const TestAndPreviewSlidebox = (props) => {
       // Include unsubscribe tag if content contains it
       const resolvedTags = { ...customValues };
 
+      // Resolve subject tags with custom values
+      const resolvedSubject = resolveTagsInText(formData['template-subject'], customValues);
+
       const payload = {
         channel: EMAIL,
-        messageTitle: formData['template-subject'],
+        messageTitle: resolvedSubject,
         messageBody: getCurrentContent,
         resolvedTags,
         userId: selectedCustomer?.customerId,
@@ -585,7 +605,7 @@ const TestAndPreviewSlidebox = (props) => {
       emailMessageContent: {
         channel: EMAIL,
         messageBody: previewData?.resolvedBody || getCurrentContent,
-        messageSubject: previewData?.resolvedTitle || formData['template-subject'],
+        messageSubject: previewData?.resolvedTitle || resolveTagsInText(formData['template-subject'], customValues),
       },
     }, messageMetaConfigId, (response) => {
       const payload = {

package/v2Containers/Email/index.js

@@ -100,6 +100,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       "template-name": {
         onChange: this.onTemplateNameChange,
       },
+      // allow tag insertion into Subject input field via a dedicated TagList
+      "title-tagList": {
+        onTagSelect: this.onTagSelect,
+      },
+      // unified subject field with input and tag selection
+      "template-subject": {
+        onTagSelect: this.onTagSelect,
+      },
       "template-version": {
         onSelect: this.handleVersionSelect,
         addVersion: this.addVersion,
@@ -646,7 +654,44 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   }
 
-  onTagSelect = (data) => {
+  onTagSelect = (data, currentTab, sourceVal) => {
+    // If tag is selected from Subject's TagList or unified subject field, insert into subject input
+    if (sourceVal && (sourceVal.id === 'title-tagList' || sourceVal.id === 'template-subject')) {
+      const tagToInsert = `{{${data}}}`;
+      const formData = _.cloneDeep(this.state.formData);
+      const fieldId = 'template-subject';
+      const input = document.getElementById(fieldId) || document.querySelector(`#${fieldId} input`);
+      let subjectValue = formData[fieldId] || '';
+      try {
+        if (input && (typeof input.selectionStart === 'number')) {
+          const startPos = input.selectionStart;
+          const endPos = input.selectionEnd;
+          subjectValue = `${subjectValue.substring(0, startPos)}${tagToInsert}${subjectValue.substring(endPos)}`;
+          formData[fieldId] = subjectValue;
+          this.setState({ formData }, () => {
+            try {
+              input.focus();
+              const newPos = startPos + tagToInsert.length;
+              input.selectionStart = newPos;
+              input.selectionEnd = newPos;
+            } catch (e) {}
+          });
+        } else {
+          subjectValue = `${subjectValue}${tagToInsert}`;
+          formData[fieldId] = subjectValue;
+          this.setState({ formData });
+          if (input) {
+            try { input.value = subjectValue; } catch (e) {}
+          }
+        }
+      } catch (e) {
+        // fallback safe append
+        formData[fieldId] = `${subjectValue}${tagToInsert}`;
+        this.setState({ formData });
+      }
+      return;
+    }
+
     const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
     const formData = _.cloneDeep(this.state.formData);
     const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
@@ -1546,8 +1591,24 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (schema.standalone) {
       if ((this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
       this.props.location.query.module === "library")) {
-        _.set(schema, 'standalone.sections[0].inputFields[0].style.display', "" );
-        _.set(schema, 'standalone.sections[0].inputFields[0].labelStyle.display', "");
+        // For the new unified cap-tag-list-with-input component, we want to show the Add label button
+        // but hide the input field in library mode
+        const subjectField = schema.standalone.sections[0].inputFields[0];
+        if (subjectField && subjectField.type === "cap-tag-list-with-input") {
+          // Only hide input in library mode, keep it visible in other modes
+          if (this.props.location.query.module === "library") {
+            _.set(schema, 'standalone.sections[0].inputFields[0].showInput', false);
+            _.set(schema, 'standalone.sections[0].inputFields[0].showTagList', true);
+          } else {
+            // In other modes (loyalty, dvs, timeline, coupon_expiry), keep both input and tag list visible
+            _.set(schema, 'standalone.sections[0].inputFields[0].showInput', true);
+            _.set(schema, 'standalone.sections[0].inputFields[0].showTagList', true);
+          }
+        } else {
+          // For backward compatibility with old separate fields
+          _.set(schema, 'standalone.sections[0].inputFields[0].style.display', "" );
+          _.set(schema, 'standalone.sections[0].inputFields[0].labelStyle.display', "");
+        }
       }
       this.setState({schema});
     }

package/v2Containers/Email/initialSchema.js

@@ -20,7 +20,7 @@ export const response = {
                     {
                       id: "template-subject",
                       placeholder: "Enter Email Subject",
-                      type: "input",
+                      type: "cap-tag-list-with-input",
                       metaType: "text",
                       datatype: "string",
                       required: true,
@@ -28,29 +28,15 @@ export const response = {
                       styling: "semantic",
                       order: 1,
                       width: 16,
-                      customComponent: false,
+                      customComponent: true,
                       standalone: true,
                       onlyDisplay: false,
                       errorMessage: "Email Subject cannot be empty.",
+                      supportedEvents: [
+                        "onChange",
+                        "onTagSelect",
+                      ],
                     },
-                    // {
-                    //     offset: 20,
-                    //     id: "title-tagList",
-                    //     label: "Tags",
-                    //     target: "message-title2",
-                    //     type: "tag-list",
-                    //     metaType: "List",
-                    //     datatype: "select",
-                    //     required: true,
-                    //     fluid: true,
-                    //     onlyDisplay: true,
-                    //     styling: "semantic",
-                    //     order: 1,
-                    //     customComponent: true,
-                    //     supportedEvents: [
-                    //       "onTagSelect",
-                    //     ],
-                    //   },
                   ],
                 },
               ],
@@ -283,7 +269,7 @@ export const response = {
                           metaType: "label",
                           type: "div",
                           primitive: true,
-                          value: <CapButton isAddBtn type="flat"><FormattedMessage {...messages.image}/></CapButton>,
+                          value: <CapButton isAddBtn type="flat"><FormattedMessage {...messages.image} /></CapButton>,
                           fluid: true,
                           onlyDisplay: false,
                           styling: "semantic",

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -188,7 +188,7 @@ const useEmailWrapper = ({
         CapNotification.error(message);
       }
     }
-  }, [isUploading, formatMessage, templatesActions, stopTimerGA, handleZipUploadError, showNextStep]);
+  }, [isUploading, formatMessage, stopTimerGA, handleZipUploadError, showNextStep]);
 
   const handleEdmDefaultTemplateSelection = useCallback((id) => {
     const data = find(CmsTemplates, { _id: id });
@@ -251,7 +251,7 @@ const useEmailWrapper = ({
     getCmsTemplatesInProgress,
     modeContent.id,
     SelectedEdmDefaultTemplate,
-    templatesActions,
+    // templatesActions,
     handleEdmDefaultTemplateSelection
   ]);
 

package/v2Containers/Line/Container/Wrapper/tests/index.test.js

@@ -5,7 +5,7 @@ import { initialReducer } from '../../../../../initialReducer';
 import { mountWithIntl } from '../../../../../helpers/intl-enzym-test-helpers';
 import { LineWrapper } from '../index';
 import { mockData } from './mockData';
-import {isValidText} from '../utils';
+import {isValidText, isValidWhatsappCtaText} from '../utils';
 import history from '../../../../../utils/history';
 
 let store;
@@ -92,5 +92,60 @@ describe('line wrapper test/>', () => {
       expect(isValidText(emptyString)).toBe(true);
     });
   });
+
+  describe('isValidWhatsappCtaText', () => {
+    it('should return false for non-string input', () => {
+      expect(isValidWhatsappCtaText(123)).toBe(false);
+      expect(isValidWhatsappCtaText(null)).toBe(false);
+      expect(isValidWhatsappCtaText(undefined)).toBe(false);
+      expect(isValidWhatsappCtaText({})).toBe(false);
+      expect(isValidWhatsappCtaText([])).toBe(false);
+      expect(isValidWhatsappCtaText(true)).toBe(false);
+    });
+
+    it('should return true for multilingual and symbol text', () => {
+      const valid = '確認一下 Привет مرحبا मान्य 123 @#&!?.:, -+/\\\'"=&₹€£$^(){}';
+      expect(isValidWhatsappCtaText(valid)).toBe(true);
+    });
+  
+    it('should return true for full allowed punctuation set', () => {
+      const allowed = 'A1 z9 @#&!?.:, -+/\\\'"=&₹€£$^(){}';
+      expect(isValidWhatsappCtaText(allowed)).toBe(true);
+    });
+  
+    it('should return false for whitespace-only', () => {
+      expect(isValidWhatsappCtaText('   ')).toBe(false);
+      expect(isValidWhatsappCtaText('\t\t')).toBe(false);
+    });
+  
+    it('should return true for leading and trailing spaces with valid text', () => {
+      expect(isValidWhatsappCtaText('  Hi')).toBe(true);
+      expect(isValidWhatsappCtaText('Hi  ')).toBe(true);
+    });
+  
+    it('should return false for control or markdown chars', () => {
+      expect(isValidWhatsappCtaText('Hello\nWorld')).toBe(false);
+      expect(isValidWhatsappCtaText('Hello\tWorld')).toBe(false);
+      expect(isValidWhatsappCtaText('*bold*')).toBe(false);
+      expect(isValidWhatsappCtaText('_under_')).toBe(false);
+      expect(isValidWhatsappCtaText('~strike~')).toBe(false);
+      expect(isValidWhatsappCtaText('`code`')).toBe(false);
+    });
+  
+    it('should return false for emojis, flags, ZWJ sequences and VS16', () => {
+      expect(isValidWhatsappCtaText('Heart ❤️')).toBe(false);
+      expect(isValidWhatsappCtaText('Flag 🇮🇳')).toBe(false);
+      expect(isValidWhatsappCtaText('Family 👨‍👩‍👧‍👦')).toBe(false);
+      expect(isValidWhatsappCtaText('Sun ☀️')).toBe(false);
+    });
+  
+    it('should return false for mixed valid text with emoji inside', () => {
+      expect(isValidWhatsappCtaText('Hello @# hi ❤️')).toBe(false);
+    });
+  
+    it('should return true for backslash usage', () => {
+      expect(isValidWhatsappCtaText('C:\\Path')).toBe(true);
+    });
+  });
   
 });

package/v2Containers/Line/Container/Wrapper/utils.js

@@ -78,10 +78,12 @@ export const isValidText = (text) => {
   return regex.test(text);
 };
 
-// WhatsApp CTA button text validation- Allow multilingual characters and typical symbols
+// WhatsApp CTA button text validation - whitelist approach
+// Allow: all letters and numbers (any language), regular space, and safe symbols
+// Safe symbols: @ # & ! ? . : , - + / \ ' " = & ₹ € £ $ ^ ( ) { }
 export const isValidWhatsappCtaText = (text) => {
   if (typeof text !== 'string') return false;
-  // - Disallow control chars (newlines, tabs, etc.) | markup chars: *, _, ~, ` | emojis (U+1F300–U+1FAFF)
-  const invalid = /[\n\r\t\b\f\v*_~`]|[\u{1F300}-\u{1FAFF}]/u;
-  return !invalid.test(text);
+  if (!/\S/.test(text)) return false; // disallow whitespace-only
+  const regex = /^[\p{L}\p{M}\p{N} @#&!?.:,\-+/\\'"=&₹€£$^(){}]*$/u;
+  return regex.test(text);
 };

package/v2Containers/MobilePush/Create/index.js

@@ -291,7 +291,29 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 rowClassName: 'mobile-push-row',
                 id: 'cta-external-link',
                 cols: [
-
+                  {
+                    // Add label control for external link input
+                    id: "title-tagList",
+                    label: "Add label",
+                    type: "tag-list",
+                    metaType: "List",
+                    datatype: "select",
+                    required: true,
+                    fluid: true,
+                    onlyDisplay: true,
+                    style: {
+                      marginRight: "10%",
+                      marginTop: "-3%",
+                    },
+                    styling: "semantic",
+                    order: 2,
+                    customComponent: true,
+                    // Helps handler identify the destination input
+                    target: inputId,
+                    supportedEvents: [
+                      "onTagSelect",
+                    ],
+                  },
                   {
                     id: inputId,
                     placeholder: this.props.intl.formatMessage(messages.externalLink),
@@ -304,8 +326,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                     width: 18,
                     offset: 1,
                     style: {
-                      width: '100%',
-
+                      width: '95%',
                     },
                     styling: "semantic",
                     order: 1,